@visns-studio/visns-components 4.10.6 → 4.10.7

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.7",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -149,6 +149,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([]);
@@ -570,6 +583,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 +1149,8 @@ const DataGrid = forwardRef(
                         return getIconComponent(Clock);
                     case 'update':
                         return getIconComponent(Edit);
+                    case 'view':
+                        return getIconComponent(Search);
                     default:
                         return null;
                 }
@@ -2526,6 +2550,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 +2665,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 +2814,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>
             </>
         );
     }