@visns-studio/visns-components 5.2.15 → 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.15",
+    "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,
@@ -196,9 +197,16 @@ function Field({
                 setFormItemClass(`${styles.formItem} ${styles.qtrItem}`);
                 break;
             default:
-                setFormItemClass(`${styles.formItem}`);
+                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',
@@ -350,32 +359,6 @@ function Field({
                         {settings.label} {settings.required ? '*' : ''}
                     </span>
                 );
-            } else if (['plaintext'].includes(settings.type)) {
-                if (settings.description) {
-                    return (
-                        <span>
-                            {settings.description
-                                ? parse(settings.description)
-                                : ''}
-                        </span>
-                    );
-                } else {
-                    return (
-                        <span
-                            className={`${styles.fi__span} ${styles.prefocus}`}
-                        >
-                            {settings.label} {settings.required ? '*' : ''}
-                        </span>
-                    );
-                }
-            } else if (['plaintextheading'].includes(settings.type)) {
-                return <h2>{settings.label ? settings.label : ''}</h2>;
-            } else if (['section'].includes(settings.type)) {
-                return (
-                    <div className={styles.gridtxt__header}>
-                        <span>{settings.label}</span>
-                    </div>
-                );
             } else if (['richeditor', 'textarea'].includes(settings.type)) {
                 return settings.label;
             } else if (['table_radio', 'table_text'].includes(settings.type)) {
@@ -458,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
@@ -513,7 +509,7 @@ function Field({
                               settings.options.map((option, index) => (
                                   <div
                                       key={`${settings.id}-checkbox-option-${index}`}
-                                      className="fi__checkboxcontainer"
+                                      className={styles.fi__checkboxcontainer}
                                   >
                                       <input
                                           name={settings.id}
@@ -1186,17 +1182,17 @@ function Field({
                 );
             case 'radio':
                 return settings.options?.length > 0 ? (
-                    <div className="fi__optionscontainer">
+                    <div className={styles.fi__optionscontainer}>
                         {settings.options.map((option, index) => (
                             <div
                                 key={`${settings.id}-checkbox-option-${index}`}
-                                className="fi__checkboxcontainer"
+                                className={styles.fi__checkboxcontainer}
                             >
                                 <input
                                     name={settings.id}
                                     data-name={settings.id}
                                     type="radio"
-                                    className="fi__customcheckbox"
+                                    className={styles.fi__customcheckbox}
                                     value={option.id}
                                     checked={
                                         parseInt(inputValue) ===
@@ -1204,7 +1200,7 @@ function Field({
                                     }
                                     onChange={onChange}
                                 />
-                                <label className="fi__checkboxlabel">
+                                <label className={styles.fi__checkboxlabel}>
                                     {option.label}
                                 </label>{' '}
                             </div>
@@ -1213,17 +1209,17 @@ function Field({
                 ) : null;
             case 'radio-ajax':
                 return options?.length > 0 ? (
-                    <div className="fi__optionscontainer">
+                    <div className={styles.fi__optionscontainer}>
                         {options.map((option, index) => (
                             <div
                                 key={`${settings.id}-checkbox-option-${index}`}
-                                className="fi__checkboxcontainer"
+                                className={styles.fi__checkboxcontainer}
                             >
                                 <input
                                     name={settings.id}
                                     data-name={settings.id}
                                     type="radio"
-                                    className="fi__customcheckbox"
+                                    className={styles.fi__customcheckbox}
                                     value={option.id}
                                     checked={
                                         parseInt(inputValue) ===
@@ -1231,7 +1227,7 @@ function Field({
                                     }
                                     onChange={onChange}
                                 />
-                                <label className="fi__checkboxlabel">
+                                <label className={styles.fi__checkboxlabel}>
                                     {option.label}
                                 </label>{' '}
                             </div>
@@ -1692,6 +1688,7 @@ function Field({
             ![
                 'address',
                 'async-dropdown-ajax',
+                'canvas',
                 'checkbox',
                 'colour',
                 'copytoclipboard',
@@ -1763,6 +1760,33 @@ function Field({
                         shouldCloseOnSelect={true}
                     />
                 );
+            case 'plaintext':
+                if (settings.description) {
+                    return (
+                        <>
+                            {settings.description
+                                ? parse(settings.description)
+                                : ''}
+                        </>
+                    );
+                } else {
+                    return (
+                        <span
+                            className={`${styles.fi__span} ${styles.prefocus}`}
+                        >
+                            {settings.label} {settings.required ? '*' : ''}
+                        </span>
+                    );
+                }
+                break;
+            case 'plaintextheading':
+                return <h2>{settings.label ? settings.label : ''}</h2>;
+            case 'section':
+                return (
+                    <div className={styles.gridtxt__header}>
+                        <span>{settings.label}</span>
+                    </div>
+                );
             case 'richeditor':
                 return (
                     <Editor

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;
 
@@ -464,7 +496,7 @@ const GenericDynamic = ({
                     if (showToast) {
                         toast.success('Form added successfully');
                     }
-                    fetchData();
+                    fetchData(type);
                 }
             }
         } catch (err) {
@@ -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 {
@@ -538,7 +610,7 @@ const GenericDynamic = ({
 
                 if (res.data.error === '') {
                     toast.success('Form deleted successfully.');
-                    fetchData();
+                    fetchData(type);
                 } else {
                     toast.error('Error: ' + res.data.error);
                 }
@@ -597,7 +669,7 @@ const GenericDynamic = ({
 
                 if (res.data.error === '') {
                     toast.success('Form saved successfully.');
-                    fetchData();
+                    fetchData(type);
                 }
             } else {
                 toast.error(<div>{parse(error)}</div>);
@@ -723,6 +795,9 @@ const GenericDynamic = ({
                                                           onChange={
                                                               handleChange
                                                           }
+                                                          onChangeCanvas={
+                                                              handleChangeCanvas
+                                                          }
                                                           onChangeCheckbox={
                                                               handleChangeCheckbox
                                                           }
@@ -771,6 +846,9 @@ const GenericDynamic = ({
                                                           originalData
                                                       )}
                                                       onChange={handleChange}
+                                                      onChangeCanvas={
+                                                          handleChangeCanvas
+                                                      }
                                                       onChangeCheckbox={
                                                           handleChangeCheckbox
                                                       }
@@ -877,7 +955,8 @@ const GenericDynamic = ({
                                                                     handleDownloadForm(
                                                                         item,
                                                                         label,
-                                                                        originalData
+                                                                        originalData,
+                                                                        true
                                                                     )
                                                                 }
                                                             >

package/src/components/crm/generic/styles/GenericDynamic.module.scss

@@ -347,11 +347,12 @@ input[type='file']:hover {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
-    margin-top: 8px;
+    margin-top: 30px;
 }
 
 .fi__checkboxcontainer {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto 1fr;
     align-items: center;
 }
 

package/src/components/crm/styles/Field.module.scss

@@ -33,7 +33,7 @@
     form {
         width: 100%;
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: 1em;
     }
 }
@@ -110,7 +110,8 @@
     }
 
     .fi__checkboxcontainer {
-        display: flex;
+        display: grid;
+        grid-template-columns: auto 1fr;
         align-items: center;
     }
 
@@ -125,7 +126,17 @@
 
 .fwItem,
 .fwBuilderItem {
-    grid-column: 1 / -1;
+    grid-column: 1 / -1; /* Full width */
+    width: 100%;
+}
+
+.halfItem {
+    grid-column: span 2; /* Takes up 2 out of 4 columns */
+    width: 100%;
+}
+
+.qtrItem {
+    grid-column: span 1; /* Takes up 1 out of 4 columns */
     width: 100%;
 }
 
@@ -142,33 +153,33 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .prefocus {
-    transform: translateY(-130%) translateX(10px) scale(0.9) !important;
-    opacity: 1 !important;
-    padding: 0 0.25rem !important;
-    background: var(--tertiary-color) !important;
-    font-weight: 400 !important;
-    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1) !important;
-    z-index: 1 !important;
-    color: rgba(var(--paragraph-rgb), 0.65) !important;
+    position: absolute;
+    top: -12px; /* Adjust based on label height */
+    left: 10px; /* Ensures consistency across all field sizes */
+    font-size: 0.85em; /* Keep it proportional */
+    transform: scale(0.9);
+    opacity: 1;
+    background: var(--tertiary-color);
+    font-weight: 400;
+    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
+    z-index: 1;
+    color: rgba(var(--paragraph-rgb), 0.65);
+    padding: 0 0.25rem;
 }
 
 .prefocusdate {
-    transform: translateX(10px) scale(0.9) !important;
-    opacity: 1 !important;
-    padding: 0 0.25rem !important;
-    background: var(--tertiary-color) !important;
-    font-weight: 400 !important;
-    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1) !important;
-    z-index: 1 !important;
-    color: rgba(var(--paragraph-rgb), 0.65) !important;
-}
-
-.qtrItem {
-    flex-basis: 25%;
-}
-
-.fwItem {
-    flex-basis: 100%;
+    position: absolute;
+    top: -12px;
+    left: 10px;
+    font-size: 0.85em;
+    transform: scale(0.9);
+    opacity: 1;
+    background: var(--tertiary-color);
+    font-weight: 400;
+    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
+    z-index: 1;
+    color: rgba(var(--paragraph-rgb), 0.65);
+    padding: 0 0.25rem;
 }
 
 .lastItem {

package/src/components/crm/styles/Form.module.scss

@@ -8,7 +8,7 @@
     form {
         width: 100%;
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: 1em;
     }
 }

package/src/components/styles/global.css

@@ -73,6 +73,14 @@ p {
     }
 }
 
+.Toastify__toast-body p {
+    font-size: revert;
+    color: revert;
+    font-weight: revert;
+    line-height: revert;
+    margin-bottom: revert;
+}
+
 ul {
     font-size: clamp(1rem, 2vw, 1.25rem);
     color: var(--paragraph-color);