refactor(frontend) : ERP-26 - migrate roles table to MalioDataTable component
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matthieu
@@ -14,70 +14,49 @@
|
||||
</div>
|
||||
|
||||
<!-- Table des roles -->
|
||||
<div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
|
||||
<table v-if="roles.length > 0" class="w-full text-left text-sm">
|
||||
<thead class="bg-neutral-50 text-xs uppercase text-neutral-500">
|
||||
<tr>
|
||||
<th class="px-4 py-3">{{ t('admin.roles.table.label') }}</th>
|
||||
<th class="px-4 py-3">{{ t('admin.roles.table.code') }}</th>
|
||||
<th class="px-4 py-3 text-center">{{ t('admin.roles.table.permissions') }}</th>
|
||||
<th class="px-4 py-3 text-center">{{ t('admin.roles.table.system') }}</th>
|
||||
<th class="px-4 py-3 text-right">{{ t('admin.roles.table.actions') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-100">
|
||||
<tr
|
||||
v-for="role in roles"
|
||||
:key="role.id"
|
||||
class="cursor-pointer hover:bg-neutral-50 transition-colors"
|
||||
@click="openEditDrawer(role)"
|
||||
>
|
||||
<td class="px-4 py-3 font-medium text-neutral-900">
|
||||
{{ role.label }}
|
||||
</td>
|
||||
<td class="px-4 py-3 font-mono text-xs text-neutral-500">
|
||||
{{ role.code }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center text-neutral-600">
|
||||
{{ role.permissions.length }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span
|
||||
v-if="role.isSystem"
|
||||
class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800"
|
||||
>
|
||||
{{ t('admin.roles.table.system') }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right" @click.stop>
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<MalioButtonIcon
|
||||
v-if="can('core.roles.manage')"
|
||||
icon="mdi:pencil-outline"
|
||||
:aria-label="t('common.edit')"
|
||||
variant="ghost"
|
||||
@click="openEditDrawer(role)"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
v-if="can('core.roles.manage')"
|
||||
icon="mdi:delete-outline"
|
||||
:aria-label="t('common.delete')"
|
||||
variant="ghost"
|
||||
:disabled="role.isSystem"
|
||||
@click="confirmDelete(role)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Etat vide -->
|
||||
<div v-else class="flex flex-col items-center justify-center py-12 text-neutral-400">
|
||||
<Icon name="mdi:shield-off-outline" class="mb-3 size-12" />
|
||||
<p class="text-sm">{{ t('admin.roles.noRoles') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<MalioDataTable
|
||||
class="mt-6"
|
||||
:columns="columns"
|
||||
:items="roleItems"
|
||||
:total-items="roles.length"
|
||||
:row-clickable="true"
|
||||
:empty-message="t('admin.roles.noRoles')"
|
||||
@row-click="onRowClick"
|
||||
>
|
||||
<template #cell-code="{ item }">
|
||||
<span class="font-mono text-xs">{{ item.code }}</span>
|
||||
</template>
|
||||
<template #cell-permissions="{ item }">
|
||||
{{ item.permissions }}
|
||||
</template>
|
||||
<template #cell-system="{ item }">
|
||||
<span
|
||||
v-if="item.isSystem"
|
||||
class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800"
|
||||
>
|
||||
{{ t('admin.roles.table.system') }}
|
||||
</span>
|
||||
</template>
|
||||
<template #cell-actions="{ item }">
|
||||
<div class="flex items-center justify-end gap-2" @click.stop>
|
||||
<MalioButtonIcon
|
||||
v-if="can('core.roles.manage')"
|
||||
icon="mdi:pencil-outline"
|
||||
:aria-label="t('common.edit')"
|
||||
variant="ghost"
|
||||
@click="openEditDrawer(getRoleById(item.id as number)!)"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
v-if="can('core.roles.manage')"
|
||||
icon="mdi:delete-outline"
|
||||
:aria-label="t('common.delete')"
|
||||
variant="ghost"
|
||||
:disabled="item.isSystem as boolean"
|
||||
@click="confirmDelete(getRoleById(item.id as number)!)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
|
||||
<!-- Drawer creation/edition -->
|
||||
<RoleDrawer
|
||||
@@ -122,6 +101,36 @@ useHead({ title: t('admin.roles.title') })
|
||||
|
||||
const roles = ref<Role[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const columns = [
|
||||
{ key: 'label', label: t('admin.roles.table.label') },
|
||||
{ key: 'code', label: t('admin.roles.table.code') },
|
||||
{ key: 'permissions', label: t('admin.roles.table.permissions') },
|
||||
{ key: 'system', label: t('admin.roles.table.system') },
|
||||
{ key: 'actions', label: t('admin.roles.table.actions') },
|
||||
]
|
||||
|
||||
// Transformer les roles en items compatibles MalioDataTable
|
||||
const roleItems = computed(() =>
|
||||
roles.value.map(role => ({
|
||||
id: role.id,
|
||||
label: role.label,
|
||||
code: role.code,
|
||||
permissions: role.permissions.length,
|
||||
isSystem: role.isSystem,
|
||||
system: '', // colonne geree par le slot
|
||||
actions: '', // colonne geree par le slot
|
||||
}))
|
||||
)
|
||||
|
||||
function getRoleById(id: number): Role | undefined {
|
||||
return roles.value.find(r => r.id === id)
|
||||
}
|
||||
|
||||
function onRowClick(item: Record<string, unknown>) {
|
||||
const role = getRoleById(item.id as number)
|
||||
if (role) openEditDrawer(role)
|
||||
}
|
||||
const drawerOpen = ref(false)
|
||||
const selectedRole = ref<Role | null>(null)
|
||||
const deleteModalOpen = ref(false)
|
||||
|
||||
Reference in New Issue
Block a user