eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-234 Display bottom bar actions for selection mailbox

Browse Source
This commit is contained in:
dab246
2022-02-24 15:08:14 +07:00
committed by Dat H. Pham
parent cdeab01a58
commit a19f3841d3
10 changed files with 185 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/ic_rename_mailbox.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.2896 2.15478C16.6379 1.5031 15.5814 1.5031 14.9297 2.15478L13.7497 3.33475L17.2896 6.87467L18.4696 5.6947C19.1213 5.04302 19.1213 3.98643 18.4696 3.33475L17.2896 2.15478Z" fill="#007AFF"/>
<path d="M15.6554 8.50893L12.1154 4.96901L4.8858 12.1986C4.15306 12.9314 3.60098 13.8247 3.27329 14.8077L2.31824 17.6729C2.18779 18.0642 2.56012 18.4366 2.95148 18.3061L5.81663 17.3511C6.7997 17.0234 7.69298 16.4713 8.42572 15.7386L15.6554 8.50893Z" fill="#007AFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 572 B

core/lib/presentation/resources/image_paths.dart
+1
View File
@@ -81,6 +81,7 @@ class ImagePaths {
String get icLogoTMailV2 => _getImagePath('logo_tmail_v2.png');
String get icSendToast => _getImagePath('ic_send_toast.svg');
String get icClearTextSearch => _getImagePath('ic_clear_text_search.svg');
String get icRenameMailbox => _getImagePath('ic_rename_mailbox.svg');
String _getImagePath(String imageName) {
return AssetsPaths.images + imageName;
core/lib/presentation/views/button/button_builder.dart
+5 -12
View File
@@ -49,20 +49,13 @@ class ButtonBuilder {
}
Widget build() {
return GestureDetector(
onTap: () {
if (_onPressActionClick != null) {
_onPressActionClick!();
}
},
return InkWell(
onTap: () => _onPressActionClick?.call(),
child: Container(
key: _key,
alignment: Alignment.center,
color: Colors.transparent,
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: _buildBody()
)
color: Colors.white,
child: _buildBody()
)
);
}
@@ -98,7 +91,7 @@ class ButtonBuilder {
'${_text ?? ''}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: _textStyle ?? TextStyle(fontSize: 12, color: AppColor.textButtonColor, fontWeight: FontWeight.w500),
style: _textStyle ?? TextStyle(fontSize: 12, color: AppColor.colorTextButton),
);
}
}
lib/features/destination_picker/presentation/destination_picker_controller.dart
+1 -1
View File
@@ -82,7 +82,7 @@ class DestinationPickerController extends BaseController {
final newMailboxNodeList = folderMailboxNodeList.updateNode(
selectedMailboxNode.item.id,
selectedMailboxNode.copyWith(newExpandMode: newExpandMode)) ?? [];
selectedMailboxNode.copyWith(newExpandMode: newExpandMode));
folderMailboxNodeList.value = newMailboxNodeList;
}
lib/features/mailbox/presentation/extensions/list_mailbox_node_extension.dart
+3 -3
View File
@@ -5,7 +5,7 @@ import 'package:model/mailbox/select_mode.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
extension ListMailboxNodeExtensions on List<MailboxNode> {
List<MailboxNode>? updateNode(MailboxId currentMailboxId, MailboxNode newNode) {
List<MailboxNode> updateNode(MailboxId currentMailboxId, MailboxNode newNode) {
return map((MailboxNode child) {
if (child.item.id == currentMailboxId) {
return newNode;
@@ -18,7 +18,7 @@ extension ListMailboxNodeExtensions on List<MailboxNode> {
}).toList();
}
List<MailboxNode>? toggleSelectMailboxNode(MailboxNode selectedMailboxMode) {
List<MailboxNode> toggleSelectMailboxNode(MailboxNode selectedMailboxMode) {
return map((MailboxNode child) {
if (child.item.id == selectedMailboxMode.item.id) {
return child.toggleSelectMailboxNode();
@@ -31,7 +31,7 @@ extension ListMailboxNodeExtensions on List<MailboxNode> {
}).toList();
}
List<MailboxNode>? toSelectMailboxNode({required SelectMode selectMode, ExpandMode? newExpandMode}) {
List<MailboxNode> toSelectMailboxNode({required SelectMode selectMode, ExpandMode? newExpandMode}) {
return map((MailboxNode child) {
if (child.hasChildren()) {
return child.copyWith(
lib/features/mailbox/presentation/mailbox_controller.dart
+42 -10
View File
@@ -22,6 +22,7 @@ import 'package:tmail_ui_user/features/mailbox/domain/usecases/create_new_mailbo
import 'package:tmail_ui_user/features/mailbox/domain/usecases/get_all_mailbox_interactor.dart';
import 'package:tmail_ui_user/features/mailbox/domain/usecases/refresh_all_mailbox_interactor.dart';
import 'package:tmail_ui_user/features/mailbox/domain/usecases/search_mailbox_interactor.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree_builder.dart';
@@ -193,10 +194,7 @@ class MailboxController extends BaseController {
final newMailboxNodeList = folderMailboxNodeList.updateNode(
mailboxNode.item.id,
mailboxNode.copyWith(newExpandMode: newExpandMode));
if (newMailboxNodeList != null) {
folderMailboxNodeList.value = newMailboxNodeList;
}
folderMailboxNodeList.value = newMailboxNodeList;
}
void _setUpMapMailboxIdDefault(List<PresentationMailbox> defaultMailboxList, List<PresentationMailbox> folderMailboxList) {
@@ -377,6 +375,8 @@ class MailboxController extends BaseController {
_cancelSelectMailbox();
}
bool isSelectionEnabled() => currentSelectMode.value == SelectMode.ACTIVE;
void selectMailbox(BuildContext context, PresentationMailbox mailboxSelected) {
if (isSearchActive()) {
listMailboxSearched.value = listMailboxSearched
@@ -395,9 +395,7 @@ class MailboxController extends BaseController {
void selectMailboxNode(BuildContext context, MailboxNode mailboxNodeSelected) {
final newMailboxNodeList = folderMailboxNodeList.toggleSelectMailboxNode(mailboxNodeSelected);
if (newMailboxNodeList != null) {
folderMailboxNodeList.value = newMailboxNodeList;
}
folderMailboxNodeList.value = newMailboxNodeList;
}
void _cancelSelectMailbox() {
@@ -413,13 +411,47 @@ class MailboxController extends BaseController {
final newMailboxNodeList = folderMailboxNodeList.toSelectMailboxNode(
selectMode: SelectMode.INACTIVE,
newExpandMode: ExpandMode.COLLAPSE);
if (newMailboxNodeList != null) {
folderMailboxNodeList.value = newMailboxNodeList;
}
folderMailboxNodeList.value = newMailboxNodeList;
}
currentSelectMode.value = SelectMode.INACTIVE;
}
List<PresentationMailbox> get listMailboxSelected {
if (isSearchActive()) {
return listMailboxSearched
.where((mailbox) => mailbox.selectMode == SelectMode.ACTIVE)
.toList();
} else {
final defaultMailboxSelected = defaultMailboxList
.where((mailbox) => mailbox.selectMode == SelectMode.ACTIVE)
.toList();
final newFolderMailboxTree = MailboxTree(MailboxNode(
MailboxNode.rootItem(),
childrenItems: folderMailboxNodeList));
final folderMailboxList = allMailboxes.where((mailbox) => !mailbox.hasRole()).toList();
final folderMailboxSelected = folderMailboxList
.where((mailbox) {
final node = newFolderMailboxTree.findNode(mailbox.id);
return node != null && node.selectMode == SelectMode.ACTIVE;
})
.toList();
return defaultMailboxSelected + folderMailboxSelected;
}
}
void pressMailboxSelectionAction(BuildContext context, MailboxActions actions,
List<PresentationMailbox> selectionMailbox) {
switch(actions) {
case MailboxActions.delete:
break;
default:
break;
}
}
void closeMailboxScreen(BuildContext context) {
mailboxDashBoardController.closeDrawer();
}
lib/features/mailbox/presentation/mailbox_view.dart
+33 -5
View File
@@ -5,6 +5,7 @@ import 'package:get/get.dart';
import 'package:model/model.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.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_tile_builder.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget_builder.dart';
@@ -43,7 +44,13 @@ class MailboxView extends GetWidget<MailboxController> {
child: controller.isSearchActive()
? _buildListMailboxSearched(context, controller.listMailboxSearched)
: _buildListMailbox(context)),
)))
))),
Obx(() => controller.isSelectionEnabled()
? Column(children: [
Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
_buildOptionSelectionBottomBar(context)
])
: SizedBox.shrink()),
]
),
)
@@ -151,10 +158,12 @@ class MailboxView extends GetWidget<MailboxController> {
shrinkWrap: true,
padding: EdgeInsets.zero,
children: [
_buildUserInformationWidget(context),
Padding(
padding: EdgeInsets.only(top: 16),
child: Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2)),
Obx(() => (controller.isSelectionEnabled() && responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context))
? SizedBox.shrink()
: _buildUserInformationWidget(context)),
Obx(() => (controller.isSelectionEnabled() && responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context))
? SizedBox.shrink()
: _buildLineSpaceUserInformation()),
_buildSearchBarWidget(context),
_buildLoadingView(),
Obx(() => controller.defaultMailboxList.isNotEmpty
@@ -183,6 +192,12 @@ class MailboxView extends GetWidget<MailboxController> {
);
}
Widget _buildLineSpaceUserInformation() {
return Padding(
padding: EdgeInsets.only(top: 16),
child: Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2));
}
Widget _buildDefaultMailbox(BuildContext context, List<PresentationMailbox> defaultMailbox) {
return ListView.builder(
padding: EdgeInsets.all(8),
@@ -313,4 +328,17 @@ class MailboxView extends GetWidget<MailboxController> {
..addOnOpenMailboxAction((mailbox) => controller.openMailbox(context, mailbox)))
.build()));
}
Widget _buildOptionSelectionBottomBar(BuildContext context) {
return Padding(
padding: EdgeInsets.only(bottom: 30, top: 5),
child: (BottomBarSelectionMailboxWidget(
context,
imagePaths,
controller.listMailboxSelected)
..addOnMailboxActionsClick((actions, listMailboxSelected) =>
controller.pressMailboxSelectionAction(context, actions, listMailboxSelected)))
.build()
);
}
}
lib/features/mailbox/presentation/model/mailbox_actions.dart
+1
View File
@@ -5,6 +5,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
enum MailboxActions {
create,
moveEmail,
delete,
}
extension MailboxActionsExtension on MailboxActions {
lib/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart
+89
View File
@@ -0,0 +1,89 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:model/model.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
typedef OnMailboxActionsClick = void Function(MailboxActions, List<PresentationMailbox>);
class BottomBarSelectionMailboxWidget {
final BuildContext _context;
final ImagePaths _imagePaths;
final List<PresentationMailbox> _listSelectionMailbox;
OnMailboxActionsClick? _onMailboxActionsClick;
BottomBarSelectionMailboxWidget(
this._context,
this._imagePaths,
this._listSelectionMailbox,
);
void addOnMailboxActionsClick(OnMailboxActionsClick onMailboxActionsClick) {
_onMailboxActionsClick = onMailboxActionsClick;
}
Widget build() {
return Container(
key: Key('bottom_bar_selection_mailbox_widget'),
alignment: Alignment.center,
color: Colors.white,
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: SafeArea(child: _buildListOptionButton())
)
);
}
Widget _buildListOptionButton() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
(ButtonBuilder(_imagePaths.icMoveV2)
..key(Key('button_move_all_mailbox'))
..paddingIcon(EdgeInsets.all(8))
..textStyle(TextStyle(fontSize: 12, color: AppColor.colorTextButton.withOpacity(0.3)))
..iconColor(AppColor.colorTextButton.withOpacity(0.5))
..onPressActionClick(() => {})
..text(AppLocalizations.of(_context).move, isVertical: true))
.build(),
(ButtonBuilder(_imagePaths.icRenameMailbox)
..key(Key('button_rename_mailbox'))
..paddingIcon(EdgeInsets.all(8))
..textStyle(TextStyle(fontSize: 12, color: AppColor.colorTextButton.withOpacity(0.3)))
..iconColor(AppColor.colorTextButton.withOpacity(0.5))
..onPressActionClick(() => {})
..text(AppLocalizations.of(_context).rename, isVertical: true))
.build(),
(ButtonBuilder(_imagePaths.icReadV2)
..key(Key('button_mark_read_all_mailbox'))
..paddingIcon(EdgeInsets.all(8))
..textStyle(TextStyle(fontSize: 12, color: AppColor.colorTextButton.withOpacity(0.3)))
..iconColor(AppColor.colorTextButton.withOpacity(0.5))
..onPressActionClick(() => {})
..text(AppLocalizations.of(_context).mark_as_read, isVertical: true))
.build(),
(ButtonBuilder(_imagePaths.icDeleteV2)
..key(Key('button_delete_all_mailbox'))
..paddingIcon(EdgeInsets.all(8))
..textStyle(TextStyle(
fontSize: 12,
color: _isDeleteMailboxValid ? AppColor.colorTextButton : AppColor.colorTextButton.withOpacity(0.3)))
..iconColor(_isDeleteMailboxValid ? AppColor.colorTextButton : AppColor.colorTextButton.withOpacity(0.3))
..onPressActionClick(() {
if (_isDeleteMailboxValid) {
_onMailboxActionsClick?.call(MailboxActions.delete, _listSelectionMailbox);
}
})
..text(AppLocalizations.of(_context).delete, isVertical: true))
.build()
]
);
}
bool get _isDeleteMailboxValid => _listSelectionMailbox.length == 1 && _isAllFolderMailbox;
bool get _isAllFolderMailbox => _listSelectionMailbox.every((mailbox) => !mailbox.hasRole());
}
lib/main/localizations/app_localizations.dart
+6
View File
@@ -670,4 +670,10 @@ class AppLocalizations {
name: 'hint_input_create_new_mailbox'
);
}
String get rename {
return Intl.message(
'Rename',
name: 'rename');
}
}