TF-832 Implement delete multiple recipient in forwarding

2022-08-19 13:28:27 +07:00
parent 7da79592c8
commit 6acf70e61b
9 changed files with 377 additions and 61 deletions
@@ -2,46 +2,84 @@ import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
+import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_controller.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/recipient_forward.dart';

 class EmailForwardItemWidget extends StatelessWidget {
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
  final _imagePaths = Get.find<ImagePaths>();
  final _emailForwardController = Get.find<ForwardController>();

-  final String emailAddress;
+  final RecipientForward recipientForward;
+  final SelectMode selectionMode;

  EmailForwardItemWidget({
    Key? key,
-    required this.emailAddress,
+    required this.recipientForward,
+    this.selectionMode = SelectMode.INACTIVE,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
-    return Container(
-      padding: EdgeInsets.only(
-        top: 15,
-        bottom: 15,
-        left: _responsiveUtils.isMobile(context) ? 16 : 24,
-        right: _responsiveUtils.isMobile(context) ? 8 : 24
+    return GestureDetector(
+      onLongPress: () => _emailForwardController.selectRecipientForward(recipientForward),
+      onTap: () {
+        if (selectionMode == SelectMode.ACTIVE) {
+          _emailForwardController.selectRecipientForward(recipientForward);
+        }
+      },
+      child: Container(
+        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
+        color: Colors.white,
+        child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
+          Container(
+              width: 32,
+              height: 32,
+              color: Colors.transparent,
+              alignment: Alignment.center,
+              child: _buildAvatarIcon()),
+          const SizedBox(width: 10),
+          Expanded(child: Text(recipientForward.emailAddress,
+              overflow: CommonTextStyle.defaultTextOverFlow,
+              softWrap: CommonTextStyle.defaultSoftWrap,
+              style: const TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.w400,
+                  color: Colors.black))),
+          buildIconWeb(
+              icon: SvgPicture.asset(
+                _imagePaths.icDeleteEmailForward,
+                fit: BoxFit.fill,
+                width: 18,
+                height: 18,
+              ),
+              onTap: () =>
+                  _emailForwardController.deleteRecipients(context, recipientForward.emailAddress)),
+        ]),
      ),
-      color: Colors.white,
-      child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
-        Text(emailAddress,
-            style: const TextStyle(
-                fontSize: 16,
-                fontWeight: FontWeight.w400,
-                color: Colors.black)),
-        const Spacer(),
-        buildIconWeb(
-            icon: SvgPicture.asset(
-              _imagePaths.icDeleteEmailForward,
-              fit: BoxFit.fill,
-            ),
-            onTap: () {
-              _emailForwardController.deleteRecipients(context, emailAddress);
-            }),
-      ]),
    );
  }
+
+  Widget _buildAvatarIcon() {
+    if (selectionMode == SelectMode.ACTIVE) {
+      return Container(
+          alignment: Alignment.center,
+          child: SvgPicture.asset(
+              recipientForward.selectMode == SelectMode.ACTIVE
+                  ? _imagePaths.icSelected
+                  : _imagePaths.icUnSelected,
+              width: 24,
+              height: 24));
+    } else {
+      return CircleAvatar(
+          backgroundColor: AppColor.colorTextButton,
+          radius: 16,
+          child: Text(recipientForward.emailAddress[0].toUpperCase(),
+              style: const TextStyle(
+                  color: Colors.white,
+                  fontSize: 12,
+                  fontWeight: FontWeight.w500)));
+    }
+  }
 }
@@ -0,0 +1,97 @@
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:html_editor_enhanced/utils/utils.dart';
+import 'package:model/mailbox/select_mode.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_controller.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/recipient_forward.dart';
+
+class EmailForwardItemWidget extends StatefulWidget {
+
+  final RecipientForward recipientForward;
+  final SelectMode selectionMode;
+
+  const EmailForwardItemWidget({
+    Key? key,
+    required this.recipientForward,
+    this.selectionMode = SelectMode.INACTIVE,
+  }) : super(key: key);
+
+  @override
+  State<EmailForwardItemWidget> createState() => _EmailForwardItemWidgetState();
+}
+
+class _EmailForwardItemWidgetState extends State<EmailForwardItemWidget> {
+  final _imagePaths = Get.find<ImagePaths>();
+
+  final _emailForwardController = Get.find<ForwardController>();
+
+  bool isHoverIcon = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
+      color: Colors.white,
+      child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
+        InkWell(
+          onTap: () {
+            if (isHoverIcon) {
+              _emailForwardController.selectRecipientForward(widget.recipientForward);
+            }
+          },
+          onHover: (value) {
+            setState(mounted, this.setState, () {
+              isHoverIcon = value;
+            });
+          },
+          child: Container(
+              width: 32,
+              height: 32,
+              color: Colors.transparent,
+              alignment: Alignment.center,
+              child: _buildAvatarIcon())),
+        const SizedBox(width: 10),
+        Expanded(child: Text(widget.recipientForward.emailAddress,
+            overflow: CommonTextStyle.defaultTextOverFlow,
+            softWrap: CommonTextStyle.defaultSoftWrap,
+            style: const TextStyle(
+                fontSize: 16,
+                fontWeight: FontWeight.w400,
+                color: Colors.black))),
+        buildIconWeb(
+            icon: SvgPicture.asset(
+              _imagePaths.icDeleteEmailForward,
+              fit: BoxFit.fill,
+              width: 18,
+              height: 18,
+            ),
+            onTap: () =>
+                _emailForwardController.deleteRecipients(context, widget.recipientForward.emailAddress)),
+      ]),
+    );
+  }
+
+  Widget _buildAvatarIcon() {
+    if (isHoverIcon || widget.recipientForward.selectMode == SelectMode.ACTIVE) {
+      return Container(
+          alignment: Alignment.center,
+          child: SvgPicture.asset(
+              widget.recipientForward.selectMode == SelectMode.ACTIVE
+                  ? _imagePaths.icSelected
+                  : _imagePaths.icUnSelected,
+              width: 24,
+              height: 24));
+    } else {
+      return CircleAvatar(
+          backgroundColor: AppColor.colorTextButton,
+          radius: 16,
+          child: Text(widget.recipientForward.emailAddress[0].toUpperCase(),
+              style: const TextStyle(
+                  color: Colors.white,
+                  fontSize: 12,
+                  fontWeight: FontWeight.w500)));
+    }
+  }
+}
@@ -1,13 +1,19 @@
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/utils/app_logger.dart';
+import 'package:core/core.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
+import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_controller.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/email_forward_item_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/email_forward_item_widget.dart'
+  if (dart.library.html) 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/email_forward_item_widget_for_web.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/recipient_forward.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class ListEmailForwardsWidget extends GetWidget<ForwardController> {
-  const ListEmailForwardsWidget({Key? key}) : super(key: key);
+
+  final _imagePaths = Get.find<ImagePaths>();
+
+  ListEmailForwardsWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
@@ -25,7 +31,7 @@ class ListEmailForwardsWidget extends GetWidget<ForwardController> {
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
-              Container(
+              Obx(() => Container(
                width: double.infinity,
                decoration: const BoxDecoration(
                  color: AppColor.colorBackgroundHeaderListForwards,
@@ -33,16 +39,27 @@ class ListEmailForwardsWidget extends GetWidget<ForwardController> {
                      topLeft: Radius.circular(16),
                      topRight: Radius.circular(16)),
                ),
-                padding: const EdgeInsets.symmetric(
-                  vertical: 28,
-                  horizontal: 24,
-                ),
-                child: Text(AppLocalizations.of(context).headerEmailsForward,
-                    style: const TextStyle(
-                        fontSize: 16,
-                        fontWeight: FontWeight.w500,
-                        color: AppColor.colorTextButtonHeaderThread)),
-              ),
+                padding: controller.selectionMode.value == SelectMode.INACTIVE
+                    ? const EdgeInsets.all(24)
+                    : const EdgeInsets.symmetric(vertical: 13, horizontal: 24),
+                child: Row(children: [
+                  Expanded(child: Text(
+                      AppLocalizations.of(context).headerEmailsForward,
+                      overflow: CommonTextStyle.defaultTextOverFlow,
+                      softWrap: CommonTextStyle.defaultSoftWrap,
+                      style: const TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w500,
+                          color: AppColor.colorTextButtonHeaderThread))),
+                  Obx(() {
+                    if (controller.selectionMode.value == SelectMode.ACTIVE) {
+                      return _buildListButtonSelection(context);
+                    } else {
+                      return const SizedBox.shrink();
+                    }
+                  })
+                ]),
+              )),
              const Divider(
                color: AppColor.lineItemListColor,
                height: 1,
@@ -50,14 +67,14 @@ class ListEmailForwardsWidget extends GetWidget<ForwardController> {
              ),
              Expanded(
                child: Obx(() {
-                  final listRecipients = controller.currentForward.value?.forwards.toList() ?? <String>[];
                  return ListView.separated(
                    shrinkWrap: true,
-                    itemCount: listRecipients.length,
+                    itemCount: controller.listRecipientForward.length,
                    itemBuilder: (context, index) {
-                      final emailAddress = listRecipients[index];
-                      log('ListEmailForwardsWidget::build(): $emailAddress');
-                      return EmailForwardItemWidget(emailAddress: emailAddress);
+                      final recipientForward = controller.listRecipientForward[index];
+                      return EmailForwardItemWidget(
+                          recipientForward: recipientForward,
+                          selectionMode: controller.selectionMode.value);
                    },
                    separatorBuilder: (context, index) => const Divider(
                        color: AppColor.lineItemListColor,
@@ -71,4 +88,27 @@ class ListEmailForwardsWidget extends GetWidget<ForwardController> {
      ),
    );
  }
-}
+
+  Widget _buildListButtonSelection(BuildContext context) {
+    return Row(mainAxisSize: MainAxisSize.min, children: [
+      buildIconWeb(
+          icon: SvgPicture.asset(
+              _imagePaths.icCloseComposer,
+              color: AppColor.colorTextButton,
+              fit: BoxFit.fill),
+          tooltip: AppLocalizations.of(context).cancel,
+          onTap: () => controller.cancelSelectionMode()),
+      const SizedBox(width: 5),
+      buildIconWeb(
+          icon: SvgPicture.asset(
+              _imagePaths.icDelete,
+              color: AppColor.colorActionDeleteConfirmDialog,
+              fit: BoxFit.fill),
+          tooltip: AppLocalizations.of(context).delete_all,
+          onTap: () =>
+              controller.deleteMultipleRecipients(
+                  context,
+                  controller.listRecipientForwardSelected.listEmailAddress))
+    ]);
+  }
+}