Files
workavia-mail-front/lib/features/mailbox/presentation/mailbox_view.dart
T
2022-10-11 11:55:01 +07:00

400 lines
18 KiB
Dart

import 'package:core/core.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:model/model.dart';
import 'package:package_info_plus/package_info_plus.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget_builder.dart';
import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class MailboxView extends GetWidget<MailboxController> {
final _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
MailboxView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
));
return SafeArea(bottom: false, left: false, right: false,
top: _responsiveUtils.isMobile(context),
child: ClipRRect(
borderRadius: _responsiveUtils.isPortraitMobile(context)
? const BorderRadius.only(
topRight: Radius.circular(14),
topLeft: Radius.circular(14))
: const BorderRadius.all(Radius.zero),
child: Drawer(
child: Scaffold(
backgroundColor: Colors.white,
body: Stack(children: [
Column(children: [
_buildHeaderMailbox(context),
Obx(() => controller.isSearchActive()
? SafeArea(bottom: false, top: false, right: false,
child: _buildInputSearchFormWidget(context))
: const SizedBox.shrink()),
Expanded(child: Obx(() => Container(
color: controller.isSearchActive()
? Colors.white
: AppColor.colorBgMailbox,
child: RefreshIndicator(
color: AppColor.primaryColor,
onRefresh: () async => controller.refreshAllMailbox(),
child: SafeArea(top: false, right: false,
bottom: !controller.isSelectionEnabled(),
child: controller.isSearchActive()
? _buildListMailboxSearched(context)
: Padding(
padding: EdgeInsets.only(
bottom: _responsiveUtils.isLandscapeMobile(context)
|| controller.isSelectionEnabled() ? 0 : 55),
child: _buildListMailbox(context))
)
),
))),
Obx(() => controller.isSelectionEnabled()
? _buildOptionSelectionMailbox(context)
: const SizedBox.shrink()),
]),
Obx(() {
final appInformation = controller.mailboxDashBoardController.appInformation.value;
if (appInformation != null
&& !controller.isSearchActive()
&& !controller.isSelectionEnabled()) {
if (_responsiveUtils.isLandscapeMobile(context)) {
return const SizedBox.shrink();
}
return Align(
alignment: Alignment.bottomCenter,
child: _buildVersionInformation(context, appInformation));
} else {
return const SizedBox.shrink();
}
})
]),
)
)
)
);
}
Widget _buildHeaderMailbox(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: _responsiveUtils.isMobile(context) ? 10 : 30, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: _buildCloseScreenButton(context)),
Obx(() {
if (controller.isSearchActive()) {
return controller.listMailboxSearched.isNotEmpty
? SizedBox(width: controller.isSelectionEnabled() ? 49 : 40)
: const SizedBox.shrink();
} else {
return SizedBox(width: controller.isSelectionEnabled() ? 49 : 40);
}
}),
Expanded(child: Text(
AppLocalizations.of(context).folders,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 21, color: Colors.black, fontWeight: FontWeight.bold))),
Obx(() {
if (controller.isSearchActive()) {
return controller.listMailboxSearched.isNotEmpty
? _buildEditMailboxButton(context, controller.isSelectionEnabled())
: const SizedBox(width: 25);
} else {
return _buildEditMailboxButton(context, controller.isSelectionEnabled());
}
}),
Padding(padding: const EdgeInsets.only(right: 5), child: _buildAddNewFolderButton(context)),
]
)
),
if (!_responsiveUtils.isTabletLarge(context))
const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
]
);
}
Widget _buildCloseScreenButton(BuildContext context) {
return buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icCloseMailbox, width: 28, height: 28, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).close,
onTap: () => controller.closeMailboxScreen(context));
}
Widget _buildAddNewFolderButton(BuildContext context) {
return buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icAddNewFolder, width: 28, height: 24, color: AppColor.colorTextButton, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).new_mailbox,
onTap: () => controller.goToCreateNewMailboxView());
}
Widget _buildEditMailboxButton(BuildContext context, bool isSelectionEnabled) {
return Material(
shape: const CircleBorder(),
color: Colors.transparent,
child: TextButton(
child: Text(
!isSelectionEnabled ? AppLocalizations.of(context).edit : AppLocalizations.of(context).cancel,
style: const TextStyle(fontSize: 17, color: AppColor.colorTextButton, fontWeight: FontWeight.normal)),
onPressed: () => !isSelectionEnabled
? controller.enableSelectionMailbox()
: controller.disableSelectionMailbox()
)
);
}
Widget _buildUserInformation(BuildContext context) {
return Column(children: [
Padding(
padding: EdgeInsets.only(
left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
right: 16),
child: UserInformationWidgetBuilder(
_imagePaths,
controller.mailboxDashBoardController.userProfile.value,
subtitle: AppLocalizations.of(context).manage_account,
onSubtitleClick: () => controller.mailboxDashBoardController.goToSettings())),
const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2)
]);
}
Widget _buildSearchBarWidget(BuildContext context) {
return Padding(
padding: EdgeInsets.only(
top: _responsiveUtils.isDesktop(context) ? 16 : 12,
bottom: 16,
left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
right: 16),
child: SearchBarView(
_imagePaths,
hintTextSearch: AppLocalizations.of(context).hint_search_mailboxes,
onOpenSearchViewAction: controller.enableSearch));
}
Widget _buildLoadingView() {
return Obx(() => controller.viewState.value.fold(
(failure) => const SizedBox.shrink(),
(success) => success is LoadingState
? const Center(child: Padding(
padding: EdgeInsets.only(top: 16),
child: SizedBox(
width: 24,
height: 24,
child: CupertinoActivityIndicator(color: AppColor.colorTextButton))))
: const SizedBox.shrink()));
}
Widget _buildListMailbox(BuildContext context) {
return SingleChildScrollView(
controller: controller.mailboxListScrollController,
key: const PageStorageKey('mailbox_list'),
physics: const ClampingScrollPhysics(),
padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() ? 16 : 0),
child: Column(children: [
Obx(() {
if (controller.isSelectionEnabled() && _responsiveUtils.isLandscapeMobile(context)) {
return const SizedBox.shrink();
}
return _buildUserInformation(context);
}),
_buildSearchBarWidget(context),
_buildLoadingView(),
Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root)
: const SizedBox.shrink()),
const SizedBox(height: 12),
Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderMailboxTree.value.root)
: const SizedBox.shrink()),
])
);
}
Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
return Padding(
padding: EdgeInsets.only(
left: _responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
right: 16),
child: Row(children: [
Expanded(child: Text(categories.getTitle(context),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold))),
buildIconWeb(
icon: SvgPicture.asset(
categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
? _imagePaths.icExpandFolder
: _imagePaths.icCollapseFolder,
color: AppColor.primaryColor, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).collapse,
onTap: () => controller.toggleMailboxCategories(categories))
]));
}
Widget _buildBodyMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
final lastNode = mailboxNode.childrenItems?.last;
return Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white),
margin: EdgeInsets.only(
left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
right: 16),
padding: const EdgeInsets.only(left: 12),
child: TreeView(
key: Key('${categories.keyValue}_mailbox_list'),
children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));
}
Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
if (categories == MailboxCategories.exchange) {
return _buildBodyMailboxCategory(context, categories, mailboxNode);
}
return Column(children: [
_buildHeaderMailboxCategory(context, categories),
AnimatedContainer(
duration: const Duration(milliseconds: 400),
child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
? _buildBodyMailboxCategory(context, categories, mailboxNode)
: const Offstage())
]);
}
List<Widget> _buildListChildTileWidget(BuildContext context, MailboxNode parentNode, {MailboxNode? lastNode}) {
return parentNode.childrenItems
?.map((mailboxNode) => mailboxNode.hasChildren()
? TreeViewChild(
context,
key: const Key('children_tree_mailbox_child'),
isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
parent: Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode,
allSelectMode: controller.currentSelectMode.value)
..addOnOpenMailboxFolderClick((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
..addOnSelectMailboxFolderClick((mailboxNode) => controller.selectMailboxNode(mailboxNode)))
.build()),
children: _buildListChildTileWidget(context, mailboxNode)
).build()
: Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode,
allSelectMode: controller.currentSelectMode.value)
..addOnOpenMailboxFolderClick((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
..addOnSelectMailboxFolderClick((mailboxNode) => controller.selectMailboxNode(mailboxNode)))
.build())
).toList() ?? <Widget>[];
}
Widget _buildInputSearchFormWidget(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 16, bottom: 16),
child: Row(
children: [
_buildBackSearchButton(context),
Expanded(child: (SearchAppBarWidget(
_imagePaths,
controller.searchQuery.value,
controller.searchFocus,
controller.searchInputController,
hasBackButton: false,
hasSearchButton: true)
..addPadding(EdgeInsets.zero)
..setMargin(const EdgeInsets.only(right: 16))
..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 18, height: 18, fit: BoxFit.fill))
..setHintText(AppLocalizations.of(context).hint_search_mailboxes)
..addOnClearTextSearchAction(() => controller.clearSearchText())
..addOnTextChangeSearchAction((query) => controller.searchMailbox(query))
..addOnSearchTextAction((query) => controller.searchMailbox(query)))
.build())
]
)
);
}
Widget _buildBackSearchButton(BuildContext context) {
return Padding(
padding: EdgeInsets.only(left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 5),
child: buildIconWeb(
onTap: () => controller.disableSearch(),
icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton),
));
}
Widget _buildListMailboxSearched(BuildContext context) {
return Obx(() => Container(
margin: _responsiveUtils.isDesktop(context)
? const EdgeInsets.only(left: 16, right: 16)
: EdgeInsets.zero,
decoration: _responsiveUtils.isDesktop(context)
? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white)
: null,
child: ListView.builder(
padding: EdgeInsets.only(left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, right: 8),
key: const Key('list_mailbox_searched'),
itemCount: controller.listMailboxSearched.length,
shrinkWrap: true,
primary: false,
itemBuilder: (context, index) =>
Obx(() => (MailboxSearchTileBuilder(
context,
_imagePaths,
_responsiveUtils,
controller.listMailboxSearched[index],
allSelectMode: controller.currentSelectMode.value,
lastMailbox: controller.listMailboxSearched.last)
..addOnOpenMailboxAction((mailbox) => controller.openMailbox(context, mailbox))
..addOnSelectMailboxActionClick((mailbox) => controller.selectMailboxSearched(context, mailbox)))
.build())
)
));
}
Widget _buildOptionSelectionMailbox(BuildContext context) {
return Column(children: [
const Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: (BottomBarSelectionMailboxWidget(context,
_imagePaths,
controller.listMailboxSelected)
..addOnMailboxActionsClick((actions, listMailboxSelected) =>
controller.pressMailboxSelectionAction(
context,
actions,
listMailboxSelected)))
.build()))
]);
}
Widget _buildVersionInformation(BuildContext context, PackageInfo packageInfo) {
return SafeArea(child: Container(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
child: Text(
'${AppLocalizations.of(context).version} ${packageInfo.version}',
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 16, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
),
));
}
}