TF-3007 [SEARCH] Support drag and drop between From & To field (#3154)

lib/features/mailbox_dashboard/presentation/controller/advanced_filter_controller.dart

@@ -9,6 +9,7 @@ import 'package:super_tag_editor/tag_editor.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
 import 'package:tmail_ui_user/features/composer/domain/state/get_autocomplete_state.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/get_autocomplete_interactor.dart';
+import 'package:tmail_ui_user/features/composer/presentation/model/draggable_email_address.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
@@ -477,6 +478,24 @@ class AdvancedFilterController extends BaseController {
     }
   }
 
+  void removeDraggableEmailAddress(DraggableEmailAddress draggableEmailAddress) {
+    log('AdvancedFilterController::removeDraggableEmailAddress:removeDraggableEmailAddress: $draggableEmailAddress');
+    switch(draggableEmailAddress.prefix) {
+      case PrefixEmailAddress.to:
+        listToEmailAddress.remove(draggableEmailAddress.emailAddress);
+        toAddressExpandMode.value = ExpandMode.EXPAND;
+        toAddressExpandMode.refresh();
+        break;
+      case PrefixEmailAddress.from:
+        listFromEmailAddress.remove(draggableEmailAddress.emailAddress);
+        fromAddressExpandMode.value = ExpandMode.EXPAND;
+        fromAddressExpandMode.refresh();
+        break;
+      default:
+        break;
+    }
+  }
+
   @override
   void onClose() {
     _removeFocusListener();

lib/features/mailbox_dashboard/presentation/model/search/advanced_search_filter.dart

@@ -1,5 +1,6 @@
 import 'package:core/core.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:model/email/prefix_email_address.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 enum AdvancedSearchFilterField {
@@ -64,6 +65,17 @@ enum AdvancedSearchFilterField {
         color: AppColor.colorContentEmail);
   }
 
+  PrefixEmailAddress getPrefixEmailAddress() {
+    switch (this) {
+      case AdvancedSearchFilterField.from:
+        return PrefixEmailAddress.from;
+      case AdvancedSearchFilterField.to:
+        return PrefixEmailAddress.to;
+      default:
+        return PrefixEmailAddress.cc;
+    }
+  }
+
   TextStyle getHintTextStyle() {
     return const TextStyle(
         fontSize: 16,

lib/features/mailbox_dashboard/presentation/styles/text_field_autocomplete_email_address_style.dart

@@ -1,9 +0,0 @@
-import 'package:flutter/material.dart';
-
-class TextFieldAutocompleteEmailAddressStyle {
-  static const TextStyle inputTextStyle = TextStyle(
-    color: Colors.black,
-    fontSize: 16,
-    fontWeight: FontWeight.w400,
-  );
-}

lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_input_form.dart

@@ -39,6 +39,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
             onUpdateListEmailAddressAction: controller.updateListEmailAddress,
             onSuggestionEmailAddress: controller.getAutoCompleteSuggestion,
             onSearchAction: controller.onSearchAction,
+            onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
           )),
           Obx(() => TextFieldAutocompleteEmailAddressWeb(
             field: AdvancedSearchFilterField.to,
@@ -52,6 +53,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
             onUpdateListEmailAddressAction: controller.updateListEmailAddress,
             onSuggestionEmailAddress: controller.getAutoCompleteSuggestion,
             onSearchAction: controller.onSearchAction,
+            onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
           )),
           _buildFilterField(
             textEditingController: controller.subjectFilterInputController,

lib/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_tag_item_widget_web.dart

@@ -6,6 +6,8 @@ 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:model/extensions/email_address_extension.dart';
+import 'package:tmail_ui_user/features/composer/presentation/model/draggable_email_address.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/draggable_recipient_tag_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/advanced_search_filter.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/autocomplete_tag_item_web_style.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/avatar_tag_item_widget.dart';
@@ -48,6 +50,13 @@ class AutoCompleteTagItemWidgetWeb extends StatelessWidget {
             top: AutoCompleteTagItemWebStyle.paddingTop,
             end: isCollapsed ? AutoCompleteTagItemWebStyle.paddingEnd : 0,
           ),
+          child: Draggable<DraggableEmailAddress>(
+            data: DraggableEmailAddress(
+              emailAddress: currentEmailAddress,
+              prefix: field.getPrefixEmailAddress()
+            ),
+            feedback: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
+            childWhenDragging: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
             child: TextFieldTapRegion(
               child: InkWell(
                 onTap: () => isCollapsed
@@ -86,6 +95,7 @@ class AutoCompleteTagItemWidgetWeb extends StatelessWidget {
               ),
             ),
           ),
+        ),
         if (isCollapsed)
           TMailButtonWidget.fromText(
             margin: AutoCompleteTagItemWebStyle.marginCollapsed,

lib/features/mailbox_dashboard/presentation/widgets/advanced_search/text_field_autocomplete_email_address_web.dart

@@ -11,6 +11,8 @@ import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
 import 'package:model/extensions/email_address_extension.dart';
 import 'package:model/mailbox/expand_mode.dart';
 import 'package:super_tag_editor/tag_editor.dart';
+import 'package:tmail_ui_user/features/composer/presentation/model/draggable_email_address.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/recipient_composer_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/advanced_search_filter.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/suggesstion_email_address.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/advanced_search_input_form_style.dart';
@@ -40,6 +42,7 @@ class TextFieldAutocompleteEmailAddressWeb extends StatefulWidget {
   final OnUpdateListEmailAddressAction? onUpdateListEmailAddressAction;
   final OnDeleteEmailAddressTypeAction? onDeleteEmailAddressTypeAction;
   final OnShowFullListEmailAddressAction? onShowFullListEmailAddressAction;
+  final OnRemoveDraggableEmailAddressAction? onRemoveDraggableEmailAddressAction;
   final TextEditingController? controller;
   final VoidCallback? onSearchAction;
 
@@ -58,6 +61,7 @@ class TextFieldAutocompleteEmailAddressWeb extends StatefulWidget {
     this.onUpdateListEmailAddressAction,
     this.onDeleteEmailAddressTypeAction,
     this.onShowFullListEmailAddressAction,
+    this.onRemoveDraggableEmailAddressAction,
     this.controller,
     this.onSearchAction,
   }) : super(key: key);
@@ -68,6 +72,7 @@ class TextFieldAutocompleteEmailAddressWeb extends StatefulWidget {
 
 class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocompleteEmailAddressWeb> {
   bool _lastTagFocused = false;
+  bool _isDragging = false;
   late List<EmailAddress> _currentListEmailAddress;
   Timer? _gapBetweenTagChangedAndFindSuggestion;
 
@@ -105,6 +110,23 @@ class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocomp
               Expanded(
                 child: StatefulBuilder(
                   builder: ((context, setState) {
+                    return DragTarget<DraggableEmailAddress>(
+                      onAcceptWithDetails: (draggableEmailAddress) =>
+                        _handleAcceptDraggableEmailAddressAction(
+                          draggableEmailAddress.data,
+                          setState
+                        ),
+                      onLeave: (draggableEmailAddress) {
+                        if (_isDragging) {
+                          setState(() => _isDragging = false);
+                        }
+                      },
+                      onMove: (details) {
+                        if (!_isDragging) {
+                          setState(() => _isDragging = true);
+                        }
+                      },
+                      builder: (_, __, ___) {
                         return TagEditor<SuggestionEmailAddress>(
                           key: widget.keyTagEditor,
                           length: _collapsedListEmailAddress.length,
@@ -132,7 +154,9 @@ class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocomp
                           borderSize: TextFieldAutoCompleteEmailAddressWebStyles.borderWidth,
                           focusedBorderColor: TextFieldAutoCompleteEmailAddressWebStyles.focusedBorderColor,
                           enableBorder: true,
-                      enableBorderColor: AppColor.colorInputBorderCreateMailbox,
+                          enableBorderColor: _isDragging
+                            ? AppColor.primaryColor
+                            : AppColor.colorInputBorderCreateMailbox,
                           minTextFieldWidth: TextFieldAutoCompleteEmailAddressWebStyles.minTextFieldWidth,
                           resetTextOnSubmitted: true,
                           autoScrollToInput: false,
@@ -189,6 +213,8 @@ class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocomp
                             }
                           },
                         );
+                      }
+                    );
                   })
                 ),
               ),
@@ -340,4 +366,25 @@ class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocomp
       return null;
     }
   }
+
+  void _handleAcceptDraggableEmailAddressAction(
+    DraggableEmailAddress draggableEmailAddress,
+    StateSetter stateSetter
+  ) {
+    log('_TextFieldAutocompleteEmailAddressWebState::_handleAcceptDraggableEmailAddressAction:draggableEmailAddress = $draggableEmailAddress');
+    if (draggableEmailAddress.prefix != widget.field.getPrefixEmailAddress()) {
+      if (!_currentListEmailAddress.contains(draggableEmailAddress.emailAddress)) {
+        stateSetter(() {
+          _currentListEmailAddress.add(draggableEmailAddress.emailAddress);
+          _isDragging = false;
+        });
+        _updateListEmailAddressAction();
+      } else if (_isDragging) {
+        stateSetter(() => _isDragging = false);
+      }
+      widget.onRemoveDraggableEmailAddressAction?.call(draggableEmailAddress);
+    } else if (_isDragging) {
+      stateSetter(() => _isDragging = false);
+    }
+  }
 }