@visns-studio/visns-components 5.2.16 → 5.3.0

package/package.json

@@ -78,7 +78,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.2.16",
+    "version": "5.3.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Field.jsx

@@ -51,6 +51,7 @@ function Field({
     inputClass,
     mapbox,
     onChange,
+    onChangeCanvas,
     onChangeCheckbox,
     onChangeCheckboxManual,
     onChangeColour,
@@ -199,6 +200,13 @@ function Field({
                 setFormItemClass(`${styles.formItem} ${styles.halfItem}`);
                 break;
         }
+
+        if (settings.type === 'canvas') {
+            const canvasType = SketchConfig.canvasTypes.find(
+                (a) => a.id === settings.canvasType
+            );
+            setCanvasUrl(canvasType.url);
+        }
     }, [settings, counter]);
 
     const fetchChildDropdownData = (s, v) => {
@@ -316,6 +324,7 @@ function Field({
                 [
                     'address',
                     'async-dropdown-ajax',
+                    'canvas',
                     'checkbox',
                     'colour',
                     'copytoclipboard',
@@ -432,6 +441,19 @@ function Field({
                         />
                     </div>
                 );
+            case 'canvas':
+                return canvasUrl ? (
+                    <div
+                        onClick={() => setCanvasPopupOpen(true)}
+                        style={{ cursor: 'pointer' }}
+                    >
+                        <img
+                            src={settings.imageData || canvasUrl}
+                            width="200"
+                            alt="Canvas Preview"
+                        />
+                    </div>
+                ) : null;
             case 'checkbox':
                 return (
                     <div
@@ -1666,6 +1688,7 @@ function Field({
             ![
                 'address',
                 'async-dropdown-ajax',
+                'canvas',
                 'checkbox',
                 'colour',
                 'copytoclipboard',

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;
 
@@ -1291,6 +1293,7 @@ function Form({
                                         }
                                         mapbox={mapbox}
                                         onChange={handleChange}
+                                        onChangeCanvas={handleChangeCanvas}
                                         onChangeCheckbox={handleChangeCheckbox}
                                         onChangeCheckboxManual={
                                             handleChangeCheckboxManual
@@ -1442,6 +1445,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,35 @@ 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) {
+            handleSaveForm(false);
+        }
+    }, [canvasSaveCounter]);
+
     const handleChangeCheckbox = (e) => {
         const { checked, name, value } = e.target;
 
@@ -473,7 +505,47 @@ const GenericDynamic = ({
         }
     };
 
-    const handleDownloadForm = async (item, label, data) => {
+    const handleDownloadForm = async (item, label, data, debug = false) => {
+        if (debug) {
+            // Open the form in a new tab by sending a POST request
+            const form = document.createElement('form');
+            form.method = 'POST';
+            form.action = setting.download;
+            form.target = '_blank'; // Open in new tab
+
+            // Append CSRF token if needed (for Laravel)
+            const csrfToken = document
+                .querySelector('meta[name="csrf-token"]')
+                ?.getAttribute('content');
+            if (csrfToken) {
+                const csrfInput = document.createElement('input');
+                csrfInput.type = 'hidden';
+                csrfInput.name = '_token';
+                csrfInput.value = csrfToken;
+                form.appendChild(csrfInput);
+            }
+
+            // Append the required data
+            const appendHiddenField = (name, value) => {
+                const input = document.createElement('input');
+                input.type = 'hidden';
+                input.name = name;
+                input.value = JSON.stringify(value);
+                form.appendChild(input);
+            };
+
+            appendHiddenField('data', item);
+            appendHiddenField('dynamicData', data);
+            appendHiddenField('label', label);
+            appendHiddenField('debug', true);
+
+            document.body.appendChild(form);
+            form.submit();
+            document.body.removeChild(form);
+
+            return;
+        }
+
         const toastId = toast.loading('Downloading form...');
 
         try {
@@ -665,8 +737,6 @@ const GenericDynamic = ({
                 }
             }
         }
-
-        console.info(activeForm);
     }, [activeForm]);
 
     const shouldDisplayFormList = (data, type) => {
@@ -725,6 +795,9 @@ const GenericDynamic = ({
                                                           onChange={
                                                               handleChange
                                                           }
+                                                          onChangeCanvas={
+                                                              handleChangeCanvas
+                                                          }
                                                           onChangeCheckbox={
                                                               handleChangeCheckbox
                                                           }
@@ -773,6 +846,9 @@ const GenericDynamic = ({
                                                           originalData
                                                       )}
                                                       onChange={handleChange}
+                                                      onChangeCanvas={
+                                                          handleChangeCanvas
+                                                      }
                                                       onChangeCheckbox={
                                                           handleChangeCheckbox
                                                       }
@@ -879,7 +955,8 @@ const GenericDynamic = ({
                                                                     handleDownloadForm(
                                                                         item,
                                                                         label,
-                                                                        originalData
+                                                                        originalData,
+                                                                        true
                                                                     )
                                                                 }
                                                             >