@dragonworks/ngx-dashboard 20.0.5 → 20.0.6

package/src/lib/dashboard-viewer/__tests__/dashboard-viewer.component.spec.ts

@@ -0,0 +1,258 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, signal } from '@angular/core';
+import { DashboardViewerComponent } from '../dashboard-viewer.component';
+import { DashboardStore } from '../../store/dashboard-store';
+import { CellIdUtils, WidgetIdUtils, CellData, WidgetFactory, Widget } from '../../models';
+
+// Mock test widget component
+@Component({
+  selector: 'lib-test-widget',
+  template: '<div class="test-widget">Test Widget: {{state().value}}</div>',
+  standalone: true,
+})
+class TestWidgetComponent implements Widget {
+  private state = signal<any>({ value: 'initial' });
+
+  dashboardGetState(): any {
+    return this.state();
+  }
+
+  dashboardSetState(state: any): void {
+    this.state.set(state);
+  }
+
+  dashboardEditState(): void {
+    // Mock edit state method
+  }
+}
+
+describe('DashboardViewerComponent - Integration Tests', () => {
+  let component: DashboardViewerComponent;
+  let fixture: ComponentFixture<DashboardViewerComponent>;
+  let store: InstanceType<typeof DashboardStore>;
+
+  const mockWidgetFactory: WidgetFactory = {
+    widgetTypeid: 'test-widget',
+    name: 'Test Widget',
+    description: 'A test widget for testing',
+    svgIcon: '<svg></svg>',
+    createInstance: (container) => {
+      const componentRef = container.createComponent(TestWidgetComponent);
+      return componentRef;
+    }
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardViewerComponent],
+      providers: [DashboardStore]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DashboardViewerComponent);
+    component = fixture.componentInstance;
+    store = TestBed.inject(DashboardStore);
+    
+    // Set required inputs
+    fixture.componentRef.setInput('rows', 8);
+    fixture.componentRef.setInput('columns', 12);
+    fixture.componentRef.setInput('gutterSize', '1em');
+  });
+
+  describe('Complete Widget Rendering Workflow', () => {
+    it('should render widgets from store and export dashboard with current states', () => {
+      // SCENARIO: User loads dashboard with widgets, sees them rendered, exports dashboard
+      
+      // Setup: Add widgets to store
+      const widget1: CellData = {
+        widgetId: WidgetIdUtils.generate(),
+        cellId: CellIdUtils.create(1, 1),
+        row: 1,
+        col: 1,
+        rowSpan: 1,
+        colSpan: 2,
+        flat: false,
+        widgetFactory: mockWidgetFactory,
+        widgetState: { value: 'Widget 1' }
+      };
+
+      const widget2: CellData = {
+        widgetId: WidgetIdUtils.generate(),
+        cellId: CellIdUtils.create(2, 3),
+        row: 2,
+        col: 3,
+        rowSpan: 2,
+        colSpan: 1,
+        flat: true,
+        widgetFactory: mockWidgetFactory,
+        widgetState: { value: 'Widget 2' }
+      };
+
+      // Action: Add widgets to store
+      store.addWidget(widget1);
+      store.addWidget(widget2);
+      fixture.detectChanges();
+
+      // Verify: Widgets are rendered
+      const cellElements = fixture.nativeElement.querySelectorAll('lib-cell');
+      expect(cellElements.length).toBe(2);
+      expect(cellElements[0]).toBeTruthy();
+      expect(cellElements[1]).toBeTruthy();
+
+      // Verify: Store integration works
+      expect(component.cells().length).toBe(2);
+      expect(component.cells()[0]).toEqual(widget1);
+      expect(component.cells()[1]).toEqual(widget2);
+
+      // Action: Export dashboard
+      const exported = component.exportDashboard();
+
+      // Verify: Export contains dashboard structure
+      expect(exported.version).toBe('1.0.0');
+      expect(exported.rows).toBe(8);
+      expect(exported.columns).toBe(12);
+      expect(exported.gutterSize).toBe('1em');
+      expect(exported.cells.length).toBe(2);
+    });
+  });
+
+  describe('Grid Configuration and Layout', () => {
+    it('should apply grid configuration and update CSS variables when inputs change', () => {
+      // SCENARIO: User changes grid configuration and sees layout update
+      
+      // Initial setup
+      fixture.detectChanges();
+      
+      // Verify: Initial CSS variables are set
+      const hostElement = fixture.nativeElement;
+      let computedStyle = getComputedStyle(hostElement);
+      expect(computedStyle.getPropertyValue('--rows')).toBe('8');
+      expect(computedStyle.getPropertyValue('--columns')).toBe('12');
+      expect(computedStyle.getPropertyValue('--gutter-size')).toBe('1em');
+      expect(computedStyle.getPropertyValue('--gutters')).toBe('13'); // columns + 1
+      
+      // Action: Change grid configuration
+      fixture.componentRef.setInput('rows', 6);
+      fixture.componentRef.setInput('columns', 10);
+      fixture.componentRef.setInput('gutterSize', '2em');
+      fixture.detectChanges();
+      
+      // Verify: CSS variables updated
+      computedStyle = getComputedStyle(hostElement);
+      expect(computedStyle.getPropertyValue('--rows')).toBe('6');
+      expect(computedStyle.getPropertyValue('--columns')).toBe('10');
+      expect(computedStyle.getPropertyValue('--gutter-size')).toBe('2em');
+      expect(computedStyle.getPropertyValue('--gutters')).toBe('11'); // columns + 1
+      
+      // Verify: Store is updated
+      expect(store.rows()).toBe(6);
+      expect(store.columns()).toBe(10);
+      expect(store.gutterSize()).toBe('2em');
+    });
+  });
+
+  describe('Reactive Store Updates', () => {
+    it('should reactively update when store changes', () => {
+      // SCENARIO: User performs actions that modify store, sees immediate UI updates
+      
+      // Initial state: No widgets
+      fixture.detectChanges();
+      expect(fixture.nativeElement.querySelectorAll('lib-cell').length).toBe(0);
+      
+      // Action: Add widget to store
+      const widget: CellData = {
+        widgetId: WidgetIdUtils.generate(),
+        cellId: CellIdUtils.create(1, 1),
+        row: 1,
+        col: 1,
+        rowSpan: 1,
+        colSpan: 1,
+        flat: false,
+        widgetFactory: mockWidgetFactory,
+        widgetState: { value: 'Dynamic Widget' }
+      };
+      
+      store.addWidget(widget);
+      fixture.detectChanges();
+      
+      // Verify: Widget appears in UI
+      expect(fixture.nativeElement.querySelectorAll('lib-cell').length).toBe(1);
+      
+      // Action: Remove widget from store
+      store.removeWidget(widget.widgetId);
+      fixture.detectChanges();
+      
+      // Verify: Widget disappears from UI
+      expect(fixture.nativeElement.querySelectorAll('lib-cell').length).toBe(0);
+    });
+  });
+
+  describe('Empty State Handling', () => {
+    it('should handle empty dashboard gracefully', () => {
+      // SCENARIO: User loads empty dashboard or clears all widgets
+      
+      // Action: Initialize with empty dashboard
+      fixture.detectChanges();
+      
+      // Verify: No widgets rendered
+      expect(fixture.nativeElement.querySelectorAll('lib-cell').length).toBe(0);
+      expect(component.cells().length).toBe(0);
+      
+      // Verify: Export works with empty state
+      const exported = component.exportDashboard();
+      expect(exported.cells.length).toBe(0);
+      expect(exported.version).toBe('1.0.0');
+      expect(exported.rows).toBe(8);
+      expect(exported.columns).toBe(12);
+      
+      // Verify: Widget state collection works with no widgets
+      const widgetStates = component.getCurrentWidgetStates();
+      expect(widgetStates.size).toBe(0);
+      expect(widgetStates instanceof Map).toBe(true);
+    });
+  });
+
+  describe('Export Functionality with Live Widget States', () => {
+    it('should export dashboard with live widget states from component instances', () => {
+      // SCENARIO: User modifies widget states and exports - should get current states, not store states
+      
+      // Setup: Add widget with initial state
+      const widget: CellData = {
+        widgetId: WidgetIdUtils.generate(),
+        cellId: CellIdUtils.create(1, 1),
+        row: 1,
+        col: 1,
+        rowSpan: 1,
+        colSpan: 1,
+        flat: false,
+        widgetFactory: mockWidgetFactory,
+        widgetState: { value: 'Initial State' }
+      };
+      
+      store.addWidget(widget);
+      fixture.detectChanges();
+      
+      // Verify: Widget is rendered
+      const cellElements = fixture.nativeElement.querySelectorAll('lib-cell');
+      expect(cellElements.length).toBe(1);
+      
+      // Action: Export dashboard (should include live states)
+      const exported = component.exportDashboard();
+      
+      // Verify: Export structure is correct
+      expect(exported.version).toBe('1.0.0');
+      expect(exported.cells.length).toBe(1);
+      expect(exported.cells[0].widgetTypeid).toBe('test-widget');
+      expect(exported.cells[0].row).toBe(1);
+      expect(exported.cells[0].col).toBe(1);
+      
+      // Verify: getCurrentWidgetStates returns proper map structure
+      const widgetStates = component.getCurrentWidgetStates();
+      expect(widgetStates instanceof Map).toBe(true);
+      
+      // The actual state collection depends on cell components being properly rendered
+      // This tests that the method exists and returns the right type with WidgetId keys
+      const widgetIdKey = WidgetIdUtils.toString(widget.widgetId);
+      expect(typeof widgetIdKey).toBe('string');
+    });
+  });
+});

package/src/lib/dashboard-viewer/dashboard-viewer.component.html

@@ -0,0 +1,20 @@
+<!-- Dashboard viewer - read-only grid -->
+<div class="grid top-grid">
+  @for (cell of cells(); track cell.widgetId) {
+    <lib-cell
+      class="grid-cell"
+      [widgetId]="cell.widgetId"
+      [cellId]="cell.cellId"
+      [isEditMode]="false"
+      [draggable]="false"
+      [row]="cell.row"
+      [column]="cell.col"
+      [rowSpan]="cell.rowSpan"
+      [colSpan]="cell.colSpan"
+      [flat]="cell.flat"
+      [widgetFactory]="cell.widgetFactory"
+      [widgetState]="cell.widgetState"
+    >
+    </lib-cell>
+  }
+</div>

package/src/lib/dashboard-viewer/dashboard-viewer.component.scss

@@ -0,0 +1,50 @@
+/* dashboard-viewer.component.scss */
+@use "../styles/dashboard-grid-vars" as *;
+
+:host {
+  @include dashboard-grid-vars;
+
+  display: block;
+  container-type: inline-size;
+  box-sizing: border-box;
+  aspect-ratio: var(--columns) / var(--rows);
+  width: 100%;
+  height: auto;
+
+  background-color: var(--mat-sys-surface-container);
+}
+
+.grid {
+  display: grid;
+  gap: var(--gutter-size);
+  padding: var(--gutter-size);
+
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  /* ←―― single-source-of-truth for the cell geometry */
+  grid-template-columns: repeat(var(--columns), var(--cell-size));
+  grid-template-rows: repeat(var(--rows), var(--cell-size));
+
+  // background-color: var(--mat-sys-surface);
+}
+
+/* Interaction rules */
+.grid-cell {
+  pointer-events: none;
+}
+
+.grid-cell:not(.flat) {
+  pointer-events: auto;
+  cursor: default;
+
+  .content-area {
+    pointer-events: none;
+  }
+}
+
+.top-grid {
+  z-index: 2;
+  pointer-events: none;
+}

package/src/lib/dashboard-viewer/dashboard-viewer.component.ts

@@ -0,0 +1,70 @@
+import { Component, computed, effect, inject, input, viewChildren, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CellComponent } from '../cell/cell.component';
+import { DashboardStore } from '../store/dashboard-store';
+import { CellIdUtils, WidgetIdUtils } from '../models';
+
+@Component({
+  selector: 'ngx-dashboard-viewer',
+  standalone: true,
+  imports: [CellComponent, CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './dashboard-viewer.component.html',
+  styleUrl: './dashboard-viewer.component.scss',
+  host: {
+    '[style.--rows]': 'rows()',
+    '[style.--columns]': 'columns()',
+    '[style.--gutter-size]': 'gutterSize()',
+    '[style.--gutters]': 'gutters()',
+  },
+})
+export class DashboardViewerComponent {
+  #store = inject(DashboardStore);
+  cellComponents = viewChildren(CellComponent);
+
+  rows = input.required<number>();
+  columns = input.required<number>();
+  gutterSize = input<string>('1em');
+  gutters = computed(() => this.columns() + 1);
+
+  // store signals - read-only
+  cells = this.#store.cells;
+
+  constructor() {
+    // Sync grid configuration with store when inputs change
+    effect(() => {
+      this.#store.setGridConfig({
+        rows: this.rows(),
+        columns: this.columns(),
+        gutterSize: this.gutterSize(),
+      });
+    });
+  }
+
+  /**
+   * Get current widget states from all cell components.
+   * Used during dashboard export to get live widget states.
+   */
+  getCurrentWidgetStates(): Map<string, unknown> {
+    const stateMap = new Map<string, unknown>();
+    
+    const cells = this.cellComponents();
+    for (const cell of cells) {
+      const cellId = cell.cellId();
+      const currentState = cell.getCurrentWidgetState();
+      if (currentState !== undefined) {
+        stateMap.set(CellIdUtils.toString(cellId), currentState);
+      }
+    }
+    
+    return stateMap;
+  }
+
+  /**
+   * Export dashboard with live widget states from current component instances.
+   * This ensures the most up-to-date widget states are captured.
+   */
+  exportDashboard() {
+    return this.#store.exportDashboard(() => this.getCurrentWidgetStates());
+  }
+}