useForm

components/Layout/AlertBar/SwitchYear.vue

@@ -14,13 +14,13 @@ Switch year bar : Barre qui s'affiche lorsque l'utilisateur n'est pas sur l'ann
 <script lang="ts">
 import { defineComponent, useContext, computed} from '@nuxtjs/composition-api'
 import {accessState, organizationState} from "~/types/interfaces";
-import {$useForm} from "~/composables/form/useForm";
+import {useForm} from "~/composables/form/useForm";
 import { useMyProfile } from '~/composables/data/useMyProfile'
 
 export default defineComponent({
   setup () {
     const { store, $dataPersister } = useContext()
-    const { markFormAsNotDirty } = $useForm()
+    const { markAsNotDirty } = useForm(store)
     const { updateMyProfile, setHistorical, setActivityYear } = useMyProfile($dataPersister, store)
 
     const profileAccess:accessState = store.state.profile.access
@@ -41,7 +41,7 @@ export default defineComponent({
       if(profileOrganization.currentActivityYear)
         setActivityYear(profileOrganization.currentActivityYear)
 
-      markFormAsNotDirty()
+      markAsNotDirty()
       await updateMyProfile()
       window.location.reload()
     }

components/Layout/SubHeader/ActivityYear.vue

@@ -21,13 +21,13 @@
 import { defineComponent, useContext } from '@nuxtjs/composition-api'
 import { useMyProfile } from '~/composables/data/useMyProfile'
 import { $organizationProfile } from '~/services/profile/organizationProfile'
-import { $useForm } from '~/composables/form/useForm'
+import {useForm} from "~/composables/form/useForm";
 
 export default defineComponent({
   setup () {
     const { store, $dataPersister } = useContext()
     const { updateMyProfile, setActivityYear, activityYear } = useMyProfile($dataPersister, store)
-    const { markFormAsNotDirty } = $useForm()
+    const { markAsNotDirty } = useForm(store)
 
     const organizationProfile = $organizationProfile(store)
 
@@ -35,7 +35,7 @@ export default defineComponent({
     const label:string = organizationProfile.isSchool() ? 'schooling_year' : organizationProfile.isArtist() ? 'season_year' : 'cotisation_year'
 
     const updateActivityYear = async (newDate:number) => {
-      markFormAsNotDirty()
+      markAsNotDirty()
       setActivityYear(newDate)
       await updateMyProfile()
       window.location.reload()

components/Layout/SubHeader/DataTiming.vue

@@ -26,13 +26,13 @@
 
 <script lang="ts">
 import {defineComponent, onUnmounted, ref, watch, Ref, WatchStopHandle, useContext} from '@nuxtjs/composition-api'
-import { $useForm } from '~/composables/form/useForm'
+import {useForm} from "~/composables/form/useForm";
 import { useMyProfile } from '~/composables/data/useMyProfile'
 
 export default defineComponent({
   setup () {
     const { store, $dataPersister } = useContext()
-    const { markFormAsNotDirty } = $useForm()
+    const { markAsNotDirty } = useForm(store)
     const { updateMyProfile, setHistorical, historical } = useMyProfile($dataPersister, store)
 
     const historicalBtn: Ref<Array<number>> = initHistoricalBtn(historical.value as Array<any>)
@@ -41,7 +41,7 @@ export default defineComponent({
       const historicalChoice: Array<string> = initHistoricalChoice(newValue)
 
       setHistorical(historicalChoice)
-      markFormAsNotDirty()
+      markAsNotDirty()
       await updateMyProfile()
       window.location.reload()
     })

components/Layout/SubHeader/DataTimingRange.vue

@@ -40,12 +40,12 @@ import {
   defineComponent, onUnmounted, ref, watch, computed, ComputedRef, Ref, WatchStopHandle, useContext
 } from '@nuxtjs/composition-api'
 import { useMyProfile } from '~/composables/data/useMyProfile'
-import { $useForm } from '~/composables/form/useForm'
+import {useForm} from "~/composables/form/useForm";
 
 export default defineComponent({
   setup (_, { emit }) {
-    const { markFormAsNotDirty } = $useForm()
     const { store, $dataPersister } = useContext()
+    const { markAsNotDirty } = useForm(store)
     const { updateMyProfile, setHistoricalRange, historical } = useMyProfile($dataPersister, store)
 
     const datesRange:ComputedRef<Array<any>> = computed(() => {
@@ -68,7 +68,7 @@ export default defineComponent({
 
     const updateDateTimeRange = async (dates:Array<string>): Promise<any> => {
       setHistoricalRange(dates)
-      markFormAsNotDirty()
+      markAsNotDirty()
       await updateMyProfile()
       window.location.reload()
     }

components/Ui/Button/Submit.vue

@@ -38,7 +38,6 @@
 
 <script lang="ts">
 import {computed, ComputedRef, defineComponent, ref, Ref} from "@nuxtjs/composition-api";
-import {$useForm} from "~/composables/form/useForm";
 
 export default defineComponent({
   props: {

components/Ui/Form.vue

@@ -74,7 +74,7 @@ import {repositoryHelper} from '~/services/store/repository'
 import {queryHelper} from '~/services/store/query'
 import {FORM_STATUS, QUERY_TYPE, SUBMIT_TYPE, TYPE_ALERT} from '~/types/enums'
 import {AnyJson} from '~/types/interfaces'
-import {$useForm} from '~/composables/form/useForm'
+import {useForm} from "~/composables/form/useForm";
 import * as _ from 'lodash'
 import Form from "~/services/store/form";
 import Page from "~/services/store/page";
@@ -106,7 +106,7 @@ export default defineComponent({
   },
   setup(props) {
     const {$dataPersister, store, app: {router, i18n}} = useContext()
-    const {markFormAsDirty, markFormAsNotDirty, readonly} = $useForm()
+    const {markAsDirty, markAsNotDirty, readonly} = useForm(store)
     const nextStepFactory = new UseNextStepFactory()
     const {id, query}: ToRefs = toRefs(props)
     const page = new Page(store)
@@ -117,13 +117,13 @@ export default defineComponent({
     })
 
     const updateRepository = (newValue: string, field: string) => {
-      markFormAsDirty()
+      markAsDirty()
       repositoryHelper.updateStoreFromField(props.model, entry.value, newValue, field)
     }
 
     const submit = async (next: string|null = null) => {
       if(form.value.validate()){
-        markFormAsNotDirty()
+        markAsNotDirty()
 
         try {
           const response = await $dataPersister.invoke({
@@ -175,7 +175,7 @@ export default defineComponent({
     }
 
     const quitForm = () => {
-      markFormAsNotDirty()
+      markAsNotDirty()
       store.commit('form/setShowConfirmToLeave', false)
 
       const entryCopy = query.value.first()

composables/form/useForm.ts

@@ -1,68 +1,43 @@
-import { AnyJson, AnyStore } from '~/types/interfaces'
-import {computed, ComputedRef, useContext} from "@nuxtjs/composition-api";
+import { AnyStore } from '~/types/interfaces'
+import {computed, ComputedRef} from "@nuxtjs/composition-api";
 
 /**
  * @category composables/form
- * @class UseDirtyForm
- * Use Classe pour gérer l'apparition de message si le formulaire est dirty
+ * @param store
+ * Composable pour gérer l'apparition de message si le formulaire est dirty
  */
-export class UseForm {
-  private store: AnyStore
-  private readonly handler: any
+export function useForm(store: AnyStore){
 
-  constructor () {
-    const {store} = useContext()
-    this.store = store
-    this.handler = getEventHandler()
-  }
-
-  /**
-   * Composition function
-   */
-  public invoke (): AnyJson {
-    const readonly: ComputedRef<boolean> = computed(() => {
-      return this.store.state.form.readonly
-    })
+  const handler: any = getEventHandler()
 
-    return {
-      markFormAsDirty: () => this.markAsDirty(),
-      markFormAsNotDirty: () => this.markAsNotDirty(),
-      readonly
-    }
-  }
+  const readonly: ComputedRef<boolean> = computed(() => {
+    return store.state.form.readonly
+  })
 
   /**
    * définit le formulaire comme Dirty (modifié)
    */
-  private markAsDirty () {
-    this.store.commit('form/setDirty', true)
-    this.addEventListener()
+  function markAsDirty () {
+    store.commit('form/setDirty', true)
+    if (process.browser) {
+      window.addEventListener('beforeunload', handler)
+    }
   }
 
   /**
    * Définit le formulaire comme non dirty (non modifié)
    */
-  private markAsNotDirty () {
-    this.store.commit('form/setDirty', false)
-    this.clearEventListener()
-  }
-
-  /**
-   * Ajoute un Event avant le départ de la page
-   */
-  private addEventListener () {
+  function markAsNotDirty () {
+    store.commit('form/setDirty', false)
     if (process.browser) {
-      window.addEventListener('beforeunload', this.handler)
+      window.removeEventListener('beforeunload', handler)
     }
   }
 
-  /**
-   * Supprime l'Event avant le départ de la page
-   */
-  private clearEventListener () {
-    if (process.browser) {
-      window.removeEventListener('beforeunload', this.handler)
-    }
+  return {
+    markAsDirty,
+    markAsNotDirty,
+    readonly
   }
 }
 
@@ -74,4 +49,3 @@ function getEventHandler () {
     e.returnValue = ''
   }
 }
-export const $useForm = () => new UseForm().invoke()

tests/unit/composables/form/useForm.spec.ts

@@ -1,40 +1,31 @@
 import {createStore, initLocalVue, mountComposition} from '~/tests/unit/Helpers'
 import { form } from '~/tests/unit/fixture/state/profile'
-import { $useForm, UseForm } from '~/composables/form/useForm'
+import {useForm} from "~/composables/form/useForm";
 import { AnyStore } from '~/types/interfaces'
 
 let store: AnyStore
+let useFormMount:any
 
 beforeAll(() => {
   store = createStore()
   store.registerModule('form', form)
   initLocalVue({store: store})
-})
 
+  const component = mountComposition(() => {
+    useFormMount = useForm(store)
+  });
+})
 
 describe('markFormAsDirty()', () => {
-  it('should call addEventListener one time', async () => {
-    const spy = jest.spyOn(UseForm.prototype as any, 'addEventListener')
-    spy.mockImplementation(() => {})
-
-    const component = mountComposition(() => {
-      const {markFormAsDirty} = $useForm();
-      markFormAsDirty()
-      expect(spy).toHaveBeenCalled()
-    });
+  it('should commit the form state dirty to true', async () => {
+    useFormMount.markAsDirty()
+    expect(store.state.form.dirty).toBeTruthy()
   })
 })
 
 describe('markAsNotDirty()', () => {
-  it('should call clearEventListener one time', async () => {
-    const spy = jest.spyOn(UseForm.prototype as any, 'clearEventListener')
-    spy.mockImplementation(() => {})
-
-    const component = mountComposition(() => {
-      const { markFormAsNotDirty } = $useForm()
-      markFormAsNotDirty()
-      expect(spy).toHaveBeenCalled()
-    });
-
+  it('should commit the form state dirty to false', async () => {
+    useFormMount.markAsNotDirty()
+    expect(store.state.form.dirty).toBeFalsy()
   })
 })