@visns-studio/visns-components 3.4.12 → 3.5.1

package/components/cms/sorting/Item.jsx

@@ -25,8 +25,6 @@ const SortableItem = ({
     const renderImage = (d) => {
         let htmlContainer = '';
 
-        console.info(showImage, 'aaa');
-
         if (showImage) {
             const imageUrl = d.image_url || d.file_url;
             htmlContainer = imageUrl ? (
@@ -36,7 +34,10 @@ const SortableItem = ({
             ) : (
                 <div className="sortimg">
                     {/* Placeholder image */}
-                    <img src="data:image/png;base64,..." />
+                    <img
+                        src="data:image/png;base64,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"
+                        alt="Placeholder"
+                    />
                 </div>
             );
         }

package/components/crm/Field.jsx

@@ -42,6 +42,7 @@ function Field({
     style,
 }) {
     const editorRef = useRef(null);
+    const fileImageInputRef = useRef(null);
     const [colorPickerShow, setColorPickerShow] = useState(false);
     const [dataOptions, setDataOptions] = useState([]);
     const [formItemStyle, setFormItemStyle] = useState({});
@@ -869,30 +870,34 @@ function Field({
                         style={{
                             display: 'inline-flex',
                             alignItems: 'center',
+                            cursor: 'pointer',
+                        }}
+                        onClick={() => {
+                            fileImageInputRef.current.click();
                         }}
                     >
                         <input
                             type="file"
                             data-name={settings.id}
-                            className={inputClass[settings.id]}
+                            className={inputClass[settings.id]} // Assuming inputClass is defined elsewhere in your code
                             onChange={onChange}
-                        />{' '}
-                        {inputValue && inputValue.key && inputValue.uuid && (
-                            <div
+                            ref={fileImageInputRef}
+                            style={{ display: 'none' }} // Hide the file input
+                        />
+                        {inputValue.imageSrc ? (
+                            <img
+                                src={inputValue.imageSrc}
+                                alt="Uploaded"
                                 style={{
                                     marginLeft: '10px',
-                                    cursor: 'pointer',
+                                    maxHeight: '100px', // Set a maximum height for the image
                                 }}
-                                data-tooltip-id="system-tooltip"
-                                data-tooltip-content={inputValue.filename}
-                                onClick={(e) => {
-                                    e.preventDefault();
-
-                                    onFileDownload(inputValue);
-                                }}
-                            >
-                                <CloudDownload size={24} />
-                            </div>
+                            />
+                        ) : (
+                            <img
+                                src="data:image/png;base64,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"
+                                alt="Placeholder"
+                            />
                         )}
                     </div>
                 );

package/components/crm/generic/GenericDynamic.jsx

@@ -0,0 +1,544 @@
+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';
+
+const updateField = (fields, name, value) => {
+    return Object.entries(fields).reduce((updatedFields, [key, field]) => {
+        // Check if the current field is the one to be updated
+        if (field.id === name) {
+            // Update the value of the field
+            updatedFields[key] = { ...field, value };
+        } else {
+            // Keep the field as is
+            updatedFields[key] = field;
+        }
+        return updatedFields;
+    }, {});
+};
+
+const renderValue = (field) => {
+    switch (field.type) {
+        case 'datetime':
+        case 'date':
+        case 'time':
+            return field.value && moment(field.value).isValid()
+                ? moment(field.value).toDate()
+                : '';
+        default:
+            return field.value || '';
+    }
+};
+
+const GenericDynamic = ({ data, fetchData, label, setData, setting, type }) => {
+    const toastId = useRef(null);
+    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]) {
+            // Start the upload process and read the file if it's an image
+            Vapor.store(files[0], {
+                progress: (progress) => {
+                    // Update or show the toast based on upload progress
+                    if (
+                        toastId.current === null ||
+                        !toast.isActive(toastId.current)
+                    ) {
+                        toastId.current = toast(`File Upload in Progress`, {
+                            progress,
+                        });
+                    } else {
+                        toast.update(toastId.current, { progress });
+                    }
+                },
+            }).then((response) => {
+                if (files[0].type.startsWith('image/')) {
+                    // Use FileReader to asynchronously read the file as a data URL for image preview
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        const imageSrc = e.target.result; // This is the data URL
+
+                        // Set active form state with file details and imageSrc for preview
+                        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, // Add the data URL as imageSrc
+                            })
+                        );
+                    };
+                    reader.readAsDataURL(files[0]);
+                } else {
+                    // Handle non-image files
+                    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.dismiss(toastId.current);
+            });
+        } 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 handleFileDownload = async (d) => {
+        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);
+            } else {
+                toast.error('Error downloading file');
+            }
+        } catch (err) {
+            console.error(err);
+            toast.error('Error downloading file');
+        }
+    };
+
+    const handleSelectForm = (form, key) => {
+        setActiveForm(form);
+        setActiveFormKey(key);
+    };
+
+    const handleAddNewForm = async () => {
+        try {
+            if (activeForm && activeForm.id) {
+                await CustomFetch(setting.save, 'POST', {
+                    client_id: data.id,
+                    form_data: {
+                        ...activeForm,
+                    },
+                    form_key: activeFormKey,
+                    form_type: type,
+                });
+            }
+
+            const res = await CustomFetch(setting.add, 'POST', {
+                client_id: data.id,
+                form_name: type,
+            });
+            if (res.data.error === '') {
+                toast.success('Form added successfully');
+                fetchData();
+            }
+        } catch (err) {
+            console.error(err);
+            toast.error('Error adding form');
+        }
+    };
+
+    // Utility function to slugify a string
+    const slugify = (text) => {
+        return text
+            .toString()
+            .toLowerCase()
+            .replace(/\s+/g, '-') // Replace spaces with -
+            .replace(/[^\w\-]+/g, '') // Remove all non-word chars
+            .replace(/\-\-+/g, '-') // Replace multiple - with single -
+            .replace(/^-+/, '') // Trim - from start of text
+            .replace(/-+$/, ''); // Trim - from end of text
+    };
+
+    const handleDownloadForm = async (item, key) => {
+        try {
+            const res = await Download(setting.download, 'POST', {
+                data: item,
+                label: label,
+            });
+
+            if (res.data) {
+                const fileName = slugify(label) + '.pdf';
+                saveAs(res.data, fileName); // Use file-saver to save the file with a slugified label as the filename
+            } else {
+                toast.error('Error downloading form');
+            }
+        } catch (err) {
+            console.error(err);
+            toast.error('Error downloading form');
+        }
+    };
+
+    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 {
+                    // Handle case where there is an error in the response
+                    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',
+                    onClick: () => close(), // Ensure 'close' function is defined or remove this line
+                },
+            ],
+        });
+    };
+
+    const handleSaveForm = async () => {
+        try {
+            let error = '';
+
+            Object.entries(activeForm).forEach(([key, field]) => {
+                if (
+                    field.required === true &&
+                    (field.value === null || field.value === '')
+                ) {
+                    error += `<p>${field.label} is required</p>`;
+                }
+            });
+
+            if (error === '') {
+                const res = await CustomFetch(setting.save, 'POST', {
+                    client_id: 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]) {
+            // Retrieve the last form of the specified type
+            let lastForm = data[type][data[type].length - 1];
+
+            Object.entries(data[type][data[type].length - 1]).forEach(
+                ([key, field]) => {
+                    if (field.required) {
+                        if (
+                            field.required === 'yes' ||
+                            field.required === 'no'
+                        ) {
+                            lastForm[key].required =
+                                field.required === 'yes' ? true : false;
+                        }
+                    }
+                }
+            );
+
+            // Update the active form with the modified lastForm
+            setActiveForm(lastForm);
+            setActiveFormKey(data[type].length - 1);
+        } else {
+            handleAddNewForm();
+        }
+    }, [data, type]);
+
+    return (
+        <>
+            <div className="formSplit">
+                {data[type] && data[type].length > 1 && (
+                    <>
+                        <div className="gridtxt__header">
+                            <span>Form List</span>
+                        </div>
+                        <table
+                            className="content-table"
+                            style={{ marginBottom: '30px' }}
+                        >
+                            <thead>
+                                <tr className="grid-headers">
+                                    <th>ID</th>
+                                    <th>Created By</th>
+                                    <th>Created At</th>
+                                    <th>Updated By</th>
+                                    <th>Updated At</th>
+                                    <th></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {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>Form #{item.id}</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="tdactions">
+                                                        <span
+                                                            data-tooltip-id="system-tooltip"
+                                                            data-tooltip-content={
+                                                                'Download Form'
+                                                            }
+                                                            className="tooltip"
+                                                            onClick={() =>
+                                                                handleDownloadForm(
+                                                                    item,
+                                                                    index
+                                                                )
+                                                            }
+                                                        >
+                                                            <CloudDownload
+                                                                strokeWidth={2}
+                                                                size={18}
+                                                                className="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="tdaction"
+                                                            />
+                                                        </span>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        );
+                                    }
+                                    return null;
+                                })}
+                            </tbody>
+                        </table>
+                    </>
+                )}
+
+                {activeForm && (
+                    <>
+                        <div className="gridtxt__header">
+                            <span>
+                                {label} - Form #{activeForm.id}
+                            </span>
+                        </div>
+                        <div
+                            className="formcontainer"
+                            style={{ paddingBottom: '50px' }}
+                        >
+                            <div className="modalForm">
+                                {activeForm &&
+                                    Object.entries(activeForm)
+                                        .filter(([key, value]) => {
+                                            // Check if the value is an object and has the required keys
+                                            return (
+                                                value &&
+                                                typeof value === 'object' &&
+                                                [
+                                                    'id',
+                                                    'label',
+                                                    'type',
+                                                    'size',
+                                                    'value',
+                                                ].every((k) =>
+                                                    value.hasOwnProperty(k)
+                                                )
+                                            );
+                                        })
+                                        .map(([key, field]) => {
+                                            // Check if the field is not hidden
+                                            if (field.hide === 0) {
+                                                return (
+                                                    <Field
+                                                        settings={field}
+                                                        key={`field-${key}-${field.id}`}
+                                                        formData={activeForm}
+                                                        inputClass={''}
+                                                        inputValue={renderValue(
+                                                            field
+                                                        )}
+                                                        onChange={handleChange}
+                                                        onChangeCheckbox={
+                                                            handleChangeCheckbox
+                                                        }
+                                                        onChangeColour={() => {}}
+                                                        onChangeDate={
+                                                            handleChangeDate
+                                                        }
+                                                        onChangeSelect={() => {}}
+                                                        onChangeRicheditor={() => {}}
+                                                        onChangeToggle={
+                                                            handleChange
+                                                        }
+                                                        onChangeNumberFormat={() => {}}
+                                                        onFileDownload={
+                                                            handleFileDownload
+                                                        }
+                                                        autocompleteCallback={() => {}}
+                                                        childDropdownCallback={() => {}}
+                                                        setFormData={setData}
+                                                        style={{}}
+                                                    />
+                                                );
+                                            }
+                                            return null;
+                                        })}
+                            </div>
+                        </div>
+                    </>
+                )}
+            </div>
+            <div className="polActions">
+                <button className="btn" onClick={handleAddNewForm}>
+                    Add New Form
+                </button>
+
+                {activeForm && activeForm.form_status === 0 && (
+                    <button className="btn" onClick={handleSaveForm}>
+                        Save
+                    </button>
+                )}
+            </div>
+        </>
+    );
+};
+
+export default GenericDynamic;