feat(core) : add usePermissions composable and rbac roles admin front

2026-06-19 17:35:51 +02:00
parent 544d4cf44f
commit 511353c3f5
10 changed files with 437 additions and 3 deletions
@@ -0,0 +1,116 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">{{ $t('admin.roles.title') }}</h2>
+            <MalioButton
+                icon-name="mdi:plus"
+                icon-position="left"
+                button-class="w-auto px-4"
+                :label="$t('admin.roles.addRole')"
+                @click="openCreate"
+            />
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            :empty-message="$t('admin.roles.empty')"
+            @row-click="openEdit"
+        >
+            <template #cell-isSystem="{ item }">
+                <span
+                    v-if="item.isSystem"
+                    class="rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-600"
+                >
+                    {{ $t('admin.roles.system') }}
+                </span>
+            </template>
+            <template #cell-permissions="{ item }">
+                <span class="text-neutral-600">{{ item.permissions.length }}</span>
+            </template>
+            <template #actions="{ item }">
+                <MalioButtonIcon
+                    v-if="!item.isSystem"
+                    icon="mdi:delete-outline"
+                    :aria-label="$t('common.delete')"
+                    variant="ghost"
+                    icon-size="20"
+                    button-class="text-neutral-400 hover:text-red-500"
+                    @click.stop="handleDelete(item.id)"
+                />
+            </template>
+        </DataTable>
+
+        <RoleDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            :permissions="permissions"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Role } from '~/modules/core/services/roles'
+import { useRoleService } from '~/modules/core/services/roles'
+import type { Permission } from '~/modules/core/services/permissions'
+import { usePermissionService } from '~/modules/core/services/permissions'
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const { t } = useI18n()
+
+const columns = computed<DataTableColumn[]>(() => [
+    { key: 'label', label: t('admin.roles.label'), primary: true },
+    { key: 'code', label: t('admin.roles.code') },
+    { key: 'permissions', label: t('admin.roles.permissions') },
+    { key: 'isSystem', label: '' },
+])
+
+const roleService = useRoleService()
+const permissionService = usePermissionService()
+
+const items = ref<Role[]>([])
+const permissions = ref<Permission[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<Role | null>(null)
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        items.value = await roleService.list()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+async function loadPermissions() {
+    permissions.value = await permissionService.list()
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: Role) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await roleService.remove(id)
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+    loadPermissions()
+})
+</script>