TF-1915 Display SendingState widget in item sending email

(cherry picked from commit d71d4cdc642089f82180de8f627f628ee50f0bd3)

lib/features/sending_queue/presentation/widgets/sending_email_tile_widget.dart

@@ -1,7 +1,9 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/extensions/string_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/utils/style_utils.dart';
+import 'package:core/utils/app_logger.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -9,6 +11,8 @@ import 'package:model/extensions/presentation_email_extension.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/composer/domain/model/sending_email.dart';
 import 'package:tmail_ui_user/features/sending_queue/presentation/model/sending_email_action_type.dart';
+import 'package:tmail_ui_user/features/sending_queue/presentation/utils/sending_queue_utils.dart';
+import 'package:tmail_ui_user/features/sending_queue/presentation/widgets/sending_state_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnLongPressSendingEmailItemAction = void Function(SendingEmail);
@@ -22,6 +26,7 @@ class SendingEmailTileWidget extends StatelessWidget {
   final OnLongPressSendingEmailItemAction? onLongPressAction;
   final OnSelectSendingEmailItemAction? onTapAction;
   final OnSelectLeadingSendingEmailItemAction? onSelectLeadingAction;
+
   const SendingEmailTileWidget({
     super.key,
     required this.sendingEmail,
@@ -33,118 +38,147 @@ class SendingEmailTileWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final imagePath = Get.find<ImagePaths>();
+    final imagePaths = Get.find<ImagePaths>();
 
-    return Material(
+    return LayoutBuilder(builder: (context, constraints) {
-      color: Colors.transparent,
+      log('SendingEmailTileWidget::build(): MAX_WIDTH: ${constraints.maxWidth}');
-      child: InkWell(
+      return Material(
-        onTap: () => onTapAction?.call(SendingEmailActionType.edit ,sendingEmail),
+        color: Colors.transparent,
-        onLongPress: () => onLongPressAction?.call(sendingEmail),
+        child: InkWell(
-        child: Column(
+          onTap: () => onTapAction?.call(SendingEmailActionType.edit ,sendingEmail),
-          crossAxisAlignment: CrossAxisAlignment.start,
+          onLongPress: () => onLongPressAction?.call(sendingEmail),
-          children: [
+          child: Column(
-            Padding(
+            crossAxisAlignment: CrossAxisAlignment.start,
-              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            children: [
-              child: Row(
+              Padding(
-                children: [
+                padding: SendingQueueUtils.getPaddingItemListViewByResponsiveSize(constraints.maxWidth),
-                  if (selectMode == SelectMode.ACTIVE)
+                child: Row(
-                    GestureDetector(
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                      child: Container(
+                  children: [
+                    if (selectMode == SelectMode.ACTIVE)
+                      GestureDetector(
+                        child: Container(
+                          width: 60,
+                          height: 60,
+                          decoration: const BoxDecoration(
+                            color: Colors.white,
+                            borderRadius: BorderRadius.all(Radius.circular(30))
+                          ),
+                          alignment: Alignment.center,
+                          child: SvgPicture.asset(
+                            sendingEmail.isSelected
+                              ? imagePaths.icSelected
+                              : imagePaths.icUnSelected,
+                            fit: BoxFit.fill,
+                            width: 24,
+                            height: 24
+                          ),
+                        ),
+                        onTap: () => onSelectLeadingAction?.call(sendingEmail),
+                      )
+                    else
+                      SvgPicture.asset(
+                        sendingEmail.presentationEmail.numberOfAllEmailAddress() == 1
+                          ? sendingEmail.sendingState.getAvatarPersonal(imagePaths)
+                          : sendingEmail.sendingState.getAvatarGroup(imagePaths),
+                        fit: BoxFit.fill,
                         width: 60,
                         height: 60,
-                        decoration: const BoxDecoration(
-                          color: Colors.white,
-                          borderRadius: BorderRadius.all(Radius.circular(30))
-                        ),
-                        alignment: Alignment.center,
-                        child: SvgPicture.asset(
-                          sendingEmail.isSelected
-                            ? imagePath.icSelected
-                            : imagePath.icUnSelected,
-                          fit: BoxFit.fill,
-                          width: 24,
-                          height: 24
-                        ),
                       ),
-                      onTap: () => onSelectLeadingAction?.call(sendingEmail),
+                    const SizedBox(width: 8),
-                    )
+                    Expanded(child: Column(
-                  else
+                      crossAxisAlignment: CrossAxisAlignment.start,
-                    SvgPicture.asset(
+                      children: [
-                      sendingEmail.presentationEmail.numberOfAllEmailAddress() == 1
+                        Row(children: [
-                        ? imagePath.icAvatarPersonal
+                          Expanded(child: Text(
-                        : imagePath.icAvatarGroup,
+                            AppLocalizations.of(context).titleRecipientSendingEmail(sendingEmail.presentationEmail.recipientsName()).withUnicodeCharacter,
-                      fit: BoxFit.fill,
+                            softWrap: CommonTextStyle.defaultSoftWrap,
-                      width: 60,
+                            overflow: CommonTextStyle.defaultTextOverFlow,
-                      height: 60,
+                            maxLines: 1,
-                    ),
+                            style: TextStyle(
-                  const SizedBox(width: 8),
+                              fontSize: 15,
-                  Expanded(child: Column(
+                              color: sendingEmail.isDelivering
-                    crossAxisAlignment: CrossAxisAlignment.start,
+                                ? AppColor.colorDeliveringState
-                    children: [
+                                : Colors.black,
-                      Row(children: [
+                              fontWeight: FontWeight.w600
-                        Expanded(child: Text(
+                            )
-                          AppLocalizations.of(context).titleRecipientSendingEmail(sendingEmail.presentationEmail.recipientsName()).withUnicodeCharacter,
+                          )),
+                          if (sendingEmail.email.attachments != null && sendingEmail.email.attachments!.isNotEmpty)
+                            Padding(
+                              padding: const EdgeInsets.only(left: 8),
+                              child: SvgPicture.asset(
+                                imagePaths.icAttachment,
+                                width: 20,
+                                height: 20,
+                                fit: BoxFit.fill
+                              )
+                            ),
+                          Padding(
+                            padding: const EdgeInsets.only(left: 8),
+                            child: Text(
+                              sendingEmail.getCreateTimeAt(Localizations.localeOf(context).toLanguageTag()),
+                              maxLines: 1,
+                              softWrap: CommonTextStyle.defaultSoftWrap,
+                              overflow: CommonTextStyle.defaultTextOverFlow,
+                              style: TextStyle(
+                                fontSize: 13,
+                                color: sendingEmail.isDelivering
+                                  ? AppColor.colorDeliveringState
+                                  : Colors.black,
+                                fontWeight: FontWeight.normal
+                              )
+                            )
+                          ),
+                          if (!sendingEmail.isReady && !ResponsiveUtils.isMatchedMobileWidth(constraints.maxWidth))
+                            Container(
+                              margin: const EdgeInsets.only(left: 8),
+                              width: 120,
+                              child: Row(
+                                mainAxisSize: MainAxisSize.min,
+                                children: [
+                                  const Spacer(),
+                                  SendingStateWidget(
+                                    sendingState: sendingEmail.sendingState,
+                                    constraints: const BoxConstraints(maxWidth: 80),
+                                  )
+                                ]
+                              )
+                            )
+                        ]),
+                        const SizedBox(height: 8),
+                        Text(
+                          sendingEmail.presentationEmail.getEmailTitle().withUnicodeCharacter,
                           softWrap: CommonTextStyle.defaultSoftWrap,
                           overflow: CommonTextStyle.defaultTextOverFlow,
                           maxLines: 1,
-                          style: const TextStyle(
+                          style: TextStyle(
-                            fontSize: 15,
+                            fontSize: 13,
-                            color: AppColor.colorTitleSendingItem,
+                            color: sendingEmail.isDelivering
-                            fontWeight: FontWeight.w600
+                              ? AppColor.colorDeliveringState
+                              : AppColor.colorTitleSendingItem,
+                            fontWeight: FontWeight.normal
                           )
-                        )),
+                        ),
-                        if (sendingEmail.email.attachments != null && sendingEmail.email.attachments!.isNotEmpty)
+                        if (!sendingEmail.isReady && ResponsiveUtils.isMatchedMobileWidth(constraints.maxWidth))
                           Padding(
-                            padding: const EdgeInsets.only(left: 8),
+                            padding: const EdgeInsets.only(top: 8),
-                            child: SvgPicture.asset(
+                            child: SendingStateWidget(sendingState: sendingEmail.sendingState))
-                              imagePath.icAttachment,
+                      ]
-                              width: 20,
+                    ))
-                              height: 20,
+                ]),
-                              fit: BoxFit.fill
-                            )
-                          ),
-                        Padding(
-                          padding: const EdgeInsets.only(left: 8),
-                          child: Text(
-                            sendingEmail.getCreateTimeAt(Localizations.localeOf(context).toLanguageTag()),
-                            maxLines: 1,
-                            softWrap: CommonTextStyle.defaultSoftWrap,
-                            overflow: CommonTextStyle.defaultTextOverFlow,
-                            style: const TextStyle(
-                              fontSize: 13,
-                              color: AppColor.colorTitleSendingItem,
-                              fontWeight: FontWeight.normal
-                            )
-                          )
-                        )
-                      ]),
-                      const SizedBox(height: 8),
-                      Text(
-                        sendingEmail.presentationEmail.getEmailTitle().withUnicodeCharacter,
-                        softWrap: CommonTextStyle.defaultSoftWrap,
-                        overflow: CommonTextStyle.defaultTextOverFlow,
-                        maxLines: 1,
-                        style: const TextStyle(
-                          fontSize: 13,
-                          color: AppColor.colorTitleSendingItem,
-                          fontWeight: FontWeight.normal
-                        )
-                      ),
-                    ]
-                  ))
-              ]),
-            ),
-            const Padding(
-              padding: EdgeInsets.only(left: 84, right: 8),
-              child: Divider(
-                color: AppColor.lineItemListColor,
-                height: 1,
-                thickness: 0.2
               ),
-            )
+              Padding(
-          ],
+                padding: SendingQueueUtils.getPaddingDividerListViewByResponsiveSize(constraints.maxWidth, sendingEmail),
+                child: const Divider(
+                  color: AppColor.lineItemListColor,
+                  height: 1,
+                  thickness: 0.2
+                ),
+              )
+            ],
+          ),
         ),
-      ),
+      );
-    );
+    });
   }
 }

lib/features/sending_queue/presentation/widgets/sending_state_widget.dart

@@ -0,0 +1,71 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/style_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tmail_ui_user/features/offline_mode/model/sending_state.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+
+class SendingStateWidget extends StatelessWidget {
+
+  final SendingState sendingState;
+  final BoxConstraints? constraints;
+
+  const SendingStateWidget({
+    super.key,
+    required this.sendingState,
+    this.constraints
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final imagePath = getBinding<ImagePaths>();
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+      decoration: BoxDecoration(
+        color: sendingState.getBackgroundColor(),
+        borderRadius: const BorderRadius.all(Radius.circular(16))
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          SvgPicture.asset(
+            sendingState.getIcon(imagePath!),
+            fit: BoxFit.fill,
+            width: 20,
+            height: 20
+          ),
+          const SizedBox(width: 4),
+          if (constraints != null)
+            ConstrainedBox(
+              constraints: constraints!,
+              child: Text(
+                sendingState.getTitle(context),
+                maxLines: 1,
+                overflow: CommonTextStyle.defaultTextOverFlow,
+                softWrap: CommonTextStyle.defaultSoftWrap,
+                style: TextStyle(
+                  fontSize: 15,
+                  color: sendingState.getTitleColor(),
+                  fontWeight: FontWeight.normal
+                )
+              ),
+            )
+          else
+            Text(
+              sendingState.getTitle(context),
+              maxLines: 1,
+              overflow: CommonTextStyle.defaultTextOverFlow,
+              softWrap: CommonTextStyle.defaultSoftWrap,
+              style: TextStyle(
+                fontSize: 15,
+                color: sendingState.getTitleColor(),
+                fontWeight: FontWeight.normal
+              )
+            )
+        ]
+      ),
+    );
+  }
+}