add dialog edit rule for mobile

assets/images/ic_delete_rule_mobile.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 1.5C16.3764 1.5 17.9252 2.73358 18.4217 4.99953L24.5 5C25.0523 5 25.5 5.44772 25.5 6C25.5 6.55228 25.0523 7 24.5 7H23.395L21.7827 22.3141C21.622 23.8409 20.3345 25 18.7992 25H9.20079C7.66551 25 6.37799 23.8409 6.21727 22.3141L4.605 7H3.5C2.94772 7 2.5 6.55228 2.5 6C2.5 5.44772 2.94772 5 3.5 5L9.57826 4.99953C10.0748 2.73358 11.6236 1.5 14 1.5ZM21.383 7H6.616L8.20628 22.1047C8.25985 22.6136 8.68903 23 9.20079 23H18.7992C19.311 23 19.7401 22.6136 19.7937 22.1047L21.383 7ZM14 9C14.5523 9 15 9.44772 15 10V20C15 20.5523 14.5523 21 14 21C13.4477 21 13 20.5523 13 20V10C13 9.44772 13.4477 9 14 9ZM18.0499 9.00125C18.6015 9.02883 19.0263 9.49834 18.9988 10.0499L18.4988 20.0499C18.4712 20.6015 18.0017 21.0263 17.4501 20.9988C16.8985 20.9712 16.4737 20.5017 16.5012 19.9501L17.0012 9.95006C17.0288 9.39847 17.4983 8.97367 18.0499 9.00125ZM9.95006 9.00125C10.5017 8.97367 10.9712 9.39847 10.9988 9.95006L11.4988 19.9501C11.5263 20.5017 11.1015 20.9712 10.5499 20.9988C9.99834 21.0263 9.52883 20.6015 9.50125 20.0499L9.00125 10.0499C8.97367 9.49834 9.39847 9.02883 9.95006 9.00125ZM14 3.5C12.7333 3.5 12.0003 3.95411 11.6478 4.99956H16.3522C15.9997 3.95411 15.2667 3.5 14 3.5Z" fill="#E64646"/>
+</svg>

assets/images/ic_edit_rule_mobile.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.1213 4.28884L23.7071 5.87462C24.8787 7.0462 24.8787 8.94569 23.7071 10.1173L21 12.8244L10.1464 23.678C9.30249 24.5219 8.15794 24.9959 6.96451 24.9959H5.05C3.91782 24.9959 3 24.0781 3 22.9459V21.0315C3 19.838 3.47414 18.6934 4.31811 17.8494L15.172 6.99616L15.1716 6.99594L17.8787 4.28884C19.0503 3.11726 20.9497 3.11726 22.1213 4.28884ZM16.5 8.4966L5.73228 19.2637C5.26341 19.7325 5 20.3685 5 21.0315V22.9459C5 22.9736 5.02239 22.9959 5.05 22.9959H6.96451C7.62752 22.9959 8.26339 22.7326 8.73222 22.2638L19.5 11.4966L16.5 8.4966ZM19.2929 5.70305L18 6.99594L21 9.99594L22.2929 8.70305C22.6834 8.31253 22.6834 7.67936 22.2929 7.28884L20.7071 5.70305C20.3166 5.31253 19.6834 5.31253 19.2929 5.70305Z" fill="#007AFF"/>
+</svg>

assets/images/ic_open_edit_rule.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="20" viewBox="0 0 6 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.25 3C5.25 4.24264 4.24264 5.25 3 5.25C1.75736 5.25 0.75 4.24264 0.75 3C0.75 1.75736 1.75736 0.75 3 0.75C4.24264 0.75 5.25 1.75736 5.25 3ZM5.25 10C5.25 11.2426 4.24264 12.25 3 12.25C1.75736 12.25 0.75 11.2426 0.75 10C0.75 8.75736 1.75736 7.75 3 7.75C4.24264 7.75 5.25 8.75736 5.25 10ZM5.25 17C5.25 18.2426 4.24264 19.25 3 19.25C1.75736 19.25 0.75 18.2426 0.75 17C0.75 15.7574 1.75736 14.75 3 14.75C4.24264 14.75 5.25 15.7574 5.25 17Z" fill="#99A2AD"/>
+</svg>

core/lib/presentation/resources/image_paths.dart

@@ -149,6 +149,9 @@ class ImagePaths {
   String get icAddNewRules => _getImagePath('ic_add_new_rule.svg');
   String get icEditRule => _getImagePath('ic_edit_rule.svg');
   String get icDeleteRule => _getImagePath('ic_delete_rule.svg');
+  String get icOpenEditRule => _getImagePath('ic_open_edit_rule.svg');
+  String get icEditRuleMobile => _getImagePath('ic_edit_rule_mobile.svg');
+  String get icDeleteRuleMobile => _getImagePath('ic_delete_rule_mobile.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;

core/lib/presentation/views/bottom_popup/cupertino_action_sheet_action_builder.dart

@@ -6,24 +6,25 @@ import 'package:flutter_svg/flutter_svg.dart';
 typedef OnCupertinoActionSheetActionClick<T> = void Function(T data);
 
 abstract class CupertinoActionSheetActionBuilder<T> {
-  @protected final Key key;
+  @protected
-  @protected final SvgPicture actionIcon;
+  final Key key;
-  @protected final String actionName;
+  @protected
-  @protected OnCupertinoActionSheetActionClick<T>? onCupertinoActionSheetActionClick;
+  final SvgPicture actionIcon;
+  @protected
+  final String actionName;
+  @protected
+  OnCupertinoActionSheetActionClick<T>? onCupertinoActionSheetActionClick;
 
-  CupertinoActionSheetActionBuilder(
+  CupertinoActionSheetActionBuilder(this.key, this.actionIcon, this.actionName);
-    this.key,
-    this.actionIcon,
-    this.actionName
-  );
 
-  void onActionClick(OnCupertinoActionSheetActionClick<T> onCupertinoActionSheetActionClick) {
+  void onActionClick(
+      OnCupertinoActionSheetActionClick<T> onCupertinoActionSheetActionClick) {
     this.onCupertinoActionSheetActionClick = onCupertinoActionSheetActionClick;
   }
 
-  TextStyle actionTextStyle() {
+  TextStyle actionTextStyle({TextStyle? textStyle}) {
-    return TextStyle(fontSize: 17, color: AppColor.colorNameEmail);
+    return textStyle ?? TextStyle(fontSize: 17, color: AppColor.colorNameEmail);
   }
 
   Widget build();
-}
+}

env.file

@@ -1,3 +1,3 @@
-SERVER_URL=https://gateway.upn.integration-open-paas.org
+SERVER_URL=http://localhost
 DOMAIN_REDIRECT_URL=http://localhost:3000
 WEB_OIDC_CLIENT_ID=teammail-web

lib/features/manage_account/presentation/email_rules/email_rules_controller.dart

@@ -1,15 +1,23 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/account_id.dart';
 import 'package:rule_filter/rule_filter/tmail_rule.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/state/get_all_rules_state.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/usecases/get_all_rules_interactor.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/email_rule_bottom_sheet_action_tile_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/manage_account_dashboard_controller.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class EmailRulesController extends BaseController {
   final listEmailRule = <TMailRule>[].obs;
-  final _accountDashBoardController = Get.find<ManageAccountDashBoardController>();
+  final _accountDashBoardController =
+      Get.find<ManageAccountDashBoardController>();
   final GetAllRulesInteractor _getAllRulesInteractor;
+  final _imagePaths = Get.find<ImagePaths>();
   late Worker accountIdWorker;
 
   EmailRulesController(this._getAllRulesInteractor);
@@ -20,16 +28,13 @@ class EmailRulesController extends BaseController {
 
   @override
   void onDone() {
-    viewState.value.fold(
+    viewState.value.fold((failure) {}, (success) {
-            (failure) {},
+      if (success is GetAllRulesSuccess) {
-            (success) {
+        if (success.rules?.isNotEmpty == true) {
-          if (success is GetAllRulesSuccess) {
+          listEmailRule.addAll(success.rules!);
-            if (success.rules?.isNotEmpty == true) {
-              listEmailRule.addAll(success.rules!);
-            }
-          }
         }
-    );
+      }
+    });
   }
 
   @override
@@ -62,4 +67,41 @@ class EmailRulesController extends BaseController {
   void _getAllRules(AccountId accountId) {
     consumeState(_getAllRulesInteractor.execute(accountId));
   }
+
+  void openEditRuleMenuAction(BuildContext context, TMailRule rule) {
+    openContextMenuAction(
+      context,
+      [
+        _editEmailRuleActionTile(context, rule),
+        _deleteEmailRuleActionTile(context, rule),
+      ],
+    );
+  }
+
+  Widget _deleteEmailRuleActionTile(BuildContext context, TMailRule rule) {
+    return (EmailRuleBottomSheetActionTileBuilder(
+      const Key('delete_emailRule_action'),
+      SvgPicture.asset(_imagePaths.icDeleteComposer,
+          color: AppColor.colorActionDeleteConfirmDialog),
+      AppLocalizations.of(context).deleteRule,
+      rule,
+      iconLeftPadding: const EdgeInsets.only(left: 12, right: 16),
+      iconRightPadding: const EdgeInsets.only(right: 12),
+      textStyleAction: const TextStyle(
+          fontSize: 17, color: AppColor.colorActionDeleteConfirmDialog),
+    )..onActionClick((rule) => deleteEmailRule(rule)))
+        .build();
+  }
+
+  Widget _editEmailRuleActionTile(BuildContext context, TMailRule rule) {
+    return (EmailRuleBottomSheetActionTileBuilder(
+      const Key('edit_emailRule_action'),
+      SvgPicture.asset(_imagePaths.icEdit),
+      AppLocalizations.of(context).editRule,
+      rule,
+      iconLeftPadding: const EdgeInsets.only(left: 12, right: 16),
+      iconRightPadding: const EdgeInsets.only(right: 12),
+    )..onActionClick((rule) => editEmailRule(rule)))
+        .build();
+  }
 }

lib/features/manage_account/presentation/email_rules/widgets/email_rule_bottom_sheet_action_tile_builder.dart

@@ -0,0 +1,57 @@
+import 'package:core/core.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:rule_filter/rule_filter/tmail_rule.dart';
+
+class EmailRuleBottomSheetActionTileBuilder
+    extends CupertinoActionSheetActionBuilder<TMailRule> {
+  final TMailRule emailRule;
+  final SvgPicture? actionSelected;
+  final Color? bgColor;
+  final EdgeInsets? iconLeftPadding;
+  final EdgeInsets? iconRightPadding;
+  final TextStyle? textStyleAction;
+
+  EmailRuleBottomSheetActionTileBuilder(
+    Key key,
+    SvgPicture actionIcon,
+    String actionName,
+    this.emailRule, {
+    this.actionSelected,
+    this.bgColor,
+    this.iconLeftPadding,
+    this.iconRightPadding,
+    this.textStyleAction,
+  }) : super(key, actionIcon, actionName);
+
+  @override
+  Widget build() {
+    return Container(
+      color: bgColor ?? Colors.white,
+      child: MouseRegion(
+        cursor: BuildUtils.isWeb
+            ? MaterialStateMouseCursor.clickable
+            : MouseCursor.defer,
+        child: CupertinoActionSheetAction(
+          key: key,
+          child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+            Padding(
+                padding: iconLeftPadding ??
+                    const EdgeInsets.only(left: 12, right: 16),
+                child: actionIcon),
+            Expanded(
+                child: Text(actionName,
+                    textAlign: TextAlign.left,
+                    style: actionTextStyle(textStyle: textStyleAction))),
+          ]),
+          onPressed: () {
+            if (onCupertinoActionSheetActionClick != null) {
+              onCupertinoActionSheetActionClick!(emailRule);
+            }
+          },
+        ),
+      ),
+    );
+  }
+}

lib/features/manage_account/presentation/email_rules/widgets/email_rule_item_widget.dart

@@ -6,23 +6,25 @@ import 'package:rule_filter/rule_filter/tmail_rule.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/email_rules_controller.dart';
 
 class EmailRulesItemWidget extends GetWidget<EmailRulesController> {
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
   final _imagePaths = Get.find<ImagePaths>();
 
   EmailRulesItemWidget({
     Key? key,
-    required this.editRule,
     required this.rule,
-    required this.deleteRule,
   }) : super(key: key);
 
-  final void Function(TMailRule) editRule;
   final TMailRule rule;
-  final void Function(TMailRule) deleteRule;
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 24),
+      padding: EdgeInsets.only(
+        top: 15,
+        bottom: 15,
+        left: _responsiveUtils.isMobile(context) ? 16 : 24,
+        right: _responsiveUtils.isMobile(context) ? 0 : 24
+      ),
       color: Colors.white,
       child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
         Text(rule.name,
@@ -31,22 +33,34 @@ class EmailRulesItemWidget extends GetWidget<EmailRulesController> {
                 fontWeight: FontWeight.w400,
                 color: Colors.black)),
         const Spacer(),
-        buildIconWeb(
+        if (!_responsiveUtils.isMobile(context))
-            icon: SvgPicture.asset(
+          buildIconWeb(
-              _imagePaths.icEditRule,
+              icon: SvgPicture.asset(
-              fit: BoxFit.fill,
+                _imagePaths.icEditRule,
-            ),
+                fit: BoxFit.fill,
-            onTap: () {
+              ),
-              editRule.call(rule);
+              onTap: () {
-            }),
+                controller.editEmailRule(rule);
-        buildIconWeb(
+              }),
-            icon: SvgPicture.asset(
+        if (!_responsiveUtils.isMobile(context))
-              _imagePaths.icDeleteRule,
+          buildIconWeb(
-              fit: BoxFit.fill,
+              icon: SvgPicture.asset(
-            ),
+                _imagePaths.icDeleteRule,
-            onTap: () {
+                fit: BoxFit.fill,
-              deleteRule.call(rule);
+              ),
-            }),
+              onTap: () {
+                controller.deleteEmailRule(rule);
+              }),
+        if (_responsiveUtils.isMobile(context))
+          buildIconWeb(
+              icon: SvgPicture.asset(
+                _imagePaths.icOpenEditRule,
+                fit: BoxFit.fill,
+              ),
+              iconPadding: const EdgeInsets.all(0),
+              onTap: () {
+                controller.openEditRuleMenuAction(context, rule);
+              }),
       ]),
     );
   }

lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart

@@ -21,31 +21,6 @@ class EmailRulesHeaderWidget extends GetWidget<EmailRulesController> {
 
   @override
   Widget build(BuildContext context) {
-    final buttonAddNewRule = Row(children: [
-      if (!responsiveUtils.isMobile(context))
-        (ButtonBuilder(imagePaths.icAddNewRules)
-              ..key(const Key('button_new_rule'))
-              ..decoration(BoxDecoration(
-                  borderRadius: BorderRadius.circular(10),
-                  color: AppColor.colorTextButton))
-              ..paddingIcon(const EdgeInsets.only(right: 8))
-              ..iconColor(Colors.white)
-              ..maxWidth(170)
-              ..size(20)
-              ..radiusSplash(10)
-              ..padding(const EdgeInsets.symmetric(vertical: 12))
-              ..textStyle(const TextStyle(
-                fontSize: 17,
-                color: Colors.white,
-                fontWeight: FontWeight.w500,
-              ))
-              ..onPressActionClick(() => controller.goToCreateNewRule())
-              ..text(
-                AppLocalizations.of(context).addNewRule,
-                isVertical: false,
-              ))
-            .build()
-    ]);
     return Container(
       padding: const EdgeInsets.all(24),
       decoration: BoxDecoration(
@@ -65,8 +40,57 @@ class EmailRulesHeaderWidget extends GetWidget<EmailRulesController> {
                 fontWeight: FontWeight.normal,
                 color: AppColor.colorTextButtonHeaderThread)),
         const SizedBox(height: 24),
-        buttonAddNewRule,
+        _buildButtonAddNewRule(context),
       ]),
     );
   }
+
+  Widget _buildButtonAddNewRule(BuildContext context) {
+    if (!responsiveUtils.isMobile(context)) {
+      return (ButtonBuilder(imagePaths.icAddNewRules)
+            ..key(const Key('button_new_rule'))
+            ..decoration(BoxDecoration(
+                borderRadius: BorderRadius.circular(10),
+                color: AppColor.colorTextButton))
+            ..paddingIcon(const EdgeInsets.only(right: 8))
+            ..iconColor(Colors.white)
+            ..maxWidth(130)
+            ..size(20)
+            ..radiusSplash(10)
+            ..padding(const EdgeInsets.symmetric(vertical: 12))
+            ..textStyle(const TextStyle(
+              fontSize: 17,
+              color: Colors.white,
+              fontWeight: FontWeight.w500,
+            ))
+            ..onPressActionClick(() => controller.goToCreateNewRule())
+            ..text(
+              AppLocalizations.of(context).addNewRule,
+              isVertical: false,
+            ))
+          .build();
+    } else {
+      return (ButtonBuilder(imagePaths.icAddNewRules)
+            ..key(const Key('button_new_rule'))
+            ..decoration(BoxDecoration(
+                borderRadius: BorderRadius.circular(10),
+                color: AppColor.colorTextButton))
+            ..paddingIcon(const EdgeInsets.only(right: 8))
+            ..iconColor(Colors.white)
+            ..size(20)
+            ..radiusSplash(10)
+            ..padding(const EdgeInsets.symmetric(vertical: 12))
+            ..textStyle(const TextStyle(
+              fontSize: 17,
+              color: Colors.white,
+              fontWeight: FontWeight.w500,
+            ))
+            ..onPressActionClick(() => controller.goToCreateNewRule())
+            ..text(
+              AppLocalizations.of(context).addNewRule,
+              isVertical: false,
+            ))
+          .build();
+    }
+  }
 }

lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart

@@ -44,12 +44,6 @@ class ListEmailRulesWidget extends GetWidget<EmailRulesController> {
                     final rule = controller.listEmailRule[index];
                     return EmailRulesItemWidget(
                       rule: rule,
-                      editRule: (rule) {
-                        controller.editEmailRule(rule);
-                      },
-                      deleteRule: (rule) {
-                        controller.editEmailRule(rule);
-                      },
                     );
                   },
                   separatorBuilder: (BuildContext context, int index) =>

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2022-08-08T08:50:15.957543",
+  "@@last_modified": "2022-08-08T14:35:21.345792",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -1777,5 +1777,17 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "editRule": "Edit rule",
+  "@editRule": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "deleteRule": "Delete rule",
+  "@deleteRule": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/main/localizations/app_localizations.dart

@@ -1826,4 +1826,18 @@ class AppLocalizations {
       name: 'headerNameOfRules',
     );
   }
+
+  String get editRule {
+    return Intl.message(
+      'Edit rule',
+      name: 'editRule',
+    );
+  }
+
+  String get deleteRule {
+    return Intl.message(
+      'Delete rule',
+      name: 'deleteRule',
+    );
+  }
 }