@ogidor/dashboard 1.0.16 → 1.0.18

package/fesm2020/ogidor-dashboard.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, ContentChild, Injectable, Pipe, HostListener, NgModule } from '@angular/core';
+import { Directive, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, ContentChild, InjectionToken, Injectable, Optional, Inject, Pipe, HostListener, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -144,15 +144,23 @@ class CustomGridComponent {
         this.boundMouseUp = this.onMouseUp.bind(this);
     }
     ngOnInit() {
-        this.compactAndApply();
+        this.applyCompactionAndSync();
         this.updateContainerHeight();
         this.zone.runOutsideAngular(() => {
             window.addEventListener('mousemove', this.boundMouseMove);
             window.addEventListener('mouseup', this.boundMouseUp);
         });
     }
-    ngOnChanges(_changes) {
+    ngOnChanges(changes) {
+        if (this.dragging || this.resizing) {
+            this.updateContainerHeight();
+            return;
+        }
+        if (changes['widgets'] || changes['columns']) {
+            this.applyCompactionAndSync();
+        }
         this.updateContainerHeight();
+        this.cdr.markForCheck();
     }
     ngOnDestroy() {
         window.removeEventListener('mousemove', this.boundMouseMove);
@@ -371,15 +379,32 @@ class CustomGridComponent {
     // ── Utilities ──
     compactAndApply() {
         if (!this.widgets?.length)
-            return;
+            return [];
         const compacted = GridEngine.compact(this.widgets.map(w => ({ id: w.id, x: w.x, y: w.y, cols: w.cols, rows: w.rows })), this.columns);
+        const changedWidgets = [];
         for (const rw of compacted) {
             const w = this.widgets.find(ww => ww.id === rw.id);
-            if (w) {
+            if (!w)
+                continue;
+            const changed = w.x !== rw.x || w.y !== rw.y || w.cols !== rw.cols || w.rows !== rw.rows;
+            if (changed) {
                 w.x = rw.x;
                 w.y = rw.y;
+                w.cols = rw.cols;
+                w.rows = rw.rows;
+                changedWidgets.push(w);
             }
         }
+        return changedWidgets;
+    }
+    applyCompactionAndSync() {
+        const changedWidgets = this.compactAndApply();
+        if (!changedWidgets.length)
+            return;
+        for (const widget of changedWidgets) {
+            this.itemChanged.emit(widget);
+        }
+        this.layoutChanged.emit(this.widgets);
     }
     updateContainerHeight() {
         if (!this.widgets?.length) {
@@ -511,14 +536,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: [GridCellDirective, { read: TemplateRef }]
             }] } });
 
+const DASHBOARD_PERSISTENCE = new InjectionToken('DASHBOARD_PERSISTENCE');
+const DASHBOARD_PERSISTENCE_CONTEXT = new InjectionToken('DASHBOARD_PERSISTENCE_CONTEXT');
+class DashboardPersistence {
+}
+class LocalStorageDashboardPersistence {
+    async loadShared(dashboardId) {
+        const raw = localStorage.getItem(this._sharedKey(dashboardId));
+        if (!raw)
+            return null;
+        try {
+            return JSON.parse(raw);
+        }
+        catch (e) {
+            console.error('[Dashboard] bad shared state', e);
+            return null;
+        }
+    }
+    async saveShared(dashboardId, shared) {
+        localStorage.setItem(this._sharedKey(dashboardId), JSON.stringify(shared));
+    }
+    async loadPositions(dashboardId, windowId) {
+        const raw = localStorage.getItem(this._positionsKey(dashboardId, windowId));
+        if (!raw)
+            return null;
+        try {
+            return JSON.parse(raw);
+        }
+        catch (e) {
+            console.error('[Dashboard] bad positions state', e);
+            return null;
+        }
+    }
+    async savePositions(dashboardId, windowId, positions) {
+        localStorage.setItem(this._positionsKey(dashboardId, windowId), JSON.stringify(positions));
+    }
+    _sharedKey(dashboardId) {
+        // Keep legacy keys for default dashboard id to avoid breaking existing users.
+        if (dashboardId === 'default')
+            return 'ogidor_shared';
+        return `ogidor_shared_${dashboardId}`;
+    }
+    _positionsKey(dashboardId, windowId) {
+        if (dashboardId === 'default')
+            return `ogidor_positions_${windowId}`;
+        return `ogidor_positions_${dashboardId}_${windowId}`;
+    }
+}
+LocalStorageDashboardPersistence.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalStorageDashboardPersistence, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LocalStorageDashboardPersistence.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalStorageDashboardPersistence, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalStorageDashboardPersistence, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function resolveDefaultDashboardId() {
+    if (typeof window === 'undefined')
+        return 'default';
+    const path = window.location.pathname?.trim();
+    return path ? path : 'default';
+}
+class DashboardPersistenceFacade {
+    constructor(context) {
+        this.dashboardId = context?.dashboardId?.trim() || resolveDefaultDashboardId();
+    }
+}
+DashboardPersistenceFacade.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardPersistenceFacade, deps: [{ token: DASHBOARD_PERSISTENCE_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+DashboardPersistenceFacade.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardPersistenceFacade, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardPersistenceFacade, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DASHBOARD_PERSISTENCE_CONTEXT]
+                }] }]; } });
+
 class DashboardStateService {
-    constructor(zone) {
+    constructor(zone, persistenceFacade, localPersistence, persistence) {
         this.zone = zone;
-        /**
-         * Shared key — stores page list + widget metadata (no positions).
-         * Read and written by every window.
-         */
-        this.SHARED_KEY = 'ogidor_shared';
+        this.persistenceFacade = persistenceFacade;
+        this.localPersistence = localPersistence;
+        this.persistence = persistence;
         this.CHANNEL_NAME = 'ogidor_dashboard_sync';
         this.channel = typeof BroadcastChannel !== 'undefined'
             ? new BroadcastChannel(this.CHANNEL_NAME) : null;
@@ -529,23 +628,12 @@ class DashboardStateService {
         this.activePageIdSubject = new BehaviorSubject(this.initialPages[0].id);
         this.pages$ = this.pagesSubject.asObservable();
         this.activePageId$ = this.activePageIdSubject.asObservable();
-        // Determine whether we are a pop-out window
         const hash = typeof window !== 'undefined'
             ? window.location.hash.replace('#', '').trim() : '';
-        this.positionsKey = hash ? `ogidor_positions_${hash}` : 'ogidor_positions_main';
-        // 1. Load the shared structural state
-        const shared = localStorage.getItem(this.SHARED_KEY);
-        if (shared) {
-            try {
-                this._applyShared(JSON.parse(shared), false);
-            }
-            catch (e) {
-                console.error('[Dashboard] bad shared state', e);
-            }
-        }
-        // 2. Overlay this window's saved positions on top
-        this._restorePositions();
-        // 3. Listen for structural changes broadcast by other windows
+        this.windowId = hash || 'main';
+        this.dashboardId = this.persistenceFacade.dashboardId;
+        this.persistence = this.persistence ?? this.localPersistence;
+        void this._bootstrapFromPersistence();
         if (this.channel) {
             this.channel.onmessage = (ev) => {
                 this.zone.run(() => this._onSyncEvent(ev.data));
@@ -553,7 +641,6 @@ class DashboardStateService {
         }
     }
     ngOnDestroy() { this.channel?.close(); }
-    // ── Page actions ──────────────────────────────────────────────
     getActivePage() {
         return this.pagesSubject.value.find(p => p.id === this.activePageIdSubject.value);
     }
@@ -577,7 +664,6 @@ class DashboardStateService {
         this._saveShared();
         this._broadcast({ type: 'PAGE_REMOVED', pageId: id });
     }
-    // ── Widget structural actions (synced to all windows) ─────────
     addWidget(widget) {
         const activePage = this.getActivePage();
         if (!activePage)
@@ -590,7 +676,7 @@ class DashboardStateService {
         activePage.widgets = [...activePage.widgets, newWidget];
         this.pagesSubject.next([...this.pagesSubject.value]);
         this._saveShared();
-        this._savePositions(); // register default position locally
+        this._savePositions();
         this._broadcast({ type: 'WIDGET_ADDED', pageId: activePage.id, widget: newWidget });
         return newWidget;
     }
@@ -618,11 +704,6 @@ class DashboardStateService {
         this._savePositions();
         this._broadcast({ type: 'WIDGET_REMOVED', pageId, widgetId });
     }
-    // ── Position actions (local to THIS window only) ──────────────
-    /**
-     * Update a widget's grid position/size.
-     * Saved only for this window — never broadcast to others.
-     */
     updateWidgetPosition(pageId, widgetId, x, y, cols, rows) {
         const pages = this.pagesSubject.value;
         const widget = pages.find(p => p.id === pageId)?.widgets.find(w => w.id === widgetId);
@@ -632,10 +713,9 @@ class DashboardStateService {
             widget.cols = cols;
             widget.rows = rows;
             this.pagesSubject.next([...pages]);
-            this._savePositions(); // local only — intentionally no _saveShared / no broadcast
+            this._savePositions();
         }
     }
-    // ── Serialization ─────────────────────────────────────────────
     serializeLayout() {
         return JSON.stringify({
             pages: this.pagesSubject.value,
@@ -645,7 +725,7 @@ class DashboardStateService {
     loadLayout(config) {
         if (!config?.pages)
             return;
-        this._applyShared(config, true);
+        this._applyShared(config);
         this._saveShared();
         this._savePositions();
     }
@@ -653,26 +733,18 @@ class DashboardStateService {
         const url = `${window.location.origin}${window.location.pathname}#${pageId}`;
         window.open(url, `workspace_${pageId}`, 'width=1280,height=800,menubar=no,toolbar=no,location=no,status=no');
     }
-    // ── Private helpers ───────────────────────────────────────────
-    /**
-     * Save page list + widget metadata (titles, cardColor, data) — no positions.
-     */
     _saveShared() {
         const stripped = this.pagesSubject.value.map(p => ({
             ...p,
-            widgets: p.widgets.map(({ id, title, cardColor, data, cols, rows }) => 
-            // Keep default cols/rows so new windows get a sensible first-open layout.
-            // x/y are intentionally omitted from shared state.
-            ({ id, title, cardColor, data, x: 0, y: 0, cols, rows })),
+            widgets: p.widgets.map(({ id, title, cardColor, data, cols, rows }) => ({ id, title, cardColor, data, x: 0, y: 0, cols, rows })),
         }));
-        localStorage.setItem(this.SHARED_KEY, JSON.stringify({
+        const shared = {
             pages: stripped,
             activePageId: this.activePageIdSubject.value,
-        }));
+        };
+        void this.persistence?.saveShared(this.dashboardId, shared)
+            .catch(e => console.error('[Dashboard] failed to persist shared state', e));
     }
-    /**
-     * Save this window's grid positions (x, y, cols, rows) per widget.
-     */
     _savePositions() {
         const positions = {};
         for (const page of this.pagesSubject.value) {
@@ -680,54 +752,32 @@ class DashboardStateService {
                 positions[`${page.id}:${w.id}`] = { x: w.x, y: w.y, cols: w.cols, rows: w.rows };
             }
         }
-        localStorage.setItem(this.positionsKey, JSON.stringify(positions));
+        void this.persistence?.savePositions(this.dashboardId, this.windowId, positions)
+            .catch(e => console.error('[Dashboard] failed to persist window positions', e));
     }
-    /**
-     * Overlay the positions saved for THIS window on top of the current pages.
-     */
-    _restorePositions() {
-        const raw = localStorage.getItem(this.positionsKey);
-        if (!raw)
-            return;
-        try {
-            const positions = JSON.parse(raw);
-            const pages = this.pagesSubject.value;
-            for (const page of pages) {
-                for (const w of page.widgets) {
-                    const pos = positions[`${page.id}:${w.id}`];
-                    if (pos) {
-                        w.x = pos.x;
-                        w.y = pos.y;
-                        w.cols = pos.cols;
-                        w.rows = pos.rows;
-                    }
+    _applyPositions(positions) {
+        const pages = this.pagesSubject.value;
+        for (const page of pages) {
+            for (const w of page.widgets) {
+                const pos = positions[`${page.id}:${w.id}`];
+                if (pos) {
+                    w.x = pos.x;
+                    w.y = pos.y;
+                    w.cols = pos.cols;
+                    w.rows = pos.rows;
                 }
             }
-            this.pagesSubject.next([...pages]);
-        }
-        catch (e) {
-            console.error('[Dashboard] bad positions state', e);
         }
+        this.pagesSubject.next([...pages]);
     }
-    /**
-     * Apply a shared config object (page list + metadata) without touching
-     * this window's saved positions.
-     */
-    _applyShared(config, overwritePositions) {
+    _applyShared(config) {
         if (!config?.pages)
             return;
         this.pagesSubject.next(config.pages);
         if (config.activePageId)
             this.activePageIdSubject.next(config.activePageId);
-        if (!overwritePositions)
-            this._restorePositions();
     }
-    /**
-     * Handle a structural sync event arriving from another window.
-     * Position changes are never sent so we never receive them here.
-     */
     _onSyncEvent(event) {
-        // Work on a shallow clone of pages so Angular detects the change
         const pages = this.pagesSubject.value.map(p => ({
             ...p, widgets: [...p.widgets]
         }));
@@ -756,8 +806,6 @@ class DashboardStateService {
                     page.widgets = [...page.widgets, { ...event.widget }];
                     this.pagesSubject.next(pages);
                     this._saveShared();
-                    // Don't touch positions — this window will keep its own layout for
-                    // existing widgets; the new one starts at its default position.
                 }
                 break;
             }
@@ -788,13 +836,31 @@ class DashboardStateService {
     _broadcast(event) {
         this.channel?.postMessage(event);
     }
+    async _bootstrapFromPersistence() {
+        try {
+            const shared = await this.persistence?.loadShared(this.dashboardId);
+            if (shared)
+                this.zone.run(() => this._applyShared(shared));
+            const positions = await this.persistence?.loadPositions(this.dashboardId, this.windowId);
+            if (positions)
+                this.zone.run(() => this._applyPositions(positions));
+        }
+        catch (e) {
+            console.error('[Dashboard] failed to bootstrap persisted state', e);
+        }
+    }
 }
-DashboardStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardStateService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+DashboardStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardStateService, deps: [{ token: i0.NgZone }, { token: DashboardPersistenceFacade }, { token: LocalStorageDashboardPersistence }, { token: DASHBOARD_PERSISTENCE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 DashboardStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardStateService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: DashboardPersistenceFacade }, { type: LocalStorageDashboardPersistence }, { type: DashboardPersistence, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DASHBOARD_PERSISTENCE]
+                }] }]; } });
 
 class WidgetRendererComponent {
     constructor() {
@@ -1448,7 +1514,10 @@ DashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         WidgetRendererComponent,
         CustomGridComponent,
         GridCellDirective] });
-DashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, providers: [DashboardStateService], imports: [CommonModule] });
+DashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, providers: [
+        DashboardStateService,
+        { provide: DASHBOARD_PERSISTENCE, useExisting: LocalStorageDashboardPersistence },
+    ], imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1462,7 +1531,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     imports: [
                         CommonModule,
                     ],
-                    providers: [DashboardStateService],
+                    providers: [
+                        DashboardStateService,
+                        { provide: DASHBOARD_PERSISTENCE, useExisting: LocalStorageDashboardPersistence },
+                    ],
                     exports: [
                         DashboardComponent,
                         OverflowActivePipe,
@@ -1497,5 +1569,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppModule, CustomGridComponent, DashboardComponent, DashboardModule, DashboardStateService, GridCellDirective, OverflowActivePipe, WidgetRendererComponent };
+export { AppModule, CustomGridComponent, DASHBOARD_PERSISTENCE, DASHBOARD_PERSISTENCE_CONTEXT, DashboardComponent, DashboardModule, DashboardPersistence, DashboardPersistenceFacade, DashboardStateService, GridCellDirective, LocalStorageDashboardPersistence, OverflowActivePipe, WidgetRendererComponent, resolveDefaultDashboardId };
 //# sourceMappingURL=ogidor-dashboard.mjs.map