TF-2628 [Part-2] Integrate loading logic to attachment item UI

This commit is contained in:
DatDang
2024-02-28 08:57:40 +07:00
committed by Dat H. Pham
parent e727e60a6d
commit 01d62da036
2 changed files with 154 additions and 114 deletions
@@ -8,8 +8,10 @@ import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:model/email/attachment.dart'; import 'package:model/email/attachment.dart';
import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
import 'package:tmail_ui_user/features/email/presentation/extensions/attachment_extension.dart'; import 'package:tmail_ui_user/features/email/presentation/extensions/attachment_extension.dart';
import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_item_widget_style.dart'; import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_item_widget_style.dart';
import 'package:tmail_ui_user/features/email/presentation/utils/email_utils.dart';
typedef OnDownloadAttachmentFileActionClick = void Function(Attachment attachment); typedef OnDownloadAttachmentFileActionClick = void Function(Attachment attachment);
typedef OnViewAttachmentFileActionClick = void Function(Attachment attachment); typedef OnViewAttachmentFileActionClick = void Function(Attachment attachment);
@@ -32,67 +34,85 @@ class AttachmentItemWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Material( return Obx(
color: Colors.transparent, () {
child: InkWell( final controller = Get.find<SingleEmailController>();
onTap: () => viewAttachmentAction?.call(attachment), final attachmentsViewState = controller.attachmentsViewState;
customBorder: const RoundedRectangleBorder( bool isLoading = false;
borderRadius: BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius)) if (attachment.blobId != null) {
), isLoading = !EmailUtils.checkingIfAttachmentActionIsEnabled(
child: Container( attachmentsViewState[attachment.blobId!]);
padding: AttachmentItemWidgetStyle.contentPadding, }
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius)), return Material(
border: Border.all(color: AttachmentItemWidgetStyle.borderColor), color: Colors.transparent,
), child: InkWell(
width: _getMaxWidthItem(context), onTap: isLoading ? null : () => viewAttachmentAction?.call(attachment),
child: Row( customBorder: const RoundedRectangleBorder(
children: [ borderRadius: BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius))
SvgPicture.asset( ),
attachment.getIcon(_imagePaths), child: Container(
width: AttachmentItemWidgetStyle.iconSize, padding: AttachmentItemWidgetStyle.contentPadding,
height: AttachmentItemWidgetStyle.iconSize, decoration: BoxDecoration(
fit: BoxFit.fill borderRadius: const BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius)),
border: Border.all(color: AttachmentItemWidgetStyle.borderColor),
), ),
const SizedBox(width: AttachmentItemWidgetStyle.space), width: _getMaxWidthItem(context),
Expanded( child: Row(
child: PlatformInfo.isCanvasKit children: [
? ExtendedText( isLoading
(attachment.name ?? ''), ? const SizedBox(
maxLines: 1, width: AttachmentItemWidgetStyle.iconSize,
overflowWidget: const TextOverflowWidget( height: AttachmentItemWidgetStyle.iconSize,
position: TextOverflowPosition.middle, child: CircularProgressIndicator(strokeWidth: 2))
child: Text( : SvgPicture.asset(attachment.getIcon(_imagePaths),
"...", width: AttachmentItemWidgetStyle.iconSize,
style: AttachmentItemWidgetStyle.dotsLabelTextStyle, height: AttachmentItemWidgetStyle.iconSize,
), fit: BoxFit.fill
), ),
style: AttachmentItemWidgetStyle.labelTextStyle, const SizedBox(width: AttachmentItemWidgetStyle.space),
) Expanded(
: Text( child: PlatformInfo.isCanvasKit
(attachment.name ?? ''), ? ExtendedText(
maxLines: 1, (attachment.name ?? ''),
overflow: TextOverflow.ellipsis, maxLines: 1,
style: AttachmentItemWidgetStyle.labelTextStyle, overflowWidget: const TextOverflowWidget(
) position: TextOverflowPosition.middle,
), child: Text(
const SizedBox(width: AttachmentItemWidgetStyle.space), "...",
Text( style: AttachmentItemWidgetStyle.dotsLabelTextStyle,
filesize(attachment.size?.value), ),
maxLines: 1, ),
style: AttachmentItemWidgetStyle.sizeLabelTextStyle, style: AttachmentItemWidgetStyle.labelTextStyle,
), )
TMailButtonWidget.fromIcon( : Text(
icon: _imagePaths.icDownloadAttachment, (attachment.name ?? ''),
backgroundColor: Colors.transparent, maxLines: 1,
padding: const EdgeInsets.all(5), overflow: TextOverflow.ellipsis,
iconSize: AttachmentItemWidgetStyle.downloadIconSize, style: AttachmentItemWidgetStyle.labelTextStyle,
onTapActionCallback: () => downloadAttachmentAction?.call(attachment) )
),
const SizedBox(width: AttachmentItemWidgetStyle.space),
Text(
filesize(attachment.size?.value),
maxLines: 1,
style: AttachmentItemWidgetStyle.sizeLabelTextStyle,
),
TMailButtonWidget.fromIcon(
icon: _imagePaths.icDownloadAttachment,
backgroundColor: Colors.transparent,
padding: const EdgeInsets.all(5),
iconSize: AttachmentItemWidgetStyle.downloadIconSize,
onTapActionCallback: isLoading
? null
: () => downloadAttachmentAction?.call(attachment)
)
]
) )
] ),
) ),
), );
), }
); );
} }
@@ -8,8 +8,10 @@ import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:model/email/attachment.dart'; import 'package:model/email/attachment.dart';
import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
import 'package:tmail_ui_user/features/email/presentation/extensions/attachment_extension.dart'; import 'package:tmail_ui_user/features/email/presentation/extensions/attachment_extension.dart';
import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_item_widget_styles.dart'; import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_item_widget_styles.dart';
import 'package:tmail_ui_user/features/email/presentation/utils/email_utils.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_item_widget.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_item_widget.dart';
typedef OnDownloadAttachmentFileActionClick = void Function(Attachment attachment); typedef OnDownloadAttachmentFileActionClick = void Function(Attachment attachment);
@@ -31,66 +33,84 @@ class AttachmentListItemWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Material( return Obx(
type: MaterialType.transparency, () {
child: InkWell( final controller = Get.find<SingleEmailController>();
onTap: () => viewAttachmentAction?.call(attachment), final attachmentsViewState = controller.attachmentsViewState;
child: Padding( bool isLoading = false;
padding: AttachmentListItemWidgetStyle.contentPadding, if (attachment.blobId != null) {
child: Row( isLoading = !EmailUtils.checkingIfAttachmentActionIsEnabled(
children: [ attachmentsViewState[attachment.blobId!]);
SvgPicture.asset( }
attachment.getIcon(_imagePaths),
width: AttachmentListItemWidgetStyle.iconSize, return Material(
height: AttachmentListItemWidgetStyle.iconSize, type: MaterialType.transparency,
fit: BoxFit.fill child: InkWell(
), onTap: isLoading ? null : () => viewAttachmentAction?.call(attachment),
const SizedBox(width: AttachmentListItemWidgetStyle.space), child: Padding(
Expanded( padding: AttachmentListItemWidgetStyle.contentPadding,
child: Column( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, children: [
children: [ isLoading
if (PlatformInfo.isCanvasKit) ? const SizedBox(
ExtendedText( width: AttachmentListItemWidgetStyle.iconSize,
(attachment.name ?? ''), height: AttachmentListItemWidgetStyle.iconSize,
maxLines: 1, child: CircularProgressIndicator(strokeWidth: 2))
overflowWidget: const TextOverflowWidget( : SvgPicture.asset(attachment.getIcon(_imagePaths),
position: TextOverflowPosition.middle, width: AttachmentListItemWidgetStyle.iconSize,
child: Text( height: AttachmentListItemWidgetStyle.iconSize,
"...", fit: BoxFit.fill
style: AttachmentListItemWidgetStyle.dotsLabelTextStyle, ),
const SizedBox(width: AttachmentListItemWidgetStyle.space),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (PlatformInfo.isCanvasKit)
ExtendedText(
(attachment.name ?? ''),
maxLines: 1,
overflowWidget: const TextOverflowWidget(
position: TextOverflowPosition.middle,
child: Text(
"...",
style: AttachmentListItemWidgetStyle.dotsLabelTextStyle,
),
),
style: AttachmentListItemWidgetStyle.labelTextStyle,
)
else
Text(
(attachment.name ?? ''),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: AttachmentListItemWidgetStyle.labelTextStyle,
), ),
), const SizedBox(height: AttachmentListItemWidgetStyle.fileTitleBottomSpace),
style: AttachmentListItemWidgetStyle.labelTextStyle, Text(
) filesize(attachment.size?.value),
else maxLines: 1,
Text( overflow: CommonTextStyle.defaultTextOverFlow,
(attachment.name ?? ''), softWrap: CommonTextStyle.defaultSoftWrap,
maxLines: 1, style: AttachmentListItemWidgetStyle.sizeLabelTextStyle,
overflow: TextOverflow.ellipsis, )
style: AttachmentListItemWidgetStyle.labelTextStyle, ]
),
const SizedBox(height: AttachmentListItemWidgetStyle.fileTitleBottomSpace),
Text(
filesize(attachment.size?.value),
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
style: AttachmentListItemWidgetStyle.sizeLabelTextStyle,
) )
] ),
) const SizedBox(width: AttachmentListItemWidgetStyle.space),
TMailButtonWidget.fromIcon(
icon: _imagePaths.icDownloadAttachment,
backgroundColor: Colors.transparent,
onTapActionCallback: isLoading
? null
: () => downloadAttachmentAction?.call(attachment)
)
]
), ),
const SizedBox(width: AttachmentListItemWidgetStyle.space), ),
TMailButtonWidget.fromIcon(
icon: _imagePaths.icDownloadAttachment,
backgroundColor: Colors.transparent,
onTapActionCallback: () => downloadAttachmentAction?.call(attachment)
)
]
), ),
), );
), }
); );
} }
} }