update useEntityFetch and parameters pages

composables/data/useEntityFetch.ts

@@ -5,6 +5,7 @@ import { useEntityManager } from '~/composables/data/useEntityManager'
 import ApiResource from '~/models/ApiResource'
 import type { Collection } from '~/types/data'
 import Query from '~/services/data/Query'
+import type {AsyncDataExecuteOptions, AsyncDataRequestStatus} from "#app/composables/asyncData";
 
 interface useEntityFetchReturnType {
   fetch: (
@@ -16,7 +17,13 @@ interface useEntityFetchReturnType {
     model: typeof ApiResource,
     parent?: ApiResource | null,
     query?: Query | null,
-  ) => AsyncData<ComputedRef<Collection> | null, Error | null>
+  ) => {
+    data: ComputedRef<Collection | null>,
+    pending: Ref<boolean>,
+    refresh: (opts?: AsyncDataExecuteOptions) => Promise<ComputedRef<Collection> | null>,
+    error: Ref<Error | null>,
+    status: Ref<AsyncDataRequestStatus>,
+  }
 
   getRef: <T extends ApiResource>(
     model: new () => T,
@@ -41,13 +48,22 @@ export const useEntityFetch = (
     model: typeof ApiResource,
     parent: ApiResource | null = null,
     query: Query | null = null,
-  ) =>
-    useAsyncData(
+  ) => {
+    const {data, pending, refresh, error, status } = useAsyncData(
       model.entity + '_many_' + uuid4(),
       () => em.fetchCollection(model, parent, query),
-      { lazy, deep: false },
+      {lazy, deep: true},
     )
 
+    return {
+      data: computed(() => data.value !== null ? data.value.value : null),
+      pending,
+      refresh,
+      error,
+      status
+    }
+  }
+
   const getRef = <T extends ApiResource>(
     model: new () => T,
     id: Ref<number | null>,

pages/parameters/attendances.vue

@@ -39,8 +39,8 @@
             <td></td>
           </tr>
         </thead>
-        <tbody v-if="attendanceBookingReasons!.value.items.length > 0">
-          <tr v-for="reason in attendanceBookingReasons!.value.items" :key="reason.id">
+        <tbody v-if="attendanceBookingReasons!.items.length > 0">
+          <tr v-for="reason in attendanceBookingReasons!.items" :key="reason.id">
             <td class="cycle-editable-cell">
               {{ reason.reason }}
             </td>

pages/parameters/education_timings/index.vue

@@ -9,8 +9,8 @@
             <td></td>
           </tr>
         </thead>
-        <tbody v-if="educationTimings!.value.items.length > 0">
-          <tr v-for="timing in educationTimings!.value.items" :key="timing.id">
+        <tbody v-if="educationTimings!.items.length > 0">
+          <tr v-for="timing in educationTimings!.items" :key="timing.id">
             <td class="cycle-editable-cell">
               {{ timing.timing }}
             </td>

pages/parameters/residence_areas/index.vue

@@ -9,8 +9,8 @@
             <td></td>
           </tr>
         </thead>
-        <tbody v-if="residenceAreas!.value.items.length > 0">
-          <tr v-for="residenceArea in residenceAreas!.value.items" :key="residenceArea.id">
+        <tbody v-if="residenceAreas!.items.length > 0">
+          <tr v-for="residenceArea in residenceAreas!.items" :key="residenceArea.id">
             <td class="cycle-editable-cell">
               {{ residenceArea.label }}
             </td>

pages/parameters/teaching.vue

@@ -91,7 +91,7 @@ const orderedCycles: ComputedRef<AnyJson> = computed(() => {
     orderedCycles[enumItem.value] = null
   }
 
-  for (const cycle of cycles.value.value.items) {
+  for (const cycle of cycles.value.items) {
     if (!Object.prototype.hasOwnProperty.call(orderedCycles, cycle.cycleEnum)) {
       console.error('Unknown cycle enum : ' + cycle.cycleEnum)
       continue

pages/parameters/website.vue

@@ -45,10 +45,10 @@
             </div>
             <UiLoadingPanel v-if="subdomainsPending" />
             <div v-else>
-              <v-table v-if="subdomains!.value.items" class="subdomains-table my-2">
+              <v-table v-if="subdomains!.items" class="subdomains-table my-2">
                 <tbody>
                   <tr
-                    v-for="subdomain in subdomains!.value.items"
+                    v-for="subdomain in subdomains!.items"
                     :key="subdomain.id"
                     :title="subdomain.subdomain"
                     :class="
@@ -172,7 +172,7 @@ const { data: subdomains, pending: subdomainsPending } = fetchCollection(
 )
 
 const canAddNewSubdomain: ComputedRef<boolean> = computed(
-  () => subdomains.value !== null && subdomains.value.value.items.length < 3,
+  () => subdomains.value !== null && subdomains.value.items.length < 3,
 )
 
 const goToEditPage = (id: number) => {

pages/tests/poc_fetch_collection.vue

@@ -27,10 +27,10 @@ Exemple :
         <h3>From Entity Manager</h3>
 
         <div v-if="!pending && data !== null">
-          <div>{{ data.value.totalItems || 0 }} results</div>
+          <div>{{ data.totalItems || 0 }} results</div>
 
           <ul>
-            <li v-for="country in data.value.items" :key="country.id">
+            <li v-for="country in data.items" :key="country.id">
               {{ country.name }}
             </li>
           </ul>
@@ -60,7 +60,7 @@ const query = new Query()
 
 const searchFilter = ref('fran')
 
-const newVal = ref('')
+const newVal = ref('fran')
 
 query.add(new SearchFilter('name', searchFilter, SEARCH_STRATEGY.IPARTIAL))
 query.add(new OrderBy('name', ORDER_BY_DIRECTION.ASC))
@@ -68,6 +68,7 @@ query.add(new OrderBy('name', ORDER_BY_DIRECTION.ASC))
 const { data, pending, refresh } = fetchCollection(Country, null, query)
 
 console.log(data)
+// console.log(data.value!.items)
 
 let id = 100000000
 const onAddClick = () => {