@ogidor/dashboard 1.0.16 → 1.0.18

package/fesm2015/ogidor-dashboard.mjs

@@ -1,9 +1,10 @@
 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';
 import { BehaviorSubject, Subscription } from 'rxjs';
+import { __awaiter } from 'tslib';
 
 /**
  * Directive applied to the template that should be stamped inside each grid cell.
@@ -144,15 +145,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);
@@ -377,15 +386,32 @@ class CustomGridComponent {
     compactAndApply() {
         var _a;
         if (!((_a = this.widgets) === null || _a === void 0 ? void 0 : _a.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() {
         var _a;
@@ -518,14 +544,101 @@ 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 {
+    loadShared(dashboardId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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;
+            }
+        });
+    }
+    saveShared(dashboardId, shared) {
+        return __awaiter(this, void 0, void 0, function* () {
+            localStorage.setItem(this._sharedKey(dashboardId), JSON.stringify(shared));
+        });
+    }
+    loadPositions(dashboardId, windowId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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;
+            }
+        });
+    }
+    savePositions(dashboardId, windowId, positions) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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() {
+    var _a;
+    if (typeof window === 'undefined')
+        return 'default';
+    const path = (_a = window.location.pathname) === null || _a === void 0 ? void 0 : _a.trim();
+    return path ? path : 'default';
+}
+class DashboardPersistenceFacade {
+    constructor(context) {
+        var _a;
+        this.dashboardId = ((_a = context === null || context === void 0 ? void 0 : context.dashboardId) === null || _a === void 0 ? void 0 : _a.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) {
+        var _a;
         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;
@@ -536,23 +649,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 = (_a = this.persistence) !== null && _a !== void 0 ? _a : this.localPersistence;
+        void this._bootstrapFromPersistence();
         if (this.channel) {
             this.channel.onmessage = (ev) => {
                 this.zone.run(() => this._onSyncEvent(ev.data));
@@ -560,7 +662,6 @@ class DashboardStateService {
         }
     }
     ngOnDestroy() { var _a; (_a = this.channel) === null || _a === void 0 ? void 0 : _a.close(); }
-    // ── Page actions ──────────────────────────────────────────────
     getActivePage() {
         return this.pagesSubject.value.find(p => p.id === this.activePageIdSubject.value);
     }
@@ -584,7 +685,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)
@@ -593,7 +693,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;
     }
@@ -621,11 +721,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) {
         var _a;
         const pages = this.pagesSubject.value;
@@ -636,10 +731,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,
@@ -649,7 +743,7 @@ class DashboardStateService {
     loadLayout(config) {
         if (!(config === null || config === void 0 ? void 0 : config.pages))
             return;
-        this._applyShared(config, true);
+        this._applyShared(config);
         this._saveShared();
         this._savePositions();
     }
@@ -657,79 +751,49 @@ 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 => (Object.assign(Object.assign({}, 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 })) })));
-        localStorage.setItem(this.SHARED_KEY, JSON.stringify({
+        var _a;
+        const stripped = this.pagesSubject.value.map(p => (Object.assign(Object.assign({}, p), { widgets: p.widgets.map(({ id, title, cardColor, data, cols, rows }) => ({ id, title, cardColor, data, x: 0, y: 0, cols, rows })) })));
+        const shared = {
             pages: stripped,
             activePageId: this.activePageIdSubject.value,
-        }));
+        };
+        void ((_a = this.persistence) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a;
         const positions = {};
         for (const page of this.pagesSubject.value) {
             for (const w of page.widgets) {
                 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 ((_a = this.persistence) === null || _a === void 0 ? void 0 : _a.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 === null || config === void 0 ? void 0 : 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) {
         var _a, _b;
-        // Work on a shallow clone of pages so Angular detects the change
         const pages = this.pagesSubject.value.map(p => (Object.assign(Object.assign({}, p), { widgets: [...p.widgets] })));
         switch (event.type) {
             case 'PAGE_ADDED':
@@ -756,8 +820,6 @@ class DashboardStateService {
                     page.widgets = [...page.widgets, Object.assign({}, 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;
             }
@@ -789,13 +851,36 @@ class DashboardStateService {
         var _a;
         (_a = this.channel) === null || _a === void 0 ? void 0 : _a.postMessage(event);
     }
+    _bootstrapFromPersistence() {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const shared = yield ((_a = this.persistence) === null || _a === void 0 ? void 0 : _a.loadShared(this.dashboardId));
+                if (shared)
+                    this.zone.run(() => this._applyShared(shared));
+                const positions = yield ((_b = this.persistence) === null || _b === void 0 ? void 0 : _b.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() {
@@ -1454,7 +1539,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: [{
@@ -1468,7 +1556,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,
@@ -1503,5 +1594,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