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

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

@@ -31,8 +31,6 @@ const updateField = (fields, name, value) => {
 
 const renderValue = (field, data) => {
     switch (field.type) {
-        case 'canvas':
-            return field.value || '';
         case 'datetime':
         case 'date':
             return field.value && moment(field.value).isValid()
@@ -105,7 +103,6 @@ const GenericDynamic = ({
 }) => {
     const [activeForm, setActiveForm] = useState({});
     const [activeFormKey, setActiveFormKey] = useState(0);
-    const [canvasSaveCounter, setCanvasSaveCounter] = useState(0);
 
     const handleChange = (e) => {
         const {
@@ -177,35 +174,6 @@ const GenericDynamic = ({
         }
     };
 
-    const handleChangeCanvas = (fieldSetting, value, imageData) => {
-        // Check if activeForm has keys
-        if (activeForm && typeof activeForm === 'object') {
-            // Iterate over the keys in activeForm to find the matching id
-            for (const key in activeForm) {
-                if (activeForm[key].id === fieldSetting.id) {
-                    // If a matching id is found, update the corresponding field
-                    setActiveForm((prevState) => ({
-                        ...prevState,
-                        [key]: {
-                            ...prevState[key],
-                            value, // Update the value for the matching id
-                            imageData,
-                        },
-                    }));
-
-                    setCanvasSaveCounter((prevState) => prevState + 1);
-                    return; // Exit after updating to prevent further iterations
-                }
-            }
-        }
-    };
-
-    useEffect(() => {
-        if (canvasSaveCounter > 0) {
-            handleSaveForm(false);
-        }
-    }, [canvasSaveCounter]);
-
     const handleChangeCheckbox = (e) => {
         const { checked, name, value } = e.target;
 
@@ -279,20 +247,33 @@ const GenericDynamic = ({
                 return prevActiveForm;
             }
 
-            // Create a shallow copy of rows to target only the necessary updates
+            // Create a new rows array with updated value properties based on input type
             const updatedRows = prevActiveForm[formKey].rows.map((row) => {
                 if (row.id === rowId) {
-                    // Update only the specific cell in the target row
-                    const newValue = {
-                        ...row.value,
-                        [columnId]: type === 'checkbox' ? checked : value,
+                    // Determine new value based on input type
+                    let newValue;
+                    if (type === 'checkbox') {
+                        newValue = { ...row.value, [columnId]: checked };
+                    } else if (
+                        type === 'date' ||
+                        type === 'time' ||
+                        type === 'text'
+                    ) {
+                        newValue = { ...row.value, [columnId]: value };
+                    } else {
+                        // For other input types, use the value directly
+                        newValue = { ...row.value, [columnId]: value };
+                    }
+
+                    return {
+                        ...row,
+                        value: newValue,
                     };
-                    return { ...row, value: newValue }; // Return the updated row
                 }
-                return row; // Return other rows unchanged
+                return row;
             });
 
-            // Update only the formKey section of activeForm
+            // Return the updated activeForm state
             return {
                 ...prevActiveForm,
                 [formKey]: {
@@ -582,29 +563,27 @@ const GenericDynamic = ({
         });
     };
 
-    const handleSaveForm = async (validate = true) => {
+    const handleSaveForm = async () => {
         try {
             let error = '';
 
-            if (validate) {
-                const excludedTypes = [
-                    'dynamicdata',
-                    'plaintext',
-                    'plaintextheading',
-                    'section',
-                    'table_radio',
-                ];
+            const excludedTypes = [
+                'dynamicdata',
+                'plaintext',
+                'plaintextheading',
+                'section',
+                'table_radio',
+            ];
 
-                Object.entries(activeForm).forEach(([key, field]) => {
-                    if (
-                        field.required === true &&
-                        !excludedTypes.includes(field.type) &&
-                        (field.value === null || field.value === '')
-                    ) {
-                        error += `<p>${field.label} is required</p>`;
-                    }
-                });
-            }
+            Object.entries(activeForm).forEach(([key, field]) => {
+                if (
+                    field.required === true &&
+                    !excludedTypes.includes(field.type) &&
+                    (field.value === null || field.value === '')
+                ) {
+                    error += `<p>${field.label} is required</p>`;
+                }
+            });
 
             if (error === '') {
                 const res = await CustomFetch(setting.save, 'POST', {
@@ -629,34 +608,47 @@ const GenericDynamic = ({
     };
 
     useEffect(() => {
-        if (!data[type] || data[type].length === 0) {
-            setActiveForm({});
-            return;
-        }
+        if (data[type] && data[type].length > 0) {
+            if (multiple) {
+                if (templateStatus) {
+                    let lastForm = data[type][data[type].length - 1];
+
+                    if (lastForm && typeof lastForm === 'object') {
+                        Object.entries(lastForm).forEach(([key, field]) => {
+                            if (field && field.required) {
+                                if (
+                                    field.required === 'yes' ||
+                                    field.required === 'no'
+                                ) {
+                                    lastForm[key].required =
+                                        field.required === 'yes';
+                                }
+                            }
+                        });
 
-        const formData = multiple
-            ? data[type][data[type].length - 1]
-            : data[type].hasOwnProperty('created_at')
-            ? data[type][0] || data[type]
-            : data[type];
-
-        if (
-            multiple &&
-            templateStatus &&
-            formData &&
-            typeof formData === 'object'
-        ) {
-            // Process the last form for required fields
-            Object.entries(formData).forEach(([key, field]) => {
-                if (field?.required) {
-                    field.required = field.required === 'yes';
+                        setActiveForm(lastForm);
+                        setActiveFormKey(data[type].length - 1);
+                    }
                 }
-            });
+            } else {
+                if (data[type].hasOwnProperty('id')) {
+                    if (
+                        Object.keys(activeForm).length === 0 &&
+                        templateStatus &&
+                        data[type][0]
+                    ) {
+                        setActiveForm(data[type][0]);
+                        setActiveFormKey(0);
+                    }
+                } else {
+                    setActiveForm(data[type]);
+                    setActiveFormKey(0);
+                }
+            }
+        } else {
+            setActiveForm({});
         }
-
-        setActiveForm(formData);
-        setActiveFormKey(0);
-    }, [data, type, multiple, templateStatus]);
+    }, [data, type]);
 
     useEffect(() => {
         if (data[type] && data[type].length > 0) {
@@ -824,7 +816,6 @@ const GenericDynamic = ({
                                     ? Object.entries(activeForm)
                                           .filter(
                                               ([key, value]) =>
-                                                  value && // Add this check to ensure value is not null
                                                   typeof value === 'object' &&
                                                   [
                                                       'id',
@@ -851,9 +842,6 @@ const GenericDynamic = ({
                                                           onChange={
                                                               handleChange
                                                           }
-                                                          onChangeCanvas={
-                                                              handleChangeCanvas
-                                                          }
                                                           onChangeCheckbox={
                                                               handleChangeCheckbox
                                                           }
@@ -902,18 +890,12 @@ const GenericDynamic = ({
                                                           originalData
                                                       )}
                                                       onChange={handleChange}
-                                                      onChangeCanvas={
-                                                          handleChangeCanvas
-                                                      }
                                                       onChangeCheckbox={
                                                           handleChangeCheckbox
                                                       }
                                                       onChangeDate={
                                                           handleChangeDate
                                                       }
-                                                      onChangeNumberFormat={
-                                                          handleChangeNumberFormat
-                                                      }
                                                       onChangeTableRadio={
                                                           handleChangeTableRadio
                                                       }

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

@@ -0,0 +1,407 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash.debounce';
+import { toast } from 'react-toastify';
+import Popup from 'reactjs-popup';
+import { confirmAlert } from 'react-confirm-alert';
+import { TrashCan, ArrowUp, ArrowDown } from 'akar-icons';
+
+import CustomFetch from '../Fetch';
+import Form from '../Form';
+import MultiSelect from '../MultiSelect';
+
+import 'react-confirm-alert/src/react-confirm-alert.css';
+import styles from './styles/GenericEditableTable.module.scss';
+
+const GenericEditableTable = ({
+    schedulingConfig,
+    data,
+    dataId,
+    modalOpen,
+    preloadedOptions,
+}) => {
+    const { columns, rows, form } = schedulingConfig;
+
+    const [localData, setLocalData] = useState([]);
+    const [groupedCategories, setGroupedCategories] = useState([]);
+
+    useEffect(() => {
+        const enrichedData = data[rows.key]?.map((entry, index) => ({
+            ...entry,
+            sort_order: entry.sort_order ?? index + 1,
+        }));
+        setLocalData(enrichedData || []);
+    }, [data, rows.key]);
+
+    const debouncedUpdate = useMemo(
+        () =>
+            debounce(async (updatedData) => {
+                try {
+                    const res = await CustomFetch(
+                        `${form.url}/${dataId}`,
+                        'PUT',
+                        updatedData
+                    );
+                    if (!res.error) {
+                        toast.success('Template updated successfully');
+                    } else {
+                        toast.error(res.error);
+                    }
+                } catch (error) {
+                    console.error('Error updating field:', error);
+                }
+            }, 1000),
+        []
+    );
+
+    const groupCategoriesByType = (data) => {
+        const grouped = {};
+
+        data.forEach((category, categoryKey) => {
+            const categoryType =
+                category[rows.categoryKey.id]?.[rows.categoryKey.label] || null;
+
+            const categoryId = category[rows.categoryKey.id]?.id || null;
+
+            const groupKey = categoryId || 'no_category';
+
+            if (!grouped[groupKey]) {
+                grouped[groupKey] = {
+                    id: categoryId || 'no_category',
+                    category: categoryType || '',
+                    entries: [],
+                };
+            }
+            grouped[groupKey].entries.push({
+                ...category,
+                keyCounter: categoryKey,
+            });
+        });
+
+        Object.values(grouped).forEach((group) => {
+            group.entries.sort((a, b) => a.sort_order - b.sort_order);
+        });
+
+        // Ensure 'no_category' group is at the top
+        const groupedArray = Object.values(grouped);
+        return groupedArray.sort((a, b) =>
+            a.id === 'no_category' ? -1 : b.id === 'no_category' ? 1 : 0
+        );
+    };
+
+    const handleFieldChange = (value, fieldId, keyCounter) => {
+        setLocalData((prev) => {
+            const updatedDetail = [...prev];
+            updatedDetail[keyCounter] = {
+                ...updatedDetail[keyCounter],
+                [fieldId]: value,
+            };
+
+            debouncedUpdate({ [rows.key]: updatedDetail });
+
+            return updatedDetail;
+        });
+    };
+
+    const handleSortChange = (groupId, entryId, direction) => {
+        setLocalData((prev) => {
+            const updatedDetail = [...prev];
+            const group = groupCategoriesByType(updatedDetail).find(
+                (group) => group.id === groupId
+            );
+
+            if (group) {
+                const index = group.entries.findIndex(
+                    (entry) => entry.id === entryId
+                );
+
+                if (
+                    (direction === 'up' && index > 0) ||
+                    (direction === 'down' && index < group.entries.length - 1)
+                ) {
+                    const swapIndex =
+                        direction === 'up' ? index - 1 : index + 1;
+                    [
+                        group.entries[index].sort_order,
+                        group.entries[swapIndex].sort_order,
+                    ] = [
+                        group.entries[swapIndex].sort_order,
+                        group.entries[index].sort_order,
+                    ];
+
+                    const reordered = updatedDetail.map((item) => {
+                        const entry = group.entries.find(
+                            (e) => e.id === item.id
+                        );
+                        return entry
+                            ? { ...item, sort_order: entry.sort_order }
+                            : item;
+                    });
+
+                    debouncedUpdate({ [rows.key]: reordered });
+                    return reordered;
+                }
+            }
+
+            return updatedDetail;
+        });
+    };
+
+    const handleDeleteRow = (entry) => {
+        confirmAlert({
+            title: 'Confirm to Delete',
+            message: 'Are you sure you want to delete this entry?',
+            buttons: [
+                {
+                    label: 'Yes',
+                    onClick: async () => {
+                        setLocalData((prev) => {
+                            const updatedDetail = prev.filter(
+                                (item) => item.id !== entry.id
+                            );
+                            debouncedUpdate({ [rows.key]: updatedDetail });
+                            return updatedDetail;
+                        });
+                    },
+                },
+                {
+                    label: 'No',
+                },
+            ],
+        });
+    };
+
+    const renderScheduledTableField = (entry, column, keyCounter) => {
+        if (!entry || !column) return null;
+
+        switch (column.type) {
+            case 'currency':
+            case 'number':
+                return (
+                    <input
+                        type="text"
+                        value={entry[column.id] || ''}
+                        onChange={(e) =>
+                            handleFieldChange(
+                                e.target.value,
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                        style={{ textAlign: 'right' }}
+                    />
+                );
+            case 'date':
+                return (
+                    <input
+                        type="date"
+                        value={entry[column.id] || ''}
+                        onChange={(e) =>
+                            handleFieldChange(
+                                e.target.value,
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                        style={{ textAlign: 'right' }}
+                    />
+                );
+            case 'dropdown':
+                return (
+                    <select
+                        value={entry[column.id] || ''}
+                        onChange={(e) =>
+                            handleFieldChange(
+                                e.target.value,
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                    >
+                        {column.options.map((option) => (
+                            <option key={option.id} value={option.id}>
+                                {option.label}
+                            </option>
+                        ))}
+                    </select>
+                );
+            case 'dropdown-ajax':
+                const options = preloadedOptions[column.id] || [];
+                return (
+                    <select
+                        value={entry[column.id] || ''}
+                        onChange={(e) =>
+                            handleFieldChange(
+                                e.target.value,
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                    >
+                        <option>Select an Option</option>
+                        {options.map((option) => (
+                            <option key={option.id} value={option.id}>
+                                {option.label}
+                            </option>
+                        ))}
+                    </select>
+                );
+            case 'multi-dropdown-ajax':
+                const multiOptions = preloadedOptions[column.id] || [];
+                return (
+                    <MultiSelect
+                        settings={{
+                            id: column.id,
+                        }}
+                        className={styles.selectFullWidth}
+                        multi={false}
+                        onChange={(value) =>
+                            handleFieldChange(value, column.id, keyCounter)
+                        }
+                        inputValue={entry[column.id] || ''}
+                        options={multiOptions}
+                    />
+                );
+            default:
+                return (
+                    <input
+                        type="text"
+                        defaultValue={entry[column.id] || ''}
+                        onChange={(e) =>
+                            handleFieldChange(
+                                e.target.value,
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                    />
+                );
+        }
+    };
+
+    useEffect(() => {
+        setGroupedCategories(groupCategoriesByType(localData));
+    }, [localData]);
+
+    return (
+        <div className={styles.gridtxt}>
+            <div className={styles.gridtxt__header}>
+                <span>{schedulingConfig.title || 'Estimation Schedule'}</span>
+            </div>
+            {groupedCategories.length > 0 ? (
+                <table className={styles.schedulingTable}>
+                    <thead>
+                        <tr>
+                            {columns.map((column) => (
+                                <th
+                                    key={column.id}
+                                    style={{ width: column.width || 'auto' }}
+                                >
+                                    {column.label}
+                                </th>
+                            ))}
+                            <th style={{ width: '5%' }}></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {groupedCategories.map((group) => (
+                            <React.Fragment key={group.id}>
+                                <tr className={styles.categoryRow}>
+                                    <td colSpan={columns.length + 1}>
+                                        {group.category}
+                                    </td>
+                                </tr>
+                                {group.entries.map((entry, idx) => (
+                                    <tr key={entry.id}>
+                                        {columns.map((column) => (
+                                            <td
+                                                key={column.id}
+                                                style={{
+                                                    width:
+                                                        column.width || 'auto',
+                                                    textAlign:
+                                                        column.type ===
+                                                        'currency'
+                                                            ? 'right'
+                                                            : 'left',
+                                                }}
+                                            >
+                                                {renderScheduledTableField(
+                                                    entry,
+                                                    column,
+                                                    entry.keyCounter
+                                                )}
+                                            </td>
+                                        ))}
+                                        <td>
+                                            <div className={styles.tdactions}>
+                                                {idx > 0 && (
+                                                    <ArrowUp
+                                                        size={18}
+                                                        onClick={() =>
+                                                            handleSortChange(
+                                                                group.id,
+                                                                entry.id,
+                                                                'up'
+                                                            )
+                                                        }
+                                                        style={{
+                                                            cursor: 'pointer',
+                                                        }}
+                                                    />
+                                                )}
+                                                {idx <
+                                                    group.entries.length -
+                                                        1 && (
+                                                    <ArrowDown
+                                                        size={18}
+                                                        onClick={() =>
+                                                            handleSortChange(
+                                                                group.id,
+                                                                entry.id,
+                                                                'down'
+                                                            )
+                                                        }
+                                                        style={{
+                                                            cursor: 'pointer',
+                                                        }}
+                                                    />
+                                                )}
+                                                <TrashCan
+                                                    size={18}
+                                                    onClick={() =>
+                                                        handleDeleteRow(entry)
+                                                    }
+                                                    style={{
+                                                        cursor: 'pointer',
+                                                    }}
+                                                />
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </React.Fragment>
+                        ))}
+                    </tbody>
+                </table>
+            ) : (
+                <div className={styles.noDataMessage}>
+                    No data available. Please check your filters or try
+                    reloading the data.
+                </div>
+            )}
+
+            <div className={styles.polActions}>
+                <button
+                    className={styles.btn}
+                    onClick={() => {
+                        modalOpen('create', 0);
+                    }}
+                >
+                    Add
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default GenericEditableTable;