refactoring pour ajouter un component Form comportant le code des formulaire

components/Form/Organization/Address.vue

@@ -0,0 +1,238 @@
+<!-- Component d'un formulaire d'une adresse postale d'organization -->
+<template>
+  <main>
+    <LayoutContainer>
+      <v-card class="margin-bottom-20">
+        <FormToolbar title="address_postal" icon="fa-globe-europe"/>
+
+        <UiForm
+          :id="id"
+          :model="model"
+          :query="query()"
+          :submitActions="submitActions">
+          <template #form.input="{entry, updateRepository}">
+            <v-container fluid class="container">
+              <v-row>
+                <v-col cols="12" sm="12">
+                  <UiInputAutocompleteWithAPI
+                    field="owner"
+                    label="importAddress"
+                    :item-text="['person.givenName', 'person.name']"
+                    :searchFunction="accessSearch"
+                    @update="updateAccessAddress"
+                  />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="addressPostal.addressOwner" label="addressOwner" :data="entry['addressPostal.addressOwner']" @update="updateRepository" />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputEnum field="type" label="addresstype" :data="entry['type']" enum-type="address_postal_organization" @update="updateRepository" />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="addressPostal.streetAddress" label="streetAddress" :data="entry['addressPostal.streetAddress']" @update="updateRepository" />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="addressPostal.streetAddressSecond" label="streetAddressSecond" :data="entry['addressPostal.streetAddressSecond']" @update="updateRepository" />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="addressPostal.streetAddressThird" label="streetAddressThird" :data="entry['addressPostal.streetAddressThird']" @update="updateRepository" />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputAutocompleteWithAPI
+                    field="addressPostal.postalCode"
+                    label="postalCode"
+                    :data="getAutoCompleteAddressItem()"
+                    :item-text="['postcode']"
+                    :slotText="['postcode', 'city']"
+                    :searchFunction="addressSearch"
+                    :returnObject="true"
+                    @update="updateCpAddress($event, updateRepository)"
+                  />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputAutocompleteWithAPI
+                    field="addressPostal.addressCity"
+                    label="addressCity"
+                    :data="getAutoCompleteAddressItem()"
+                    :item-text="['city']"
+                    :slotText="['postcode', 'city']"
+                    :searchFunction="addressSearch"
+                    :returnObject="true"
+                    @update="updateCpAddress($event, updateRepository)"
+                  />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputAutocomplete
+                    field="addressPostal.addressCountry"
+                    label="addressCountry"
+                    :data="getIdFromUri(entry['addressPostal.addressCountry'])"
+                    :items="countries"
+                    :isLoading="countriesFetchingState.pending"
+                    :item-text="['name']"
+                    @update="updateRepository(`/api/countries/${$event}`, 'addressPostal.addressCountry')"
+                  />
+                </v-col>
+
+              </v-row>
+            </v-container>
+
+            <UiMap :zoom="12" :address="addressPostalItem()" @updateAddress="updateAddressFromMap" />
+
+          </template>
+
+          <template #form.button>
+            <NuxtLink :to="{ path: '/organization', query: { accordion: 'address_postal' }}" class="no-decoration">
+              <v-btn class="mr-4 ot_light_grey ot_grey--text">
+                {{ $t('back') }}
+              </v-btn>
+            </NuxtLink>
+          </template>
+
+        </UiForm>
+      </v-card>
+    </LayoutContainer>
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent, useContext, computed, ComputedRef, Ref, ref } from '@nuxtjs/composition-api'
+import { Repository as VuexRepository } from '@vuex-orm/core/dist/src/repository/Repository'
+import { Query, Model } from '@vuex-orm/core'
+import { OrganizationAddressPostal } from '~/models/Organization/OrganizationAddressPostal'
+import {Country} from "~/models/Core/Country";
+import {QUERY_TYPE, SUBMIT_TYPE} from '~/types/enums'
+import { repositoryHelper } from '~/services/store/repository'
+import { queryHelper } from '~/services/store/query'
+import { AddressPostal } from '~/models/Core/AddressPostal'
+import {UseCountry} from "~/use/data/useCountry";
+import ModelsUtils from "~/services/utils/modelsUtils";
+import {UseAddressPostal} from "~/use/data/useAddresspostal";
+import {AnyJson} from "~/types/interfaces";
+import DataProvider from "~/services/data/dataProvider";
+import {UseAccess} from "~/use/data/useAccess";
+
+export default defineComponent({
+  props: {
+    id:{
+      type: [Number, String],
+      required: true
+    }
+  },
+  setup (props) {
+    const { $dataProvider } = useContext()
+
+    const repository: VuexRepository<Model> = repositoryHelper.getRepository(OrganizationAddressPostal)
+    const query: Query = repository.with('addressPostal')
+
+    const organizationAddressPostalItem: ComputedRef<OrganizationAddressPostal> = computed(() => {
+      return queryHelper.getItem(query, props.id) as OrganizationAddressPostal
+    })
+
+    const addressPostalItem: ComputedRef<AddressPostal|null> = computed(() => {
+      return organizationAddressPostalItem.value?.addressPostal || null
+    })
+
+    const updateAddressFromMap = (addressPostal: AddressPostal) => {
+      repositoryHelper.persist(AddressPostal, addressPostal)
+    }
+
+    const getAutoCompleteAddressItem = computed(() => {
+      if(addressPostalItem.value?.addressCity || addressPostalItem.value?.postalCode)
+        return {id:0, city: addressPostalItem.value?.addressCity, postcode: addressPostalItem.value?.postalCode}
+      return {}
+    })
+
+    const {countries, fetchState: countriesFetchingState} = new UseCountry().getAll()
+
+    const {searchFunction: addressSearch, updateCpAddress} = new UseAddressPostal().invoke()
+
+    const {getPhysicalByFullName: accessSearch} = new UseAccess().invoke()
+
+    const {updateAccessAddress} = accessOwnerResearch($dataProvider, organizationAddressPostalItem, addressPostalItem)
+
+    const getIdFromUri = (uri: string) => {
+      return ModelsUtils.extractIdFromUri(uri)
+    }
+
+    const submitActions = computed(() => {
+      let actions:AnyJson = {}
+      actions[SUBMIT_TYPE.SAVE_AND_BACK] = { path: `/organization`, query: { accordion: 'address_postal' } }
+      actions[SUBMIT_TYPE.SAVE] = { path: `/organization/address/` }
+      return actions
+    })
+
+    /** Computed properties needs to be returned as functions until nuxt3 : https://github.com/nuxt-community/composition-api/issues/207 **/
+    return {
+      model: OrganizationAddressPostal,
+      query: () => query,
+      panel: 0,
+      addressPostalItem: () => addressPostalItem,
+      countries,
+      countriesFetchingState,
+      addressSearch,
+      getIdFromUri,
+      getAutoCompleteAddressItem: () => getAutoCompleteAddressItem,
+      accessSearch,
+      updateAccessAddress,
+      updateAddressFromMap,
+      updateCpAddress,
+      submitActions
+    }
+  },
+  beforeDestroy() {
+    repositoryHelper.cleanRepository(OrganizationAddressPostal)
+    repositoryHelper.cleanRepository(Country)
+    repositoryHelper.cleanRepository(AddressPostal)
+  }
+})
+
+/**
+ * Fonction permettant la mise à jour des champs de l'adresse suivant une adresse d'un Access
+ * @param $dataProvider
+ * @param organizationAddressPostalItem
+ * @param addressItem
+ */
+function accessOwnerResearch($dataProvider:DataProvider, organizationAddressPostalItem:ComputedRef<OrganizationAddressPostal>, addressItem:ComputedRef<AddressPostal|null>){
+  const updateAccessAddress = async (accessId: number) =>{
+    const response = await $dataProvider.invoke({
+      type: QUERY_TYPE.DEFAULT,
+      url: `api/access_addresses`,
+      id:accessId
+    })
+
+    //On ne conserve que l'adresse principale
+    const principalPersonalAddress = response.data.person.personAddressPostal.filter((personAddress: AnyJson) => {
+      return personAddress.type === 'ADDRESS_PRINCIPAL'
+    })
+
+    if(principalPersonalAddress.length > 0){
+      const personalAddress = principalPersonalAddress.pop()
+
+      //On créer la nouvelle adresse et on initialise les champs restants...
+      const addressPostal:AddressPostal = new AddressPostal(personalAddress.addressPostal)
+      addressPostal.addressOwner = `${response.data.person.name} ${response.data.person.givenName}`
+      addressPostal['@id'] = ''
+
+      if(addressItem.value)
+        addressPostal.id = addressItem.value.id
+
+      //On l'associe à l'OrganizationAddressPostal qui est éditée, et on persist
+      organizationAddressPostalItem.value.addressPostal = addressPostal
+      repositoryHelper.persist(OrganizationAddressPostal, organizationAddressPostalItem.value)
+    }
+  }
+
+  return {
+    updateAccessAddress
+  }
+}
+
+</script>

components/Form/Organization/ContactPoint.vue

@@ -0,0 +1,115 @@
+<template>
+  <main>
+    <LayoutContainer>
+      <v-card class="margin-bottom-20">
+        <FormToolbar title="contact_point" icon="fa-phone"/>
+
+        <UiForm
+          :id="id"
+          :model="model"
+          :query="query()"
+          :submitActions="submitActions">
+        >
+          <template v-slot:form.input="{entry, updateRepository}">
+            <v-container fluid class="container">
+              <v-row>
+                <v-col cols="12" sm="12">
+                  <UiInputEnum
+                    field="contactType"
+                    label="contactpoint_type"
+                    :data="entry['contactType']"
+                    enum-type="contact_point_type"
+                    @update="updateRepository"
+                  />
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <UiInputEmail
+                    field="email"
+                    label="email"
+                    :data="entry['email']"
+                    @update="updateRepository"
+                  />
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <UiInputPhone
+                    field="telphone"
+                    :label="$t('telphone')"
+                    :data="entry['telphone']"
+                    @update="updateRepository"
+                  />
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <UiInputPhone
+                    field="faxNumber"
+                    :label="$t('faxNumber')"
+                    :data="entry['faxNumber']"
+                    @update="updateRepository"
+                  />
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <UiInputPhone
+                    field="mobilPhone"
+                    :label="$t('mobilPhone')"
+                    :data="entry['mobilPhone']"
+                    @update="updateRepository"
+                  />
+                </v-col>
+              </v-row>
+            </v-container>
+          </template>
+
+          <template v-slot:form.button>
+            <NuxtLink :to="{ path: '/organization', query: { accordion: 'contact_point' }}" class="no-decoration">
+              <v-btn class="mr-4 ot_light_grey ot_grey--text">
+                {{ $t('back') }}
+              </v-btn>
+            </NuxtLink>
+          </template>
+        </UiForm>
+      </v-card>
+    </LayoutContainer>
+  </main>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent} from "@nuxtjs/composition-api";
+import {repositoryHelper} from "~/services/store/repository";
+import {ContactPoint} from "~/models/Core/ContactPoint";
+import {Repository as VuexRepository} from "@vuex-orm/core/dist/src/repository/Repository";
+import {Model, Query} from "@vuex-orm/core";
+import {AnyJson} from "~/types/interfaces";
+import {SUBMIT_TYPE} from "~/types/enums";
+
+export default defineComponent({
+  props: {
+    id:{
+      type: [Number, String],
+      required: true
+    }
+  },
+  setup () {
+    const repository: VuexRepository<Model> = repositoryHelper.getRepository(ContactPoint)
+    const query: Query = repository.query()
+
+    const submitActions = computed(() => {
+      let actions:AnyJson = {}
+      actions[SUBMIT_TYPE.SAVE_AND_BACK] = { path: `/organization`, query: { accordion: 'contact_point' } }
+      actions[SUBMIT_TYPE.SAVE] = { path: `/organization/contact_points/` }
+      return actions
+    })
+
+    return {
+      model: ContactPoint,
+      query: () => query,
+      submitActions
+    }
+  },
+  beforeDestroy() {
+    repositoryHelper.cleanRepository(ContactPoint)
+  },
+})
+</script>
+
+<style scoped>
+
+</style>

pages/organization/address/_id.vue

@@ -2,253 +2,27 @@
 <template>
   <main>
     <v-skeleton-loader
-      v-if="organizationAddressPostalFetching.pending"
+      v-if="fetchState.pending"
       type="text"
     />
-    <LayoutContainer v-else>
-      <v-card class="margin-bottom-20">
-        <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">
-              fa-globe-europe
-            </v-icon>
-            {{ $t('address_postal') }}
-          </v-toolbar-title>
-        </v-toolbar>
-
-        <UiForm :id="id" :model="model" :query="query()">
-          <template #form.input="{entry, updateRepository}">
-
-            <v-container fluid class="container">
-              <v-row>
-                <v-col cols="12" sm="12">
-                  <UiInputAutocompleteWithAPI
-                    field="owner"
-                    label="importAddress"
-                    :item-text="['person.givenName', 'person.name']"
-                    :searchFunction="accessSearch"
-                    @update="updateAccessAddress"
-                  />
-                </v-col>
-
-                <v-col cols="12" sm="6">
-                  <UiInputText field="addressPostal.addressOwner" label="addressOwner" :data="entry['addressPostal.addressOwner']" @update="updateRepository" />
-                </v-col>
-
-                <v-col cols="12" sm="6">
-                  <UiInputEnum field="type" label="addresstype" :data="entry['type']" enum-type="address_postal_organization" @update="updateRepository" />
-                </v-col>
-
-                <v-col cols="12" sm="6">
-                  <UiInputText field="addressPostal.streetAddress" label="streetAddress" :data="entry['addressPostal.streetAddress']" @update="updateRepository" />
-                </v-col>
-
-                <v-col cols="12" sm="6">
-                  <UiInputText field="addressPostal.streetAddressSecond" label="streetAddressSecond" :data="entry['addressPostal.streetAddressSecond']" @update="updateRepository" />
-                </v-col>
-
-                <v-col cols="12" sm="6">
-                  <UiInputText field="addressPostal.streetAddressThird" label="streetAddressThird" :data="entry['addressPostal.streetAddressThird']" @update="updateRepository" />
-                </v-col>
-
-                <v-col cols="12" sm="6">
-                  <UiInputAutocompleteWithAPI
-                    field="addressPostal.postalCode"
-                    label="postalCode"
-                    :data="getAutoCompleteAddressItem"
-                    :item-text="['postcode']"
-                    :slotText="['postcode', 'city']"
-                    :searchFunction="addressSearch"
-                    :returnObject="true"
-                    @update="updateCpAddress($event, updateRepository)"
-                  />
-                </v-col>
-
-                <v-col cols="12" sm="6">
-                  <UiInputAutocompleteWithAPI
-                    field="addressPostal.addressCity"
-                    label="addressCity"
-                    :data="getAutoCompleteAddressItem"
-                    :item-text="['city']"
-                    :slotText="['postcode', 'city']"
-                    :searchFunction="addressSearch"
-                    :returnObject="true"
-                    @update="updateCpAddress($event, updateRepository)"
-                  />
-                </v-col>
-
-                <v-col cols="12" sm="6">
-                  <UiInputAutocomplete
-                    field="addressPostal.addressCountry"
-                    label="addressCountry"
-                    :data="getIdFromUri(entry['addressPostal.addressCountry'])"
-                    :items="countries"
-                    :isLoading="countriesFetchingState.pending"
-                    :item-text="['name']"
-                    @update="updateRepository(`/api/countries/${$event}`, 'addressPostal.addressCountry')"
-                  />
-                </v-col>
-
-              </v-row>
-            </v-container>
-
-            <UiMap :zoom="12" :address="addressPostalItem()" @updateAddress="updateAddressFromMap" />
-
-          </template>
-
-          <template #form.button>
-            <NuxtLink :to="{ path: '/organization', query: { accordion: 'address_postal' }}" class="no-decoration">
-              <v-btn class="mr-4 ot_light_grey ot_grey--text">
-                {{ $t('back') }}
-              </v-btn>
-            </NuxtLink>
-          </template>
-
-        </UiForm>
-      </v-card>
-    </LayoutContainer>
+    <FormOrganizationAddress :id="id" v-else></FormOrganizationAddress>
   </main>
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, useFetch, computed, ComputedRef } from '@nuxtjs/composition-api'
-import { Repository as VuexRepository } from '@vuex-orm/core/dist/src/repository/Repository'
-import { Model, Query } from '@vuex-orm/core'
+import { defineComponent } from '@nuxtjs/composition-api'
 import { OrganizationAddressPostal } from '~/models/Organization/OrganizationAddressPostal'
-import {Country} from "~/models/Core/Country";
-import { QUERY_TYPE } from '~/types/enums'
-import { repositoryHelper } from '~/services/store/repository'
-import { queryHelper } from '~/services/store/query'
-import { AddressPostal } from '~/models/Core/AddressPostal'
-import {UseCountry} from "~/use/data/useCountry";
-import ModelsUtils from "~/services/utils/modelsUtils";
-import {UseAddressPostal} from "~/use/data/useAddresspostal";
-import {AnyJson} from "~/types/interfaces";
-import DataProvider from "~/services/data/dataProvider";
-import {UseAccess} from "~/use/data/useAccess";
+import {UseDataUtils} from "~/use/data/useDataUtils";
 
 export default defineComponent({
-  name: 'OrganizationAddress',
+  name: 'EditOrganizationAddressEdit',
   setup () {
-    const { route, $dataProvider } = useContext()
-    const id: number = parseInt(route.value.params.id)
-
-    const repository: VuexRepository<Model> = repositoryHelper.getRepository(OrganizationAddressPostal)
-    const query: Query = repository.with('addressPostal')
-    const {fetchState: organizationAddressPostalFetching} = useFetch(async () => {
-      await $dataProvider.invoke({
-        type: QUERY_TYPE.MODEL,
-        model: OrganizationAddressPostal,
-        id
-      })
-    })
-
-    const organizationAddressPostalItem: ComputedRef<OrganizationAddressPostal> = computed(() => {
-      return queryHelper.getFirstItem(query) as OrganizationAddressPostal
-    })
-
-    const addressPostalItem: ComputedRef<AddressPostal|null> = computed(() => {
-      return organizationAddressPostalItem.value?.addressPostal || null
-    })
-
-    const updateAddressFromMap = (addressPostal: AddressPostal) => {
-      repositoryHelper.persist(AddressPostal, addressPostal)
-    }
-
-    const getAutoCompleteAddressItem = computed(() => {
-      if(addressPostalItem.value?.addressCity || addressPostalItem.value?.postalCode)
-        return {id:0, city: addressPostalItem.value?.addressCity, postcode: addressPostalItem.value?.postalCode}
-      return {}
-    })
-
-    const {countries, fetchState: countriesFetchingState} = new UseCountry().getAll()
-
-    const {searchFunction: addressSearch, updateCpAddress} = new UseAddressPostal().invoke()
-
-    const {getPhysicalByFullName: accessSearch} = new UseAccess().invoke()
-
-    const {updateAccessAddress} = accessOwnerResearch($dataProvider, organizationAddressPostalItem, addressPostalItem)
-
-    const getIdFromUri = (uri: string) => {
-      return ModelsUtils.extractIdFromUri(uri)
-    }
-
-    /** Computed properties needs to be returned as functions until nuxt3 : https://github.com/nuxt-community/composition-api/issues/207 **/
+    const {getItemToEdit} = new UseDataUtils().invoke()
+    const {id, fetchState} = getItemToEdit(OrganizationAddressPostal)
     return {
-      model: OrganizationAddressPostal,
-      query: () => query,
       id,
-      organizationAddressPostalFetching,
-      panel: 0,
-      addressPostalItem: () => addressPostalItem,
-      countries,
-      countriesFetchingState,
-      addressSearch,
-      getIdFromUri,
-      getAutoCompleteAddressItem,
-      accessSearch,
-      updateAccessAddress,
-      updateAddressFromMap,
-      updateCpAddress
-    }
-  },
-  beforeDestroy() {
-    repositoryHelper.cleanRepository(OrganizationAddressPostal)
-    repositoryHelper.cleanRepository(Country)
-    repositoryHelper.cleanRepository(AddressPostal)
-  },
-})
-
-/**
- * Fonction permettant la mise à jour des champs de l'adresse suivant une adresse d'un Access
- * @param $dataProvider
- * @param organizationAddressPostalItem
- * @param addressItem
- */
-function accessOwnerResearch($dataProvider:DataProvider, organizationAddressPostalItem:ComputedRef<OrganizationAddressPostal>, addressItem:ComputedRef<AddressPostal|null>){
-  const updateAccessAddress = async (accessId: number) =>{
-    const response = await $dataProvider.invoke({
-      type: QUERY_TYPE.DEFAULT,
-      url: `api/access_addresses`,
-      id:accessId
-    })
-
-    //On ne conserve que l'adresse principale
-    const principalPersonalAddress = response.data.person.personAddressPostal.filter((personAddress: AnyJson) => {
-      return personAddress.type === 'ADDRESS_PRINCIPAL'
-    })
-
-    if(principalPersonalAddress.length > 0){
-      const personalAddress = principalPersonalAddress.pop()
-
-      //On créer la nouvelle adresse et on initialise les champs restants...
-      const addressPostal:AddressPostal = new AddressPostal(personalAddress.addressPostal)
-      addressPostal.addressOwner = `${response.data.person.name} ${response.data.person.givenName}`
-      addressPostal['@id'] = ''
-
-      if(addressItem.value)
-        addressPostal.id = addressItem.value.id
-
-      //On l'associe à l'OrganizationAddressPostal qui est éditée, et on persist
-      organizationAddressPostalItem.value.addressPostal = addressPostal
-      repositoryHelper.persist(OrganizationAddressPostal, organizationAddressPostalItem.value)
+      fetchState
     }
   }
-
-  return {
-    updateAccessAddress
-  }
-}
-
+})
 </script>
-
-<style>
-  .toolbarForm .v-toolbar__content{
-    padding-left: 0 !important;
-  }
-  .toolbarForm .v-toolbar__title .v-icon{
-    height: 46px;
-    width: 46px;
-  }
-
-</style>

pages/organization/address/new.vue

@@ -0,0 +1,35 @@
+<!-- Page de détails d'une adresse postale -->
+<template>
+  <main>
+    <v-skeleton-loader
+      v-if="loading"
+      type="text"
+    />
+    <FormOrganizationAddress :id="item.id" v-else></FormOrganizationAddress>
+  </main>
+</template>
+
+<script lang="ts">
+import {defineComponent} from '@nuxtjs/composition-api'
+import { OrganizationAddressPostal } from '~/models/Organization/OrganizationAddressPostal'
+import {AddressPostal} from "~/models/Core/AddressPostal";
+import {UseDataUtils} from "~/use/data/useDataUtils";
+
+export default defineComponent({
+  name: 'NewOrganizationAddress',
+  setup () {
+    const {createItem} = new UseDataUtils().invoke()
+    const {create, loading, item} = createItem()
+
+    if(process.client){
+      const itemToCreate: OrganizationAddressPostal = new OrganizationAddressPostal({addressPostal: new AddressPostal()})
+      create(itemToCreate, OrganizationAddressPostal)
+    }
+
+    return {
+      loading,
+      item
+    }
+  }
+})
+</script>

pages/organization/contact_points/_id.vue

@@ -1,135 +1,32 @@
-<!-- Page de détails d'un point de contact -->
+<!-- Page de détails d'un point de contact (Edit mode) -->
 
 <template>
   <main>
     <v-skeleton-loader
-      v-if="loading"
+      v-if="fetchState.pending"
       type="text"
     />
-    <LayoutContainer v-else>
-      <v-card class="margin-bottom-20">
-        <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">
-              fa-globe-europe
-            </v-icon>
-            {{ $t('contact_point') }}
-          </v-toolbar-title>
-        </v-toolbar>
-
-        <UiForm :id="id" :model="model" :query="query()">
-          <template v-slot:form.input="{entry, updateRepository}">
-            <v-skeleton-loader
-              v-if="loading"
-              type="text"
-            />
-            <v-container v-else fluid class="container">
-              <v-row>
-                <v-col cols="12" sm="12">
-                  <UiInputEnum
-                    field="contactType"
-                    label="contactpoint_type"
-                    :data="entry['contactType']"
-                    enum-type="contact_point_type"
-                    @update="updateRepository"
-                  />
-                </v-col>
-                <v-col cols="12" sm="6">
-                  <UiInputEmail
-                    field="email"
-                    label="email"
-                    :data="entry['email']"
-                    @update="updateRepository"
-                  />
-                </v-col>
-                <v-col cols="12" sm="6">
-                  <UiInputPhone
-                    field="telphone"
-                    :label="$t('telphone')"
-                    :data="entry['telphone']"
-                    @update="updateRepository"
-                  />
-                </v-col>
-                <v-col cols="12" sm="6">
-                  <UiInputPhone
-                    field="faxNumber"
-                    :label="$t('faxNumber')"
-                    :data="entry['faxNumber']"
-                    @update="updateRepository"
-                  />
-                </v-col>
-                <v-col cols="12" sm="6">
-                  <UiInputPhone
-                    field="mobilPhone"
-                    :label="$t('mobilPhone')"
-                    :data="entry['mobilPhone']"
-                    @update="updateRepository"
-                  />
-                </v-col>
-              </v-row>
-            </v-container>
-          </template>
-
-          <template v-slot:form.button>
-            <NuxtLink :to="{ path: '/organization', query: { accordion: 'contact_point' }}" class="no-decoration">
-              <v-btn class="mr-4 ot_light_grey ot_grey--text">
-                {{ $t('back') }}
-              </v-btn>
-            </NuxtLink>
-          </template>
-        </UiForm>
-      </v-card>
-    </LayoutContainer>
+    <FormOrganizationContactPoint :id="id" v-else></FormOrganizationContactPoint>
   </main>
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, useFetch, ref, Ref } from '@nuxtjs/composition-api'
-import { Repository as VuexRepository } from '@vuex-orm/core/dist/src/repository/Repository'
-import { Model, Query } from '@vuex-orm/core'
-import { QUERY_TYPE } from '~/types/enums'
-import { repositoryHelper } from '~/services/store/repository'
+import { defineComponent } from '@nuxtjs/composition-api'
 import { ContactPoint } from '~/models/Core/ContactPoint'
-import {OrganizationAddressPostal} from "~/models/Organization/OrganizationAddressPostal";
-import {Country} from "~/models/Core/Country";
+import {UseDataUtils} from "~/use/data/useDataUtils";
 
 export default defineComponent({
-  name: 'ContactPoint',
+  name: 'EditContactPoint',
   setup () {
-    const { route, $dataProvider } = useContext()
-    const id: number = parseInt(route.value.params.id)
-    const loading: Ref<boolean> = ref(true)
-
-    const repository: VuexRepository<Model> = repositoryHelper.getRepository(ContactPoint)
-    const query: Query = repository.query()
-
-    useFetch(async () => {
-      await $dataProvider.invoke({
-        type: QUERY_TYPE.MODEL,
-        model: ContactPoint,
-        id
-      })
-      loading.value = false
-    })
+    const {getItemToEdit} = new UseDataUtils().invoke()
+    const {id, fetchState} = getItemToEdit(ContactPoint)
 
     return {
-      model: ContactPoint,
-      query: () => query,
       id,
-      loading
+      fetchState
     }
-  },
-  beforeDestroy() {
-    repositoryHelper.cleanRepository(ContactPoint)
-  },
+  }
 })
 </script>
 <style>
-  .toolbarForm .v-toolbar__content{
-    padding-left: 0 !important;
-  }
-  .toolbarForm .v-toolbar__title .v-icon{
-    height: 46px;
-    width: 46px;
-  }
 </style>

pages/organization/contact_points/new.vue

@@ -0,0 +1,36 @@
+<!-- Page de détails d'une adresse postale -->
+<template>
+  <main>
+    <v-skeleton-loader
+      v-if="loading"
+      type="text"
+    />
+    <FormOrganizationContactPoint :id="item.id" v-else></FormOrganizationContactPoint>
+  </main>
+</template>
+
+<script lang="ts">
+import {defineComponent, useStore} from '@nuxtjs/composition-api'
+import {ContactPoint} from "~/models/Core/ContactPoint";
+import {UseDataUtils} from "~/use/data/useDataUtils";
+import {Store} from "vuex";
+
+export default defineComponent({
+  name: 'NewContactPoint',
+  setup (){
+    const store:Store<any> = useStore()
+    const {createItem} = new UseDataUtils().invoke()
+    const {create, loading, item} = createItem()
+
+    if(process.client){
+      const itemToCreate: ContactPoint = new ContactPoint({organization:[`/api/organizations/${store.state.profile.organization.id}`]})
+      create(itemToCreate, ContactPoint)
+    }
+
+    return {
+      loading,
+      item
+    }
+  }
+})
+</script>