tristan
df8e44fcfa
Auto Tag Develop / tag (push) Successful in 8s
## 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. Reviewed-on: #33 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
72 lines
3.0 KiB
Vue
72 lines
3.0 KiB
Vue
<template>
|
|
<!-- Accordeon de permissions groupees par module : un panneau par module,
|
|
avec compteur (selectionnees/total) dans le titre, case "Tout selectionner"
|
|
et liste des permissions individuelles. Source unique de cette UX, utilisee
|
|
par RoleDrawer (permissions du role) et UserRbacDrawer (permissions directes). -->
|
|
<MalioAccordion v-model="openModules">
|
|
<MalioAccordionItem
|
|
v-for="group in groupsByModule"
|
|
:key="group.module"
|
|
:value="group.module"
|
|
:title="`${group.module} (${selectedCountFor(group)}/${group.permissions.length})`"
|
|
header-class="capitalize"
|
|
>
|
|
<div class="flex flex-col">
|
|
<!-- Tout selectionner pour ce module -->
|
|
<MalioCheckbox
|
|
:id="`${idPrefix}-group-${group.module}`"
|
|
:label="t('admin.roles.permissions.selectAll')"
|
|
:model-value="allSelectedFor(group)"
|
|
label-class="font-semibold text-sm text-neutral-700"
|
|
@update:model-value="(val: boolean) => emit('toggle-all', group.module, val)"
|
|
/>
|
|
<div class="flex flex-col">
|
|
<MalioCheckbox
|
|
v-for="perm in group.permissions"
|
|
:id="`${idPrefix}-perm-${perm.id}`"
|
|
:key="perm.id"
|
|
:label="perm.label"
|
|
:model-value="selectedIds.has(perm.id)"
|
|
label-class="text-sm text-neutral-600"
|
|
@update:model-value="(val: boolean) => emit('toggle', perm.id, val)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</MalioAccordionItem>
|
|
</MalioAccordion>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { PermissionModule } from '~/shared/types/rbac'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const props = defineProps<{
|
|
/** Groupes de permissions a afficher, un par module. */
|
|
groupsByModule: PermissionModule[]
|
|
/** Ids des permissions actuellement selectionnees. */
|
|
selectedIds: Set<number>
|
|
/** Prefixe pour les ids HTML : evite les collisions si plusieurs accordeons coexistent (ex: "role" vs "direct"). */
|
|
idPrefix: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
toggle: [permissionId: number, selected: boolean]
|
|
'toggle-all': [module: string, selected: boolean]
|
|
}>()
|
|
|
|
// Modules ouverts dans l'accordeon (mode multiple). Etat local : chaque instance
|
|
// du composant garde sa propre liste, pas de partage entre drawers.
|
|
const openModules = ref<string[]>([])
|
|
|
|
// Nombre de permissions selectionnees pour un module donne.
|
|
function selectedCountFor(group: PermissionModule): number {
|
|
return group.permissions.filter(p => props.selectedIds.has(p.id)).length
|
|
}
|
|
|
|
// Vrai si toutes les permissions du module sont selectionnees.
|
|
function allSelectedFor(group: PermissionModule): boolean {
|
|
return group.permissions.length > 0 && selectedCountFor(group) === group.permissions.length
|
|
}
|
|
</script>
|