Merge pull request #231 from asigloo/feature/230-form-reset-after-submission-should-b

Feature/230 form reset after submission should b

Author: alvarosabu

demos/vue-3/src/router/index.ts

@@ -103,6 +103,17 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "toggle-visibility" */ '../views/ToggleVisibility.vue'
       ),
   },
+  {
+    path: '/reset-after-submit',
+    name: 'Reset after submit',
+    meta: {
+      title: 'Reset after submit',
+    },
+    component: () =>
+      import(
+        /* webpackChunkName: "reset-after-submit" */ '../views/ResetAfterSubmit.vue'
+      ),
+  },
 ];
 
 const router = createRouter({

demos/vue-3/src/views/Home.vue

@@ -59,6 +59,11 @@ export default defineComponent({
             route: '/general',
             tags: ['all'],
           },
+          {
+            name: 'Basic',
+            route: '/basic',
+            tags: ['text-field', 'select-field', 'checkbox-field'],
+          },
           {
             name: 'Text Fields',
             route: '/text-fields',
@@ -104,6 +109,11 @@ export default defineComponent({
             route: '/toggle-visibility',
             tags: ['visibility', 'custom-class', 'custom-styles'],
           },
+          {
+            name: 'Reset after Submit',
+            route: '/reset-after-submit',
+            tags: ['submit', 'reset-forms'],
+          },
         ],
       ];
     }, 1000);

demos/vue-3/src/views/ResetAfterSubmit.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="page container">
+    <div class="mx-auto w-full sm:w-1/2 relative mb-24">
+      <div
+        class="absolute inset-0 bg-gradient-to-r from-blue-400 to-green-200 shadow-xl transform -skew-y-3 sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl"
+      ></div>
+      <div class="relative card p-6 bg-white">
+        <dynamic-form
+          :form="form"
+          @submitted="handleSubmit"
+          @change="valueChanged"
+          @error="handleError"
+        />
+        <button
+          data-cy="submit"
+          class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
+          submit="true"
+          :form="form?.id"
+        >
+          Try me
+        </button>
+      </div>
+    </div>
+    <div class="mx-auto w-full sm:w-1/2"><Console :content="formValues" /></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { CheckboxField, TextField } from '@/';
+import { computed, defineComponent, reactive } from 'vue';
+import Console from '../components/Console.vue';
+
+const components = {
+  Console,
+};
+/* } from '../../dist/as-dynamic-forms.esm'; */
+export default defineComponent({
+  name: 'ResetAfterSubmit',
+  components,
+  setup() {
+    const formValues = reactive({
+      resetAfterSubmit: false,
+    });
+
+    const form = computed(() => ({
+      id: 'basic-demo',
+      fields: {
+        resetAfterSubmit: CheckboxField({
+          label: 'Toggle option resetAfterSubmit',
+        }),
+        name: TextField({
+          label: 'Just a prefilled name',
+          value: 'Awiwiwi',
+        }),
+      },
+      options: {
+        resetAfterSubmit: formValues.resetAfterSubmit,
+      },
+    }));
+
+    function handleSubmit(values) {
+      console.log('Values Submitted', values);
+    }
+
+    function valueChanged(values) {
+      Object.assign(formValues, values);
+      console.log('Values', values);
+    }
+
+    function handleError(errors) {
+      console.error('Errors', errors);
+    }
+
+    return {
+      form,
+      formValues,
+      handleSubmit,
+      valueChanged,
+      handleError,
+    };
+  },
+});
+</script>
+<style lang="scss"></style>

package-lock.json

@@ -46,7 +46,7 @@
     "@vue/compiler-sfc": "3.0.2",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "@vue/test-utils": "^2.0.0-beta.14",
+    "@vue/test-utils": "^2.0.0-rc.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",
@@ -77,7 +77,7 @@
     "typescript": "~4.1.2",
     "vue": "^3.0.0",
     "vue-cli-plugin-cypress-experimental": "~1.2.0",
-    "vue-jest": "^5.0.0-alpha.7",
+    "vue-jest": "^5.0.0-alpha.8",
     "vue-router": "^4.0.1",
     "vue-select": "3.10.8"
   },

package.json

@@ -77,6 +77,7 @@ export default defineComponent({
       onValidate,
       forceValidation,
       detectChanges,
+      onOptionsChanged,
     } = useDynamicForm(props.form as DynamicForm, ctx, options);
 
     watch(
@@ -88,6 +89,16 @@ export default defineComponent({
         deep: true,
       },
     );
+
+    watch(
+      () => props.form.options,
+      options => {
+        onOptionsChanged(options);
+      },
+      {
+        deep: true,
+      },
+    );
     return {
       controls,
       valueChange,

src/components/dynamic-form/DynamicForm.vue

@@ -188,6 +188,17 @@ describe('UseDynamicForm', () => {
       rememberMe: true,
     });
   });
+  // TODO: check this after on how to spy on functions  inside functions
+  /*
+  it('should reset form after valid form submission', async () => {
+    const { mapControls, handleSubmit, resetForm } = useDynamicForm(form, ctx);
+    const spy = jest.spyOn({ resetForm }, 'resetForm');
+    mapControls();
+
+    await handleSubmit();
+
+    expect(spy).toHaveBeenCalled();
+  }); */
 
   it('should emit error event with errors if hadleSubmit is called and is form is invalid ', async () => {
     const spy = jest.spyOn(ctx, 'emit');

src/composables/useDynamicForm.spec.ts

@@ -8,6 +8,7 @@ import {
   InputEvent,
   DynamicForm,
   FormFields,
+  FormOptions,
 } from '@/core/models';
 import {
   computed,
@@ -27,6 +28,7 @@ interface DynamicFormComposition {
   controls: Ref<FormControl<InputType>[]>;
   forceValidation: Ref<boolean>;
   formValues: ComputedRef<(string | { [key: string]: boolean })[]>;
+  formOptions: Ref<FormOptions>;
   errors: ComputedRef<Record<string, unknown>>;
   isValid: ComputedRef<boolean>;
   normalizedControls: ComputedRef<Record<string, unknown>>;
@@ -42,6 +44,7 @@ interface DynamicFormComposition {
   findControlByName: (name: string | unknown) => FormControl<InputType>;
   resetForm: () => void;
   detectChanges: (fields: FormFields) => void;
+  onOptionsChanged: (options: FormOptions) => void;
 }
 
 export function useDynamicForm(
@@ -56,6 +59,11 @@ export function useDynamicForm(
   let cache = deepClone(toRaw(form.fields));
 
   const controls: Ref<FormControl<InputType>[]> = ref([]);
+  const formOptions: Ref<FormOptions> = ref({
+    resetAfterSubmit: true,
+    ...options?.form,
+    ...form?.options,
+  });
   const forceValidation = ref(false);
 
   const deNormalizedScopedSlots = computed(() => Object.keys(ctx.slots));
@@ -107,10 +115,7 @@ export function useDynamicForm(
   });
 
   const formattedOptions = computed(() => {
-    const opts = {
-      ...options?.form,
-      ...form?.options,
-    };
+    const opts = formOptions.value;
 
     if (opts) {
       const {
@@ -220,6 +225,10 @@ export function useDynamicForm(
     cache = deepClone(toRaw(fields));
   }
 
+  function onOptionsChanged(changes) {
+    Object.assign(formOptions.value, changes);
+  }
+
   function resetForm() {
     mapControls(true);
     forceValidation.value = false;
@@ -232,7 +241,9 @@ export function useDynamicForm(
 
     if (isValid.value) {
       ctx.emit('submitted', formValues.value);
-      resetForm();
+      if (formOptions.value.resetAfterSubmit) {
+        resetForm();
+      }
     } else {
       ctx.emit('error', errors.value);
     }
@@ -251,6 +262,7 @@ export function useDynamicForm(
     mapControls,
     valueChange,
     formValues,
+    formOptions,
     handleSubmit,
     isValid,
     errors,
@@ -264,5 +276,6 @@ export function useDynamicForm(
     findControlByName,
     resetForm,
     detectChanges,
+    onOptionsChanged,
   };
 }

src/composables/useDynamicForm.ts

@@ -167,6 +167,7 @@ export interface FormOptions {
   netlify?: boolean;
   netlifyHoneypot?: string;
   autocomplete?: boolean | string;
+  resetAfterSubmit?: boolean;
 }
 
 export enum FieldTypes {

src/core/models.ts

@@ -0,0 +1,19 @@
+describe('Reset after submission', () => {
+  beforeEach(() => {
+    cy.visit('/reset-after-submit'); // "baseUrl" is defined in cypress.json file
+  });
+
+  context('Basic Events', () => {
+    it('should reset the form if resetAfterSubmit is checked', () => {
+      cy.get('input[name="resetAfterSubmit"]').check();
+      cy.get('[data-cy=submit]').click();
+      cy.get('input[name="name"]').should('not.have.value', null);
+    });
+
+    it('should reset the form if resetAfterSubmit is unchecked', () => {
+      cy.get('input[name="resetAfterSubmit"]').uncheck();
+      cy.get('[data-cy=submit]').click();
+      cy.get('input[name="name"]').should('have.value', 'Awiwiwi');
+    });
+  });
+});