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
@@ -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;
+    }
+  }
+}