@visns-studio/visns-components 5.3.11 → 5.3.13

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -140,6 +140,7 @@ const DataGrid = forwardRef(
             settings,
             setConfig,
             setFilterData,
+            setTableData,
             setTotal,
             setRowsSelected,
             style,
@@ -209,7 +210,9 @@ const DataGrid = forwardRef(
                         setTotal(res.count);
                     }
                     setDataCount(res.count);
-
+                    if (setTableData) {
+                        setTableData(res.data);
+                    }
                     dataRef.current = res.data;
                 });
 
@@ -2625,6 +2628,11 @@ const DataGrid = forwardRef(
                                                     /<\/?[^>]+(>|$)/g,
                                                     ''
                                                 ); // Simple regex to strip HTML tags
+                                            } else {
+                                                // Replace p tags with br tags
+                                                content = content
+                                                    .replace(/<p>/g, '')
+                                                    .replace(/<\/p>/g, '<br>');
                                             }
 
                                             // If truncate has a value, limit content to specified number of characters
@@ -2985,10 +2993,16 @@ const DataGrid = forwardRef(
                             </div>
                             <div className={styles.modal__content}>
                                 <div className={styles.formcontainer}>
-                                    <Gallery
-                                        images={galleryData}
-                                        enableImageSelection={false}
-                                    />
+                                    {galleryData.length > 0 ? (
+                                        <Gallery
+                                            images={galleryData}
+                                            enableImageSelection={false}
+                                        />
+                                    ) : (
+                                        <div className={styles.noDataMessage}>
+                                            No images available in the gallery
+                                        </div>
+                                    )}
                                 </div>
                             </div>
                         </div>

package/src/components/crm/Field.jsx

@@ -72,6 +72,7 @@ function Field({
 }) {
     const editorRef = useRef(null);
     const fileImageInputRef = useRef(null);
+    const [autoValue, setAutoValue] = useState('');
     const [colorPickerShow, setColorPickerShow] = useState(false);
     const [counter, setCounter] = useState(0);
     const [dataOptions, setDataOptions] = useState([]);
@@ -117,6 +118,31 @@ function Field({
         marginTop: '6px',
     };
 
+    useEffect(() => {
+        const fetchAutoValue = async () => {
+            if (settings.type === 'text' && settings.url) {
+                try {
+                    const res = await CustomFetch(settings.url, 'POST', {});
+                    if (res.data) {
+                        setAutoValue(res.data);
+                        // Simulate an onChange event to update the form data
+                        const simulatedEvent = {
+                            target: {
+                                dataset: { name: settings.id },
+                                value: res.data,
+                            },
+                        };
+                        onChange(simulatedEvent);
+                    }
+                } catch (error) {
+                    console.error('Error fetching auto value:', error);
+                }
+            }
+        };
+
+        fetchAutoValue();
+    }, [settings.url, settings.type, settings.id]);
+
     useEffect(() => {
         const fetchOptions = () => {
             let filter = {};
@@ -1669,6 +1695,18 @@ function Field({
                     ></textarea>
                 );
             case 'text':
+                return (
+                    <input
+                        type={settings.type}
+                        data-name={settings.id}
+                        className={inputClass[settings.id]}
+                        placeholder=" "
+                        onChange={onChange}
+                        value={inputValue || autoValue || ''}
+                        readOnly={settings.readOnly ? settings.readOnly : false}
+                        autoComplete="off"
+                    />
+                );
             case 'password':
                 return (
                     <input

package/src/components/crm/Form.jsx

@@ -799,8 +799,43 @@ function Form({
                         if (closeModal) {
                             closeModal();
                             if (type === 'saveAnother') {
-                                fetchData();
-                                modalOpen('create', 0);
+                                const { saveAnother } =
+                                    formSettings?.update || {};
+
+                                if (
+                                    saveAnother?.url &&
+                                    saveAnother?.method &&
+                                    saveAnother?.data
+                                ) {
+                                    // Process data object to handle now() timestamps
+                                    const processedData = Object.entries(
+                                        saveAnother.data
+                                    ).reduce((acc, [key, value]) => {
+                                        acc[key] =
+                                            value === 'now()'
+                                                ? moment().format(
+                                                      'YYYY-MM-DD HH:mm:ss'
+                                                  ) // Format that strtotime() can parse
+                                                : value;
+                                        return acc;
+                                    }, {});
+
+                                    const saveAnotherUrl = `${
+                                        saveAnother.url
+                                    }/${formData[saveAnother.dataKey]}`;
+                                    const resSaveAnother = await CustomFetch(
+                                        saveAnotherUrl,
+                                        saveAnother.method,
+                                        processedData
+                                    );
+
+                                    if (resSaveAnother.data.error === '') {
+                                        toast.success(saveAnother.message);
+                                    }
+                                } else {
+                                    fetchData();
+                                    modalOpen('create', 0);
+                                }
                             }
                         }
                         toast.success(
@@ -1493,30 +1528,48 @@ function Form({
                                 formSettings.create?.hasOwnProperty(
                                     'saveAnother'
                                 ) ? (
-                                    <>
-                                        <div
-                                            className={`${styles.formItem} ${styles.lastItem}`}
+                                    <div
+                                        className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
+                                    >
+                                        <button
+                                            className={styles.btn}
+                                            onClick={handleSubmit}
+                                            data-type="save"
+                                        >
+                                            Save & Close
+                                        </button>
+                                        <button
+                                            className={styles.btn}
+                                            onClick={handleSubmit}
+                                            data-type="saveAnother"
                                         >
-                                            <button
-                                                className={styles.btn}
-                                                onClick={handleSubmit}
-                                                data-type="save"
-                                            >
-                                                Save & Close
-                                            </button>
-                                        </div>
-                                        <div
-                                            className={`${styles.formItem} ${styles.lastItem}`}
+                                            Save & Create Another
+                                        </button>
+                                    </div>
+                                ) : formType === 'update' &&
+                                  formSettings.update?.hasOwnProperty(
+                                      'saveAnother'
+                                  ) ? (
+                                    <div
+                                        className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
+                                    >
+                                        <button
+                                            className={styles.btn}
+                                            onClick={handleSubmit}
+                                            data-type="save"
+                                        >
+                                            Save & Close
+                                        </button>
+                                        <button
+                                            className={styles.btn}
+                                            onClick={handleSubmit}
+                                            data-type="saveAnother"
                                         >
-                                            <button
-                                                className={styles.btn}
-                                                onClick={handleSubmit}
-                                                data-type="saveAnother"
-                                            >
-                                                Save & Create Another
-                                            </button>
-                                        </div>
-                                    </>
+                                            {formSettings.update.saveAnother
+                                                .label ||
+                                                'Save & Create Another'}
+                                        </button>
+                                    </div>
                                 ) : (
                                     <div
                                         className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}

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

@@ -137,7 +137,7 @@ const GenericAuth = ({
                 </Route>
             </Routes>
             <ToastContainer
-                position="bottom-right"
+                position="bottom-center"
                 autoClose={7000}
                 hideProgressBar={false}
                 newestOnTop

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

@@ -185,6 +185,7 @@ function GenericIndex({
     const gridRef = useRef(null);
     const params = useParams();
     const [rowsSelected, setRowsSelected] = useState({});
+    const [tableData, setTableData] = useState([]);
     const [tableInfo, setTableInfo] = useState({});
     const [total, setTotal] = useState(0);
     const windowHeight = useWindowHeight();
@@ -196,30 +197,57 @@ function GenericIndex({
         setting.tableSetting
     );
 
+    // Add a ref to store the latest rowsSelected value
+    const rowsSelectedRef = useRef({});
+
+    // Update the ref whenever rowsSelected changes
+    useEffect(() => {
+        rowsSelectedRef.current = rowsSelected;
+    }, [rowsSelected]);
+
     const handleCheckboxUpdate = useCallback(async () => {
         try {
             const { data, method, message, url } = setting?.functions
                 ?.checkboxUpdate
                 ? setting.functions.checkboxUpdate
                 : config.form.functions.checkboxUpdate;
-            if (!Object.keys(rowsSelected).length) {
+
+            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) {
+                    // Only include if selected (value is true)
+                    const fullRowData = tableData.find(
+                        (row) => row.id === parseInt(id)
+                    );
+                    if (fullRowData) {
+                        selectedRowsData[id] = fullRowData;
+                    }
+                }
+            });
+
             const res = await CustomFetch(url, method, {
                 ...data,
-                rows: rowsSelected,
+                rows: selectedRowsData,
             });
+
             if (res.data.error === '') {
                 toast.success(message.success);
                 gridRef.current.reload();
-            } else {
-                toast.error(message.error);
             }
         } catch (error) {
             console.error(error);
         }
-    }, [rowsSelected, setting?.functions?.checkboxUpdate]);
+    }, [
+        setting?.functions?.checkboxUpdate,
+        config.form?.functions?.checkboxUpdate,
+        tableData,
+    ]);
 
     const handleExport = async (e) => {
         try {
@@ -268,6 +296,7 @@ function GenericIndex({
                 ref={gridRef}
                 gridHeight={windowHeight * 0.65}
                 setConfig={setConfig}
+                setTableData={setTableData}
                 setTotal={setTotal}
                 style={userProfile?.settings?.style || {}}
                 userProfile={userProfile}

package/src/components/crm/styles/DataGrid.module.scss

@@ -124,4 +124,82 @@
             height: 18px;
         }
     }
-}
+}
+
+.modalwrap {
+    background: var(--tertiary-color);
+    border-radius: 3px;
+    overflow: visible;
+    border-top-left-radius: var(--br);
+    border-top-right-radius: var(--br);
+}
+
+.top--modal {
+    position: relative;
+    z-index: 1000;
+}
+
+.modal {
+    width: 100%;
+    position: relative;
+}
+
+.modal__header {
+    width: 100%;
+    border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem;
+
+    h1 {
+        color: var(--secondary-color);
+        margin: 0;
+        padding: 0;
+        font-size: 1.15em;
+    }
+}
+
+.modal__close {
+    width: max-content;
+    background: rgba(var(--paragraph-rgb), 0.05);
+    cursor: pointer;
+    padding: 0.25rem;
+    margin: 0;
+    outline: none;
+    border: none;
+    border-radius: var(--br);
+    display: block;
+    line-height: 1;
+
+    svg {
+        color: var(--primary-color);
+        display: block;
+    }
+}
+
+.modal__content {
+    width: 100%;
+    position: relative;
+    padding: 0.75rem;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.formcontainer {
+    width: 100%;
+}
+
+.noDataMessage {
+    text-align: center;
+    color: var(--secondary-color);
+    font-size: 1.125em;
+    padding: 2rem;
+    margin: 2rem auto;
+    background: var(--tertiary-color);
+    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border-radius: var(--br);
+    max-width: 80%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    font-style: italic;
+}

package/src/components/crm/styles/Form.module.scss

@@ -240,7 +240,7 @@ input[type='file'] {
     position: relative;
     padding: 0.75rem;
     max-height: 80vh;
-    // overflow-y: auto;
+    overflow-y: auto;
 
     .btn {
         background: var(--primary-color);
@@ -265,6 +265,30 @@ input[type='file'] {
     }
 }
 
+.btn {
+    width: max-content;
+    display: inline-block;
+    position: relative;
+    padding: 0.65rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    color: var(--tertiary-color);
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+    border-radius: var(--br);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+    font-size: 1.25em;
+
+    &:hover {
+        color: var(--primary-color);
+        background: var(--highlight-color);
+        border: 1px solid rgba(var(--highlight-rgb), 1.05);
+    }
+}
+
 .saveBtn {
     width: max-content;
     display: inline-block;
@@ -302,3 +326,14 @@ input[type='file'] {
     padding: 0.35em 1em;
     margin: 0 0.15em;
 }
+
+.buttonContainer {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+
+    button {
+        flex: 0 1 auto;
+        min-width: 200px;
+    }
+}