TF-4004 Change new design for list email rules view

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 = Get.find<ImagePaths>();
-  final _emailRuleController = Get.find<EmailRulesController>();
-
+  final ImagePaths imagePaths;
+  final ResponsiveUtils responsiveUtils;
   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(
-        top: 15,
-        bottom: 15,
-        start: _responsiveUtils.isMobile(context) ? 16 : 24,
-        end: _responsiveUtils.isMobile(context) ? 0 : 24
+      decoration: const BoxDecoration(
+        color: AppColor.lightGrayF9FAFB,
+        borderRadius: BorderRadius.all(Radius.circular(10)),
       ),
-      color: Colors.white,
-      child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
-        Text(rule.name,
-            style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-                fontSize: 16,
-                fontWeight: FontWeight.w400,
-                color: Colors.black)),
-        const Spacer(),
-        if (_responsiveUtils.isMobile(context))
-          buildIconWeb(
-            icon: SvgPicture.asset(
-              _imagePaths.icOpenEditRule,
-              fit: BoxFit.fill,
+      height: 72,
+      padding: const EdgeInsetsDirectional.symmetric(horizontal: 32),
+      margin: const EdgeInsetsDirectional.only(top: 8),
+      child: Row(
+        children: [
+          if (!isMobile) ...[
+            ConstrainedBox(
+              constraints: BoxConstraints(maxWidth: context.width / 2),
+              child: Text(
+                rule.name,
+                style: ThemeUtils.textStyleBodyBody3(
+                  color: Colors.black,
+                ),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
             ),
-            iconPadding: EdgeInsets.zero,
-            onTap: () =>
-                _emailRuleController.openEditRuleMenuAction(context, rule),
-          )
-        else
-          ...[
-            TMailButtonWidget.fromIcon(
-              icon: _imagePaths.icCompose,
-              iconColor: AppColor.primaryColor,
-              iconSize: 24,
-              padding: const EdgeInsets.all(5),
-              backgroundColor: Colors.transparent,
-              tooltipMessage: AppLocalizations.of(context).editRule,
-              margin: const EdgeInsetsDirectional.only(end: 5),
-              onTapActionCallback: () =>
-                  _emailRuleController.editEmailRule(context, rule),
+            Expanded(
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Flexible(
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: AppColor.gray49454F.withValues(alpha: 0.08),
+                        borderRadius: const BorderRadius.all(
+                          Radius.circular(16),
+                        ),
+                      ),
+                      margin: const EdgeInsetsDirectional.symmetric(
+                        horizontal: 24,
+                      ),
+                      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,
-              iconColor: AppColor.primaryColor,
-              iconSize: 24,
-              padding: const EdgeInsets.all(5),
+              icon: imagePaths.icEdit,
+              iconSize: 20,
+              iconColor: AppColor.steelGrayA540,
               backgroundColor: Colors.transparent,
-              tooltipMessage: AppLocalizations.of(context).deleteRule,
-              onTapActionCallback: () =>
-                  _emailRuleController.deleteEmailRule(context, rule),
+              margin: const EdgeInsetsDirectional.only(end: 12),
+              onTapActionCallback: () => onEditEmailRuleAction?.call(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/utils/theme_utils.dart';
-import 'package:core/utils/app_logger.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.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> {
-  const ListEmailRulesWidget({Key? key}) : super(key: key);
+class ListEmailRulesWidget extends StatelessWidget {
+  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(
-      decoration: BoxDecoration(
-        color: AppColor.colorBackgroundWrapIconStyleCode,
-        borderRadius: BorderRadius.circular(16),
-        border: Border.all(
-            width: 1,
-            color: AppColor.colorBorderListRuleFilter)
+    final isMobile = responsiveUtils.isMobile(context);
+
+    return Padding(
+      padding: const EdgeInsetsDirectional.only(
+        top: 12,
       ),
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(16),
-        child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              Container(
-                width: double.infinity,
-                decoration: const BoxDecoration(
-                  color: AppColor.colorBackgroundHeaderListRuleFilter,
-                  borderRadius: BorderRadius.only(
-                      topLeft: Radius.circular(16),
-                      topRight: Radius.circular(16)),
-                ),
-                padding: const EdgeInsets.symmetric(
-                  vertical: 28,
-                  horizontal: 24,
-                ),
-                child: Text(AppLocalizations.of(context).headerNameOfRules,
-                    style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-                        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();
-                    }
-                  },
-                );
-              }),
-            ]),
+      child: ListView.builder(
+        shrinkWrap: true,
+        itemCount: listEmailRule.length,
+        primary: false,
+        padding: EdgeInsetsDirectional.only(
+          bottom: 16,
+          start: isMobile ? 16 : 0,
+          end: isMobile ? 16 : 0,
+        ),
+        itemBuilder: (context, index) {
+          final ruleWithId = listEmailRule[index].copyWith(
+            id: RuleId.fromString(index.toString()),
+          );
+          return EmailRulesItemWidget(
+            rule: ruleWithId,
+            responsiveUtils: responsiveUtils,
+            imagePaths: imagePaths,
+            onEditEmailRuleAction: onEditEmailRuleAction,
+            onDeleteEmailRuleAction: onDeleteEmailRuleAction,
+            onMoreEmailRuleAction: onMoreEmailRuleAction,
+          );
+        },
       ),
     );
   }