test cache cleaning on notifications fetching

components/Layout/Header/Notification.vue

@@ -17,11 +17,12 @@
     </v-badge>
   </v-btn>
 
-  <v-tooltip :activator="btn" location="bottom">
+  <v-tooltip v-if="btn !== null" :activator="btn" location="bottom">
     <span>{{ $t('notification') }}</span>
   </v-tooltip>
 
   <v-menu
+      v-if="btn !== null"
       :activator="btn"
       v-model="isOpen"
       location="bottom left"
@@ -122,8 +123,8 @@ const query: ComputedRef<AnyJson> = computed(() => {
   return { 'page': page.value }
 })
 
-
-let { data: collection, pending, refresh } = await fetchCollection(Notification, null, query)
+clearNuxtData('notifications')
+let { data: collection, pending, refresh } = await fetchCollection(Notification, null, query, 'notifications')
 
 /**
  * On récupère les Notifications via le store (sans ça, les mises à jour SSE ne seront pas prises en compte)
@@ -143,7 +144,7 @@ const unreadNotification: ComputedRef<Array<Notification>> = computed(() => {
  * Les metadata dépendront de la dernière valeur du GET lancé
  */
 const pagination: ComputedRef<Pagination> = computed(() => {
-  return collection.value !== null ? collection.value.pagination : {}
+  return !pending.value ? collection.value.pagination : {}
 })
 
 const notificationUrl = UrlUtils.join(runtimeConfig.baseUrlAdminLegacy, 'notifications/list/')

composables/data/useEntityFetch.ts

@@ -3,27 +3,32 @@ import ApiResource from "~/models/ApiResource";
 import {AssociativeArray, Collection} from "~/types/data";
 import {AsyncData} from "#app";
 import {ComputedRef, Ref} from "vue";
+import {v4 as uuid4} from "uuid";
 
 interface useEntityFetchReturnType {
-    fetch: (model: typeof ApiResource, id: number) => AsyncData<ApiResource, ApiResource | true>,
-    fetchCollection: (model: typeof ApiResource, parent?: ApiResource | null, query?: Ref<AssociativeArray>) => AsyncData<Collection, any>
+    fetch: (model: typeof ApiResource, id: number, key?: string | null) => AsyncData<ApiResource, ApiResource | true>,
+    fetchCollection: (model: typeof ApiResource, parent?: ApiResource | null, query?: Ref<AssociativeArray>, key?: string | null) => AsyncData<Collection, any>
     // @ts-ignore
     getRef: <T extends ApiResource>(model: typeof T, id: Ref<number | null>) => ComputedRef<null | T>
 }
 
-
 // TODO: améliorer le typage des fonctions sur le modèle de getRef
 export const useEntityFetch = (lazy: boolean = false): useEntityFetchReturnType => {
     const { em } = useEntityManager()
 
-    const fetch = (model: typeof ApiResource, id: number) => useAsyncData(
-        model.entity + '_' + id,
+    const fetch = (model: typeof ApiResource, id: number, key: string | null = null) => useAsyncData(
+        key ?? (model.entity + '_' + id + '_' + uuid4()),
         () => em.fetch(model, id, true),
         { lazy }
     )
 
-    const fetchCollection = (model: typeof ApiResource, parent: ApiResource | null = null, query: Ref<AssociativeArray> = ref([])) => useAsyncData(
-        model.entity + '_many',
+    const fetchCollection = (
+        model: typeof ApiResource,
+        parent: ApiResource | null = null,
+        query: Ref<AssociativeArray | null> = ref(null),
+        key: string | null = null
+    ) => useAsyncData(
+        key ?? (model.entity + '_many_' + uuid4()),
         () => em.fetchCollection(model, parent, query.value),
         { lazy }
     )