@visns-studio/visns-components 3.5.0 → 3.5.2

package/components/cms/sorting/Item.jsx

@@ -34,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

@@ -38,7 +38,7 @@ const renderValue = (field) => {
     }
 };
 
-const GenericDynamic = ({ data, fetchData, label, setData, type }) => {
+const GenericDynamic = ({ data, fetchData, label, setData, setting, type }) => {
     const toastId = useRef(null);
     const [activeForm, setActiveForm] = useState([]);
     const [activeFormKey, setActiveFormKey] = useState(0);
@@ -55,16 +55,17 @@ const GenericDynamic = ({ data, fetchData, label, setData, type }) => {
 
         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) === false
+                        !toast.isActive(toastId.current)
                     ) {
                         toastId.current = toast(`File Upload in Progress`, {
                             progress,
@@ -74,22 +75,45 @@ const GenericDynamic = ({ data, fetchData, label, setData, type }) => {
                     }
                 },
             }).then((response) => {
-                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,
-                    })
-                );
+                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)
             );
@@ -133,8 +157,9 @@ const GenericDynamic = ({ data, fetchData, label, setData, type }) => {
     };
 
     const handleFileDownload = async (d) => {
+        const toastId = toast.loading('Downloading file...'); // Show loading toast
         try {
-            const res = await Download('/ajax/clients/download', 'POST', {
+            const res = await Download(setting.file, 'POST', {
                 extension: d.extension,
                 uuid: d.uuid,
                 filename: d.filename,
@@ -142,12 +167,33 @@ const GenericDynamic = ({ data, fetchData, label, setData, type }) => {
 
             if (res.data) {
                 saveAs(res.data, d.filename);
+                toast.update(toastId, {
+                    render: 'Download successful!',
+                    type: 'success',
+                    isLoading: false,
+                    autoClose: 5000,
+                    closeButton: true,
+                });
             } else {
-                toast.error('Error downloading file');
+                // Update the toast to show an error message
+                toast.update(toastId, {
+                    render: 'Error downloading form',
+                    type: 'error',
+                    isLoading: false,
+                    autoClose: 5000,
+                    closeButton: true,
+                });
             }
         } catch (err) {
             console.error(err);
-            toast.error('Error downloading file');
+            // Update the toast to show an error message
+            toast.update(toastId, {
+                render: 'Error downloading form',
+                type: 'error',
+                isLoading: false,
+                autoClose: 5000,
+                closeButton: true,
+            });
         }
     };
 
@@ -159,7 +205,7 @@ const GenericDynamic = ({ data, fetchData, label, setData, type }) => {
     const handleAddNewForm = async () => {
         try {
             if (activeForm && activeForm.id) {
-                await CustomFetch('/ajax/clients/saveForm', 'POST', {
+                await CustomFetch(setting.save, 'POST', {
                     client_id: data.id,
                     form_data: {
                         ...activeForm,
@@ -169,7 +215,7 @@ const GenericDynamic = ({ data, fetchData, label, setData, type }) => {
                 });
             }
 
-            const res = await CustomFetch('/ajax/clients/addNewForm', 'POST', {
+            const res = await CustomFetch(setting.add, 'POST', {
                 client_id: data.id,
                 form_name: type,
             });
@@ -196,41 +242,58 @@ const GenericDynamic = ({ data, fetchData, label, setData, type }) => {
     };
 
     const handleDownloadForm = async (item, key) => {
+        // Show loading toast and keep its ID
+        const toastId = toast.loading('Downloading form...');
+
         try {
-            const res = await Download(
-                '/ajax/pdf/viewParticipantForm',
-                'POST',
-                {
-                    data: item,
-                    label: label,
-                }
-            );
+            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
+                // Update loading toast to a success message before closing it
+                toast.update(toastId, {
+                    render: 'Download successful!',
+                    type: 'success',
+                    isLoading: false,
+                    autoClose: 5000,
+                    closeButton: true,
+                });
+                // Perform the download
+                saveAs(res.data);
             } else {
-                toast.error('Error downloading form');
+                // Update the toast to show an error message
+                toast.update(toastId, {
+                    render: 'Error downloading form',
+                    type: 'error',
+                    isLoading: false,
+                    autoClose: 5000,
+                    closeButton: true,
+                });
             }
         } catch (err) {
             console.error(err);
-            toast.error('Error downloading form');
+            // Update the toast to show an error message
+            toast.update(toastId, {
+                render: 'Error downloading form',
+                type: 'error',
+                isLoading: false,
+                autoClose: 5000,
+                closeButton: true,
+            });
         }
     };
 
     const handleDeleteForm = async (id, key) => {
         const deleteForm = async () => {
             try {
-                const res = await CustomFetch(
-                    '/ajax/clients/deleteForm',
-                    'POST',
-                    {
-                        client_id: data.id,
-                        form_id: id,
-                        form_key: key,
-                        form_type: type,
-                    }
-                );
+                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.');
@@ -275,18 +338,14 @@ const GenericDynamic = ({ data, fetchData, label, setData, type }) => {
             });
 
             if (error === '') {
-                const res = await CustomFetch(
-                    '/ajax/clients/saveForm',
-                    'POST',
-                    {
-                        client_id: data.id,
-                        form_data: {
-                            ...activeForm,
-                        },
-                        form_key: activeFormKey,
-                        form_type: type,
-                    }
-                );
+                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.');
@@ -477,7 +536,8 @@ const GenericDynamic = ({ data, fetchData, label, setData, type }) => {
                                                 return (
                                                     <Field
                                                         settings={field}
-                                                        key={`field-${field.id}`}
+                                                        key={`field-${key}-${field.id}`}
+                                                        formData={activeForm}
                                                         inputClass={''}
                                                         inputValue={renderValue(
                                                             field

package/components/crm/generic/GenericFormBuilder.jsx

@@ -330,26 +330,63 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     const renderField = (field) => {
         switch (field.type) {
             case 'checkbox':
-                return renderLabel(
-                    field,
-                    field.options.length > 0 && (
-                        <div className="fi__optionscontainer">
-                            {field.options.map((option, index) => (
-                                <div
-                                    key={`${field.id}-checkbox-option-${index}`}
-                                    className="fi__checkboxcontainer"
-                                >
-                                    <input
-                                        type="checkbox"
-                                        className="fi__customcheckbox"
-                                    />
-                                    <label className="fi__checkboxlabel">
-                                        {option.label}
-                                    </label>{' '}
-                                </div>
-                            ))}
-                        </div>
-                    )
+                return (
+                    <label className="fi__label">
+                        <span className="fi__spancheckbox">
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                        {field.options.length > 0 ? (
+                            <div className="fi__optionscontainer">
+                                {field.options.map((option, index) => (
+                                    <div
+                                        key={`${field.id}-checkbox-option-${index}`}
+                                        className="fi__checkboxcontainer"
+                                    >
+                                        <input
+                                            type="checkbox"
+                                            className="fi__customcheckbox"
+                                        />
+                                        <label className="fi__checkboxlabel">
+                                            {option.label}
+                                        </label>{' '}
+                                    </div>
+                                ))}
+                            </div>
+                        ) : null}
+                    </label>
+                );
+            case 'date':
+                return (
+                    <label className="fi__label">
+                        <input type="date" />
+                        <span className="fi__span">
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'datetime':
+                return (
+                    <label className="fi__label">
+                        <input type="datetime-local" />
+                        <span className="fi__span">
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'dropdown':
+                return (
+                    <label className="fi__label">
+                        <select>
+                            <option>Please Select an Option</option>
+                        </select>
+                        <span className="fi__span">
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
                 );
             case 'dynamicdata':
                 return (
@@ -357,6 +394,26 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                         <strong>{field.label}</strong> [Dynamic Data]
                     </label>
                 );
+            case 'file':
+                return (
+                    <label className="fi__label">
+                        <input type="file" />
+                        <span className="fi__span">
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'image':
+                return (
+                    <label className="fi__label">
+                        <input type="file" />
+                        <span className="fi__span">
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
             case 'plaintextheading':
                 return (
                     <label className="fi__label">
@@ -369,6 +426,36 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                         {field.description ? parse(field.description) : null}
                     </label>
                 );
+            case 'number':
+                return (
+                    <label className="fi__label">
+                        <input type="number" />
+                        <span className="fi__span">
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'textarea':
+                return (
+                    <label className="fi__label">
+                        <textarea rows="5"></textarea>
+                        <span className="fi__span">
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'time':
+                return (
+                    <label className="fi__label">
+                        <input type="time" />
+                        <span className="fi__span">
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
             case 'toggle':
                 return (
                     <div>
@@ -380,22 +467,15 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                     </div>
                 );
             default:
-                const inputType =
-                    field.type === 'dropdown' ? (
-                        <select>
-                            <option>Please Select an Option</option>
-                        </select>
-                    ) : (
-                        <input
-                            type={
-                                field.type === 'datetime'
-                                    ? 'datetime-local'
-                                    : field.type
-                            }
-                        />
-                    );
-
-                return renderLabel(field, inputType);
+                return (
+                    <label className="fi__label">
+                        <input type="text" />
+                        <span className="fi__span">
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
         }
     };
 

package/package.json

@@ -37,6 +37,7 @@
         "react-window": "^1.8.10",
         "reactjs-popup": "^2.0.6",
         "truncate": "^3.0.0",
+        "uuid": "^9.0.1",
         "validator": "^13.11.0",
         "yarn": "^1.22.21"
     },
@@ -49,7 +50,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "3.5.0",
+    "version": "3.5.2",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {