From 2178b8f3134fa149af72f171b8243943182ada1b Mon Sep 17 00:00:00 2001 From: ManhNTX Date: Mon, 8 Aug 2022 14:37:01 +0700 Subject: [PATCH] add dialog edit rule for mobile --- assets/images/ic_delete_rule_mobile.svg | 3 + assets/images/ic_edit_rule_mobile.svg | 3 + assets/images/ic_open_edit_rule.svg | 3 + .../presentation/resources/image_paths.dart | 3 + ...cupertino_action_sheet_action_builder.dart | 27 +++---- env.file | 2 +- .../email_rules/email_rules_controller.dart | 62 ++++++++++++--- ...rule_bottom_sheet_action_tile_builder.dart | 57 ++++++++++++++ .../widgets/email_rule_item_widget.dart | 56 +++++++++----- .../widgets/email_rules_header_widget.dart | 76 ++++++++++++------- .../widgets/list_email_rules_widget.dart | 6 -- lib/l10n/intl_messages.arb | 14 +++- lib/main/localizations/app_localizations.dart | 14 ++++ 13 files changed, 248 insertions(+), 78 deletions(-) create mode 100644 assets/images/ic_delete_rule_mobile.svg create mode 100644 assets/images/ic_edit_rule_mobile.svg create mode 100644 assets/images/ic_open_edit_rule.svg create mode 100644 lib/features/manage_account/presentation/email_rules/widgets/email_rule_bottom_sheet_action_tile_builder.dart diff --git a/assets/images/ic_delete_rule_mobile.svg b/assets/images/ic_delete_rule_mobile.svg new file mode 100644 index 000000000..d11aadada --- /dev/null +++ b/assets/images/ic_delete_rule_mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_edit_rule_mobile.svg b/assets/images/ic_edit_rule_mobile.svg new file mode 100644 index 000000000..d10e9201e --- /dev/null +++ b/assets/images/ic_edit_rule_mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_open_edit_rule.svg b/assets/images/ic_open_edit_rule.svg new file mode 100644 index 000000000..2806a7107 --- /dev/null +++ b/assets/images/ic_open_edit_rule.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/lib/presentation/resources/image_paths.dart b/core/lib/presentation/resources/image_paths.dart index 201aef1c6..7c861396b 100644 --- a/core/lib/presentation/resources/image_paths.dart +++ b/core/lib/presentation/resources/image_paths.dart @@ -149,6 +149,9 @@ class ImagePaths { String get icAddNewRules => _getImagePath('ic_add_new_rule.svg'); String get icEditRule => _getImagePath('ic_edit_rule.svg'); String get icDeleteRule => _getImagePath('ic_delete_rule.svg'); + String get icOpenEditRule => _getImagePath('ic_open_edit_rule.svg'); + String get icEditRuleMobile => _getImagePath('ic_edit_rule_mobile.svg'); + String get icDeleteRuleMobile => _getImagePath('ic_delete_rule_mobile.svg'); String _getImagePath(String imageName) { return AssetsPaths.images + imageName; diff --git a/core/lib/presentation/views/bottom_popup/cupertino_action_sheet_action_builder.dart b/core/lib/presentation/views/bottom_popup/cupertino_action_sheet_action_builder.dart index f2d143297..6d715f908 100644 --- a/core/lib/presentation/views/bottom_popup/cupertino_action_sheet_action_builder.dart +++ b/core/lib/presentation/views/bottom_popup/cupertino_action_sheet_action_builder.dart @@ -6,24 +6,25 @@ import 'package:flutter_svg/flutter_svg.dart'; typedef OnCupertinoActionSheetActionClick = void Function(T data); abstract class CupertinoActionSheetActionBuilder { - @protected final Key key; - @protected final SvgPicture actionIcon; - @protected final String actionName; - @protected OnCupertinoActionSheetActionClick? onCupertinoActionSheetActionClick; + @protected + final Key key; + @protected + final SvgPicture actionIcon; + @protected + final String actionName; + @protected + OnCupertinoActionSheetActionClick? onCupertinoActionSheetActionClick; - CupertinoActionSheetActionBuilder( - this.key, - this.actionIcon, - this.actionName - ); + CupertinoActionSheetActionBuilder(this.key, this.actionIcon, this.actionName); - void onActionClick(OnCupertinoActionSheetActionClick onCupertinoActionSheetActionClick) { + void onActionClick( + OnCupertinoActionSheetActionClick onCupertinoActionSheetActionClick) { this.onCupertinoActionSheetActionClick = onCupertinoActionSheetActionClick; } - TextStyle actionTextStyle() { - return TextStyle(fontSize: 17, color: AppColor.colorNameEmail); + TextStyle actionTextStyle({TextStyle? textStyle}) { + return textStyle ?? TextStyle(fontSize: 17, color: AppColor.colorNameEmail); } Widget build(); -} \ No newline at end of file +} diff --git a/env.file b/env.file index f915cbf58..71638e979 100644 --- a/env.file +++ b/env.file @@ -1,3 +1,3 @@ -SERVER_URL=https://gateway.upn.integration-open-paas.org +SERVER_URL=http://localhost DOMAIN_REDIRECT_URL=http://localhost:3000 WEB_OIDC_CLIENT_ID=teammail-web \ No newline at end of file diff --git a/lib/features/manage_account/presentation/email_rules/email_rules_controller.dart b/lib/features/manage_account/presentation/email_rules/email_rules_controller.dart index a5387bce5..1ace36c77 100644 --- a/lib/features/manage_account/presentation/email_rules/email_rules_controller.dart +++ b/lib/features/manage_account/presentation/email_rules/email_rules_controller.dart @@ -1,15 +1,23 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/resources/image_paths.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:jmap_dart_client/jmap/account_id.dart'; import 'package:rule_filter/rule_filter/tmail_rule.dart'; import 'package:tmail_ui_user/features/base/base_controller.dart'; import 'package:tmail_ui_user/features/manage_account/domain/state/get_all_rules_state.dart'; import 'package:tmail_ui_user/features/manage_account/domain/usecases/get_all_rules_interactor.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/email_rule_bottom_sheet_action_tile_builder.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/manage_account_dashboard_controller.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; class EmailRulesController extends BaseController { final listEmailRule = [].obs; - final _accountDashBoardController = Get.find(); + final _accountDashBoardController = + Get.find(); final GetAllRulesInteractor _getAllRulesInteractor; + final _imagePaths = Get.find(); late Worker accountIdWorker; EmailRulesController(this._getAllRulesInteractor); @@ -20,16 +28,13 @@ class EmailRulesController extends BaseController { @override void onDone() { - viewState.value.fold( - (failure) {}, - (success) { - if (success is GetAllRulesSuccess) { - if (success.rules?.isNotEmpty == true) { - listEmailRule.addAll(success.rules!); - } - } + viewState.value.fold((failure) {}, (success) { + if (success is GetAllRulesSuccess) { + if (success.rules?.isNotEmpty == true) { + listEmailRule.addAll(success.rules!); } - ); + } + }); } @override @@ -62,4 +67,41 @@ class EmailRulesController extends BaseController { void _getAllRules(AccountId accountId) { consumeState(_getAllRulesInteractor.execute(accountId)); } + + void openEditRuleMenuAction(BuildContext context, TMailRule rule) { + openContextMenuAction( + context, + [ + _editEmailRuleActionTile(context, rule), + _deleteEmailRuleActionTile(context, rule), + ], + ); + } + + Widget _deleteEmailRuleActionTile(BuildContext context, TMailRule rule) { + return (EmailRuleBottomSheetActionTileBuilder( + const Key('delete_emailRule_action'), + SvgPicture.asset(_imagePaths.icDeleteComposer, + color: AppColor.colorActionDeleteConfirmDialog), + AppLocalizations.of(context).deleteRule, + rule, + iconLeftPadding: const EdgeInsets.only(left: 12, right: 16), + iconRightPadding: const EdgeInsets.only(right: 12), + textStyleAction: const TextStyle( + fontSize: 17, color: AppColor.colorActionDeleteConfirmDialog), + )..onActionClick((rule) => deleteEmailRule(rule))) + .build(); + } + + Widget _editEmailRuleActionTile(BuildContext context, TMailRule rule) { + return (EmailRuleBottomSheetActionTileBuilder( + const Key('edit_emailRule_action'), + SvgPicture.asset(_imagePaths.icEdit), + AppLocalizations.of(context).editRule, + rule, + iconLeftPadding: const EdgeInsets.only(left: 12, right: 16), + iconRightPadding: const EdgeInsets.only(right: 12), + )..onActionClick((rule) => editEmailRule(rule))) + .build(); + } } diff --git a/lib/features/manage_account/presentation/email_rules/widgets/email_rule_bottom_sheet_action_tile_builder.dart b/lib/features/manage_account/presentation/email_rules/widgets/email_rule_bottom_sheet_action_tile_builder.dart new file mode 100644 index 000000000..4ec29bd89 --- /dev/null +++ b/lib/features/manage_account/presentation/email_rules/widgets/email_rule_bottom_sheet_action_tile_builder.dart @@ -0,0 +1,57 @@ +import 'package:core/core.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:rule_filter/rule_filter/tmail_rule.dart'; + +class EmailRuleBottomSheetActionTileBuilder + extends CupertinoActionSheetActionBuilder { + final TMailRule emailRule; + final SvgPicture? actionSelected; + final Color? bgColor; + final EdgeInsets? iconLeftPadding; + final EdgeInsets? iconRightPadding; + final TextStyle? textStyleAction; + + EmailRuleBottomSheetActionTileBuilder( + Key key, + SvgPicture actionIcon, + String actionName, + this.emailRule, { + this.actionSelected, + this.bgColor, + this.iconLeftPadding, + this.iconRightPadding, + this.textStyleAction, + }) : super(key, actionIcon, actionName); + + @override + Widget build() { + return Container( + color: bgColor ?? Colors.white, + child: MouseRegion( + cursor: BuildUtils.isWeb + ? MaterialStateMouseCursor.clickable + : MouseCursor.defer, + child: CupertinoActionSheetAction( + key: key, + child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [ + Padding( + padding: iconLeftPadding ?? + const EdgeInsets.only(left: 12, right: 16), + child: actionIcon), + Expanded( + child: Text(actionName, + textAlign: TextAlign.left, + style: actionTextStyle(textStyle: textStyleAction))), + ]), + onPressed: () { + if (onCupertinoActionSheetActionClick != null) { + onCupertinoActionSheetActionClick!(emailRule); + } + }, + ), + ), + ); + } +} diff --git a/lib/features/manage_account/presentation/email_rules/widgets/email_rule_item_widget.dart b/lib/features/manage_account/presentation/email_rules/widgets/email_rule_item_widget.dart index 4c98fa151..59f9ff97c 100644 --- a/lib/features/manage_account/presentation/email_rules/widgets/email_rule_item_widget.dart +++ b/lib/features/manage_account/presentation/email_rules/widgets/email_rule_item_widget.dart @@ -6,23 +6,25 @@ import 'package:rule_filter/rule_filter/tmail_rule.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/email_rules_controller.dart'; class EmailRulesItemWidget extends GetWidget { + final _responsiveUtils = Get.find(); final _imagePaths = Get.find(); EmailRulesItemWidget({ Key? key, - required this.editRule, required this.rule, - required this.deleteRule, }) : super(key: key); - final void Function(TMailRule) editRule; final TMailRule rule; - final void Function(TMailRule) deleteRule; @override Widget build(BuildContext context) { return Container( - padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 24), + padding: EdgeInsets.only( + top: 15, + bottom: 15, + left: _responsiveUtils.isMobile(context) ? 16 : 24, + right: _responsiveUtils.isMobile(context) ? 0 : 24 + ), color: Colors.white, child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [ Text(rule.name, @@ -31,22 +33,34 @@ class EmailRulesItemWidget extends GetWidget { fontWeight: FontWeight.w400, color: Colors.black)), const Spacer(), - buildIconWeb( - icon: SvgPicture.asset( - _imagePaths.icEditRule, - fit: BoxFit.fill, - ), - onTap: () { - editRule.call(rule); - }), - buildIconWeb( - icon: SvgPicture.asset( - _imagePaths.icDeleteRule, - fit: BoxFit.fill, - ), - onTap: () { - deleteRule.call(rule); - }), + if (!_responsiveUtils.isMobile(context)) + buildIconWeb( + icon: SvgPicture.asset( + _imagePaths.icEditRule, + fit: BoxFit.fill, + ), + onTap: () { + controller.editEmailRule(rule); + }), + if (!_responsiveUtils.isMobile(context)) + buildIconWeb( + icon: SvgPicture.asset( + _imagePaths.icDeleteRule, + fit: BoxFit.fill, + ), + onTap: () { + controller.deleteEmailRule(rule); + }), + if (_responsiveUtils.isMobile(context)) + buildIconWeb( + icon: SvgPicture.asset( + _imagePaths.icOpenEditRule, + fit: BoxFit.fill, + ), + iconPadding: const EdgeInsets.all(0), + onTap: () { + controller.openEditRuleMenuAction(context, rule); + }), ]), ); } diff --git a/lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart b/lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart index cf2bca793..4d77f57a4 100644 --- a/lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart +++ b/lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart @@ -21,31 +21,6 @@ class EmailRulesHeaderWidget extends GetWidget { @override Widget build(BuildContext context) { - final buttonAddNewRule = Row(children: [ - if (!responsiveUtils.isMobile(context)) - (ButtonBuilder(imagePaths.icAddNewRules) - ..key(const Key('button_new_rule')) - ..decoration(BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: AppColor.colorTextButton)) - ..paddingIcon(const EdgeInsets.only(right: 8)) - ..iconColor(Colors.white) - ..maxWidth(170) - ..size(20) - ..radiusSplash(10) - ..padding(const EdgeInsets.symmetric(vertical: 12)) - ..textStyle(const TextStyle( - fontSize: 17, - color: Colors.white, - fontWeight: FontWeight.w500, - )) - ..onPressActionClick(() => controller.goToCreateNewRule()) - ..text( - AppLocalizations.of(context).addNewRule, - isVertical: false, - )) - .build() - ]); return Container( padding: const EdgeInsets.all(24), decoration: BoxDecoration( @@ -65,8 +40,57 @@ class EmailRulesHeaderWidget extends GetWidget { fontWeight: FontWeight.normal, color: AppColor.colorTextButtonHeaderThread)), const SizedBox(height: 24), - buttonAddNewRule, + _buildButtonAddNewRule(context), ]), ); } + + Widget _buildButtonAddNewRule(BuildContext context) { + if (!responsiveUtils.isMobile(context)) { + return (ButtonBuilder(imagePaths.icAddNewRules) + ..key(const Key('button_new_rule')) + ..decoration(BoxDecoration( + borderRadius: BorderRadius.circular(10), + color: AppColor.colorTextButton)) + ..paddingIcon(const EdgeInsets.only(right: 8)) + ..iconColor(Colors.white) + ..maxWidth(130) + ..size(20) + ..radiusSplash(10) + ..padding(const EdgeInsets.symmetric(vertical: 12)) + ..textStyle(const TextStyle( + fontSize: 17, + color: Colors.white, + fontWeight: FontWeight.w500, + )) + ..onPressActionClick(() => controller.goToCreateNewRule()) + ..text( + AppLocalizations.of(context).addNewRule, + isVertical: false, + )) + .build(); + } else { + return (ButtonBuilder(imagePaths.icAddNewRules) + ..key(const Key('button_new_rule')) + ..decoration(BoxDecoration( + borderRadius: BorderRadius.circular(10), + color: AppColor.colorTextButton)) + ..paddingIcon(const EdgeInsets.only(right: 8)) + ..iconColor(Colors.white) + ..size(20) + ..radiusSplash(10) + ..padding(const EdgeInsets.symmetric(vertical: 12)) + ..textStyle(const TextStyle( + fontSize: 17, + color: Colors.white, + fontWeight: FontWeight.w500, + )) + ..onPressActionClick(() => controller.goToCreateNewRule()) + ..text( + AppLocalizations.of(context).addNewRule, + isVertical: false, + )) + .build(); + } + } } diff --git a/lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart b/lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart index a5deee8e8..b7a33c65a 100644 --- a/lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart +++ b/lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart @@ -44,12 +44,6 @@ class ListEmailRulesWidget extends GetWidget { final rule = controller.listEmailRule[index]; return EmailRulesItemWidget( rule: rule, - editRule: (rule) { - controller.editEmailRule(rule); - }, - deleteRule: (rule) { - controller.editEmailRule(rule); - }, ); }, separatorBuilder: (BuildContext context, int index) => diff --git a/lib/l10n/intl_messages.arb b/lib/l10n/intl_messages.arb index 06831a1ce..dacf67aa7 100644 --- a/lib/l10n/intl_messages.arb +++ b/lib/l10n/intl_messages.arb @@ -1,5 +1,5 @@ { - "@@last_modified": "2022-08-08T08:50:15.957543", + "@@last_modified": "2022-08-08T14:35:21.345792", "initializing_data": "Initializing data...", "@initializing_data": { "type": "text", @@ -1777,5 +1777,17 @@ "type": "text", "placeholders_order": [], "placeholders": {} + }, + "editRule": "Edit rule", + "@editRule": { + "type": "text", + "placeholders_order": [], + "placeholders": {} + }, + "deleteRule": "Delete rule", + "@deleteRule": { + "type": "text", + "placeholders_order": [], + "placeholders": {} } } \ No newline at end of file diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart index 309d536c6..9e497a083 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/lib/main/localizations/app_localizations.dart @@ -1826,4 +1826,18 @@ class AppLocalizations { name: 'headerNameOfRules', ); } + + String get editRule { + return Intl.message( + 'Edit rule', + name: 'editRule', + ); + } + + String get deleteRule { + return Intl.message( + 'Delete rule', + name: 'deleteRule', + ); + } } \ No newline at end of file