eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dat Vu
2024-10-08 16:31:43 +07:00
committed by Dat H. Pham
parent 7cdd6d8790
commit e584e61521
6 changed files with 203 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/mailbox_dashboard/presentation/controller/advanced_filter_controller.dart
+19
View File
@@ -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
+12
View File
@@ -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
-9
View File
@@ -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
+2
View File
@@ -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
+42 -32
View File
@@ -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,39 +50,47 @@ class AutoCompleteTagItemWidgetWeb extends StatelessWidget {
top: AutoCompleteTagItemWebStyle.paddingTop,
end: isCollapsed ? AutoCompleteTagItemWebStyle.paddingEnd : 0,
),
child: TextFieldTapRegion(
child: InkWell(
onTap: () => isCollapsed
? onShowFullAction?.call(field)
: null,
child: MouseRegion(
cursor: SystemMouseCursors.grab,
child: Chip(
labelPadding: EdgeInsetsDirectional.symmetric(
horizontal: AutoCompleteTagItemWebStyle.labelPaddingHorizontal,
vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2
child: Draggable<DraggableEmailAddress>(
data: DraggableEmailAddress(
emailAddress: currentEmailAddress,
prefix: field.getPrefixEmailAddress()
),
feedback: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
childWhenDragging: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
child: TextFieldTapRegion(
child: InkWell(
onTap: () => isCollapsed
? onShowFullAction?.call(field)
: null,
child: MouseRegion(
cursor: SystemMouseCursors.grab,
child: Chip(
labelPadding: EdgeInsetsDirectional.symmetric(
horizontal: AutoCompleteTagItemWebStyle.labelPaddingHorizontal,
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,
),
padding: EdgeInsets.zero,
labelStyle: AutoCompleteTagItemWebStyle.labelTextStyle,
backgroundColor: _getTagBackgroundColor(),
shape: RoundedRectangleBorder(
borderRadius: AutoCompleteTagItemWebStyle.shapeBorderRadius,
side: _getTagBorderSide(),
),
avatar: currentEmailAddress.emailAddress.isNotEmpty
? AvatarTagItemWidget(tagName: currentEmailAddress.emailAddress)
: 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,
),
padding: EdgeInsets.zero,
labelStyle: AutoCompleteTagItemWebStyle.labelTextStyle,
backgroundColor: _getTagBackgroundColor(),
shape: RoundedRectangleBorder(
borderRadius: AutoCompleteTagItemWebStyle.shapeBorderRadius,
side: _getTagBorderSide(),
),
avatar: currentEmailAddress.emailAddress.isNotEmpty
? AvatarTagItemWidget(tagName: currentEmailAddress.emailAddress)
: null,
onDeleted: () => onDeleteTagAction?.call(currentEmailAddress),
),
),
),
lib/features/mailbox_dashboard/presentation/widgets/advanced_search/text_field_autocomplete_email_address_web.dart
+128 -81
View File
@@ -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,89 +110,110 @@ class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocomp
Expanded(
child: StatefulBuilder(
builder: ((context, setState) {
return TagEditor<SuggestionEmailAddress>(
key: widget.keyTagEditor,
length: _collapsedListEmailAddress.length,
controller: widget.controller,
focusNodeKeyboard: widget.focusNode,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.done,
cursorColor: TextFieldAutoCompleteEmailAddressWebStyles.cursorColor,
debounceDuration: TextFieldAutoCompleteEmailAddressWebStyles.debounceDuration,
inputDecoration: InputDecoration(
filled: true,
fillColor: TextFieldAutoCompleteEmailAddressWebStyles.textInputFillColor,
border: TextFieldAutoCompleteEmailAddressWebStyles.textInputBorder,
hintText: widget.field.getHintText(context),
hintStyle: TextFieldAutoCompleteEmailAddressWebStyles.textInputHintStyle,
isDense: true,
contentPadding: _currentListEmailAddress.isNotEmpty
? TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPaddingWithSomeTag
: TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPadding
),
padding: _currentListEmailAddress.isNotEmpty
? TextFieldAutoCompleteEmailAddressWebStyles.tagEditorPadding
: EdgeInsets.zero,
borderRadius: TextFieldAutoCompleteEmailAddressWebStyles.borderRadius,
borderSize: TextFieldAutoCompleteEmailAddressWebStyles.borderWidth,
focusedBorderColor: TextFieldAutoCompleteEmailAddressWebStyles.focusedBorderColor,
enableBorder: true,
enableBorderColor: AppColor.colorInputBorderCreateMailbox,
minTextFieldWidth: TextFieldAutoCompleteEmailAddressWebStyles.minTextFieldWidth,
resetTextOnSubmitted: true,
autoScrollToInput: false,
suggestionsBoxElevation: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxElevation,
suggestionsBoxBackgroundColor: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxBackgroundColor,
suggestionsBoxRadius: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxRadius,
suggestionsBoxMaxHeight: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxMaxHeight,
suggestionBoxWidth: _getSuggestionBoxWidth(constraints.maxWidth),
textStyle: AdvancedSearchInputFormStyle.inputTextStyle,
onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, setState),
onDeleteTagAction: () => _handleDeleteLatestTagAction.call(setState),
onSelectOptionAction: (item) => _handleSelectOptionAction.call(item, setState),
onSubmitted: (value) => _handleSubmitTagAction.call(value, setState),
tagBuilder: (context, index) {
final currentEmailAddress = _currentListEmailAddress.elementAt(index);
final isLatestEmail = currentEmailAddress == _currentListEmailAddress.last;
return AutoCompleteTagItemWidgetWeb(
field: widget.field,
currentEmailAddress: currentEmailAddress,
currentListEmailAddress: _currentListEmailAddress,
collapsedListEmailAddress: _collapsedListEmailAddress,
isLatestEmail: isLatestEmail,
isCollapsed: _isCollapse,
isLatestTagFocused: _lastTagFocused,
onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, setState),
onShowFullAction: widget.onShowFullListEmailAddressAction,
);
},
onTagChanged: (tag) => _handleOnTagChangeAction.call(tag, setState),
findSuggestions: _findSuggestions,
suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, index, length, highlight, suggestionValid) {
return AutoCompleteSuggestionItemWidgetWeb(
suggestionState: suggestionEmailAddress.state,
emailAddress: suggestionEmailAddress.emailAddress,
suggestionValid: suggestionValid,
highlight: highlight,
onSelectedAction: (emailAddress) {
setState(() => _currentListEmailAddress.add(emailAddress));
_updateListEmailAddressAction();
tagEditorState.resetTextField();
tagEditorState.closeSuggestionBox();
},
);
},
onHandleKeyEventAction: (event) {
if (event is KeyDownEvent) {
switch (event.logicalKey) {
case LogicalKeyboardKey.tab:
widget.nextFocusNode?.requestFocus();
break;
default:
break;
}
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,
controller: widget.controller,
focusNodeKeyboard: widget.focusNode,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.done,
cursorColor: TextFieldAutoCompleteEmailAddressWebStyles.cursorColor,
debounceDuration: TextFieldAutoCompleteEmailAddressWebStyles.debounceDuration,
inputDecoration: InputDecoration(
filled: true,
fillColor: TextFieldAutoCompleteEmailAddressWebStyles.textInputFillColor,
border: TextFieldAutoCompleteEmailAddressWebStyles.textInputBorder,
hintText: widget.field.getHintText(context),
hintStyle: TextFieldAutoCompleteEmailAddressWebStyles.textInputHintStyle,
isDense: true,
contentPadding: _currentListEmailAddress.isNotEmpty
? TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPaddingWithSomeTag
: TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPadding
),
padding: _currentListEmailAddress.isNotEmpty
? TextFieldAutoCompleteEmailAddressWebStyles.tagEditorPadding
: EdgeInsets.zero,
borderRadius: TextFieldAutoCompleteEmailAddressWebStyles.borderRadius,
borderSize: TextFieldAutoCompleteEmailAddressWebStyles.borderWidth,
focusedBorderColor: TextFieldAutoCompleteEmailAddressWebStyles.focusedBorderColor,
enableBorder: true,
enableBorderColor: _isDragging
? AppColor.primaryColor
: AppColor.colorInputBorderCreateMailbox,
minTextFieldWidth: TextFieldAutoCompleteEmailAddressWebStyles.minTextFieldWidth,
resetTextOnSubmitted: true,
autoScrollToInput: false,
suggestionsBoxElevation: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxElevation,
suggestionsBoxBackgroundColor: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxBackgroundColor,
suggestionsBoxRadius: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxRadius,
suggestionsBoxMaxHeight: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxMaxHeight,
suggestionBoxWidth: _getSuggestionBoxWidth(constraints.maxWidth),
textStyle: AdvancedSearchInputFormStyle.inputTextStyle,
onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, setState),
onDeleteTagAction: () => _handleDeleteLatestTagAction.call(setState),
onSelectOptionAction: (item) => _handleSelectOptionAction.call(item, setState),
onSubmitted: (value) => _handleSubmitTagAction.call(value, setState),
tagBuilder: (context, index) {
final currentEmailAddress = _currentListEmailAddress.elementAt(index);
final isLatestEmail = currentEmailAddress == _currentListEmailAddress.last;
return AutoCompleteTagItemWidgetWeb(
field: widget.field,
currentEmailAddress: currentEmailAddress,
currentListEmailAddress: _currentListEmailAddress,
collapsedListEmailAddress: _collapsedListEmailAddress,
isLatestEmail: isLatestEmail,
isCollapsed: _isCollapse,
isLatestTagFocused: _lastTagFocused,
onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, setState),
onShowFullAction: widget.onShowFullListEmailAddressAction,
);
},
onTagChanged: (tag) => _handleOnTagChangeAction.call(tag, setState),
findSuggestions: _findSuggestions,
suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, index, length, highlight, suggestionValid) {
return AutoCompleteSuggestionItemWidgetWeb(
suggestionState: suggestionEmailAddress.state,
emailAddress: suggestionEmailAddress.emailAddress,
suggestionValid: suggestionValid,
highlight: highlight,
onSelectedAction: (emailAddress) {
setState(() => _currentListEmailAddress.add(emailAddress));
_updateListEmailAddressAction();
tagEditorState.resetTextField();
tagEditorState.closeSuggestionBox();
},
);
},
onHandleKeyEventAction: (event) {
if (event is KeyDownEvent) {
switch (event.logicalKey) {
case LogicalKeyboardKey.tab:
widget.nextFocusNode?.requestFocus();
break;
default:
break;
}
}
},
);
}
);
})
),
@@ -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);
}
}
}