TF-4004 Change new design for list email rules view

core/lib/presentation/extensions/color_extension.dart

@@ -123,8 +123,6 @@ extension AppColor on Color {
   static const colorBorderWrapIconStyleCode = Color(0xFFE4E4E4);
   static const colorBackgroundWrapIconStyleCode = Color(0xFFF2F3F5);
   static const colorBackgroundSnackBar = Color(0xFF343438);
-  static const colorBackgroundHeaderListRuleFilter = Color(0xFFFAF7F7);
-  static const colorBorderListRuleFilter = Color(0xFFE7E8EC);
   static const colorBackgroundFieldConditionRulesFilter = Color(0xFFF2F3F5);
   static const colorDeletePermanentlyButton = Color(0xffE64646);
   static const colorBackgroundNotificationVacationSetting= Color(0xFFFFF5C2);

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

@@ -1,5 +1,4 @@
 import 'package:core/presentation/state/success.dart';
-import 'package:core/presentation/views/bottom_popup/confirmation_dialog_action_sheet_builder.dart';
 import 'package:core/utils/app_logger.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
@@ -61,7 +60,6 @@ class EmailRulesController extends BaseController {
 
   @override
   void handleSuccessViewState(Success success) {
-    super.handleSuccessViewState(success);
     if (success is GetAllRulesSuccess) {
       if (success.rules?.isNotEmpty == true) {
         listEmailRule.addAll(success.rules!);
@@ -72,6 +70,8 @@ class EmailRulesController extends BaseController {
       _createNewRuleFilterSuccess(success);
     } else if (success is EditEmailRuleFilterSuccess) {
       _editEmailRuleFilterSuccess(success);
+    } else {
+      super.handleSuccessViewState(success);
     }
   }
 
@@ -153,28 +153,16 @@ class EmailRulesController extends BaseController {
     }
   }
 
-  void deleteEmailRule(BuildContext context, TMailRule emailRule) {
+  void _deleteEmailRule(BuildContext context, TMailRule emailRule) {
-    if (responsiveUtils.isMobile(context)) {
+    MessageDialogActionManager().showConfirmDialogAction(
-      (ConfirmationDialogActionSheetBuilder(context)
+      context,
-        ..messageText(AppLocalizations.of(context).messageConfirmationDialogDeleteEmailRule(emailRule.name))
+      title: AppLocalizations.of(context).deleteEmailRule,
-        ..onCancelAction(AppLocalizations.of(context).cancel, () =>
+      AppLocalizations.of(context).messageConfirmationDialogDeleteEmailRule(emailRule.name),
-            popBack())
+      AppLocalizations.of(context).delete,
-        ..onConfirmAction(AppLocalizations.of(context).delete, () {
+      cancelTitle: AppLocalizations.of(context).cancel,
-          popBack();
+      onConfirmAction: () => _handleDeleteEmailRuleAction(emailRule),
-          _handleDeleteEmailRuleAction(emailRule);
+      onCloseButtonAction: popBack,
-        }))
+    );
-      .show();
-    } else {
-      MessageDialogActionManager().showConfirmDialogAction(
-        context,
-        title: AppLocalizations.of(context).deleteEmailRule,
-        AppLocalizations.of(context).messageConfirmationDialogDeleteEmailRule(emailRule.name),
-        AppLocalizations.of(context).delete,
-        cancelTitle: AppLocalizations.of(context).cancel,
-        onConfirmAction: () => _handleDeleteEmailRuleAction(emailRule),
-        onCloseButtonAction: popBack,
-      );
-    }
   }
 
   void _handleDeleteEmailRuleAction(TMailRule emailRule) {
@@ -248,12 +236,12 @@ class EmailRulesController extends BaseController {
       itemActions: contextMenuActions,
       onContextMenuActionClick: (action) {
         popBack();
-        _handleRuleFilterActionType(context, rule, action.action);
+        handleRuleFilterActionType(context, rule, action.action);
       },
     );
   }
 
-  void _handleRuleFilterActionType(
+  void handleRuleFilterActionType(
     BuildContext context,
     TMailRule rule,
     EmailRuleActionType actionType,
@@ -263,7 +251,7 @@ class EmailRulesController extends BaseController {
         editEmailRule(context, rule);
         break;
       case EmailRuleActionType.delete:
-        deleteEmailRule(context, rule);
+        _deleteEmailRule(context, rule);
         break;
       case EmailRuleActionType.add:
         break;

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

@@ -5,9 +5,11 @@ import 'package:tmail_ui_user/features/manage_account/presentation/base/setting_
 import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/email_rules_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/add_rule_button_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/count_name_of_rules_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/no_rules_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/email_rule_action_type.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_explanation_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_header_widget.dart';
 
@@ -81,18 +83,49 @@ class EmailRulesView extends GetWidget<EmailRulesController> {
                 ),
               ),
             ],
-            Obx(() => CountNameOfRulesWidget(
+            Obx(
-              countRules: controller.listEmailRule.length,
+              () => CountNameOfRulesWidget(
-                  margin: EdgeInsetsDirectional.only(
+                countRules: controller.listEmailRule.length,
-                    start: isDesktop ? 0 : 16,
+                margin: EdgeInsetsDirectional.only(
-                    top: 24,
+                  start: isDesktop ? 0 : 16,
-                  ),
+                  top: 24,
-            )),
+                ),
-            NoRulesWidget(
+              ),
-              imagePaths: controller.imagePaths,
-              responsiveUtils: controller.responsiveUtils,
-              onAddRuleAction: controller.goToCreateNewRule,
             ),
+            Obx(() {
+              if (controller.listEmailRule.isEmpty) {
+                return NoRulesWidget(
+                  imagePaths: controller.imagePaths,
+                  responsiveUtils: controller.responsiveUtils,
+                  onAddRuleAction: controller.goToCreateNewRule,
+                );
+              } else {
+                return Expanded(
+                  child: ListEmailRulesWidget(
+                    listEmailRule: controller.listEmailRule,
+                    imagePaths: controller.imagePaths,
+                    responsiveUtils: controller.responsiveUtils,
+                    onDeleteEmailRuleAction: (rule) =>
+                      controller.handleRuleFilterActionType(
+                        context,
+                        rule,
+                        EmailRuleActionType.delete,
+                      ),
+                    onEditEmailRuleAction: (rule) =>
+                      controller.handleRuleFilterActionType(
+                        context,
+                        rule,
+                        EmailRuleActionType.edit,
+                      ),
+                    onMoreEmailRuleAction: (rule) =>
+                      controller.openEditRuleMenuAction(
+                        context,
+                        rule,
+                      ),
+                  ),
+                );
+              }
+            }),
           ],
         ),
       ),

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

@@ -23,7 +23,7 @@ class CountNameOfRulesWidget extends StatelessWidget {
         children: [
           Flexible(
             child: Text(
-              AppLocalizations.of(context).nameOfRules,
+              AppLocalizations.of(context).headerNameOfRules,
               style: ThemeUtils.textStyleInter600().copyWith(
                 fontSize: 14,
                 height: 20 / 14,

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

@@ -2,79 +2,129 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
-import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:rule_filter/rule_filter/tmail_rule.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/email_rules_controller.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/extensions/tmail_rule_extension.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
+typedef OnEditEmailRuleAction = Function(TMailRule rule);
+typedef OnDeleteEmailRuleAction = Function(TMailRule rule);
+typedef OnMoreEmailRuleAction = Function(TMailRule rule);
+
 class EmailRulesItemWidget extends StatelessWidget {
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
+  final ImagePaths imagePaths;
-  final _imagePaths = Get.find<ImagePaths>();
+  final ResponsiveUtils responsiveUtils;
-  final _emailRuleController = Get.find<EmailRulesController>();
-
   final TMailRule rule;
+  final OnEditEmailRuleAction? onEditEmailRuleAction;
+  final OnDeleteEmailRuleAction? onDeleteEmailRuleAction;
+  final OnMoreEmailRuleAction? onMoreEmailRuleAction;
 
-  EmailRulesItemWidget({
+  const EmailRulesItemWidget({
     Key? key,
+    required this.imagePaths,
+    required this.responsiveUtils,
     required this.rule,
+    this.onEditEmailRuleAction,
+    this.onDeleteEmailRuleAction,
+    this.onMoreEmailRuleAction,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    final isMobile = responsiveUtils.isMobile(context);
+
     return Container(
-      padding: EdgeInsetsDirectional.only(
+      decoration: const BoxDecoration(
-        top: 15,
+        color: AppColor.lightGrayF9FAFB,
-        bottom: 15,
+        borderRadius: BorderRadius.all(Radius.circular(10)),
-        start: _responsiveUtils.isMobile(context) ? 16 : 24,
-        end: _responsiveUtils.isMobile(context) ? 0 : 24
       ),
-      color: Colors.white,
+      height: 72,
-      child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
+      padding: const EdgeInsetsDirectional.symmetric(horizontal: 32),
-        Text(rule.name,
+      margin: const EdgeInsetsDirectional.only(top: 8),
-            style: ThemeUtils.defaultTextStyleInterFont.copyWith(
+      child: Row(
-                fontSize: 16,
+        children: [
-                fontWeight: FontWeight.w400,
+          if (!isMobile) ...[
-                color: Colors.black)),
+            ConstrainedBox(
-        const Spacer(),
+              constraints: BoxConstraints(maxWidth: context.width / 2),
-        if (_responsiveUtils.isMobile(context))
+              child: Text(
-          buildIconWeb(
+                rule.name,
-            icon: SvgPicture.asset(
+                style: ThemeUtils.textStyleBodyBody3(
-              _imagePaths.icOpenEditRule,
+                  color: Colors.black,
-              fit: BoxFit.fill,
+                ),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
             ),
-            iconPadding: EdgeInsets.zero,
+            Expanded(
-            onTap: () =>
+              child: Row(
-                _emailRuleController.openEditRuleMenuAction(context, rule),
+                mainAxisSize: MainAxisSize.min,
-          )
+                children: [
-        else
+                  Flexible(
-          ...[
+                    child: Container(
-            TMailButtonWidget.fromIcon(
+                      decoration: BoxDecoration(
-              icon: _imagePaths.icCompose,
+                        color: AppColor.gray49454F.withValues(alpha: 0.08),
-              iconColor: AppColor.primaryColor,
+                        borderRadius: const BorderRadius.all(
-              iconSize: 24,
+                          Radius.circular(16),
-              padding: const EdgeInsets.all(5),
+                        ),
-              backgroundColor: Colors.transparent,
+                      ),
-              tooltipMessage: AppLocalizations.of(context).editRule,
+                      margin: const EdgeInsetsDirectional.symmetric(
-              margin: const EdgeInsetsDirectional.only(end: 5),
+                        horizontal: 24,
-              onTapActionCallback: () =>
+                      ),
-                  _emailRuleController.editEmailRule(context, rule),
+                      padding: const EdgeInsets.symmetric(
+                        vertical: 4,
+                        horizontal: 12,
+                      ),
+                      child: Text(
+                        rule.getPreview(AppLocalizations.of(context)),
+                        style: ThemeUtils.textStyleBodyBody3(
+                          color: Colors.black,
+                        ),
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ),
+                  )
+                ],
+              ),
             ),
             TMailButtonWidget.fromIcon(
-              icon: _imagePaths.icDeleteRule,
+              icon: imagePaths.icEdit,
-              iconColor: AppColor.primaryColor,
+              iconSize: 20,
-              iconSize: 24,
+              iconColor: AppColor.steelGrayA540,
-              padding: const EdgeInsets.all(5),
               backgroundColor: Colors.transparent,
-              tooltipMessage: AppLocalizations.of(context).deleteRule,
+              margin: const EdgeInsetsDirectional.only(end: 12),
-              onTapActionCallback: () =>
+              onTapActionCallback: () => onEditEmailRuleAction?.call(rule),
-                  _emailRuleController.deleteEmailRule(context, rule),
             ),
-          ]
+            TMailButtonWidget.fromIcon(
-      ]),
+              icon: imagePaths.icDeleteComposer,
+              iconSize: 20,
+              iconColor: AppColor.steelGrayA540,
+              backgroundColor: Colors.transparent,
+              onTapActionCallback: () => onDeleteEmailRuleAction?.call(rule),
+            ),
+          ] else ...[
+            Expanded(
+              child: Text(
+                rule.name,
+                style: ThemeUtils.textStyleBodyBody3(
+                  color: Colors.black,
+                ),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+            TMailButtonWidget.fromIcon(
+              icon: imagePaths.icMoreVertical,
+              iconSize: 20,
+              iconColor: AppColor.steelGrayA540,
+              backgroundColor: Colors.transparent,
+              onTapActionCallback: () => onMoreEmailRuleAction?.call(rule),
+            ),
+          ],
+        ],
+      ),
     );
   }
 }

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

@@ -1,81 +1,58 @@
-import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/utils/app_logger.dart';
 import 'package:flutter/material.dart';
-import 'package:get/get.dart';
-import 'package:jmap_dart_client/jmap/core/id.dart';
 import 'package:rule_filter/rule_filter/rule_id.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/email_rules_controller.dart';
+import 'package:rule_filter/rule_filter/tmail_rule.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/email_rule_item_widget.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
-class ListEmailRulesWidget extends GetWidget<EmailRulesController> {
+class ListEmailRulesWidget extends StatelessWidget {
-  const ListEmailRulesWidget({Key? key}) : super(key: key);
+  final List<TMailRule> listEmailRule;
+  final ImagePaths imagePaths;
+  final ResponsiveUtils responsiveUtils;
+  final OnEditEmailRuleAction? onEditEmailRuleAction;
+  final OnDeleteEmailRuleAction? onDeleteEmailRuleAction;
+  final OnMoreEmailRuleAction? onMoreEmailRuleAction;
+
+  const ListEmailRulesWidget({
+    Key? key,
+    required this.listEmailRule,
+    required this.imagePaths,
+    required this.responsiveUtils,
+    this.onEditEmailRuleAction,
+    this.onDeleteEmailRuleAction,
+    this.onMoreEmailRuleAction,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    final isMobile = responsiveUtils.isMobile(context);
-      decoration: BoxDecoration(
+
-        color: AppColor.colorBackgroundWrapIconStyleCode,
+    return Padding(
-        borderRadius: BorderRadius.circular(16),
+      padding: const EdgeInsetsDirectional.only(
-        border: Border.all(
+        top: 12,
-            width: 1,
-            color: AppColor.colorBorderListRuleFilter)
       ),
-      child: ClipRRect(
+      child: ListView.builder(
-        borderRadius: BorderRadius.circular(16),
+        shrinkWrap: true,
-        child: Column(
+        itemCount: listEmailRule.length,
-            crossAxisAlignment: CrossAxisAlignment.start,
+        primary: false,
-            mainAxisSize: MainAxisSize.min,
+        padding: EdgeInsetsDirectional.only(
-            children: [
+          bottom: 16,
-              Container(
+          start: isMobile ? 16 : 0,
-                width: double.infinity,
+          end: isMobile ? 16 : 0,
-                decoration: const BoxDecoration(
+        ),
-                  color: AppColor.colorBackgroundHeaderListRuleFilter,
+        itemBuilder: (context, index) {
-                  borderRadius: BorderRadius.only(
+          final ruleWithId = listEmailRule[index].copyWith(
-                      topLeft: Radius.circular(16),
+            id: RuleId.fromString(index.toString()),
-                      topRight: Radius.circular(16)),
+          );
-                ),
+          return EmailRulesItemWidget(
-                padding: const EdgeInsets.symmetric(
+            rule: ruleWithId,
-                  vertical: 28,
+            responsiveUtils: responsiveUtils,
-                  horizontal: 24,
+            imagePaths: imagePaths,
-                ),
+            onEditEmailRuleAction: onEditEmailRuleAction,
-                child: Text(AppLocalizations.of(context).headerNameOfRules,
+            onDeleteEmailRuleAction: onDeleteEmailRuleAction,
-                    style: ThemeUtils.defaultTextStyleInterFont.copyWith(
+            onMoreEmailRuleAction: onMoreEmailRuleAction,
-                        fontSize: 16,
+          );
-                        fontWeight: FontWeight.w500,
+        },
-                        color: AppColor.colorTextButtonHeaderThread)),
-              ),
-              Obx(() {
-                if (controller.listEmailRule.isNotEmpty) {
-                  return const Divider();
-                } else {
-                  return const SizedBox.shrink();
-                }
-              }),
-              Obx(() {
-                log('ListEmailRulesWidget::build(): ${controller.listEmailRule}');
-                return ListView.separated(
-                  shrinkWrap: true,
-                  itemCount: controller.listEmailRule.length,
-                  primary: false,
-                  padding: EdgeInsets.zero,
-                  itemBuilder: (context, index) {
-                    final ruleWithId = controller.listEmailRule[index]
-                        .copyWith(id: RuleId(id: Id(index.toString())));
-                    log('ListEmailRulesWidget::build(): $ruleWithId');
-                    return EmailRulesItemWidget(rule: ruleWithId);
-                  },
-                  separatorBuilder: (context, index) {
-                    if (controller.listEmailRule.isNotEmpty) {
-                      return const Divider();
-                    } else {
-                      return const SizedBox.shrink();
-                    }
-                  },
-                );
-              }),
-            ]),
       ),
     );
   }

lib/features/manage_account/presentation/extensions/tmail_rule_extension.dart

@@ -0,0 +1,20 @@
+import 'package:rule_filter/rule_filter/rule_condition.dart';
+import 'package:rule_filter/rule_filter/tmail_rule.dart';
+import 'package:tmail_ui_user/features/rules_filter_creator/presentation/extensions/rule_condition_extensions.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+extension TmailRuleExtension on TMailRule {
+  String getPreview(AppLocalizations appLocalizations) {
+    final firstCondition = conditionGroup?.conditions.firstOrNull ?? condition;
+    if (firstCondition != null) {
+      return firstCondition.getPreview(appLocalizations);
+    }
+    return '';
+  }
+}
+
+extension RuleConditionExtension on RuleCondition {
+  String getPreview(AppLocalizations appLocalizations) {
+    return '${field.getTitle(appLocalizations)}, ${comparator.getTitle(appLocalizations).toLowerCase()}: $value';
+  }
+}

lib/l10n/intl_messages.arb

@@ -4706,12 +4706,6 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "nameOfRules": "Name of Rules",
-  "@nameOfRules": {
-    "type": "text",
-    "placeholders_order": [],
-    "placeholders": {}
-  },
   "noRulesConfigured": "No Rules Configured",
   "@noRulesConfigured": {
     "type": "text",

lib/main/localizations/app_localizations.dart

@@ -4965,13 +4965,6 @@ class AppLocalizations {
     );
   }
 
-  String get nameOfRules {
-    return Intl.message(
-      'Name of Rules',
-      name: 'nameOfRules',
-    );
-  }
-
   String get noRulesConfigured {
     return Intl.message(
       'No Rules Configured',

rule_filter/lib/rule_filter/rule_id.dart

@@ -10,6 +10,8 @@ class RuleId with EquatableMixin {
     required this.id,
   });
 
+  factory RuleId.fromString(String id) => RuleId(id: Id(id));
+
   @override
   List<Object?> get props => [id];
 }