@visns-studio/visns-components 5.6.14 → 5.7.1

package/src/components/crm/DataGrid.jsx

@@ -10,7 +10,6 @@ import React, {
     useState,
 } from 'react';
 import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
 import debounce from 'lodash.debounce';
 import moment from 'moment';
 import numeral from 'numeral';
@@ -22,11 +21,12 @@ import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
 import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
 import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
-import { confirmAlert } from 'react-confirm-alert';
 import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
 import Vapor from 'laravel-vapor';
 import Lightbox from 'yet-another-react-lightbox';
+import fetchUtil from '../../utils/fetchUtil';
+import { confirmDialog } from '../utils/ConfirmDialog';
 import {
     Alarm,
     ArrowCounterClockwise,
@@ -59,7 +59,6 @@ import {
 import styles from './styles/DataGrid.module.scss';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
-import 'react-confirm-alert/src/react-confirm-alert.css';
 import 'yet-another-react-lightbox/styles.css';
 
 import CustomFetch from './Fetch';
@@ -119,7 +118,7 @@ const loadData = async (
     }
 
     try {
-        const response = await axios.post(url, params);
+        const response = await fetchUtil.post(url, params);
         const { data, total } = response.data;
         return { data, count: total };
     } catch (error) {
@@ -493,43 +492,15 @@ const DataGrid = forwardRef(
 
         const handleTimer = async (id, key, data) => {
             try {
-                // Special handling for galvanizing timers to generate dip numbers
-                if (
-                    key === 'galvanizing_start_1' ||
-                    key === 'galvanizing_start_2'
-                ) {
-                    // For galvanizing_start_1 and galvanizing_start_2, we need to generate dip numbers
-                    const payload = {
-                        [key]: moment().toDate(),
-                        timer_type: key, // Pass the timer type to the backend
-                    };
-
-                    const res = await CustomFetch(
-                        `${form.url}/${id}/timer`,
-                        'PUT',
-                        payload
-                    );
+                const res = await CustomFetch(`${form.url}/${id}`, 'PUT', {
+                    [key]: moment().toDate(),
+                });
 
-                    if (res.data.error === '') {
-                        toast.success(
-                            'Timer has been updated and dip number generated.'
-                        );
-                        handleReload();
-                    } else {
-                        toast.error(res.data.error);
-                    }
+                if (res.data.error === '') {
+                    toast.success('Timer has been updated.');
+                    handleReload();
                 } else {
-                    // Normal timer handling for other stages
-                    const res = await CustomFetch(`${form.url}/${id}`, 'PUT', {
-                        [key]: moment().toDate(),
-                    });
-
-                    if (res.data.error === '') {
-                        toast.success('Timer has been updated.');
-                        handleReload();
-                    } else {
-                        toast.error(res.data.error);
-                    }
+                    toast.error(res.data.error);
                 }
             } catch (error) {
                 console.info(error);
@@ -538,32 +509,74 @@ const DataGrid = forwardRef(
 
         const handleSelectionChange = useCallback(
             (param) => {
-                if (param.selected === true) {
-                    const s = {};
-
-                    param.data.forEach((obj) => {
-                        s[obj.id] = obj;
-                    });
+                // If this is a new selection (not a deselection)
+                if (
+                    param.selected === true ||
+                    (typeof param.selected === 'object' &&
+                        Object.keys(param.selected).length > 0)
+                ) {
+                    // Show confirmation dialog for selection
+                    const selectedCount =
+                        param.selected === true ? param.data.length : 1;
+                    const itemText = selectedCount === 1 ? 'item' : 'items';
+
+                    confirmDialog({
+                        title: 'Selection Confirmation',
+                        message: `You have selected ${selectedCount} ${itemText}. Do you want to proceed with this selection?`,
+                        data:
+                            param.selected === true
+                                ? param.data
+                                : param.selected, // Pass the selected data
+                        buttons: [
+                            {
+                                label: 'Yes',
+                                onClick: () => {
+                                    // Process the selection as before
+                                    if (param.selected === true) {
+                                        const s = {};
+                                        param.data.forEach((obj) => {
+                                            s[obj.id] = obj;
+                                        });
+                                        setSelected(s);
+                                    } else if (
+                                        typeof param.selected === 'object'
+                                    ) {
+                                        const selectedKey = Object.keys(
+                                            param.selected
+                                        )[0];
+                                        const isSelectedAlready =
+                                            selected.hasOwnProperty(
+                                                selectedKey
+                                            );
 
-                    setSelected(s);
-                } else if (typeof param.selected === 'object') {
-                    // Assuming param.selected is an object where keys are the ids of the selections
-                    const selectedKey = Object.keys(param.selected)[0]; // Get the key of the selected object
-                    const isSelectedAlready =
-                        selected.hasOwnProperty(selectedKey); // Check if this key is already in selected
+                                        if (isSelectedAlready) {
+                                            setSelected({});
+                                        } else {
+                                            setSelected((prevSelected) => ({
+                                                ...prevSelected,
+                                                [selectedKey]:
+                                                    param.selected[selectedKey],
+                                            }));
+                                        }
+                                    }
 
-                    if (isSelectedAlready) {
-                        // If the key already exists, reset selected
-                        setSelected({});
-                    } else {
-                        // If it does not exist, update selected with the new object
-                        setSelected((prevSelected) => ({
-                            ...prevSelected,
-                            [selectedKey]: param.selected[selectedKey],
-                        }));
-                    }
+                                    // Show a success message
+                                    toast.success(
+                                        `Selection of ${selectedCount} ${itemText} confirmed`
+                                    );
+                                },
+                            },
+                            {
+                                label: 'No',
+                                onClick: () => {
+                                    // Clear selection if user cancels
+                                    setSelected({});
+                                },
+                            },
+                        ],
+                    });
                 } else {
-                    // Handle other cases as needed
+                    // Handle deselection directly without confirmation
                     setSelected(param.selected);
                 }
             },
@@ -645,18 +658,86 @@ const DataGrid = forwardRef(
                 case 'file':
                 case 'image':
                 case 'undo':
-                    CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
-                        toast.success(result.message);
+                    // Create a user-friendly action name from the ID
+                    const actionName =
+                        s.title || s.id.charAt(0).toUpperCase() + s.id.slice(1);
+
+                    // Create a message based on the action type
+                    let message = `Are you sure you want to ${actionName.toLowerCase()}?`;
+
+                    // Add item identifier if available
+                    const itemName = d.name || d.label || d.title || d.id;
+                    if (itemName) {
+                        message += ` Item: "${itemName}"`;
+                    }
+
+                    // Show confirmation dialog
+                    confirmDialog({
+                        title: actionName,
+                        message: message,
+                        data: d, // Pass the row data for context
+                        buttons: [
+                            {
+                                label: 'Yes',
+                                onClick: () => {
+                                    CustomFetch(
+                                        s.url,
+                                        'POST',
+                                        { id: d[s.key] },
+                                        (result) => {
+                                            toast.success(result.message);
+                                        }
+                                    );
+                                },
+                            },
+                            {
+                                label: 'No',
+                                onClick: () => {},
+                            },
+                        ],
                     });
                     break;
                 case 'clone':
                     if (s.url && s.url !== '') {
-                        const cloneUrl = `${s.url}/${d[s.key]}/clone`;
-
-                        CustomFetch(cloneUrl, 'POST', {}, (result) => {
-                            toast.success(result.message);
+                        // Create a message for clone action
+                        let cloneMessage = `Are you sure you want to clone this item?`;
+
+                        // Add item identifier if available
+                        const cloneItemName =
+                            d.name || d.label || d.title || d.id;
+                        if (cloneItemName) {
+                            cloneMessage += ` Item: "${cloneItemName}"`;
+                        }
 
-                            handleReload();
+                        // Show confirmation dialog
+                        confirmDialog({
+                            title: 'Clone Item',
+                            message: cloneMessage,
+                            data: d, // Pass the row data for context
+                            buttons: [
+                                {
+                                    label: 'Yes',
+                                    onClick: () => {
+                                        const cloneUrl = `${s.url}/${
+                                            d[s.key]
+                                        }/clone`;
+
+                                        CustomFetch(
+                                            cloneUrl,
+                                            'POST',
+                                            {},
+                                            (result) => {
+                                                toast.success(result.message);
+                                                handleReload();
+                                            }
+                                        );
+                                    },
+                                },
+                                {
+                                    label: 'No',
+                                    onClick: () => {},
+                                },
+                            ],
                         });
                     }
                     break;
@@ -748,9 +829,10 @@ const DataGrid = forwardRef(
                                   }?`;
                     }
 
-                    confirmAlert({
+                    confirmDialog({
                         title: 'Delete Item',
                         message: confirmMessage,
+                        data: d, // Pass the row data
                         buttons: [
                             {
                                 label: 'Yes',
@@ -889,9 +971,10 @@ const DataGrid = forwardRef(
                     modalOpen('update', d.id);
                     break;
                 default:
-                    confirmAlert({
+                    confirmDialog({
                         title: s.title,
                         message: '',
+                        data: d, // Pass the row data
                         buttons: [
                             {
                                 label: 'Yes',
@@ -1509,11 +1592,71 @@ const DataGrid = forwardRef(
                 e.preventDefault();
                 e.stopPropagation();
 
-                // Ensure both s and d are defined before calling handleSettingClick
-                if (s && d) {
-                    handleSettingClick(s, d);
-                } else {
+                // Ensure both s and d are defined before proceeding
+                if (!s || !d) {
                     console.warn('Missing settings or data for icon click');
+                    return;
+                }
+
+                // Actions that should have confirmation dialogs
+                const actionsRequiringConfirmation = [
+                    'activate',
+                    'arrowCycle',
+                    'cloudUpload',
+                    'clone',
+                    'envelope',
+                    'file',
+                    'image',
+                    'undo',
+                    'restore',
+                ];
+
+                // If this action requires confirmation, show a dialog
+                if (actionsRequiringConfirmation.includes(s.id)) {
+                    // Get a user-friendly action name from the title or ID
+                    const actionName =
+                        s.title || s.id.charAt(0).toUpperCase() + s.id.slice(1);
+
+                    // Create a message based on the action type
+                    let message = '';
+                    if (s.id === 'delete') {
+                        // Delete already has its own confirmation message
+                        handleSettingClick(s, d);
+                        return;
+                    } else {
+                        // For other actions, create a message based on the tooltip content
+                        const tooltipContent =
+                            s.active && iconStyle.color
+                                ? s.active.title
+                                : s.title;
+                        message = `Are you sure you want to ${tooltipContent.toLowerCase()}?`;
+
+                        // Add item identifier if available
+                        const itemName = d.name || d.label || d.title || d.id;
+                        if (itemName) {
+                            message += ` Item: "${itemName}"`;
+                        }
+                    }
+
+                    // Show the confirmation dialog
+                    confirmDialog({
+                        title: actionName,
+                        message: message,
+                        data: d, // Pass the row data for context
+                        buttons: [
+                            {
+                                label: 'Yes',
+                                onClick: () => handleSettingClick(s, d),
+                            },
+                            {
+                                label: 'No',
+                                onClick: () => {},
+                            },
+                        ],
+                    });
+                } else {
+                    // For actions that don't need confirmation, proceed directly
+                    handleSettingClick(s, d);
                 }
             };
 

package/src/components/crm/Download.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import axios from 'axios';
 import { trackPromise } from 'react-promise-tracker';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
+import fetchUtil from '../../utils/fetchUtil';
 
 const CustomDownload = (
     url,
@@ -11,7 +11,18 @@ const CustomDownload = (
     successCallback = null,
     errorCallback = null
 ) => {
-    let headers = {};
+    let headers = {
+        'X-Requested-With': 'XMLHttpRequest',
+    };
+
+    // Add CSRF token if available
+    const csrfToken = document
+        .querySelector('meta[name="csrf-token"]')
+        ?.getAttribute('content');
+    if (csrfToken) {
+        headers['X-CSRF-TOKEN'] = csrfToken;
+        headers['X-XSRF-TOKEN'] = csrfToken;
+    }
     let options = {};
 
     if (method.toUpperCase() === 'PUT' || method.toUpperCase() === 'PATCH') {
@@ -39,7 +50,7 @@ const CustomDownload = (
     return trackPromise(
         new Promise((resolve, reject) => {
             // First, make a request without responseType: 'blob' to check for errors
-            axios({
+            fetchUtil({
                 method: method,
                 data: formData,
                 headers: headers,
@@ -64,7 +75,7 @@ const CustomDownload = (
                         resolve(response);
                     } else {
                         // If no error, make the actual blob request
-                        axios({
+                        fetchUtil({
                             method: method,
                             data: formData,
                             headers: headers,

package/src/components/crm/Fetch.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import axios from 'axios';
 import { trackPromise } from 'react-promise-tracker';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
@@ -14,7 +13,17 @@ const CustomFetch = (
     const baseUrl = '';
     const headers = {
         'Content-Type': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
     };
+
+    // Add CSRF token if available
+    const csrfToken = document
+        .querySelector('meta[name="csrf-token"]')
+        ?.getAttribute('content');
+    if (csrfToken) {
+        headers['X-CSRF-TOKEN'] = csrfToken;
+        headers['X-XSRF-TOKEN'] = csrfToken;
+    }
     const MAX_PAYLOAD_SIZE_MB =
         parseFloat(import.meta.env.VITE_MAX_PAYLOAD_SIZE_MB) || 4.5;
     const MAX_PAYLOAD_SIZE = MAX_PAYLOAD_SIZE_MB * 1024 * 1024; // Convert MB to bytes
@@ -48,36 +57,80 @@ const CustomFetch = (
         };
     }
 
-    const options = {
+    // Configure fetch options
+    const fetchOptions = {
         method: method,
-        data: formData,
         headers: headers,
-        url: baseUrl + url,
     };
 
+    // For GET and HEAD requests, convert formData to query parameters
+    if (method.toUpperCase() === 'GET' || method.toUpperCase() === 'HEAD') {
+        if (formData && Object.keys(formData).length > 0) {
+            // Convert formData to query string
+            const queryParams = new URLSearchParams();
+            Object.entries(formData).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    queryParams.append(key, value);
+                }
+            });
+            const queryString = queryParams.toString();
+            if (queryString) {
+                url += (url.includes('?') ? '&' : '?') + queryString;
+            }
+        }
+    } else {
+        // For other methods, add body
+        fetchOptions.body = formData ? JSON.stringify(formData) : undefined;
+    }
+
     return trackPromise(
         new Promise((resolve, reject) => {
-            axios(options)
-                .then((response) => {
-                    if (successCallback) {
-                        successCallback(response.data);
+            fetch(baseUrl + url, fetchOptions)
+                .then(async (response) => {
+                    // Parse the response data
+                    const contentType = response.headers.get('content-type');
+                    let data;
+
+                    if (
+                        contentType &&
+                        contentType.includes('application/json')
+                    ) {
+                        data = await response.json();
                     } else {
-                        const error = response.data.error;
+                        data = await response.text();
+                    }
+
+                    // Create a response object similar to axios for compatibility
+                    const responseObj = {
+                        data: data,
+                        status: response.status,
+                        statusText: response.statusText,
+                        headers: response.headers,
+                        ok: response.ok,
+                    };
 
+                    if (!response.ok) {
+                        // Handle error responses (4xx, 5xx)
+                        const error = new Error(response.statusText);
+                        error.response = responseObj;
+                        throw error;
+                    }
+
+                    // Handle success
+                    if (successCallback) {
+                        successCallback(data);
+                    } else {
+                        const error = data.error;
                         if (error && error !== '') {
                             toast.error(<div>{parse(error)}</div>);
                         }
                     }
-                    resolve(response);
+                    resolve(responseObj);
                 })
                 .catch((error) => {
                     let errorMessage = '';
 
-                    if (
-                        error.response &&
-                        error.response.data &&
-                        error.response.data.message
-                    ) {
+                    if (error.response && error.response.data) {
                         const { data } = error.response;
 
                         if (data.errors) {
@@ -88,7 +141,7 @@ const CustomFetch = (
                                     errorMessage += `${errorMsg}<br />`;
                                 });
                             });
-                        } else {
+                        } else if (data.message) {
                             if (data.message === 'CSRF token mismatch.') {
                                 window.location.replace('/login');
                             } else {

package/src/components/crm/Form.jsx

@@ -10,11 +10,10 @@ import parse from 'html-react-parser';
 import _ from 'lodash';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import { CircleX } from 'akar-icons';
-import { confirmAlert } from 'react-confirm-alert';
 import imageCompression from 'browser-image-compression';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
-import 'react-confirm-alert/src/react-confirm-alert.css';
 
 import CustomFetch from './Fetch';
 import Download from './Download';
@@ -598,11 +597,12 @@ function Form({
 
         try {
             if (s.customButton.confirmation) {
-                confirmAlert({
+                confirmDialog({
                     title: '',
                     message:
                         s.customButton.confirmation.message ||
                         'Are you sure you want to proceed?',
+                    data: formData, // Add context data
                     buttons: [
                         {
                             label: 'Yes',