Changes to be committed:

	deleted:    .gitignore
	new file:   Assets/src/com/container.js
	new file:   Assets/src/com/widget-add.js
	new file:   Assets/src/com/widget-content.js
	new file:   Assets/src/com/widget-menu.js
	new file:   Assets/src/com/widget.js
	new file:   Assets/src/index.js
	new file:   Assets/src/scss/main.scss

Author: il4mb

.gitignore

@@ -0,0 +1,80 @@
+import * as dialog from "@il4mb/merapipanel/dialog";
+import React, { useEffect, useRef, useState, createContext, useContext } from "react";
+
+const ContainerContext = createContext({});
+
+export const useContainer = () => {
+    return useContext(ContainerContext);
+}
+
+export const Container = ({ children }) => {
+
+    const [isEdit, setEdit] = useState(false);
+    const containerRef = useRef(null);
+    const [contents, setContents] = useState([]);
+    const [openMenu, setOpenMenu] = useState(false);
+    const [isChanged, setChanged] = useState(false);
+
+
+    useEffect(() => {
+        const editToggle = document.getElementById('edit-widget-button');
+        if (editToggle) {
+            const handleClick = () => {
+               
+                if (isEdit && isChanged) {
+                    __.dialog.confirm('<h4><i class="fa-solid fa-triangle-exclamation"></i> Unsaved changes</h4>', 'You have unsaved changes.<br>Are you sure you want to discard them?')
+                    .then((result) => {
+                        if (result) {
+                            setEdit(prevIsEdit => !prevIsEdit); // Toggle isEdit
+                        }
+                    })
+                } else {
+                    setEdit(prevIsEdit => !prevIsEdit); // Toggle isEdit
+                }
+
+            };
+            editToggle.addEventListener('click', handleClick);
+
+            return () => {
+                editToggle.removeEventListener('click', handleClick); // Cleanup listener
+            };
+        }
+    }, [isChanged, isEdit]);
+
+    useEffect(() => {
+        if (containerRef.current) {
+            if (isEdit) {
+                containerRef.current.classList.add('widget-editing');
+                document.getElementById('edit-widget-button')?.classList.add('active');
+            } else {
+                containerRef.current.classList.remove('widget-editing');
+                document.getElementById('edit-widget-button')?.classList.remove('active');
+            }
+        }
+    }, [isEdit]);
+
+
+    const store = {
+        isChanged,
+        setChanged,
+        isEdit,
+        setEdit,
+        containerRef,
+        contents: contents,
+        addContent: (content) => {
+            setContents([...contents, content]);
+        },
+        setContents,
+        openMenu,
+        setOpenMenu
+    };
+
+
+    return (
+        <ContainerContext.Provider value={store}>
+            <div ref={containerRef} className="widget-container">
+                {children}
+            </div>
+        </ContainerContext.Provider>
+    )
+};

Assets/src/com/container.js

@@ -0,0 +1,22 @@
+import React, { useEffect, useRef } from "react";
+import { useContainer } from "./container";
+
+export const WidgetAdd = ({ }) => {
+
+    const { isEdit, setOpenMenu } = useContainer();
+    const ref = useRef(null);
+
+    const handleClick = () => {
+        setOpenMenu(current => !current);
+    }
+
+    return (
+        <>
+            {isEdit &&
+                <div ref={ref} className="widget-add" onClick={handleClick}>
+                    <i className="fa-solid fa-plus fa-x2"></i>
+                    <span className="ms-1">Add Widget</span>
+                </div>}
+        </>
+    )
+}

Assets/src/com/widget-add.js

@@ -0,0 +1,78 @@
+import React, { useEffect, useState, useRef } from "react";
+import { useContainer } from "./container";
+import { WidgetAdd } from "./widget-add";
+import { Widget } from "./widget";
+
+
+
+const SaveButton = () => {
+
+    const { contents, setChanged } = useContainer();
+    const { endpoint_save, endpoint_load } = window.widgetPayload;
+
+    const saveHandle = () => {
+
+        if (!endpoint_save) {
+            return console.error('endpoint_save not found');
+        }
+        if (Array.isArray(contents)) {
+            const contentJson = JSON.stringify(contents.map((item) => item.props));
+            __.http.post(endpoint_save, { data: contentJson })
+                .then((data) => {
+                    setChanged(false);
+                    __.toast("Widget Saved", 5, 'text-success');
+                })
+                .catch((error) => {
+                    __.toast(error.message || "Something went wrong", 5, 'text-danger');
+                });
+        }
+    }
+
+    return (
+        <div className="save-button" onClick={saveHandle}>
+            <i className="fa-solid fa-floppy-disk"></i>
+        </div>
+    )
+}
+
+
+export const WidgetContent = ({ children }) => {
+
+    const { endpoint_save, endpoint_load, endpoint_fetch } = window.widgetPayload;
+    const { isEdit, contents, setContents, addContent } = useContainer();
+    const ref = useRef(null);
+
+    useEffect(() => {
+        __.http.get(endpoint_fetch)
+            .then((response) => {
+                const tempContents = [];
+                (response.data || []).forEach((item) => {
+                    tempContents.push(<Widget
+                        id={item.id}
+                        name={item.name}
+                        title={item.title}
+                        description={item.description || ''}
+                        option={item.option || { width: 200, height: 100 }}
+                        icon={item.icon || ''} />);
+                });
+                setContents(tempContents);
+            })
+    }, [])
+
+
+
+
+    return (
+        <div ref={ref} className="widget-content">
+            {contents.map((widget, index) => {
+                return (
+                    <React.Fragment key={index}>
+                        {widget}
+                    </React.Fragment>
+                )
+            })}
+            <WidgetAdd />
+            {isEdit && <SaveButton />}
+        </div>
+    )
+}

Assets/src/com/widget-content.js

@@ -0,0 +1,113 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useContainer } from "./container";
+import { Widget } from "./widget";
+
+
+
+
+export const MenuGroup = ({ name, items = [], isOpen = false }) => {
+    const [open, setOpen] = useState(isOpen);
+
+    return (
+        <div className={`menu-group${open ? ' open' : ''}`}>
+            <div className="menu-group-name" onClick={() => setOpen(!open)}>{name}</div>
+            <div className="menu-group-items">
+                {items.map((item, index) => {
+                    return (
+                        <MenuItems key={index} name={item.name} title={item.title} description={item.description} icon={item.icon} option={item.option} />
+                    )
+                })}
+            </div>
+        </div>
+    )
+}
+
+
+
+
+
+
+export const MenuItems = ({ name, title, icon = `<i class="fa-regular fa-face-smile"></i>`, description, option }) => {
+
+    const { setOpenMenu, addContent, setChanged } = useContainer();
+
+    const handleClick = () => {
+
+        console.log(name, title, icon, description, option)
+        setOpenMenu(false);
+        setChanged(true);
+        addContent(<Widget
+            id={(new Date().getTime()).toString(36)}
+            name={name}
+            title={title}
+            description={description}
+            option={Object.assign({ width: 200, height: 100 }, option || {})}
+            focus={true} />);
+    }
+
+
+
+    if (icon.startsWith("<svg")) {
+        const viewBox = icon.match(/viewBox="([^"]+)"/)[1];
+        icon = icon.replace(/\<svg.*\>/, "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" fill=\"currentColor\" viewBox=\"" + viewBox + "\">");
+    }
+
+
+    return (
+        <div className="menu-item" data-name={name} onClick={handleClick}>
+            <div className="menu-item-icon" dangerouslySetInnerHTML={{ __html: icon }}></div>
+            <div className="menu-item-title">{title}</div>
+            <div className="menu-item-description">{description}</div>
+        </div>
+    )
+}
+
+
+
+
+export const WidgetMenu = ({ children }) => {
+
+    const { isEdit, openMenu, setOpenMenu } = useContainer();
+    const ref = useRef(null);
+    const [items, setItems] = useState([]);
+
+    useEffect(() => {
+        if (!isEdit) {
+            setOpenMenu(false);
+        } else {
+            fetchMenu();
+        }
+    }, [isEdit]);
+
+
+    const fetchMenu = () => {
+
+        const { endpoint_edit, endpoint_save, endpoint_load } = window.widgetPayload;
+
+        fetch(endpoint_edit).then((response) => response.json()).then((response) => {
+            const stack = {};
+            if (response.data && Array.isArray(response.data)) {
+                response.data.forEach((item) => {
+                    if (!stack[(item.category || 'default').toLowerCase()]) {
+                        stack[(item.category || 'default').toLowerCase()] = [];
+                    }
+                    stack[(item.category || 'default').toLowerCase()].push(item);
+                })
+            }
+            setItems(stack);
+        });
+    }
+
+
+
+    return (
+        <div ref={ref} className={`widget-menu${openMenu ? ' open' : ''}`}>
+            {Object.keys(items).map((key, index) => {
+                return (
+
+                    <MenuGroup key={index} name={key} items={items[key]} isOpen={index === 0} />
+                )
+            })}
+        </div>
+    )
+}