From 7c2e570fa0250775ac9492c5cd434c7c51be4567 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 27 May 2026 16:53:06 +0200
Subject: [PATCH] feat(front) : maj @malio/layer-ui 1.7.1 et refonte des
 drawers

- adaptation a l'API MalioDrawer 1.7 (titre via slot #header, footer frere du body scrollable)
- footer fixe : boutons 150px, justify-between, bordures header/footer
- permissions en accordeon Malio par module (RoleDrawer + UserRbacDrawer)
- cases a cocher sur une seule colonne
- suppression de PermissionGroup, devenu inutilise

Ajustements restants (layers/titres) a suivre.
---
 .../core/components/PermissionGroup.vue       |  66 ----------
 .../modules/core/components/RoleDrawer.vue    | 117 ++++++++++++------
 .../core/components/UserRbacDrawer.vue        |  98 +++++++++++----
 .../modules/core/pages/admin/audit-log.vue    |   6 +-
 .../modules/sites/components/SiteDrawer.vue   |  61 +++++----
 frontend/package-lock.json                    |   8 +-
 frontend/package.json                         |   2 +-
 7 files changed, 198 insertions(+), 160 deletions(-)
 delete mode 100644 frontend/modules/core/components/PermissionGroup.vue

diff --git a/frontend/modules/core/components/PermissionGroup.vue b/frontend/modules/core/components/PermissionGroup.vue
deleted file mode 100644
index 8eb589f..0000000
--- a/frontend/modules/core/components/PermissionGroup.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <div class="rounded-lg border border-neutral-200 overflow-hidden">
-        <!-- En-tete du groupe avec checkbox "tout selectionner" -->
-        <div class="flex items-center gap-3 bg-neutral-50 px-4 py-3 border-b border-neutral-200">
-            <MalioCheckbox
-                :id="`group-${module}`"
-                :label="moduleLabel"
-                :model-value="allSelected"
-                label-class="font-semibold text-sm text-neutral-700 capitalize"
-                @update:model-value="toggleAll"
-            />
-            <span class="ml-auto text-xs text-neutral-400">
-                {{ selectedCount }}/{{ permissions.length }}
-            </span>
-        </div>
-
-        <!-- Liste des permissions individuelles -->
-        <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-2">
-            <MalioCheckbox
-                v-for="perm in permissions"
-                :key="perm.id"
-                :id="`perm-${perm.id}`"
-                :label="perm.label"
-                :model-value="selectedIds.has(perm.id)"
-                label-class="text-sm text-neutral-600"
-                @update:model-value="(val: boolean) => togglePermission(perm.id, val)"
-            />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import type { Permission } from '~/shared/types/rbac'
-
-const props = defineProps<{
-    module: string
-    moduleLabel: string
-    permissions: Permission[]
-    selectedIds: Set<number>
-}>()
-
-const emit = defineEmits<{
-    toggle: [permissionId: number, selected: boolean]
-    toggleAll: [module: string, selected: boolean]
-}>()
-
-// Nombre de permissions selectionnees dans ce groupe
-const selectedCount = computed(() =>
-    props.permissions.filter(p => props.selectedIds.has(p.id)).length
-)
-
-// Vrai si toutes les permissions du groupe sont selectionnees
-const allSelected = computed(() =>
-    props.permissions.length > 0 && selectedCount.value === props.permissions.length
-)
-
-// Emet l'evenement de bascule pour une permission individuelle
-function togglePermission(id: number, selected: boolean) {
-    emit('toggle', id, selected)
-}
-
-// Emet l'evenement de bascule pour toutes les permissions du groupe
-function toggleAll(selected: boolean) {
-    emit('toggleAll', props.module, selected)
-}
-</script>
diff --git a/frontend/modules/core/components/RoleDrawer.vue b/frontend/modules/core/components/RoleDrawer.vue
index cc76aaa..04f04c1 100644
--- a/frontend/modules/core/components/RoleDrawer.vue
+++ b/frontend/modules/core/components/RoleDrawer.vue
@@ -1,11 +1,17 @@
 <template>
     <MalioDrawer
         :model-value="modelValue"
-        :title="isEditMode ? t('admin.roles.editRole') : t('admin.roles.createRole')"
         drawer-class="w-full max-w-lg"
+        header-class="border-b border-black"
+        footer-class="justify-between border-t border-black p-6"
         @update:model-value="emit('update:modelValue', $event)"
     >
-        <form class="flex flex-col gap-6 p-4" @submit.prevent="handleSave">
+        <template #header>
+            <h2 class="text-[24px] font-bold">
+                {{ isEditMode ? t('admin.roles.editRole') : t('admin.roles.createRole') }}
+            </h2>
+        </template>
+        <form class="flex flex-col gap-4 py-4" @submit.prevent="handleSave">
             <!-- Champs du role -->
             <MalioInputText
                 v-model="form.label"
@@ -44,45 +50,71 @@
                 <div v-else-if="permissionsByModule.length === 0" class="text-sm text-neutral-400">
                     {{ t('admin.roles.permissions.noPermissions') }}
                 </div>
-                <div class="flex flex-col gap-4">
-                    <PermissionGroup
+                <!-- Un panneau d'accordeon par module (mode multiple) ; le compteur
+                     selectionnees/total reste visible dans l'en-tete replie. -->
+                <MalioAccordion v-else v-model="openModules">
+                    <MalioAccordionItem
                         v-for="group in permissionsByModule"
                         :key="group.module"
-                        :module="group.module"
-                        :module-label="group.module"
-                        :permissions="group.permissions"
-                        :selected-ids="selectedPermissionIds"
-                        @toggle="handleTogglePermission"
-                        @toggle-all="handleToggleAll"
-                    />
-                </div>
+                        :value="group.module"
+                        :title="`${group.module} (${selectedCountFor(group)}/${group.permissions.length})`"
+                        header-class="capitalize"
+                    >
+                        <div class="flex flex-col gap-3">
+                            <!-- Tout selectionner pour ce module -->
+                            <MalioCheckbox
+                                :id="`role-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) => handleToggleAll(group.module, val)"
+                            />
+                            <div class="flex flex-col gap-2">
+                                <MalioCheckbox
+                                    v-for="perm in group.permissions"
+                                    :id="`role-perm-${perm.id}`"
+                                    :key="perm.id"
+                                    :label="perm.label"
+                                    :model-value="selectedPermissionIds.has(perm.id)"
+                                    label-class="text-sm text-neutral-600"
+                                    @update:model-value="(val: boolean) => handleTogglePermission(perm.id, val)"
+                                />
+                            </div>
+                        </div>
+                    </MalioAccordionItem>
+                </MalioAccordion>
             </div>
 
-            <!-- Boutons -->
-            <div class="flex justify-end gap-3 border-t border-neutral-200 pt-4">
-                <MalioButton
-                    v-if="isEditMode"
-                    :label="t('common.delete')"
-                    variant="danger"
-                    icon-name="mdi:delete-outline"
-                    icon-position="left"
-                    :disabled="role?.isSystem"
-                    @click="emit('delete')"
-                />
-                <MalioButton
-                    v-else
-                    :label="t('common.cancel')"
-                    variant="tertiary"
-                    @click="emit('update:modelValue', false)"
-                />
-                <MalioButton
-                    :label="t('common.save')"
-                    variant="primary"
-                    :disabled="saving || permissionsLoadFailed"
-                    @click="handleSave"
-                />
-            </div>
         </form>
+
+        <!-- Footer fixe : depuis la 1.7.1 le slot #footer est un frere du body
+             scrollable (shrink-0), donc reellement fige sans sticky. -->
+        <template #footer>
+            <MalioButton
+                v-if="isEditMode"
+                :label="t('common.delete')"
+                variant="danger"
+                icon-name="mdi:delete-outline"
+                icon-position="left"
+                button-class="w-[150px]"
+                :disabled="role?.isSystem"
+                @click="emit('delete')"
+            />
+            <MalioButton
+                v-else
+                :label="t('common.cancel')"
+                variant="tertiary"
+                button-class="w-[150px]"
+                @click="emit('update:modelValue', false)"
+            />
+            <MalioButton
+                :label="t('common.save')"
+                variant="primary"
+                button-class="w-[150px]"
+                :disabled="saving || permissionsLoadFailed"
+                @click="handleSave"
+            />
+        </template>
     </MalioDrawer>
 </template>
 
@@ -124,6 +156,19 @@ const form = ref({
 
 const selectedPermissionIds = ref(new Set<number>())
 
+// Modules ouverts dans l'accordeon des permissions (mode multiple)
+const openModules = ref<string[]>([])
+
+// Nombre de permissions selectionnees pour un module donne
+function selectedCountFor(group: PermissionModule): number {
+    return group.permissions.filter(p => selectedPermissionIds.value.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
+}
+
 const isEditMode = computed(() => props.role !== null)
 
 // Grouper les permissions par module
diff --git a/frontend/modules/core/components/UserRbacDrawer.vue b/frontend/modules/core/components/UserRbacDrawer.vue
index 54b194d..e0f5640 100644
--- a/frontend/modules/core/components/UserRbacDrawer.vue
+++ b/frontend/modules/core/components/UserRbacDrawer.vue
@@ -1,11 +1,17 @@
 <template>
     <MalioDrawer
         :model-value="modelValue"
-        :title="t('admin.users.drawer.title', { username: user?.username ?? '' })"
-        drawer-class="w-full max-w-lg"
+        drawer-class="w-full max-w-[450px]"
+        header-class="border-b border-black"
+        footer-class="justify-between border-t border-black p-6"
         @update:model-value="emit('update:modelValue', $event)"
     >
-        <div class="flex flex-col gap-6 p-4">
+        <template #header>
+            <h2 class="text-[24px] font-bold">
+                {{ t('admin.users.drawer.title', { username: user?.username ?? '' }) }}
+            </h2>
+        </template>
+        <div class="flex flex-col gap-4 py-4">
             <!-- Etat d'erreur de chargement des referentiels : bloque la
                  sauvegarde pour empecher un ecrasement silencieux des droits. -->
             <div
@@ -60,18 +66,39 @@
                 <div v-if="permissionsByModule.length === 0" class="text-sm text-neutral-400">
                     {{ t('admin.roles.permissions.noPermissions') }}
                 </div>
-                <div class="flex flex-col gap-4">
-                    <PermissionGroup
+                <!-- Un panneau d'accordeon par module (mode multiple) ; le compteur
+                     selectionnees/total reste visible dans l'en-tete replie. -->
+                <MalioAccordion v-else v-model="openDirectModules">
+                    <MalioAccordionItem
                         v-for="group in permissionsByModule"
                         :key="group.module"
-                        :module="group.module"
-                        :module-label="group.module"
-                        :permissions="group.permissions"
-                        :selected-ids="selectedDirectPermissionIds"
-                        @toggle="handleTogglePermission"
-                        @toggle-all="handleToggleAll"
-                    />
-                </div>
+                        :value="group.module"
+                        :title="`${group.module} (${directSelectedCount(group)}/${group.permissions.length})`"
+                        header-class="capitalize"
+                    >
+                        <div class="flex flex-col gap-3">
+                            <!-- Tout selectionner pour ce module -->
+                            <MalioCheckbox
+                                :id="`direct-group-${group.module}`"
+                                :label="t('admin.roles.permissions.selectAll')"
+                                :model-value="directAllSelected(group)"
+                                label-class="font-semibold text-sm text-neutral-700"
+                                @update:model-value="(val: boolean) => handleToggleAll(group.module, val)"
+                            />
+                            <div class="flex flex-col gap-2">
+                                <MalioCheckbox
+                                    v-for="perm in group.permissions"
+                                    :id="`direct-perm-${perm.id}`"
+                                    :key="perm.id"
+                                    :label="perm.label"
+                                    :model-value="selectedDirectPermissionIds.has(perm.id)"
+                                    label-class="text-sm text-neutral-600"
+                                    @update:model-value="(val: boolean) => handleTogglePermission(perm.id, val)"
+                                />
+                            </div>
+                        </div>
+                    </MalioAccordionItem>
+                </MalioAccordion>
             </div>
 
             <!-- Section Sites autorises (ticket 2 module Sites) -->
@@ -103,21 +130,25 @@
                 <EffectivePermissions :permissions="effectivePermissions" />
             </div>
 
-            <!-- Boutons -->
-            <div class="flex justify-end gap-3 border-t border-neutral-200 pt-4">
-                <MalioButton
-                    :label="t('common.cancel')"
-                    variant="tertiary"
-                    @click="emit('update:modelValue', false)"
-                />
-                <MalioButton
-                    :label="t('common.save')"
-                    variant="primary"
-                    :disabled="saving || loadFailed"
-                    @click="handleSave"
-                />
-            </div>
         </div>
+
+        <!-- Footer fixe : depuis la 1.7.1 le slot #footer est un frere du body
+             scrollable (shrink-0), donc reellement fige sans sticky. -->
+        <template #footer>
+            <MalioButton
+                :label="t('common.cancel')"
+                variant="tertiary"
+                button-class="w-[150px]"
+                @click="emit('update:modelValue', false)"
+            />
+            <MalioButton
+                :label="t('common.save')"
+                variant="primary"
+                button-class="w-[150px]"
+                :disabled="saving || loadFailed"
+                @click="handleSave"
+            />
+        </template>
     </MalioDrawer>
 </template>
 
@@ -158,6 +189,19 @@ const selectedRoleIds = ref(new Set<number>())
 const selectedDirectPermissionIds = ref(new Set<number>())
 const selectedSiteIds = ref(new Set<number>())
 
+// Modules ouverts dans l'accordeon des permissions directes (mode multiple)
+const openDirectModules = ref<string[]>([])
+
+// Nombre de permissions directes selectionnees pour un module donne
+function directSelectedCount(group: PermissionModule): number {
+    return group.permissions.filter(p => selectedDirectPermissionIds.value.has(p.id)).length
+}
+
+// Vrai si toutes les permissions directes du module sont selectionnees
+function directAllSelected(group: PermissionModule): boolean {
+    return group.permissions.length > 0 && directSelectedCount(group) === group.permissions.length
+}
+
 // Detecter l'auto-edition
 const isSelfEdit = computed(() => props.user?.id === auth.user?.id)
 
diff --git a/frontend/modules/core/pages/admin/audit-log.vue b/frontend/modules/core/pages/admin/audit-log.vue
index 3103816..d1ac784 100644
--- a/frontend/modules/core/pages/admin/audit-log.vue
+++ b/frontend/modules/core/pages/admin/audit-log.vue
@@ -126,9 +126,13 @@
         <!-- Drawer detail : diff courant + timeline complete de l'entite -->
         <MalioDrawer
             v-model="drawerOpen"
-            :title="drawerTitle"
             drawer-class="max-w-2xl"
         >
+            <template #header>
+                <h2 class="text-[24px] font-bold">
+                    {{ drawerTitle }}
+                </h2>
+            </template>
             <div v-if="selectedEntry">
                 <AuditLogDetail :entry="selectedEntry" />
                 <div class="mt-4 border-t border-gray-200 pt-3">
diff --git a/frontend/modules/sites/components/SiteDrawer.vue b/frontend/modules/sites/components/SiteDrawer.vue
index 86fd26e..87b2dea 100644
--- a/frontend/modules/sites/components/SiteDrawer.vue
+++ b/frontend/modules/sites/components/SiteDrawer.vue
@@ -1,11 +1,17 @@
 <template>
     <MalioDrawer
         :model-value="modelValue"
-        :title="isEditMode ? t('admin.sites.editSite') : t('admin.sites.createSite')"
         drawer-class="w-full max-w-lg"
+        header-class="border-b border-black"
+        footer-class="justify-between border-t border-black p-6"
         @update:model-value="emit('update:modelValue', $event)"
     >
-        <form class="flex flex-col gap-6 p-4" @submit.prevent="handleSave">
+        <template #header>
+            <h2 class="text-[24px] font-bold">
+                {{ isEditMode ? t('admin.sites.editSite') : t('admin.sites.createSite') }}
+            </h2>
+        </template>
+        <form class="flex flex-col gap-4 py-4" @submit.prevent="handleSave">
             <MalioInputText
                 v-model="form.name"
                 :label="t('admin.sites.form.name')"
@@ -70,30 +76,35 @@
                 </p>
             </div>
 
-            <!-- Boutons -->
-            <div class="flex justify-end gap-3 border-t border-neutral-200 pt-4">
-                <MalioButton
-                    v-if="isEditMode"
-                    :label="t('common.delete')"
-                    variant="danger"
-                    icon-name="mdi:delete-outline"
-                    icon-position="left"
-                    @click="emit('delete')"
-                />
-                <MalioButton
-                    v-else
-                    :label="t('common.cancel')"
-                    variant="tertiary"
-                    @click="emit('update:modelValue', false)"
-                />
-                <MalioButton
-                    :label="t('common.save')"
-                    variant="primary"
-                    :disabled="saving || !isValidHex"
-                    @click="handleSave"
-                />
-            </div>
         </form>
+
+        <!-- Footer fixe : depuis la 1.7.1 le slot #footer est un frere du body
+             scrollable (shrink-0), donc reellement fige sans sticky. -->
+        <template #footer>
+            <MalioButton
+                v-if="isEditMode"
+                :label="t('common.delete')"
+                variant="danger"
+                icon-name="mdi:delete-outline"
+                icon-position="left"
+                button-class="w-[150px]"
+                @click="emit('delete')"
+            />
+            <MalioButton
+                v-else
+                :label="t('common.cancel')"
+                variant="tertiary"
+                button-class="w-[150px]"
+                @click="emit('update:modelValue', false)"
+            />
+            <MalioButton
+                :label="t('common.save')"
+                variant="primary"
+                button-class="w-[150px]"
+                :disabled="saving || !isValidHex"
+                @click="handleSave"
+            />
+        </template>
     </MalioDrawer>
 </template>
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b00bb01..cf060ff 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,7 +7,7 @@
       "name": "starseed-frontend",
       "hasInstallScript": true,
       "dependencies": {
-        "@malio/layer-ui": "^1.5.0",
+        "@malio/layer-ui": "^1.7.1",
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/i18n": "^10.2.3",
         "@nuxtjs/tailwindcss": "^6.14.0",
@@ -1866,9 +1866,9 @@
       "license": "MIT"
     },
     "node_modules/@malio/layer-ui": {
-      "version": "1.5.0",
-      "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.5.0/layer-ui-1.5.0.tgz",
-      "integrity": "sha512-uVuG8kRakWgpWYQCMUf1LFD+gjx0iRFfNJn/jlqjxiZmZyGZMckcMW2qA9hGZBiheBsTJWw1pRR4ufuyAYPY0A==",
+      "version": "1.7.1",
+      "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.1/layer-ui-1.7.1.tgz",
+      "integrity": "sha512-RYMMappWt/fgjD+BM7//h2O6kxD6WH9Fui8hoC29xtKySRQsqD61XKTdR7BRRkpktbxKmV39q/hblyAFBqV5yw==",
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/frontend/package.json b/frontend/package.json
index 38380ff..6cf10d8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,7 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@malio/layer-ui": "^1.5.0",
+    "@malio/layer-ui": "^1.7.1",
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/i18n": "^10.2.3",
     "@nuxtjs/tailwindcss": "^6.14.0",