@visns-studio/visns-components 4.7.6 → 4.7.8

package/package.json

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

package/src/components/crm/AsyncSelect.jsx

@@ -13,6 +13,7 @@ function VisnsAsyncSelect({
     onKeyDown,
     placeholder,
     settings,
+    style,
 }) {
     const loadSuggestedOptions = useCallback(
         debounce((inputValue, callback) => {
@@ -111,6 +112,13 @@ function VisnsAsyncSelect({
                     ...styles,
                     zIndex: 9999,
                 }),
+                control: (base) => ({
+                    ...base,
+                    minHeight:
+                        style && style.multi_select_height
+                            ? style.multi_select_height
+                            : '52px',
+                }),
                 input: (styles) => ({
                     ...styles,
                     padding: 0,

package/src/components/crm/Field.jsx

@@ -25,6 +25,7 @@ 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,
@@ -32,6 +33,7 @@ function Field({
     childDropdownCallback,
     fetchData,
     formData,
+    formSettings,
     inputValue,
     inputClass,
     mapbox,
@@ -153,83 +155,71 @@ function Field({
         }
     }, [settings, counter]);
 
-    useEffect(() => {
-        const fetchChildDropdownData = () => {
-            let filter = {};
+    const fetchChildDropdownData = (s, v) => {
+        let filter = {};
 
-            if (settings.child && inputValue) {
-                let _inputValue = inputValue.value
-                    ? inputValue.value
-                    : inputValue;
-
-                if (_inputValue > 0) {
-                    if (Array.isArray(settings.child)) {
-                        settings.child.forEach((a) => {
-                            filter = {
-                                where: [
-                                    {
-                                        id: settings.id,
-                                        value: _inputValue,
-                                    },
-                                ],
-                            };
-
-                            if (a.fields) {
-                                filter.fields = a.fields;
-                            }
+        if (s.child && v) {
+            let _inputValue = v.value ? v.value : v;
 
-                            if (a.orderBy) {
-                                filter.orderBy = a.orderBy;
-                            }
-
-                            CustomFetch(
-                                a.url,
-                                'POST',
-                                filter,
-                                function (result) {
-                                    childDropdownCallback({
-                                        id: a.id,
-                                        data: result.data,
-                                    });
-                                }
-                            );
-                        });
-                    } else {
+            if (_inputValue > 0) {
+                if (Array.isArray(s.child)) {
+                    s.child.forEach((a) => {
                         filter = {
                             where: [
                                 {
-                                    id: settings.id,
+                                    id: s.id,
                                     value: _inputValue,
                                 },
                             ],
                         };
 
-                        if (settings.fields) {
-                            filter.fields = settings.fields;
+                        if (a.fields) {
+                            filter.fields = a.fields;
                         }
 
-                        if (settings.orderBy) {
-                            filter.orderBy = settings.orderBy;
+                        if (a.orderBy) {
+                            filter.orderBy = a.orderBy;
                         }
 
-                        CustomFetch(
-                            settings.child.url,
-                            'POST',
-                            filter,
-                            function (result) {
-                                childDropdownCallback({
-                                    id: settings.child.id,
-                                    data: result.data,
-                                });
-                            }
-                        );
+                        CustomFetch(a.url, 'POST', filter, function (result) {
+                            childDropdownCallback({
+                                id: a.id,
+                                data: result.data,
+                            });
+                        });
+                    });
+                } else {
+                    filter = {
+                        where: [
+                            {
+                                id: s.id,
+                                value: _inputValue,
+                            },
+                        ],
+                    };
+
+                    if (s.fields) {
+                        filter.fields = s.fields;
+                    }
+
+                    if (s.orderBy) {
+                        filter.orderBy = s.orderBy;
                     }
+
+                    CustomFetch(s.child.url, 'POST', filter, function (result) {
+                        childDropdownCallback({
+                            id: s.child.id,
+                            data: result.data,
+                        });
+                    });
                 }
             }
-        };
+        }
+    };
 
-        fetchChildDropdownData();
-    }, [inputValue, settings, counter]);
+    useEffect(() => {
+        fetchChildDropdownData(settings, inputValue);
+    }, [inputValue, settings]);
 
     useEffect(() => {
         const processOptions = () => {
@@ -259,7 +249,7 @@ function Field({
         };
 
         processOptions();
-    }, [settings.options, settings]);
+    }, [settings.options, settings, counter]);
 
     const renderLabel = () => {
         if (
@@ -1601,6 +1591,21 @@ function Field({
         setCounter(counter + 1);
     };
 
+    useEffect(() => {
+        if (counter > 0) {
+            if (settings.create.parent_id !== '') {
+                formSettings.fields.forEach((item) => {
+                    if (item.id === settings.create.parent_id) {
+                        fetchChildDropdownData(
+                            item,
+                            formData[settings.create.parent_id]
+                        );
+                    }
+                });
+            }
+        }
+    }, [counter]);
+
     return (
         <div className={formItemClass} style={formItemStyle}>
             <label className={styles.fi__label}>

package/src/components/crm/Form.jsx

@@ -693,8 +693,6 @@ function Form({
                         return acc;
                     }, {});
 
-                    console.info(payload);
-
                     const res = await CustomFetch(url, method, payload);
 
                     if (res.data.error === '') {
@@ -1158,6 +1156,7 @@ function Form({
                                         }
                                         fetchData={fetchData}
                                         formData={formData}
+                                        formSettings={formSettings}
                                         inputClass={inputClass}
                                         inputValue={renderInputValue(
                                             item,
@@ -1302,6 +1301,7 @@ function Form({
                                             }
                                             fetchData={fetchData}
                                             formData={formData}
+                                            formSettings={formSettings}
                                             inputClass={inputClass}
                                             inputValue={renderInputValue(
                                                 item,

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

@@ -1541,8 +1541,6 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                             <input
                                                                 type="text"
                                                                 style={{
-                                                                    padding:
-                                                                        '5px',
                                                                     height: '52px',
                                                                     padding:
                                                                         '1rem',