feat: move default widget layout generation to client-side and introduce defaultWidgets for server response

Author: Siziy Ivan

src/assets/js/lib/widgets-service.ts

@@ -1,4 +1,4 @@
-import {Widget, WidgetLayoutItem} from "@/types";
+import { Widget, WidgetLayoutItem } from "@/types";
 import axios from "axios";
 
 export interface WidgetsLayouts {
@@ -49,35 +49,81 @@ export async function initializeWidgets(): Promise<{
             xs: [],
             xxs: []
         };
+        const defaultWidgetIds = widgetsDBResponse.data?.widgetsDB?.defaultWidgets as string[] ?? [];
 
         const widgetsResponse = await axios.get(`${window.routePrefix}/widgets-get-all`);
         const allWidgets = widgetsResponse.data.widgets as Widget[];
 
-        const dbWidgetIds = widgetsDB.map(w => w.id).sort();
-        const storedWidgetIds = storedWidgets.map(w => w.id).sort();
-
-        // Check if the widget IDs in the database and localStorage match
-        const idsMatch =
-            dbWidgetIds.length === storedWidgetIds.length &&
-            dbWidgetIds.every((id, index) => id === storedWidgetIds[index]);
+        // Check if user has saved widgets in database (no defaultWidgetIds means user has saved widgets)
+        const hasSavedWidgets = widgetsDB.length > 0 && widgetsDB.some(w => w.added === true) && defaultWidgetIds.length === 0;
 
         let finalWidgetsDB = widgetsDB;
         let finalLayoutDB = layoutDB;
 
-        if (idsMatch && storedWidgets.length > 0) {
-            finalWidgetsDB = storedWidgets;
-            finalLayoutDB = storedLayout;
-        } else {
+        // If using default widgets, generate layout on frontend
+        if (!hasSavedWidgets && defaultWidgetIds.length > 0) {
+            const addedWidgets: Widget[] = [];
+            let x = 0, y = 0;
+
+            // Mark default widgets as added
+            allWidgets.forEach(widget => {
+                if (defaultWidgetIds.includes(widget.id.split("__")[0])) {
+                    widget.added = true;
+                    addedWidgets.push(widget);
+                }
+            });
+
+            // Generate layout for all breakpoints
+            const generatedLayout: WidgetsLayouts = { lg: [], md: [], sm: [], xs: [], xxs: [] };
+
+            addedWidgets.forEach(widget => {
+                const w = widget.size?.w || 1;
+                const h = widget.size?.h || 1;
+                const layoutItem: WidgetLayoutItem = { x, y, w, h, i: widget.id, id: widget.id };
+
+                generatedLayout.lg.push(layoutItem);
+                generatedLayout.md.push(layoutItem);
+                generatedLayout.sm.push({ ...layoutItem, w: Math.min(w, 4) });
+                generatedLayout.xs.push({ ...layoutItem, w: Math.min(w, 3) });
+                generatedLayout.xxs.push({ ...layoutItem, w: 2 });
+
+                x += w;
+                if (x >= 12) {
+                    x = 0;
+                    y += h;
+                }
+            });
+
+            finalWidgetsDB = addedWidgets;
+            finalLayoutDB = generatedLayout;
+
+            // Clear localStorage when using defaults
+            localStorage.removeItem('widgetsData');
+        } else if (hasSavedWidgets && storedData) {
+            // Only use localStorage if user has saved widgets in database
+            const dbWidgetIds = widgetsDB.map(w => w.id).sort();
+            const storedWidgetIds = storedWidgets.map(w => w.id).sort();
+
+            const idsMatch =
+                dbWidgetIds.length === storedWidgetIds.length &&
+                dbWidgetIds.every((id, index) => id === storedWidgetIds[index]);
+
+            if (idsMatch && storedWidgets.length > 0) {
+                finalWidgetsDB = storedWidgets;
+                finalLayoutDB = storedLayout;
+            }
+
+            // Update localStorage with current data
             const dataToStore = {
-                widgets: widgetsDB,
-                layout: layoutDB
+                widgets: finalWidgetsDB,
+                layout: finalLayoutDB
             };
             localStorage.setItem('widgetsData', JSON.stringify(dataToStore));
         }
 
         const initWidgets = allWidgets.map(widget => {
             const findItem = finalWidgetsDB.find((e: any) => e.id === widget.id);
-            return findItem && findItem.added ? {...widget, added: true} : widget;
+            return findItem && findItem.added ? { ...widget, added: true } : widget;
         });
 
         return {

src/lib/widgets/widgetHandler.ts

@@ -168,10 +168,14 @@ export class WidgetHandler {
 
     public async getWidgetsDB(id: number, auth: boolean, i18n: I18n): Promise<{
         widgets: WidgetConfig[],
-        layout: WidgetsLayouts
+        layout: WidgetsLayouts,
+        defaultWidgets?: string[]
     }> {
         let user: UserAP;
-        let result: { widgets: WidgetConfig[], layout: WidgetsLayouts } = { widgets: [], layout: { lg: [], md: [], sm: [], xs: [], xxs: [] } };
+        let result: { widgets: WidgetConfig[], layout: WidgetsLayouts, defaultWidgets?: string[] } = {
+            widgets: [],
+            layout: { lg: [], md: [], sm: [], xs: [], xxs: [] }
+        };
 
         if (!auth) {
             // TODO refactor CRUD functions for DataAccessor usage
@@ -182,41 +186,14 @@ export class WidgetHandler {
         }
 
         if (!user || !user.widgets || user.widgets.widgets.length === 0) {
-            if (this.adminizer.config.dashboard && typeof this.adminizer.config.dashboard !== "boolean" && this.adminizer.config.dashboard.defaultWidgets) {
-                const defaultWidgets = this.adminizer.config.dashboard.defaultWidgets;
-                result.widgets = await this.getAll(user, i18n);
-
-                const addedWidgets: WidgetConfig[] = [];
-                let x = 0, y = 0;
+            // User has no saved widgets - return all widgets with default widget IDs
+            result.widgets = await this.getAll(user, i18n);
 
-                // Mark default widgets as added and collect them
-                result.widgets.forEach(widget => {
-                    if (defaultWidgets.includes(widget.id.split("__")[0])) {
-                        widget.added = true;
-                        addedWidgets.push(widget);
-                    }
-                });
-
-                // Generate layout for all breakpoints
-                addedWidgets.forEach(widget => {
-                    const w = widget.size?.w || 1;
-                    const h = widget.size?.h || 1;
-                    const layoutItem: WidgetLayoutItem = { x, y, w, h, i: widget.id, id: widget.id };
-
-                    result.layout.lg.push(layoutItem);
-                    result.layout.md.push(layoutItem);
-                    result.layout.sm.push({ ...layoutItem, w: Math.min(w, 4) });
-                    result.layout.xs.push({ ...layoutItem, w: Math.min(w, 3) });
-                    result.layout.xxs.push({ ...layoutItem, w: 2 });
-
-                    x += w;
-                    if (x >= 12) {
-                        x = 0;
-                        y += h;
-                    }
-                });
+            if (this.adminizer.config.dashboard && typeof this.adminizer.config.dashboard !== "boolean" && this.adminizer.config.dashboard.defaultWidgets) {
+                result.defaultWidgets = this.adminizer.config.dashboard.defaultWidgets;
             }
         } else {
+            // User has saved widgets - return them
             result.widgets = user.widgets.widgets;
             result.layout = user.widgets.layout;
         }