TF-1437 Handle search mailbox in destination picker

This commit is contained in:
dab246
2023-02-14 17:32:54 +07:00
committed by Dat Vu
parent 62286c85cb
commit 37f8ce3638
7 changed files with 192 additions and 305 deletions
@@ -282,7 +282,10 @@ class DestinationPickerController extends BaseMailboxController {
void searchMailbox(String value) {
searchQuery.value = SearchQuery(value);
_searchMailboxAction(allMailboxes, searchQuery.value);
_searchMailboxAction(
allMailboxes.listPersonalMailboxes,
searchQuery.value
);
}
void _searchMailboxAction(List<PresentationMailbox> allMailboxes, SearchQuery searchQuery) {
@@ -20,6 +20,7 @@ import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
import 'package:tmail_ui_user/features/destination_picker/presentation/destination_picker_controller.dart';
import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart';
import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_screen_type.dart';
import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/destination_picker_search_mailbox_item_builder.dart';
import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/top_bar_destination_picker_builder.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
@@ -27,7 +28,6 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_catego
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.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_creator/presentation/widgets/create_mailbox_name_input_decoration_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';
@@ -385,33 +385,22 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
MailboxActions? actions,
MailboxId? mailboxIdSelected
) {
return Obx(() => Container(
margin: const EdgeInsets.only(
bottom: 8,
top: BuildUtils.isWeb ? 8 : 0),
decoration: _responsiveUtils.isDesktop(context)
? BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white)
: null,
child: ListView.builder(
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],
mailboxActions: actions,
mailboxIdAlreadySelected: mailboxIdSelected,
mailboxDisplayed: MailboxDisplayed.destinationPicker,
mailboxIdDestination: controller.mailboxDestination.value?.id)
..addOnOpenMailboxAction((mailbox) => _pickPresentationMailbox(context, mailbox)))
.build())
)
return Obx(() => ListView.builder(
key: const Key('list_mailbox_searched'),
itemCount: controller.listMailboxSearched.length,
shrinkWrap: true,
primary: false,
padding: const EdgeInsets.symmetric(horizontal: 16),
itemBuilder: (context, index) {
return Obx(() => DestinationPickerSearchMailboxItemBuilder(
_imagePaths,
_responsiveUtils,
controller.listMailboxSearched[index],
mailboxActions: actions,
mailboxIdAlreadySelected: mailboxIdSelected,
onClickOpenMailboxAction: (mailbox) => _pickPresentationMailbox(context, mailbox),
));
}
));
}
@@ -0,0 +1,152 @@
import 'package:core/presentation/extensions/color_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/build_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
import 'package:model/mailbox/presentation_mailbox.dart';
import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
import 'package:tmail_ui_user/features/search/mailbox/presentation/utils/search_mailbox_utils.dart';
class DestinationPickerSearchMailboxItemBuilder extends StatelessWidget {
final PresentationMailbox _presentationMailbox;
final ImagePaths _imagePaths;
final ResponsiveUtils _responsiveUtils;
final MailboxActions? mailboxActions;
final MailboxId? mailboxIdAlreadySelected;
final OnClickOpenMailboxAction? onClickOpenMailboxAction;
const DestinationPickerSearchMailboxItemBuilder(
this._imagePaths,
this._responsiveUtils,
this._presentationMailbox,
{
Key? key,
this.mailboxActions,
this.mailboxIdAlreadySelected,
this.onClickOpenMailboxAction
}
) : super(key: key);
@override
Widget build(BuildContext context) {
return AbsorbPointer(
absorbing: !_presentationMailbox.isActivated,
child: Opacity(
opacity: _presentationMailbox.isActivated ? 1.0 : 0.3,
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: _onTapMailboxAction,
borderRadius: const BorderRadius.all(Radius.circular(8)),
hoverColor: AppColor.colorBgMailboxSelected,
child: Padding(
padding: SearchMailboxUtils.getPaddingItemListView(context, _responsiveUtils),
child: Row(
crossAxisAlignment: _presentationMailbox.mailboxPath?.isNotEmpty == true
|| _presentationMailbox.isTeamMailboxes
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [
_buildMailboxIcon(),
Expanded(child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildTitleItem(),
_buildSubtitleItem()
]
)
)),
_buildSelectedIcon()
]
),
)
),
)
),
);
}
void _onTapMailboxAction() {
if (onClickOpenMailboxAction != null) {
onClickOpenMailboxAction?.call(_presentationMailbox);
}
}
Widget _buildMailboxIcon() {
return SvgPicture.asset(
_presentationMailbox.getMailboxIcon(_imagePaths),
width: BuildUtils.isWeb ? 20 : 24,
height: BuildUtils.isWeb ? 20 : 24,
fit: BoxFit.fill
);
}
Widget _buildTitleItem() {
return Text(
_presentationMailbox.name?.name ?? '',
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
style: const TextStyle(
fontSize: 15,
color: Colors.black
),
);
}
Widget _buildSubtitleItem() {
if (_presentationMailbox.mailboxPath?.isNotEmpty == true) {
return Text(
_presentationMailbox.mailboxPath ?? '',
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
style: const TextStyle(
fontSize: 11,
color: AppColor.colorMailboxPath,
fontWeight: FontWeight.normal
),
);
} else if (_presentationMailbox.isTeamMailboxes) {
return Text(
_presentationMailbox.emailTeamMailBoxes ?? '',
maxLines: 1,
softWrap: CommonTextStyle.defaultSoftWrap,
overflow: CommonTextStyle.defaultTextOverFlow,
style: const TextStyle(
fontSize: 11,
color: AppColor.colorEmailAddressFull,
fontWeight: FontWeight.normal
)
);
} else {
return const SizedBox.shrink();
}
}
Widget _buildSelectedIcon() {
if (_presentationMailbox.id == mailboxIdAlreadySelected &&
(mailboxActions == MailboxActions.select ||
mailboxActions == MailboxActions.create)) {
return Padding(
padding: const EdgeInsets.only(right: 8),
child: SvgPicture.asset(
_imagePaths.icFilterSelected,
width: 20,
height: 20,
fit: BoxFit.fill
),
);
} else {
return const SizedBox.shrink();
}
}
}
@@ -1,266 +0,0 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
import 'package:model/model.dart';
import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
class MailboxSearchTileBuilder {
final PresentationMailbox _presentationMailbox;
final SelectMode allSelectMode;
final ImagePaths _imagePaths;
final ResponsiveUtils _responsiveUtils;
final BuildContext _context;
final MailboxDisplayed mailboxDisplayed;
final MailboxActions? mailboxActions;
final MailboxId? mailboxIdAlreadySelected;
final MailboxId? lastMailboxIdInSearchedList;
final MailboxId? mailboxIdDestination;
bool isHoverItem = false;
OnClickOpenMailboxAction? _onOpenMailboxActionClick;
OnSelectMailboxAction? _onSelectMailboxActionClick;
OnClickOpenMenuMailboxAction? _onMenuActionClick;
OnDragEmailToMailboxAccepted? _onDragItemAccepted;
MailboxSearchTileBuilder(
this._context,
this._imagePaths,
this._responsiveUtils,
this._presentationMailbox,
{
this.allSelectMode = SelectMode.INACTIVE,
this.lastMailboxIdInSearchedList,
this.mailboxDisplayed = MailboxDisplayed.mailbox,
this.mailboxActions,
this.mailboxIdAlreadySelected,
this.mailboxIdDestination,
}
);
void addOnOpenMailboxAction(OnClickOpenMailboxAction onOpenMailboxActionClick) {
_onOpenMailboxActionClick = onOpenMailboxActionClick;
}
void addOnSelectMailboxAction(OnSelectMailboxAction onSelectMailboxActionClick) {
_onSelectMailboxActionClick = onSelectMailboxActionClick;
}
void addOnMenuActionClick(OnClickOpenMenuMailboxAction onOpenMenuActionClick) {
_onMenuActionClick = onOpenMenuActionClick;
}
void addOnDragEmailToMailboxAccepted(OnDragEmailToMailboxAccepted onDragItemAccepted) {
_onDragItemAccepted = onDragItemAccepted;
}
Widget build() {
return Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent),
child: DragTarget<List<PresentationEmail>>(
builder: (context, _, __,) {
return _buildMailboxItem();
},
onAccept: (emails) {
_onDragItemAccepted?.call(emails, _presentationMailbox);
},
),
);
}
Widget _buildMailboxItem() {
if (BuildUtils.isWeb) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return AbsorbPointer(
absorbing: !_presentationMailbox.isActivated,
child: Opacity(
opacity: _presentationMailbox.isActivated ? 1.0 : 0.3,
child: InkWell(
onTap: () {},
onHover: (value) => setState(() => isHoverItem = value),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: backgroundColorItem),
child: ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 24),
onTap: () => _onOpenMailboxActionClick?.call(_presentationMailbox),
leading: _buildLeadingIcon(),
title: _buildTitleItem(),
subtitle: _buildSubtitleItem(),
trailing: _buildMenuIcon(),
),
)
),
),
);
});
} else {
return Column(children: [
AbsorbPointer(
absorbing: !_presentationMailbox.isActivated,
child: Opacity(
opacity: _presentationMailbox.isActivated ? 1.0 : 0.3,
child: Container(
color: _presentationMailbox.id == mailboxIdDestination &&
mailboxDisplayed == MailboxDisplayed.destinationPicker
? AppColor.colorItemSelected
: Colors.transparent,
padding: mailboxDisplayed == MailboxDisplayed.destinationPicker
? const EdgeInsets.only(left: 16, right: 8)
: EdgeInsets.zero,
child: ListTile(
contentPadding: EdgeInsets.zero,
onTap: () => allSelectMode == SelectMode.ACTIVE
? _onSelectMailboxActionClick?.call(_presentationMailbox)
: _onOpenMailboxActionClick?.call(_presentationMailbox),
leading: _buildLeadingIcon(),
title: _buildTitleItem(),
subtitle: _buildSubtitleItem(),
trailing: _buildSelectedIcon(),
),
),
),
),
if (lastMailboxIdInSearchedList != _presentationMailbox.id)
Padding(
padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 35),
child: const Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
]);
}
}
Widget _buildLeadingIcon() {
if (BuildUtils.isWeb) {
return _buildMailboxIcon();
} else {
return allSelectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon();
}
}
Widget _buildMailboxIcon() {
return SvgPicture.asset(_presentationMailbox.getMailboxIcon(_imagePaths),
width: BuildUtils.isWeb ? 20 : 24,
height: BuildUtils.isWeb ? 20 : 24,
fit: BoxFit.fill);
}
Widget _buildSelectModeIcon() {
return Container(
color: Colors.transparent,
child: Transform(
transform: Matrix4.translationValues(BuildUtils.isWeb ? -8.0 : -10.0, 0.0, 0.0),
child: buildIconWeb(
icon: SvgPicture.asset(
_presentationMailbox.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected,
width: BuildUtils.isWeb ? 20 : 24,
height: BuildUtils.isWeb ? 20 : 24,
fit: BoxFit.fill),
onTap: () => _onSelectMailboxActionClick?.call(_presentationMailbox))),
);
}
Widget _buildTitleItem() {
return Row(children: [
if (allSelectMode == SelectMode.ACTIVE)
Transform(
transform: Matrix4.translationValues(-24.0, 0.0, 0.0),
child: _buildMailboxIcon()),
Expanded(child: Transform(
transform: Matrix4.translationValues(allSelectMode == SelectMode.ACTIVE ? -16.0 : -20.0, 0.0, 0.0),
child: Text(
_presentationMailbox.name?.name ?? '',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: const TextStyle(fontSize: 17, color: AppColor.colorNameEmail, fontWeight: FontWeight.normal),
))),
]);
}
Widget? _buildSubtitleItem() {
if (_presentationMailbox.mailboxPath?.isNotEmpty == true) {
return Transform(
transform: Matrix4.translationValues(allSelectMode == SelectMode.ACTIVE ? 12.0 : -20.0, 0.0, 0.0),
child: Text(
_presentationMailbox.mailboxPath ?? '',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail),
),
);
}
return null;
}
Widget? _buildMenuIcon() {
if (isHoverItem && mailboxDisplayed == MailboxDisplayed.mailbox) {
return Padding(
padding: const EdgeInsets.only(right: 8),
child: InkWell(
onTapDown: (detail) {
final screenSize = MediaQuery.of(_context).size;
final offset = detail.globalPosition;
final position = RelativeRect.fromLTRB(
offset.dx,
offset.dy,
screenSize.width - offset.dx,
screenSize.height - offset.dy,
);
_onMenuActionClick?.call(position, _presentationMailbox);
},
onTap: () => {},
child: SvgPicture.asset(_imagePaths.icComposerMenu,
width: 20,
height: 20,
fit: BoxFit.fill)),
);
} else {
return _buildSelectedIcon();
}
}
Color get backgroundColorItem {
if (_presentationMailbox.id == mailboxIdDestination &&
mailboxDisplayed == MailboxDisplayed.destinationPicker) {
return AppColor.colorItemSelected;
} else {
if (isHoverItem) {
return AppColor.colorBgMailboxSelected;
} else {
if (mailboxDisplayed == MailboxDisplayed.mailbox) {
return _responsiveUtils.isDesktop(_context)
? AppColor.colorBgDesktop
: Colors.white;
} else {
return Colors.white;
}
}
}
}
Widget? _buildSelectedIcon() {
if (_presentationMailbox.id == mailboxIdAlreadySelected &&
mailboxDisplayed == MailboxDisplayed.destinationPicker &&
(mailboxActions == MailboxActions.select ||
mailboxActions == MailboxActions.create)) {
return Padding(
padding: const EdgeInsets.only(right: 8),
child: SvgPicture.asset(
_imagePaths.icFilterSelected,
width: 20,
height: 20,
fit: BoxFit.fill),
);
} else {
return null;
}
}
}
@@ -91,13 +91,10 @@ class MailboxCreatorController extends BaseController {
}
MailboxNode? _findMailboxNodeById(MailboxId mailboxId) {
final mailboxNode = defaultMailboxTree?.findNode((node) => node.item.id == mailboxId);
if (mailboxNode != null) {
return mailboxNode;
} else if(mailboxNode!.item.isTeamMailboxes) {
return teamMailboxesTre?.findNode((node) => node.item.id == mailboxId);
}
return personalMailboxTree?.findNode((node) => node.item.id == mailboxId);
final mailboxNode = defaultMailboxTree?.findNode((node) => node.item.id == mailboxId)
?? personalMailboxTree?.findNode((node) => node.item.id == mailboxId)
?? teamMailboxesTre?.findNode((node) => node.item.id == mailboxId);
return mailboxNode;
}
void _createListMailboxNameAsStringInMailboxLocation() {
@@ -76,7 +76,10 @@ class _MailboxSearchedItemBuilderState extends State<MailboxSearchedItemBuilder>
),
padding: SearchMailboxUtils.getPaddingItemListView(context, widget._responsiveUtils),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: widget._presentationMailbox.mailboxPath?.isNotEmpty == true
|| widget._presentationMailbox.isTeamMailboxes
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [
_buildMailboxIcon(),
Expanded(child: Padding(
@@ -121,7 +124,10 @@ class _MailboxSearchedItemBuilderState extends State<MailboxSearchedItemBuilder>
child: Padding(
padding: SearchMailboxUtils.getPaddingItemListView(context, widget._responsiveUtils),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: widget._presentationMailbox.mailboxPath?.isNotEmpty == true
|| widget._presentationMailbox.isTeamMailboxes
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [
_buildMailboxIcon(),
Expanded(child: Padding(
@@ -152,7 +158,10 @@ class _MailboxSearchedItemBuilderState extends State<MailboxSearchedItemBuilder>
child: Padding(
padding: SearchMailboxUtils.getPaddingItemListView(context, widget._responsiveUtils),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: widget._presentationMailbox.mailboxPath?.isNotEmpty == true
|| widget._presentationMailbox.isTeamMailboxes
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [
_buildMailboxIcon(),
Expanded(child: Padding(
@@ -5,4 +5,7 @@ extension ListPresentationMailboxExtension on List<PresentationMailbox> {
List<PresentationMailbox> get listSubscribedMailboxes =>
where((mailbox) => mailbox.supportedSubscribe).toList();
List<PresentationMailbox> get listPersonalMailboxes =>
where((mailbox) => mailbox.isPersonal).toList();
}