fix et ajout de composable pour la gestion des forms

use/form/useError.ts

@@ -0,0 +1,40 @@
+import { AnyJson, AnyStore } from '~/types/interfaces'
+import {computed, ComputedRef, useStore} from "@nuxtjs/composition-api";
+
+/**
+ * @category Use/form
+ * @class UseError
+ * Use Classe pour gérer l'apparition de message si le formulaire est dirty
+ */
+export class UseError {
+  private store: AnyStore
+
+  constructor () {
+    this.store = useStore()
+  }
+
+  /**
+   * Composition function
+   */
+  public invoke (field: string, emit: any): AnyJson {
+    const error:ComputedRef<Boolean> = computed(()=>{
+      return this.store.state.form.violations.indexOf(field) >= 0
+    })
+
+    return {
+      onChange: (fieldValue:any) => this.onChange(emit, fieldValue, field),
+      error
+    }
+  }
+
+  /**
+   *
+   */
+  private onChange (emit:any, fieldValue:any, field:string) {
+    const errors = this.store.state.form.violations.filter((field:string) => field !== field)
+    this.store.commit('form/setViolations', errors)
+    emit('update', fieldValue, field)
+  }
+}
+
+export const $useError = (field: string, emit: any) => new UseError().invoke(field, emit)

use/form/useDirtyForm.ts → use/form/useForm.ts

@@ -1,26 +1,32 @@
 import { AnyJson, AnyStore } from '~/types/interfaces'
+import {computed, ComputedRef, useStore} from "@nuxtjs/composition-api";
 
 /**
  * @category Use/form
  * @class UseDirtyForm
  * Use Classe pour gérer l'apparition de message si le formulaire est dirty
  */
-export class UseDirtyForm {
+export class UseForm {
   private store: AnyStore
   private readonly handler: any
 
-  constructor (handler: any, store: AnyStore) {
-    this.store = store
-    this.handler = handler
+  constructor () {
+    this.store = useStore()
+    this.handler = getEventHandler()
   }
 
   /**
    * Composition function
    */
   public invoke (): AnyJson {
+    const readonly: ComputedRef<boolean> = computed(() => {
+      return this.store.state.form.readonly
+    })
+
     return {
       markFormAsDirty: () => this.markAsDirty(),
-      markFormAsNotDirty: () => this.markAsNotDirty()
+      markFormAsNotDirty: () => this.markAsNotDirty(),
+      readonly
     }
   }
 
@@ -67,5 +73,4 @@ function getEventHandler () {
     e.returnValue = ''
   }
 }
-const handler = getEventHandler()
-export const $useDirtyForm = (store: AnyStore) => new UseDirtyForm(handler, store).invoke()
+export const $useForm = () => new UseForm().invoke()

use/form/useNextStepFactory.ts

@@ -0,0 +1,46 @@
+import {FORM_STATUS, SUBMIT_TYPE} from "~/types/enums";
+import {useContext} from "@nuxtjs/composition-api";
+import {Store} from "vuex";
+import {AnyJson} from "~/types/interfaces";
+import {Route} from "vue-router";
+
+export default class UseNextStepFactory{
+  private store: Store<any>
+  private router: any
+
+  constructor() {
+    const {store, app: {router}} = useContext()
+
+    this.store = store
+    this.router = router
+  }
+
+
+  invoke(args: any, response: AnyJson){
+    const factory: AnyJson = {}
+    factory[SUBMIT_TYPE.SAVE] = () => this.save(args, response.id)
+    factory[SUBMIT_TYPE.SAVE_AND_BACK] = () => this.saveAndGoTo(args)
+
+    return factory
+  }
+
+  /**
+   * Action Sauvegarder qui redirige vers la page d'edit si on est en mode create
+   * @param route
+   * @param id
+   */
+  save(route: Route, id: number){
+    if(this.store.state.form.formStatus === FORM_STATUS.CREATE){
+      route.path += id
+      this.router.push(route)
+    }
+  }
+
+  /**
+   * Action sauvegarder et route suivante qui redirige vers une route
+   * @param route
+   */
+  saveAndGoTo(route: Route){
+    this.router.push(route)
+  }
+}