[ERP-70] feat(front) : adapter l'UI a @malio/layer-ui 1.7.3 #33

2026-06-01T07:53:34Z

tristan commented

2026-06-01 07:53:34 +00:00

Summary

Mise a jour de la lib @malio/layer-ui de ^1.7.2 vers ^1.7.3 et adaptation des ecrans pour deux changements visuels apportes par la lib :

Le slot message (error || success || hint) sous les composants Malio est desormais toujours rendu dans le DOM (~16px en bas), pour eviter le saut de mise en page quand un champ passe en erreur.
Nouvelle classe utilitaire w-m-btn-action pour standardiser la largeur des boutons d'action (remplacement du fix w-[150px]).

Details

Bump dependance : frontend/package.json + frontend/package-lock.json (@malio/layer-ui ^1.7.2 -> ^1.7.3)
Boutons d'action : 12 occurrences button-class=\"w-[150px]\" migrees vers button-class=\"w-m-btn-action\" dans CategoryDrawer, RoleDrawer, SiteDrawer, UserRbacDrawer, audit-log
Espacements formulaires : rabotage des gap-* / space-y-* sur les conteneurs colonne (forms drawers, listes de checkbox, grille dates du drawer filtres audit-log, accordeon permissions, login) pour absorber le slot message desormais toujours present (16px)
Alignements verticaux : compensation pb-4 sur les voisins non-Malio dans les conteneurs items-center — puce couleur du SiteDrawer (<div class=\"shrink-0 pb-4\"> autour du span) et labels Du / Au du drawer filtres audit-log (<span class=\"pb-4\">)
Layout : reduction du padding lateral xl: dans default.vue (xl:px-[170px] -> xl:px-[44px])

Test plan

make nuxt-test (103/103 OK localement)
make test (322/322 OK localement)
Validation visuelle drawer Categories (Create / Edit / Delete)
Validation visuelle drawer Roles + accordeon permissions
Validation visuelle drawer Sites (puce couleur centree avec le champ)
Validation visuelle drawer Users RBAC
Validation visuelle page Audit Log (table + drawer filtres : dates Du/Au alignees, checkboxes correctement espacees)
Validation visuelle page Login (espacements entre champs / bouton / version)

Suite

Un fix upstream @malio/layer-ui sera necessaire pour corriger l'alignement du label Lignes : dans la pagination de MalioDataTable (slot vide du MalioSelect interne) — prompt prepare a coller dans une session sur le repo de la lib.

## Summary Mise a jour de la lib `@malio/layer-ui` de `^1.7.2` vers `^1.7.3` et adaptation des ecrans pour deux changements visuels apportes par la lib : - Le slot message (`error || success || hint`) sous les composants Malio est desormais **toujours rendu** dans le DOM (~16px en bas), pour eviter le saut de mise en page quand un champ passe en erreur. - Nouvelle classe utilitaire `w-m-btn-action` pour standardiser la largeur des boutons d'action (remplacement du fix `w-[150px]`). ## Details - **Bump dependance** : `frontend/package.json` + `frontend/package-lock.json` (`@malio/layer-ui` `^1.7.2` -> `^1.7.3`) - **Boutons d'action** : 12 occurrences `button-class=\"w-[150px]\"` migrees vers `button-class=\"w-m-btn-action\"` dans `CategoryDrawer`, `RoleDrawer`, `SiteDrawer`, `UserRbacDrawer`, `audit-log` - **Espacements formulaires** : rabotage des `gap-*` / `space-y-*` sur les conteneurs colonne (forms drawers, listes de checkbox, grille dates du drawer filtres audit-log, accordeon permissions, login) pour absorber le slot message desormais toujours present (16px) - **Alignements verticaux** : compensation `pb-4` sur les voisins non-Malio dans les conteneurs `items-center` — puce couleur du `SiteDrawer` (`<div class=\"shrink-0 pb-4\">` autour du span) et labels `Du` / `Au` du drawer filtres `audit-log` (`<span class=\"pb-4\">`) - **Layout** : reduction du padding lateral xl: dans `default.vue` (`xl:px-[170px]` -> `xl:px-[44px]`) ## Test plan - [x] `make nuxt-test` (103/103 OK localement) - [x] `make test` (322/322 OK localement) - [x] Validation visuelle drawer Categories (Create / Edit / Delete) - [x] Validation visuelle drawer Roles + accordeon permissions - [x] Validation visuelle drawer Sites (puce couleur centree avec le champ) - [x] Validation visuelle drawer Users RBAC - [x] Validation visuelle page Audit Log (table + drawer filtres : dates Du/Au alignees, checkboxes correctement espacees) - [x] Validation visuelle page Login (espacements entre champs / bouton / version) ## Suite Un fix upstream `@malio/layer-ui` sera necessaire pour corriger l'alignement du label `Lignes :` dans la pagination de `MalioDataTable` (slot vide du `MalioSelect` interne) — prompt prepare a coller dans une session sur le repo de la lib.

tristan added 3 commits 2026-06-01 07:53:34 +00:00

feat(front) : add usePaginatedList composable + paginate all admin lists via MalioDataTable

Pull Request — Quality gate / Backend (PHP CS + PHPUnit) (pull_request) Successful in 2m1s

Details

Pull Request — Quality gate / Frontend (lint + Vitest + build) (pull_request) Successful in 1m7s

Details

43c3220873

- 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.

fix(front) : usePaginatedList — garde anti-reponse periemee, expose error, durcit buildQuery

Pull Request — Quality gate / Backend (PHP CS + PHPUnit) (pull_request) Successful in 2m25s

Details

Pull Request — Quality gate / Frontend (lint + Vitest + build) (pull_request) Successful in 1m14s

Details

f770812b7e

- 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

feat(front) : @malio/layer-ui 1.7.3 — slot message toujours reserve + class w-m-btn-action

Pull Request — Quality gate / Backend (PHP CS + PHPUnit) (pull_request) Successful in 1m32s

Details

Pull Request — Quality gate / Frontend (lint + Vitest + build) (pull_request) Successful in 1m13s

Details

6d3d44f0bb

- Bump @malio/layer-ui ^1.7.2 → ^1.7.3
- Migration des boutons d'action w-[150px] → w-m-btn-action (CategoryDrawer, RoleDrawer, SiteDrawer, UserRbacDrawer, audit-log)
- Rabotage des gaps de formulaires pour absorber le slot message Malio desormais toujours rendu (forms drawers, listes de checkbox, grille dates audit-log, accordeon permissions)
- Compensation des alignements verticaux pour les voisins non-Malio : puce couleur du SiteDrawer + labels Du/Au du drawer filtres audit-log
- Reduction du padding lateral xl: dans le layout default (170px → 44px)

tristan added 1 commit 2026-06-01 08:22:22 +00:00

fix(ui) : ajustement des espaces entre champs dans les formulaires + Ajustement des marges dans le layout par défaut

Pull Request — Quality gate / Backend (PHP CS + PHPUnit) (pull_request) Successful in 1m24s

Details

Pull Request — Quality gate / Frontend (lint + Vitest + build) (pull_request) Successful in 1m7s

Details

219f5371d2

matthieu commented

2026-06-01 09:47:43 +00:00

Review rapide 👀

Code propre, refacto cohérent : appels au montage + après delete OK, plus aucune référence à l'ancien useCategoriesAdmin.fetchAll/categories, et la suppression de const api = useApi() dans users.vue est justifiée (l'instance n'y était plus utilisée).

⚠️ Point à clarifier avant merge — chevauchement avec #30 (ERP-73)

Cette PR s'annonce comme l'adaptation à layer-ui 1.7.3 (bump, w-m-btn-action, espacements), mais elle embarque en réalité tout le contenu de la PR #30 (ERP-73) ouverte :

frontend/shared/composables/usePaginatedList.ts (+ son test, 412 lignes)
la bascule pagination serveur des 4 pages admin (categories, roles, users, sites)
la refonte de useCategoriesAdmin (pagination=false pour le référentiel)
la nouvelle section usePaginatedList obligatoire dans .claude/rules/frontend.md

Les deux PR ciblent develop → double-merge / conflit quasi assuré. L'idéal : merger #30 d'abord, puis rebaser celle-ci sur develop pour qu'elle ne contienne que le volet UI 1.7.3. Le descriptif/test-plan ne mentionne d'ailleurs pas du tout la partie pagination.

Deux détails mineurs, non bloquants :

usePaginatedList.ts (scope #30) — dans fetch(), tp est recalculé à la main alors que le computed totalPages est déjà à jour après l'assignation de totalItems.value. const tp = totalPages.value suffirait.
app/layouts/default.vue — le spacer sticky passe de h-[47px] à h-11 (47 → 44 px) en plus du padding xl:px-11. Intentionnel ? (pas mentionné dans le résumé)

**Review rapide** 👀 Code propre, refacto cohérent : appels au montage + après delete OK, plus aucune référence à l'ancien `useCategoriesAdmin.fetchAll/categories`, et la suppression de `const api = useApi()` dans `users.vue` est justifiée (l'instance n'y était plus utilisée). ⚠️ **Point à clarifier avant merge — chevauchement avec #30 (ERP-73)** Cette PR s'annonce comme l'adaptation à layer-ui 1.7.3 (bump, `w-m-btn-action`, espacements), mais elle embarque en réalité tout le contenu de la PR #30 (ERP-73) ouverte : - `frontend/shared/composables/usePaginatedList.ts` (+ son test, 412 lignes) - la bascule pagination serveur des 4 pages admin (`categories`, `roles`, `users`, `sites`) - la refonte de `useCategoriesAdmin` (`pagination=false` pour le référentiel) - la nouvelle section `usePaginatedList obligatoire` dans `.claude/rules/frontend.md` Les deux PR ciblent `develop` → double-merge / conflit quasi assuré. L'idéal : merger #30 d'abord, puis rebaser celle-ci sur `develop` pour qu'elle ne contienne **que** le volet UI 1.7.3. Le descriptif/test-plan ne mentionne d'ailleurs pas du tout la partie pagination. Deux détails mineurs, non bloquants : - `usePaginatedList.ts` (scope #30) — dans `fetch()`, `tp` est recalculé à la main alors que le computed `totalPages` est déjà à jour après l'assignation de `totalItems.value`. `const tp = totalPages.value` suffirait. - `app/layouts/default.vue` — le spacer sticky passe de `h-[47px]` à `h-11` (47 → 44 px) en plus du padding `xl:px-11`. Intentionnel ? (pas mentionné dans le résumé)

tristan merged commit df8e44fcfa into develop

2026-06-01 09:55:14 +00:00

tristan deleted branch feature/ERP-70-front-m-mettre-a-jour-malio-layer-ui-malio-ui-vers

2026-06-01 09:55:14 +00:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MALIO-DEV/Starseed#33