@visns-studio/visns-components 5.5.0 → 5.5.2

package/package.json

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

package/src/components/crm/Field.jsx

@@ -123,16 +123,30 @@ function Field({
             if (settings.type === 'text' && settings.url) {
                 try {
                     const res = await CustomFetch(settings.url, 'POST', {});
+
                     if (res.data) {
-                        setAutoValue(res.data);
+                        // If settings.autoValueKey exists, use res.data[settings.autoValueKey], otherwise use res.data directly
+                        const valueToUse = settings.autoValueKey
+                            ? res.data[settings.autoValueKey]
+                            : res.data;
+
+                        setAutoValue(valueToUse);
                         // Simulate an onChange event to update the form data
                         const simulatedEvent = {
                             target: {
                                 dataset: { name: settings.id },
-                                value: res.data,
+                                value: valueToUse,
                             },
                         };
                         onChange(simulatedEvent);
+
+                        // Also directly update the form data to ensure it's synchronized
+                        if (setFormData) {
+                            setFormData((prevState) => ({
+                                ...prevState,
+                                [settings.id]: valueToUse,
+                            }));
+                        }
                     }
                 } catch (error) {
                     console.error('Error fetching auto value:', error);
@@ -141,7 +155,7 @@ function Field({
         };
 
         fetchAutoValue();
-    }, [settings.url, settings.type, settings.id]);
+    }, [settings.url, settings.type, settings.id, settings.autoValueKey]);
 
     useEffect(() => {
         const fetchOptions = () => {
@@ -1720,6 +1734,7 @@ function Field({
                     <input
                         type={settings.type}
                         data-name={settings.id}
+                        data-autovalue={autoValue || ''}
                         className={inputClass[settings.id]}
                         placeholder=" "
                         onChange={onChange}

package/src/components/crm/Form.jsx

@@ -641,8 +641,16 @@ function Form({
 
                         // Check if the item is required
                         if (item.required) {
-                            // Check if formData[item.id] is null, undefined, or an empty string
-                            if (!formData[item.id]) {
+                            // Find the corresponding Field component to check for auto values
+                            const fieldElement = document.querySelector(
+                                `[data-name="${item.id}"]`
+                            );
+                            const autoValue = fieldElement
+                                ? fieldElement.getAttribute('data-autovalue')
+                                : null;
+
+                            // Check if formData[item.id] is null, undefined, or an empty string AND there's no auto value
+                            if (!formData[item.id] && !autoValue) {
                                 // Check for required_check dependency
                                 if (
                                     item.required_check &&
@@ -673,6 +681,22 @@ function Form({
                     setInputClass(_inputClass);
                 }
 
+                // Before validation, update formData with any auto values from the form fields
+                const formFields = document.querySelectorAll('[data-name]');
+                let updatedFormData = { ...formData };
+
+                formFields.forEach((field) => {
+                    const fieldName = field.getAttribute('data-name');
+                    const autoValue = field.getAttribute('data-autovalue');
+
+                    if (fieldName && autoValue && !updatedFormData[fieldName]) {
+                        updatedFormData[fieldName] = autoValue;
+                    }
+                });
+
+                // Update the form data state with the auto values
+                setFormData(updatedFormData);
+
                 if (validation) {
                     toast.error(<div>{parse(validation)}</div>);
                 } else {
@@ -836,16 +860,19 @@ function Form({
                     }
 
                     // Transform keys with dots into nested objects
-                    const payload = Object.keys(formData).reduce((acc, key) => {
-                        if (key.includes('.')) {
-                            const [root, sub] = key.split('.');
-                            if (!acc[root]) acc[root] = {};
-                            acc[root][sub] = formData[key];
-                        } else {
-                            acc[key] = formData[key];
-                        }
-                        return acc;
-                    }, {});
+                    const payload = Object.keys(updatedFormData).reduce(
+                        (acc, key) => {
+                            if (key.includes('.')) {
+                                const [root, sub] = key.split('.');
+                                if (!acc[root]) acc[root] = {};
+                                acc[root][sub] = updatedFormData[key];
+                            } else {
+                                acc[key] = updatedFormData[key];
+                            }
+                            return acc;
+                        },
+                        {}
+                    );
 
                     const res = await CustomFetch(url, method, payload);
 
@@ -1273,21 +1300,32 @@ function Form({
             const showConditions = field.show || [];
 
             showConditions.forEach((showObject) => {
-                const { id, value } = showObject;
+                const { id, value, self } = showObject;
 
-                if (id !== '' && value.length > 0) {
+                if (id != '' && value.length > 0) {
                     const targetField = formSettings.fields.find(
                         (f) => f.id === id
                     );
 
                     if (targetField) {
-                        const valueChecker = formData[field.id];
+                        let valueChecker = null;
+                        if (self) {
+                            valueChecker = formData[targetField.id];
+                        } else {
+                            valueChecker = formData[field.id];
+                        }
 
-                        if (valueChecker) {
-                            const shouldShow =
-                                valueChecker && value.includes(valueChecker);
+                        if (
+                            valueChecker !== undefined &&
+                            valueChecker !== null
+                        ) {
+                            const shouldShow = value.includes(valueChecker);
 
-                            targetField.hide = !shouldShow;
+                            if (self) {
+                                field.hide = !shouldShow;
+                            } else {
+                                targetField.hide = !shouldShow;
+                            }
 
                             if (updateForm) {
                                 updateForm((prevState) => ({