@visns-studio/visns-components 4.10.48 → 5.0.0

package/src/components/crm/Field.jsx

@@ -2,7 +2,7 @@ import '../styles/global.css';
 
 import React, { useEffect, useRef, useState } from 'react';
 import DatePicker from 'react-datepicker';
-import _, { forEach } from 'lodash';
+import _ from 'lodash';
 import Toggle from 'react-toggle';
 import moment from 'moment';
 import parse from 'html-react-parser';
@@ -11,18 +11,7 @@ import { BlockPicker } from 'react-color';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { NumericFormat, PatternFormat } from 'react-number-format';
 import { Editor } from '@tinymce/tinymce-react';
-import {
-    Edit,
-    ChevronRight,
-    Circle,
-    CircleFill,
-    CirclePlus,
-    CloudDownload,
-    Minus,
-    ArrowBack,
-    TrashCan,
-    CircleX,
-} from 'akar-icons';
+import { CirclePlus, CloudDownload, Copy, TrashCan } from 'akar-icons';
 import { toast } from 'react-toastify';
 import styles from './styles/Field.module.scss';
 
@@ -30,15 +19,13 @@ import CustomFetch from './Fetch';
 import Form from './Form';
 import MultiSelect from './MultiSelect';
 import Select from './Select';
-import SketchConfig from './sketch/json/config.json';
-import SketchField from './sketch/SketchField';
-import Tools from './sketch/tools';
 import VisnsAsyncSelect from './AsyncSelect';
 import VisnsAutocomplete from './Autocomplete';
 import VisnsDropZone from '../cms/DropZone';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
+import Item from '../cms/sorting/Item';
 
 function Field({
     api,
@@ -51,7 +38,6 @@ function Field({
     inputClass,
     mapbox,
     onChange,
-    onChangeCanvas,
     onChangeCheckbox,
     onChangeCheckboxManual,
     onChangeColour,
@@ -79,30 +65,6 @@ function Field({
     const [formItemClass, setFormItemClass] = useState('');
     const [options, setOptions] = useState([]);
 
-    /** Canvas States */
-    const [canvasPopupOpen, setCanvasPopupOpen] = useState(false);
-    const [canvasUrl, setCanvasUrl] = useState('');
-    const [sketchTool, setSketchTool] = useState(Tools.Pencil);
-    const [toolClass, setToolClass] = useState('pencil');
-    const [lineWidth, setLineWidth] = useState(2);
-    const [lineColor, setLineColor] = useState('rgba(0, 0, 0, 1)');
-    const sketchRef = useRef(null);
-
-    /** Canvas Functions */
-    const handleCanvasSave = async () => {
-        // Save the current canvas state
-        const canvasState = sketchRef.current.saveCanvasState();
-
-        // Export the canvas image data as a Base64 string
-        const imageData = await sketchRef.current.exportCanvasImage(); // Use await here
-
-        // Call the onChangeCanvas function with both values
-        onChangeCanvas(settings, canvasState, imageData);
-
-        // Close the canvas popup
-        setCanvasPopupOpen(false);
-    };
-
     const cover = {
         position: 'fixed',
         top: '0px',
@@ -192,13 +154,6 @@ function Field({
                 setFormItemClass(`${styles.formItem}`);
                 break;
         }
-
-        if (settings.type === 'canvas') {
-            const canvasType = SketchConfig.canvasTypes.find(
-                (a) => a.id === settings.canvasType
-            );
-            setCanvasUrl(canvasType.url);
-        }
     }, [settings, counter]);
 
     const fetchChildDropdownData = (s, v) => {
@@ -227,12 +182,6 @@ function Field({
                             filter.orderBy = a.orderBy;
                         }
 
-                        if (a.where) {
-                            forEach(a.where, (w) => {
-                                filter.where.push(w);
-                            });
-                        }
-
                         CustomFetch(a.url, 'POST', filter, function (result) {
                             childDropdownCallback({
                                 id: a.id,
@@ -258,12 +207,6 @@ function Field({
                         filter.orderBy = s.orderBy;
                     }
 
-                    if (s.where) {
-                        forEach(s.where, (w) => {
-                            filter.where.push(w);
-                        });
-                    }
-
                     CustomFetch(s.child.url, 'POST', filter, function (result) {
                         childDropdownCallback({
                             id: s.child.id,
@@ -315,7 +258,6 @@ function Field({
                 'address',
                 'async-dropdown-ajax',
                 'checkbox',
-                'canvas',
                 'colour',
                 'copytoclipboard',
                 'date',
@@ -444,17 +386,6 @@ function Field({
                         dataOptions={dataOptions}
                     />
                 );
-            case 'canvas':
-                console.info('a');
-                return canvasUrl ? (
-                    <div
-                        onClick={() => setCanvasPopupOpen(true)}
-                        style={{ cursor: 'pointer' }}
-                    >
-                        <img src={canvasUrl} width="200" alt="Canvas Preview" />
-                    </div>
-                ) : null;
-
             case 'checkbox':
                 return (
                     <div
@@ -742,8 +673,9 @@ function Field({
                                 className={inputClass[settings.id]}
                                 onChange={onChange}
                             />
+                            {console.info(inputValue)}
                             {inputValue && inputValue.length > 0 && (
-                                <ul className={styles['file-list']}>
+                                <ul className="file-list">
                                     {inputValue.map((file, index) => (
                                         <li
                                             key={`file-${settings.id}-${index}`}
@@ -754,9 +686,7 @@ function Field({
                                                 ? file.file_name
                                                 : ''}
                                             <button
-                                                className={
-                                                    styles['trash-button']
-                                                }
+                                                className="trash-button"
                                                 onClick={(e) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();
@@ -1042,16 +972,6 @@ function Field({
                             }
                             dataOptions={dataOptions}
                             style={style}
-                            isCreatable={
-                                settings.hasOwnProperty('isCreatable')
-                                    ? settings.isCreatable
-                                    : false
-                            }
-                            creatableConfig={
-                                settings.hasOwnProperty('creatableConfig')
-                                    ? settings.creatableConfig
-                                    : {}
-                            }
                         />
                         {settings.create && (
                             <button
@@ -1513,9 +1433,7 @@ function Field({
                                 <th></th>
                                 {tableRadioColumns.map((column, columnKey) => (
                                     <th
-                                        key={`${settings.id}-${
-                                            column.id
-                                        }-${Math.random()}`}
+                                        key={`${settings.id}-${column.id}`}
                                         style={{
                                             width: '250px',
                                             whiteSpace: 'nowrap',
@@ -1536,17 +1454,21 @@ function Field({
                             </tr>
                         </thead>
                         <tbody>
-                            {tableRadioRows.map((row, rowKey) => (
+                            {tableRadioRows.map((row) => (
                                 <tr
                                     key={`table-radio-row-${settings.id}-${row.id}`}
                                 >
-                                    <td>{row.label}</td>
+                                    <td
+                                        style={{
+                                            whiteSpace: 'nowrap',
+                                        }}
+                                    >
+                                        {row.label}
+                                    </td>
                                     {tableRadioColumns.map((cell, cellKey) => (
                                         <td
-                                            key={`table-radio-cell-${settings.id}-${row.id}-${cell.id}-${cellKey}-${rowKey}`}
+                                            key={`table-radio-cell-${settings.id}-${row.id}-${cell.id}`}
                                             style={{
-                                                width: '250px',
-                                                whiteSpace: 'nowrap',
                                                 textAlign:
                                                     tableRadioColumns[cellKey]
                                                         .type === '' ||
@@ -1776,7 +1698,6 @@ function Field({
                 'address',
                 'async-dropdown-ajax',
                 'checkbox',
-                'canvas',
                 'colour',
                 'copytoclipboard',
                 'date',
@@ -1974,126 +1895,6 @@ function Field({
                     updateForm={setChildForm}
                 />
             </Popup>
-            <Popup
-                open={canvasPopupOpen}
-                onClose={() => setCanvasPopupOpen(false)}
-                closeOnDocumentClick={false}
-            >
-                <div className={`${styles.modalwrap} ${styles['top--modal']}`}>
-                    <div className={styles.modal}>
-                        <div className={styles.modal__header}>
-                            <h1>Edit Canvas</h1>
-                            <button
-                                className={styles.modal__close}
-                                onClick={() => setCanvasPopupOpen(false)}
-                            >
-                                <CircleX size={24} color="#FFF" />
-                            </button>
-                        </div>
-                        <div
-                            className={`${styles.modal__content} ${styles.drawDiv}`}
-                        >
-                            {/* Sketch Tools */}
-                            <ul className={styles.drawactions}>
-                                <li>
-                                    <button
-                                        onClick={() => {
-                                            handleCanvasSave();
-                                        }}
-                                        className={styles['drawactions--save']}
-                                    >
-                                        <CloudDownload size={16} /> Save
-                                    </button>
-                                </li>
-                                <li>
-                                    <button
-                                        onClick={() => {
-                                            setSketchTool(Tools.Pencil);
-                                            setToolClass('pencil');
-                                        }}
-                                        className={`${
-                                            styles['drawaction-pencil']
-                                        } ${
-                                            toolClass === 'pencil'
-                                                ? styles['drawactive']
-                                                : ''
-                                        }`}
-                                    >
-                                        <Edit size={16} /> Pencil
-                                    </button>
-                                </li>
-                                <li>
-                                    <button
-                                        onClick={() => {
-                                            setSketchTool(Tools.Line);
-
-                                            setToolClass('line');
-                                        }}
-                                        className={`${
-                                            styles['drawaction-line']
-                                        } ${
-                                            toolClass === 'line'
-                                                ? styles['drawactive']
-                                                : ''
-                                        }`}
-                                    >
-                                        <Minus size={16} /> Line
-                                    </button>
-                                </li>
-                                <li>
-                                    <button
-                                        onClick={() => {
-                                            setSketchTool(Tools.Circle);
-
-                                            setToolClass('circle');
-                                        }}
-                                        className={`${
-                                            styles['drawaction-circle']
-                                        } ${
-                                            toolClass === 'circle'
-                                                ? styles['drawactive']
-                                                : ''
-                                        }`}
-                                    >
-                                        <Circle size={16} /> Circle
-                                    </button>
-                                </li>
-                                <li>
-                                    <button
-                                        onClick={() => sketchRef.current.undo()}
-                                        className={styles['drawaction-undo']}
-                                    >
-                                        <ArrowBack size={16} /> Undo
-                                    </button>
-                                </li>
-                                <li>
-                                    <button
-                                        onClick={() =>
-                                            sketchRef.current.clearCanvas()
-                                        }
-                                        className={styles['drawactions--clear']}
-                                    >
-                                        <TrashCan size={16} /> Clear
-                                    </button>
-                                </li>
-                            </ul>
-                            {(canvasUrl || inputValue?.state) && (
-                                <SketchField
-                                    ref={sketchRef}
-                                    width={740}
-                                    height={800}
-                                    tool={sketchTool}
-                                    lineColor={lineColor}
-                                    lineWidth={lineWidth}
-                                    className={styles.drawcontainer}
-                                    backgroundImage={canvasUrl}
-                                    defaultValue={inputValue?.state || null}
-                                />
-                            )}
-                        </div>
-                    </div>
-                </div>
-            </Popup>
         </div>
     );
 }

package/src/components/crm/Form.jsx

@@ -151,8 +151,6 @@ function Form({
         }
     };
 
-    const handleChangeCanvas = (id, value) => {};
-
     const handleChangeCheckbox = (e) => {
         const { checked, name, value } = e.target;
 
@@ -218,14 +216,11 @@ function Form({
             updateFormData({ [id]: inputValue });
 
             // Update any matching form data properties
-            Object.keys(inputValue)
-                .filter(
-                    (key) =>
-                        formData.hasOwnProperty(key) &&
-                        key !== 'id' &&
-                        key !== 'label'
-                )
-                .forEach((key) => updateFormData({ [key]: inputValue[key] }));
+            Object.keys(inputValue).forEach((key) => {
+                if (formData.hasOwnProperty(key)) {
+                    updateFormData({ [key]: inputValue[key] });
+                }
+            });
 
             formSettings.fields.forEach((field) => {
                 if (field.id === id && field.trigger) {
@@ -272,28 +267,12 @@ function Form({
             let contentValue = inputValue[field.trigger.key];
 
             if (field.trigger.url && field.trigger.payload) {
-                let setContentPayload;
-
-                if (field.trigger?.payload?.key?.id) {
-                    setContentPayload = {
-                        [field.trigger.payload.key.id]:
-                            inputValue[field.trigger.payload.value.id],
-                        [field.trigger.payload.key.content]:
-                            inputValue[field.trigger.payload.value.content],
-                    };
-                } else {
-                    setContentPayload = {
-                        formData: formData,
-                        [field.trigger.payload.key.content]:
-                            inputValue[field.trigger.payload.value.content],
-                    };
-                }
-
-                const res = await CustomFetch(
-                    field.trigger.url,
-                    'POST',
-                    setContentPayload
-                );
+                const res = await CustomFetch(field.trigger.url, 'POST', {
+                    [field.trigger.payload.key.id]:
+                        inputValue[field.trigger.payload.value.id],
+                    [field.trigger.payload.key.content]:
+                        inputValue[field.trigger.payload.value.content],
+                });
 
                 if (res.data.content) {
                     contentValue = res.data.content;
@@ -622,6 +601,7 @@ function Form({
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
                                 } else {
+                                    console.info('b', formData, item.id);
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
                                 }
@@ -691,14 +671,7 @@ function Form({
 
                     if (!_.isEmpty(formData)) {
                         Object.keys(formData).forEach((item) => {
-                            const value = formData[item];
-
-                            // Check if it's a single File or an array of File objects
-                            if (
-                                value instanceof File ||
-                                (Array.isArray(value) &&
-                                    value.every((file) => file instanceof File))
-                            ) {
+                            if (formData[item] instanceof File) {
                                 fileUpload = true;
                                 fileKey = item;
 
@@ -713,55 +686,87 @@ function Form({
                         });
                     }
 
-                    const files = Array.isArray(formData[fileKey])
-                        ? formData[fileKey]
-                        : [formData[fileKey]];
+                    if (fileUpload && formData[fileKey]) {
+                        if (Array.isArray(formData[fileKey])) {
+                            const uploadPromises = formData[fileKey].map(
+                                async (file) => {
+                                    const toastId = toast.info(
+                                        `Uploading ${file.name}`,
+                                        {
+                                            progress: 0,
+                                            autoClose: false,
+                                        }
+                                    );
+
+                                    const fileRes = await Vapor.store(file, {
+                                        progress: (progress) => {
+                                            setUploadProgress(progress * 100);
+                                            toast.update(toastId, {
+                                                progress,
+                                            });
+                                        },
+                                    });
 
-                    if (fileUpload && files.length > 0) {
-                        const uploadPromises = files.map(async (file) => {
+                                    toast.update(toastId, {
+                                        render: `${file.name} uploaded successfully!`,
+                                        type: 'success',
+                                        autoClose: 3000,
+                                    });
+
+                                    return {
+                                        uuid: fileRes.uuid,
+                                        key: fileRes.key,
+                                        bucket: fileRes.bucket,
+                                        filename: file.name,
+                                        filesize: file.size,
+                                        extension: fileRes.extension,
+                                        file_relationship: fileKey,
+                                        fileable_field:
+                                            fileFieldSetting.fileable_field,
+                                    };
+                                }
+                            );
+
+                            formData['uploadedFiles'] = await Promise.all(
+                                uploadPromises
+                            );
+                        } else {
                             const toastId = toast.info(
-                                `Uploading ${file.name}`,
+                                `Uploading ${formData[fileKey].name}`,
                                 {
                                     progress: 0,
                                     autoClose: false,
                                 }
                             );
 
-                            const fileRes = await Vapor.store(file, {
-                                progress: (progress) => {
-                                    setUploadProgress(progress * 100);
-                                    toast.update(toastId, { progress });
-                                },
-                            });
+                            const fileRes = await Vapor.store(
+                                formData[fileKey],
+                                {
+                                    progress: (progress) => {
+                                        setUploadProgress(progress * 100);
+                                        toast.update(toastId, {
+                                            progress,
+                                        });
+                                    },
+                                }
+                            );
 
                             toast.update(toastId, {
-                                render: `${file.name} uploaded successfully!`,
+                                render: `${formData[fileKey].name} uploaded successfully!`,
                                 type: 'success',
                                 autoClose: 3000,
                             });
 
-                            return {
-                                uuid: fileRes.uuid,
-                                key: fileRes.key,
-                                bucket: fileRes.bucket,
-                                filename: file.name,
-                                filesize: file.size,
-                                extension: fileRes.extension,
-                                file_relationship: fileKey,
-                                fileable_field:
-                                    fileFieldSetting.fileable_field ||
-                                    fileFieldSetting.id,
-                            };
-                        });
-
-                        // Wait for all uploads to complete
-                        const uploadedFiles = await Promise.all(uploadPromises);
-
-                        // If there are multiple files, store them as an array, otherwise as a single object
-                        formData['uploadedFiles'] =
-                            uploadedFiles.length > 1
-                                ? uploadedFiles
-                                : uploadedFiles[0];
+                            formData['uuid'] = fileRes.uuid;
+                            formData['key'] = fileRes.key;
+                            formData['bucket'] = fileRes.bucket;
+                            formData['filename'] = formData[fileKey].name;
+                            formData['filesize'] = formData[fileKey].size;
+                            formData['extension'] = fileRes.extension;
+                            formData['file_relationship'] = fileKey;
+                            formData['fileable_field'] =
+                                fileFieldSetting.fileable_field;
+                        }
                     }
 
                     // Transform keys with dots into nested objects
@@ -860,9 +865,7 @@ function Form({
                             _formData[id] =
                                 newValue instanceof Date
                                     ? newValue
-                                    : newValue !== undefined
-                                    ? moment(newValue).toDate()
-                                    : '';
+                                    : moment(newValue).toDate();
                         } else {
                             _formData[id] = newValue;
                         }
@@ -1364,18 +1367,15 @@ function Form({
         );
     } else {
         return (
-            <div className={`${styles.modalwrap} ${styles['top--modal']}`}>
-                <div className={styles.modal}>
-                    <div className={styles.modal__header}>
+            <div className="modalwrap top--modal">
+                <div className="modal">
+                    <div className="modal__header">
                         <h1>{formSettings[formType]?.title}</h1>
-                        <button
-                            className={styles.modal__close}
-                            onClick={closeModal}
-                        >
+                        <button className="modal__close" onClick={closeModal}>
                             <CircleX strokeWidth={1} size={24} />
                         </button>
                     </div>
-                    <div className={styles.modal__content}>
+                    <div className="modal__content">
                         <div className={styles.formcontainer}>
                             <form className={styles.modalForm}>
                                 {formSettings?.fields?.map((item, index) => {
@@ -1426,7 +1426,6 @@ function Form({
                                             }
                                             mapbox={mapbox}
                                             onChange={handleChange}
-                                            onChangeCanvas={handleChangeCanvas}
                                             onChangeCheckbox={
                                                 handleChangeCheckbox
                                             }