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

TF-138 Add presentation layer for search mail with text pattern

Browse Source
This commit is contained in:
dab246
2021-10-26 13:18:09 +07:00
committed by Dat H. Pham
parent faa40747eb
commit 3eaaccd551
18 changed files with 882 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/thread/presentation/widgets/app_bar_thread_select_mode_active_builder.dart
+27 -19
View File
@@ -49,8 +49,10 @@ class AppBarThreadSelectModeActiveBuilder {
Widget build() {
return Container(
key: Key('app_bar_thread_select_mode_active'),
alignment: Alignment.center,
padding: EdgeInsets.symmetric(vertical: 8),
alignment: Alignment.topCenter,
color: Colors.white,
margin: EdgeInsets.zero,
padding: EdgeInsets.only(left: 10, right: 16, top: 10, bottom: 10),
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Row(
@@ -77,15 +79,18 @@ class AppBarThreadSelectModeActiveBuilder {
}
Widget _buildBackButton() {
return IconButton(
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icComposerClose, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () => {
if (_onCloseActionClick != null) {
_onCloseActionClick!()
return Material(
borderRadius: BorderRadius.circular(12),
color: Colors.transparent,
child: IconButton(
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icComposerClose, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () => {
if (_onCloseActionClick != null) {
_onCloseActionClick!()
}
}
}
);
));
}
Widget _buildListOptionButton() {
@@ -102,15 +107,18 @@ class AppBarThreadSelectModeActiveBuilder {
// _onRemoveEmailActionClick!(_listEmail)
// }
// }),
IconButton(
key: Key('button_unread_email_selected'),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icEyeDisable, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () => {
if (_onMarkAsEmailReadActionClick != null) {
_onMarkAsEmailReadActionClick!(_listEmail)
}
}),
Material(
borderRadius: BorderRadius.circular(12),
color: Colors.transparent,
child: IconButton(
key: Key('button_unread_email_selected'),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icEyeDisable, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () => {
if (_onMarkAsEmailReadActionClick != null) {
_onMarkAsEmailReadActionClick!(_listEmail)
}
})),
GestureDetector(
key: Key('button_menu_select_email'),
onTap: () => {
lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart
+30 -23
View File
@@ -3,7 +3,7 @@ import 'dart:ui';
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
// import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:model/mailbox/presentation_mailbox.dart';
import 'package:model/model.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -13,19 +13,19 @@ typedef OnOpenListMailboxActionClick = void Function();
typedef OnOpenUserInformationActionClick = void Function();
class AppBarThreadWidgetBuilder {
// OnOpenSearchMailActionClick? _onOpenSearchMailActionClick;
OnOpenSearchMailActionClick? _onOpenSearchMailActionClick;
OnOpenListMailboxActionClick? _onOpenListMailboxActionClick;
OnOpenUserInformationActionClick? _onOpenUserInformationActionClick;
final BuildContext _context;
// final ImagePaths _imagePaths;
final ImagePaths _imagePaths;
final ResponsiveUtils _responsiveUtils;
final PresentationMailbox? _presentationMailbox;
final UserProfile? _userProfile;
AppBarThreadWidgetBuilder(
this._context,
// this._imagePaths,
this._imagePaths,
this._responsiveUtils,
this._presentationMailbox,
this._userProfile,
@@ -36,9 +36,9 @@ class AppBarThreadWidgetBuilder {
_onOpenUserInformationActionClick = onOpenUserInformationActionClick;
}
// void onOpenSearchMailActionClick(OnOpenSearchMailActionClick onOpenSearchMailActionClick) {
// _onOpenSearchMailActionClick = onOpenSearchMailActionClick;
// }
void onOpenSearchMailActionClick(OnOpenSearchMailActionClick onOpenSearchMailActionClick) {
_onOpenSearchMailActionClick = onOpenSearchMailActionClick;
}
void onOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
_onOpenListMailboxActionClick = onOpenListMailboxActionClick;
@@ -47,8 +47,10 @@ class AppBarThreadWidgetBuilder {
Widget build() {
return Container(
key: Key('app_bar_thread_widget'),
alignment: Alignment.center,
padding: EdgeInsets.only(top: 16, bottom: 8),
alignment: Alignment.topCenter,
color: Colors.white,
margin: EdgeInsets.zero,
padding: EdgeInsets.only(left: 16, top: 16, bottom: 8, right: 16),
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Row(
@@ -57,7 +59,7 @@ class AppBarThreadWidgetBuilder {
children: [
if (_responsiveUtils.isMobile(_context)) _buildIconUser(),
Expanded(child: _buildContentCenterAppBar()),
// _buildIconSearch(),
_buildIconSearch(),
]
)
)
@@ -78,19 +80,24 @@ class AppBarThreadWidgetBuilder {
.build()));
}
// Widget _buildIconSearch() {
// return Padding(
// padding: EdgeInsets.only(left: 16),
// child: IconButton(
// color: AppColor.baseTextColor,
// icon: SvgPicture.asset(_imagePaths.icSearch, color: AppColor.baseTextColor, fit: BoxFit.fill),
// onPressed: () => {
// if (_onOpenSearchMailActionClick != null) {
// _onOpenSearchMailActionClick!()
// }
// }
// ));
// }
Widget _buildIconSearch() {
return Material(
borderRadius: BorderRadius.circular(12),
color: Colors.transparent,
child: Padding(
padding: EdgeInsets.only(left: 16),
child: IconButton(
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icSearch, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () => {
if (_onOpenSearchMailActionClick != null) {
_onOpenSearchMailActionClick!()
}
}
)
)
);
}
Widget _buildContentCenterAppBar() {
return Row(
lib/features/thread/presentation/widgets/email_tile_builder.dart
+91 -25
View File
@@ -6,6 +6,8 @@ import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
import 'package:model/model.dart';
import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
import 'package:tmail_ui_user/features/thread/presentation/model/search_status.dart';
typedef OnOpenEmailActionClick = void Function(PresentationEmail selectedEmail);
typedef OnSelectEmailActionClick = void Function(PresentationEmail selectedEmail);
@@ -20,6 +22,8 @@ class EmailTileBuilder {
final ResponsiveUtils _responsiveUtils;
final SelectMode _selectModeAll;
final Role? _mailboxRole;
final SearchStatus _searchStatus;
final SearchQuery? _searchQuery;
OnOpenEmailActionClick? _onOpenEmailActionClick;
OnSelectEmailActionClick? _onSelectEmailActionClick;
@@ -33,6 +37,8 @@ class EmailTileBuilder {
this._responsiveUtils,
this._mailboxRole,
this._selectModeAll,
this._searchStatus,
this._searchQuery,
);
void onOpenEmailAction(OnOpenEmailActionClick onOpenEmailActionClick) {
@@ -84,18 +90,28 @@ class EmailTileBuilder {
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Text(
(_mailboxRole == PresentationMailbox.roleSent
|| _mailboxRole == PresentationMailbox.roleDrafts
|| _mailboxRole == PresentationMailbox.roleOutbox)
? '${_presentationEmail.recipientsName()}'
: '${_presentationEmail.getSenderName()}',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
color: AppColor.mailboxTextColor,
fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500))),
child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
? RichTextBuilder(
_getInformationSender(),
'${_searchQuery!.value}',
TextStyle(
fontSize: 14,
color: AppColor.mailboxTextColor,
fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500),
TextStyle(
fontSize: 14,
color: AppColor.mailboxTextColor,
backgroundColor: AppColor.bgWordSearch,
fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500)).build()
: Text(
_getInformationSender(),
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
color: AppColor.mailboxTextColor,
fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500))
),
Padding(
padding: EdgeInsets.only(right: 4),
child: Text(
@@ -116,24 +132,65 @@ class EmailTileBuilder {
children: [
Padding(
padding: EdgeInsets.only(bottom: 3),
child: Text(
'${_presentationEmail.getEmailTitle()}',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12,
color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.baseTextColor,
fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500))),
child: Row(
children: [
Expanded(
child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
? RichTextBuilder(
'${_presentationEmail.getEmailTitle()}',
'${_searchQuery!.value}',
TextStyle(
fontSize: 12,
color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.baseTextColor,
fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500),
TextStyle(
fontSize: 12,
backgroundColor: AppColor.bgWordSearch,
color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.baseTextColor,
fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500)).build()
: Text(
'${_presentationEmail.getEmailTitle()}',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12,
color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.baseTextColor,
fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500))
),
if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty)
Container(
margin: EdgeInsets.only(left: 8),
padding: EdgeInsets.only(left: 8, right: 8, top: 3, bottom: 3),
constraints: BoxConstraints(maxWidth: 100),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: AppColor.backgroundCounterMailboxColor),
child: Text(
'${_presentationEmail.mailboxName}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
)
)
],
)),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Text(
'${_presentationEmail.getPartialContent()}',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(fontSize: 12, color: AppColor.baseTextColor))),
child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
? RichTextBuilder(
'${_presentationEmail.getPartialContent()}',
'${_searchQuery!.value}',
TextStyle(fontSize: 12, color: AppColor.baseTextColor),
TextStyle(fontSize: 12, color: AppColor.baseTextColor, backgroundColor: AppColor.bgWordSearch)).build()
: Text(
'${_presentationEmail.getPartialContent()}',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(fontSize: 12, color: AppColor.baseTextColor))
),
if (_presentationEmail.hasAttachment == true)
(ButtonBuilder(_imagePaths.icShare)
..padding(5)
@@ -224,4 +281,13 @@ class EmailTileBuilder {
}
}
}
String _getInformationSender() {
if (_mailboxRole == PresentationMailbox.roleSent
|| _mailboxRole == PresentationMailbox.roleDrafts
|| _mailboxRole == PresentationMailbox.roleOutbox) {
return '${_presentationEmail.recipientsName()}';
}
return '${_presentationEmail.getSenderName()}';
}
}
lib/features/thread/presentation/widgets/search_app_bar_widget.dart
+164
View File
@@ -0,0 +1,164 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
typedef OnCancelSearchPressed = Function();
typedef OnClearTextSearchAction = Function();
typedef OnSuggestionSearchQuery = Function(String);
typedef OnSearchTextAction = Function(String);
class SearchAppBarWidget {
OnCancelSearchPressed? _onCancelSearchPressed;
OnSuggestionSearchQuery? _onSuggestionSearchQuery;
OnClearTextSearchAction? _onClearTextSearchAction;
OnSearchTextAction? _onSearchTextAction;
final BuildContext _context;
final ImagePaths _imagePaths;
final SearchQuery? _searchQuery;
final TextEditingController? _searchInputController;
final FocusNode? _searchFocusNode;
final List<String>? _suggestionSearch;
double? _heightSearchBar;
Decoration? _decoration;
EdgeInsets? _padding;
SearchAppBarWidget(
this._context,
this._imagePaths,
this._searchQuery,
this._suggestionSearch,
this._searchFocusNode,
this._searchInputController,
);
void addOnCancelSearchPressed(OnCancelSearchPressed onCancelSearchPressed) {
_onCancelSearchPressed = onCancelSearchPressed;
}
void addOnSuggestionSearchQuery(OnSuggestionSearchQuery onSuggestionSearchQuery) {
_onSuggestionSearchQuery = onSuggestionSearchQuery;
}
void addOnClearTextSearchAction(OnClearTextSearchAction onClearTextSearchAction) {
_onClearTextSearchAction = onClearTextSearchAction;
}
void addOnSearchTextAction(OnSearchTextAction onSearchTextAction) {
_onSearchTextAction = onSearchTextAction;
}
void setHeightSearchBar(double heightSearchBar) {
_heightSearchBar = heightSearchBar;
}
void addDecoration(Decoration decoration) {
_decoration = decoration;
}
void addPadding(EdgeInsets padding) {
_padding = padding;
}
Widget build() {
return Container(
key: Key('search_app_bar_widget'),
alignment: Alignment.topCenter,
height: _heightSearchBar,
decoration: _decoration,
padding: _padding ?? EdgeInsets.symmetric(vertical: 8),
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildBackButton(),
Expanded(child: _buildSearchInputForm()),
if (_suggestionSearch?.isNotEmpty == true || (_searchQuery != null && _searchQuery!.value.isNotEmpty))
_buildClearTextSearchButton(),
]
)
)
);
}
Widget _buildBackButton() {
return Material(
borderRadius: BorderRadius.circular(12),
color: Colors.transparent,
child: Padding(
padding: EdgeInsets.only(left: 8),
child: IconButton(
color: AppColor.appColor,
icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.appColor, fit: BoxFit.fill),
onPressed: () {
_searchInputController?.clear();
if (_onCancelSearchPressed != null) {
_onCancelSearchPressed!();
}
}
)));
}
Widget _buildClearTextSearchButton() {
return Material(
borderRadius: BorderRadius.circular(12),
color: Colors.transparent,
child: Padding(
padding: EdgeInsets.only(right: 8),
child: IconButton(
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icComposerClose, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () {
_searchInputController?.clear();
if (_onClearTextSearchAction != null) {
_onClearTextSearchAction!();
}
}
)));
}
Widget _buildSearchInputForm() {
return (TextFieldBuilder()
..key(Key('search_input_form'))
..textInputAction(TextInputAction.done)
..onChange((value) {
if (_onSuggestionSearchQuery != null) {
_onSuggestionSearchQuery!(value);
}})
..onSubmitted((value) {
if (_onSearchTextAction != null) {
_onSearchTextAction!(value);
}})
..cursorColor(AppColor.baseTextColor)
..autoFocus(true)
..addFocusNode(_searchFocusNode)
..textStyle(TextStyle(
color: _searchQuery != null && _searchQuery!.value.isNotEmpty && _suggestionSearch?.isEmpty == true
? AppColor.nameUserColor
: AppColor.baseTextColor,
fontSize: 15,
fontWeight: FontWeight.w500))
..textDecoration(InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
contentPadding: EdgeInsets.symmetric(vertical: 15),
hintText: AppLocalizations.of(_context).search_mail,
hintStyle: TextStyle(
color: AppColor.baseTextColor,
fontWeight: FontWeight.w500,
fontSize: 15.0),
labelStyle: TextStyle(
color: AppColor.baseTextColor,
fontWeight: FontWeight.w500,
fontSize: 15.0)))
..addController(_searchInputController))
.build();
}
}
lib/features/thread/presentation/widgets/suggestion_box_widget.dart
+88
View File
@@ -0,0 +1,88 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
typedef OnSelectedSuggestion = Function(String);
class SuggestionBoxWidget {
OnSelectedSuggestion? _onSelectedSuggestion;
final BuildContext _context;
final ImagePaths _imagePaths;
double? _suggestionHeight;
double? _elevation;
List<String> _listData;
SuggestionBoxWidget(
this._context,
this._imagePaths,
this._listData,
);
void setSuggestionHeight(double suggestionHeight) {
_suggestionHeight = suggestionHeight;
}
void setElevation(double elevation) {
_elevation = elevation;
}
void addOnSelectedSuggestion(OnSelectedSuggestion onSelectedSuggestion) {
_onSelectedSuggestion = onSelectedSuggestion;
}
Widget build() {
return Material(
elevation: _elevation ?? 3,
color: Colors.white,
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: _suggestionHeight ?? 60,
),
child: ListView.builder(
shrinkWrap: true,
padding: EdgeInsets.zero,
itemCount: _listData.length,
itemBuilder: (BuildContext context, int index) => ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 10),
onTap: () {
if (_onSelectedSuggestion != null) {
_onSelectedSuggestion!(_listData[index]);
}},
leading: IconButton(
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icSearch, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () {
if (_onSelectedSuggestion != null) {
_onSelectedSuggestion!(_listData[index]);
}
}),
title: Transform(
transform: Matrix4.translationValues(-12.0, 0.0, 0.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'${AppLocalizations.of(_context).prefix_suggestion_search} ',
style: TextStyle(fontSize: 15, color: AppColor.baseTextColor),
),
Expanded(child: Text(
'"${_listData[index]}"',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 15, color: AppColor.nameUserColor, fontWeight: FontWeight.w500),
))
],
)
)
),
),
),
);
}
}