TF-3002 [WEB] Add delete button in search filters

2024-09-12 21:31:44 +07:00
parent 8290025c14
commit e6eeabedee
9 changed files with 175 additions and 54 deletions
@@ -18,7 +18,10 @@ typedef ItemBuilder<T> = Widget Function(BuildContext context, T itemData);
 typedef SuggestionSelectionCallback<T> = void Function(T suggestion);
 typedef RecentSelectionCallback<R> = void Function(R recent);
 typedef ErrorBuilder = Widget Function(BuildContext context, Object? error);
-typedef ButtonActionBuilder = Widget Function(BuildContext context, dynamic action);
+typedef ButtonActionBuilder = Widget Function(
+  BuildContext context,
+  dynamic action,
+  SuggestionsListState suggestionsListState);
 typedef ButtonActionCallback = void Function(dynamic action);

 typedef AnimationTransitionBuilder = Widget Function(
@@ -315,8 +318,8 @@ class TypeAheadFieldQuickSearch<T, P, R> extends StatefulWidget {

  final QuickSearchSuggestionsBoxDecoration suggestionsBoxDecoration;

-  /// Used to control the `_SuggestionsBox`. Allows manual control to
-  /// open, close, toggle, or resize the `_SuggestionsBox`.
+  /// Used to control the `SuggestionsBox`. Allows manual control to
+  /// open, close, toggle, or resize the `SuggestionsBox`.
  final QuickSearchSuggestionsBoxController? suggestionsBoxController;

  /// The duration to wait after the user stops typing before calling
@@ -590,7 +593,7 @@ class _TypeAheadFieldQuickSearchState<T, P, R> extends State<TypeAheadFieldQuick
    with WidgetsBindingObserver {
  FocusNode? _focusNode;
  TextEditingController? _textEditingController;
-  _SuggestionsBox? _suggestionsBox;
+  SuggestionsBox? _suggestionsBox;
  late TextDirection _textDirection;

  TextEditingController? get _effectiveController =>
@@ -648,7 +651,7 @@ class _TypeAheadFieldQuickSearchState<T, P, R> extends State<TypeAheadFieldQuick
      _focusNode = FocusNode();
    }

-    _suggestionsBox = _SuggestionsBox(
+    _suggestionsBox = SuggestionsBox(
        context,
        widget.direction,
        widget.autoFlipDirection,
@@ -721,7 +724,7 @@ class _TypeAheadFieldQuickSearchState<T, P, R> extends State<TypeAheadFieldQuick

  void _initOverlayEntry() {
    _suggestionsBox!._overlayEntry = OverlayEntry(builder: (context) {
-      final suggestionsList = _SuggestionsList<T, P, R>(
+      final suggestionsList = SuggestionsList<T, P, R>(
        suggestionsBox: _suggestionsBox,
        decoration: widget.suggestionsBoxDecoration,
        debounceDuration: widget.debounceDuration,
@@ -905,8 +908,8 @@ class _TypeAheadFieldQuickSearchState<T, P, R> extends State<TypeAheadFieldQuick
  }
 }

-class _SuggestionsList<T, P, R> extends StatefulWidget {
-  final _SuggestionsBox? suggestionsBox;
+class SuggestionsList<T, P, R> extends StatefulWidget {
+  final SuggestionsBox? suggestionsBox;
  final TextEditingController? controller;
  final bool getImmediateSuggestions;
  final SuggestionSelectionCallback<T>? onSuggestionSelected;
@@ -942,7 +945,8 @@ class _SuggestionsList<T, P, R> extends StatefulWidget {
  final SuggestionsCallback<P>? contactSuggestionCallback;
  final SuggestionSelectionCallback<P>? onContactSuggestionSelected;

-  const _SuggestionsList({
+  const SuggestionsList({
+    super.key,
    required this.suggestionsBox,
    this.controller,
    this.getImmediateSuggestions = false,
@@ -981,10 +985,10 @@ class _SuggestionsList<T, P, R> extends StatefulWidget {
  });

  @override
-  _SuggestionsListState<T, P, R> createState() => _SuggestionsListState<T, P, R>();
+  SuggestionsListState<T, P, R> createState() => SuggestionsListState<T, P, R>();
 }

-class _SuggestionsListState<T, P, R> extends State<_SuggestionsList<T, P, R>>
+class SuggestionsListState<T, P, R> extends State<SuggestionsList<T, P, R>>
    with SingleTickerProviderStateMixin {
  Iterable<T>? _suggestions;
  Iterable<R>? _recentItems;
@@ -998,7 +1002,7 @@ class _SuggestionsListState<T, P, R> extends State<_SuggestionsList<T, P, R>>
  late final ScrollController _scrollController =
      widget.scrollController ?? ScrollController();

-  _SuggestionsListState() {
+  SuggestionsListState() {
    _controllerListener = () async {
      // If we came here because of a change in selected text, not because of
      // actual change in text
@@ -1015,7 +1019,7 @@ class _SuggestionsListState<T, P, R> extends State<_SuggestionsList<T, P, R>>
              recentItems = await widget.fetchRecentActionCallback!(widget.controller!.text);
            }
          } catch (e) {
-            logError('_SuggestionsListState::_SuggestionsListState(): $e');
+            logError('SuggestionsListState::SuggestionsListState(): $e');
          }

          setState(() {
@@ -1046,7 +1050,7 @@ class _SuggestionsListState<T, P, R> extends State<_SuggestionsList<T, P, R>>
  }

  @override
-  void didUpdateWidget(_SuggestionsList<T, P, R> oldWidget) {
+  void didUpdateWidget(SuggestionsList<T, P, R> oldWidget) {
    super.didUpdateWidget(oldWidget);
    widget.controller!.addListener(_controllerListener);
    _getSuggestions();
@@ -1215,7 +1219,7 @@ class _SuggestionsListState<T, P, R> extends State<_SuggestionsList<T, P, R>>
        if (listActionWidget != null) listActionWidget,
        if (loadingWidget != null) loadingWidget,
        if (widget.buttonShowAllResult != null && widget.controller?.text.isNotEmpty == true)
-          widget.buttonShowAllResult!(context, widget.controller?.text),
+          widget.buttonShowAllResult!(context, widget.controller?.text, this),
        if (listItemContactWidget.isNotEmpty)
          ... listItemContactWidget,
        if (listItemContactWidget.isNotEmpty && listItemSuggestionWidget.isNotEmpty)
@@ -1253,7 +1257,7 @@ class _SuggestionsListState<T, P, R> extends State<_SuggestionsList<T, P, R>>
        if (listActionWidget != null) listActionWidget,
        if (loadingWidget != null) loadingWidget,
        if (widget.buttonShowAllResult != null && widget.controller?.text.isNotEmpty == true)
-          widget.buttonShowAllResult!(context, widget.controller?.text),
+          widget.buttonShowAllResult!(context, widget.controller?.text, this),
        if (_recentItems?.isNotEmpty == true && widget.itemRecentBuilder != null && widget.titleHeaderRecent != null)
          widget.titleHeaderRecent!,
        if (listItemRecent.isNotEmpty)
@@ -1294,14 +1298,14 @@ class _SuggestionsListState<T, P, R> extends State<_SuggestionsList<T, P, R>>
                widget.buttonActionCallback?.call(action);
                invalidateSuggestions();
              },
-              child: widget.actionButtonBuilder!(context, action),
+              child: widget.actionButtonBuilder!(context, action, this),
            ),
          ),
        );
      } else {
        return Padding(
          padding: const EdgeInsetsDirectional.only(end: 8, bottom: 8),
-          child: widget.actionButtonBuilder!(context, action)
+          child: widget.actionButtonBuilder!(context, action, this)
        );
      }
    })
@@ -1732,7 +1736,7 @@ class QuickSearchTextFieldConfiguration {
  }
 }

-class _SuggestionsBox {
+class SuggestionsBox {
  static const int waitMetricsTimeoutMillis = 1000;
  static const double minOverlaySpace = 64.0;

@@ -1751,7 +1755,7 @@ class _SuggestionsBox {
  double textBoxHeight = 100.0;
  late double directionUpOffset;

-  _SuggestionsBox(
+  SuggestionsBox(
      this.context,
      this.direction,
      this.autoFlipDirection,
@@ -1950,7 +1954,7 @@ class _SuggestionsBox {
 /// Supply an instance of this class to the [TypeAhead.suggestionsBoxController]
 /// property to manually control the suggestions box
 class QuickSearchSuggestionsBoxController {
-  _SuggestionsBox? _suggestionsBox;
+  SuggestionsBox? _suggestionsBox;
  FocusNode? _effectiveFocusNode;

  /// Opens the suggestions box
@@ -446,13 +446,21 @@ class AdvancedFilterController extends BaseController {
  }

  void _updateFromField() {
-    listFromEmailAddress = List.from(
-      searchEmailFilter.from.map((address) => EmailAddress(null, address)));
+    if (searchEmailFilter.from.isNotEmpty) {
+      listFromEmailAddress = List.from(
+        searchEmailFilter.from.map((address) => EmailAddress(null, address)));
+    } else {
+      listFromEmailAddress.clear();
+    }
  }

  void _updateToField() {
-    listToEmailAddress= List.from(
-      searchEmailFilter.to.map((address) => EmailAddress(null, address)));
+    if (searchEmailFilter.to.isNotEmpty) {
+      listToEmailAddress = List.from(
+        searchEmailFilter.to.map((address) => EmailAddress(null, address)));
+    } else {
+      listToEmailAddress.clear();
+    }
  }

  void onSearchAction(BuildContext context) {
@@ -1579,10 +1579,6 @@ class MailboxDashBoardController extends ReloadableController with UserSettingPo
    _getAllIdentities();
  }

-  void addFilterToSuggestionForm(QuickSearchFilter filter) {
-    searchController.addFilterToSuggestionForm(filter);
-  }
-
  Future<List<PresentationEmail>> quickSearchEmails(String query) async {
    if (sessionCurrent != null && accountId.value != null) {
      return searchController.quickSearchEmails(
@@ -1733,7 +1729,7 @@ class MailboxDashBoardController extends ReloadableController with UserSettingPo
          : const None()
      );

-      dispatchAction(StartSearchEmailAction(filter: QuickSearchFilter.folder));
+      dispatchAction(StartSearchEmailAction());
    }
  }

@@ -1777,6 +1773,75 @@ class MailboxDashBoardController extends ReloadableController with UserSettingPo
    dispatchAction(StartSearchEmailAction());
  }

+  void _deleteDateTimeSearchFilter() {
+    dispatchAction(ClearDateRangeToAdvancedSearch(EmailReceiveTimeType.allTime));
+    searchController.updateFilterEmail(
+      emailReceiveTimeType: EmailReceiveTimeType.allTime,
+      startDateOption: const None(),
+      endDateOption: const None(),
+      beforeOption: const None()
+    );
+    dispatchAction(StartSearchEmailAction());
+  }
+
+  void _deleteSortOrderSearchFilter() {
+    searchController.sortOrderFiltered.value = EmailSortOrderType.mostRecent;
+    searchController.updateFilterEmail(
+      sortOrderOption: EmailSortOrderType.mostRecent.getSortOrder());
+    dispatchAction(StartSearchEmailAction());
+  }
+
+  void _deleteFromSearchFilter() {
+    searchController.updateFilterEmail(fromOption: const None());
+    dispatchAction(StartSearchEmailAction(filter: QuickSearchFilter.from));
+  }
+
+  void _deleteToSearchFilter() {
+    searchController.updateFilterEmail(toOption: const None());
+    dispatchAction(StartSearchEmailAction(filter: QuickSearchFilter.to));
+  }
+
+  void _deleteHasAttachmentSearchFilter() {
+    searchController.updateFilterEmail(hasAttachment: false);
+    dispatchAction(StartSearchEmailAction());
+  }
+
+  void _deleteFolderSearchFilter() {
+    searchController.updateFilterEmail(
+      mailboxOption: const None(),
+      beforeOption: const None(),
+      positionOption: searchController.sortOrderFiltered.value.isScrollByPosition()
+        ? const Some(0)
+        : const None()
+    );
+    dispatchAction(StartSearchEmailAction());
+  }
+
+  void onDeleteSearchFilterAction(QuickSearchFilter searchFilter) {
+    switch(searchFilter) {
+      case QuickSearchFilter.dateTime:
+        _deleteDateTimeSearchFilter();
+        break;
+      case QuickSearchFilter.sortBy:
+        _deleteSortOrderSearchFilter();
+        break;
+      case QuickSearchFilter.from:
+        _deleteFromSearchFilter();
+        break;
+      case QuickSearchFilter.hasAttachment:
+        _deleteHasAttachmentSearchFilter();
+        break;
+      case QuickSearchFilter.to:
+        _deleteToSearchFilter();
+        break;
+      case QuickSearchFilter.folder:
+        _deleteFolderSearchFilter();
+        break;
+      default:
+        break;
+    }
+  }
+
  bool isEmptyTrashBannerEnabledOnWeb(
    BuildContext context,
    PresentationMailbox? mailbox
@@ -70,14 +70,16 @@ class SearchController extends BaseController with DateRangePickerMixin {
    searchEmailFilter.value = SearchEmailFilter.initial();
  }

-  void addFilterToSuggestionForm(QuickSearchFilter filter) {
-    if (listFilterOnSuggestionForm.contains(filter)) {
-      listFilterOnSuggestionForm.remove(filter);
-    } else {
-      listFilterOnSuggestionForm.add(filter);
+  void addQuickSearchFilterToSuggestionSearchView(QuickSearchFilter searchFilter) {
+    if (!listFilterOnSuggestionForm.contains(searchFilter)) {
+      listFilterOnSuggestionForm.add(searchFilter);
    }
  }

+  void deleteQuickSearchFilterFromSuggestionSearchView(QuickSearchFilter searchFilter) {
+    listFilterOnSuggestionForm.remove(searchFilter);
+  }
+
  Future<List<PresentationEmail>> quickSearchEmails({
    required Session session,
    required AccountId accountId,
@@ -19,6 +19,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/dash
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/email_receive_time_type.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/email_sort_order_type.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/quick_search_filter.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/mailbox_dashboard_view_web_style.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/download/download_task_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/mark_mailbox_as_read_loading_banner.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart';
@@ -460,15 +461,15 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                      controller: controller.listSearchFilterScrollController!,
                      children: [
                        _buildQuickSearchFilterButton(context, QuickSearchFilter.folder),
-                        const SizedBox(width: 8),
+                        MailboxDashboardViewWebStyle.searchFilterSizeBoxMargin,
                        _buildQuickSearchFilterButton(context, QuickSearchFilter.from),
-                        const SizedBox(width: 8),
+                        MailboxDashboardViewWebStyle.searchFilterSizeBoxMargin,
                        _buildQuickSearchFilterButton(context, QuickSearchFilter.to),
-                        const SizedBox(width: 8),
+                        MailboxDashboardViewWebStyle.searchFilterSizeBoxMargin,
                        _buildQuickSearchFilterButton(context, QuickSearchFilter.dateTime),
-                        const SizedBox(width: 8),
+                        MailboxDashboardViewWebStyle.searchFilterSizeBoxMargin,
                        _buildQuickSearchFilterButton(context, QuickSearchFilter.hasAttachment),
-                        const SizedBox(width: 8),
+                        MailboxDashboardViewWebStyle.searchFilterSizeBoxMargin,
                      ],
                    ),
                  ),
@@ -484,8 +485,8 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
  }

  Widget _buildQuickSearchFilterButton(
-      BuildContext context,
-      QuickSearchFilter searchFilter
+    BuildContext context,
+    QuickSearchFilter searchFilter,
  ) {
    return Obx(() {
      final searchEmailFilter = controller.searchController.searchEmailFilter.value;
@@ -503,6 +504,11 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
        searchEmailFilter,
        sortOrderType);

+      EdgeInsetsGeometry? buttonPadding;
+      if (searchFilter != QuickSearchFilter.sortBy) {
+        buttonPadding = MailboxDashboardViewWebStyle.getSearchFilterButtonPadding(isSelected);
+      }
+
      return SearchFilterButton(
        key: Key('${searchFilter.name}_search_filter_button'),
        searchFilter: searchFilter,
@@ -516,12 +522,14 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
        listAddressOfTo: listAddressOfTo,
        userName: userName,
        mailbox: mailbox,
+        buttonPadding: buttonPadding,
        onSelectSearchFilterAction: _onSelectSearchFilterAction,
+        onDeleteSearchFilterAction: controller.onDeleteSearchFilterAction,
      );
    });
  }

-  void _onSelectSearchFilterAction(
+  Future<void> _onSelectSearchFilterAction(
    BuildContext context,
    QuickSearchFilter searchFilter,
    {RelativeRect? buttonPosition}
@@ -0,0 +1,14 @@
+
+import 'package:flutter/cupertino.dart';
+
+class MailboxDashboardViewWebStyle {
+  static const SizedBox searchFilterSizeBoxMargin = SizedBox(width: 8);
+
+  static EdgeInsetsGeometry getSearchFilterButtonPadding(bool isSelected) {
+    if (isSelected) {
+      return const EdgeInsetsDirectional.only(start: 12, end: 4);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 12);
+    }
+  }
+}
@@ -5,9 +5,14 @@ class SearchFilterButtonStyle {
  static const double iconSize = 16;
  static const double deleteIconSize = 10;
  static const double spaceSize = 4;
-  static const double buttonSize = 35;

-  static const EdgeInsetsGeometry buttonPadding = EdgeInsets.symmetric(horizontal: 12, vertical: 8);
+  static EdgeInsetsGeometry getButtonPadding(bool isSelected) {
+    if (isSelected) {
+      return const EdgeInsetsDirectional.only(start: 12, end: 4, top: 4, bottom: 4);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 12, vertical: 8);
+    }
+  }
  static const EdgeInsetsGeometry elementPadding = EdgeInsetsDirectional.only(start: 8);
  static const BorderRadius borderRadius = BorderRadius.all(Radius.circular(10));

@@ -15,6 +15,7 @@ typedef OnSelectSearchFilterAction = Function(
  BuildContext context,
  QuickSearchFilter searchFilter,
  {RelativeRect? buttonPosition});
+typedef OnDeleteSearchFilterAction = Function(QuickSearchFilter searchFilter);

 class SearchFilterButton extends StatelessWidget {

@@ -32,7 +33,9 @@ class SearchFilterButton extends StatelessWidget {
  final UserName? userName;
  final PresentationMailbox? mailbox;
  final Color? backgroundColor;
+  final EdgeInsetsGeometry? buttonPadding;
  final OnSelectSearchFilterAction? onSelectSearchFilterAction;
+  final OnDeleteSearchFilterAction? onDeleteSearchFilterAction;

  const SearchFilterButton({
    super.key,
@@ -48,7 +51,9 @@ class SearchFilterButton extends StatelessWidget {
    this.userName,
    this.mailbox,
    this.backgroundColor,
+    this.buttonPadding,
    this.onSelectSearchFilterAction,
+    this.onDeleteSearchFilterAction,
  });

  @override
@@ -69,8 +74,7 @@ class SearchFilterButton extends StatelessWidget {
      decoration: BoxDecoration(
        borderRadius: SearchFilterButtonStyle.borderRadius,
        color: backgroundColor ?? searchFilter.getBackgroundColor(isFilterSelected: isSelected)),
-      padding: SearchFilterButtonStyle.buttonPadding,
-      height: SearchFilterButtonStyle.buttonSize,
+      padding: buttonPadding ?? SearchFilterButtonStyle.getButtonPadding(isSelected),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
@@ -104,9 +108,9 @@ class SearchFilterButton extends StatelessWidget {
              icon: imagePaths.icDeleteSelection,
              iconSize: SearchFilterButtonStyle.deleteIconSize,
              iconColor: AppColor.colorTextBody,
-              padding: EdgeInsets.zero,
+              padding: const EdgeInsets.all(8),
              backgroundColor: Colors.transparent,
-              margin: SearchFilterButtonStyle.elementPadding,
+              onTapActionCallback: () => onDeleteSearchFilterAction?.call(searchFilter),
            ),
        ]
      )
@@ -70,16 +70,19 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
              QuickSearchFilter.last7Days,
              QuickSearchFilter.fromMe,
            ],
-            actionButtonBuilder: (context, filterAction) {
+            actionButtonBuilder: (context, filterAction, suggestionsListState) {
              if (filterAction is QuickSearchFilter) {
-                return buildListButtonForQuickSearchForm(context, filterAction);
+                return buildListButtonForQuickSearchForm(
+                  context,
+                  filterAction,
+                  suggestionsListState);
              } else {
                return const SizedBox.shrink();
              }
            },
            buttonActionCallback: (filterAction) {
              if (filterAction is QuickSearchFilter) {
-                _dashBoardController.addFilterToSuggestionForm(filterAction);
+                _searchController.addQuickSearchFilterToSuggestionSearchView(filterAction);
              }
            },
            listActionPadding: const EdgeInsets.only(left: 12, right: 12, top: 12, bottom: 6),
@@ -94,7 +97,7 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
                )
              )
            ),
-            buttonShowAllResult: (context, keyword) {
+            buttonShowAllResult: (context, keyword, _) {
              if (keyword is String) {
                return _buildShowAllResultButton(context, keyword);
              } else {
@@ -221,7 +224,11 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
    );
  }

-  Widget buildListButtonForQuickSearchForm(BuildContext context, QuickSearchFilter searchFilter) {
+  Widget buildListButtonForQuickSearchForm(
+    BuildContext context,
+    QuickSearchFilter searchFilter,
+    SuggestionsListState suggestionsListState
+  ) {
    return Obx(() {
      final isSelected = searchFilter.isApplied(_searchController.listFilterOnSuggestionForm);

@@ -230,6 +237,10 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
        imagePaths: _imagePaths,
        isSelected: isSelected,
        backgroundColor: searchFilter.getSuggestionBackgroundColor(isFilterSelected: isSelected),
+        onDeleteSearchFilterAction: (searchFilter) {
+          _searchController.deleteQuickSearchFilterFromSuggestionSearchView(searchFilter);
+          suggestionsListState.invalidateSuggestions();
+        },
      );
    });
  }