alert refactoring

components/Layout/Alert/Container.vue

@@ -15,13 +15,13 @@ Container principal pour l'affichage d'une ou plusieurs alertes
 
 <script lang="ts">
 import { defineComponent, computed, ComputedRef, useContext } from '@nuxtjs/composition-api'
-import { alert } from '~/types/interfaces'
+import { Alerts } from '~/types/interfaces'
 
 export default defineComponent({
   setup () {
     const { store } = useContext()
 
-    const alerts: ComputedRef<Array<alert>> = computed(() => {
+    const alerts: ComputedRef<Array<Alerts>> = computed(() => {
       return store.state.page.alerts
     })
     return {

components/Layout/Alert/Content.vue

@@ -12,18 +12,23 @@
     @mouseover="onMouseOver"
     @mouseout="onMouseOut"
   >
-    {{ $t(alert.message) }}
+    <ul v-if="alert.messages.length > 1">
+       <li v-for="message in alert.messages">
+        {{ message }}
+      </li>
+    </ul>
+    <span v-else>{{alert.messages[0]}}</span>
   </v-alert>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, Ref, useContext } from '@nuxtjs/composition-api'
-import { alert } from '~/types/interfaces'
+import {Alerts} from '~/types/interfaces'
 
 export default defineComponent({
   props: {
     alert: {
-      type: Object as () => alert,
+      type: Object as () => Alerts,
       required: true
     }
   },

components/Layout/Alertbar.vue

@@ -7,7 +7,7 @@ Contient les différentes barre d'alertes qui s'affichent selon certains cas...
   <main>
     <client-only><LayoutAlertBarEnv></LayoutAlertBarEnv></client-only>
     <LayoutAlertBarSwitchUser></LayoutAlertBarSwitchUser>
-    <LayoutAlertBarCotisation v-if="isCmf && $can('manage', 'cotisation')"></LayoutAlertBarCotisation>
+    <client-only><LayoutAlertBarCotisation v-if="isCmf && $can('manage', 'cotisation')"></LayoutAlertBarCotisation></client-only>
     <LayoutAlertBarSwitchYear></LayoutAlertBarSwitchYear>
     <LayoutAlertBarSuperAdmin></LayoutAlertBarSuperAdmin>
   </main>

components/Ui/Button/Delete.vue

@@ -11,12 +11,10 @@ Bouton Delete avec modale de confirmation de la suppression
     <lazy-LayoutDialog
       :show="showDialog"
     >
+      <template v-slot:dialogType>{{ $t('delete_assistant') }}</template>
+      <template v-slot:dialogTitle>{{ $t('attention') }}</template>
       <template v-slot:dialogText>
-        <v-card-title class="text-h5 grey lighten-2">
-          {{ $t('attention') }}
-        </v-card-title>
         <v-card-text>
-          <br>
           <p>{{ $t('confirm_to_delete') }}</p>
         </v-card-text>
       </template>
@@ -34,7 +32,7 @@ Bouton Delete avec modale de confirmation de la suppression
 
 <script lang="ts">
 import {defineComponent, ref, Ref, useContext} from '@nuxtjs/composition-api'
-import {alert, DataDeleterArgs} from '~/types/interfaces'
+import {DataDeleterArgs} from '~/types/interfaces'
 import {TYPE_ALERT} from '~/types/enums'
 import Page from "~/services/store/page";
 

components/Ui/Form.vue

@@ -67,7 +67,7 @@ Formulaire générique
 </template>
 
 <script lang="ts">
-import {computed, ComputedRef, defineComponent, toRefs, ToRefs, useContext} from '@nuxtjs/composition-api'
+import {computed, ComputedRef, defineComponent, ref, Ref, toRefs, ToRefs, useContext} from '@nuxtjs/composition-api'
 import {Query} from '@vuex-orm/core'
 import {repositoryHelper} from '~/services/store/repository'
 import {queryHelper} from '~/services/store/query'
@@ -109,6 +109,7 @@ export default defineComponent({
     const nextStepFactory = new UseNextStepFactory()
     const {id, query}: ToRefs = toRefs(props)
     const page = new Page(store)
+    const form:Ref<any> = ref(null)
 
     const entry: ComputedRef<AnyJson> = computed(() => {
       return queryHelper.getFlattenEntry(query.value, id.value)
@@ -120,33 +121,37 @@ export default defineComponent({
     }
 
     const submit = async (next: string|null = null) => {
-      markFormAsNotDirty()
-
-      try {
-        const response = await $dataPersister.invoke({
-          type: QUERY_TYPE.MODEL,
-          model: props.model,
-          id: store.state.form.formStatus === FORM_STATUS.EDIT ? id.value : null,
-          idTemp: store.state.form.formStatus === FORM_STATUS.CREATE ? id.value : null,
-          query: props.query
-        })
-
-        page.addAlerts(TYPE_ALERT.SUCCESS, [i18n.t('saveSuccess') as string])
-        nextStep(next, response.data)
-      } catch (error) {
-        if (error.response.status === 422) {
-          if(error.response.data['violations']){
-            const violations:Array<string> = []
-            const fields:Array<string> = []
-            for(const violation of error.response.data['violations']){
-              violations.push(i18n.t(violation['message']) as string)
-              fields.push(violation['propertyPath'])
+      if(form.value.validate()){
+        markFormAsNotDirty()
+
+        try {
+          const response = await $dataPersister.invoke({
+            type: QUERY_TYPE.MODEL,
+            model: props.model,
+            id: store.state.form.formStatus === FORM_STATUS.EDIT ? id.value : null,
+            idTemp: store.state.form.formStatus === FORM_STATUS.CREATE ? id.value : null,
+            query: props.query
+          })
+
+          page.addAlerts(TYPE_ALERT.SUCCESS, [i18n.t('saveSuccess') as string])
+          nextStep(next, response.data)
+        } catch (error) {
+          if (error.response.status === 422) {
+            if(error.response.data['violations']){
+              const violations:Array<string> = []
+              const fields:Array<string> = []
+              for(const violation of error.response.data['violations']){
+                violations.push(i18n.t(violation['message']) as string)
+                fields.push(violation['propertyPath'])
+              }
+
+              new Form(store).addViolations(fields)
+              page.addAlerts(TYPE_ALERT.ALERT, violations)
             }
-
-            new Form(store).addViolations(fields)
-            page.addAlerts(TYPE_ALERT.ALERT, violations)
           }
         }
+      }else{
+        page.addAlerts(TYPE_ALERT.ALERT, [i18n.t('invalide_form') as string])
       }
     }
 
@@ -187,6 +192,7 @@ export default defineComponent({
     })
 
     return {
+      form,
       submit,
       updateRepository,
       readonly,

components/Ui/Map.vue

@@ -27,7 +27,7 @@ Leaflet map
 import {computed, ComputedRef, defineComponent, ref, Ref, toRefs, ToRefs, useContext} from '@nuxtjs/composition-api'
 import {QUERY_TYPE, TYPE_ALERT} from '~/types/enums'
 import {AddressPostal} from '~/models/Core/AddressPostal'
-import {alert, AnyJson} from '~/types/interfaces'
+import {AnyJson} from '~/types/interfaces'
 import Page from "~/services/store/page";
 
 export default defineComponent({

services/store/page.ts

@@ -1,5 +1,6 @@
 import {Store} from "vuex";
 import {TYPE_ALERT} from "~/types/enums";
+import {Alerts} from "~/types/interfaces";
 
 export default class Page {
   private store
@@ -14,9 +15,9 @@ export default class Page {
    * @param alerts
    */
   addAlerts(type: TYPE_ALERT, alerts: Array<string>){
-    const alert = {
+    const alert:Alerts = {
       type: type,
-      message: alerts.join(' - ')
+      messages: alerts
     }
     this.store.commit('page/setAlert', alert)
   }

store/page.ts

@@ -1,11 +1,11 @@
-import { alert, pageState } from '~/types/interfaces'
+import { Alerts, pageState } from '~/types/interfaces'
 
 export const state = () => ({
   alerts: []
 })
 
 export const mutations = {
-  setAlert (state: pageState, alert: alert) {
+  setAlert (state: pageState, alert: Alerts) {
     state.alerts.push(alert)
   },
   removeAlert (state: pageState) {