TF-282 Fix bug email address is cut off when displaying on the mobile app

lib/features/composer/presentation/widgets/email_address_input_builder.dart

@@ -1,29 +1,31 @@
 
+import 'dart:async';
+
 import 'package:core/core.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_chips_input/flutter_chips_input.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
+import 'package:material_tag_editor/tag_editor.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/composer/presentation/extensions/prefix_email_address_extension.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnOpenExpandAddressActionClick = void Function();
 typedef OnSuggestionEmailAddress = Future<List<EmailAddress>> Function(String word);
-typedef OnUpdateListEmailAddressAction = void Function(
-  PrefixEmailAddress prefixEmailAddress,
-  List<EmailAddress> listEmailAddress
-);
+typedef OnUpdateListEmailAddressAction = void Function(PrefixEmailAddress, List<EmailAddress>);
 
 class EmailAddressInputBuilder {
 
-  final Key? keyInput;
   final BuildContext _context;
   final ImagePaths _imagePaths;
+  final AppToast _appToast;
   final ExpandMode expandMode;
   final PrefixEmailAddress _prefixEmailAddress;
   final List<EmailAddress> _listEmailAddress;
+  final TextEditingController? controller;
+  final bool? isInitial;
 
   OnOpenExpandAddressActionClick? _onOpenExpandAddressActionClick;
   OnUpdateListEmailAddressAction? _onUpdateListEmailAddressAction;
@@ -44,119 +46,135 @@ class EmailAddressInputBuilder {
   EmailAddressInputBuilder(
     this._context,
     this._imagePaths,
+    this._appToast,
     this._prefixEmailAddress,
     this._listEmailAddress,
     {
-      this.keyInput,
+      this.isInitial,
+      this.controller,
       this.expandMode = ExpandMode.COLLAPSE,
     }
   );
 
   Widget build() {
     return Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Padding(
+          padding: EdgeInsets.only(right: 8, top: 15),
+          child: Text(
+            '${_prefixEmailAddress.asName(_context)}:',
+            style: TextStyle(fontSize: 15, color: AppColor.colorHintEmailAddressInput))),
+        Expanded(child: _buildTagEditor()),
+        if (_prefixEmailAddress == PrefixEmailAddress.to)
           Padding(
-            padding: EdgeInsets.only(right: 8, top: _listEmailAddress.isNotEmpty ? 20 : 18),
-            child: Text(
-              '${_prefixEmailAddress.asName(_context)}:',
-              style: TextStyle(fontSize: 14, color: AppColor.nameUserColor, fontWeight: FontWeight.w500))),
-          Expanded(child: ChipsInput<EmailAddress>(
-            key: keyInput,
-            initialValue: _listEmailAddress,
-            textStyle: TextStyle(color: AppColor.nameUserColor, fontSize: 14, fontWeight: FontWeight.w500),
-            cursorColor: AppColor.primaryColor,
-            inputType: TextInputType.emailAddress,
-            decoration: InputDecoration(
-              border: InputBorder.none,
-              hintText: AppLocalizations.of(_context).hint_text_email_address,
-              hintMaxLines: 1,
-              hintStyle: TextStyle(color: AppColor.baseTextColor, fontSize: 14, fontWeight: FontWeight.w500)),
-            findSuggestions: (query) {
-              if (query.isNotEmpty && _onSuggestionEmailAddress != null) {
-                return _onSuggestionEmailAddress!(query);
-              }
-              return [];
-            },
-            onChanged: (data) {
-              if (_onUpdateListEmailAddressAction != null) {
-                _onUpdateListEmailAddressAction!(_prefixEmailAddress, data);
-              }
-            },
-            onChipInputActionDone: (state, value) {
-              if (GetUtils.isEmail(value)) {
-                state.selectSuggestion(EmailAddress(value, value));
-              }
-            },
-            onChipInputChangeFocusAction: (state, value) {
-              if (GetUtils.isEmail(value)) {
-                state.selectSuggestion(EmailAddress(value, value));
-              }
-            },
-            chipBuilder: (context, state, emailAddress) {
-              return InputChip(
-                key: ObjectKey(emailAddress),
-                label: Text(emailAddress.asString()),
-                labelStyle: TextStyle(color: AppColor.nameUserColor, fontSize: 12, fontWeight: FontWeight.w500),
-                backgroundColor: AppColor.emailAddressChipColor,
-                padding: EdgeInsets.all(3),
-                deleteIconColor: AppColor.baseTextColor,
-                avatar: CircleAvatar(
-                  backgroundColor: AppColor.avatarColor,
-                  child: Text(
-                    emailAddress.asString().isNotEmpty ? emailAddress.asString()[0].toUpperCase() : '',
-                    style: TextStyle(color: AppColor.appColor, fontSize: 12, fontWeight: FontWeight.w500))),
-                onDeleted: () => state.deleteChip(emailAddress),
-                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-              );
-            },
-            suggestionBuilder: (context, state, emailAddress) {
-              return Container(
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(8),
-                  border: Border.all(color: Colors.white),
-                  color: Colors.white),
-                child: ListTile(
-                  key: ObjectKey(emailAddress),
-                  leading: CircleAvatar(
-                    backgroundColor: AppColor.avatarColor,
-                    child: Text(
-                      emailAddress.asString().isNotEmpty ? emailAddress.asString()[0].toUpperCase() : '',
-                      style: TextStyle(color: AppColor.appColor, fontSize: 16, fontWeight: FontWeight.w500))),
-                  title: Text(
-                    emailAddress.asString(),
-                    style: TextStyle(color: AppColor.nameUserColor, fontSize: 14, fontWeight: FontWeight.w500)),
-                  subtitle: emailAddress.displayName.isNotEmpty && emailAddress.emailAddress.isNotEmpty
-                    ? Text(
-                        emailAddress.emailAddress,
-                        style: TextStyle(color: AppColor.baseTextColor, fontSize: 12, fontWeight: FontWeight.w500))
-                    : null,
-                  onTap: () => state.selectSuggestion(emailAddress),
-                ),
-              );
-            }
-          )),
-          if (_prefixEmailAddress == PrefixEmailAddress.to)
-            Padding(
-              padding: EdgeInsets.only(top: _listEmailAddress.isNotEmpty ? 6 : 3),
-              child: _buildButtonExpandAddress())
-        ]
+            padding: EdgeInsets.only(top: 4),
+            child: _buildButtonExpandAddress())
+      ]
     );
   }
 
   Widget _buildButtonExpandAddress() {
-    return IconButton(
-      color: AppColor.baseTextColor,
-      icon: SvgPicture.asset(
-        expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandAddress : _imagePaths.icMoreReceiver,
-        width: 20,
-        height: 20,
-        fit: BoxFit.fill),
-      onPressed: () {
-        if (_onOpenExpandAddressActionClick != null) {
-          _onOpenExpandAddressActionClick!();
-        }
-      }
+    return Material(
+        type: MaterialType.circle,
+        color: Colors.transparent,
+        child: IconButton(
+            icon: SvgPicture.asset(
+                expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandAddress : _imagePaths.icMoreReceiver,
+                width: 20,
+                height: 20,
+                fit: BoxFit.fill),
+            onPressed: () => _onOpenExpandAddressActionClick?.call()
+        )
+    );
+  }
+
+  Widget _buildTagEditor() {
+    return StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
+      return TagEditor<EmailAddress>(
+        length: _listEmail.length,
+        controller: controller,
+        keyboardType: TextInputType.emailAddress,
+        textInputAction: TextInputAction.done,
+        hasAddButton: false,
+        resetTextOnSubmitted: true,
+        textStyle: TextStyle(color: AppColor.colorEmailAddress, fontSize: 14, fontWeight: FontWeight.w500),
+        onSubmitted: (value) {
+          if (GetUtils.isEmail(value)) {
+            setState(() => _listEmailAddress.add(EmailAddress(value, value)));
+            _onUpdateListEmailAddressAction?.call(_prefixEmailAddress, _listEmailAddress);
+          } else {
+            _appToast.showErrorToast(AppLocalizations.of(context).email_address_is_not_in_the_correct_format);
+          }
+        },
+        inputDecoration: InputDecoration(
+            border: InputBorder.none,
+            hintText: AppLocalizations.of(_context).hint_text_email_address,
+            hintMaxLines: 1,
+            hintStyle: TextStyle(color: AppColor.colorHintEmailAddressInput, fontSize: 14, fontWeight: FontWeight.w500)
+        ),
+        tagBuilder: (context, index) => Padding(
+            padding: EdgeInsets.only(top: kIsWeb ? 8 : 0),
+            child: Chip(
+              labelPadding: EdgeInsets.only(left: 8, right: 8, bottom: 2),
+              label: Text(_listEmail[index], maxLines: 1, overflow: TextOverflow.ellipsis),
+              deleteIcon: SvgPicture.asset(_imagePaths.icDeleteEmailAddress, fit: BoxFit.fill),
+              labelStyle: TextStyle(color: AppColor.colorEmailAddress, fontSize: 14, fontWeight: FontWeight.w500),
+              backgroundColor: AppColor.emailAddressChipColor,
+              avatar: CircleAvatar(
+                  backgroundColor: AppColor.colorTextButton,
+                  child: Text(
+                      _listEmail[index].isNotEmpty ? _listEmail[index][0].toUpperCase() : '',
+                      style: TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.w500))),
+              onDeleted: () {
+                setState(() => _listEmailAddress.removeAt(index));
+                _onUpdateListEmailAddressAction?.call(_prefixEmailAddress, _listEmailAddress);
+              },
+            )),
+        onTagChanged: (String value) {},
+        findSuggestions: (String query) {
+          if (query.isNotEmpty && _onSuggestionEmailAddress != null) {
+            return _onSuggestionEmailAddress!(query);
+          }
+          return [];
+        },
+        suggestionBuilder: (context, tagEditorState, emailAddress) {
+          return _buildSuggestionItem(setState, context, tagEditorState, emailAddress);
+        },
+      );
+    });
+  }
+
+  List<String> get _listEmail => _listEmailAddress.map((emailAddress) => emailAddress.asString()).toList();
+
+  Widget _buildSuggestionItem(StateSetter setState, BuildContext context, TagsEditorState<EmailAddress> tagEditorState, EmailAddress emailAddress) {
+    return Container(
+      decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          border: Border.all(color: Colors.white),
+          color: Colors.white),
+      child: ListTile(
+        key: ObjectKey(emailAddress),
+        leading: CircleAvatar(
+            backgroundColor: AppColor.avatarColor,
+            child: Text(
+                emailAddress.asString().isNotEmpty ? emailAddress.asString()[0].toUpperCase() : '',
+                style: TextStyle(color: AppColor.appColor, fontSize: 16, fontWeight: FontWeight.w500))),
+        title: Text(
+            emailAddress.asString(),
+            style: TextStyle(color: AppColor.nameUserColor, fontSize: 14, fontWeight: FontWeight.w500)),
+        subtitle: emailAddress.displayName.isNotEmpty && emailAddress.emailAddress.isNotEmpty
+            ? Text(
+            emailAddress.emailAddress,
+            style: TextStyle(color: AppColor.baseTextColor, fontSize: 12, fontWeight: FontWeight.w500))
+            : null,
+        onTap: () {
+          setState(() => _listEmailAddress.add(emailAddress));
+          tagEditorState.selectSuggestion(emailAddress);
+          _onUpdateListEmailAddressAction?.call(_prefixEmailAddress, _listEmailAddress);
+        },
+      ),
     );
   }
 }

lib/features/composer/presentation/widgets/suggestions_box_controller.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+class SuggestionsBoxController {
+  final BuildContext context;
+
+  OverlayEntry? overlayEntry;
+
+  bool _isOpened = false;
+
+  bool get isOpened => _isOpened;
+
+  SuggestionsBoxController(this.context);
+
+  void open() {
+    if (_isOpened) return;
+    assert(overlayEntry != null);
+    Overlay.of(context)?.insert(overlayEntry!);
+    _isOpened = true;
+  }
+
+  void close() {
+    if (!_isOpened) return;
+    assert(overlayEntry != null);
+    overlayEntry!.remove();
+    _isOpened = false;
+  }
+
+  void toggle() {
+    if (_isOpened) {
+      close();
+    } else {
+      open();
+    }
+  }
+}

lib/features/composer/presentation/widgets/top_bar_composer_widget_builder.dart

@@ -68,16 +68,9 @@ class TopBarComposerWidgetBuilder {
       mainAxisAlignment: MainAxisAlignment.start,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        // IconButton(
-        //   key: Key('button_file_share'),
-        //   color: AppColor.baseTextColor,
-        //   icon: SvgPicture.asset(_imagePaths.icComposerFileShare, color: AppColor.baseTextColor, fit: BoxFit.fill),
-        //   onPressed: () {}
-        // ),
         IconButton(
             key: Key('button_attachment'),
-            color: AppColor.baseTextColor,
-            icon: SvgPicture.asset(_imagePaths.icShare, color: AppColor.baseTextColor, fit: BoxFit.fill),
+            icon: SvgPicture.asset(_imagePaths.icShare, fit: BoxFit.fill),
             onPressed: () {
               if (_onAttachFileActionClick != null) {
                 _onAttachFileActionClick!();
@@ -98,12 +91,6 @@ class TopBarComposerWidgetBuilder {
             }
         ),
         SizedBox(width: 8)
-        // IconButton(
-        //   key: Key('button_menu_composer'),
-        //   color: AppColor.baseTextColor,
-        //   icon: SvgPicture.asset(_imagePaths.icComposerMenu, color: AppColor.baseTextColor, fit: BoxFit.fill),
-        //   onPressed: () {}
-        // )
       ]
     );
   }