l'id doit être renseigné et le loading est global en getItem

composables/data/useDataUtils.ts

@@ -15,11 +15,10 @@ export function useDataUtils($dataProvider: DataProvider){
 
   /**
    * recherche l'item a éditer et alimente le dataprovider
-   * @param route
+   * @param id
    * @param model
    */
-  function getItemToEdit(route: Ref, model: typeof Model){
-    const id = parseInt(route.value.params.id)
+  function getItemToEdit(id: string|number, model: typeof Model){
     if(!id){
       throw new Error('id must be exist')
     }
@@ -28,12 +27,12 @@ export function useDataUtils($dataProvider: DataProvider){
       await $dataProvider.invoke({
         type: QUERY_TYPE.MODEL,
         model,
-        id
+        id,
+        showProgress: process.browser
       })
     })
     return {
-      fetchState,
-      id
+      fetchState
     }
   }
 

pages/organization/address/_id.vue

@@ -1,11 +1,7 @@
 <!-- Page de détails d'une adresse postale -->
 <template>
   <main>
-    <v-skeleton-loader
-      v-if="fetchState.pending"
-      type="text"
-    />
-    <FormOrganizationAddress :id="id" v-else></FormOrganizationAddress>
+    <FormOrganizationAddress :id="id" v-if="!fetchState.pending"></FormOrganizationAddress>
   </main>
 </template>
 
@@ -19,7 +15,8 @@ export default defineComponent({
   setup () {
     const {$dataProvider, route} = useContext()
     const {getItemToEdit} = useDataUtils($dataProvider)
-    const {id, fetchState} = getItemToEdit(route, OrganizationAddressPostal)
+    const id = route.value.params.id
+    const {fetchState} = getItemToEdit(id, OrganizationAddressPostal)
     return {
       id,
       fetchState

pages/organization/bank_account/_id.vue

@@ -2,11 +2,7 @@
 
 <template>
   <main>
-    <v-skeleton-loader
-      v-if="fetchState.pending"
-      type="text"
-    />
-    <FormOrganizationBankAccount :id="id" v-else></FormOrganizationBankAccount>
+    <FormOrganizationBankAccount :id="id" v-if="!fetchState.pending"></FormOrganizationBankAccount>
   </main>
 </template>
 
@@ -14,14 +10,15 @@
 import {defineComponent, useContext} from '@nuxtjs/composition-api'
 import {useDataUtils} from "~/composables/data/useDataUtils";
 import {BankAccount} from "~/models/Core/BankAccount";
+import {OrganizationAddressPostal} from "~/models/Organization/OrganizationAddressPostal";
 
 export default defineComponent({
   name: 'EditBankAccount',
   setup () {
     const {$dataProvider, route} = useContext()
     const {getItemToEdit} = useDataUtils($dataProvider)
-    const {id, fetchState} = getItemToEdit(route, BankAccount)
-
+    const id = route.value.params.id
+    const {fetchState} = getItemToEdit(id, BankAccount)
     return {
       id,
       fetchState

pages/organization/contact_points/_id.vue

@@ -2,11 +2,7 @@
 
 <template>
   <main>
-    <v-skeleton-loader
-      v-if="fetchState.pending"
-      type="text"
-    />
-    <FormOrganizationContactPoint :id="id" v-else></FormOrganizationContactPoint>
+    <FormOrganizationContactPoint :id="id" v-if="!fetchState.pending"></FormOrganizationContactPoint>
   </main>
 </template>
 
@@ -14,14 +10,15 @@
 import {defineComponent, useContext} from '@nuxtjs/composition-api'
 import { ContactPoint } from '~/models/Core/ContactPoint'
 import {useDataUtils} from "~/composables/data/useDataUtils";
+import {BankAccount} from "~/models/Core/BankAccount";
 
 export default defineComponent({
   name: 'EditContactPoint',
   setup () {
     const {$dataProvider, route} = useContext()
     const {getItemToEdit} = useDataUtils($dataProvider)
-    const {id, fetchState} = getItemToEdit(route, ContactPoint)
-
+    const id = route.value.params.id
+    const {fetchState} = getItemToEdit(id, ContactPoint)
     return {
       id,
       fetchState