Vincent GUFFON 3 лет назад
Родитель
Сommit
c6dfc48ba5

+ 6 - 4
components/Ui/Form.vue

@@ -78,6 +78,7 @@ import {useForm} from "~/composables/form/useForm";
 import * as _ from 'lodash'
 import Form from "~/services/store/form";
 import Page from "~/services/store/page";
+import ApiError from "~/services/exception/apiError";
 
 export default defineComponent({
   props: {
@@ -135,18 +136,19 @@ export default defineComponent({
 
           page.addAlerts(TYPE_ALERT.SUCCESS, [i18n.t('saveSuccess') as string])
           nextStep(next, response.data)
-        } catch (error) {
+        } catch (error: any) {
+
           if (error.response.status === 422) {
             if(error.response.data['violations']){
               const violations:Array<string> = []
-              const fields:Array<string> = []
+              let fields:AnyJson = {}
               for(const violation of error.response.data['violations']){
                 violations.push(i18n.t(violation['message']) as string)
-                fields.push(violation['propertyPath'])
+                fields = Object.assign({}, {[violation['propertyPath']] : violation['message']})
               }
 
               new Form(store).addViolations(fields)
-              page.addAlerts(TYPE_ALERT.ALERT, violations)
+              page.addAlerts(TYPE_ALERT.ALERT, [i18n.t('invalide_form') as string])
             }
           }
         }

+ 13 - 3
components/Ui/Input/Checkbox.vue

@@ -14,7 +14,8 @@ Case à cocher
       :value="data"
       :label="$t(label_field)"
       :disabled="readonly"
-      :error="error"
+      :error="error || !!violation"
+      :error-messages="errorMessage || violation ? $t(violation) : ''"
       @change="onChange($event)"
     />
   </v-container>
@@ -43,15 +44,24 @@ export default defineComponent({
     readonly: {
       type: Boolean,
       required: false
+    },
+    error: {
+      type: Boolean,
+      required: false
+    },
+    errorMessage: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   setup (props, {emit}) {
     const {store} = useContext()
-    const {error, onChange} = useError(props.field, emit, store)
+    const {violation, onChange} = useError(props.field, emit, store)
 
     return {
       label_field: props.label ?? props.field,
-      error,
+      violation,
       onChange
     }
   }

+ 19 - 4
components/Ui/Input/DatePicker.vue

@@ -25,7 +25,8 @@ Sélecteur de dates
           :dense="dense"
           :single-line="singleLine"
           v-on="on"
-          :error="error"
+          :error="error || !!violation"
+          :error-messages="errorMessage || violation ? $t(violation) : ''"
         />
       </template>
       <v-date-picker
@@ -76,12 +77,26 @@ export default defineComponent({
     singleLine: {
       type: Boolean,
       required: false
+    },
+    format: {
+      type: String,
+      required: false,
+      default: 'DD/MM/YYYY'
+    },
+    error: {
+      type: Boolean,
+      required: false
+    },
+    errorMessage: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   setup (props, { emit }) {
     const { data, range } = props
     const { $moment, store } = useContext()
-    const {error, onChange} = useError(props.field, emit, store)
+    const {violation, onChange} = useError(props.field, emit, store)
     const dateUtils = new DatesUtils($moment)
 
     const datesParsed: Ref<Array<string>|string|null> = range ? ref(Array<string>()) : ref(null)
@@ -96,7 +111,7 @@ export default defineComponent({
 
     const datesFormatted: ComputedRef<string|null> = computed(() => {
       if (props.range && datesParsed.value && datesParsed.value.length < 2) { return null }
-      return datesParsed.value ? dateUtils.formattedDate(datesParsed.value, 'DD/MM/YYYY') :  null
+      return datesParsed.value ? dateUtils.formattedDate(datesParsed.value, props.format) :  null
     })
 
     const unwatch: WatchStopHandle = watch(datesParsed, (newValue, oldValue) => {
@@ -114,7 +129,7 @@ export default defineComponent({
       datesParsed,
       datesFormatted,
       dateOpen: ref(false),
-      error
+      violation
     }
   }
 })

+ 13 - 3
components/Ui/Input/Email.vue

@@ -7,7 +7,8 @@ Champs de saisie de type Text dédié à la saisie d'emails
     :data="data"
     :label="label"
     :readonly="readonly"
-    :error="error"
+    :error="error || !!violation"
+    :error-messages="errorMessage || violation ? $t(violation) : ''"
     :rules="rules"
     @update="onChange"
   />
@@ -43,11 +44,20 @@ 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 }, store } = useContext()
-    const {error, onChange} = useError(props.field, emit, store)
+    const {violation, onChange} = useError(props.field, emit, store)
 
     const rules = [
       (email: string) => validEmail(email) || i18n.t('email_error')
@@ -61,7 +71,7 @@ export default defineComponent({
 
     return {
       rules,
-      error,
+      violation,
       onChange
     }
   }

+ 13 - 3
components/Ui/Input/Enum.vue

@@ -21,7 +21,8 @@ Liste déroulante dédiée à l'affichage d'objets Enum
       item-value="value"
       :rules="rules"
       :disabled="readonly"
-      :error="error"
+      :error="error || !!violation"
+      :error-messages="errorMessage || violation ? $t(violation) : ''"
       @change="onChange($event)"
     />
   </main>
@@ -62,6 +63,15 @@ export default defineComponent({
       type: Array,
       required: false,
       default: () => []
+    },
+    error: {
+      type: Boolean,
+      required: false
+    },
+    errorMessage: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   setup (props, {emit}) {
@@ -69,7 +79,7 @@ export default defineComponent({
 
     const { enumType } = props
     const { $dataProvider, store } = useContext()
-    const {error, onChange} = useError(props.field, emit, store)
+    const {violation, onChange} = useError(props.field, emit, store)
 
     const items: Ref<Array<EnumChoices>> = ref([])
     useFetch(async () => {
@@ -83,7 +93,7 @@ export default defineComponent({
     return {
       items,
       label_field: labelField,
-      error,
+      violation,
       onChange
     }
   }

+ 13 - 3
components/Ui/Input/Phone.vue

@@ -7,7 +7,8 @@ Champs de saisie d'un numéro de téléphone
 <template>
   <client-only>
     <vue-tel-input-vuetify
-      :error="error"
+      :error="error || !!violation"
+      :error-messages="errorMessage || violation ? $t(violation) : ''"
       :field="field"
       :label="label"
       v-model="myPhone"
@@ -46,11 +47,20 @@ 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 }, store } = useContext()
-    const {error, onChange} = useError(props.field, emit, store)
+    const {violation, onChange} = useError(props.field, emit, store)
 
     const nationalNumber: Ref<string | number> = ref('')
     const internationalNumber: Ref<string | number> = ref('')
@@ -83,7 +93,7 @@ export default defineComponent({
 
     return {
       myPhone,
-      error,
+      violation,
       onInput,
       onChangeValue,
       rules: [

+ 4 - 4
components/Ui/Input/TextArea.vue

@@ -11,8 +11,8 @@ Champs de saisie de bloc texte
       :label="$t(label_field)"
       :rules="rules"
       :disabled="readonly"
-      :error="error || violations"
-      :error-messages="errorMessage"
+      :error="error || !!violation"
+      :error-messages="errorMessage || violation ? $t(violation) : ''"
       @change="onChange($event)"
     />
 </template>
@@ -59,11 +59,11 @@ export default defineComponent({
   },
   setup (props, {emit}) {
     const {store} = useContext()
-    const {error: violations, onChange} = useError(props.field, emit, store)
+    const {violation, onChange} = useError(props.field, emit, store)
 
     return {
       label_field: props.label ?? props.field,
-      violations,
+      violation,
       onChange
     }
   }

+ 5 - 5
composables/form/useError.ts

@@ -1,5 +1,6 @@
 import { AnyStore } from '~/types/interfaces'
 import {computed, ComputedRef} from "@nuxtjs/composition-api";
+import * as _ from 'lodash'
 
 /**
  * @category composables/form
@@ -9,8 +10,8 @@ import {computed, ComputedRef} from "@nuxtjs/composition-api";
  * @param store
  */
 export function useError(field: string, emit: any, store: AnyStore){
-  const error:ComputedRef<Boolean> = computed(()=>{
-    return store.state.form.violations.indexOf(field) >= 0
+  const violation:ComputedRef<string> = computed(()=>{
+    return _.get(store.state.form.violations, field, '')
   })
 
   /**
@@ -20,13 +21,12 @@ export function useError(field: string, emit: any, store: AnyStore){
    * @param changeField
    */
   function onChange (emit:any, fieldValue:any, changeField:string) {
-      const errors = store.state.form.violations.filter((field:string) => field !== changeField)
-      store.commit('form/setViolations', errors)
+      store.commit('form/setViolations', _.omit(store.state.form.violations, changeField))
       emit('update', fieldValue, changeField)
   }
 
   return {
     onChange: (fieldValue:any) => onChange(emit, fieldValue, field),
-    error
+    violation
   }
 }

+ 1 - 1
services/data/baseDataManager.ts

@@ -46,7 +46,7 @@ abstract class BaseDataManager extends Hookable implements DataManager {
     try {
       return await this._invoke(queryArguments)
     } catch (error) {
-      throw new ApiError(error.response.status, error.response.data.detail)
+      throw error
     }
   }
 

+ 0 - 13
services/exception/apiError.ts

@@ -1,13 +0,0 @@
-class ApiError extends Error {
-  private readonly status !: number
-
-  constructor (status: number, message: string) {
-    super(message)
-    this.status = status
-  }
-
-  public getStatus (): number {
-    return this.status
-  }
-}
-export default ApiError