Merge branch 'widgets' into demo

Author: markusweblance

docs/Configuration/Widgets.md

@@ -0,0 +1,37 @@
+This is an example of customizing a custom widget (CustomOne) in a React application that is built using Vite.
+
+### **1. Custom Widget Definition (`fixture/test-widgets/Custom.ts`)**
+- This is a widget class (`CustomOne`) that extends a base widget class (`CustomBase`).
+- It defines metadata for the widget, such as:
+    - `id`, `name`, `description`, and `department` (e.g., `"test"`)
+    - `icon` (using a Material icon name, `"takeout_dining"`)
+    - Default `size` (height and width in grid units)
+    - `backgroundCSS` (a light gray color)
+- It specifies JavaScript paths for **development** (direct `.tsx` file) and **production** (a compiled `.es.js` file).
+- The widget is initialized with a `routePrefix` (likely a base URL for asset loading).
+
+### **2. React Component (`modules/test/ComponentB.tsx`)**
+- This is the actual UI implementation of the widget.
+- It displays:
+    - A **message** (passed as a prop)
+    - A **button** that increments a counter when clicked
+    - The **current counter value** (managed via React’s `useState`)
+- The button uses basic styling (similar to a styled button component).
+
+### **3. Vite Build Configuration (`modules/test/vite.config.module.ts`)**
+- Configures the build process for the React component.
+- **Key settings:**
+    - Builds the component as an **ES module** (`lib` mode).
+    - Outputs the file as `ComponentB.es.js`.
+    - Treats `react` and `react-dom` as **external dependencies** (they won’t be bundled; expected to be loaded separately).
+    - Uses path aliases (e.g., `@` points to a shared JS directory).
+    - Supports both **development** (direct `.tsx` usage) and **production** (optimized `.es.js` file).
+
+### **How It All Works Together**
+1. **`CustomOne`** defines the widget’s metadata and where its JavaScript lives.
+2. **`ComponentB`** provides the interactive UI (a counter button with a message).
+3. **Vite** compiles the React component into a standalone ES module (`ComponentB.es.js`).
+    - In **development**, it loads the `.tsx` file directly.
+    - In **production**, it loads the optimized `.es.js` file from a CDN-like path (`/assets/modules/`).
+
+This setup allows the widget to be reusable, dynamically loaded, and integrated into a larger application.

src/assets/js/components/widgets/widgets-layout.tsx

@@ -21,6 +21,8 @@ import WidgetItem from "@/components/widgets/widget-item.tsx";
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
 import {usePage} from "@inertiajs/react";
+import {WidgetsLayouts} from "@/lib/widgets-service.ts";
+
 
 interface WidgetLayoutProps extends SharedData {
     title: string
@@ -33,15 +35,35 @@ interface WidgetLayoutProps extends SharedData {
 
 const WidgetLayout = () => {
     const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);
-    const [layout, setLayout] = useState<WidgetLayoutItem[]>([]);
+    const [layout, setLayout] = useState<WidgetsLayouts>({
+        lg: [],
+        md: [],
+        sm: [],
+        xs: [],
+        xxs: [],
+    });
     const [widgets, setWidgets] = useState<Widget[]>([])
     const [popUpDisabled, setPopUpDisabled] = useState(false)
     const [keyRender, setKeyRender] = useState(0);
     const [loading, setIsLoading] = useState(true)
     const [isDraggable, setIsDraggable] = useState(false)
+    const [gridRef, setGridRef] = useState<HTMLDivElement | null>(null);
 
     const page = usePage<WidgetLayoutProps>()
 
+    // Get the current breakpoint
+    const getCurrentBreakpoint = useCallback(() => {
+        if (!gridRef) return 'lg'; // fallback
+
+        const width = gridRef.clientWidth;
+
+        if (width >= 1200) return 'lg';
+        if (width >= 996) return 'md';
+        if (width >= 768) return 'sm';
+        if (width >= 480) return 'xs';
+        return 'xxs';
+    }, [gridRef]);
+
     useEffect(() => {
         async function loadWidgets() {
             try {
@@ -70,67 +92,69 @@ const WidgetLayout = () => {
     }, [layout, isDraggable])
 
     const handleLayoutChange = (currentLayout: WidgetLayoutItem[]) => {
+        const currentBreakpoint = getCurrentBreakpoint();
 
-        const mergeCoordinates = (layout: WidgetLayoutItem[], currentLayout: WidgetLayoutItem[]) => {
-            // Создаем копию первого массива, чтобы не изменять оригинал
-            const result = JSON.parse(JSON.stringify(layout));
+        setLayout(prev => {
+            const updatedLayout = {...prev};
+            const currentLayoutMap = new Map(currentLayout.map(item => [item.i, item]));
 
-            // Создаем карту для быстрого поиска элементов по полю 'i'
-            const secondMap = new Map();
-            currentLayout.forEach(item => secondMap.set(item.i, item));
-
-            // Обновляем координаты в первом массиве
-            result.forEach((item: WidgetLayoutItem) => {
-                const secondItem = secondMap.get(item.i);
-                if (secondItem) {
-                    item.x = secondItem.x;
-                    item.y = secondItem.y;
-                }
-            });
+            updatedLayout[currentBreakpoint as keyof WidgetsLayouts] =
+                updatedLayout[currentBreakpoint as keyof WidgetsLayouts].map(item => {
+                    const currentItem = currentLayoutMap.get(item.i);
+                    return currentItem ? {...item, x: currentItem.x, y: currentItem.y, w: currentItem.w, h: currentItem.h} : item;
+                });
 
-            return result;
-        }
-        setLayout(mergeCoordinates(layout, currentLayout))
+            return updatedLayout;
+        });
     };
 
     const addWidgets = useCallback((id: string) => {
         setPopUpDisabled(true);
         const updatedWidgets = widgets.map(widget =>
-            widget.id === id
-                ? {...widget, added: !widget.added}
-                : widget
+            widget.id === id ? {...widget, added: !widget.added} : widget
         );
 
-        const layoutItem = layout.find(e => e.id === id);
-        let newLayout: WidgetLayoutItem[];
+        const currentLayout = layout.lg;
+        const layoutItem = currentLayout.find(e => e.i === id);
+        let newLayout: WidgetsLayouts = {...layout};
 
         if (layoutItem) {
-            newLayout = layout.filter(e => e.id !== id);
+            // Delete the layoutItem from all breakpoints
+            for (const breakpoint in newLayout) {
+                newLayout[breakpoint as keyof WidgetsLayouts] =
+                    newLayout[breakpoint as keyof WidgetsLayouts].filter(e => e.i !== id);
+            }
         } else {
             const widget = widgets.find(e => e.id === id);
             const w = widget?.size ? widget.size.w : 1;
             const h = widget?.size ? widget.size.h : 1;
 
-            let x = layout.length === 0
-                ? 0
-                : ((layout[layout.length - 1].x + layout[layout.length - 1].w) > 8 ||
-                (layout[layout.length - 1].x + layout[layout.length - 1].w + w) > 8
+            let x = currentLayout.length === 0 ? 0 :
+                ((currentLayout[currentLayout.length - 1].x + currentLayout[currentLayout.length - 1].w) > 8 ||
+                (currentLayout[currentLayout.length - 1].x + currentLayout[currentLayout.length - 1].w + w) > 8
                     ? 0
-                    : (layout[layout.length - 1].x + layout[layout.length - 1].w));
+                    : (currentLayout[currentLayout.length - 1].x + currentLayout[currentLayout.length - 1].w));
 
             const y = 0;
 
-            newLayout = [
-                ...layout,
-                {
-                    x: x,
-                    y: y,
-                    w: w,
-                    h: h,
-                    i: String(layout.length + 1),
-                    id: widget?.id as string,
+            const newItem = {
+                x,
+                y,
+                w,
+                h,
+                i: id,
+                id: widget?.id as string,
+            };
+
+            // Add the newItem to all breakpoints
+            for (const breakpoint in newLayout) {
+                if (!newLayout[breakpoint as keyof WidgetsLayouts].some(item => item.i === id)) {
+                    newLayout[breakpoint as keyof WidgetsLayouts] = [
+                        ...newLayout[breakpoint as keyof WidgetsLayouts],
+                        {...newItem}
+                    ];
                 }
-            ];
+            }
         }
 
         setWidgets(updatedWidgets);
@@ -140,12 +164,11 @@ const WidgetLayout = () => {
         addWidgetsDB(updatedWidgets, newLayout).then(() => {
             setTimeout(() => {
                 setPopUpDisabled(false);
-            }, 300)
-        })
-
+            }, 300);
+        });
     }, [layout, widgets]);
 
-    const addWidgetsDB = useCallback(async (updatedWidgets: Widget[], newLayout: WidgetLayoutItem[]) => {
+    const addWidgetsDB = useCallback(async (updatedWidgets: Widget[], newLayout: WidgetsLayouts) => {
         try {
             const storeWidgets = updatedWidgets.filter(widget => widget.added === true)
             await axios.post(`${window.routePrefix}/widgets-get-all-db`, {
@@ -161,6 +184,7 @@ const WidgetLayout = () => {
             console.log(e);
         }
     }, [widgets])
+
     return (
         <div
             className={`flex h-full flex-1 flex-col gap-4 rounded-xl p-4 `}>
@@ -212,28 +236,32 @@ const WidgetLayout = () => {
                                             </DialogStackTitle>
                                             <div className="overflow-auto h-[calc(100%-64px)] pr-4 pt-4">
                                                 <AddWidgets initWidgets={widgets} onAddWidgets={addWidgets}
-                                                            disabled={popUpDisabled} searchPlaceholder={page.props.searchPlaceholder} actionsTitles={page.props.actionsTitles}/>
+                                                            disabled={popUpDisabled}
+                                                            searchPlaceholder={page.props.searchPlaceholder}
+                                                            actionsTitles={page.props.actionsTitles}/>
                                             </div>
                                         </div>
                                     </DialogStackContent>
                                 </DialogStackBody>
                             </DialogStack>
                         </div>
                     </div>
-                    <div>
-                        {layout.length > 0 ? (
+                    <div ref={setGridRef}>
+                        {layout.lg.length > 0 ? (
                             <ResponsiveGridLayout
-                                layouts={{lg: layout}}
-                                breakpoints={{lg: 1024, md: 768, sm: 475, xs: 320, xxs: 0}}
-                                cols={{lg: 8, md: 6, sm: 4, xs: 2, xxs: 2}}
+                                //@ts-ignore
+                                layouts={layout}
+                                breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
+                                cols={{lg: 8, md: 6, sm: 4, xs: 2, xxs: 1}}
                                 rowHeight={131}
-                                onLayoutChange={handleLayoutChange}
+                                //@ts-ignore
+                                onDragStop={handleLayoutChange}
                                 isResizable={false}
                                 isDraggable={isDraggable}
                                 key={keyRender}
-                                className="overflow-hidden"
+                                className="overflow-hidden max-w-[1440px]"
                             >
-                                {layout.map((widget) => (
+                                {layout.lg.map((widget) => (
                                     <div key={widget.i}>
                                         <WidgetItem draggable={isDraggable} widgets={widgets} ID={widget.id}/>
                                     </div>

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

@@ -1,41 +1,62 @@
-import { Widget, WidgetLayoutItem } from "@/types";
+import {Widget, WidgetLayoutItem} from "@/types";
 import axios from "axios";
 
-// Ключ для хранения данных в localStorage
+export interface WidgetsLayouts {
+    lg: WidgetLayoutItem[],
+    md: WidgetLayoutItem[],
+    sm: WidgetLayoutItem[],
+    xs: WidgetLayoutItem[],
+    xxs: WidgetLayoutItem[]
+}
 
 export async function initializeWidgets(): Promise<{
-    layout: WidgetLayoutItem[];
+    layout: WidgetsLayouts;
     widgets: Widget[];
 }> {
     try {
-        // 1. Пытаемся получить данные из localStorage
         const storedData = localStorage.getItem('widgetsData');
         let storedWidgets: Widget[] = [];
-        let storedLayout: WidgetLayoutItem[] = [];
+        let storedLayout: WidgetsLayouts = {
+            lg: [],
+            md: [],
+            sm: [],
+            xs: [],
+            xxs: []
+        };
 
         if (storedData) {
             try {
                 const parsedData = JSON.parse(storedData);
                 storedWidgets = parsedData.widgets || [];
-                storedLayout = parsedData.layout || [];
+                storedLayout = parsedData.layout || {
+                    lg: [],
+                    md: [],
+                    sm: [],
+                    xs: [],
+                    xxs: []
+                };
             } catch (e) {
-                console.error('Ошибка при разборе данных из localStorage', e);
+                console.error('Error parsing data from localStorage', e);
             }
         }
 
-        // 2. Получаем данные с сервера
         const widgetsDBResponse = await axios.get(`${window.routePrefix}/widgets-get-all-db`);
         let widgetsDB = widgetsDBResponse.data?.widgetsDB?.widgets as Widget[] ?? [];
-        let layoutDB = widgetsDBResponse.data?.widgetsDB?.layout ?? [];
+        let layoutDB = widgetsDBResponse.data?.widgetsDB?.layout ?? {
+            lg: [],
+            md: [],
+            sm: [],
+            xs: [],
+            xxs: []
+        };
 
         const widgetsResponse = await axios.get(`${window.routePrefix}/widgets-get-all`);
         const allWidgets = widgetsResponse.data.widgets as Widget[];
 
-        // 3. Сравниваем виджеты из БД и localStorage
         const dbWidgetIds = widgetsDB.map(w => w.id).sort();
         const storedWidgetIds = storedWidgets.map(w => w.id).sort();
 
-        // Проверяем, совпадают ли массивы ID
+        // Check if the widget IDs in the database and localStorage match
         const idsMatch =
             dbWidgetIds.length === storedWidgetIds.length &&
             dbWidgetIds.every((id, index) => id === storedWidgetIds[index]);
@@ -44,30 +65,27 @@ export async function initializeWidgets(): Promise<{
         let finalLayoutDB = layoutDB;
 
         if (idsMatch && storedWidgets.length > 0) {
-            // Если ID совпадают - используем данные из localStorage
             finalWidgetsDB = storedWidgets;
             finalLayoutDB = storedLayout;
         } else {
-            // Если данные изменились - сохраняем в localStorage
             const dataToStore = {
                 widgets: widgetsDB,
                 layout: layoutDB
             };
             localStorage.setItem('widgetsData', JSON.stringify(dataToStore));
         }
 
-        // 4. Инициализируем виджеты, отмечая добавленные
         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 {
             layout: finalLayoutDB,
             widgets: initWidgets
         };
     } catch (error) {
-        console.error('Ошибка при инициализации виджетов:', error);
+        console.error('Error initializing widgets:', error);
         throw error;
     }
 }

src/lib/widgets/widgetHandler.ts

@@ -38,6 +38,14 @@ export interface WidgetLayoutItem {
     id: string;
 }
 
+export interface WidgetsLayouts {
+    lg: WidgetLayoutItem[],
+    md: WidgetLayoutItem[],
+    sm: WidgetLayoutItem[],
+    xs: WidgetLayoutItem[],
+    xxs: WidgetLayoutItem[]
+}
+
 export class WidgetHandler {
     private widgets: WidgetType[] = [];
     public adminizer: Adminizer;
@@ -158,10 +166,10 @@ export class WidgetHandler {
 
     public async getWidgetsDB(id: number, auth: boolean, i18n: I18n): Promise<{
         widgets: WidgetConfig[],
-        layout: WidgetLayoutItem[]
+        layout: WidgetsLayouts
     }> {
         let user: UserAP;
-        let result: { widgets: WidgetConfig[], layout: WidgetLayoutItem[] } = {widgets: [], layout: []};
+        let result: { widgets: WidgetConfig[], layout: WidgetsLayouts } = {widgets: [], layout: {lg: [], md: [], sm: [], xs: [], xxs: []}};
 
         if (!auth) {
             // TODO refactor CRUD functions for DataAccessor usage