feat(front) : add usePaginatedList composable + paginate all admin lists via MalioDataTable
Pull Request — Quality gate / Backend (PHP CS + PHPUnit) (pull_request) Successful in 2m1s
Pull Request — Quality gate / Frontend (lint + Vitest + build) (pull_request) Successful in 1m7s

- frontend/shared/composables/usePaginatedList.ts : composable generique de liste paginee serveur (Hydra), branche directement sur MalioDataTable
- 22 tests Vitest (navigation, bornes, parse Hydra, hors-borne, reset, filtres, tri, swallow erreur)
- Migration des pages admin existantes : sites, users, roles, categories
- Refactor de useCategoriesAdmin pour ne porter que le referentiel CategoryType (charge en une fois via ?pagination=false)
- Etat page/tri/filtre 100% local dans le composable (respect regle ABSOLUE n°6 — pas de persistance URL)
- Section dediee dans .claude/rules/frontend.md documentant le pattern obligatoire pour toute nouvelle liste

ERP-73 — volet front de la pagination, depend du back ERP-72 deja merge.
This commit is contained in:
2026-05-29 16:40:00 +02:00
parent 0c6919201e
commit 43c3220873
9 changed files with 899 additions and 272 deletions
+21 -20
View File
@@ -2,14 +2,19 @@
<div>
<PageHeader>{{ t('admin.users.title') }}</PageHeader>
<!-- Table des utilisateurs -->
<!-- Table des utilisateurs pagination serveur via usePaginatedList (#73). -->
<MalioDataTable
:columns="columns"
:items="userItems"
:total-items="users.length"
:total-items="totalItems"
:page="currentPage"
:per-page="itemsPerPage"
:per-page-options="itemsPerPageOptions"
:row-clickable="canManage"
:empty-message="t('admin.users.noUsers')"
@row-click="onRowClick"
@update:page="goToPage"
@update:per-page="setItemsPerPage"
>
<template #cell-admin="{ item }">
<span
@@ -34,15 +39,26 @@
import type { UserListItem } from '~/shared/types/rbac'
const { t } = useI18n()
const api = useApi()
const { can } = usePermissions()
useHead({ title: t('admin.users.title') })
const canManage = computed(() => can('core.users.manage'))
const users = ref<UserListItem[]>([])
const loading = ref(false)
// Pagination serveur via le composable partage (#73). Le payload `users`
// reste leger (pas de detail RBAC dans la liste — cf. commentaire colonne
// "Sites" plus bas) ce qui rend la pagination 10/25/50 par page confortable.
const {
items: users,
totalItems,
currentPage,
itemsPerPage,
itemsPerPageOptions,
fetch: loadUsers,
goToPage,
setItemsPerPage,
} = usePaginatedList<UserListItem>({ url: '/users' })
const drawerOpen = ref(false)
const selectedUser = ref<UserListItem | null>(null)
@@ -67,21 +83,6 @@ const userItems = computed(() =>
})),
)
async function loadUsers() {
loading.value = true
try {
const usersData = await api.get<{ member: UserListItem[] }>('/users', {}, { toast: false })
users.value = usersData.member
} catch {
// Reset sur echec pour ne pas afficher de donnees stale (ancienne
// requete reussie avant une perte reseau ou 403). Pas de toast par
// design ici : on laisse la liste vide parler d'elle-meme.
users.value = []
} finally {
loading.value = false
}
}
function getUserById(id: number): UserListItem | undefined {
return users.value.find(u => u.id === id)
}