feat(admin-ui): introduce view layer and refactor admin UI to use view components, consolidate demos, and update interfaces

2025-12-27 12:33:14 +00:00
parent 87ac6e506f
commit c5632dae77
18 changed files with 875 additions and 754 deletions
--- a/ts_web/views/upladmin-config-view/upladmin-config-view.ts
+++ b/ts_web/views/upladmin-config-view/upladmin-config-view.ts
@@ -0,0 +1,124 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import type { DeesAppuiBase } from '@design.estate/dees-catalog';
+
+// View lifecycle interfaces (defined locally as they're not exported from dees-catalog)
+interface IViewActivationContext {
+  appui: DeesAppuiBase;
+  viewId: string;
+  params?: Record<string, string>;
+}
+
+interface IViewLifecycle {
+  onActivate?: (context: IViewActivationContext) => void | Promise<void>;
+  onDeactivate?: () => void | Promise<void>;
+}
+import { adminState } from '../../services/admin-state.js';
+import '../../elements/upladmin-statuspage-config/upladmin-statuspage-config.js';
+
+type TConfigSection = 'branding' | 'urls' | 'behavior' | 'advanced';
+
+@customElement('upladmin-config-view')
+export class UpladminConfigView extends DeesElement implements IViewLifecycle {
+  @state()
+  accessor activeSection: TConfigSection = 'branding';
+
+  @state()
+  accessor loading: boolean = false;
+
+  private appuiRef: DeesAppuiBase | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+    `,
+  ];
+
+  async onActivate(context: IViewActivationContext): Promise<void> {
+    this.appuiRef = context.appui;
+
+    // Check route params for section
+    if (context.params?.section) {
+      const section = context.params.section as TConfigSection;
+      if (['branding', 'urls', 'behavior', 'advanced'].includes(section)) {
+        this.activeSection = section;
+      }
+    }
+
+    // Set secondary menu for configuration sections
+    this.updateSecondaryMenu();
+
+    // No content tabs for config
+    context.appui.setContentTabs([]);
+  }
+
+  private updateSecondaryMenu(): void {
+    if (!this.appuiRef) return;
+
+    this.appuiRef.setSecondaryMenu({
+      heading: 'Configuration',
+      groups: [
+        {
+          name: 'Settings',
+          iconName: 'lucide:settings',
+          items: [
+            {
+              key: 'branding',
+              iconName: 'lucide:palette',
+              action: () => this.setSection('branding'),
+            },
+            {
+              key: 'urls',
+              iconName: 'lucide:link',
+              action: () => this.setSection('urls'),
+            },
+            {
+              key: 'behavior',
+              iconName: 'lucide:sliders',
+              action: () => this.setSection('behavior'),
+            },
+            {
+              key: 'advanced',
+              iconName: 'lucide:wrench',
+              action: () => this.setSection('advanced'),
+            },
+          ],
+        },
+      ],
+    });
+
+    // Select current section
+    this.appuiRef.setSecondaryMenuSelection(this.activeSection);
+  }
+
+  private setSection(section: TConfigSection): void {
+    this.activeSection = section;
+    this.appuiRef?.setSecondaryMenuSelection(section);
+  }
+
+  private handleConfigSave = (e: CustomEvent): void => {
+    console.log('Config saved:', e.detail);
+    // In a real implementation, this would save to the backend
+  };
+
+  render() {
+    return html`
+      <upladmin-statuspage-config
+        .config=${adminState.config || {}}
+        .activeSection=${this.activeSection}
+        .loading=${this.loading}
+        @configSave=${this.handleConfigSave}
+      ></upladmin-statuspage-config>
+    `;
+  }
+}