MALIO-DEV/Starseed
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend) : ERP-26 - migrate roles table to MalioDataTable component

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-04-16 09:32:54 +02:00
parent 07d53cdf8c
commit 3fe44e4de2
1 changed files with 73 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/modules/core/pages/admin/roles.vue
View File

@@ -14,70 +14,49 @@
</div> </div>
<!-- Table des roles --> <!-- Table des roles -->
<div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200"> <MalioDataTable
<table v-if="roles.length > 0" class="w-full text-left text-sm"> class="mt-6"
<thead class="bg-neutral-50 text-xs uppercase text-neutral-500"> :columns="columns"
<tr> :items="roleItems"
<th class="px-4 py-3">{{ t('admin.roles.table.label') }}</th> :total-items="roles.length"
<th class="px-4 py-3">{{ t('admin.roles.table.code') }}</th> :row-clickable="true"
<th class="px-4 py-3 text-center">{{ t('admin.roles.table.permissions') }}</th> :empty-message="t('admin.roles.noRoles')"
<th class="px-4 py-3 text-center">{{ t('admin.roles.table.system') }}</th> @row-click="onRowClick"
<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"> <template #cell-code="{ item }">
{{ role.label }} <span class="font-mono text-xs">{{ item.code }}</span>
</td> </template>
<td class="px-4 py-3 font-mono text-xs text-neutral-500"> <template #cell-permissions="{ item }">
{{ role.code }} {{ item.permissions }}
</td> </template>
<td class="px-4 py-3 text-center text-neutral-600"> <template #cell-system="{ item }">
{{ role.permissions.length }}
</td>
<td class="px-4 py-3 text-center">
<span <span
v-if="role.isSystem" 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" 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') }} {{ t('admin.roles.table.system') }}
</span> </span>
</td> </template>
<td class="px-4 py-3 text-right" @click.stop> <template #cell-actions="{ item }">
<div class="flex items-center justify-end gap-2"> <div class="flex items-center justify-end gap-2" @click.stop>
<MalioButtonIcon <MalioButtonIcon
v-if="can('core.roles.manage')" v-if="can('core.roles.manage')"
icon="mdi:pencil-outline" icon="mdi:pencil-outline"
:aria-label="t('common.edit')" :aria-label="t('common.edit')"
variant="ghost" variant="ghost"
@click="openEditDrawer(role)" @click="openEditDrawer(getRoleById(item.id as number)!)"
/> />
<MalioButtonIcon <MalioButtonIcon
v-if="can('core.roles.manage')" v-if="can('core.roles.manage')"
icon="mdi:delete-outline" icon="mdi:delete-outline"
:aria-label="t('common.delete')" :aria-label="t('common.delete')"
variant="ghost" variant="ghost"
:disabled="role.isSystem" :disabled="item.isSystem as boolean"
@click="confirmDelete(role)" @click="confirmDelete(getRoleById(item.id as number)!)"
/> />
</div> </div>
</td> </template>
</tr> </MalioDataTable>
</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>
<!-- Drawer creation/edition --> <!-- Drawer creation/edition -->
<RoleDrawer <RoleDrawer
@@ -122,6 +101,36 @@ useHead({ title: t('admin.roles.title') })
const roles = ref<Role[]>([]) const roles = ref<Role[]>([])
const loading = ref(false) 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 drawerOpen = ref(false)
const selectedRole = ref<Role | null>(null) const selectedRole = ref<Role | null>(null)
const deleteModalOpen = ref(false) const deleteModalOpen = ref(false)