TF-2119 Implement drag and drop between recipients

(cherry picked from commit 958940c8a79d4f33eb52fd69718ce1b5c8daaeaa)
2023-09-14 12:43:05 +07:00
parent eaa0e8191f
commit e1dd99c613
13 changed files with 283 additions and 150 deletions
@@ -1,5 +1,7 @@
 import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/extensions/string_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/views/avatar/gradient_circle_avatar_icon.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -34,16 +36,11 @@ class DraggableRecipientTagWidget extends StatelessWidget {
          mainAxisSize: MainAxisSize.min,
          children: [
            if (emailAddress.displayName.isNotEmpty)
-              SizedBox(
-                width: DraggableRecipientTagWidgetStyle.avatarIconSize,
-                height: DraggableRecipientTagWidgetStyle.avatarIconSize,
-                child: CircleAvatar(
-                  backgroundColor: DraggableRecipientTagWidgetStyle.avatarBackgroundColor,
-                  child: Text(
-                    emailAddress.displayName[0].toUpperCase(),
-                    style: DraggableRecipientTagWidgetStyle.avatarLabelTextStyle
-                  )
-                ),
+              GradientCircleAvatarIcon(
+                colors: emailAddress.avatarColors,
+                label: emailAddress.displayName.firstLetterToUpperCase,
+                labelFontSize: DraggableRecipientTagWidgetStyle.avatarLabelFontSize,
+                iconSize: DraggableRecipientTagWidgetStyle.avatarIconSize,
              ),
            Padding(
              padding: DraggableRecipientTagWidgetStyle.labelPadding,
@@ -14,11 +14,12 @@ 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/extensions/prefix_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/model/prefix_recipient_state.dart';
+import 'package:tmail_ui_user/features/composer/presentation/model/suggestion_email_address.dart';
 import 'package:tmail_ui_user/features/composer/presentation/styles/recipient_composer_widget_style.dart';
 import 'package:tmail_ui_user/features/composer/presentation/widgets/recipient_suggestion_item_widget.dart';
 import 'package:tmail_ui_user/features/composer/presentation/widgets/recipient_tag_item_widget.dart';
-import 'package:tmail_ui_user/features/composer/presentation/widgets/suggestion_email_address.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/utils/app_constants.dart';

@@ -28,6 +29,8 @@ typedef OnAddEmailAddressTypeAction = void Function(PrefixEmailAddress prefix);
 typedef OnDeleteEmailAddressTypeAction = void Function(PrefixEmailAddress prefix);
 typedef OnShowFullListEmailAddressAction = void Function(PrefixEmailAddress prefix);
 typedef OnFocusEmailAddressChangeAction = void Function(PrefixEmailAddress prefix, bool isFocus);
+typedef OnRemoveDraggableEmailAddressAction = void Function(DraggableEmailAddress draggableEmailAddress);
+typedef OnDeleteTagAction = void Function(EmailAddress emailAddress);

 class RecipientComposerWidget extends StatefulWidget {

@@ -48,6 +51,7 @@ class RecipientComposerWidget extends StatefulWidget {
  final OnDeleteEmailAddressTypeAction? onDeleteEmailAddressTypeAction;
  final OnShowFullListEmailAddressAction? onShowFullListEmailAddressAction;
  final OnFocusEmailAddressChangeAction? onFocusEmailAddressChangeAction;
+  final OnRemoveDraggableEmailAddressAction? onRemoveDraggableEmailAddressAction;
  final VoidCallback? onFocusNextAddressAction;
  final EdgeInsetsGeometry? padding;
  final EdgeInsetsGeometry? margin;
@@ -74,6 +78,7 @@ class RecipientComposerWidget extends StatefulWidget {
    this.onShowFullListEmailAddressAction,
    this.onFocusEmailAddressChangeAction,
    this.onFocusNextAddressAction,
+    this.onRemoveDraggableEmailAddressAction,
  });

  @override
@@ -84,6 +89,7 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {

  Timer? _gapBetweenTagChangedAndFindSuggestion;
  bool _lastTagFocused = false;
+  bool _isDragging = false;
  late List<EmailAddress> _currentListEmailAddress;

  final _imagePaths = Get.find<ImagePaths>();
@@ -94,6 +100,14 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
    _currentListEmailAddress = widget.listEmailAddress;
  }

+  @override
+  void didUpdateWidget(covariant RecipientComposerWidget oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.listEmailAddress != widget.listEmailAddress) {
+      _currentListEmailAddress = widget.listEmailAddress;
+    }
+  }
+
  @override
  Widget build(BuildContext context) {
    return Container(
@@ -130,100 +144,82 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                  }
                  return KeyEventResult.ignored;
                },
-                child: TagEditor<SuggestionEmailAddress>(
-                  key: widget.keyTagEditor,
-                  length: _collapsedListEmailAddress.length,
-                  controller: widget.controller,
-                  focusNode: widget.focusNode,
-                  autoDisposeFocusNode: widget.autoDisposeFocusNode,
-                  keyboardType: TextInputType.emailAddress,
-                  textInputAction: TextInputAction.done,
-                  debounceDuration: const Duration(milliseconds: 150),
-                  hasAddButton: false,
-                  tagSpacing: 8,
-                  autofocus: widget.prefix != PrefixEmailAddress.to && _currentListEmailAddress.isEmpty,
-                  minTextFieldWidth: 20,
-                  resetTextOnSubmitted: true,
-                  suggestionsBoxElevation: 20.0,
-                  suggestionsBoxBackgroundColor: Colors.white,
-                  suggestionsBoxRadius: 20,
-                  suggestionsBoxMaxHeight: 350,
-                  textStyle: RecipientComposerWidgetStyle.inputTextStyle,
-                  onFocusTagAction: (focused) {
-                    setState(() {
-                      _lastTagFocused = focused;
-                    });
-                  },
-                  onDeleteTagAction: () {
-                    if (_currentListEmailAddress.isNotEmpty) {
-                      setState(_currentListEmailAddress.removeLast);
-                      widget.onUpdateListEmailAddressAction?.call(widget.prefix, _currentListEmailAddress);
-                    }
-                  },
-                  onSelectOptionAction: (item) {
-                    if (!_isDuplicatedRecipient(item.emailAddress.emailAddress)) {
-                      setState(() => _currentListEmailAddress.add(item.emailAddress));
-                      widget.onUpdateListEmailAddressAction?.call(widget.prefix, _currentListEmailAddress);
-                    }
-                  },
-                  onSubmitted: (value) {
-                    final textTrim = value.trim();
-                    if (!_isDuplicatedRecipient(textTrim)) {
-                      setState(() => _currentListEmailAddress.add(EmailAddress(null, textTrim)));
-                      widget.onUpdateListEmailAddressAction?.call(widget.prefix, _currentListEmailAddress);
-                    }
-                  },
-                  inputDecoration: const InputDecoration(border: InputBorder.none),
-                  tagBuilder: (context, index) {
-                    final currentEmailAddress = _currentListEmailAddress[index];
-                    final isLatestEmail = currentEmailAddress == _currentListEmailAddress.last;
+                child: StatefulBuilder(
+                  builder: (context, stateSetter) {
+                    return DragTarget<DraggableEmailAddress>(
+                      builder: (context, candidateData, rejectedData) {
+                        return TagEditor<SuggestionEmailAddress>(
+                          key: widget.keyTagEditor,
+                          length: _collapsedListEmailAddress.length,
+                          controller: widget.controller,
+                          focusNode: widget.focusNode,
+                          enableBorder: _isDragging,
+                          borderRadius: RecipientComposerWidgetStyle.enableBorderRadius,
+                          enableBorderColor: RecipientComposerWidgetStyle.enableBorderColor,
+                          autoDisposeFocusNode: widget.autoDisposeFocusNode,
+                          keyboardType: TextInputType.emailAddress,
+                          textInputAction: TextInputAction.done,
+                          debounceDuration: const Duration(milliseconds: 150),
+                          hasAddButton: false,
+                          tagSpacing: 8,
+                          autofocus: widget.prefix != PrefixEmailAddress.to && _currentListEmailAddress.isEmpty,
+                          minTextFieldWidth: 20,
+                          resetTextOnSubmitted: true,
+                          suggestionsBoxElevation: 20.0,
+                          suggestionsBoxBackgroundColor: Colors.white,
+                          suggestionsBoxRadius: 20,
+                          suggestionsBoxMaxHeight: 350,
+                          textStyle: RecipientComposerWidgetStyle.inputTextStyle,
+                          onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, stateSetter),
+                          onDeleteTagAction: () => _handleDeleteLatestTagAction.call(stateSetter),
+                          onSelectOptionAction: (item) => _handleSelectOptionAction.call(item, stateSetter),
+                          onSubmitted: (value) => _handleSubmitTagAction.call(value, stateSetter),
+                          inputDecoration: const InputDecoration(border: InputBorder.none),
+                          tagBuilder: (context, index) {
+                            final currentEmailAddress = _currentListEmailAddress[index];
+                            final isLatestEmail = currentEmailAddress == _currentListEmailAddress.last;

-                    return RecipientTagItemWidget(
-                      prefix: widget.prefix,
-                      currentEmailAddress: currentEmailAddress,
-                      currentListEmailAddress: _currentListEmailAddress,
-                      collapsedListEmailAddress: _collapsedListEmailAddress,
-                      isLatestEmail: isLatestEmail,
-                      isCollapsed: _isCollapse,
-                      isLatestTagFocused: _lastTagFocused,
-                      onDeleteTagAction: () {
-                        setState(() => _currentListEmailAddress.removeAt(index));
-                        widget.onUpdateListEmailAddressAction?.call(widget.prefix, _currentListEmailAddress);
+                            return RecipientTagItemWidget(
+                              prefix: widget.prefix,
+                              currentEmailAddress: currentEmailAddress,
+                              currentListEmailAddress: _currentListEmailAddress,
+                              collapsedListEmailAddress: _collapsedListEmailAddress,
+                              isLatestEmail: isLatestEmail,
+                              isCollapsed: _isCollapse,
+                              isLatestTagFocused: _lastTagFocused,
+                              onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, stateSetter),
+                              onShowFullAction: widget.onShowFullListEmailAddressAction,
+                            );
+                          },
+                          onTagChanged: (value) => _handleOnTagChangeAction.call(value, stateSetter),
+                          findSuggestions: _findSuggestions,
+                          useDefaultHighlight: false,
+                          suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, index, length, highlight, suggestionValid) {
+                            return RecipientSuggestionItemWidget(
+                              suggestionState: suggestionEmailAddress.state,
+                              emailAddress: suggestionEmailAddress.emailAddress,
+                              suggestionValid: suggestionValid,
+                              highlight: highlight,
+                              onSelectedAction: (emailAddress) {
+                                stateSetter(() => _currentListEmailAddress.add(emailAddress));
+                                _updateListEmailAddressAction();
+                                tagEditorState.resetTextField();
+                                tagEditorState.closeSuggestionBox();
+                              },
+                            );
+                          },
+                        );
                      },
-                      onShowFullAction: widget.onShowFullListEmailAddressAction,
-                    );
-                  },
-                  onTagChanged: (value) {
-                    final textTrim = value.trim();
-                    if (!_isDuplicatedRecipient(textTrim)) {
-                      setState(() => _currentListEmailAddress.add(EmailAddress(null, textTrim)));
-                      widget.onUpdateListEmailAddressAction?.call(widget.prefix, _currentListEmailAddress);
-                    }
-                    _gapBetweenTagChangedAndFindSuggestion = Timer(
-                        const Duration(seconds: 1),
-                        _handleGapBetweenTagChangedAndFindSuggestion);
-                  },
-                  findSuggestions: _findSuggestions,
-                  useDefaultHighlight: false,
-                  suggestionBuilder: (
-                    context,
-                    tagEditorState,
-                    suggestionEmailAddress,
-                    index,
-                    length,
-                    highlight,
-                    suggestionValid
-                  ) {
-                    return RecipientSuggestionItemWidget(
-                      suggestionState: suggestionEmailAddress.state,
-                      emailAddress: suggestionEmailAddress.emailAddress,
-                      suggestionValid: suggestionValid,
-                      highlight: highlight,
-                      onSelectedAction: (emailAddress) {
-                        setState(() => _currentListEmailAddress.add(emailAddress));
-                        widget.onUpdateListEmailAddressAction?.call(widget.prefix, _currentListEmailAddress);
-                        tagEditorState.resetTextField();
-                        tagEditorState.closeSuggestionBox();
+                      onAccept: (draggableEmailAddress) => _handleAcceptDraggableEmailAddressAction(draggableEmailAddress, stateSetter),
+                      onLeave: (draggableEmailAddress) {
+                        if (_isDragging) {
+                          stateSetter(() => _isDragging = false);
+                        }
+                      },
+                      onMove: (details) {
+                        if (!_isDragging) {
+                          stateSetter(() => _isDragging = true);
+                        }
                      },
                    );
                  },
@@ -327,6 +323,92 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
  }

  void _handleGapBetweenTagChangedAndFindSuggestion() {
-    log('EmailAddressInputBuilder::_handleGapBetweenTagChangedAndFindSuggestion(): Timeout');
+    log('_RecipientComposerWidgetState::_handleGapBetweenTagChangedAndFindSuggestion:Timeout');
+  }
+
+  void _updateListEmailAddressAction() {
+    widget.onUpdateListEmailAddressAction?.call(
+      widget.prefix,
+      _currentListEmailAddress
+    );
+  }
+
+  void _handleFocusTagAction(bool focused, StateSetter stateSetter) {
+    stateSetter(() => _lastTagFocused = focused);
+  }
+
+  void _handleDeleteLatestTagAction(StateSetter stateSetter) {
+    if (_currentListEmailAddress.isNotEmpty) {
+      stateSetter(_currentListEmailAddress.removeLast);
+      _updateListEmailAddressAction();
+    }
+  }
+
+  void _handleDeleteTagAction(EmailAddress emailAddress, StateSetter stateSetter) {
+    if (_currentListEmailAddress.isNotEmpty) {
+      stateSetter(() => _currentListEmailAddress.remove(emailAddress));
+      _updateListEmailAddressAction();
+    }
+  }
+
+  void _handleSelectOptionAction(
+    SuggestionEmailAddress suggestionEmailAddress,
+    StateSetter stateSetter
+  ) {
+    if (!_isDuplicatedRecipient(suggestionEmailAddress.emailAddress.emailAddress)) {
+      stateSetter(() => _currentListEmailAddress.add(suggestionEmailAddress.emailAddress));
+      _updateListEmailAddressAction();
+    }
+  }
+
+  void _handleSubmitTagAction(
+    String value,
+    StateSetter stateSetter
+  ) {
+    final textTrim = value.trim();
+    if (!_isDuplicatedRecipient(textTrim)) {
+      stateSetter(() => _currentListEmailAddress.add(EmailAddress(null, textTrim)));
+      _updateListEmailAddressAction();
+    }
+  }
+
+  void _handleOnTagChangeAction(
+    String value,
+    StateSetter stateSetter
+  ) {
+    final textTrim = value.trim();
+    if (!_isDuplicatedRecipient(textTrim)) {
+      stateSetter(() => _currentListEmailAddress.add(EmailAddress(null, textTrim)));
+      _updateListEmailAddressAction();
+    }
+    _gapBetweenTagChangedAndFindSuggestion = Timer(
+      const Duration(seconds: 1),
+      _handleGapBetweenTagChangedAndFindSuggestion
+    );
+  }
+
+  void _handleAcceptDraggableEmailAddressAction(
+    DraggableEmailAddress draggableEmailAddress,
+    StateSetter stateSetter
+  ) {
+    log('_RecipientComposerWidgetState::_handleAcceptDraggableEmailAddressAction: $draggableEmailAddress');
+    if (draggableEmailAddress.prefix != widget.prefix) {
+      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);
+      }
+    }
  }
 }
@@ -7,8 +7,8 @@ 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:super_tag_editor/widgets/rich_text_widget.dart';
+import 'package:tmail_ui_user/features/composer/presentation/model/suggestion_email_address.dart';
 import 'package:tmail_ui_user/features/composer/presentation/styles/recipient_suggestion_item_widget_style.dart';
-import 'package:tmail_ui_user/features/composer/presentation/widgets/suggestion_email_address.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/avatar_suggestion_item_widget.dart';

 typedef OnSelectedRecipientSuggestionAction = Function(EmailAddress emailAddress);
@@ -12,7 +12,9 @@ import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
 import 'package:model/email/prefix_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/styles/recipient_tag_item_widget_style.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/draggable_recipient_tag_widget.dart';
 import 'package:tmail_ui_user/features/composer/presentation/widgets/recipient_composer_widget.dart';

 class RecipientTagItemWidget extends StatelessWidget {
@@ -25,7 +27,7 @@ class RecipientTagItemWidget extends StatelessWidget {
  final List<EmailAddress> currentListEmailAddress;
  final List<EmailAddress> collapsedListEmailAddress;
  final OnShowFullListEmailAddressAction? onShowFullAction;
-  final VoidCallback? onDeleteTagAction;
+  final OnDeleteTagAction? onDeleteTagAction;

  final _imagePaths = Get.find<ImagePaths>();

@@ -55,33 +57,41 @@ class RecipientTagItemWidget extends StatelessWidget {
            onTap: () => isCollapsed
              ? onShowFullAction?.call(prefix)
              : null,
-            child: Chip(
-              labelPadding: EdgeInsetsDirectional.symmetric(
-                horizontal: 4,
-                vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2
+            child: Draggable<DraggableEmailAddress>(
+              data: DraggableEmailAddress(emailAddress: currentEmailAddress, prefix: prefix),
+              feedback: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
+              childWhenDragging: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
+              child: MouseRegion(
+                cursor: SystemMouseCursors.grab,
+                child: Chip(
+                  labelPadding: EdgeInsetsDirectional.symmetric(
+                    horizontal: 4,
+                    vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2
+                  ),
+                  label: Text(
+                    currentEmailAddress.asString(),
+                    maxLines: 1,
+                    overflow: CommonTextStyle.defaultTextOverFlow,
+                    softWrap: CommonTextStyle.defaultSoftWrap,
+                  ),
+                  deleteIcon: SvgPicture.asset(_imagePaths.icClose, fit: BoxFit.fill),
+                  labelStyle: RecipientTagItemWidgetStyle.labelTextStyle,
+                  backgroundColor: _getTagBackgroundColor(),
+                  shape: RoundedRectangleBorder(
+                    borderRadius: const BorderRadius.all(Radius.circular(RecipientTagItemWidgetStyle.radius)),
+                    side: _getTagBorderSide(),
+                  ),
+                  avatar: currentEmailAddress.displayName.isNotEmpty
+                    ? GradientCircleAvatarIcon(
+                        colors: currentEmailAddress.avatarColors,
+                        label: currentEmailAddress.displayName.firstLetterToUpperCase,
+                        labelFontSize: RecipientTagItemWidgetStyle.avatarLabelFontSize,
+                        iconSize: RecipientTagItemWidgetStyle.avatarIconSize,
+                      )
+                    : null,
+                  onDeleted: () => onDeleteTagAction?.call(currentEmailAddress),
+                ),
              ),
-              label: Text(
-                currentEmailAddress.asString(),
-                maxLines: 1,
-                overflow: CommonTextStyle.defaultTextOverFlow,
-                softWrap: CommonTextStyle.defaultSoftWrap,
-              ),
-              deleteIcon: SvgPicture.asset(_imagePaths.icClose, fit: BoxFit.fill),
-              labelStyle: RecipientTagItemWidgetStyle.labelTextStyle,
-              backgroundColor: _getTagBackgroundColor(),
-              shape: RoundedRectangleBorder(
-                borderRadius: const BorderRadius.all(Radius.circular(RecipientTagItemWidgetStyle.radius)),
-                side: _getTagBorderSide(),
-              ),
-              avatar: currentEmailAddress.displayName.isNotEmpty
-                ? GradientCircleAvatarIcon(
-                    colors: currentEmailAddress.avatarColors,
-                    label: currentEmailAddress.displayName.firstLetterToUpperCase,
-                    labelFontSize: 10,
-                    iconSize: 24,
-                  )
-                : null,
-              onDeleted: onDeleteTagAction,
            )
          ),
        ),