Merge pull request #1824 from EnsembleUI/drawerBranch

TheNoumanDev · web-flow · commit 0e81616ae4c6 · 2025-02-07T21:21:36.000+05:00
[1806] Updated Drawer to have custom widgets and functions
diff --git a/modules/ensemble/lib/action/drawer_actions.dart b/modules/ensemble/lib/action/drawer_actions.dart
@@ -0,0 +1,64 @@
+import 'package:ensemble/ensemble.dart';
+import 'package:ensemble/framework/action.dart';
+import 'package:ensemble/framework/scope.dart';
+import 'package:ensemble/util/utils.dart';
+import 'package:ensemble_ts_interpreter/invokables/invokable.dart';
+import 'package:flutter/material.dart';
+
+/// Action to open drawer in the current context
+/// Will open screen-level drawer if exists, otherwise app-level drawer
+class OpenDrawerAction extends EnsembleAction {
+  OpenDrawerAction({super.initiator});
+
+  factory OpenDrawerAction.from({Invokable? initiator, Map? payload}) {
+    return OpenDrawerAction(initiator: initiator);
+  }
+
+  @override
+  Future<void> execute(BuildContext context, ScopeManager scopeManager) {
+    try {
+      // Get nearest Scaffold
+      ScaffoldState? scaffold = Scaffold.maybeOf(context);
+      
+      // Check if scaffold exists and has drawer
+      if (scaffold != null && scaffold.hasDrawer) {
+        scaffold.openDrawer();
+      }
+    } catch (e) {
+      debugPrint('Error opening drawer: $e');
+    }
+    return Future.value();
+  }
+}
+
+class CloseDrawerAction extends EnsembleAction {
+  CloseDrawerAction({super.initiator});
+
+  factory CloseDrawerAction.from({Invokable? initiator, Map? payload}) {
+    return CloseDrawerAction(initiator: initiator);
+  }
+
+  @override
+  Future execute(BuildContext context, ScopeManager scopeManager) async {
+    try {
+      // Get the current route
+      final currentRoute = Ensemble().getCurrentRoute();
+      final scaffold = Scaffold.maybeOf(context);
+
+      // Check if we're in a drawer route
+      if (currentRoute != null && 
+          currentRoute.isCurrent && 
+          currentRoute.navigator != null &&
+          currentRoute is MaterialPageRoute) {
+            if(scaffold != null && !scaffold.hasDrawer) {
+              currentRoute.navigator!.maybePop();
+              return Future.value(true); 
+            }
+      }
+      return Future.value(false);
+    } catch (e) {
+      debugPrint('Error closing drawer: $e');
+      return Future.value(false);
+    }
+  }
+}
diff --git a/modules/ensemble/lib/framework/action.dart b/modules/ensemble/lib/framework/action.dart
@@ -8,6 +8,7 @@ import 'package:ensemble/action/deep_link_action.dart';
 import 'package:ensemble/action/call_external_method.dart';
 import 'package:ensemble/action/device_security.dart';
 import 'package:ensemble/action/dialog_actions.dart';
+import 'package:ensemble/action/drawer_actions.dart';
 import 'package:ensemble/action/execute_action_group_action.dart';
 import 'package:ensemble/action/get_network_info_action.dart';
 import 'package:ensemble/action/haptic_action.dart';
@@ -1061,6 +1062,8 @@ enum ActionType {
   bluetoothSubscribeCharacteristic,
   bluetoothUnsubscribeCharacteristic,
   controlDeviceBackNavigation,
+  openDrawer,
+  closeDrawer,
   closeApp,
   saveFile,
   sendVerificationCode,
@@ -1290,6 +1293,10 @@ abstract class EnsembleAction {
       return SubscribeBluetoothCharacteristicsAction.from(payload: payload);
     } else if (actionType == ActionType.bluetoothUnsubscribeCharacteristic) {
       return UnSubscribeBluetoothCharacteristicsAction.from(payload: payload);
+    } else if (actionType == ActionType.openDrawer) {
+      return OpenDrawerAction.from(initiator: initiator, payload: payload);
+    } else if (actionType == ActionType.closeDrawer) {
+      return CloseDrawerAction.from(initiator: initiator, payload: payload);
     } else if (actionType == ActionType.sendVerificationCode) {
       return SendVerificationCodeAction.fromYaml(
           initiator: initiator, payload: payload);
diff --git a/modules/ensemble/lib/framework/menu.dart b/modules/ensemble/lib/framework/menu.dart
@@ -92,6 +92,7 @@ abstract class Menu extends Object with HasStyles, Invokable {
                   Utils.optionalString(item['floatingAlignment']) ?? 'center',
               floatingMargin: Utils.optionalInt(item['floatingMargin']),
               switchScreen: Utils.getBool(item['switchScreen'], fallback: true),
+              isClickable: Utils.getBool(item['isClickable'], fallback: true),
               onTap: item['onTap'],
               onTapHaptic: Utils.optionalString(item['onTapHaptic']),
               isExternal: Utils.getBool(item['isExternal'], fallback: false),
@@ -291,6 +292,7 @@ class MenuItem {
     this.selected,
     this.floating = false,
     this.switchScreen = true,
+    this.isClickable = true,
     this.floatingAlignment = 'center',
     this.floatingMargin,
     this.onTap,
@@ -309,6 +311,7 @@ class MenuItem {
   final dynamic selected;
   final bool floating;
   final bool switchScreen;
+  final bool isClickable;
   final String floatingAlignment;
   final int? floatingMargin;
   final dynamic onTap;
diff --git a/modules/ensemble/lib/framework/view/page.dart b/modules/ensemble/lib/framework/view/page.dart
@@ -1,6 +1,7 @@
 import 'dart:developer';
 
 import 'package:ensemble/ensemble.dart';
+import 'package:ensemble/framework/action.dart';
 import 'package:ensemble/ensemble_app.dart';
 import 'package:ensemble/framework/data_context.dart';
 import 'package:ensemble/framework/devmode.dart';
@@ -331,6 +332,12 @@ class PageState extends State<Page>
       backgroundWidget =
           _scopeManager.buildWidget(headerModel.flexibleBackground!);
     }
+    // Build custom leading widget if provided
+    Widget? leadingWidget;
+    if (headerModel.leadingWidget != null) {
+      leadingWidget = _scopeManager.buildWidget(headerModel.leadingWidget!);
+    }
+
     final evaluatedHeader = EnsembleThemeManager()
         .getRuntimeStyles(_scopeManager.dataContext, headerModel);
 
@@ -362,7 +369,9 @@ class PageState extends State<Page>
 
     if (scrollableView) {
       return SliverAppBar(
-        automaticallyImplyLeading: showNavigationIcon != false,
+        automaticallyImplyLeading:
+            leadingWidget == null && showNavigationIcon != false,
+        leading: leadingWidget,
         title: titleWidget,
         centerTitle: centerTitle,
         backgroundColor: backgroundColor,
@@ -383,7 +392,9 @@ class PageState extends State<Page>
       );
     } else {
       return AppBar(
-        automaticallyImplyLeading: showNavigationIcon != false,
+        automaticallyImplyLeading:
+            leadingWidget == null && showNavigationIcon != false,
+        leading: leadingWidget,
         title: titleWidget,
         centerTitle: centerTitle,
         backgroundColor: backgroundColor,
@@ -696,21 +707,68 @@ class PageState extends State<Page>
   }
 
   Drawer? _buildDrawer(BuildContext context, DrawerMenu menu) {
-    List<ListTile> navItems = [];
-    for (int i = 0; i < menu.menuItems.length; i++) {
-      MenuItem item = menu.menuItems[i];
-      navItems.add(ListTile(
-        selected: i == selectedPage,
-        title: Text(Utils.translate(item.label ?? '', context)),
-        leading: ensemble.Icon(item.icon ?? '', library: item.iconLibrary),
-        horizontalTitleGap: 0,
-        onTap: () => selectNavigationIndex(context, item),
-      ));
+    List<MenuItem> visibleItems =
+        Menu.getVisibleMenuItems(_scopeManager.dataContext, menu.menuItems);
+    List<Widget> menuItems = [];
+
+    for (int i = 0; i < visibleItems.length; i++) {
+      MenuItem item = visibleItems[i];
+
+      final customWidget = _buildCustomIcon(item);
+      final label = customWidget != null
+          ? ''
+          : Utils.translate(item.label ?? '', context);
+
+      Widget menuItem;
+      void handleTap() {
+        if (!item.isClickable) return;
+
+        if (item.onTap != null) {
+          ScreenController().executeActionWithScope(
+              context, _scopeManager, EnsembleAction.from(item.onTap)!);
+        }
+        if (item.switchScreen) {
+          selectNavigationIndex(context, item);
+        }
+      }
+
+      if (customWidget != null) {
+        menuItem = item.isClickable
+            ? InkWell(onTap: handleTap, child: customWidget)
+            : customWidget;
+      } else {
+        menuItem = ListTile(
+          enabled: item.isClickable,
+          selected: i == selectedPage,
+          title: Text(label),
+          leading: ensemble.Icon(item.icon ?? '', library: item.iconLibrary),
+          horizontalTitleGap: 0,
+          onTap: item.isClickable ? handleTap : null,
+        );
+      }
+
+      menuItems.add(menuItem);
     }
+
     return Drawer(
       backgroundColor: Utils.getColor(menu.runtimeStyles?['backgroundColor']),
-      child: ListView(
-        children: navItems,
+      child: Column(
+        children: [
+          // Header
+          if (menu.headerModel != null)
+            _scopeManager.buildWidget(menu.headerModel!),
+
+          // Menu Items in scrollable area
+          Expanded(
+            child: ListView(
+              children: menuItems,
+            ),
+          ),
+
+          // Footer at bottom
+          if (menu.footerModel != null)
+            _scopeManager.buildWidget(menu.footerModel!),
+        ],
       ),
     );
   }
diff --git a/modules/ensemble/lib/framework/view/page_group.dart b/modules/ensemble/lib/framework/view/page_group.dart
@@ -1,5 +1,7 @@
 import 'dart:developer';
 
+import 'package:ensemble/action/drawer_actions.dart';
+import 'package:ensemble/framework/action.dart';
 import 'package:ensemble/framework/data_context.dart';
 import 'package:ensemble/framework/device.dart';
 import 'package:ensemble/framework/error_handling.dart';
@@ -100,7 +102,8 @@ class PageGroupState extends State<PageGroup> with MediaQueryCapability {
     );
 
     // Need to get the items which are only visible
-    widget.menu.menuItems = Menu.getVisibleMenuItems(_scopeManager.dataContext, widget.menu.menuItems);
+    widget.menu.menuItems = Menu.getVisibleMenuItems(
+        _scopeManager.dataContext, widget.menu.menuItems);
 
     int? selectedIndex = Utils.optionalInt(widget.pageArgs?["viewIndex"],
         min: 0, max: widget.menu.menuItems.length - 1);
@@ -366,34 +369,110 @@ class PageGroupState extends State<PageGroup> with MediaQueryCapability {
   // }
 
   Drawer? _buildDrawer(BuildContext context, Menu menu) {
-    List<ListenableBuilder> navItems = [];
-    for (var i = 0; i < menu.menuItems.length; i++) {
-      MenuItem item = menu.menuItems[i];
-      navItems.add(ListenableBuilder(
-          listenable: viewGroupNotifier,
-          builder: (context, _) {
-            return ListTile(
-              selected: i == viewGroupNotifier.viewIndex,
-              title: Text(Utils.translate(item.label ?? '', context)),
-              leading:
-                  ensemble.Icon(item.icon ?? '', library: item.iconLibrary),
-              horizontalTitleGap: 0,
-              onTap: () {
-                //close the drawer
-                Navigator.maybePop(context);
-                viewGroupNotifier.updatePage(i);
-              },
-            );
-          }));
-    }
+    // Filter menu items based on visibility conditions
+    List<MenuItem> visibleItems =
+        Menu.getVisibleMenuItems(_scopeManager.dataContext, menu.menuItems);
+
     return Drawer(
       backgroundColor: Utils.getColor(menu.runtimeStyles?['backgroundColor']),
-      child: ListView(
-        children: navItems,
+      child: Column(
+        children: [
+          // Optional header section at the top of drawer
+          if (menu.headerModel != null)
+            _scopeManager.buildWidget(menu.headerModel!),
+
+          // Main scrollable menu content wrapped in Expanded
+          Expanded(
+            child: ListenableBuilder(
+                listenable: viewGroupNotifier,
+                builder: (context, _) {
+                  List<Widget> navItems = [];
+
+                  for (int i = 0; i < visibleItems.length; i++) {
+                    MenuItem item = visibleItems[i];
+                    final isSelected = i == viewGroupNotifier.viewIndex;
+                    final customIcon = _buildCustomWidget(item);
+                    final customActiveIcon =
+                        _buildCustomWidget(item, isActive: true);
+
+                    // Determine if using custom widgets or default ListTile
+                    final isCustom =
+                        customIcon != null || customActiveIcon != null;
+                    final label = isCustom
+                        ? ''
+                        : Utils.translate(item.label ?? '', context);
+
+                    // Handler for menu item taps
+                    void handleTap() {
+                      // Skip if item is not clickable
+                      if (!item.isClickable) return;
+
+                      // Always close drawer when item is tapped
+                      Navigator.maybePop(context);
+                      if (item.onTap != null) {
+                        ScreenController().executeActionWithScope(context,
+                            _scopeManager, EnsembleAction.from(item.onTap)!);
+                      }
+
+                      // Switch screens only if enabled and not already selected
+                      if (item.switchScreen &&
+                          viewGroupNotifier.viewIndex != i) {
+                        viewGroupNotifier.updatePage(i);
+                      }
+                    }
+
+                    Widget menuItem;
+                    if (isCustom) {
+                      // Choose between active and normal custom widget based on selection
+                      final displayWidget = isSelected
+                          ? (customActiveIcon ??
+                              customIcon!) // Fallback to normal if active not provided
+                          : customIcon!;
+
+                      // Wrap in InkWell only if clickable
+                      menuItem = item.isClickable
+                          ? InkWell(onTap: handleTap, child: displayWidget)
+                          : displayWidget;
+                    } else {
+                      // Default ListTile implementation
+                      menuItem = ListTile(
+                        enabled: item.isClickable,
+                        selected: isSelected,
+                        title: Text(label),
+                        // Use active icon when selected, fallback to normal icon
+                        leading: ensemble.Icon(
+                            isSelected
+                                ? (item.activeIcon ?? item.icon)
+                                : (item.icon ?? ''),
+                            library: item.iconLibrary),
+                        horizontalTitleGap: 0,
+                        onTap: item.isClickable ? handleTap : null,
+                      );
+                    }
+                    navItems.add(menuItem);
+                  }
+                  return ListView(children: navItems);
+                }),
+          ),
+
+          // Optional footer section at bottom of drawer
+          if (menu.footerModel != null)
+            _scopeManager.buildWidget(menu.footerModel!),
+        ],
       ),
     );
   }
 
+  Widget? _buildCustomWidget(MenuItem item, {bool isActive = false}) {
+    Widget? iconWidget;
+    dynamic customWidgetModel =
+        isActive ? item.customActiveWidget : item.customWidget;
+    if (customWidgetModel != null) {
+      iconWidget = _scopeManager.buildWidget(customWidgetModel);
+    }
+    return iconWidget;
+  }
+
   /// TODO: can't do this anymore without Conditional widget
   /// get the menu mode depending on user spec + device types / screen resolutions
 // MenuDisplay _getPreferredMenuDisplay(Menu menu) {
diff --git a/modules/ensemble/lib/page_model.dart b/modules/ensemble/lib/page_model.dart
