From c36b8b6c095f27044a94c7807d87f36a99a467ea Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Thu, 16 Apr 2026 10:01:46 +0200
Subject: [PATCH] feat(frontend) : ERP-27 - UserRbacDrawer component

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../core/components/UserRbacDrawer.vue        | 285 ++++++++++++++++++
 1 file changed, 285 insertions(+)
 create mode 100644 frontend/modules/core/components/UserRbacDrawer.vue

diff --git a/frontend/modules/core/components/UserRbacDrawer.vue b/frontend/modules/core/components/UserRbacDrawer.vue
new file mode 100644
index 0000000..a215f6a
--- /dev/null
+++ b/frontend/modules/core/components/UserRbacDrawer.vue
@@ -0,0 +1,285 @@
+<template>
+    <MalioDrawer
+        :model-value="modelValue"
+        :title="t('admin.users.drawer.title', { username: user?.username ?? '' })"
+        drawer-class="w-full max-w-lg"
+        @update:model-value="emit('update:modelValue', $event)"
+    >
+        <div class="flex flex-col gap-6 p-4">
+            <!-- Avertissement auto-edition -->
+            <div
+                v-if="isSelfEdit"
+                class="flex items-center gap-2 rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-800"
+            >
+                <Icon name="mdi:alert-outline" class="size-5 shrink-0" />
+                {{ t('admin.users.drawer.selfWarning') }}
+            </div>
+
+            <!-- Toggle Administrateur -->
+            <MalioCheckbox
+                id="admin-toggle"
+                :label="t('admin.users.drawer.adminToggle')"
+                :model-value="form.isAdmin"
+                label-class="font-semibold text-sm text-neutral-700"
+                @update:model-value="form.isAdmin = $event"
+            />
+
+            <!-- Section Roles -->
+            <div>
+                <h4 class="mb-3 text-sm font-semibold text-neutral-700">
+                    {{ t('admin.users.drawer.rolesSection') }}
+                </h4>
+                <div class="flex flex-col gap-2">
+                    <MalioCheckbox
+                        v-for="role in allRoles"
+                        :key="role.id"
+                        :id="`role-${role.id}`"
+                        :label="role.label"
+                        :model-value="selectedRoleIds.has(role.id)"
+                        label-class="text-sm text-neutral-600"
+                        @update:model-value="(val: boolean) => toggleRole(role.id, val)"
+                    />
+                </div>
+            </div>
+
+            <!-- Section Permissions directes -->
+            <div>
+                <h4 class="mb-3 text-sm font-semibold text-neutral-700">
+                    {{ t('admin.users.drawer.directPermissionsSection') }}
+                </h4>
+                <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
+                        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>
+            </div>
+
+            <!-- Section Resume permissions effectives -->
+            <div>
+                <h4 class="mb-3 text-sm font-semibold text-neutral-700">
+                    {{ t('admin.users.drawer.summarySection') }}
+                </h4>
+                <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="secondary"
+                    @click="emit('update:modelValue', false)"
+                />
+                <MalioButton
+                    :label="t('common.save')"
+                    variant="primary"
+                    :disabled="saving"
+                    @click="handleSave"
+                />
+            </div>
+        </div>
+    </MalioDrawer>
+</template>
+
+<script setup lang="ts">
+interface Permission {
+    id: number
+    code: string
+    label: string
+    module: string
+    orphan: boolean
+}
+
+interface Role {
+    id: number
+    code: string
+    label: string
+    description: string | null
+    isSystem: boolean
+    permissions: (Permission | string)[]
+}
+
+interface UserListItem {
+    id: number
+    username: string
+    isAdmin: boolean
+    roles: string[]
+    directPermissions: string[]
+}
+
+interface EffectivePermission {
+    code: string
+    label: string
+    module: string
+    sources: string[]
+}
+
+interface PermissionModule {
+    module: string
+    permissions: Permission[]
+}
+
+const { t } = useI18n()
+const api = useApi()
+const auth = useAuthStore()
+
+const props = defineProps<{
+    modelValue: boolean
+    user: UserListItem | null
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    saved: []
+}>()
+
+const saving = ref(false)
+const allRoles = ref<Role[]>([])
+const allPermissions = ref<Permission[]>([])
+
+const form = ref({ isAdmin: false })
+const selectedRoleIds = ref(new Set<number>())
+const selectedDirectPermissionIds = ref(new Set<number>())
+
+// Detecter l'auto-edition
+const isSelfEdit = computed(() => props.user?.id === auth.user?.id)
+
+// Extraire un ID depuis une IRI API Platform
+function iriToId(iri: string): number {
+    return Number(iri.split('/').pop())
+}
+
+// Grouper les permissions par module (pour les checkboxes)
+const permissionsByModule = computed<PermissionModule[]>(() => {
+    const groups = new Map<string, Permission[]>()
+    for (const perm of allPermissions.value) {
+        if (perm.orphan) continue
+        const list = groups.get(perm.module) || []
+        list.push(perm)
+        groups.set(perm.module, list)
+    }
+    return Array.from(groups.entries())
+        .map(([module, permissions]) => ({ module, permissions }))
+        .sort((a, b) => a.module.localeCompare(b.module))
+})
+
+// Calculer les permissions effectives avec leurs sources
+const effectivePermissions = computed<EffectivePermission[]>(() => {
+    const permMap = new Map<number, Permission>()
+    for (const p of allPermissions.value) {
+        if (!p.orphan) permMap.set(p.id, p)
+    }
+
+    // Construire la map permissionId -> sources[]
+    const result = new Map<number, string[]>()
+
+    // Permissions heritees des roles
+    for (const roleId of selectedRoleIds.value) {
+        const role = allRoles.value.find(r => r.id === roleId)
+        if (!role) continue
+        for (const p of role.permissions) {
+            const pid = typeof p === 'string' ? iriToId(p) : p.id
+            const sources = result.get(pid) || []
+            sources.push(t('admin.users.drawer.sourceRole', { role: role.label }))
+            result.set(pid, sources)
+        }
+    }
+
+    // Permissions directes
+    for (const pid of selectedDirectPermissionIds.value) {
+        const sources = result.get(pid) || []
+        sources.push(t('admin.users.drawer.sourceDirect'))
+        result.set(pid, sources)
+    }
+
+    // Construire la liste finale
+    return Array.from(result.entries())
+        .map(([pid, sources]) => {
+            const perm = permMap.get(pid)
+            if (!perm) return null
+            return { code: perm.code, label: perm.label, module: perm.module, sources }
+        })
+        .filter((p): p is EffectivePermission => p !== null)
+        .sort((a, b) => a.code.localeCompare(b.code))
+})
+
+// Charger roles et permissions
+async function loadData() {
+    const [rolesData, permsData] = await Promise.all([
+        api.get<{ member: Role[] }>('/roles', {}, { toast: false }),
+        api.get<{ member: Permission[] }>('/permissions', { orphan: false, itemsPerPage: 200 }, { toast: false }),
+    ])
+    allRoles.value = rolesData.member
+    allPermissions.value = permsData.member
+}
+
+// Remplir le formulaire quand le user change
+watch(() => props.user, (user) => {
+    if (user) {
+        form.value.isAdmin = user.isAdmin
+        selectedRoleIds.value = new Set(user.roles.map(iriToId))
+        selectedDirectPermissionIds.value = new Set(user.directPermissions.map(iriToId))
+    } else {
+        form.value.isAdmin = false
+        selectedRoleIds.value = new Set()
+        selectedDirectPermissionIds.value = new Set()
+    }
+}, { immediate: true })
+
+// Charger les donnees quand le drawer s'ouvre
+watch(() => props.modelValue, (open) => {
+    if (open) loadData()
+})
+
+function toggleRole(id: number, selected: boolean) {
+    const ids = new Set(selectedRoleIds.value)
+    if (selected) ids.add(id)
+    else ids.delete(id)
+    selectedRoleIds.value = ids
+}
+
+function handleTogglePermission(id: number, selected: boolean) {
+    const ids = new Set(selectedDirectPermissionIds.value)
+    if (selected) ids.add(id)
+    else ids.delete(id)
+    selectedDirectPermissionIds.value = ids
+}
+
+function handleToggleAll(module: string, selected: boolean) {
+    const ids = new Set(selectedDirectPermissionIds.value)
+    const group = permissionsByModule.value.find(g => g.module === module)
+    if (!group) return
+    for (const perm of group.permissions) {
+        if (selected) ids.add(perm.id)
+        else ids.delete(perm.id)
+    }
+    selectedDirectPermissionIds.value = ids
+}
+
+async function handleSave() {
+    if (!props.user) return
+    saving.value = true
+    try {
+        await api.patch(`/users/${props.user.id}/rbac`, {
+            isAdmin: form.value.isAdmin,
+            roles: Array.from(selectedRoleIds.value).map(id => `/api/roles/${id}`),
+            directPermissions: Array.from(selectedDirectPermissionIds.value).map(id => `/api/permissions/${id}`),
+        }, {
+            toastSuccessMessage: t('admin.users.toast.updated'),
+        })
+        emit('saved')
+        emit('update:modelValue', false)
+    } finally {
+        saving.value = false
+    }
+}
+</script>