@visns-studio/visns-components 4.10.48 → 5.0.1-8.1

package/src/components/crm/DataGrid.jsx

@@ -14,6 +14,7 @@ import debounce from 'lodash.debounce';
 import moment from 'moment';
 import numeral from 'numeral';
 import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
 import parse from 'html-react-parser';
 import { saveAs } from 'file-saver';
 import NumberFilter from '@inovua/reactdatagrid-community/NumberFilter';
@@ -59,7 +60,7 @@ import 'react-confirm-alert/src/react-confirm-alert.css';
 import CustomFetch from './Fetch';
 import Download from './Download';
 import Form from './Form';
-import _, { set } from 'lodash';
+import _ from 'lodash';
 
 const loadData = async (
     { skip, limit, sortInfo, filterValue },
@@ -94,7 +95,6 @@ const loadData = async (
                         id: identifier,
                         value: fv.value,
                         operator: fv.operator,
-                        whereHas: fv.whereHas || [],
                     });
                 }
             } else {
@@ -150,19 +150,6 @@ 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([]);
@@ -182,32 +169,17 @@ const DataGrid = forwardRef(
         const [formId, setFormId] = useState(0);
         const [modalShow, setModalShow] = useState(false);
 
-        const [formSettingData, setFormSettingData] = useState({});
-        const [formSettingType, setFormSettingType] = useState('');
-        const [formSettingId, setFormSettingId] = useState(0);
-        const [modalSettingShow, setModalSettingShow] = useState(false);
-
         /** Modal Functions */
-        const modalOpen = (type, id) => {
+        const modalOpen = (formType, formId) => {
             setModalShow(true);
-            setFormType(type);
-            setFormId(id);
+            setFormType(formType);
+            setFormId(formId);
         };
 
         const modalClose = () => {
             setModalShow(false);
         };
 
-        const modalSettingOpen = (type, id) => {
-            setModalSettingShow(true);
-            setFormSettingType(type);
-            setFormSettingId(id);
-        };
-
-        const modalSettingClose = () => {
-            setModalSettingShow(false);
-        };
-
         useEffect(() => {
             setFormData(form);
         }, [form]);
@@ -257,65 +229,23 @@ const DataGrid = forwardRef(
             const toastId = toast.loading('Starting download please wait...');
 
             try {
-                if (d.id && d.id > 0) {
-                    const res = await Download(
-                        `/ajax/files/download/${d.id}/null`,
-                        'GET',
-                        {}
-                    );
+                const res = await Download(
+                    `/ajax/files/download/${d.id}/null`,
+                    'GET',
+                    {}
+                );
 
-                    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.');
-                        }
-                    }
+                if (res.data.error) {
+                    toast.error(res.data.error);
                 } else {
-                    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);
+                    // 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 {
-                        // 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.');
-                        }
+                        // 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,25 +500,6 @@ const DataGrid = forwardRef(
                         ],
                     });
                     break;
-                case 'form':
-                    if (s.key) {
-                        let fsd = s.form;
-
-                        if (fsd.fields && fsd.fields.length > 0) {
-                            fsd.fields.forEach((fItem, fKey) => {
-                                if (fItem.id === s.key) {
-                                    fsd.fields[fKey].value = d.id;
-                                }
-                            });
-
-                            setFormSettingData((prevState) => ({
-                                ...prevState,
-                                ...fsd,
-                            }));
-                        }
-                    }
-                    modalSettingOpen('create', 0);
-                    break;
                 case 'envelope':
                     CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
                         toast.success(result.message);
@@ -660,14 +571,6 @@ const DataGrid = forwardRef(
                         );
                     }
                     break;
-                case 'view':
-                    modalJsonOpen();
-                    setJsonData((prevState) => ({
-                        ...prevState,
-                        data: d[s.key],
-                        headers: s.headers,
-                    }));
-                    break;
                 case 'update':
                     modalOpen('update', d.id);
                     break;
@@ -757,9 +660,7 @@ const DataGrid = forwardRef(
             } else {
                 const column = rowProps.columns[columnIndex];
 
-                const excludedColumnTypes = ['dropdown', 'text_input'];
-
-                if (!excludedColumnTypes.includes(column.type)) {
+                if (column.type !== 'dropdown') {
                     if (column.id !== '__checkbox-column') {
                         if (column.link && column.link.hasOwnProperty('url')) {
                             if (column.link.url) {
@@ -767,17 +668,7 @@ const DataGrid = forwardRef(
                                 const linkUrl = column.link.url;
                                 const linkKey =
                                     rowProps.columns[columnIndex].link.key;
-                                const rowData = linkKey.includes('.')
-                                    ? linkKey
-                                          .split('.')
-                                          .reduce(
-                                              (obj, key) =>
-                                                  obj && obj[key]
-                                                      ? obj[key]
-                                                      : null,
-                                              rowProps.data
-                                          )
-                                    : rowProps.data[linkKey];
+                                const rowData = rowProps.data[linkKey];
 
                                 if (column.link.hasOwnProperty('folder')) {
                                     const linkFolder =
@@ -794,13 +685,7 @@ const DataGrid = forwardRef(
                                         }
                                     }
                                 } else {
-                                    if (rowData) {
-                                        navigate(`${linkUrl}${rowData}`);
-                                    } else {
-                                        toast.warn(
-                                            'No data available for this link.'
-                                        );
-                                    }
+                                    navigate(`${linkUrl}${rowData}`);
                                 }
                             } else {
                                 if (rowProps.data[column.id]) {
@@ -1231,7 +1116,6 @@ const DataGrid = forwardRef(
                         return getIconComponent(Network);
                     case 'gallery':
                         return getIconComponent(Image);
-                    case 'form':
                     case 'link':
                         return getIconComponent(LinkOut);
                     case 'primary':
@@ -1244,8 +1128,6 @@ const DataGrid = forwardRef(
                         return getIconComponent(Clock);
                     case 'update':
                         return getIconComponent(Edit);
-                    case 'view':
-                        return getIconComponent(Search);
                     default:
                         return null;
                 }
@@ -1828,19 +1710,9 @@ const DataGrid = forwardRef(
                                                             onClick={(e) => {
                                                                 e.stopPropagation();
                                                                 e.preventDefault();
-
-                                                                if (
-                                                                    file.id &&
-                                                                    file.id > 0
-                                                                ) {
-                                                                    handleDownload(
-                                                                        file
-                                                                    );
-                                                                } else {
-                                                                    handleDownloadPath(
-                                                                        file
-                                                                    );
-                                                                }
+                                                                handleDownload(
+                                                                    file
+                                                                );
                                                             }}
                                                             style={{
                                                                 marginRight:
@@ -2064,38 +1936,6 @@ const DataGrid = forwardRef(
                                         }, '');
 
                                         if (value) {
-                                            let columnStyle = {};
-                                            let columnValueChecker = '';
-
-                                            if (
-                                                column?.active?.id &&
-                                                column?.active?.value
-                                            ) {
-                                                if (
-                                                    data[column.active.id]
-                                                        ?.value
-                                                ) {
-                                                    columnValueChecker =
-                                                        data[column.active.id]
-                                                            ?.value;
-                                                } else if (
-                                                    data[column.active.id]
-                                                ) {
-                                                    columnValueChecker =
-                                                        data[column.active.id];
-                                                }
-
-                                                if (
-                                                    columnValueChecker ===
-                                                    column.active.value
-                                                ) {
-                                                    columnStyle = {
-                                                        color: column.active
-                                                            .colour,
-                                                    };
-                                                }
-                                            }
-
                                             if (Array.isArray(value)) {
                                                 if (value[0]) {
                                                     value = value[0];
@@ -2128,7 +1968,7 @@ const DataGrid = forwardRef(
                                                 column.placeholder !== ''
                                             ) {
                                                 return (
-                                                    <span style={columnStyle}>
+                                                    <span>
                                                         {column.placeholder}
                                                     </span>
                                                 );
@@ -2149,13 +1989,7 @@ const DataGrid = forwardRef(
                                                 }
 
                                                 if (typeof value === 'string') {
-                                                    return (
-                                                        <span
-                                                            style={columnStyle}
-                                                        >
-                                                            {value}
-                                                        </span>
-                                                    );
+                                                    return <span>{value}</span>;
                                                 } else {
                                                     return null;
                                                 }
@@ -2376,51 +2210,6 @@ const DataGrid = forwardRef(
                                         return <span>{stage}</span>;
                                     },
                                 };
-                            case 'text_input':
-                                columnId = Array.isArray(column.id)
-                                    ? column.id.join('-')
-                                    : column.id;
-
-                                return {
-                                    ...commonProps,
-                                    name: columnId,
-                                    render: ({ data }) => {
-                                        const debouncedOnChange = debounce(
-                                            (name, value) => {
-                                                if (
-                                                    column.update?.key &&
-                                                    column.update?.url &&
-                                                    column.update?.method
-                                                ) {
-                                                    handleDropdownUpdate(
-                                                        column.update.key,
-                                                        `${column.update.url}/${data.id}`,
-                                                        column.update.method,
-                                                        value
-                                                    );
-                                                }
-                                            },
-                                            1000
-                                        );
-
-                                        const handleChange = (e) => {
-                                            const { name, value } = e.target;
-                                            debouncedOnChange(name, value);
-                                        };
-
-                                        return (
-                                            <input
-                                                name={column.id}
-                                                defaultValue={
-                                                    data[column.id] || ''
-                                                }
-                                                style={{ padding: '7px' }}
-                                                onChange={handleChange}
-                                                type="text"
-                                            />
-                                        );
-                                    },
-                                };
                             case 'time':
                                 return {
                                     ...commonProps,
@@ -2593,12 +2382,32 @@ const DataGrid = forwardRef(
                                             data[column.id] &&
                                             data[column.id] !== ''
                                         ) {
+                                            let content = String(
+                                                data[column.id]
+                                            );
+
+                                            // If removeFormat is true, strip HTML tags
+                                            if (column.removeFormat) {
+                                                content = content.replace(
+                                                    /<\/?[^>]+(>|$)/g,
+                                                    ''
+                                                ); // Simple regex to strip HTML tags
+                                            }
+
+                                            // If truncate has a value, limit content to specified number of characters
+                                            if (column.truncate) {
+                                                content =
+                                                    content.length >
+                                                    column.truncate
+                                                        ? content.substring(
+                                                              0,
+                                                              column.truncate
+                                                          ) + '...'
+                                                        : content;
+                                            }
+
                                             return (
-                                                <span>
-                                                    {parse(
-                                                        String(data[column.id])
-                                                    )}
-                                                </span>
+                                                <span>{parse(content)}</span>
                                             );
                                         } else {
                                             return null;
@@ -2677,7 +2486,6 @@ const DataGrid = forwardRef(
                                 name: filterName,
                                 operator: column.filter.operator,
                                 type: column.filter.type,
-                                whereHas: column.filter.whereHas || [],
                                 value: filterValue,
                                 reset: column.filter.reset
                                     ? column.filter.reset
@@ -2739,69 +2547,6 @@ 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) {
@@ -2854,7 +2599,6 @@ const DataGrid = forwardRef(
                     : 400,
             boxShadow: 'none',
         });
-
         const headerProps = {
             style: style ? style : {},
         };
@@ -2970,29 +2714,6 @@ const DataGrid = forwardRef(
                         userProfile={userProfile}
                     />
                 </Popup>
-                <Popup
-                    open={modalSettingShow}
-                    onClose={modalSettingClose}
-                    closeOnDocumentClick={false}
-                    nested
-                >
-                    <Form
-                        ajaxSetting={ajaxSetting}
-                        api={api}
-                        closeModal={modalSettingClose}
-                        columnId={formSettingId}
-                        fetchTable={handleReload}
-                        formSettings={formSettingData}
-                        formType={formSettingType}
-                        gridRef={gridRef}
-                        mapbox={mapbox}
-                        modalOpen={modalSettingOpen}
-                        paramValue={paramValue}
-                        style={style}
-                        updateForm={setFormSettingData}
-                        userProfile={userProfile}
-                    />
-                </Popup>
                 <Popup
                     open={modalGalleryShow}
                     onClose={modalGalleryClose}
@@ -3022,100 +2743,6 @@ 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>
             </>
         );
     }