TF-460 Implement ManageAccountLeftMenuView

2022-04-25 17:51:45 +07:00
parent d1c341b020
commit bfe3652730
10 changed files with 184 additions and 11 deletions
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9546 14.2061C15.98 14.2061 17.6152 12.4297 17.6152 10.23C17.6152 8.08008 15.98 6.34521 13.9546 6.34521C11.9375 6.34521 10.2773 8.09668 10.2856 10.2466C10.2939 12.4297 11.9209 14.2061 13.9546 14.2061ZM13.9546 12.6289C12.8506 12.6289 11.9209 11.6162 11.9209 10.2383C11.9126 8.91016 12.8506 7.92236 13.9546 7.92236C15.0669 7.92236 15.9883 8.90186 15.9883 10.23C15.9883 11.6079 15.0669 12.6289 13.9546 12.6289ZM8.7998 21.9507H19.0928C20.562 21.9507 21.2842 21.4692 21.2842 20.4565C21.2842 18.1074 18.3706 15.1274 13.9463 15.1274C9.53027 15.1274 6.6167 18.1074 6.6167 20.4565C6.6167 21.4692 7.33057 21.9507 8.7998 21.9507ZM8.61719 20.3818C8.44287 20.3818 8.37646 20.3154 8.37646 20.1743C8.37646 18.9707 10.3853 16.7046 13.9463 16.7046C17.5073 16.7046 19.5244 18.9707 19.5244 20.1743C19.5244 20.3154 19.458 20.3818 19.2754 20.3818H8.61719Z" fill="#007AFF"/>
+</svg>
@@ -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;
@@ -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<ScaffoldState>();
+
  final appInformation = Rxn<PackageInfo>();
  final userProfile = Rxn<UserProfile>();
+  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;
 }
@@ -19,8 +19,21 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl

  @override
  Widget build(BuildContext context) {
+    if (controller.isMenuDrawerOpen && _responsiveUtils.isDesktop(context)) {
+      WidgetsBinding.instance?.addPostFrameCallback((_) {
+        controller.closeMenuDrawer();
+      });
+    }
+
    return Scaffold(
+      key: controller.menuDrawerKey,
      backgroundColor: Colors.white,
+      drawer: ResponsiveWidget(
+          responsiveUtils: _responsiveUtils,
+          mobile: SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
+          desktop: const SizedBox.shrink()
+      ),
+      drawerEnableOpenDragGesture: !_responsiveUtils.isDesktop(context),
      body: Stack(children: [
        ResponsiveWidget(
            responsiveUtils: _responsiveUtils,
@@ -57,18 +70,11 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
              Expanded(child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
-                  SizedBox(child: const ManageAccountMenuView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
+                  SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
                  const Expanded(child: ManageAccountContentView())
                ],
              ))
            ]),
-            tabletLarge: Row(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                SizedBox(child: const ManageAccountMenuView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
-                const Expanded(child: ManageAccountContentView())
-              ],
-            ),
            mobile: const ManageAccountContentView()
        ),
      ]),
@@ -1,8 +1,17 @@

+import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/dashboard/manage_account_dashboard_controller.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/account_property.dart';

 class ManageAccountMenuController extends BaseController {

+  final dashBoardController = Get.find<ManageAccountDashBoardController>();
+
+  final listAccountProperties = <AccountProperty>[
+    AccountProperty.profiles
+  ];
+
  @override
  void onDone() {
  }
@@ -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<ManageAccountMenuController> {

-  const ManageAccountMenuView({Key? key}) : super(key: key);
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+  final _imagePaths = Get.find<ImagePaths>();
+
+  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)))
+                      ]))),
+                  ]),
+                )),
+              ]
+          ),
+        )
+     );
  }
 }
@@ -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;
+  }
+}
@@ -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;
+    }
+  }
+}
@@ -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": {}
  }
 }
@@ -1163,4 +1163,9 @@ class AppLocalizations {
    return Intl.message('Manage account',
        name: 'manage_account');
  }
+
+  String get profiles {
+    return Intl.message('Profiles',
+        name: 'profiles');
+  }
 }