@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/crm/generic/GenericDynamic.jsx

@@ -1,915 +0,0 @@
-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.css';
-
-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'
-                                      ? 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.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;