Implemented dependent field login the form

splunk · Mar 17, 2021 · 82d964f · 82d964f
1 parent 1970d9d
commit 82d964f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 3 deletions.
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/BaseFormView.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/BaseFormView.jsx
@@ -84,6 +84,23 @@ class BaseFormView extends Component {
             }
         });
 
+        this.dependencyMap = new Map();
+        this.entities.forEach(e => {
+            const fields = e.options?.dependencies;
+            if (fields) {
+                fields.forEach(field => {
+                    const changeFields = this.dependencyMap.get(field);
+                    if (changeFields) {
+                        changeFields[e.field] = fields;
+                    } else {
+                        this.dependencyMap.set(field, {
+                            [e.field]: fields
+                        });
+                    }
+                });
+            }
+        });
+
         this.state = {
             data:temState,
             ErrorMsg :"",
@@ -140,7 +157,38 @@ class BaseFormView extends Component {
 
 
     handleChange = (field, targetValue)=> {
-        const newFields = update(this.state ,{ data: { [field] : { value: {$set: targetValue } } } } );
+        const changes = {} 
+        if (this.dependencyMap.has(field)) {
+            const value = this.dependencyMap.get(field);
+            for (const loadField in value) {
+
+                const data = {};
+                let load = true;
+
+                value[loadField].forEach(dependency => {
+                    const required = !!this.entities.find(
+                        e => {
+                            return e.field === dependency;
+                        }
+                    ).required;
+
+                    const value = dependency == field ? targetValue : this.state.data[dependency]["value"]
+                    if (required && !value) {
+                        load = false;
+                    } else {
+                        data[dependency] = value
+                    }
+                });
+
+                if (load) {
+                    changes[loadField] = { dependencyValues: {$set: data } }
+                }
+            }
+
+        }
+        changes[field] = { value: {$set: targetValue } }
+
+        const newFields = update(this.state ,{ data: changes } );
         const tempState = this.clearAllErrorMsg(newFields);
         this.setState(tempState);
 
@@ -270,6 +318,7 @@ class BaseFormView extends Component {
                             serviceName={this.props.serviceName}
                             mode={this.props.mode}
                             disabled={temState.disbled}
+                            dependencyValues={temState.dependencyValues || null}
                         />)
 
                 })

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ControlWrapper.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ControlWrapper.jsx
@@ -36,7 +36,7 @@ class ControlWrapper extends React.PureComponent {
                             handleChange,
                             addCustomValidator,
                             utilCustomFunctions,
-                            controlOptions:options
+                            controlOptions:options,
                         })
                     ): `No View Found for ${type} type`;
             }
@@ -50,7 +50,8 @@ class ControlWrapper extends React.PureComponent {
                         controlOptions:options,
                         error:this.props.error,
                         disabled:this.props.disabled,
-                        encrypted
+                        encrypted,
+                        dependencyValues:this.props.dependencyValues,
                     })
                 ): `No View Found for ${type} type`;
         }