@visns-studio/visns-components 5.2.6 → 5.2.8

package/package.json

@@ -78,7 +78,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.2.6",
+    "version": "5.2.8",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Form.jsx

@@ -215,12 +215,15 @@ function Form({
         const handleSelectOption = () => {
             updateFormData({ [id]: inputValue });
 
-            // Update any matching form data properties except for the second item
-            Object.keys(inputValue).forEach((key, index) => {
-                if (index !== 1 && formData.hasOwnProperty(key)) {
-                    updateFormData({ [key]: inputValue[key] });
-                }
-            });
+            // Update any matching form data properties
+            Object.keys(inputValue)
+                .filter(
+                    (key) =>
+                        formData.hasOwnProperty(key) &&
+                        key !== 'id' &&
+                        key !== 'label'
+                )
+                .forEach((key) => updateFormData({ [key]: inputValue[key] }));
 
             formSettings.fields.forEach((field) => {
                 if (field.id === id && field.trigger) {

package/src/components/crm/generic/GenericDashboard.jsx

@@ -8,7 +8,9 @@ import Popup from 'reactjs-popup';
 import dayjs from 'dayjs';
 import parse from 'html-react-parser';
 import { createSwapy } from 'swapy';
-import { CircleX, Minus, Plus, Star } from 'akar-icons';
+import { CircleX, Minus, Plus, Star, TrashCan } from 'akar-icons';
+import { confirmAlert } from 'react-confirm-alert';
+import 'react-confirm-alert/src/react-confirm-alert.css';
 
 import CustomFetch from '../../crm/Fetch';
 import MultiSelect from '../../crm/MultiSelect';
@@ -30,6 +32,18 @@ function GenericDashboard({ setting, userProfile }) {
     const [modalShow, setModalShow] = useState(false);
     const [modalContent, setModalContent] = useState(null);
     const [editMode, setEditMode] = useState(false);
+    const [showAddWidgetModal, setShowAddWidgetModal] = useState(false);
+    const [selectedAddWidgetId, setSelectedAddWidgetId] = useState('');
+    // Flag used only for triggering reinitialization after widget addition.
+    const [widgetAdded, setWidgetAdded] = useState(false);
+
+    // Compute available widgets from original settings that are not yet added.
+    const availableWidgets = setting.widgets.filter(
+        (widget) =>
+            !dashboardSetting.widgets.find(
+                (dashWidget) => dashWidget.id === widget.id
+            )
+    );
 
     const getDefaultDate = (defaultValue) => {
         switch (defaultValue) {
@@ -42,7 +56,7 @@ function GenericDashboard({ setting, userProfile }) {
         }
     };
 
-    // Initialize filters based on each widget’s filters
+    // Initialize filters based on each widget’s filters.
     useEffect(() => {
         const initialFilters = {};
         dashboardSetting.widgets.forEach((widget) => {
@@ -70,7 +84,6 @@ function GenericDashboard({ setting, userProfile }) {
         try {
             const promises = dashboardSetting.widgets.map(async (widget) => {
                 const widgetFilters = appliedFilters[widget.id] || {};
-
                 if (widget.filters) {
                     for (const filter of widget.filters) {
                         if (filter.url) {
@@ -97,7 +110,6 @@ function GenericDashboard({ setting, userProfile }) {
                         }
                     }
                 }
-
                 if (widget.api?.url && widget.api?.method) {
                     return CustomFetch(
                         widget.api.url,
@@ -107,7 +119,6 @@ function GenericDashboard({ setting, userProfile }) {
                 }
                 return null;
             });
-
             const results = await Promise.all(promises);
             const fetchedData = dashboardSetting.widgets.reduce(
                 (acc, widget, index) => {
@@ -150,7 +161,6 @@ function GenericDashboard({ setting, userProfile }) {
     const handleFilterSelectChange = (value, action, id) => {
         const widgetId = id.split('.')[0];
         const filterId = id.split('.')[1];
-
         if (action.action === 'select-option') {
             setFilters((prevFilters) => ({
                 ...prevFilters,
@@ -207,7 +217,6 @@ function GenericDashboard({ setting, userProfile }) {
                     } else if (direction === 'decrease' && currentIndex > 0) {
                         newSize = order[currentIndex - 1];
                     }
-
                     return { ...widget, size: newSize };
                 }
                 return widget;
@@ -218,7 +227,7 @@ function GenericDashboard({ setting, userProfile }) {
         });
     };
 
-    // Toggle the highlight state of a widget
+    // Toggle the highlight state of a widget.
     const toggleHighlight = (widgetId) => {
         setDashboardSetting((prevSetting) => {
             const updatedWidgets = prevSetting.widgets.map((widget) => {
@@ -233,7 +242,48 @@ function GenericDashboard({ setting, userProfile }) {
         });
     };
 
-    // Map widget size to a CSS class
+    // Delete a widget from the dashboard after confirming.
+    const handleDeleteWidget = (widgetId) => {
+        setDashboardSetting((prevSetting) => {
+            const newWidgets = prevSetting.widgets.filter(
+                (widget) => widget.id !== widgetId
+            );
+            const newSetting = { ...prevSetting, widgets: newWidgets };
+            updateDashboardSetting(newSetting);
+            return newSetting;
+        });
+    };
+
+    const confirmDelete = (widgetId) => {
+        confirmAlert({
+            title: 'Confirm to delete',
+            message: 'Are you sure you want to delete this widget?',
+            buttons: [
+                { label: 'Yes', onClick: () => handleDeleteWidget(widgetId) },
+                { label: 'No' },
+            ],
+        });
+    };
+
+    // Add a widget to the dashboard (append to end). After adding, set widgetAdded flag.
+    const handleAddWidget = () => {
+        const widgetToAdd = setting.widgets.find(
+            (widget) => widget.id === selectedAddWidgetId
+        );
+        if (widgetToAdd) {
+            setDashboardSetting((prevSetting) => {
+                const newWidgets = [...prevSetting.widgets, widgetToAdd];
+                const newSetting = { ...prevSetting, widgets: newWidgets };
+                updateDashboardSetting(newSetting);
+                return newSetting;
+            });
+            setSelectedAddWidgetId('');
+            setShowAddWidgetModal(false);
+            setWidgetAdded(true); // Trigger reinitialization after addition.
+        }
+    };
+
+    // Map widget size to a CSS class.
     const getGridClass = (size) => {
         switch (size) {
             case 'full':
@@ -465,7 +515,6 @@ function GenericDashboard({ setting, userProfile }) {
                         }, {});
                         widget.props.legendLabel = (e) =>
                             legendMapping[e.id] || e.id;
-
                         const CustomTooltip = ({ id, value, color }) => {
                             const label = legendMapping[id] || id;
                             return (
@@ -482,12 +531,10 @@ function GenericDashboard({ setting, userProfile }) {
                                 </div>
                             );
                         };
-
                         widget.props.tooltip = CustomTooltip;
                     }
                     const barData =
                         widgetData.bar?.data || widgetData.data || widgetData;
-
                     if (barData?.length > 0) {
                         return (
                             <div style={{ height: widget.height || '600px' }}>
@@ -784,17 +831,11 @@ function GenericDashboard({ setting, userProfile }) {
         }
     };
 
-    // Drag-and-drop swap handling. Each widget is given a slot based on its index.
+    // Swap handler.
     const handleWidgetSwap = (event) => {
-        const parseSlot = (slot) => {
-            // Slot format: "widget-slot-INDEX"
-            const parts = slot.split('-');
-            return parseInt(parts[2], 10);
-        };
-
+        const parseSlot = (slot) => parseInt(slot.split('-')[2], 10);
         const fromIndex = parseSlot(event.fromSlot);
         const toIndex = parseSlot(event.toSlot);
-
         setDashboardSetting((prevSetting) => {
             const newWidgets = [...prevSetting.widgets];
             [newWidgets[fromIndex], newWidgets[toIndex]] = [
@@ -807,120 +848,138 @@ function GenericDashboard({ setting, userProfile }) {
         });
     };
 
+    // Effect to reinitialize Swapy when editMode changes.
     useEffect(() => {
         if (editMode && container.current) {
+            swapy.current?.destroy();
             swapy.current = createSwapy(container.current, {
                 manualSwap: true,
             });
             swapy.current.onSwap((event) => {
-                console.log('swap event', event);
                 handleWidgetSwap(event);
             });
-        }
-        return () => {
+        } else {
             swapy.current?.destroy();
             swapy.current = null;
-        };
+        }
+        // This effect depends solely on editMode.
     }, [editMode]);
 
+    // Separate effect to reinitialize Swapy after a widget is added.
+    useEffect(() => {
+        if (widgetAdded && editMode && container.current) {
+            swapy.current?.destroy();
+            swapy.current = createSwapy(container.current, {
+                manualSwap: true,
+            });
+            swapy.current.onSwap((event) => {
+                handleWidgetSwap(event);
+            });
+            setWidgetAdded(false);
+        }
+        // This effect only triggers when widgetAdded changes.
+    }, [widgetAdded, editMode]);
+
     const renderWidgets = () => {
-        return dashboardSetting.widgets.map((widget, index) => {
-            return (
+        return dashboardSetting.widgets.map((widget, index) => (
+            <div
+                key={widget.id}
+                className={`${getGridClass(widget.size)} ${
+                    widget.type !== 'list'
+                        ? widget.highlight
+                            ? styles['dashwidget--highlight']
+                            : styles.dashwidget
+                        : ''
+                } ${
+                    editMode
+                        ? widget.highlight
+                            ? styles.editModeWidgetHighlight
+                            : styles.editModeWidgetNormal
+                        : ''
+                }`}
+                style={editMode ? { cursor: 'grab' } : {}}
+                {...(editMode && { 'data-swapy-slot': `widget-slot-${index}` })}
+            >
                 <div
-                    key={widget.id}
-                    className={`${getGridClass(widget.size)} ${
-                        widget.type !== 'list'
-                            ? widget.highlight
-                                ? styles['dashwidget--highlight']
-                                : styles.dashwidget
-                            : ''
-                    } ${
-                        editMode
-                            ? widget.highlight
-                                ? styles.editModeWidgetHighlight
-                                : styles.editModeWidgetNormal
-                            : ''
-                    }`}
-                    style={editMode ? { cursor: 'grab' } : {}}
                     {...(editMode && {
-                        'data-swapy-slot': `widget-slot-${index}`,
+                        'data-swapy-item': `widget-${widget.id}`,
                     })}
+                    className={`${styles.widgetItem}`}
                 >
-                    <div
-                        {...(editMode && {
-                            'data-swapy-item': `widget-${widget.id}`,
-                        })}
-                        className={`${styles.widgetItem}`}
-                    >
-                        <div className={styles.widgetTitle}>
-                            <h2>{widget.title}</h2>
+                    <div className={styles.widgetTitle}>
+                        <h2>{widget.title}</h2>
+                    </div>
+                    {renderFilters(widget)}
+                    <div>{renderWidget(widget)}</div>
+                    {widget.modal && (
+                        <div className={styles.widgetAction}>
+                            <button
+                                className={`${styles.btn} ${styles.dmore}`}
+                                onClick={() => openModal(widget.id)}
+                            >
+                                View all{' '}
+                                <span>({data[widget.id]?.length || 0})</span>
+                            </button>
                         </div>
-                        {renderFilters(widget)}
-                        <div>{renderWidget(widget)}</div>
-                        {widget.modal && (
-                            <div className={styles.widgetAction}>
+                    )}
+                    {editMode && (
+                        <div className={styles.widgetTools}>
+                            <div className={styles.resizeTools}>
                                 <button
-                                    className={`${styles.btn} ${styles.dmore}`}
-                                    onClick={() => openModal(widget.id)}
+                                    onClick={() => toggleHighlight(widget.id)}
                                 >
-                                    View all{' '}
-                                    <span>
-                                        ({data[widget.id]?.length || 0})
-                                    </span>
+                                    <Star strokeWidth={2} size={12} />
                                 </button>
-                            </div>
-                        )}
-                        {editMode && (
-                            <div className={styles.widgetTools}>
-                                <div className={styles.resizeTools}>
+                                {(widget.size || '1/3') !== '1/3' && (
                                     <button
                                         onClick={() =>
-                                            toggleHighlight(widget.id)
+                                            changeSize(widget.id, 'decrease')
                                         }
                                     >
-                                        <Star strokeWidth={2} size={12} />
+                                        <Minus strokeWidth={2} size={12} />
                                     </button>
-                                    {(widget.size || '1/3') !== '1/3' && (
-                                        <button
-                                            onClick={() =>
-                                                changeSize(
-                                                    widget.id,
-                                                    'decrease'
-                                                )
-                                            }
-                                        >
-                                            <Minus strokeWidth={2} size={12} />
-                                        </button>
-                                    )}
-                                    {(widget.size || '1/3') !== 'full' && (
-                                        <button
-                                            onClick={() =>
-                                                changeSize(
-                                                    widget.id,
-                                                    'increase'
-                                                )
-                                            }
-                                        >
-                                            <Plus strokeWidth={2} size={12} />
-                                        </button>
-                                    )}
-                                </div>
+                                )}
+                                {(widget.size || '1/3') !== 'full' && (
+                                    <button
+                                        onClick={() =>
+                                            changeSize(widget.id, 'increase')
+                                        }
+                                    >
+                                        <Plus strokeWidth={2} size={12} />
+                                    </button>
+                                )}
+                                <button
+                                    onClick={() => confirmDelete(widget.id)}
+                                >
+                                    <TrashCan strokeWidth={2} size={12} />
+                                </button>
                             </div>
-                        )}
-                    </div>
+                        </div>
+                    )}
                 </div>
-            );
-        });
+            </div>
+        ));
     };
 
     return (
         <>
             <div className={styles.editButtonContainer}>
+                {editMode && (
+                    <>
+                        <button
+                            className={styles.btn}
+                            style={{ marginRight: '10px' }}
+                            onClick={() => setShowAddWidgetModal(true)}
+                        >
+                            Add Widget
+                        </button>
+                    </>
+                )}
                 <button
                     className={styles.btn}
                     onClick={() => setEditMode((prev) => !prev)}
                 >
-                    {editMode ? 'Done' : 'Edit'}
+                    {editMode ? 'Done' : 'Edit Dashboard'}
                 </button>
             </div>
             <div className={styles.grid} ref={container}>
@@ -954,6 +1013,63 @@ function GenericDashboard({ setting, userProfile }) {
                         </div>
                     </div>
                 </Popup>
+                <Popup
+                    open={showAddWidgetModal}
+                    onClose={() => setShowAddWidgetModal(false)}
+                    modal
+                >
+                    <div className="modalwrap">
+                        <div className={`${styles.addWidgetPopup} modal`}>
+                            <div className="modal__header">
+                                <h1>Add a Widget</h1>
+                                <button
+                                    className="modal__close"
+                                    onClick={() => setShowAddWidgetModal(false)}
+                                >
+                                    <CircleX strokeWidth={1} size={24} />
+                                </button>
+                            </div>
+                            <div className="modal__content">
+                                {availableWidgets.length > 0 ? (
+                                    <div>
+                                        <select
+                                            value={selectedAddWidgetId}
+                                            onChange={(e) =>
+                                                setSelectedAddWidgetId(
+                                                    e.target.value
+                                                )
+                                            }
+                                            className={styles.addWidgetSelect}
+                                        >
+                                            <option value="">
+                                                -- Select a widget --
+                                            </option>
+                                            {availableWidgets.map((widget) => (
+                                                <option
+                                                    key={widget.id}
+                                                    value={widget.id}
+                                                >
+                                                    {widget.title}
+                                                </option>
+                                            ))}
+                                        </select>
+                                        <button
+                                            className={styles.addWidgetButton}
+                                            onClick={handleAddWidget}
+                                            disabled={!selectedAddWidgetId}
+                                        >
+                                            Add
+                                        </button>
+                                    </div>
+                                ) : (
+                                    <div className={styles.noWidgetsMessage}>
+                                        No more widgets available
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </Popup>
             </div>
         </>
     );

package/src/components/crm/generic/styles/GenericDashboard.module.scss

@@ -536,3 +536,38 @@
 .widgetItem {
     position: relative;
 }
+
+/* Styles for the Add Widget Popup */
+.addWidgetSelect {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 1rem;
+    border: 1px solid #dadce0;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+
+.addWidgetButton {
+    width: 100%;
+    padding: 10px;
+    background: var(--primary-color);
+    color: var(--tertiary-color);
+    border: none;
+    border-radius: 5px;
+    font-size: 1rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background-color 0.25s ease;
+}
+
+.addWidgetButton:hover {
+    background: var(--secondary-color);
+}
+
+.noWidgetsMessage {
+    text-align: center;
+    font-size: 1rem;
+    color: #888;
+    padding: 20px;
+}