Step 10.2 tested for web

Author: anshumandas

README.md

@@ -81,12 +81,12 @@ Step 9: Add User Roles using Custom Claims. This requires upgrade of plan as we
    2. Created Navigation for each of Admin, Buyer, Seller screens
    3. Allowed switch from lower role Navigation to Navigation view till the given role of the user
 
-Step 10: TODO: Firebase Remote Config for A/B testing
+Step 10: TODO: Firebase Remote Config for A/B testing. See [https://firebase.google.com/docs/remote-config]
 
 1. Complete the Screen enum based Navigation framework
-2. Config for Navigation element change
-   * A: Drawer for Account, Settings, Sign Out
-   * B: Hamburger that opens BottomSheet (Context Menu in larger screen) for the same options
+2. Config useBottomSheetForProfileOptions for Navigation element to be one of the following
+   * False: Drawer for Account, Settings, Sign Out
+   * True: Hamburger that opens BottomSheet (Context Menu in larger screen) for the same options
 3. Config for adding Search Bar at the Top vs a Bottom Navigation button
 
 Step 11: TODO: CRUD

lib/app/modules/root/controllers/my_drawer_controller.dart

@@ -0,0 +1,10 @@
+import 'package:get/get.dart';
+
+import '../../../../models/screens.dart';
+
+class MyDrawerController extends GetxController {
+  MyDrawerController(Iterable<Screen> iter)
+      : values = Rx<Iterable<Screen>>(iter);
+
+  final Rx<Iterable<Screen>> values;
+}

lib/app/modules/root/views/drawer.dart

@@ -7,6 +7,7 @@ import '../../../../models/role.dart';
 import '../../../../services/auth_service.dart';
 
 import '../../../../models/screens.dart';
+import '../controllers/my_drawer_controller.dart';
 
 class DrawerWidget extends StatelessWidget {
   const DrawerWidget({
@@ -15,20 +16,23 @@ class DrawerWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Drawer(
-      //changing the shape of the drawer
-      shape: const RoundedRectangleBorder(
-        borderRadius: BorderRadius.only(
-            topRight: Radius.circular(0), bottomRight: Radius.circular(20)),
-      ),
-      width: 200,
-      child: Column(
-        children: drawerItems(context),
-      ),
-    );
+    MyDrawerController controller = Get.put(MyDrawerController([]),
+        permanent: true); //must make true else gives error
+    Screen.drawer().then((v) => {controller.values.value = v});
+    return Obx(() => Drawer(
+          //changing the shape of the drawer
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.only(
+                topRight: Radius.circular(0), bottomRight: Radius.circular(20)),
+          ),
+          width: 200,
+          child: Column(
+            children: drawerItems(context, controller.values),
+          ),
+        ));
   }
 
-  List<Widget> drawerItems(BuildContext context) {
+  List<Widget> drawerItems(BuildContext context, Rx<Iterable<Screen>> values) {
     List<Widget> list = [
       Container(
         height: 100,
@@ -43,34 +47,38 @@ class DrawerWidget extends StatelessWidget {
       )
     ];
 
-    for (var i = 0; i <= AuthService.to.maxRole.index; i++) {
-      Role role = Role.values[i];
-      list.add(ListTile(
-        title: Text(
-          role.name,
-          style: const TextStyle(
-            color: Colors.blue,
+    if (AuthService.to.maxRole.index > 1) {
+      for (var i = 0; i <= AuthService.to.maxRole.index; i++) {
+        Role role = Role.values[i];
+        list.add(ListTile(
+          title: Text(
+            role.name,
+            style: const TextStyle(
+              color: Colors.blue,
+            ),
           ),
-        ),
+          onTap: () {
+            Get.rootDelegate
+                .toNamed(Screen.HOME.route, arguments: {'role': role});
+            //to close the drawer
+            Navigator.of(context).pop();
+          },
+        ));
+      }
+    }
+
+    for (Screen screen in values.value) {
+      list.add(ListTile(
+        title: Text(screen.label ?? ''),
         onTap: () {
-          Get.rootDelegate
-              .toNamed(Screen.HOME.route, arguments: {'role': role});
+          Get.rootDelegate.toNamed(screen.route);
           //to close the drawer
+
           Navigator.of(context).pop();
         },
       ));
     }
 
-    Screen.drawer().forEach((Screen screen) => list.add(ListTile(
-          title: Text(screen.label ?? ''),
-          onTap: () {
-            Get.rootDelegate.toNamed(screen.route);
-            //to close the drawer
-
-            Navigator.of(context).pop();
-          },
-        )));
-
     if (AuthService.to.isLoggedInValue) {
       list.add(ListTile(
         title: const Text(

lib/app/modules/root/views/root_view.dart

@@ -38,11 +38,7 @@ class RootView extends GetView<RootController> {
                         ? controller.openDrawer()
                         : {Screen.HOME.doAction()},
                   ),
-            actions: [
-              Container(
-                  margin: const EdgeInsets.only(right: 15),
-                  child: Screen.LOGIN.widget(current))
-            ],
+            actions: topRightMenuButtons(current),
             // automaticallyImplyLeading: false, //removes drawer icon
           ),
           body: GetRouterOutlet(
@@ -56,4 +52,13 @@ class RootView extends GetView<RootController> {
       },
     );
   }
+
+//This could be used to add icon buttons in expanded web view instead of the context menu
+  List<Widget> topRightMenuButtons(GetNavConfig current) {
+    return [
+      Container(
+          margin: const EdgeInsets.only(right: 15),
+          child: Screen.LOGIN.widget(current))
+    ]; //TODO add seach button
+  }
 }

lib/app/widgets/login_widgets.dart

@@ -5,6 +5,7 @@ import 'package:get/get.dart';
 
 import '../../services/auth_service.dart';
 import '../../models/screens.dart';
+import '../../services/remote_config.dart';
 import 'menu_sheet_button.dart';
 
 class LoginWidgets {
@@ -43,23 +44,15 @@ class LoginWidgets {
   }
 }
 
-// class SwitchX extends GetxController {
-//   RxBool isLoginPage =
-//       (Get.rootDelegate.currentConfiguration!.currentPage!.name ==
-//               Screen.LOGIN.path)
-//           .obs; // our observable
-
-//   void toggle(Screen screen) {
-//     isLoginPage.value = screen == Screen.LOGIN;
-//   }
-// }
-
 class LoginBottomSheetToggle extends MenuSheetButton<Screen> {
   const LoginBottomSheetToggle(this.current, {super.key});
   final GetNavConfig current;
 
   @override
-  Iterable<Screen> get values => Screen.sheet(null);
+  Iterable<Screen> get values {
+    MenuItemsController<Screen> controller = Get.find();
+    return controller.values.value;
+  }
 
   @override
   Icon? get icon => (AuthService.to.isLoggedInValue)
@@ -75,18 +68,19 @@ class LoginBottomSheetToggle extends MenuSheetButton<Screen> {
           : 'Click for Options'
       : 'Login';
 
-  // @override
-  // void callbackFunc(act) {
-  //   SwitchX controller = Get.find();
-  //   controller.toggle(Screen.LOGIN);
-  // }
-
   @override
   Widget build(BuildContext context) {
-    // SwitchX controller =
-    //     Get.put(SwitchX(), permanent: true); //must make true else gives error
+    MenuItemsController<Screen> controller = Get.put(
+        MenuItemsController<Screen>([]),
+        permanent: true); //must make true else gives error
+    Screen.sheet(null).then((val) {
+      controller.values.value = val;
+    });
+    RemoteConfig.instance.then((ins) =>
+        ins.addUseBottomSheetForProfileOptionsListener((val) async =>
+            {controller.values.value = await Screen.sheet(null)}));
     return Obx(() => (AuthService.to.isLoggedInValue)
-        ? builder(context)
+        ? builder(context, vals: controller.values.value)
         : !(current.currentPage!.name == Screen.LOGIN.path)
             ? IconButton(
                 onPressed: () async {

lib/app/widgets/menu_sheet_button.dart

@@ -3,6 +3,12 @@ import 'package:get/get.dart';
 
 import '../../models/action_enum.dart';
 
+class MenuItemsController<T extends ActionEnum> extends GetxController {
+  MenuItemsController(Iterable<T> iter) : values = Rx<Iterable<T>>(iter);
+
+  final Rx<Iterable<T>> values;
+}
+
 class MenuSheetButton<T extends ActionEnum> extends StatelessWidget {
   final Iterable<T>? values_;
   final Icon? icon;
@@ -42,7 +48,7 @@ class MenuSheetButton<T extends ActionEnum> extends StatelessWidget {
     );
   }
 
-  List<PopupMenuEntry<T>> getItems(BuildContext context) {
+  List<PopupMenuEntry<T>> getItems(BuildContext context, Iterable<T> values) {
     return values.map<PopupMenuEntry<T>>(createPopupMenuItem).toList();
   }
 
@@ -57,27 +63,29 @@ class MenuSheetButton<T extends ActionEnum> extends StatelessWidget {
   }
 
 //This should be a modal bottom sheet if on Mobile (See https://mercyjemosop.medium.com/select-and-upload-images-to-firebase-storage-flutter-6fac855970a9)
-  Widget builder(BuildContext context) {
+  Widget builder(BuildContext context, {Iterable<T>? vals}) {
+    Iterable<T> values = vals ?? values_!;
     return values.length == 1 ||
             Get.mediaQuery.orientation == Orientation.portrait
         // : Get.context!.isPortrait
         ? (icon != null
             ? IconButton(
-                onPressed: buttonPressed,
+                onPressed: () => buttonPressed(values),
                 icon: icon!,
                 tooltip: label,
               )
             : TextButton(
-                onPressed: buttonPressed, child: Text(label ?? 'Need Label')))
+                onPressed: () => buttonPressed(values),
+                child: Text(label ?? 'Need Label')))
         : PopupMenuButton<T>(
-            itemBuilder: getItems,
+            itemBuilder: (context_) => getItems(context_, values),
             icon: icon,
             tooltip: label,
             onSelected: (T value) async =>
                 callbackFunc(await value.doAction()));
   }
 
-  void buttonPressed() async => values.length == 1
+  void buttonPressed(Iterable<T> values) async => values.length == 1
       ? callbackFunc(await values.first.doAction())
       : Get.bottomSheet(MenuSheetButton.bottomSheet(values, callbackFunc),
           backgroundColor: Colors.white);

lib/constants.dart

@@ -6,7 +6,7 @@ const kPrimaryLightColor = Color(0xFFF1E6FF);
 
 const double defaultPadding = 16.0;
 
-const useEmulator = true;
+const useEmulator = false;
 
 const useRecaptcha = false;
 

lib/models/role.dart

@@ -30,6 +30,6 @@ enum Role {
   bool hasAccessOf(String role) => index >= fromString(role).index;
 
   List<Screen> get tabs => permissions
-      .where((screen) => screen.accessor == AccessedVia.navigator)
+      .where((screen) => screen.accessor_ == AccessedVia.navigator)
       .toList(); //the ones in tab
 }