From bfe3652730eb2c3b2a2cc90427d203c54728cf43 Mon Sep 17 00:00:00 2001 From: dab246 Date: Mon, 25 Apr 2022 17:51:45 +0700 Subject: [PATCH] TF-460 Implement ManageAccountLeftMenuView --- assets/images/ic_profiles.svg | 3 + .../presentation/resources/image_paths.dart | 1 + .../manage_account_dashboard_controller.dart | 14 +++++ .../manage_account_dashboard_view.dart | 22 +++++--- .../menu/manage_account_menu_controller.dart | 9 +++ .../menu/manage_account_menu_view.dart | 52 ++++++++++++++++- .../account_property_tile_builder.dart | 56 +++++++++++++++++++ .../presentation/model/account_property.dart | 25 +++++++++ lib/l10n/intl_messages.arb | 8 ++- lib/main/localizations/app_localizations.dart | 5 ++ 10 files changed, 184 insertions(+), 11 deletions(-) create mode 100644 assets/images/ic_profiles.svg create mode 100644 lib/features/manage_account/presentation/menu/widgets/account_property_tile_builder.dart create mode 100644 lib/features/manage_account/presentation/model/account_property.dart diff --git a/assets/images/ic_profiles.svg b/assets/images/ic_profiles.svg new file mode 100644 index 000000000..e3ccfc17e --- /dev/null +++ b/assets/images/ic_profiles.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/lib/presentation/resources/image_paths.dart b/core/lib/presentation/resources/image_paths.dart index 7d2e6802c..e2525419a 100644 --- a/core/lib/presentation/resources/image_paths.dart +++ b/core/lib/presentation/resources/image_paths.dart @@ -94,6 +94,7 @@ class ImagePaths { String get icAvatarSpam => _getImagePath('ic_avatar_spam.svg'); String get icLogout => _getImagePath('ic_logout.svg'); String get icSetting => _getImagePath('ic_setting.svg'); + String get icProfiles => _getImagePath('ic_profiles.svg'); String _getImagePath(String imageName) { return AssetsPaths.images + imageName; diff --git a/lib/features/manage_account/presentation/dashboard/manage_account_dashboard_controller.dart b/lib/features/manage_account/presentation/dashboard/manage_account_dashboard_controller.dart index 5dbe9a171..678a91556 100644 --- a/lib/features/manage_account/presentation/dashboard/manage_account_dashboard_controller.dart +++ b/lib/features/manage_account/presentation/dashboard/manage_account_dashboard_controller.dart @@ -1,17 +1,22 @@ +import 'package:flutter/material.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/base/reloadable/reloadable_controller.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/get_user_profile_state.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_user_profile_interactor.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/model/account_property.dart'; class ManageAccountDashBoardController extends ReloadableController { final GetUserProfileInteractor _getUserProfileInteractor; + final menuDrawerKey = GlobalKey(); + final appInformation = Rxn(); final userProfile = Rxn(); + final accountPropertySelected = AccountProperty.profiles.obs; ManageAccountDashBoardController( this._getUserProfileInteractor, @@ -43,4 +48,13 @@ class ManageAccountDashBoardController extends ReloadableController { consumeState(_getUserProfileInteractor.execute()); } + void openMenuDrawer() { + menuDrawerKey.currentState?.openDrawer(); + } + + void closeMenuDrawer() { + menuDrawerKey.currentState?.openEndDrawer(); + } + + bool get isMenuDrawerOpen => menuDrawerKey.currentState?.isDrawerOpen == true; } \ No newline at end of file diff --git a/lib/features/manage_account/presentation/dashboard/manage_account_dashboard_view.dart b/lib/features/manage_account/presentation/dashboard/manage_account_dashboard_view.dart index 6d5ba329a..72bd198f4 100644 --- a/lib/features/manage_account/presentation/dashboard/manage_account_dashboard_view.dart +++ b/lib/features/manage_account/presentation/dashboard/manage_account_dashboard_view.dart @@ -19,8 +19,21 @@ class ManageAccountDashBoardView extends GetWidget(); + + final listAccountProperties = [ + AccountProperty.profiles + ]; + @override void onDone() { } diff --git a/lib/features/manage_account/presentation/menu/manage_account_menu_view.dart b/lib/features/manage_account/presentation/menu/manage_account_menu_view.dart index a487312bb..66886db10 100644 --- a/lib/features/manage_account/presentation/menu/manage_account_menu_view.dart +++ b/lib/features/manage_account/presentation/menu/manage_account_menu_view.dart @@ -1,14 +1,62 @@ +import 'package:core/core.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/menu/manage_account_menu_controller.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/menu/widgets/account_property_tile_builder.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; class ManageAccountMenuView extends GetWidget { - const ManageAccountMenuView({Key? key}) : super(key: key); + final _responsiveUtils = Get.find(); + final _imagePaths = Get.find(); + + ManageAccountMenuView({Key? key}) : super(key: key); @override Widget build(BuildContext context) { - return Container(color: Colors.green); + return Drawer( + elevation: _responsiveUtils.isDesktop(context) ? 0 : 16.0, + child: Scaffold( + backgroundColor: Colors.white, + body: Column( + children: [ + Expanded(child: Container( + color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, + child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + Padding( + padding: const EdgeInsets.only(left: 32, top: 34), + child: Text( + AppLocalizations.of(context).manage_account, + style: const TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 17))), + const SizedBox(height: 12), + ListView.builder( + padding: const EdgeInsets.only(left: 16, right: 8), + key: const Key('list_manage_account_property'), + shrinkWrap: true, + itemCount: controller.listAccountProperties.length, + itemBuilder: (context, index) => Obx(() => AccountPropertyTileBuilder( + context, + _imagePaths, + _responsiveUtils, + controller.listAccountProperties[index], + controller.dashBoardController.accountPropertySelected.value))), + const Padding( + padding: EdgeInsets.symmetric(vertical: 16), + child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)), + Padding(padding: const EdgeInsets.only(left: 32), + child: InkWell(child: Row(children: [ + SvgPicture.asset(_imagePaths.icLogout, fit: BoxFit.fill), + const SizedBox(width: 12), + Expanded(child: Text(AppLocalizations.of(context).sign_out, + style: const TextStyle(fontWeight: FontWeight.normal, fontSize: 15, color: Colors.black))) + ]))), + ]), + )), + ] + ), + ) + ); } } \ No newline at end of file diff --git a/lib/features/manage_account/presentation/menu/widgets/account_property_tile_builder.dart b/lib/features/manage_account/presentation/menu/widgets/account_property_tile_builder.dart new file mode 100644 index 000000000..4174576b2 --- /dev/null +++ b/lib/features/manage_account/presentation/menu/widgets/account_property_tile_builder.dart @@ -0,0 +1,56 @@ +import 'package:core/core.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/model/account_property.dart'; + +class AccountPropertyTileBuilder extends StatelessWidget { + + final BuildContext _context; + final ImagePaths _imagePaths; + final ResponsiveUtils _responsiveUtils; + final AccountProperty _accountProperty; + final AccountProperty _accountPropertySelected; + + const AccountPropertyTileBuilder( + this._context, + this._imagePaths, + this._responsiveUtils, + this._accountProperty, + this._accountPropertySelected, {Key? key} + ) : super(key: key); + + @override + Widget build(BuildContext context) { + return Theme( + data: ThemeData( + splashColor: Colors.transparent, + highlightColor: Colors.transparent), + child: Container( + key: const Key('account_property_tile'), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + color: backgroundColorItem + ), + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), + child: MediaQuery( + data: const MediaQueryData(padding: EdgeInsets.zero), + child: Column(children: [ + Row(children: [ + SvgPicture.asset(_accountProperty.getIcon(_imagePaths), width: 28, height: 28, fit: BoxFit.fill), + const SizedBox(width: 12), + Expanded(child: Text(_accountProperty.getName(context), + style: const TextStyle(fontWeight: FontWeight.normal, fontSize: 15, color: Colors.black))) + ]), + ]) + ) + ) + ); + } + + Color get backgroundColorItem { + if (_accountPropertySelected == _accountProperty) { + return AppColor.colorBgMailboxSelected; + } + return _responsiveUtils.isDesktop(_context) ? AppColor.colorBgDesktop : Colors.white; + } +} \ No newline at end of file diff --git a/lib/features/manage_account/presentation/model/account_property.dart b/lib/features/manage_account/presentation/model/account_property.dart new file mode 100644 index 000000000..c4dc3f893 --- /dev/null +++ b/lib/features/manage_account/presentation/model/account_property.dart @@ -0,0 +1,25 @@ + +import 'package:core/core.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +enum AccountProperty { + profiles +} + +extension AccountPropertyExtension on AccountProperty { + + String getIcon(ImagePaths imagePaths) { + switch(this) { + case AccountProperty.profiles: + return imagePaths.icProfiles; + } + } + + String getName(BuildContext context) { + switch(this) { + case AccountProperty.profiles: + return AppLocalizations.of(context).profiles; + } + } +} \ No newline at end of file diff --git a/lib/l10n/intl_messages.arb b/lib/l10n/intl_messages.arb index ddbed7081..d48bcd3b2 100644 --- a/lib/l10n/intl_messages.arb +++ b/lib/l10n/intl_messages.arb @@ -1,5 +1,5 @@ { - "@@last_modified": "2022-04-25T09:26:28.013781", + "@@last_modified": "2022-04-25T17:48:51.808593", "initializing_data": "Initializing data...", "@initializing_data": { "type": "text", @@ -1107,5 +1107,11 @@ "type": "text", "placeholders_order": [], "placeholders": {} + }, + "profiles": "Profiles", + "@profiles": { + "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 642948a8a..921d06dbc 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/lib/main/localizations/app_localizations.dart @@ -1163,4 +1163,9 @@ class AppLocalizations { return Intl.message('Manage account', name: 'manage_account'); } + + String get profiles { + return Intl.message('Profiles', + name: 'profiles'); + } } \ No newline at end of file