add tests pages and review fetchCollection return type

.gitignore

@@ -22,5 +22,3 @@ env/local.app.opentalent.fr.key
 yarn.lock
 coverage/
 /.env.*.local
-
-pages/poc.vue

composables/data/useEntityFetch.ts

@@ -16,7 +16,7 @@ interface useEntityFetchReturnType {
     model: typeof ApiResource,
     parent?: ApiResource | null,
     query?: Query | null,
-  ) => AsyncData<Collection | null, Error | null>
+  ) => AsyncData<ComputedRef<Collection> | null, Error | null>
 
   getRef: <T extends ApiResource>(
     model: new () => T,

pages/tests/poc_fetch_collection.vue

@@ -0,0 +1,94 @@
+<!--
+Permet de tester la méthode fetchCollection de nuxt
+et la réactivité de la collection retournée.
+
+Le filtre textuel doit s'appliquer à la liste de résultats quand on clique sur refresh.
+Si on ajoute un nouveau pays, il doit apparaitre dans la liste seulement s'il valide le filtre actif.
+
+Exemple :
+
+1. A l'affichage, je dois avoir la liste des pays
+2. Si je tape "fra" dans le filtre et que je valide, il ne doit rester que la France
+3. Si je créé le pays "francie", il doit s'ajouter à la liste, trié si un OrderBy est actif
+4. Si je créé le pays "mon super pays", il ne doit pas apparaitre.
+
+-->
+
+<template>
+  <div class="pa-8">
+    <h1>POC</h1>
+
+    <div class="d-flex flex-row my-8">
+      <v-text-field v-model="searchFilter" style="max-width: 200px" />
+      <v-btn class="ma-4" @click="refresh">Refresh</v-btn>
+    </div>
+
+    <v-row>
+      <v-col cols="3">
+        <h3>From Entity Manager</h3>
+
+        <div v-if="!pending && data !== null">
+          <div>{{ data.value.totalItems || 0 }} results</div>
+
+          <ul>
+            <li v-for="country in data.value.items" :key="country.id">
+              {{ country.name }}
+            </li>
+          </ul>
+        </div>
+        <span v-else>Loading...</span>
+      </v-col>
+    </v-row>
+
+    <div class="d-flex flex-row">
+      <v-text-field v-model="newVal" class="my-4" style="max-width: 200px" />
+      <v-btn class="ma-4" @click="onAddClick">Add organization</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {useEntityFetch} from '~/composables/data/useEntityFetch'
+import Query from '~/services/data/Query'
+import SearchFilter from '~/services/data/Filters/SearchFilter'
+import {ORDER_BY_DIRECTION, SEARCH_STRATEGY} from '~/types/enum/data'
+import Country from '~/models/Core/Country'
+import OrderBy from "~/services/data/Filters/OrderBy";
+
+const { fetchCollection } = useEntityFetch()
+
+const query = new Query()
+
+const searchFilter = ref('')
+
+const newVal = ref('')
+
+query.add(new SearchFilter('name', searchFilter, SEARCH_STRATEGY.IPARTIAL))
+query.add(new OrderBy('name', ORDER_BY_DIRECTION.ASC))
+
+const { data, pending, refresh } = fetchCollection(Country, null, query)
+
+console.log(data)
+
+let id = 100000000
+const onAddClick = () => {
+  if (!newVal.value) {
+    throw new Error('no val')
+  }
+
+  const country = new Country()
+  country.id = id
+  country.name = newVal.value
+
+  const repo = useRepo(Country)
+  repo.save(country)
+
+  id += 1
+}
+</script>
+
+<style scoped lang="scss">
+h1 {
+  color: rgb(var(--v-theme-primary));
+}
+</style>

services/data/entityManager.ts

@@ -206,7 +206,7 @@ class EntityManager {
     model: typeof ApiResource,
     parent: ApiResource | null,
     query: Query | null = null,
-  ): Promise<Collection> {
+  ): Promise<ComputedRef<Collection>> {
     let url
 
     if (parent !== null) {
@@ -233,18 +233,20 @@ class EntityManager {
       piniaOrmQuery = query.applyToPiniaOrmQuery(piniaOrmQuery)
     }
 
-    const items: ComputedRef<PiniaOrmCollection<ApiResource>> = computed(() => piniaOrmQuery.get())
-
-    return {
-      items,
-      totalItems: apiCollection.metadata.totalItems,
-      pagination: {
-        first: apiCollection.metadata.firstPage || 1,
-        last: apiCollection.metadata.lastPage || 1,
-        next: apiCollection.metadata.nextPage || undefined,
-        previous: apiCollection.metadata.previousPage || undefined,
-      },
-    }
+    return computed(() => {
+      const items: PiniaOrmCollection<ApiResource> = piniaOrmQuery.get()
+
+      return {
+        items,
+        totalItems: apiCollection.metadata.totalItems,
+        pagination: {
+          first: apiCollection.metadata.firstPage || 1,
+          last: apiCollection.metadata.lastPage || 1,
+          next: apiCollection.metadata.nextPage || undefined,
+          previous: apiCollection.metadata.previousPage || undefined,
+        },
+      }
+    })
   }
 
   /**

types/data.d.ts

@@ -45,7 +45,7 @@ interface Pagination {
 }
 
 interface Collection {
-  items: ComputedRef<PiniaOrmCollection<ApiResource>>
+  items: PiniaOrmCollection<ApiResource>
   pagination: Pagination
   totalItems: number | undefined
 }