add dialog edit rule for mobile

2022-08-08 14:37:01 +07:00
parent 9ad41d9a6f
commit 2178b8f313
13 changed files with 248 additions and 78 deletions
@@ -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(
-            (failure) {},
-            (success) {
-          if (success is GetAllRulesSuccess) {
-            if (success.rules?.isNotEmpty == true) {
-              listEmailRule.addAll(success.rules!);
-            }
-          }
+    viewState.value.fold((failure) {}, (success) {
+      if (success is GetAllRulesSuccess) {
+        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();
+  }
 }
@@ -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);
+            }
+          },
+        ),
+      ),
+    );
+  }
+}
@@ -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(
-            icon: SvgPicture.asset(
-              _imagePaths.icEditRule,
-              fit: BoxFit.fill,
-            ),
-            onTap: () {
-              editRule.call(rule);
-            }),
-        buildIconWeb(
-            icon: SvgPicture.asset(
-              _imagePaths.icDeleteRule,
-              fit: BoxFit.fill,
-            ),
-            onTap: () {
-              deleteRule.call(rule);
-            }),
+        if (!_responsiveUtils.isMobile(context))
+          buildIconWeb(
+              icon: SvgPicture.asset(
+                _imagePaths.icEditRule,
+                fit: BoxFit.fill,
+              ),
+              onTap: () {
+                controller.editEmailRule(rule);
+              }),
+        if (!_responsiveUtils.isMobile(context))
+          buildIconWeb(
+              icon: SvgPicture.asset(
+                _imagePaths.icDeleteRule,
+                fit: BoxFit.fill,
+              ),
+              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);
+              }),
      ]),
    );
  }
@@ -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();
+    }
+  }
 }
@@ -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) =>