TF-2116 Apply new design attachment in mobile composer

(cherry picked from commit 4d8a7590e11044963093a98095948d9820f34efb)
2023-09-07 22:49:26 +07:00
parent 655446133c
commit 27b5342132
14 changed files with 327 additions and 194 deletions
@@ -41,6 +41,7 @@ class AttachmentItemComposerWidget extends StatelessWidget with AppLoaderMixin {
      ),
      width: AttachmentItemComposerWidgetStyle.width,
      padding: AttachmentItemComposerWidgetStyle.padding,
+      margin: itemMargin,
      child: Row(
        children: [
          Expanded(
@@ -0,0 +1,55 @@
+import 'package:core/presentation/state/failure.dart';
+import 'package:core/presentation/state/success.dart';
+import 'package:dartz/dartz.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/base/widget/circle_loading_widget.dart';
+import 'package:tmail_ui_user/features/composer/domain/state/download_image_as_base64_state.dart';
+import 'package:tmail_ui_user/features/upload/domain/state/attachment_upload_state.dart';
+
+class InsertImageLoadingBarWidget extends StatelessWidget {
+
+  final Either<Failure, Success> viewState;
+  final Either<Failure, Success> uploadInlineViewState;
+  final EdgeInsetsGeometry? padding;
+
+  const InsertImageLoadingBarWidget({
+    super.key,
+    required this.viewState,
+    required this.uploadInlineViewState,
+    this.padding,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return uploadInlineViewState.fold(
+      (failure) {
+        return viewState.fold(
+          (failure) => const SizedBox.shrink(),
+          (success) {
+            if (success is DownloadingImageAsBase64) {
+              return CircleLoadingWidget(padding: padding);
+            } else {
+              return const SizedBox.shrink();
+            }
+          }
+        );
+      },
+      (success) {
+        if (success is UploadingAttachmentUploadState) {
+          return CircleLoadingWidget(padding: padding);
+        } else {
+          return viewState.fold(
+            (failure) => const SizedBox.shrink(),
+            (success) {
+              if (success is DownloadingImageAsBase64) {
+                return CircleLoadingWidget(padding: padding);
+              } else {
+                return const SizedBox.shrink();
+              }
+            }
+          );
+        }
+      }
+    );
+  }
+}
@@ -1,83 +1,72 @@
-import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/views/list/sliver_grid_delegate_fixed_height.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/composer/presentation/styles/attachment_item_composer_widget_style.dart';
 import 'package:tmail_ui_user/features/composer/presentation/styles/mobile/mobile_attachment_composer_widget_style.dart';
 import 'package:tmail_ui_user/features/composer/presentation/widgets/attachment_item_composer_widget.dart';
 import 'package:tmail_ui_user/features/upload/presentation/model/upload_file_state.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

-typedef OnShowMoreAttachmentAction = void Function(bool isShowMore);
-
-class MobileAttachmentComposerWidget extends StatefulWidget {
+class MobileAttachmentComposerWidget extends StatelessWidget {

  final List<UploadFileState> listFileUploaded;
-  final bool isShowMore;
  final OnDeleteAttachmentAction onDeleteAttachmentAction;
-  final OnShowMoreAttachmentAction onShowMoreAttachmentAction;

-  const MobileAttachmentComposerWidget({
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  MobileAttachmentComposerWidget({
    super.key,
    required this.listFileUploaded,
-    required this.isShowMore,
    required this.onDeleteAttachmentAction,
-    required this.onShowMoreAttachmentAction,
  });

-  @override
-  State<MobileAttachmentComposerWidget> createState() => _MobileAttachmentComposerWidgetState();
-}
-
-class _MobileAttachmentComposerWidgetState extends State<MobileAttachmentComposerWidget> {
-
-  static const int _maxDisplayedItem = 6;
-
-  bool _isShowMore = false;
-  int _currentCountDisplayed = _maxDisplayedItem;
-
-  @override
-  void initState() {
-    super.initState();
-    _isShowMore = widget.isShowMore;
-    if (_isShowMore) {
-      _currentCountDisplayed = widget.listFileUploaded.length;
-    } else {
-      _currentCountDisplayed = widget.listFileUploaded.length > 6
-        ? 6
-        : widget.listFileUploaded.length;
-    }
-  }
-
  @override
  Widget build(BuildContext context) {
-    final displayedFiles = widget.listFileUploaded.sublist(0, _currentCountDisplayed);
-
    return Container(
-      color: MobileAttachmentComposerWidgetStyle.backgroundColor,
-      width: double.infinity,
      padding: MobileAttachmentComposerWidgetStyle.padding,
+      width: double.infinity,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
-          Wrap(
-            spacing: MobileAttachmentComposerWidgetStyle.listItemSpace,
-            runSpacing: MobileAttachmentComposerWidgetStyle.listItemSpace,
-            children: displayedFiles
-              .map((file) => AttachmentItemComposerWidget(
-                fileState: file,
-                onDeleteAttachmentAction: widget.onDeleteAttachmentAction
-              ))
-              .toList(),
-          ),
-          if (!_isShowMore)
-            TMailButtonWidget.fromText(
-              text: AppLocalizations.of(context).showMoreAttachment(widget.listFileUploaded.length),
-              textStyle: MobileAttachmentComposerWidgetStyle.showMoreButtonTextStyle,
-              margin: MobileAttachmentComposerWidgetStyle.showMoreMargin,
-              backgroundColor: Colors.transparent,
-              onTapActionCallback: () {
-                setState(() => _isShowMore = true);
-                widget.onShowMoreAttachmentAction(_isShowMore);
-              },
+          if (_responsiveUtils.isLandscapeMobile(context))
+            SizedBox(
+              width: _responsiveUtils.getSizeScreenWidth(context) * 0.7,
+              child: GridView.builder(
+                reverse: true,
+                primary: false,
+                shrinkWrap: true,
+                itemCount: listFileUploaded.length,
+                gridDelegate: const SliverGridDelegateFixedHeight(
+                  height: MobileAttachmentComposerWidgetStyle.listItemHeight,
+                  crossAxisCount: MobileAttachmentComposerWidgetStyle.maxItemRow,
+                  crossAxisSpacing: MobileAttachmentComposerWidgetStyle.listItemSpace,
+                ),
+                itemBuilder: (context, index) {
+                  return AttachmentItemComposerWidget(
+                    fileState: listFileUploaded[index],
+                    itemMargin: MobileAttachmentComposerWidgetStyle.itemMargin,
+                    onDeleteAttachmentAction: onDeleteAttachmentAction
+                  );
+                }
+              ),
+            )
+          else
+            SizedBox(
+              width: AttachmentItemComposerWidgetStyle.width,
+              child: ListView.builder(
+                reverse: true,
+                shrinkWrap: true,
+                primary: false,
+                itemCount: listFileUploaded.length,
+                itemBuilder: (context, index) {
+                  return AttachmentItemComposerWidget(
+                    fileState: listFileUploaded[index],
+                    itemMargin: MobileAttachmentComposerWidgetStyle.itemMargin,
+                    onDeleteAttachmentAction: onDeleteAttachmentAction
+                  );
+                }
+              ),
            )
        ]
      ),