@visns-studio/visns-components 5.3.14 → 5.4.0

package/package.json

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

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

@@ -321,6 +321,31 @@ function GenericDetail({
         }
     };
 
+    const handleCheckboxDelete = async () => {
+        try {
+            if (currentConfigRef.current.functions.checkboxDelete) {
+                const { data, method, message, url } =
+                    currentConfigRef.current.functions.checkboxDelete;
+                if (!Object.keys(rowsSelected).length) {
+                    toast.warning(message.warning);
+                    return;
+                }
+                const res = await CustomFetch(url, method, {
+                    ...data,
+                    rows: rowsSelected,
+                });
+                if (res.data.error === '') {
+                    toast.success(message.success);
+                    gridRef.current.reload();
+                } else {
+                    toast.error(message.error);
+                }
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
     const handleReload = () => {
         const min = 0;
         const max = 999999999;
@@ -877,10 +902,6 @@ function GenericDetail({
         }
     };
 
-    useEffect(() => {
-        console.info(activeTabConfig);
-    }, [activeTabConfig]);
-
     const renderContent = () => {
         if (subnav && subnav.length > 0) {
             const activeTab = subnav.find((s) => s.show === true);
@@ -1913,6 +1934,22 @@ function GenericDetail({
                                                 </button>
                                             </div>
                                         )}
+
+                                        {activeTabConfig.functions
+                                            ?.checkboxDelete && (
+                                            <div className={styles.polActions}>
+                                                <button
+                                                    className={styles.btn}
+                                                    onClick={
+                                                        handleCheckboxDelete
+                                                    }
+                                                >
+                                                    {activeTabConfig.functions
+                                                        .checkboxDelete.label ||
+                                                        'Delete'}
+                                                </button>
+                                            </div>
+                                        )}
                                     </>
                                 );
                             } else {

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

@@ -249,6 +249,52 @@ function GenericIndex({
         tableData,
     ]);
 
+    const handleCheckboxDelete = async () => {
+        try {
+            const { data, method, message, url } = setting?.functions
+                ?.checkboxDelete
+                ? setting.functions.checkboxDelete
+                : config.form?.functions?.checkboxDelete;
+
+            if (!Object.keys(rowsSelectedRef.current).length) {
+                toast.warning(message.warning);
+                return;
+            }
+
+            // Create a map of selected rows with full data from tableData
+            const selectedRowsData = {};
+            Object.entries(rowsSelectedRef.current).forEach(([id, value]) => {
+                if (value) {
+                    const fullRowData = tableData.find(
+                        (row) => row.id === parseInt(id)
+                    );
+                    if (fullRowData) {
+                        selectedRowsData[id] = fullRowData;
+                    }
+                }
+            });
+
+            const res = await CustomFetch(url, method, {
+                ...data,
+                rows: selectedRowsData,
+            });
+
+            if (res.data.error === '') {
+                toast.success(message.success);
+                gridRef.current?.reload();
+                // Clear selections after successful delete
+                rowsSelectedRef.current = {};
+            } else {
+                toast.error(message.error);
+            }
+        } catch (err) {
+            console.error(err);
+            toast.error(
+                'An error occurred while processing the delete request'
+            );
+        }
+    };
+
     const handleExport = async (e) => {
         try {
             if (e) {
@@ -464,34 +510,48 @@ function GenericIndex({
 
             <div className={styles.grid}>{renderContent()}</div>
             <Outlet />
-            {setting.functions?.checkboxUpdate && (
-                <div className={styles.polActions}>
+
+            <div className={styles.polActions}>
+                {setting.functions?.checkboxUpdate && (
                     <button
                         className={styles.btn}
                         onClick={handleCheckboxUpdate}
                     >
                         {setting.functions.checkboxUpdate.label || 'Update'}
                     </button>
-                </div>
-            )}
-            {config?.form?.functions?.checkboxUpdate && (
-                <div className={styles.polActions}>
+                )}
+                {config?.form?.functions?.checkboxUpdate && (
                     <button
                         className={styles.btn}
                         onClick={handleCheckboxUpdate}
                     >
                         {config.form.functions.checkboxUpdate.label || 'Update'}
                     </button>
-                </div>
-            )}
+                )}
+
+                {setting.functions?.checkboxDelete && (
+                    <button
+                        className={styles.btn}
+                        onClick={handleCheckboxDelete}
+                    >
+                        {setting.functions.checkboxDelete.label || 'Delete'}
+                    </button>
+                )}
+                {config?.form?.functions?.checkboxDelete && (
+                    <button
+                        className={styles.btn}
+                        onClick={handleCheckboxDelete}
+                    >
+                        {config.form.functions.checkboxDelete.label || 'Delete'}
+                    </button>
+                )}
 
-            {setting.export?.label && (
-                <div className={styles.polActions}>
+                {setting.export?.label && (
                     <button className={styles.btn} onClick={handleExport}>
                         {setting.export.label}
                     </button>
-                </div>
-            )}
+                )}
+            </div>
         </>
     );
 }