@visns-studio/visns-components 4.10.6 → 4.10.8

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -60,6 +60,7 @@ import CustomFetch from './Fetch';
 import Download from './Download';
 import Form from './Form';
 import _ from 'lodash';
+import { distance2D } from 'framer-motion';
 
 const loadData = async (
     { skip, limit, sortInfo, filterValue },
@@ -149,6 +150,19 @@ const DataGrid = forwardRef(
             }
         }, [audioSource]);
 
+        /** JSON Modal States */
+        const [modalJsonShow, setModalJsonShow] = useState(false);
+        const [jsonData, setJsonData] = useState({});
+
+        /** JSON Modal Functions */
+        const modalJsonOpen = () => {
+            setModalJsonShow(true);
+        };
+
+        const modalJsonClose = () => {
+            setModalJsonShow(false);
+        };
+
         /** Gallery Modal States */
         const [modalGalleryShow, setModalGalleryShow] = useState(false);
         const [galleryData, setGalleryData] = useState([]);
@@ -228,23 +242,65 @@ const DataGrid = forwardRef(
             const toastId = toast.loading('Starting download please wait...');
 
             try {
-                const res = await Download(
-                    `/ajax/files/download/${d.id}/null`,
-                    'GET',
-                    {}
-                );
+                if (d.id && d.id > 0) {
+                    const res = await Download(
+                        `/ajax/files/download/${d.id}/null`,
+                        'GET',
+                        {}
+                    );
 
-                if (res.data.error) {
-                    toast.error(res.data.error);
+                    if (res.data.error) {
+                        toast.error(res.data.error);
+                    } else {
+                        // Assuming the response contains a Blob or similar data
+                        if (res.data && res.data instanceof Blob) {
+                            const fileName = `${d.file_name}`;
+                            saveAs(res.data, fileName);
+                        } else {
+                            // Handle the case where the response is not a Blob
+                            toast.error('Invalid file format received.');
+                        }
+                    }
                 } else {
-                    // Assuming the response contains a Blob or similar data
-                    if (res.data && res.data instanceof Blob) {
-                        const fileName = `${d.file_name}`;
-                        saveAs(res.data, fileName);
+                    toast.error(
+                        'An issue with downloading the file has occurred.'
+                    );
+                }
+            } catch (error) {
+                console.info(error);
+            } finally {
+                // Dismiss the loading toast in the finally block to ensure it's always dismissed
+                toast.dismiss(toastId);
+            }
+        };
+
+        const handleDownloadPath = async (file) => {
+            const toastId = toast.loading('Starting download please wait...');
+
+            try {
+                if (file.file_path && file.file_name && file.file_extension) {
+                    const res = await Download(
+                        `/ajax/files/downloadByPath`,
+                        'POST',
+                        { ...file }
+                    );
+
+                    if (res.data.error) {
+                        toast.error(res.data.error);
                     } else {
-                        // Handle the case where the response is not a Blob
-                        toast.error('Invalid file format received.');
+                        // Assuming the response contains a Blob or similar data
+                        if (res.data && res.data instanceof Blob) {
+                            const fileName = `${file.file_name}`;
+                            saveAs(res.data, fileName);
+                        } else {
+                            // Handle the case where the response is not a Blob
+                            toast.error('Invalid file format received.');
+                        }
                     }
+                } else {
+                    toast.error(
+                        'An issue with downloading the file has occurred.'
+                    );
                 }
             } catch (error) {
                 console.info(error);
@@ -570,6 +626,15 @@ const DataGrid = forwardRef(
                         );
                     }
                     break;
+                case 'view':
+                    modalJsonOpen();
+                    console.info(d[s.key], s.headers);
+                    setJsonData((prevState) => ({
+                        ...prevState,
+                        data: d[s.key],
+                        headers: s.headers,
+                    }));
+                    break;
                 case 'update':
                     modalOpen('update', d.id);
                     break;
@@ -1127,6 +1192,8 @@ const DataGrid = forwardRef(
                         return getIconComponent(Clock);
                     case 'update':
                         return getIconComponent(Edit);
+                    case 'view':
+                        return getIconComponent(Search);
                     default:
                         return null;
                 }
@@ -1709,9 +1776,19 @@ const DataGrid = forwardRef(
                                                             onClick={(e) => {
                                                                 e.stopPropagation();
                                                                 e.preventDefault();
-                                                                handleDownload(
-                                                                    file
-                                                                );
+
+                                                                if (
+                                                                    file.id &&
+                                                                    file.id > 0
+                                                                ) {
+                                                                    handleDownload(
+                                                                        file
+                                                                    );
+                                                                } else {
+                                                                    handleDownloadPath(
+                                                                        file
+                                                                    );
+                                                                }
                                                             }}
                                                             style={{
                                                                 marginRight:
@@ -2526,6 +2603,69 @@ const DataGrid = forwardRef(
             }
         };
 
+        const snakeCaseToTitle = (text) => {
+            return text
+                .replace(/_/g, ' ')
+                .replace(/\b\w/g, (char) => char.toUpperCase()); // Capitalize first letter of each word
+        };
+
+        // Recursive function to handle nested objects
+        const renderField = (key, value) => {
+            // If the value is an object, recursively render its fields
+            if (typeof value === 'object' && value !== null) {
+                return (
+                    <div key={key} style={{ marginBottom: '1rem' }}>
+                        <h4
+                            style={{
+                                fontSize: '1.2rem',
+                                marginBottom: '0.5rem',
+                                color: '#333',
+                                borderBottom: '1px solid #ccc',
+                            }}
+                        >
+                            {snakeCaseToTitle(key)}
+                        </h4>
+                        <div style={{ paddingLeft: '1.5rem' }}>
+                            {Object.keys(value).map((childKey) =>
+                                renderField(childKey, value[childKey])
+                            )}
+                        </div>
+                    </div>
+                );
+            }
+            // Otherwise, render the key and value as a label and paragraph
+            return (
+                <div key={key} style={{ marginBottom: '1rem' }}>
+                    <span
+                        style={{
+                            fontWeight: 'bold',
+                            marginBottom: '0.2rem',
+                            display: 'block',
+                            color: '#444',
+                        }}
+                    >
+                        {snakeCaseToTitle(key)}
+                    </span>
+                    <p
+                        style={{
+                            margin: 0,
+                            color: '#666',
+                            backgroundColor: '#f9f9f9',
+                            padding: '0.5rem',
+                            borderRadius: '5px',
+                        }}
+                    >
+                        {value !== null ? value : 'N/A'}
+                    </p>
+                </div>
+            );
+        };
+
+        const getHeaderLabel = (headers, parentKey) => {
+            const headerObj = headers.find((header) => header.id === parentKey);
+            return headerObj ? headerObj.label : snakeCaseToTitle(parentKey);
+        };
+
         useEffect(() => {
             columns.forEach((column) => {
                 if (column.filter && column.filter.url) {
@@ -2578,10 +2718,15 @@ const DataGrid = forwardRef(
                     : 400,
             boxShadow: 'none',
         });
+
         const headerProps = {
             style: style ? style : {},
         };
 
+        useEffect(() => {
+            console.info(jsonData);
+        }, [jsonData]);
+
         useEffect(() => {
             const getMinimumHeight = () => {
                 if (gridHeight > 0) return gridHeight;
@@ -2722,6 +2867,100 @@ const DataGrid = forwardRef(
                         </div>
                     </div>
                 </Popup>
+                <Popup
+                    open={modalJsonShow}
+                    onClose={modalJsonClose}
+                    closeOnDocumentClick={false}
+                >
+                    <div
+                        className={`${styles.modalwrap} ${styles['top--modal']}`}
+                    >
+                        <div className={styles.modal}>
+                            <div className={styles.modal__header}>
+                                <h1>View Data</h1>
+                                <button
+                                    className={styles.modal__close}
+                                    onClick={modalJsonClose}
+                                >
+                                    <CircleX strokeWidth={1} size={24} />
+                                </button>
+                            </div>
+                            <div className={styles.modal__content}>
+                                <div className={styles.formcontainer}>
+                                    <div
+                                        style={{
+                                            lineHeight: '1.5',
+                                        }}
+                                    >
+                                        {jsonData.headers &&
+                                            jsonData.headers.map((header) => {
+                                                const parentKey = header.id;
+
+                                                // Skip rendering if the parentKey is "id" or doesn't exist in jsonData
+                                                if (
+                                                    parentKey === 'id' ||
+                                                    !(
+                                                        parentKey in
+                                                        jsonData.data
+                                                    )
+                                                )
+                                                    return null;
+
+                                                return (
+                                                    <div
+                                                        key={parentKey}
+                                                        style={{
+                                                            marginBottom:
+                                                                '2rem',
+                                                        }}
+                                                    >
+                                                        {/* Section Header */}
+                                                        <h3
+                                                            style={{
+                                                                fontSize:
+                                                                    '1.4rem',
+                                                                marginBottom:
+                                                                    '1rem',
+                                                                color: '#222',
+                                                                borderBottom:
+                                                                    '2px solid #ddd',
+                                                            }}
+                                                        >
+                                                            {getHeaderLabel(
+                                                                jsonData.headers,
+                                                                parentKey
+                                                            )}
+                                                        </h3>
+                                                        <div
+                                                            style={{
+                                                                paddingLeft:
+                                                                    '1rem',
+                                                            }}
+                                                        >
+                                                            {/* Render fields for each section */}
+                                                            {Object.keys(
+                                                                jsonData.data[
+                                                                    parentKey
+                                                                ]
+                                                            ).map((childKey) =>
+                                                                renderField(
+                                                                    childKey,
+                                                                    jsonData
+                                                                        .data[
+                                                                        parentKey
+                                                                    ][childKey]
+                                                                )
+                                                            )}
+                                                        </div>
+                                                    </div>
+                                                );
+                                            })}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Popup>
             </>
         );
     }