feat(dynamics-forms): fix anti-pattern structure & fieldchange detection

Author: alvarosabu

dev/typescript/App.vue

@@ -230,6 +230,7 @@ export default defineComponent({
           value: string;
           disabled?: boolean;
         }[];
+        form.fields.name.value = 'Alvaro';
       } catch (e) {
         console.error(e);
       }

package-lock.json

@@ -88,6 +88,8 @@
     "vue-select": "3.10.8"
   },
   "dependencies": {
+    "deep-clone": "^3.0.3",
+    "deep-object-diff": "^1.1.0",
     "rollup-plugin-scss": "^2.6.1"
   }
 }

package.json

@@ -13,6 +13,7 @@
       :control="control"
       :submited="submited"
       @change="valueChange"
+      @blur="onBlur"
     >
       <template v-slot:customField="props">
         <div
@@ -25,7 +26,6 @@
             :name="slot"
             :control="normalizedControls[slot]"
             :onChange="props.onChange"
-            :onFocus="props.onFocus"
             :onBlur="props.onBlur"
           ></slot>
         </div>
@@ -38,20 +38,21 @@
 import {
   defineComponent,
   PropType,
-  reactive,
   ref,
   Ref,
   computed,
   onMounted,
   watch,
   inject,
+  toRaw,
 } from 'vue';
-import { DynamicForm } from './form';
+import { diff } from 'deep-object-diff';
+
 import DynamicInput from '../dynamic-input/DynamicInput.vue';
 
-import { FieldTypes, FormControl, InputType } from '@/core/models';
+import { DynamicForm, FieldTypes, FormControl, InputType } from '@/core/models';
 import { dynamicFormsSymbol } from '@/useApi';
-import { removeEmpty } from '@/core/utils/helpers';
+import { deepClone, hasValue, removeEmpty } from '@/core/utils/helpers';
 
 /* import { warn } from '../../core/utils/warning';
  */
@@ -80,29 +81,11 @@ export default defineComponent({
   components,
   setup(props, ctx) {
     const { options } = inject(dynamicFormsSymbol);
+    const cache = deepClone(toRaw(props.form.fields));
 
     const controls: Ref<FormControl<InputType>[]> = ref([]);
     const submited = ref(false);
 
-    onMounted(() => {
-      mapControls();
-    });
-    //  TODO: enable again when plugin theme option is available
-
-    /* const validTheme = computed(
-      () => options.theme && AVAILABLE_THEMES.includes(options.theme),
-    );
-
-    if (!validTheme.value) {
-      warn(
-        `There isn't a theme: ${
-          options.theme
-        } just yet, please choose one of the available themes: ${AVAILABLE_THEMES.join(
-          ', ',
-        )}`,
-      );
-    } */
-
     const deNormalizedScopedSlots = computed(() => Object.keys(ctx.slots));
 
     const normalizedControls = computed(() => {
@@ -174,21 +157,7 @@ export default defineComponent({
       }
     });
 
-    function valueChange(event: Record<string, unknown>) {
-      if (event) {
-        const newControl = controls.value.find(
-          control => control.name === event.name,
-        );
-        if (newControl) {
-          newControl.value = event.value as string;
-          newControl.dirty = event.value !== null;
-        }
-        console.log('DynamicForms:controls', controls.value);
-        ctx.emit('change', formValues.value);
-      }
-    }
-
-    function mapControls(empty?: boolean) {
+    function mapControls(empty = false) {
       const controlArray =
         Object.entries(props.form?.fields).map(
           ([key, field]: [string, InputType]) =>
@@ -215,6 +184,69 @@ export default defineComponent({
         controls.value = controlArray;
       }
     }
+    function findControlByName(name: string | unknown) {
+      const updatedCtrl = controls.value.find(control => control.name === name);
+      return updatedCtrl;
+    }
+
+    function valueChange(event: Record<string, unknown>) {
+      if (event && hasValue(event.value)) {
+        const updatedCtrl = findControlByName(event.name);
+        if (updatedCtrl) {
+          updatedCtrl.value = event.value as string;
+          updatedCtrl.dirty = true;
+          validateControl(updatedCtrl);
+        }
+        ctx.emit('change', formValues.value);
+      }
+    }
+
+    function onBlur(control: FormControl<InputType>) {
+      const updatedCtrl = findControlByName(control.name);
+      if (updatedCtrl) {
+        updatedCtrl.touched = true;
+      }
+    }
+
+    function validateControl(control: FormControl<InputType>) {
+      if (control.validations) {
+        const validation = control.validations.reduce((prev, curr) => {
+          const val =
+            typeof curr.validator === 'function'
+              ? curr.validator(control)
+              : null;
+          if (val !== null) {
+            const [key, value] = Object.entries(val)[0];
+            const obj = {};
+            obj[key] = {
+              value,
+              text: curr.text,
+            };
+            return {
+              ...prev,
+              ...obj,
+            };
+          }
+          return {
+            ...prev,
+          };
+        }, {});
+        control.errors = validation;
+        control.valid = Object.keys(validation).length === 0;
+      }
+    }
+
+    function detectChanges(fields) {
+      const changes = diff(cache, deepClone(fields));
+      Object.entries(changes).forEach(([key, value]) => {
+        let ctrl = findControlByName(key);
+        if (ctrl) {
+          Object.entries(value).forEach(([change, newValue]) => {
+            ctrl[change] = newValue;
+          });
+        }
+      });
+    }
 
     function resetForm() {
       mapControls(true);
@@ -231,13 +263,22 @@ export default defineComponent({
       }
     }
 
-    watch(props.form.fields, () => {
+    watch(
+      () => props.form.fields,
+      fields => {
+        detectChanges(fields);
+      },
+      {
+        deep: true,
+      },
+    );
+
+    onMounted(() => {
       mapControls();
     });
 
     return {
       controls,
-      form: props.form,
       valueChange,
       formValues,
       handleSubmit,
@@ -247,7 +288,19 @@ export default defineComponent({
       normalizedControls,
       submited,
       formattedOptions,
+      onBlur,
     };
   },
+  /* watch: {
+    form: {
+      handler(newVal, oldVal) {
+        console.log({
+          newVal,
+          oldVal,
+        });
+      },
+      deep: true,
+    },
+  }, */
 });
 </script>

src/components/dynamic-form/DynamicForm.vue

@@ -26,15 +26,7 @@ import {
   FieldTypes,
 } from '@/core/models';
 
-import {
-  isEmpty,
-  entries,
-  values,
-  keys,
-  isEvent,
-  isArray,
-  isObject,
-} from '@/core/utils/helpers';
+import { values, keys, isArray, isObject } from '@/core/utils/helpers';
 import { useInputEvents } from '@/composables/input-events';
 import { dynamicFormsSymbol } from '@/useApi';
 
@@ -61,6 +53,8 @@ const props = {
 export type ControlAttribute<T extends InputType> = {
   control: FormControl<T>;
   onChange: (value: unknown) => void;
+  onFocus: (value: unknown) => void;
+  onBlur: (value: unknown) => void;
 };
 
 export default defineComponent({
@@ -78,6 +72,8 @@ export default defineComponent({
         control: props?.control,
         style: props?.control.customStyles,
         onChange: valueChange,
+        onBlur: () => emit('blur', props.control),
+        onFocus: () => emit('focus', props.control),
       };
     });
 
@@ -91,6 +87,12 @@ export default defineComponent({
         {
           'form-group--inline': props?.control?.type === FieldTypes.CHECKBOX,
         },
+        {
+          'form-group--success':
+            props?.control?.valid &&
+            props?.control?.dirty &&
+            props?.control?.touched,
+        },
         {
           'form-group--error': showErrors.value,
         },
@@ -131,61 +133,8 @@ export default defineComponent({
       return [];
     });
 
-    /* function validate() {
-      if (
-        props.control &&
-        props.control.validations &&
-        isEmpty(props.control.validations)
-      ) {
-        const validation = props.control.validations.reduce((prev, curr) => {
-          const val =
-            typeof curr.validator === 'function'
-              ? curr.validator(props.control)
-              : null;
-          if (val !== null) {
-            const [key, value] = entries(val)[0];
-            const obj = {};
-            obj[key] = {
-              value,
-              text: curr.text,
-            };
-            return {
-              ...prev,
-              ...obj,
-            };
-          }
-          return {
-            ...prev,
-          };
-        }, {});
-        props.control.errors = validation;
-        props.control.valid = Object.keys(validation).length === 0;
-      }
-    } */
-
     function valueChange($event) {
-      console.log('DynamicInput:change', $event);
       emit('change', $event);
-      /* let value;
-      const newValue = {};
-
-      console.log('DynamicInput:change', $event);
-
-      if (isEvent($event)) {
-        $event.stopPropagation();
-        value =
-          props.control.type === 'checkbox'
-            ? $event.target.checked
-            : $event.target.value;
-      } else {
-        value = $event;
-      }
-
-      if (props.control) {
-        newValue[props.control.name] = value;
-        validate();
-        emit('change', newValue);
-      } */
     }
 
     return () => {

src/components/dynamic-form/form.ts

@@ -1,7 +1,8 @@
 <script lang="ts">
-import { defineComponent, h, PropType } from 'vue';
+import { defineComponent, h, PropType, computed } from 'vue';
 import { FormControl, SelectInput } from '@/core/models';
 import { useInputEvents } from '@/composables/input-events';
+import { isArray, isObject } from '@/core/utils/helpers';
 
 const props = {
   control: Object as PropType<FormControl<SelectInput>>,
@@ -14,7 +15,14 @@ export default defineComponent({
     return () => {
       const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
 
-      const options = props?.control?.options?.map(({ key, value, disabled }) =>
+      const formattedOptions = computed(() => {
+        if (isObject(props?.control?.options)) {
+          return Object.values(props?.control?.options);
+        }
+        return props?.control?.options;
+      });
+
+      const options = formattedOptions.value.map(({ key, value, disabled }) =>
         h('option', { key, value: key, disabled }, value),
       );
       return h(