@visns-studio/visns-components 4.10.14 → 4.10.16

package/package.json

@@ -16,6 +16,7 @@
         "awesome-debounce-promise": "^2.1.0",
         "axios": "^1.7.7",
         "dayjs": "^1.11.13",
+        "fabric": "^6.4.3",
         "file-saver": "^2.0.5",
         "framer-motion": "^11.11.9",
         "html-react-parser": "^5.1.18",
@@ -75,7 +76,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.10.14",
+    "version": "4.10.16",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [
@@ -96,5 +97,5 @@
         "url": "https://github.com/visnsstudio/visns-components/issues"
     },
     "homepage": "https://github.com/visnsstudio/visns-components#readme",
-    "packageManager": "yarn@4.4.0"
+    "packageManager": "yarn@4.5.1"
 }

package/src/components/crm/Field.jsx

@@ -11,7 +11,18 @@ 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 { CirclePlus, CloudDownload, Copy, TrashCan } from 'akar-icons';
+import {
+    Edit,
+    ChevronRight,
+    Circle,
+    CircleFill,
+    CirclePlus,
+    CloudDownload,
+    Minus,
+    ArrowBack,
+    TrashCan,
+    CircleX,
+} from 'akar-icons';
 import { toast } from 'react-toastify';
 import styles from './styles/Field.module.scss';
 
@@ -19,13 +30,15 @@ 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,
@@ -38,6 +51,7 @@ function Field({
     inputClass,
     mapbox,
     onChange,
+    onChangeCanvas,
     onChangeCheckbox,
     onChangeCheckboxManual,
     onChangeColour,
@@ -65,6 +79,30 @@ 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',
@@ -154,6 +192,13 @@ 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) => {
@@ -258,6 +303,7 @@ function Field({
                 'address',
                 'async-dropdown-ajax',
                 'checkbox',
+                'canvas',
                 'colour',
                 'copytoclipboard',
                 'date',
@@ -386,6 +432,16 @@ function Field({
                         dataOptions={dataOptions}
                     />
                 );
+            case 'canvas':
+                return canvasUrl ? (
+                    <div
+                        onClick={() => setCanvasPopupOpen(true)}
+                        style={{ cursor: 'pointer' }}
+                    >
+                        <img src={canvasUrl} width="200" alt="Canvas Preview" />
+                    </div>
+                ) : null;
+
             case 'checkbox':
                 return (
                     <div
@@ -1700,6 +1756,7 @@ function Field({
                 'address',
                 'async-dropdown-ajax',
                 'checkbox',
+                'canvas',
                 'colour',
                 'copytoclipboard',
                 'date',
@@ -1897,6 +1954,126 @@ 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,6 +151,8 @@ function Form({
         }
     };
 
+    const handleChangeCanvas = (id, value) => {};
+
     const handleChangeCheckbox = (e) => {
         const { checked, name, value } = e.target;
 
@@ -1367,15 +1369,18 @@ function Form({
         );
     } else {
         return (
-            <div className="modalwrap top--modal">
-                <div className="modal">
-                    <div className="modal__header">
+            <div className={`${styles.modalwrap} ${styles['top--modal']}`}>
+                <div className={styles.modal}>
+                    <div className={styles.modal__header}>
                         <h1>{formSettings[formType]?.title}</h1>
-                        <button className="modal__close" onClick={closeModal}>
+                        <button
+                            className={styles.modal__close}
+                            onClick={closeModal}
+                        >
                             <CircleX strokeWidth={1} size={24} />
                         </button>
                     </div>
-                    <div className="modal__content">
+                    <div className={styles.modal__content}>
                         <div className={styles.formcontainer}>
                             <form className={styles.modalForm}>
                                 {formSettings?.fields?.map((item, index) => {
@@ -1426,6 +1431,7 @@ function Form({
                                             }
                                             mapbox={mapbox}
                                             onChange={handleChange}
+                                            onChangeCanvas={handleChangeCanvas}
                                             onChangeCheckbox={
                                                 handleChangeCheckbox
                                             }

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

@@ -31,6 +31,8 @@ const updateField = (fields, name, value) => {
 
 const renderValue = (field, data) => {
     switch (field.type) {
+        case 'canvas':
+            return field.value || '';
         case 'datetime':
         case 'date':
             return field.value && moment(field.value).isValid()
@@ -103,6 +105,7 @@ const GenericDynamic = ({
 }) => {
     const [activeForm, setActiveForm] = useState({});
     const [activeFormKey, setActiveFormKey] = useState(0);
+    const [canvasSaveCounter, setCanvasSaveCounter] = useState(0);
 
     const handleChange = (e) => {
         const {
@@ -174,6 +177,36 @@ const GenericDynamic = ({
         }
     };
 
+    const handleChangeCanvas = (fieldSetting, value, imageData) => {
+        // Check if activeForm has keys
+        if (activeForm && typeof activeForm === 'object') {
+            // Iterate over the keys in activeForm to find the matching id
+            for (const key in activeForm) {
+                if (activeForm[key].id === fieldSetting.id) {
+                    // If a matching id is found, update the corresponding field
+                    setActiveForm((prevState) => ({
+                        ...prevState,
+                        [key]: {
+                            ...prevState[key],
+                            value, // Update the value for the matching id
+                            imageData,
+                        },
+                    }));
+
+                    setCanvasSaveCounter((prevState) => prevState + 1);
+                    return; // Exit after updating to prevent further iterations
+                }
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (canvasSaveCounter > 0) {
+            console.info(activeForm);
+            handleSaveForm(false);
+        }
+    }, [canvasSaveCounter]);
+
     const handleChangeCheckbox = (e) => {
         const { checked, name, value } = e.target;
 
@@ -550,27 +583,29 @@ const GenericDynamic = ({
         });
     };
 
-    const handleSaveForm = async () => {
+    const handleSaveForm = async (validate = true) => {
         try {
             let error = '';
 
-            const excludedTypes = [
-                'dynamicdata',
-                'plaintext',
-                'plaintextheading',
-                'section',
-                'table_radio',
-            ];
+            if (validate) {
+                const excludedTypes = [
+                    'dynamicdata',
+                    'plaintext',
+                    'plaintextheading',
+                    'section',
+                    'table_radio',
+                ];
 
-            Object.entries(activeForm).forEach(([key, field]) => {
-                if (
-                    field.required === true &&
-                    !excludedTypes.includes(field.type) &&
-                    (field.value === null || field.value === '')
-                ) {
-                    error += `<p>${field.label} is required</p>`;
-                }
-            });
+                Object.entries(activeForm).forEach(([key, field]) => {
+                    if (
+                        field.required === true &&
+                        !excludedTypes.includes(field.type) &&
+                        (field.value === null || field.value === '')
+                    ) {
+                        error += `<p>${field.label} is required</p>`;
+                    }
+                });
+            }
 
             if (error === '') {
                 const res = await CustomFetch(setting.save, 'POST', {
@@ -836,6 +871,9 @@ const GenericDynamic = ({
                                                           onChange={
                                                               handleChange
                                                           }
+                                                          onChangeCanvas={
+                                                              handleChangeCanvas
+                                                          }
                                                           onChangeCheckbox={
                                                               handleChangeCheckbox
                                                           }
@@ -884,6 +922,9 @@ const GenericDynamic = ({
                                                           originalData
                                                       )}
                                                       onChange={handleChange}
+                                                      onChangeCanvas={
+                                                          handleChangeCanvas
+                                                      }
                                                       onChangeCheckbox={
                                                           handleChangeCheckbox
                                                       }

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

@@ -8,7 +8,7 @@ import Toggle from 'react-toggle';
 import { toast } from 'react-toastify';
 import { v4 as uuidv4 } from 'uuid';
 import { Editor } from '@tinymce/tinymce-react';
-import { CircleChevronRight, CirclePlus, CircleX, TrashCan } from 'akar-icons';
+import { CirclePlus, CircleX, TrashCan } from 'akar-icons';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -17,6 +17,7 @@ import 'react-confirm-alert/src/react-confirm-alert.css';
 import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
 import SortableList from '../../../components/cms/sorting/List';
+import SketchConfig from '../sketch/json/config.json';
 
 import styles from './styles/GenericFormBuilder.module.scss'; // Import the CSS module
 
@@ -44,7 +45,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         label: '',
         type: '',
     });
-    const [fieldTypes, setFieldTypes] = useState([
+    const [fieldTypes] = useState([
+        { value: 'canvas', label: 'Canvas' },
         { value: 'checkbox', label: 'Checkbox' },
         { value: 'html5_date', label: 'Date' },
         { value: 'html5_datetime', label: 'Date & Time' },
@@ -78,6 +80,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     });
     const [modalFormShow, setModalFormShow] = useState(false);
     const [roles, setRoles] = useState([]);
+    const canvasTypes = SketchConfig.canvasTypes;
 
     /** Data Option Functionalities */
     const handleDataOption = (e) => {
@@ -428,6 +431,21 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
 
     const renderField = (field) => {
         switch (field.type) {
+            case 'canvas':
+                const canvasType = canvasTypes.find(
+                    (item) => item.id === field.canvasType
+                );
+                return (
+                    <label className={`${styles.fi__label}`}>
+                        <span
+                            className={`${styles.fi__span} ${styles.prefocus}`}
+                        >
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                        <img src={canvasType.url} width="200" />
+                    </label>
+                );
             case 'checkbox':
                 return (
                     <label className={styles.fi__label}>
@@ -1679,6 +1697,46 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                         </div>
                                     ) : null}
 
+                                    {['canvas'].includes(dataField.type) ? (
+                                        <div className={styles.formItem}>
+                                            <label className={styles.fi__label}>
+                                                <select
+                                                    name="canvasType"
+                                                    value={dataField.canvasType}
+                                                    onChange={handleChangeForm}
+                                                >
+                                                    <option>
+                                                        Please select a type
+                                                    </option>
+                                                    {canvasTypes.map(
+                                                        (
+                                                            canvasType,
+                                                            canvasTypeKey
+                                                        ) => (
+                                                            <option
+                                                                value={
+                                                                    canvasType.id
+                                                                }
+                                                                key={
+                                                                    canvasTypeKey
+                                                                }
+                                                            >
+                                                                {
+                                                                    canvasType.label
+                                                                }
+                                                            </option>
+                                                        )
+                                                    )}
+                                                </select>
+                                                <span
+                                                    className={styles.fi__span}
+                                                >
+                                                    Canvas Type
+                                                </span>
+                                            </label>
+                                        </div>
+                                    ) : null}
+
                                     {['signature'].includes(dataField.type) ? (
                                         <div className={styles.formItem}>
                                             <label className={styles.fi__label}>