feat: add interfaces for secondary menu items with various types and functionalities

2026-01-03 01:24:36 +00:00
parent c41268cd4e
commit 57b323b53c
23 changed files with 1069 additions and 240 deletions
--- a/ts_web/elements/00group-appui/dees-appui/dees-appui.demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.demo.ts
@@ -1,6 +1,7 @@
 import { html, css, DeesElement, customElement, state } from '@design.estate/dees-element';
 import type { DeesAppui } from './dees-appui.js';
 import type { IAppConfig, IViewActivationContext } from '../../interfaces/appconfig.js';
+import type * as interfaces from '../../interfaces/index.js';
 import '@design.estate/dees-wcctools/demotools';

 // Demo view component with lifecycle hooks
@@ -16,7 +17,7 @@ class DemoDashboardView extends DeesElement {
    this.activated = true;
    console.log('Dashboard activated with context:', context);

-    // Set view-specific secondary menu
+    // Set view-specific secondary menu with new item types
    context.appui.setSecondaryMenu({
      heading: 'Dashboard',
      groups: [
@@ -24,17 +25,36 @@ class DemoDashboardView extends DeesElement {
          name: 'Quick Access',
          iconName: 'lucide:zap',
          items: [
-            { key: 'overview', iconName: 'layoutDashboard', action: () => console.log('Overview') },
-            { key: 'recent', iconName: 'clock', badge: 5, action: () => console.log('Recent') },
-          ]
+            { key: 'Overview', iconName: 'layoutDashboard', action: () => console.log('Overview') },
+            { key: 'Recent', iconName: 'clock', badge: 5, action: () => console.log('Recent') },
+            { type: 'divider' },
+            { type: 'action', key: 'Refresh Data', iconName: 'lucide:refreshCw', action: () => alert('Refreshing dashboard data...') },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Filters',
+          iconName: 'lucide:filter',
+          items: [
+            { type: 'header', label: 'Time Range' },
+            { type: 'filter', key: 'Live Updates', iconName: 'lucide:radio', active: true, onToggle: (active) => console.log('Live updates:', active) },
+            { type: 'filter', key: 'Show Archived', iconName: 'lucide:archive', active: false, onToggle: (active) => console.log('Show archived:', active) },
+            { type: 'divider' },
+            { type: 'multiFilter', key: 'Data Sources', iconName: 'lucide:database', options: [
+              { key: 'api', label: 'API Server', checked: true, iconName: 'lucide:server' },
+              { key: 'web', label: 'Web Traffic', checked: true, iconName: 'lucide:globe' },
+              { key: 'mobile', label: 'Mobile App', checked: false, iconName: 'lucide:smartphone' },
+            ], onChange: (keys) => console.log('Data sources:', keys) },
+          ] as interfaces.ISecondaryMenuItem[]
        },
        {
          name: 'Analytics',
          iconName: 'lucide:barChart3',
          items: [
-            { key: 'metrics', iconName: 'activity', action: () => console.log('Metrics') },
-            { key: 'reports', iconName: 'fileText', badge: 'new', badgeVariant: 'success', action: () => console.log('Reports') },
-          ]
+            { key: 'Metrics', iconName: 'activity', action: () => console.log('Metrics') },
+            { key: 'Reports', iconName: 'fileText', badge: 'new', badgeVariant: 'success', action: () => console.log('Reports') },
+            { type: 'divider' },
+            { type: 'link', key: 'Analytics Docs', iconName: 'lucide:externalLink', href: 'https://docs.example.com/analytics' },
+          ] as interfaces.ISecondaryMenuItem[]
        }
      ]
    });
@@ -322,11 +342,22 @@ class DemoProjectsView extends DeesElement {
      groups: [
        {
          name: 'My Projects',
+          iconName: 'lucide:folder',
          items: [
-            { key: 'active', iconName: 'folder', badge: 3, action: () => console.log('Active') },
-            { key: 'archived', iconName: 'archive', action: () => console.log('Archived') },
-            { key: 'shared', iconName: 'users', badge: 2, badgeVariant: 'warning', action: () => console.log('Shared') },
-          ]
+            { key: 'Active', iconName: 'folder', badge: 3, action: () => console.log('Active') },
+            { key: 'Archived', iconName: 'archive', action: () => console.log('Archived') },
+            { key: 'Shared', iconName: 'users', badge: 2, badgeVariant: 'warning', action: () => console.log('Shared') },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Quick Actions',
+          iconName: 'lucide:zap',
+          items: [
+            { type: 'action', key: 'New Project', iconName: 'lucide:folderPlus', action: () => alert('Create new project') },
+            { type: 'action', key: 'Import', iconName: 'lucide:download', action: () => alert('Import project') },
+            { type: 'divider' },
+            { type: 'link', key: 'Templates', iconName: 'lucide:layoutTemplate', href: 'https://templates.example.com' },
+          ] as interfaces.ISecondaryMenuItem[]
        }
      ]
    });
@@ -407,13 +438,40 @@ class DemoTasksView extends DeesElement {
      heading: 'Tasks',
      groups: [
        {
-          name: 'Filters',
+          name: 'Views',
+          iconName: 'lucide:eye',
          items: [
-            { key: 'all', iconName: 'list', badge: 12, action: () => console.log('All') },
-            { key: 'today', iconName: 'calendar', badge: 3, action: () => console.log('Today') },
-            { key: 'upcoming', iconName: 'clock', action: () => console.log('Upcoming') },
-            { key: 'completed', iconName: 'checkCircle', action: () => console.log('Completed') },
-          ]
+            { key: 'All Tasks', iconName: 'list', badge: 12, action: () => console.log('All') },
+            { key: 'Today', iconName: 'calendar', badge: 3, action: () => console.log('Today') },
+            { key: 'Upcoming', iconName: 'clock', action: () => console.log('Upcoming') },
+            { key: 'Completed', iconName: 'checkCircle', action: () => console.log('Completed') },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Filters',
+          iconName: 'lucide:filter',
+          items: [
+            { type: 'header', label: 'Priority' },
+            { type: 'multiFilter', key: 'Priority', iconName: 'lucide:flag', options: [
+              { key: 'high', label: 'High', checked: true, iconName: 'lucide:alertCircle' },
+              { key: 'medium', label: 'Medium', checked: true, iconName: 'lucide:minusCircle' },
+              { key: 'low', label: 'Low', checked: false, iconName: 'lucide:circle' },
+            ], onChange: (keys) => console.log('Priority filter:', keys) },
+            { type: 'divider' },
+            { type: 'header', label: 'Options' },
+            { type: 'filter', key: 'Show Subtasks', iconName: 'lucide:listTree', active: true, onToggle: (active) => console.log('Show subtasks:', active) },
+            { type: 'filter', key: 'Show Completed', iconName: 'lucide:checkSquare', active: false, onToggle: (active) => console.log('Show completed:', active) },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Actions',
+          iconName: 'lucide:zap',
+          items: [
+            { type: 'action', key: 'Add Task', iconName: 'lucide:plus', action: () => alert('Add new task') },
+            { type: 'action', key: 'Import Tasks', iconName: 'lucide:upload', action: () => alert('Import tasks') },
+            { type: 'divider' },
+            { type: 'action', key: 'Clear Completed', iconName: 'lucide:trash2', variant: 'danger', confirmMessage: 'Delete all completed tasks?', action: () => alert('Cleared completed tasks') },
+          ] as interfaces.ISecondaryMenuItem[]
        }
      ]
    });
--- a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
+++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
@@ -98,10 +98,10 @@ export class DeesAppui extends DeesElement {
  accessor secondarymenuHeading: string = '';

  @property({ type: Array })
-  accessor secondarymenuGroups: interfaces.IMenuGroup[] = [];
+  accessor secondarymenuGroups: interfaces.ISecondaryMenuGroup[] = [];

  @property({ type: Object })
-  accessor secondarymenuSelectedItem: interfaces.IMenuItem | undefined = undefined;
+  accessor secondarymenuSelectedItem: interfaces.ISecondaryMenuItemTab | undefined = undefined;

  // Collapse states
  @property({ type: Boolean })
@@ -126,6 +126,13 @@ export class DeesAppui extends DeesElement {
  @property({ type: Number })
  accessor contentTabsAutoHideThreshold: number = 0;

+  // Activity log visibility and count
+  @state()
+  accessor activityLogVisible: boolean = false;
+
+  @state()
+  accessor activityLogCount: number = 0;
+
  // Properties for maincontent
  @property({ type: Array })
  accessor maincontentTabs: interfaces.IMenuItem[] = [];
@@ -175,8 +182,9 @@ export class DeesAppui extends DeesElement {
        height: calc(100% - 40px);
        width: 100%;
        display: grid;
-        grid-template-columns: auto auto 1fr 240px;
+        /* grid-template-columns set dynamically in template */
        grid-template-rows: 1fr;
+        transition: grid-template-columns 0.3s ease;
      }

      /* Z-index layering for proper stacking */
@@ -198,6 +206,19 @@ export class DeesAppui extends DeesElement {
      .maingrid > dees-appui-activitylog {
        position: relative;
        z-index: 1;
+        overflow: hidden;
+        transition: opacity 0.3s ease, transform 0.3s ease;
+      }
+
+      .maingrid > dees-appui-activitylog.hidden {
+        opacity: 0;
+        transform: translateX(20px);
+        pointer-events: none;
+      }
+
+      .maingrid > dees-appui-activitylog.visible {
+        opacity: 1;
+        transform: translateX(0);
      }

      /* View container for dynamically loaded views */
@@ -221,14 +242,18 @@ export class DeesAppui extends DeesElement {
        .user=${this.appbarUser}
        .profileMenuItems=${this.appbarProfileMenuItems}
        .showSearch=${this.appbarShowSearch}
+        .showActivityLogToggle=${true}
+        .activityLogCount=${this.activityLogCount}
+        .activityLogActive=${this.activityLogVisible}
        @menu-select=${(e: CustomEvent) => this.handleAppbarMenuSelect(e)}
        @breadcrumb-navigate=${(e: CustomEvent) => this.handleAppbarBreadcrumbNavigate(e)}
        @search-click=${() => this.handleAppbarSearchClick()}
        @search-query=${(e: CustomEvent) => this.handleAppbarSearchQuery(e)}
        @user-menu-open=${() => this.handleAppbarUserMenuOpen()}
        @profile-menu-select=${(e: CustomEvent) => this.handleAppbarProfileMenuSelect(e)}
+        @activity-toggle=${() => this.toggleActivityLog()}
      ></dees-appui-appbar>
-      <div class="maingrid">
+      <div class="maingrid" style="grid-template-columns: auto auto 1fr ${this.activityLogVisible ? '280px' : '0px'};">
        ${this.mainmenuVisible ? html`
          <dees-appui-mainmenu
            .logoIcon=${this.mainmenuLogoIcon}
@@ -264,7 +289,9 @@ export class DeesAppui extends DeesElement {
          <div class="view-container"></div>
          <slot name="maincontent"></slot>
        </dees-appui-maincontent>
-        <dees-appui-activitylog></dees-appui-activitylog>
+        <dees-appui-activitylog
+          class="${this.activityLogVisible ? 'visible' : 'hidden'}"
+        ></dees-appui-activitylog>
      </div>
    `;
  }
@@ -277,6 +304,13 @@ export class DeesAppui extends DeesElement {
    this.maincontent = this.shadowRoot!.querySelector('dees-appui-maincontent') as DeesAppuiMaincontent;
    this.activitylogElement = this.shadowRoot!.querySelector('dees-appui-activitylog') as DeesAppuiActivitylog;

+    // Subscribe to activity log entry changes for badge count
+    if (this.activitylogElement) {
+      this.activitylogElement.entries$.subscribe((entries) => {
+        this.activityLogCount = entries.length;
+      });
+    }
+
    // Set appui reference in view registry for lifecycle context
    this.viewRegistry.setAppuiRef(this as unknown as interfaces.TDeesAppui);
  }
@@ -534,7 +568,7 @@ export class DeesAppui extends DeesElement {
  /**
   * Set the secondary menu configuration
   */
-  public setSecondaryMenu(config: { heading?: string; groups: interfaces.IMenuGroup[] }): void {
+  public setSecondaryMenu(config: { heading?: string; groups: interfaces.ISecondaryMenuGroup[] }): void {
    if (config.heading !== undefined) {
      this.secondarymenuHeading = config.heading;
    }
@@ -544,7 +578,7 @@ export class DeesAppui extends DeesElement {
  /**
   * Update a specific secondary menu group
   */
-  public updateSecondaryMenuGroup(groupName: string, update: Partial<interfaces.IMenuGroup>): void {
+  public updateSecondaryMenuGroup(groupName: string, update: Partial<interfaces.ISecondaryMenuGroup>): void {
    this.secondarymenuGroups = this.secondarymenuGroups.map(group =>
      group.name === groupName ? { ...group, ...update } : group
    );
@@ -555,7 +589,7 @@ export class DeesAppui extends DeesElement {
   */
  public addSecondaryMenuItem(
    groupName: string,
-    item: interfaces.IMenuGroup['items'][0]
+    item: interfaces.ISecondaryMenuItem
  ): void {
    this.secondarymenuGroups = this.secondarymenuGroups.map(group => {
      if (group.name === groupName) {
@@ -569,13 +603,13 @@ export class DeesAppui extends DeesElement {
  }

  /**
-   * Set the selected secondary menu item by key
+   * Set the selected secondary menu item by key (for tab items only)
   */
  public setSecondaryMenuSelection(itemKey: string): void {
    for (const group of this.secondarymenuGroups) {
-      const item = group.items.find(i => i.key === itemKey);
-      if (item) {
-        this.secondarymenuSelectedItem = item;
+      const item = group.items.find(i => 'key' in i && i.key === itemKey);
+      if (item && (!('type' in item) || item.type === 'tab' || item.type === undefined)) {
+        this.secondarymenuSelectedItem = item as interfaces.ISecondaryMenuItemTab;
        return;
      }
    }
@@ -673,6 +707,27 @@ export class DeesAppui extends DeesElement {
    };
  }

+  /**
+   * Set activity log visibility
+   */
+  public setActivityLogVisible(visible: boolean): void {
+    this.activityLogVisible = visible;
+  }
+
+  /**
+   * Toggle activity log visibility
+   */
+  public toggleActivityLog(): void {
+    this.activityLogVisible = !this.activityLogVisible;
+  }
+
+  /**
+   * Get activity log visibility state
+   */
+  public getActivityLogVisible(): boolean {
+    return this.activityLogVisible;
+  }
+
  // ==========================================
  // PROGRAMMATIC API: NAVIGATION
  // ==========================================