POC to implement reactivity in fetchCollection with the new Query class

.eslintrc.cjs

@@ -35,6 +35,7 @@ module.exports = {
   },
   globals: {
     useRuntimeConfig: 'readonly',
+    useAsyncData: 'readonly',
     navigateTo: 'readonly',
     computed: 'readonly',
     ref: 'readonly',
@@ -45,5 +46,6 @@ module.exports = {
     onMounted: 'readonly',
     onUnmounted: 'readonly',
     watch: 'readonly',
+    useRepo: 'readonly',
   },
 }

.gitignore

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

pages/poc.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="pa-8">
-    <h1>POC</h1>
-
-    <v-text-field v-model="searchFilter" />
-
-    <ul v-if="!pending && data !== null">
-      <li v-for="organization in data.items" :key="organization.id">
-        {{ organization.name }}
-      </li>
-    </ul>
-    <span v-else>Loading...</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useEntityFetch } from '~/composables/data/useEntityFetch'
-import Query from '~/services/data/Query'
-import Search from '~/services/data/Filters/Search'
-import Subdomain from '~/models/Organization/Subdomain'
-
-const { fetchCollection } = useEntityFetch()
-
-const query = new Query()
-
-const searchFilter = ref('2io')
-
-query.addWhere(new Search('subdomain', searchFilter.value))
-
-const { data, pending } = fetchCollection(Subdomain, null, query)
-</script>
-
-<style scoped lang="scss">
-h1 {
-  color: rgb(var(--v-theme-primary));
-}
-</style>

services/data/Filters/Search.ts

@@ -8,7 +8,7 @@ import { SEARCH_STRATEGY } from '~/types/enum/data'
  */
 export default class Search implements ApiFilter {
   field: string
-  value: string | number
+  value: Ref<string | number>
   private mode: string
 
   /**
@@ -20,7 +20,7 @@ export default class Search implements ApiFilter {
    */
   constructor(
     field: string,
-    value: string | number,
+    value: Ref<string | number>,
     mode: SEARCH_STRATEGY = SEARCH_STRATEGY.EXACT,
   ) {
     this.field = field
@@ -31,10 +31,10 @@ export default class Search implements ApiFilter {
   public applyToPiniaOrmQuery(
     query: PiniaOrmQuery<ApiResource>,
   ): PiniaOrmQuery<ApiResource> {
-    return query.where(this.field, this.value)
+    return query.where(this.field, this.value.value)
   }
 
   public getApiQueryPart(): string {
-    return `${this.field}[]=${this.value}`
+    return `${this.field}[]=${this.value.value}`
   }
 }

services/data/Query.ts

@@ -44,7 +44,7 @@ export default class Query {
       const queryPart = filter.getApiQueryPart()
       queryParts.push(queryPart)
     })
-    console.log(queryParts)
+    // console.log(queryParts)
     return queryParts.join('&')
   }
 
@@ -60,7 +60,7 @@ export default class Query {
     this.filters.forEach((filter) => {
       query = filter.applyToPiniaOrmQuery(query)
     })
-    console.log(query)
+    // console.log(query)
     return query
   }
 }

services/data/entityManager.ts

@@ -1,16 +1,11 @@
 import { Query as PiniaOrmQuery, Repository } from 'pinia-orm'
-import type { Collection as PiniaOrmCollection } from 'pinia-orm'
 import { v4 as uuid4 } from 'uuid'
 import * as _ from 'lodash-es'
 import ApiRequestService from './apiRequestService'
 import UrlUtils from '~/services/utils/urlUtils'
 import ApiModel from '~/models/ApiModel'
 import ApiResource from '~/models/ApiResource'
-import type {
-  AnyJson,
-  AssociativeArray,
-  Collection,
-} from '~/types/data.d'
+import type { AnyJson, AssociativeArray, Collection } from '~/types/data.d'
 import models from '~/models/models'
 import HydraNormalizer from '~/services/data/normalizer/hydraNormalizer'
 import Query from '~/services/data/Query'
@@ -181,6 +176,7 @@ class EntityManager {
   ): Promise<ApiResource> {
     // If the model instance is already in the store and forceRefresh is false, return the object in store
     if (!forceRefresh) {
+      // TODO: est-ce qu'il y a vraiment des situatiosn où on appellera cette méthode sans le forceRefresh?
       const item = this.find(model, id)
       if (item && typeof item !== 'undefined') {
         return item
@@ -233,7 +229,7 @@ class EntityManager {
     let piniaOrmQuery = this.getQuery(model)
     piniaOrmQuery = query.applyToPiniaOrmQuery(piniaOrmQuery)
 
-    const items = piniaOrmQuery.get()
+    const items = computed(() => piniaOrmQuery.get())
 
     return {
       items,

types/data.d.ts

@@ -45,14 +45,14 @@ interface Pagination {
 }
 
 interface Collection {
-  items: PiniaOrmCollection<ApiResource>
+  items: ComputedRef<PiniaOrmCollection<ApiResource>>
   pagination: Pagination
   totalItems: number | undefined
 }
 
 interface ApiFilter {
   field: string
-  value: string | number
+  value: Ref<string | number>
   applyToPiniaOrmQuery: (query: PiniaOrmQuery<ApiResource>) => PiniaOrmQuery<ApiResource>
   getApiQueryPart: () => string
 }