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,8 +38,10 @@ class SendingEmailTileWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final imagePath = Get.find<ImagePaths>();
+    final imagePaths = Get.find<ImagePaths>();
 
+    return LayoutBuilder(builder: (context, constraints) {
+      log('SendingEmailTileWidget::build(): MAX_WIDTH: ${constraints.maxWidth}');
       return Material(
         color: Colors.transparent,
         child: InkWell(
@@ -44,8 +51,9 @@ class SendingEmailTileWidget extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+                padding: SendingQueueUtils.getPaddingItemListViewByResponsiveSize(constraints.maxWidth),
                 child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     if (selectMode == SelectMode.ACTIVE)
                       GestureDetector(
@@ -59,8 +67,8 @@ class SendingEmailTileWidget extends StatelessWidget {
                           alignment: Alignment.center,
                           child: SvgPicture.asset(
                             sendingEmail.isSelected
-                            ? imagePath.icSelected
+                              ? imagePaths.icSelected
-                            : imagePath.icUnSelected,
+                              : imagePaths.icUnSelected,
                             fit: BoxFit.fill,
                             width: 24,
                             height: 24
@@ -71,8 +79,8 @@ class SendingEmailTileWidget extends StatelessWidget {
                     else
                       SvgPicture.asset(
                         sendingEmail.presentationEmail.numberOfAllEmailAddress() == 1
-                        ? imagePath.icAvatarPersonal
+                          ? sendingEmail.sendingState.getAvatarPersonal(imagePaths)
-                        : imagePath.icAvatarGroup,
+                          : sendingEmail.sendingState.getAvatarGroup(imagePaths),
                         fit: BoxFit.fill,
                         width: 60,
                         height: 60,
@@ -87,9 +95,11 @@ class SendingEmailTileWidget extends StatelessWidget {
                             softWrap: CommonTextStyle.defaultSoftWrap,
                             overflow: CommonTextStyle.defaultTextOverFlow,
                             maxLines: 1,
-                          style: const TextStyle(
+                            style: TextStyle(
                               fontSize: 15,
-                            color: AppColor.colorTitleSendingItem,
+                              color: sendingEmail.isDelivering
+                                ? AppColor.colorDeliveringState
+                                : Colors.black,
                               fontWeight: FontWeight.w600
                             )
                           )),
@@ -97,7 +107,7 @@ class SendingEmailTileWidget extends StatelessWidget {
                             Padding(
                               padding: const EdgeInsets.only(left: 8),
                               child: SvgPicture.asset(
-                              imagePath.icAttachment,
+                                imagePaths.icAttachment,
                                 width: 20,
                                 height: 20,
                                 fit: BoxFit.fill
@@ -110,12 +120,29 @@ class SendingEmailTileWidget extends StatelessWidget {
                               maxLines: 1,
                               softWrap: CommonTextStyle.defaultSoftWrap,
                               overflow: CommonTextStyle.defaultTextOverFlow,
-                            style: const TextStyle(
+                              style: TextStyle(
                                 fontSize: 13,
-                              color: AppColor.colorTitleSendingItem,
+                                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),
@@ -124,19 +151,25 @@ class SendingEmailTileWidget extends StatelessWidget {
                           softWrap: CommonTextStyle.defaultSoftWrap,
                           overflow: CommonTextStyle.defaultTextOverFlow,
                           maxLines: 1,
-                        style: const TextStyle(
+                          style: TextStyle(
                             fontSize: 13,
-                          color: AppColor.colorTitleSendingItem,
+                            color: sendingEmail.isDelivering
+                              ? AppColor.colorDeliveringState
+                              : AppColor.colorTitleSendingItem,
                             fontWeight: FontWeight.normal
                           )
                         ),
+                        if (!sendingEmail.isReady && ResponsiveUtils.isMatchedMobileWidth(constraints.maxWidth))
+                          Padding(
+                            padding: const EdgeInsets.only(top: 8),
+                            child: SendingStateWidget(sendingState: sendingEmail.sendingState))
                       ]
                     ))
                 ]),
               ),
-            const Padding(
+              Padding(
-              padding: EdgeInsets.only(left: 84, right: 8),
+                padding: SendingQueueUtils.getPaddingDividerListViewByResponsiveSize(constraints.maxWidth, sendingEmail),
-              child: Divider(
+                child: const Divider(
                   color: AppColor.lineItemListColor,
                   height: 1,
                   thickness: 0.2
@@ -146,5 +179,6 @@ class SendingEmailTileWidget extends StatelessWidget {
           ),
         ),
       );
+    });
   }
 }

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
+              )
+            )
+        ]
+      ),
+    );
+  }
+}