[ERP-73] Paginer toutes les listes côté front + composable de liste paginée réutilisable (#30)
Auto Tag Develop / tag (push) Successful in 8s

## Contexte
Ticket Lesstime : #73 (id 492) — volet front de la pagination (groupe Transversal).
Dépend du back ERP-72 (déjà mergé sur develop). Pas de spec docs/specs ; référence = description #73 + .claude/rules/frontend.md.

## Implémentation
- Composable réutilisable `usePaginatedList` (`frontend/shared/composables/`) générique, branché directement sur `MalioDataTable` (props page/perPage/totalItems + events update:page/update:per-page).
- Force `Accept: application/ld+json` (sans Accept, API Platform renvoie un tableau plat sans pagination).
- Migration des pages admin existantes (M0 catégories, Sites, Utilisateurs, Rôles) vers le composable.
- Refactor de `useCategoriesAdmin` : ne porte plus la liste paginée (déplacée vers `usePaginatedList<Category>` dans la page) et concentre son rôle sur le référentiel `CategoryType` (chargé en une fois via `?pagination=false`, échappatoire prévue par `pagination_client_enabled: true` côté back).
- Cas limites couverts : liste vide (pas de contrôle pagination affiché), page hors borne après filtre (retombe sur la dernière page valide), items/page 10/25/50, reset filtres/tri, swallow erreur réseau.
- Pattern « liste paginée » documenté dans `.claude/rules/frontend.md` (section dédiée + exemple).

## Décision URL
Le ticket suggérait « idéalement page/tri/filtre dans l'URL » — arbitré explicitement par Tristan en faveur de la règle ABSOLUE n°6 du CLAUDE.md (state local uniquement, jamais persisté dans l'URL). Aucun reflet URL implémenté ; comportement homogène entre toutes les listes migrées.

## Tests
- `make nuxt-test` : 101/101 OK (22 nouveaux tests sur `usePaginatedList`, 6 anciens tests `useCategoriesAdmin.fetchAll` retirés en cohérence avec la refacto).
- Vérification manuelle dans le navigateur (`make dev-nuxt`) : Sites, Utilisateurs, Rôles, Catégories affichent le sélecteur `Lignes : 10` et les boutons Prev/Next ; audit-log (non migré, composable spécifique) intact avec ses 3 pages.
- Aucun test E2E ajouté (règle d'or projet).
- Pre-commit hook : ESLint + PHPUnit 322/322 OK.

## Hors périmètre
- `audit-log.vue` non migré : composable `useAuditLog` spécifique (cache partagé page/timeline, filtres complexes, persistance URL préexistante). Refactor risqué et net-zéro pour ERP-73.
- M1 répertoire clients : pas encore livré sur develop (seules les specs sont mergées via #23). Le futur écran consommera `usePaginatedList` dès sa création.

Reviewed-on: #30
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #30.
This commit is contained in:
2026-06-01 09:54:54 +00:00
committed by Autin
parent 0c6919201e
commit ad20d1f4c9
9 changed files with 971 additions and 272 deletions
+18 -23
View File
@@ -13,14 +13,19 @@
</template>
</PageHeader>
<!-- Table des roles -->
<!-- Table des roles pagination serveur via usePaginatedList (#73). -->
<MalioDataTable
:columns="columns"
:items="roleItems"
:total-items="roles.length"
:total-items="totalItems"
:page="currentPage"
:per-page="itemsPerPage"
:per-page-options="itemsPerPageOptions"
:row-clickable="canManage"
:empty-message="t('admin.roles.noRoles')"
@row-click="onRowClick"
@update:page="goToPage"
@update:per-page="setItemsPerPage"
>
<template #cell-code="{ item }">
<span class="font-mono text-xs">{{ item.code }}</span>
@@ -66,8 +71,17 @@ const canManage = computed(() => can('core.roles.manage'))
useHead({ title: t('admin.roles.title') })
const roles = ref<Role[]>([])
const loading = ref(false)
// Pagination serveur via le composable partage (#73).
const {
items: roles,
totalItems,
currentPage,
itemsPerPage,
itemsPerPageOptions,
fetch: loadRoles,
goToPage,
setItemsPerPage,
} = usePaginatedList<Role>({ url: '/roles' })
const columns = [
{ key: 'label', label: t('admin.roles.table.label') },
@@ -102,25 +116,6 @@ const deleteModalOpen = ref(false)
const roleToDelete = ref<Role | null>(null)
const deleting = ref(false)
// Charger la liste des roles
async function loadRoles() {
loading.value = true
try {
const data = await api.get<{ member: Role[] }>(
'/roles',
{},
{ toast: false },
)
roles.value = data.member
} catch {
// Reset sur echec pour ne pas afficher de donnees stale (ancienne
// requete reussie avant une perte reseau ou 403).
roles.value = []
} finally {
loading.value = false
}
}
function openCreateDrawer() {
selectedRole.value = null
drawerOpen.value = true