@dragonworks/ngx-dashboard 20.0.6 → 20.1.0

package/src/lib/store/__tests__/dashboard-store-widget-state-preservation.spec.ts

@@ -1,369 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { Component, signal, ViewContainerRef } from '@angular/core';
-import { DashboardService } from '../../services/dashboard.service';
-import { DashboardStore } from '../dashboard-store';
-import { CellIdUtils, WidgetIdUtils, CellData, WidgetFactory, DashboardDataDto, Widget, WidgetMetadata } from '../../models';
-
-// Mock widget with changeable state to test state preservation
-interface TestWidgetState {
-  value: string;
-  count: number;
-}
-
-@Component({
-  selector: 'test-widget',
-  template: '<div>{{ state().value }} - {{ state().count }}</div>',
-})
-class TestWidgetComponent implements Widget {
-  static metadata: WidgetMetadata = {
-    widgetTypeid: 'test-widget',
-    name: 'Test Widget',
-    description: 'A test widget',
-    svgIcon: '<svg><rect width="10" height="10"/></svg>',
-  };
-
-  state = signal<TestWidgetState>({
-    value: 'initial',
-    count: 0,
-  });
-
-  dashboardSetState(state?: unknown) {
-    if (state) {
-      this.state.update((current) => ({
-        ...current,
-        ...(state as TestWidgetState),
-      }));
-    }
-  }
-
-  dashboardGetState(): TestWidgetState {
-    return { ...this.state() };
-  }
-
-  // Simulate widget state changes during runtime
-  updateState(newValue: string, newCount: number) {
-    this.state.set({ value: newValue, count: newCount });
-  }
-}
-
-describe('DashboardStore - Widget State Preservation Tests', () => {
-  let store: InstanceType<typeof DashboardStore>;
-  let mockWidgetFactory: WidgetFactory;
-  let mockDashboardService: jasmine.SpyObj<DashboardService>;
-  let testWidgetComponent: TestWidgetComponent;
-
-  beforeEach(() => {
-    const dashboardServiceSpy = jasmine.createSpyObj('DashboardService', ['getFactory']);
-    
-    TestBed.configureTestingModule({
-      providers: [
-        DashboardStore,
-        { provide: DashboardService, useValue: dashboardServiceSpy }
-      ]
-    });
-    
-    store = TestBed.inject(DashboardStore);
-    mockDashboardService = TestBed.inject(DashboardService) as jasmine.SpyObj<DashboardService>;
-    store.setGridConfig({ rows: 8, columns: 12 });
-    
-    // Create a real widget instance for testing
-    testWidgetComponent = new TestWidgetComponent();
-    
-    mockWidgetFactory = {
-      widgetTypeid: 'test-widget',
-      createInstance: jasmine.createSpy('createInstance').and.returnValue({
-        instance: testWidgetComponent,
-        destroy: jasmine.createSpy('destroy')
-      }),
-      createComponent: jasmine.createSpy('createComponent')
-    } as any;
-
-    mockDashboardService.getFactory.and.returnValue(mockWidgetFactory);
-  });
-
-  describe('Widget state preservation during export', () => {
-    it('should preserve initial widget state when no live changes made', () => {
-      const initialState: TestWidgetState = { value: 'initial', count: 0 };
-      
-      const cell: CellData = {
-        widgetId: WidgetIdUtils.generate(),
-        cellId: CellIdUtils.create(2, 3),
-        row: 2,
-        col: 3,
-        rowSpan: 1,
-        colSpan: 1,
-        widgetFactory: mockWidgetFactory,
-        widgetState: initialState,
-      };
-
-      store.addWidget(cell);
-
-      // Test export without live state callback (backward compatibility)
-      const exported = store.exportDashboard();
-      
-      expect(exported.cells.length).toBe(1);
-      expect(exported.cells[0].widgetState).toEqual(initialState);
-    });
-
-    it('should use live widget state when getCurrentWidgetStates callback is provided', () => {
-      const initialState: TestWidgetState = { value: 'initial', count: 0 };
-      const liveState: TestWidgetState = { value: 'updated', count: 5 };
-      
-      const cell: CellData = {
-        widgetId: WidgetIdUtils.generate(),
-        cellId: CellIdUtils.create(2, 3),
-        row: 2,
-        col: 3,
-        rowSpan: 1,
-        colSpan: 1,
-        widgetFactory: mockWidgetFactory,
-        widgetState: initialState,
-      };
-
-      store.addWidget(cell);
-
-      // Simulate widget state change after initial creation
-      testWidgetComponent.updateState('updated', 5);
-
-      // Mock the live widget state collection that would come from CellComponent
-      const liveWidgetStates = new Map<string, unknown>();
-      liveWidgetStates.set('2-3', liveState);
-
-      const exported = store.exportDashboard(() => liveWidgetStates);
-      
-      expect(exported.cells.length).toBe(1);
-      expect(exported.cells[0].widgetState).toEqual(liveState);
-      expect(exported.cells[0].widgetState).not.toEqual(initialState);
-    });
-
-    it('should fall back to stored state when live state is unavailable', () => {
-      const storedState: TestWidgetState = { value: 'stored', count: 2 };
-      
-      const cell: CellData = {
-        widgetId: WidgetIdUtils.generate(),
-        cellId: CellIdUtils.create(4, 5),
-        row: 4,
-        col: 5,
-        rowSpan: 1,
-        colSpan: 1,
-        widgetFactory: mockWidgetFactory,
-        widgetState: storedState,
-      };
-
-      store.addWidget(cell);
-
-      // Mock live widget states that don't include this cell
-      const liveWidgetStates = new Map<string, unknown>();
-      // Intentionally not adding state for cell '4-5'
-
-      const exported = store.exportDashboard(() => liveWidgetStates);
-      
-      expect(exported.cells.length).toBe(1);
-      expect(exported.cells[0].widgetState).toEqual(storedState);
-    });
-
-    it('should handle mixed scenario with some live and some stored states', () => {
-      const cell1: CellData = {
-        widgetId: WidgetIdUtils.generate(),
-        cellId: CellIdUtils.create(1, 1),
-        row: 1,
-        col: 1,
-        rowSpan: 1,
-        colSpan: 1,
-        widgetFactory: mockWidgetFactory,
-        widgetState: { value: 'stored1', count: 1 },
-      };
-
-      const cell2: CellData = {
-        widgetId: WidgetIdUtils.generate(),
-        cellId: CellIdUtils.create(2, 2),
-        row: 2,
-        col: 2,
-        rowSpan: 1,
-        colSpan: 1,
-        widgetFactory: mockWidgetFactory,
-        widgetState: { value: 'stored2', count: 2 },
-      };
-
-      store.addWidget(cell1);
-      store.addWidget(cell2);
-
-      // Only provide live state for first cell
-      const liveWidgetStates = new Map<string, unknown>();
-      liveWidgetStates.set('1-1', { value: 'live1', count: 10 });
-
-      const exported = store.exportDashboard(() => liveWidgetStates);
-      
-      expect(exported.cells.length).toBe(2);
-      
-      const cell1Export = exported.cells.find(c => c.row === 1 && c.col === 1);
-      const cell2Export = exported.cells.find(c => c.row === 2 && c.col === 2);
-      
-      expect(cell1Export?.widgetState).toEqual({ value: 'live1', count: 10 });
-      expect(cell2Export?.widgetState).toEqual({ value: 'stored2', count: 2 });
-    });
-
-    it('should preserve complex widget states with nested objects', () => {
-      const complexState = {
-        value: 'complex',
-        count: 42,
-        config: {
-          nested: {
-            prop1: 'value1',
-            prop2: ['array', 'values'],
-            prop3: { deep: true }
-          }
-        }
-      };
-      
-      const cell: CellData = {
-        widgetId: WidgetIdUtils.generate(),
-        cellId: CellIdUtils.create(3, 3),
-        row: 3,
-        col: 3,
-        rowSpan: 1,
-        colSpan: 1,
-        widgetFactory: mockWidgetFactory,
-        widgetState: complexState,
-      };
-
-      store.addWidget(cell);
-
-      const liveWidgetStates = new Map<string, unknown>();
-      liveWidgetStates.set('3-3', complexState);
-
-      const exported = store.exportDashboard(() => liveWidgetStates);
-      
-      expect(exported.cells.length).toBe(1);
-      expect(exported.cells[0].widgetState).toEqual(complexState);
-    });
-
-    it('should handle undefined live state gracefully', () => {
-      const storedState: TestWidgetState = { value: 'stored', count: 3 };
-      
-      const cell: CellData = {
-        widgetId: WidgetIdUtils.generate(),
-        cellId: CellIdUtils.create(5, 6),
-        row: 5,
-        col: 6,
-        rowSpan: 1,
-        colSpan: 1,
-        widgetFactory: mockWidgetFactory,
-        widgetState: storedState,
-      };
-
-      store.addWidget(cell);
-
-      const liveWidgetStates = new Map<string, unknown>();
-      liveWidgetStates.set('5-6', undefined); // Explicitly set to undefined
-
-      const exported = store.exportDashboard(() => liveWidgetStates);
-      
-      expect(exported.cells.length).toBe(1);
-      expect(exported.cells[0].widgetState).toEqual(storedState);
-    });
-
-    it('should export state correctly after multiple widget updates', () => {
-      const cell: CellData = {
-        widgetId: WidgetIdUtils.generate(),
-        cellId: CellIdUtils.create(1, 2),
-        row: 1,
-        col: 2,
-        rowSpan: 1,
-        colSpan: 1,
-        widgetFactory: mockWidgetFactory,
-        widgetState: { value: 'initial', count: 0 },
-      };
-
-      store.addWidget(cell);
-
-      // Simulate multiple widget state changes
-      testWidgetComponent.updateState('first-update', 1);
-      testWidgetComponent.updateState('second-update', 2);
-      testWidgetComponent.updateState('final-state', 99);
-
-      const finalState = testWidgetComponent.dashboardGetState();
-      const liveWidgetStates = new Map<string, unknown>();
-      liveWidgetStates.set('1-2', finalState);
-
-      const exported = store.exportDashboard(() => liveWidgetStates);
-      
-      expect(exported.cells.length).toBe(1);
-      expect(exported.cells[0].widgetState).toEqual({
-        value: 'final-state',
-        count: 99
-      });
-    });
-  });
-
-  describe('Round-trip export/import with widget states', () => {
-    it('should preserve widget state through export/import cycle', () => {
-      const originalState: TestWidgetState = { value: 'original', count: 42 };
-      
-      const cell: CellData = {
-        widgetId: WidgetIdUtils.generate(),
-        cellId: CellIdUtils.create(2, 3),
-        row: 2,
-        col: 3,
-        rowSpan: 1,
-        colSpan: 1,
-        widgetFactory: mockWidgetFactory,
-        widgetState: originalState,
-      };
-
-      store.addWidget(cell);
-
-      // Export dashboard
-      const exported = store.exportDashboard();
-      
-      // Clear dashboard
-      store.clearDashboard();
-      expect(store.cells().length).toBe(0);
-
-      // Import dashboard
-      store.loadDashboard(exported);
-      
-      expect(store.cells().length).toBe(1);
-      const importedCell = store.cells()[0];
-      expect(importedCell.widgetState).toEqual(originalState);
-      expect(importedCell.row).toBe(2);
-      expect(importedCell.col).toBe(3);
-    });
-
-    it('should preserve live widget state through export/import cycle', () => {
-      const initialState: TestWidgetState = { value: 'initial', count: 0 };
-      const liveState: TestWidgetState = { value: 'live-updated', count: 100 };
-      
-      const cell: CellData = {
-        widgetId: WidgetIdUtils.generate(),
-        cellId: CellIdUtils.create(1, 1),
-        row: 1,
-        col: 1,
-        rowSpan: 1,
-        colSpan: 1,
-        widgetFactory: mockWidgetFactory,
-        widgetState: initialState,
-      };
-
-      store.addWidget(cell);
-
-      // Simulate live widget state
-      const liveWidgetStates = new Map<string, unknown>();
-      liveWidgetStates.set('1-1', liveState);
-
-      // Export with live state
-      const exported = store.exportDashboard(() => liveWidgetStates);
-      
-      // Verify exported state is the live state
-      expect(exported.cells[0].widgetState).toEqual(liveState);
-
-      // Clear and re-import
-      store.clearDashboard();
-      store.loadDashboard(exported);
-      
-      // Verify imported state matches the live state that was exported
-      const importedCell = store.cells()[0];
-      expect(importedCell.widgetState).toEqual(liveState);
-    });
-  });
-});

package/src/lib/store/dashboard-store.ts

@@ -1,239 +0,0 @@
-import {
-  signalStore,
-  withProps,
-  withState,
-  withComputed,
-  withMethods,
-  patchState,
-} from '@ngrx/signals';
-import { DashboardService } from '../services/dashboard.service';
-import { inject, computed } from '@angular/core';
-import { calculateCollisionInfo } from './features/utils/collision.utils';
-import {
-  CellId,
-  CellIdUtils,
-  CellData,
-  DragData,
-  DashboardDataDto,
-  WidgetId,
-  WidgetIdUtils,
-} from '../models';
-import { withGridConfig } from './features/grid-config.feature';
-import { withWidgetManagement } from './features/widget-management.feature';
-import { withDragDrop } from './features/drag-drop.feature';
-import { withResize, ResizePreviewUtils } from './features/resize.feature';
-
-type DashboardState = {
-  dashboardId: string;
-};
-
-const initialState: DashboardState = {
-  dashboardId: '',
-};
-
-export const DashboardStore = signalStore(
-  withState(initialState),
-  withProps(() => ({
-    dashboardService: inject(DashboardService),
-  })),
-  withGridConfig(),
-  withWidgetManagement(),
-  withResize(),
-  withDragDrop(),
-
-  // Cross-feature computed properties (need access to multiple features)
-  withComputed((store) => ({
-    // Invalid zones (collision detection)
-    invalidHighlightMap: computed(() => {
-      const collisionInfo = calculateCollisionInfo(
-        store.dragData(),
-        store.hoveredDropZone(),
-        store.cells(),
-        store.rows(),
-        store.columns()
-      );
-
-      return new Set(collisionInfo.invalidCells);
-    }),
-
-    // Check if placement would be valid (for drop validation)
-    isValidPlacement: computed(() => {
-      const collisionInfo = calculateCollisionInfo(
-        store.dragData(),
-        store.hoveredDropZone(),
-        store.cells(),
-        store.rows(),
-        store.columns()
-      );
-
-      return !collisionInfo.hasCollisions && !collisionInfo.outOfBounds;
-    }),
-  })),
-
-  // Cross-feature methods (need access to multiple features)
-  withMethods((store) => ({
-    // DROP HANDLING (delegate to drag-drop feature with dependency injection)
-    handleDrop(
-      dragData: DragData,
-      targetPosition: { row: number; col: number }
-    ): boolean {
-      return store._handleDrop(dragData, targetPosition, {
-        cells: store.cells(),
-        rows: store.rows(),
-        columns: store.columns(),
-        dashboardService: store.dashboardService,
-        createWidget: store.createWidget,
-        updateWidgetPosition: store.updateWidgetPosition,
-      });
-    },
-
-    // RESIZE METHODS (delegate to resize feature with dependency injection)
-    startResize(cellId: CellId) {
-      store._startResize(cellId, {
-        cells: store.cells(),
-      });
-    },
-
-    updateResizePreview(direction: 'horizontal' | 'vertical', delta: number) {
-      store._updateResizePreview(direction, delta, {
-        cells: store.cells(),
-        rows: store.rows(),
-        columns: store.columns(),
-      });
-    },
-
-    endResize(apply: boolean) {
-      store._endResize(apply, {
-        updateWidgetSpan: (cellId: CellId, rowSpan: number, colSpan: number) => {
-          // Adapter: find widget by cellId and update using widgetId
-          const widget = store.cells().find(c => CellIdUtils.equals(c.cellId, cellId));
-          if (widget) {
-            store.updateWidgetSpan(widget.widgetId, rowSpan, colSpan);
-          }
-        }
-      });
-    },
-
-    // EXPORT/IMPORT METHODS (need access to multiple features)
-    exportDashboard(
-      getCurrentWidgetStates?: () => Map<string, unknown>
-    ): DashboardDataDto {
-      // Get live widget states if callback provided, otherwise use stored states
-      const liveWidgetStates =
-        getCurrentWidgetStates?.() || new Map<string, unknown>();
-
-      return {
-        version: '1.0.0',
-        dashboardId: store.dashboardId(),
-        rows: store.rows(),
-        columns: store.columns(),
-        gutterSize: store.gutterSize(),
-        cells: store.cells()
-          .filter((cell) => cell.widgetFactory.widgetTypeid !== '__internal/unknown-widget')
-          .map((cell) => {
-            const cellIdString = CellIdUtils.toString(cell.cellId);
-            const currentState = liveWidgetStates.get(cellIdString);
-
-            return {
-              row: cell.row,
-              col: cell.col,
-              rowSpan: cell.rowSpan,
-              colSpan: cell.colSpan,
-              flat: cell.flat,
-              widgetTypeid: cell.widgetFactory.widgetTypeid,
-              widgetState:
-                currentState !== undefined ? currentState : cell.widgetState,
-            };
-          }),
-      };
-    },
-
-    loadDashboard(data: DashboardDataDto): void {
-      // Import full dashboard data with grid configuration
-      const widgetsById: Record<string, CellData> = {};
-      
-      data.cells.forEach((cellData) => {
-        const factory = store.dashboardService.getFactory(
-          cellData.widgetTypeid
-        );
-
-        const widgetId = WidgetIdUtils.generate();
-        const cell: CellData = {
-          widgetId,
-          cellId: CellIdUtils.create(cellData.row, cellData.col),
-          row: cellData.row,
-          col: cellData.col,
-          rowSpan: cellData.rowSpan,
-          colSpan: cellData.colSpan,
-          flat: cellData.flat,
-          widgetFactory: factory,
-          widgetState: cellData.widgetState,
-        };
-        
-        widgetsById[WidgetIdUtils.toString(widgetId)] = cell;
-      });
-
-      patchState(store, {
-        dashboardId: data.dashboardId,
-        rows: data.rows,
-        columns: data.columns,
-        gutterSize: data.gutterSize,
-        widgetsById,
-      });
-    },
-
-    // INITIALIZATION METHODS
-    initializeFromDto(dashboardData: DashboardDataDto): void {
-      // Inline the loadDashboard logic since it's defined later in the same methods block
-      const widgetsById: Record<string, CellData> = {};
-      
-      dashboardData.cells.forEach((cellData) => {
-        const factory = store.dashboardService.getFactory(
-          cellData.widgetTypeid
-        );
-
-        const widgetId = WidgetIdUtils.generate();
-        const cell: CellData = {
-          widgetId,
-          cellId: CellIdUtils.create(cellData.row, cellData.col),
-          row: cellData.row,
-          col: cellData.col,
-          rowSpan: cellData.rowSpan,
-          colSpan: cellData.colSpan,
-          flat: cellData.flat,
-          widgetFactory: factory,
-          widgetState: cellData.widgetState,
-        };
-        
-        widgetsById[WidgetIdUtils.toString(widgetId)] = cell;
-      });
-
-      patchState(store, {
-        dashboardId: dashboardData.dashboardId,
-        rows: dashboardData.rows,
-        columns: dashboardData.columns,
-        gutterSize: dashboardData.gutterSize,
-        widgetsById,
-      });
-    },
-  })),
-
-  // Cross-feature computed properties that depend on resize + widget data (using utility functions)
-  withComputed((store) => ({
-    // Compute preview cells during resize using utility function
-    resizePreviewCells: computed(() => {
-      return ResizePreviewUtils.computePreviewCells(
-        store.resizeData(),
-        store.cells()
-      );
-    }),
-  })),
-
-  // Second computed block that depends on the first
-  withComputed((store) => ({
-    // Map for resize preview highlighting using utility function
-    resizePreviewMap: computed(() => {
-      return ResizePreviewUtils.computePreviewMap(store.resizePreviewCells());
-    }),
-  }))
-);