useError

components/Ui/Input/Autocomplete.vue

@@ -37,7 +37,7 @@ import {computed, defineComponent, ComputedRef, Ref, ref, watch, onUnmounted, us
 import { AnyJson } from '~/types/interfaces'
 import * as _ from 'lodash'
 import {$objectProperties} from "~/services/utils/objectProperties";
-import {$useError} from "~/composables/form/useError";
+import {useError} from "~/composables/form/useError";
 
 export default defineComponent({
   props: {
@@ -113,9 +113,9 @@ export default defineComponent({
     },
   },
   setup (props, { emit }) {
-    const {app:{i18n}} = useContext()
+    const {app:{i18n}, store} = useContext()
     const search:Ref<string|null> = ref(null)
-    const {error, onChange} = $useError(props.field, emit)
+    const {error, onChange} = useError(props.field, emit, store)
 
     // On reconstruit les items à afficher...
     const itemsToDisplayed: ComputedRef<Array<AnyJson>> = computed(() => {

components/Ui/Input/Checkbox.vue

@@ -21,8 +21,8 @@ Case à cocher
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
-import {$useError} from "~/composables/form/useError";
+import {defineComponent, useContext} from '@nuxtjs/composition-api'
+import {useError} from "~/composables/form/useError";
 
 export default defineComponent({
   props: {
@@ -46,7 +46,8 @@ export default defineComponent({
     }
   },
   setup (props, {emit}) {
-    const {error, onChange} = $useError(props.field, emit)
+    const {store} = useContext()
+    const {error, onChange} = useError(props.field, emit, store)
 
     return {
       label_field: props.label ?? props.field,

components/Ui/Input/DatePicker.vue

@@ -43,7 +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 "~/composables/form/useError";
+import {useError} from "~/composables/form/useError";
 
 export default defineComponent({
   props: {
@@ -81,9 +81,9 @@ export default defineComponent({
   },
   setup (props, { emit }) {
     const { data, range } = props
-    const { $moment } = useContext()
+    const { $moment, store } = useContext()
+    const {error, onChange} = useError(props.field, emit, store)
     const dateUtils = new DatesUtils($moment)
-    const {error, onChange} = $useError(props.field, emit)
 
     const datesParsed: Ref<Array<string>|string|null> = range ? ref(Array<string>()) : ref(null)
 

components/Ui/Input/Email.vue

@@ -15,7 +15,7 @@ Champs de saisie de type Text dédié à la saisie d'emails
 
 <script lang="ts">
 import { defineComponent, useContext } from '@nuxtjs/composition-api'
-import {$useError} from "~/composables/form/useError";
+import {useError} from "~/composables/form/useError";
 
 export default defineComponent({
   props: {
@@ -46,8 +46,8 @@ export default defineComponent({
     }
   },
   setup (props, {emit}) {
-    const { app: { i18n } } = useContext()
-    const {error, onChange} = $useError(props.field, emit)
+    const { app: { i18n }, store } = useContext()
+    const {error, onChange} = useError(props.field, emit, store)
 
     const rules = [
       (email: string) => validEmail(email) || i18n.t('email_error')

components/Ui/Input/Enum.vue

@@ -31,7 +31,7 @@ Liste déroulante dédiée à l'affichage d'objets Enum
 import {defineComponent, ref, useContext, useFetch, Ref} from '@nuxtjs/composition-api'
 import { EnumChoices } from '~/types/interfaces'
 import { QUERY_TYPE } from '~/types/enums'
-import {$useError} from "~/composables/form/useError";
+import {useError} from "~/composables/form/useError";
 
 export default defineComponent({
   props: {
@@ -68,8 +68,8 @@ export default defineComponent({
     const labelField = props.label ?? props.field
 
     const { enumType } = props
-    const { $dataProvider } = useContext()
-    const {error, onChange} = $useError(props.field, emit)
+    const { $dataProvider, store } = useContext()
+    const {error, onChange} = useError(props.field, emit, store)
 
     const items: Ref<Array<EnumChoices>> = ref([])
     useFetch(async () => {

components/Ui/Input/Phone.vue

@@ -24,7 +24,7 @@ Champs de saisie d'un numéro de téléphone
 
 <script lang="ts">
 import { defineComponent, Ref, ref, useContext, computed } from '@nuxtjs/composition-api'
-import {$useError} from "~/composables/form/useError";
+import {useError} from "~/composables/form/useError";
 
 export default defineComponent({
   props: {
@@ -49,8 +49,8 @@ export default defineComponent({
     }
   },
   setup (props, {emit}) {
-    const { app: { i18n } } = useContext()
-    const {error, onChange} = $useError(props.field, emit)
+    const { app: { i18n }, store } = useContext()
+    const {error, onChange} = useError(props.field, emit, store)
 
     const nationalNumber: Ref<string | number> = ref('')
     const internationalNumber: Ref<string | number> = ref('')

components/Ui/Input/Text.vue

@@ -20,8 +20,8 @@ Champs de saisie de texte
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
-import {$useError} from "~/composables/form/useError";
+import {defineComponent, useContext} from '@nuxtjs/composition-api'
+import {useError} from "~/composables/form/useError";
 import {mask} from 'vue-the-mask';
 
 export default defineComponent({
@@ -71,7 +71,8 @@ export default defineComponent({
     }
   },
   setup (props, {emit}) {
-    const {error: violations, onChange} = $useError(props.field, emit)
+    const {store} = useContext()
+    const {error: violations, onChange} = useError(props.field, emit, store)
 
     return {
       label_field: props.label ?? props.field,

components/Ui/Input/TextArea.vue

@@ -18,8 +18,8 @@ Champs de saisie de bloc texte
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
-import {$useError} from "~/composables/form/useError";
+import {defineComponent, useContext} from '@nuxtjs/composition-api'
+import {useError} from "~/composables/form/useError";
 
 export default defineComponent({
   props: {
@@ -58,7 +58,8 @@ export default defineComponent({
     }
   },
   setup (props, {emit}) {
-    const {error: violations, onChange} = $useError(props.field, emit)
+    const {store} = useContext()
+    const {error: violations, onChange} = useError(props.field, emit, store)
 
     return {
       label_field: props.label ?? props.field,

composables/form/useError.ts

@@ -1,41 +1,32 @@
-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 UseError
- * Use Classe pour gérer l'apparition de message si le formulaire est dirty
+ * Composable pour gérer l'apparition de message si le formulaire est dirty
+ * @param field
+ * @param emit
+ * @param store
  */
-export class UseError {
-  private store: AnyStore
-
-  constructor () {
-    const {store} = useContext()
-    this.store = store
-  }
+export function useError(field: string, emit: any, store: AnyStore){
+  const error:ComputedRef<Boolean> = computed(()=>{
+    return store.state.form.violations.indexOf(field) >= 0
+  })
 
   /**
-   * Composition function
+   * Lorsque la valeur d'un champ change, on supprime le fait qu'il puisse être "faux" dans le store, et on émet sa nouvelle valeur au parent
+   * @param emit
+   * @param fieldValue
+   * @param changeField
    */
-  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
-    }
+  function onChange (emit:any, fieldValue:any, changeField:string) {
+      const errors = store.state.form.violations.filter((field:string) => field !== changeField)
+      store.commit('form/setViolations', errors)
+      emit('update', fieldValue, changeField)
   }
 
-  /**
-   *
-   */
-  private onChange (emit:any, fieldValue:any, changeField:string) {
-    const errors = this.store.state.form.violations.filter((field:string) => field !== changeField)
-    this.store.commit('form/setViolations', errors)
-    emit('update', fieldValue, changeField)
+  return {
+    onChange: (fieldValue:any) => onChange(emit, fieldValue, field),
+    error
   }
 }
-
-export const $useError = (field: string, emit: any) => new UseError().invoke(field, emit)

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

@@ -0,0 +1,28 @@
+import {useError} from "~/composables/form/useError";
+import {createStore} from "~/tests/unit/Helpers";
+import {form as formModule} from "~/tests/unit/fixture/state/profile";
+import {AnyStore} from "~/types/interfaces";
+let store:AnyStore
+
+let useErrorMount:any
+const emit = jest.fn()
+
+beforeAll(() => {
+  store = createStore()
+  store.registerModule('form', formModule)
+  store.commit('form/setViolations', ['foo', 'bar'])
+
+  useErrorMount = useError('foo', emit, store)
+})
+
+describe('onChange()', () => {
+  it('delete foo inside store', () => {
+    useErrorMount.onChange('bob')
+    expect(store.state.form.violations).toHaveLength(1)
+  })
+
+  it('emit is called', () => {
+    useErrorMount.onChange('bob')
+    expect(emit).toHaveBeenCalled
+  })
+})