gestion des errors renvoyé par le back

components/Ui/Input/Autocomplete.vue

@@ -21,7 +21,8 @@ Liste déroulante avec autocompletion
       :return-object="returnObject"
       :search-input.sync="search"
       :prepend-icon="prependIcon"
-      @input="$emit('update', $event, field)"
+      :error="error"
+      @input="onChange($event)"
     >
       <template v-if="slotText" v-slot:item="data">
         <v-list-item-content v-text="data.item.slotTextDisplay"></v-list-item-content>
@@ -35,6 +36,7 @@ import { computed, defineComponent, ComputedRef, Ref, ref, watch, onUnmounted }
 import { AnyJson } from '~/types/interfaces'
 import * as _ from 'lodash'
 import {$objectProperties} from "~/services/utils/objectProperties";
+import {$useError} from "~/use/form/useError";
 
 export default defineComponent({
   props: {
@@ -97,6 +99,7 @@ export default defineComponent({
   },
   setup (props, { emit }) {
     const search:Ref<string|null> = ref(null)
+    const {error, onChange} = $useError(props.field, emit)
 
     // On reconstruit les items à afficher car le text de l'Item doit être construit par rapport au itemText passé en props
     const itemsToDisplayed: ComputedRef<Array<AnyJson>> = computed(() => {
@@ -136,7 +139,9 @@ export default defineComponent({
     return {
       label_field: props.label ?? props.field,
       itemsToDisplayed,
-      search
+      search,
+      error,
+      onChange
     }
   }
 })

components/Ui/Input/Checkbox.vue

@@ -13,13 +13,15 @@ Case à cocher
       :value="data"
       :label="$t(label_field)"
       :disabled="readonly"
-      @change="$emit('update', $event, field)"
+      :error="error"
+      @change="onChange($event)"
     />
   </v-container>
 </template>
 
 <script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api'
+import {$useError} from "~/use/form/useError";
 
 export default defineComponent({
   props: {
@@ -42,9 +44,13 @@ export default defineComponent({
       required: false
     }
   },
-  setup (props) {
+  setup (props, {emit}) {
+    const {error, onChange} = $useError(props.field, emit)
+
     return {
-      label_field: props.label ?? props.field
+      label_field: props.label ?? props.field,
+      error,
+      onChange
     }
   }
 })

components/Ui/Input/DatePicker.vue

@@ -25,6 +25,7 @@ Sélecteur de dates
           :dense="dense"
           :single-line="singleLine"
           v-on="on"
+          :error="error"
         />
       </template>
       <v-date-picker
@@ -42,6 +43,7 @@ Sélecteur de dates
 import { defineComponent, watch, ref, useContext, onUnmounted, computed, Ref, ComputedRef } from '@nuxtjs/composition-api'
 import { WatchStopHandle } from '@vue/composition-api'
 import DatesUtils from '~/services/utils/datesUtils'
+import {$useError} from "~/use/form/useError";
 
 export default defineComponent({
   props: {
@@ -81,6 +83,7 @@ export default defineComponent({
     const { data, field, range } = props
     const { $moment } = useContext()
     const dateUtils = new DatesUtils($moment)
+    const {error, onChange} = $useError(props.field, emit)
 
     const datesParsed: Ref<Array<string>|string> = range ? ref(Array<string>()) : ref('')
 
@@ -99,7 +102,7 @@ export default defineComponent({
     const unwatch: WatchStopHandle = watch(datesParsed, (newValue, oldValue) => {
       if (newValue === oldValue) { return }
       if (Array.isArray(newValue) && newValue.length < 2) { return }
-      emit('update', Array.isArray(newValue) ? dateUtils.sortDate(newValue) : newValue, field)
+      onChange(Array.isArray(newValue) ? dateUtils.sortDate(newValue) : newValue)
     })
 
     onUnmounted(() => {
@@ -110,7 +113,8 @@ export default defineComponent({
       label_field: props.label ?? props.field,
       datesParsed,
       datesFormatted,
-      dateOpen: ref(false)
+      dateOpen: ref(false),
+      error
     }
   }
 })

components/Ui/Input/Email.vue

@@ -8,14 +8,14 @@ Champs de saisie de type Text dédié à la saisie d'emails
     :label="label"
     :readonly="readonly"
     :error="error"
-    :error-message="errorMessage"
     :rules="rules"
-    @update="update"
+    @update="onChange"
   />
 </template>
 
 <script lang="ts">
 import { defineComponent, useContext } from '@nuxtjs/composition-api'
+import {$useError} from "~/use/form/useError";
 
 export default defineComponent({
   props: {
@@ -43,19 +43,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    error: {
-      type: Boolean,
-      required: false
-    },
-    errorMessage: {
-      type: String,
-      required: false,
-      default: null
     }
   },
   setup (props, {emit}) {
     const { app: { i18n } } = useContext()
+    const {error, onChange} = $useError(props.field, emit)
 
     const rules = [
       (email: string) => validEmail(email) || i18n.t('email_error')
@@ -67,13 +59,10 @@ export default defineComponent({
       )
     }
 
-    const update = (value: string) =>{
-      emit('update', value, props.field)
-    }
-
     return {
       rules,
-      update
+      error,
+      onChange
     }
   }
 })

components/Ui/Input/Enum.vue

@@ -21,15 +21,17 @@ Liste déroulante dédiée à l'affichage d'objets Enum
       item-value="value"
       :rules="rules"
       :disabled="readonly"
-      @change="$emit('update', $event, field)"
+      :error="error"
+      @change="onChange($event)"
     />
   </main>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, useContext, useFetch, Ref } from '@nuxtjs/composition-api'
+import {defineComponent, ref, useContext, useFetch, Ref} from '@nuxtjs/composition-api'
 import { EnumChoices } from '~/types/interfaces'
 import { QUERY_TYPE } from '~/types/enums'
+import {$useError} from "~/use/form/useError";
 
 export default defineComponent({
   props: {
@@ -62,11 +64,12 @@ export default defineComponent({
       default: () => []
     }
   },
-  setup (props) {
+  setup (props, {emit}) {
     const labelField = props.label ?? props.field
 
     const { enumType } = props
     const { $dataProvider } = useContext()
+    const {error, onChange} = $useError(props.field, emit)
 
     const items: Ref<Array<EnumChoices>> = ref([])
     useFetch(async () => {
@@ -76,9 +79,12 @@ export default defineComponent({
       })
     })
 
+
     return {
       items,
-      label_field: labelField
+      label_field: labelField,
+      error,
+      onChange
     }
   }
 })

components/Ui/Input/Phone.vue

@@ -7,6 +7,7 @@ Champs de saisie d'un numéro de téléphone
 <template>
   <client-only>
     <vue-tel-input-vuetify
+      :error="error"
       :field="field"
       :label="label"
       v-model="myPhone"
@@ -16,13 +17,14 @@ Champs de saisie d'un numéro de téléphone
       validate-on-blur
       :rules="rules"
       @input="onInput"
-      @change="onChange"
+      @change="onChangeValue"
     />
   </client-only>
 </template>
 
 <script lang="ts">
 import { defineComponent, Ref, ref, useContext, computed } from '@nuxtjs/composition-api'
+import {$useError} from "~/use/form/useError";
 
 export default defineComponent({
   props: {
@@ -44,19 +46,11 @@ export default defineComponent({
     readonly: {
       type: Boolean,
       required: false
-    },
-    error: {
-      type: Boolean,
-      required: false
-    },
-    errorMessage: {
-      type: String,
-      required: false,
-      default: null
     }
   },
   setup (props, {emit}) {
     const { app: { i18n } } = useContext()
+    const {error, onChange} = $useError(props.field, emit)
 
     const nationalNumber: Ref<string | number> = ref('')
     const internationalNumber: Ref<string | number> = ref('')
@@ -70,9 +64,9 @@ export default defineComponent({
       onInit.value = false
     }
 
-    const onChange = () => {
+    const onChangeValue = () => {
       if (isValid.value) {
-        emit('update', internationalNumber.value, props.field)
+        onChange(internationalNumber.value)
       }
     }
 
@@ -89,8 +83,9 @@ export default defineComponent({
 
     return {
       myPhone,
+      error,
       onInput,
-      onChange,
+      onChangeValue,
       rules: [
         () => isValid.value || i18n.t('phone_error')
       ]

components/Ui/Input/Text.vue

@@ -12,14 +12,15 @@ Champs de saisie de texte
     :rules="rules"
     :disabled="readonly"
     :type="type"
-    :error="error"
+    :error="error || violations"
     :error-messages="errorMessage"
-    @change="$emit('update', $event, field)"
+    @change="onChange($event)"
   />
 </template>
 
 <script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api'
+import {$useError} from "~/use/form/useError";
 
 export default defineComponent({
   props: {
@@ -62,9 +63,13 @@ export default defineComponent({
       default: null
     }
   },
-  setup (props) {
+  setup (props, {emit}) {
+    const {error: violations, onChange} = $useError(props.field, emit)
+
     return {
-      label_field: props.label ?? props.field
+      label_field: props.label ?? props.field,
+      violations,
+      onChange
     }
   }
 })

lang/rulesAndErrors/fr-FR.js

@@ -4,6 +4,13 @@ export default (context, locale) => {
     name_length_rule: 'La taille du nom doit être de moins de 128 caractères',
     siret_error: 'N° de siret non valide',
     email_error: 'Adresse email invalide',
-    phone_error: 'Numéro de téléphone invalide'
+    phone_error: 'Numéro de téléphone invalide',
+    ADDRESS_PRACTICE_non_unique: 'Vous ne pouvez pas avoir 2 adresses de pratique',
+    ADDRESS_HEAD_OFFICE_non_unique: 'Vous ne pouvez pas avoir 2 adresses de siège social',
+    ADDRESS_CONTACT_non_unique: 'Vous ne pouvez pas avoir 2 adresses de contact',
+    ADDRESS_BILL_non_unique: 'Vous ne pouvez pas avoir 2 adresses de facturation',
+    PRINCIPAL_non_unique: 'Vous ne pouvez pas avoir 2 points de contact principaux',
+    BILL_non_unique: 'Vous ne pouvez pas avoir 2 points de contact de facturation',
+    CONTACT_non_unique: 'Vous ne pouvez pas avoir 2 points de contact',
   })
 }

services/store/form.ts

@@ -0,0 +1,33 @@
+import {Store} from "vuex";
+import {FORM_STATUS} from "~/types/enums";
+import {Route} from "vue-router";
+
+export default class FormStorage {
+  private store:Store<any>
+
+  constructor(store:Store<any>) {
+    this.store = store
+  }
+
+  /**
+   * Actions devant être gérées si on souhaite quitter une page
+   * @param to
+   */
+  handleActionsAfterLeavePage(to: Route){
+    if (this.store.state.form.dirty) {
+      this.store.commit('form/setShowConfirmToLeave', true)
+      this.store.commit('form/setGoAfterLeave', to)
+    } else {
+      this.store.commit('form/setFormStatus', FORM_STATUS.EDIT)
+      this.store.commit('form/setViolations', [])
+    }
+  }
+
+  /**
+   * Ajout des violations dans le store
+   * @param invalidFields
+   */
+  addViolations(invalidFields: Array<any>){
+    this.store.commit('form/setViolations', invalidFields)
+  }
+}