@visns-studio/visns-components 4.7.2 → 4.7.4

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

@@ -0,0 +1,916 @@
+import React, { useEffect, useRef, useState } from 'react';
+import moment from 'moment';
+import 'react-confirm-alert/src/react-confirm-alert.css';
+import { toast } from 'react-toastify';
+import { confirmAlert } from 'react-confirm-alert';
+import { saveAs } from 'file-saver';
+import parse from 'html-react-parser';
+import { Backspace, CloudDownload } from 'akar-icons';
+
+import CustomFetch from '../Fetch';
+import Download from '../Download';
+import Field from '../Field';
+import styles from './styles/GenericDynamic.module.scss';
+
+const updateField = (fields, name, value) => {
+    if (Array.isArray(fields)) {
+        return fields.map((field) => ({
+            ...field,
+            value: field.id === name ? value : field.value,
+        }));
+    }
+
+    return Object.entries(fields).reduce(
+        (acc, [key, field]) => ({
+            ...acc,
+            [key]: field.id === name ? { ...field, value } : field,
+        }),
+        {}
+    );
+};
+
+const renderValue = (field, data) => {
+    switch (field.type) {
+        case 'datetime':
+        case 'date':
+            return field.value && moment(field.value).isValid()
+                ? moment(field.value).toDate()
+                : '';
+
+        case 'dynamicdata':
+            if (field.dynamicfield && typeof field.dynamicfield === 'string') {
+                const [table, key] = field.dynamicfield.split('::');
+
+                if (table && key) {
+                    switch (table) {
+                        case 'opportunities':
+                            return data[table][key];
+                        case 'clients':
+                            return data['client'] ? data['client'][key] : null;
+                        default:
+                            if (key === 'surname' && !data[key]) {
+                                return data['lastname'] || '';
+                            }
+                            return data[key];
+                    }
+                } else {
+                    console.warn(
+                        `Dynamic field not found or invalid: ${field.dynamicfield}`
+                    );
+                }
+            } else {
+                console.warn('Dynamic field is missing or not a string');
+            }
+            break;
+
+        case 'time':
+            return field.value && moment(field.value).isValid()
+                ? moment(field.value).toDate()
+                : '';
+        default:
+            return field.value || '';
+    }
+};
+
+const GenericDynamic = ({
+    buttons,
+    data,
+    fetchData,
+    label,
+    multiple = true,
+    originalData = {},
+    primaryKey,
+    setData,
+    setting,
+    templateStatus = true,
+    type,
+    userProfile,
+}) => {
+    const [activeForm, setActiveForm] = useState({});
+    const [activeFormKey, setActiveFormKey] = useState(0);
+
+    const handleChange = (e) => {
+        const {
+            checked,
+            dataset: { name },
+            files,
+            value,
+        } = e.target;
+
+        let newValue;
+
+        if (checked) {
+            newValue = checked;
+            setActiveForm((prevState) =>
+                updateField(prevState, name, newValue)
+            );
+        } else if (files && files[0]) {
+            const toastId = toast.loading('Uploading file...');
+            Vapor.store(files[0], {
+                progress: (progress) => {
+                    console.info(`Upload Progress: ${progress}`);
+                },
+            }).then((response) => {
+                if (files[0].type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        const imageSrc = e.target.result;
+
+                        setActiveForm((prevState) =>
+                            updateField(prevState, name, {
+                                extension: response.extension,
+                                key: response.key,
+                                url: response.url,
+                                uuid: response.uuid,
+                                bucket: response.bucket,
+                                filename: files[0].name,
+                                filesize: files[0].size,
+                                imageSrc: imageSrc,
+                            })
+                        );
+                    };
+                    reader.readAsDataURL(files[0]);
+                } else {
+                    setActiveForm((prevState) =>
+                        updateField(prevState, name, {
+                            extension: response.extension,
+                            key: response.key,
+                            url: response.url,
+                            uuid: response.uuid,
+                            bucket: response.bucket,
+                            filename: files[0].name,
+                            filesize: files[0].size,
+                        })
+                    );
+                }
+                toast.update(toastId, {
+                    render: 'Upload successful!',
+                    type: 'success',
+                    isLoading: false,
+                    autoClose: 5000,
+                    closeButton: true,
+                });
+            });
+        } else {
+            newValue = value;
+            setActiveForm((prevState) =>
+                updateField(prevState, name, newValue)
+            );
+        }
+    };
+
+    const handleChangeCheckbox = (e) => {
+        const { checked, name, value } = e.target;
+
+        let tmpValue;
+
+        Object.entries(activeForm).forEach(([key, field]) => {
+            if (field.id && field.id === name) {
+                if (
+                    field.value === null ||
+                    field.value === '' ||
+                    field.value.length === 0
+                ) {
+                    tmpValue = [];
+
+                    field.options.forEach((option) => {
+                        tmpValue.push(false);
+                    });
+                } else {
+                    tmpValue = [...field.value];
+                }
+
+                field.options.forEach((option, optionKey) => {
+                    if (option.label === value) {
+                        tmpValue[optionKey] = checked;
+                    }
+                });
+            }
+        });
+
+        setActiveForm((prevState) => updateField(prevState, name, tmpValue));
+    };
+
+    const handleChangeDate = (value, id) => {
+        setActiveForm((prevState) => updateField(prevState, id, value));
+    };
+
+    const handleChangeNumberFormat = (value, id) => {
+        setActiveForm((prevState) => updateField(prevState, id, value.value));
+    };
+
+    const handleChangeSignature = (id) => {
+        if (userProfile.signature) {
+            setActiveForm((prevState) =>
+                updateField(prevState, id, {
+                    signature: userProfile.signature,
+                    name: userProfile.name,
+                    date: moment().toString(),
+                })
+            );
+        }
+    };
+
+    const handleChangeTableRadio = (e) => {
+        const {
+            dataset: { id, rowId, columnId },
+        } = e.target;
+
+        setActiveForm((prevActiveForm) => {
+            // Find the form element that matches the given id
+            const formKey = Object.keys(prevActiveForm).find(
+                (key) => prevActiveForm[key].id === id
+            );
+
+            if (!formKey || !prevActiveForm[formKey]?.rows) {
+                console.info(
+                    `Form with id ${id} does not exist or has no rows`
+                );
+                return prevActiveForm;
+            }
+
+            // Create a new rows array with toggled value properties
+            const updatedRows = prevActiveForm[formKey].rows.map((row) => {
+                if (row.id === rowId) {
+                    // Ensure the value is an object to handle multiple columns
+                    const updatedValue = {
+                        ...row.value,
+                        [columnId]: !row.value?.[columnId], // Toggle the specific column value
+                    };
+                    return {
+                        ...row,
+                        value: updatedValue,
+                    };
+                }
+                return row;
+            });
+
+            // Return the updated activeForm state
+            return {
+                ...prevActiveForm,
+                [formKey]: {
+                    ...prevActiveForm[formKey],
+                    rows: updatedRows,
+                },
+            };
+        });
+    };
+
+    const handleChangeAddTableTextRow = (id) => {
+        setActiveForm((prevActiveForm) => {
+            // Find the key of the form that matches the id
+            const formKey = Object.keys(prevActiveForm).find(
+                (key) => prevActiveForm[key].id === id
+            );
+
+            if (!formKey) {
+                console.info(`Form with id ${id} does not exist.`);
+                return prevActiveForm;
+            }
+
+            // Create a new row with placeholders based on the options length
+            const numOptions = prevActiveForm[formKey].options.length;
+            const newRow = Array(numOptions).fill(''); // Create an array of empty strings
+
+            return {
+                ...prevActiveForm,
+                [formKey]: {
+                    ...prevActiveForm[formKey],
+                    value: [
+                        ...(prevActiveForm[formKey].value || []), // Handle null by initializing to empty array
+                        newRow,
+                    ],
+                },
+            };
+        });
+    };
+
+    const handleChangeTableText = (e, rowIndex, columnIndex) => {
+        const { value, checked, type } = e.target;
+        const { id } = e.target.dataset;
+
+        setActiveForm((prevActiveForm) => {
+            const formKey = Object.keys(prevActiveForm).find(
+                (key) => prevActiveForm[key].id === id
+            );
+
+            if (!formKey) return prevActiveForm;
+
+            const updatedRows = (prevActiveForm[formKey].value || []).map(
+                (row, index) =>
+                    index === rowIndex
+                        ? row.map((cell, colIndex) =>
+                              colIndex === columnIndex
+                                  ? type === 'checkbox' || type === 'toggle'
+                                      ? checked
+                                      : value
+                                  : cell
+                          )
+                        : row
+            );
+
+            return {
+                ...prevActiveForm,
+                [formKey]: {
+                    ...prevActiveForm[formKey],
+                    value: updatedRows,
+                },
+            };
+        });
+    };
+
+    const handleChangeToggle = (e) => {
+        if (!e) {
+            return;
+        }
+
+        const { name, checked } = e.target;
+
+        setActiveForm((prevState) => updateField(prevState, name, checked));
+    };
+
+    const handleFileDownload = async (d) => {
+        const toastId = toast.loading('Downloading file...');
+        try {
+            const res = await Download(setting.file, 'POST', {
+                extension: d.extension,
+                uuid: d.uuid,
+                filename: d.filename,
+            });
+
+            if (res.data) {
+                saveAs(res.data, d.filename);
+                toast.update(toastId, {
+                    render: 'Download successful!',
+                    type: 'success',
+                    isLoading: false,
+                    autoClose: 5000,
+                    closeButton: true,
+                });
+            } else {
+                toast.update(toastId, {
+                    render: 'Error downloading form',
+                    type: 'error',
+                    isLoading: false,
+                    autoClose: 5000,
+                    closeButton: true,
+                });
+            }
+        } catch (err) {
+            toast.update(toastId, {
+                render: 'Error downloading form',
+                type: 'error',
+                isLoading: false,
+                autoClose: 5000,
+                closeButton: true,
+            });
+        }
+    };
+
+    const handleSelectForm = (form, key) => {
+        setActiveForm(form);
+        setActiveFormKey(key);
+    };
+
+    const handleCustomButton = async (s) => {
+        let payload = {};
+        switch (s.type) {
+            case 'save':
+                if (s.payload?.length > 0) {
+                    s.payload.forEach((p) => {
+                        if (data[p]) {
+                            payload[p] = data[p];
+                        }
+                    });
+                }
+
+                const res = await Download(s.url, s.method, payload);
+
+                if (res.data) {
+                    saveAs(res.data);
+                }
+                break;
+            default:
+                console.info(s, 'default');
+                break;
+        }
+    };
+
+    const handleAddNewForm = async (showToast = true) => {
+        try {
+            if (activeForm && activeForm.id) {
+                await CustomFetch(setting.save, 'POST', {
+                    client_id: data.id,
+                    form_data: {
+                        ...activeForm,
+                    },
+                    form_key: activeFormKey,
+                    form_type: type,
+                });
+            }
+
+            if (setting.add) {
+                const res = await CustomFetch(setting.add, 'POST', {
+                    client_id: data.id,
+                    form_name: type,
+                });
+
+                if (res.data.error === '') {
+                    if (showToast) {
+                        toast.success('Form added successfully');
+                    }
+                    fetchData();
+                }
+            }
+        } catch (err) {
+            console.error(err);
+            toast.error('Error adding form');
+        }
+    };
+
+    const handleDownloadForm = async (item, label, data) => {
+        const toastId = toast.loading('Downloading form...');
+
+        try {
+            const response = await Download(setting.download, 'POST', {
+                data: item,
+                dynamicData: data,
+                label: label,
+            });
+
+            if (response && response.data) {
+                const contentDisposition = response.headers.get(
+                    'Content-Disposition'
+                );
+                let filename = null;
+
+                if (contentDisposition) {
+                    const filenameMatch = contentDisposition.match(
+                        /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
+                    );
+                    if (filenameMatch && filenameMatch[1]) {
+                        filename = filenameMatch[1].replace(/['"]/g, '');
+                    }
+                }
+
+                if (filename) {
+                    saveAs(response.data, filename);
+                } else {
+                    saveAs(response.data);
+                }
+
+                toast.update(toastId, {
+                    render: 'Download successful!',
+                    type: 'success',
+                    isLoading: false,
+                    autoClose: 5000,
+                    closeButton: true,
+                });
+            } else {
+                throw new Error('No data received from the server');
+            }
+        } catch (err) {
+            console.error(err);
+            toast.update(toastId, {
+                render: 'Error downloading form: ' + err.message,
+                type: 'error',
+                isLoading: false,
+                autoClose: 5000,
+                closeButton: true,
+            });
+        }
+    };
+
+    const handleDeleteForm = async (id, key) => {
+        const deleteForm = async () => {
+            try {
+                const res = await CustomFetch(setting.delete, 'POST', {
+                    client_id: data.id,
+                    form_id: id,
+                    form_key: key,
+                    form_type: type,
+                });
+
+                if (res.data.error === '') {
+                    toast.success('Form deleted successfully.');
+                    fetchData();
+                } else {
+                    toast.error('Error: ' + res.data.error);
+                }
+            } catch (err) {
+                console.error(err);
+                toast.error('Error deleting form');
+            }
+        };
+
+        confirmAlert({
+            title: 'Delete File',
+            message: 'Are you sure?',
+            buttons: [
+                {
+                    label: 'Yes',
+                    onClick: deleteForm,
+                },
+                {
+                    label: 'No',
+                },
+            ],
+        });
+    };
+
+    const handleSaveForm = async () => {
+        try {
+            let error = '';
+
+            Object.entries(activeForm).forEach(([key, field]) => {
+                if (
+                    field.required === true &&
+                    field.type !== 'dynamicdata' &&
+                    (field.value === null || field.value === '')
+                ) {
+                    error += `<p>${field.label} is required</p>`;
+                }
+            });
+
+            if (error === '') {
+                const res = await CustomFetch(setting.save, 'POST', {
+                    [primaryKey]: data.id,
+                    form_data: {
+                        ...activeForm,
+                    },
+                    form_key: activeFormKey,
+                    form_type: type,
+                });
+
+                if (res.data.error === '') {
+                    toast.success('Form saved successfully.');
+                    fetchData();
+                }
+            } else {
+                toast.error(<div>{parse(error)}</div>);
+            }
+        } catch (err) {
+            console.log(err);
+        }
+    };
+
+    useEffect(() => {
+        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';
+                                }
+                            }
+                        });
+
+                        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({});
+        }
+    }, [data, type]);
+
+    useEffect(() => {
+        if (data[type] && data[type].length > 0) {
+        } else {
+            if (templateStatus) {
+                if (multiple) {
+                    if (activeForm.hasOwnProperty('id') === false) {
+                        handleAddNewForm(false);
+                    }
+                } else {
+                    if (Object.keys(activeForm).length === 0) {
+                        handleAddNewForm(false);
+                    }
+                }
+            }
+        }
+    }, [activeForm]);
+
+    const shouldDisplayFormList = (data, type) => {
+        if (!data[type] || !Array.isArray(data[type])) {
+            return false;
+        }
+        return (
+            data[type].length !== 1 ||
+            moment(data[type][0].updated_at).isAfter(
+                moment(data[type][0].created_at)
+            )
+        );
+    };
+
+    return (
+        <>
+            <div className={styles.formSplit}>
+                {multiple && shouldDisplayFormList(data, type) && (
+                    <>
+                        <div className={styles.gridtxt__header}>
+                            <span>Form List</span>
+                        </div>
+                        <table className={styles.contentTable}>
+                            <thead>
+                                <tr>
+                                    <th>ID</th>
+                                    <th>Form</th>
+                                    <th>Created By</th>
+                                    <th>Created At</th>
+                                    <th>Updated By</th>
+                                    <th>Updated At</th>
+                                    <th></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {typeof data[type]?.map === 'function' &&
+                                    data[type].map((item, index) => {
+                                        const idAsNumber = parseFloat(item.id);
+                                        if (
+                                            !isNaN(idAsNumber) &&
+                                            Number.isInteger(idAsNumber)
+                                        ) {
+                                            return (
+                                                <tr
+                                                    key={`form-list-${index}`}
+                                                    onClick={(e) => {
+                                                        e.preventDefault();
+                                                        handleSelectForm(
+                                                            item,
+                                                            index
+                                                        );
+                                                    }}
+                                                >
+                                                    <td>{item.id}</td>
+                                                    <td>{item.form_label}</td>
+                                                    <td>{item.created_by}</td>
+                                                    <td>
+                                                        {item.created_at
+                                                            ? moment(
+                                                                  item.created_at
+                                                              ).format(
+                                                                  'DD-MM-YYYY hh:mm A'
+                                                              )
+                                                            : null}
+                                                    </td>
+                                                    <td>{item.updated_by}</td>
+                                                    <td>
+                                                        {item.updated_at
+                                                            ? moment(
+                                                                  item.updated_at
+                                                              ).format(
+                                                                  'DD-MM-YYYY hh:mm A'
+                                                              )
+                                                            : null}
+                                                    </td>
+                                                    <td>
+                                                        <div
+                                                            className={
+                                                                styles.tdActions
+                                                            }
+                                                        >
+                                                            <span
+                                                                data-tooltip-id="system-tooltip"
+                                                                data-tooltip-content="Download Form"
+                                                                className="tooltip"
+                                                                onClick={() =>
+                                                                    handleDownloadForm(
+                                                                        item,
+                                                                        label,
+                                                                        originalData
+                                                                    )
+                                                                }
+                                                            >
+                                                                <CloudDownload
+                                                                    strokeWidth={
+                                                                        2
+                                                                    }
+                                                                    size={18}
+                                                                    className={
+                                                                        styles.tdAction
+                                                                    }
+                                                                />
+                                                            </span>
+                                                            <span
+                                                                data-tooltip-id="system-tooltip"
+                                                                data-tooltip-content="Delete Form"
+                                                                className="tooltip"
+                                                                onClick={() =>
+                                                                    handleDeleteForm(
+                                                                        item.id,
+                                                                        index
+                                                                    )
+                                                                }
+                                                            >
+                                                                <Backspace
+                                                                    strokeWidth={
+                                                                        2
+                                                                    }
+                                                                    size={18}
+                                                                    className={
+                                                                        styles.tdAction
+                                                                    }
+                                                                />
+                                                            </span>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        }
+                                        return null;
+                                    })}
+                            </tbody>
+                        </table>
+                    </>
+                )}
+
+                {activeForm && (
+                    <>
+                        <div className={styles.gridtxt__header}>
+                            <span>
+                                {label}
+                                {multiple && ` - Form #${activeForm?.id ?? ''}`}
+                            </span>
+                        </div>
+                        <div className={styles.formcontainer}>
+                            <div className={styles.modalForm}>
+                                {typeof activeForm === 'object' &&
+                                !Array.isArray(activeForm)
+                                    ? Object.entries(activeForm)
+                                          .filter(
+                                              ([key, value]) =>
+                                                  typeof value === 'object' &&
+                                                  [
+                                                      'id',
+                                                      'label',
+                                                      'type',
+                                                      'size',
+                                                      'value',
+                                                  ].every((k) =>
+                                                      value.hasOwnProperty(k)
+                                                  )
+                                          )
+                                          .map(
+                                              ([key, field]) =>
+                                                  field.hide === 0 && (
+                                                      <Field
+                                                          settings={field}
+                                                          key={`field-${key}-${field.id}`}
+                                                          formData={activeForm}
+                                                          inputClass={''}
+                                                          inputValue={renderValue(
+                                                              field,
+                                                              originalData
+                                                          )}
+                                                          onChange={
+                                                              handleChange
+                                                          }
+                                                          onChangeCheckbox={
+                                                              handleChangeCheckbox
+                                                          }
+                                                          onChangeDate={
+                                                              handleChangeDate
+                                                          }
+                                                          onChangeNumberFormat={
+                                                              handleChangeNumberFormat
+                                                          }
+                                                          onChangeSignature={
+                                                              handleChangeSignature
+                                                          }
+                                                          onChangeTableRadio={
+                                                              handleChangeTableRadio
+                                                          }
+                                                          onChangeAddTableTextRow={
+                                                              handleChangeAddTableTextRow
+                                                          }
+                                                          onChangeTableText={
+                                                              handleChangeTableText
+                                                          }
+                                                          onChangeToggle={
+                                                              handleChangeToggle
+                                                          }
+                                                          onFileDownload={
+                                                              handleFileDownload
+                                                          }
+                                                          style={{}}
+                                                          userProfile={
+                                                              userProfile
+                                                          }
+                                                      />
+                                                  )
+                                          )
+                                    : typeof activeForm?.map === 'function' &&
+                                      activeForm.map(
+                                          (field, index) =>
+                                              field.hide === 0 && (
+                                                  <Field
+                                                      settings={field}
+                                                      key={`field-array-${index}-${field.id}`}
+                                                      formData={activeForm}
+                                                      inputClass={''}
+                                                      inputValue={renderValue(
+                                                          field,
+                                                          originalData
+                                                      )}
+                                                      onChange={handleChange}
+                                                      onChangeCheckbox={
+                                                          handleChangeCheckbox
+                                                      }
+                                                      onChangeDate={
+                                                          handleChangeDate
+                                                      }
+                                                      onChangeTableRadio={
+                                                          handleChangeTableRadio
+                                                      }
+                                                      onChangeAddTableTextRow={
+                                                          handleChangeAddTableTextRow
+                                                      }
+                                                      onChangeTableText={
+                                                          handleChangeTableText
+                                                      }
+                                                      onChangeToggle={
+                                                          handleChangeToggle
+                                                      }
+                                                      onFileDownload={
+                                                          handleFileDownload
+                                                      }
+                                                      style={{}}
+                                                      userProfile={userProfile}
+                                                  />
+                                              )
+                                      )}
+                            </div>
+                        </div>
+                    </>
+                )}
+            </div>
+            <div className={styles.polActions}>
+                {buttons &&
+                    buttons.length > 0 &&
+                    buttons.map((button, buttonKey) => (
+                        <button
+                            className={button.className}
+                            key={`button-${buttonKey}`}
+                            onClick={(e) => {
+                                e.preventDefault();
+
+                                handleCustomButton(button);
+                            }}
+                        >
+                            {button.label}
+                        </button>
+                    ))}
+
+                {multiple && templateStatus && (
+                    <button className="btn" onClick={handleAddNewForm}>
+                        Add New Form
+                    </button>
+                )}
+
+                {activeForm.id ? (
+                    <>
+                        {multiple && activeForm.form_status === 0 ? (
+                            <button className="btn" onClick={handleSaveForm}>
+                                Save
+                            </button>
+                        ) : (
+                            <button className="btn" onClick={handleSaveForm}>
+                                Save
+                            </button>
+                        )}
+                    </>
+                ) : (
+                    <button className="btn" onClick={handleSaveForm}>
+                        Save
+                    </button>
+                )}
+            </div>
+        </>
+    );
+};
+
+export default GenericDynamic;