From ccd84d6d4a7dd58702add45a39df687b3f00dbb4 Mon Sep 17 00:00:00 2001 From: tristan Date: Tue, 9 Jun 2026 15:02:05 +0200 Subject: [PATCH] =?UTF-8?q?docs(datatable)=20:=20spec=20+=20sandbox=20pagi?= =?UTF-8?q?nation=20aller-=C3=A0-la-page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2026-06-09-datatable-pagination.html | 228 ++++++++++++++++++ ...-06-09-datatable-pagination-goto-design.md | 148 ++++++++++++ 2 files changed, 376 insertions(+) create mode 100644 docs/superpowers/sandboxes/2026-06-09-datatable-pagination.html create mode 100644 docs/superpowers/specs/2026-06-09-datatable-pagination-goto-design.md diff --git a/docs/superpowers/sandboxes/2026-06-09-datatable-pagination.html b/docs/superpowers/sandboxes/2026-06-09-datatable-pagination.html new file mode 100644 index 0000000..516d791 --- /dev/null +++ b/docs/superpowers/sandboxes/2026-06-09-datatable-pagination.html @@ -0,0 +1,228 @@ + + + + + +Sandbox — Pagination DataTable (proposition) + + + +
+

Pagination DataTable — proposition « aller à la page »

+

Maquette interactive pour validation métier. Aucun code définitif — sert à valider le comportement avant développement.

+ +
+

Avant — état actuel existant

+
+
    +
  • Boutons Préc. / numéros / « … » / Suiv. Pour aller loin (ex. page 16 sur 31), il faut cliquer plusieurs fois ou viser un numéro.
    • +
+
+ +
+

Après — proposition nouveau

+ +
+ + +
+ + + +
    +
  • Taper un numéro l'applique après 400 ms (debounce) — seules les valeurs valides 1..N partent en cours de frappe.
    • +
  • Entrée applique immédiatement (court-circuite le debounce).
    • +
  • Valeur > N → on va à la dernière page (clamp). Champ vidé / 0 → on restaure la page courante.
    • +
+ +
+

Journal des « chargements de données » (1 ligne = 1 appel serveur simulé)

+
    +
    +
    + +

    Astuce démo : tape 16 d'un trait → un seul chargement (page 16). Tape lentement 3 … 1 → tu verras un chargement intermédiaire page 3, puis page 31 : c'est l'effet « préfixe valide » expliqué au métier.

    +
    + + + + diff --git a/docs/superpowers/specs/2026-06-09-datatable-pagination-goto-design.md b/docs/superpowers/specs/2026-06-09-datatable-pagination-goto-design.md new file mode 100644 index 0000000..d40edad --- /dev/null +++ b/docs/superpowers/specs/2026-06-09-datatable-pagination-goto-design.md @@ -0,0 +1,148 @@ +# DataTable — pagination « aller à la page » (champ compact) + +**Date :** 2026-06-09 +**Statut :** Validé (maquette à confirmer en atelier métier), prêt pour plan d'implémentation +**Périmètre :** `MalioDataTable` (bloc pagination) uniquement. +**Branche :** `feature/datatable-pagination-goto` (isolée de `develop`) — l'existant (numéros + `…`) reste en place sur `feature/MUI-42` le temps de l'atelier métier. + +## Objectif + +Remplacer la pagination numérotée (`Préc. 1 … 15 16 17 … 31 Suiv.`) par une forme **compacte avec saisie directe du numéro de page** : `‹ Préc. Page [16] / 31 Suiv. ›`. Le client veut pouvoir aller directement à une page en tapant son numéro. + +Maquette de validation métier : `docs/superpowers/sandboxes/2026-06-09-datatable-pagination.html`. + +## Décisions validées + +| Sujet | Décision | +|-------|----------| +| Forme | Compact « Page [input] / N » entre Préc. et Suiv. Les numéros et les `…` sont **supprimés**. | +| Déclenchement | **Temps réel debounced 400 ms** ; **Entrée** applique immédiatement (court-circuite le debounce). Pendant la frappe, on n'applique que les valeurs dans `[1, N]`. | +| Hors limites (Entrée/blur) | **Clamp** : `> N` → page N. Champ vidé / `0` / non numérique → **restaure** la page courante (pas d'émission). | +| Saisie | Chiffres uniquement (`inputmode="numeric"`, non-chiffres retirés à la frappe). | +| Labels Préc./Suiv. | En français (`Préc.` / `Suiv.`) — posés ici car la branche part de `develop`. | +| Contrat | `v-model:page` / `v-model:per-page` inchangé ; `totalPages = ceil(totalItems/perPage)` inchangé. | + +## Conception détaillée + +### 1. Barre de pagination — markup + +**Supprimer** : le computed `visiblePages`, la boucle `v-for` des boutons numérotés, les `…` (`data-test="page-N"`, `aria-hidden` ellipsis). + +**Conserver** : le sélecteur perPage, `Préc.` (`data-test="prev-button"`, `aria-label="Page précédente"`, désactivé si `page <= 1`), `Suiv.` (`data-test="next-button"`, `aria-label="Page suivante"`, désactivé si `page >= totalPages`). + +**Ajouter** entre les deux boutons, dans la `