fix(front) : usePaginatedList — garde anti-reponse periemee, expose error, durcit buildQuery
- ajoute un jeton de sequence dans fetch() : ignore les reponses arrivees apres une requete plus recente (race page/tri/filtres sur reseau lent) - expose une ref error pour distinguer liste vide d'un echec reseau/403 (isEmpty ne suffit pas a lever l'ambiguite) - buildQuery : cles reservees (page/itemsPerPage/order) assignees en dernier pour qu'un filtre homonyme ne les ecrase pas - corrige le commentaire trompeur sur extraQuery (snapshot statique) - nettoie le test hors-borne qui testait en realite le cas standard + ajoute tests error/reset-error/race
This commit is contained in:
@@ -63,8 +63,11 @@ export interface UsePaginatedListOptions<F extends PaginatedListFilters = Pagina
|
||||
defaultSort?: SortSpec | null
|
||||
/**
|
||||
* Query params additionnels propres a la ressource (ex : `includeDeleted=true`,
|
||||
* `groups[]=foo`) injectes a chaque requete. Reactifs si une ref / computed
|
||||
* est fournie via `refresh()` apres mutation.
|
||||
* `groups[]=foo`) injectes a chaque requete. **Snapshot statique** : l'objet
|
||||
* est lu tel quel a chaque `fetch()`, ses valeurs ne sont pas deballees. Ne
|
||||
* pas y passer de `ref` / `computed` (elles seraient serialisees comme objet,
|
||||
* pas comme valeur) — pour un extra reactif, muter les filtres via
|
||||
* `setFilters` ou ouvrir un ticket pour un support `MaybeRefOrGetter`.
|
||||
*/
|
||||
extraQuery?: Record<string, unknown>
|
||||
}
|
||||
@@ -84,6 +87,14 @@ export interface UsePaginatedListReturn<T, F extends PaginatedListFilters = Pagi
|
||||
totalPages: Ref<number>
|
||||
/** Indicateur de chargement (vrai pendant `fetch()`). */
|
||||
loading: Ref<boolean>
|
||||
/**
|
||||
* Derniere erreur de `fetch()` (null si le dernier appel a abouti).
|
||||
* Permet a la page de distinguer « liste reellement vide » d'un echec
|
||||
* reseau / 403 : sans ca, `isEmpty` confond les deux cas (la liste
|
||||
* tombe a 0 item dans les deux situations). La page decide de l'UX
|
||||
* (bandeau, bouton reessayer) — le composable ne toaste pas.
|
||||
*/
|
||||
error: Ref<unknown | null>
|
||||
/** Vrai apres au moins un fetch reussi avec 0 item. */
|
||||
isEmpty: Ref<boolean>
|
||||
/** Vrai si la collection tient en une seule page (totalPages <= 1). */
|
||||
@@ -150,6 +161,13 @@ export function usePaginatedList<T, F extends PaginatedListFilters = PaginatedLi
|
||||
const itemsPerPage = ref(defaultItemsPerPage)
|
||||
const itemsPerPageOptions = ref(options.itemsPerPageOptions ?? [10, 25, 50])
|
||||
const loading = ref(false)
|
||||
const error = ref<unknown | null>(null)
|
||||
// Jeton de sequence : incremente a chaque `fetch()`. Une reponse dont
|
||||
// le jeton n'est plus le dernier est ignoree (protection contre les
|
||||
// reponses periemes quand l'utilisateur enchaine page / tri / filtres
|
||||
// plus vite que le reseau ne repond — sinon la derniere reponse
|
||||
// *arrivee* gagnerait au lieu de la derniere *demandee*).
|
||||
let fetchToken = 0
|
||||
// `hasFetched` evite que `isEmpty` retourne `true` avant le premier
|
||||
// chargement (etat initial = 0 items mais on ne sait pas encore si la
|
||||
// ressource est vide ou en cours de chargement). Un appel reseau au
|
||||
@@ -166,23 +184,26 @@ export function usePaginatedList<T, F extends PaginatedListFilters = PaginatedLi
|
||||
const isSinglePage = computed(() => totalPages.value <= 1)
|
||||
|
||||
/**
|
||||
* Construit l'objet query envoye a l'API : pagination + tri + filtres +
|
||||
* extras propres a la ressource. Les filtres `null`/`undefined`/'' sont
|
||||
* elimines pour ne pas polluer l'URL.
|
||||
* Construit l'objet query envoye a l'API : extras + filtres, puis
|
||||
* pagination + tri. Les cles reservees (`page`, `itemsPerPage`,
|
||||
* `order[...]`) sont assignees **en dernier** pour qu'un filtre ou un
|
||||
* extra portant le meme nom ne puisse pas ecraser silencieusement la
|
||||
* pagination. Les filtres `null`/`undefined`/'' sont elimines pour ne
|
||||
* pas polluer l'URL.
|
||||
*/
|
||||
function buildQuery(): Record<string, unknown> {
|
||||
const query: Record<string, unknown> = {
|
||||
page: currentPage.value,
|
||||
itemsPerPage: itemsPerPage.value,
|
||||
}
|
||||
if (sort.value) {
|
||||
// Format API Platform : ?order[field]=asc
|
||||
query[`order[${sort.value.field}]`] = sort.value.direction
|
||||
}
|
||||
const query: Record<string, unknown> = {}
|
||||
if (options.extraQuery) {
|
||||
Object.assign(query, options.extraQuery)
|
||||
}
|
||||
Object.assign(query, filters.value)
|
||||
// Cles reservees en dernier : priorite a la pagination/au tri.
|
||||
query.page = currentPage.value
|
||||
query.itemsPerPage = itemsPerPage.value
|
||||
if (sort.value) {
|
||||
// Format API Platform : ?order[field]=asc
|
||||
query[`order[${sort.value.field}]`] = sort.value.direction
|
||||
}
|
||||
return compactQuery(query)
|
||||
}
|
||||
|
||||
@@ -194,13 +215,18 @@ export function usePaginatedList<T, F extends PaginatedListFilters = PaginatedLi
|
||||
* pour eviter une boucle si l'API renvoie des resultats incoherents.
|
||||
*/
|
||||
async function fetch(): Promise<void> {
|
||||
const token = ++fetchToken
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const data = await api.get<HydraCollection<T>>(
|
||||
options.url,
|
||||
buildQuery(),
|
||||
{ toast: false, headers: JSONLD_HEADERS },
|
||||
)
|
||||
// Une requete plus recente a ete lancee entre-temps : on jette
|
||||
// cette reponse pour ne pas ecraser des donnees plus fraiches.
|
||||
if (token !== fetchToken) return
|
||||
items.value = data.member ?? []
|
||||
totalItems.value = data.totalItems ?? 0
|
||||
|
||||
@@ -220,20 +246,30 @@ export function usePaginatedList<T, F extends PaginatedListFilters = PaginatedLi
|
||||
buildQuery(),
|
||||
{ toast: false, headers: JSONLD_HEADERS },
|
||||
)
|
||||
// Meme garde apres le refetch hors-borne.
|
||||
if (token !== fetchToken) return
|
||||
items.value = data2.member ?? []
|
||||
totalItems.value = data2.totalItems ?? 0
|
||||
}
|
||||
|
||||
hasFetched.value = true
|
||||
} catch {
|
||||
} catch (e) {
|
||||
// Reponse periemee : ne pas toucher au state, une requete plus
|
||||
// recente est en cours et fera foi.
|
||||
if (token !== fetchToken) return
|
||||
// Swallow volontaire : on remet la liste a vide pour ne pas
|
||||
// afficher de donnees stale. Le composant parent decide de
|
||||
// l'UX (toast / message d'erreur) — pas d'a-priori ici.
|
||||
// afficher de donnees stale, et on expose l'erreur pour que la
|
||||
// page distingue « vide » d'« echec ». Le composant parent
|
||||
// decide de l'UX (toast / message d'erreur) — pas d'a-priori ici.
|
||||
error.value = e
|
||||
items.value = []
|
||||
totalItems.value = 0
|
||||
hasFetched.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
// Seule la requete la plus recente eteint le spinner : une
|
||||
// reponse periemee ne doit pas le couper alors qu'un fetch plus
|
||||
// recent est encore en vol.
|
||||
if (token === fetchToken) loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -310,6 +346,7 @@ export function usePaginatedList<T, F extends PaginatedListFilters = PaginatedLi
|
||||
itemsPerPageOptions,
|
||||
totalPages,
|
||||
loading,
|
||||
error,
|
||||
isEmpty,
|
||||
isSinglePage,
|
||||
filters,
|
||||
|
||||
Reference in New Issue
Block a user