refactoring

components/Form/Toolbar.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-toolbar flat class="ot_light_grey toolbarForm" dark dense rounded>
+    <v-toolbar-title class="ot_dark_grey--text form_main_title">
+      <v-icon class="ot_white--text ot_green icon">
+         {{icon}}
+      </v-icon>
+      {{ $t(title) }}
+    </v-toolbar-title>
+  </v-toolbar>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: true
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/Ui/Map.vue

@@ -24,12 +24,11 @@ Leaflet map
 </template>
 
 <script lang="ts">
-import {
-  defineComponent, computed, ref, toRefs, useContext, ComputedRef, Ref, ToRefs
-} from '@nuxtjs/composition-api'
-import { QUERY_TYPE, TYPE_ALERT } from '~/types/enums'
-import { AddressPostal } from '~/models/Core/AddressPostal'
-import { AnyJson, alert } from '~/types/interfaces'
+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 Page from "~/services/store/page";
 
 export default defineComponent({
   props: {
@@ -43,7 +42,7 @@ export default defineComponent({
     }
   },
   setup (props, { emit }) {
-    const { $dataProvider, store } = useContext()
+    const { $dataProvider, store, app: {i18n} } = useContext()
     const { address }: ToRefs = toRefs(props)
     const latitude: Ref<number> = ref(address.value.latitude ?? 0.0)
     const longitude: Ref<number> = ref(address.value.longitude ?? 0.0)
@@ -67,11 +66,7 @@ export default defineComponent({
         address.value.longitude = data[0].longitude
         emit('updateAddress', address.value)
       } else {
-        const alert: alert = {
-          type: TYPE_ALERT.ALERT,
-          message: 'no_coordinate_corresponding'
-        }
-        store.commit('page/setAlert', alert)
+        new Page(store).addAlerts(TYPE_ALERT.ALERT, [i18n.t('no_coordinate_corresponding') as string])
       }
     }
 

use/data/useDataUtils.ts

@@ -0,0 +1,74 @@
+import { AnyJson } from '~/types/interfaces'
+import {FORM_STATUS, QUERY_TYPE} from "~/types/enums";
+import {ref, Ref, useContext, useFetch, useStore} from '@nuxtjs/composition-api'
+import DataProvider from "~/services/data/dataProvider";
+import {Model} from "@vuex-orm/core";
+import {repositoryHelper} from "~/services/store/repository";
+import {Store} from "vuex";
+
+/**
+ * @category Use/data
+ * @class UseAccess
+ * Use Classe qui va récupérer les Accesses suivant des critères de recherche
+ */
+export class UseDataUtils {
+  private $dataProvider: DataProvider
+  private route: Ref
+  private store: Store<any>
+
+  constructor() {
+    const { route, $dataProvider } = useContext()
+    this.store = useStore()
+    this.$dataProvider = $dataProvider
+    this.route = route
+  }
+
+  public invoke(): AnyJson{
+    return {
+      getItemToEdit: (model: typeof Model) => this.getItemToEdit(model),
+      createItem: () => this.createItem(),
+    }
+  }
+
+  /**
+   * recherche l'item a éditer
+   * @param model
+   * @private
+   */
+  private getItemToEdit(model: typeof Model){
+    const id = parseInt(this.route.value.params.id)
+    const {fetchState} = useFetch(async () => {
+      await this.$dataProvider.invoke({
+        type: QUERY_TYPE.MODEL,
+        model,
+        id
+      })
+    })
+    return {
+      fetchState,
+      id
+    }
+  }
+
+  /**
+   * Créer l'Item quand l'utilisateur veux créer un nouvel enregistrement
+   * @param itemToCreate
+   * @param model
+   * @private
+   */
+  private createItem(){
+    this.store.commit('form/setFormStatus', FORM_STATUS.CREATE)
+    const loading:Ref<Boolean> = ref(true)
+    const item: Ref<any> = ref('')
+    const create = async (itemToCreate: AnyJson, model: typeof Model) =>{
+      item.value = await repositoryHelper.persist(model, itemToCreate)
+      loading.value = false
+    }
+
+    return {
+      loading,
+      create,
+      item
+    }
+  }
+}