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

refactor(frontend) : extract reusable DataTable component from repeated table markup

Browse Source 
Replace inline table HTML in 8 files with a shared DataTable component
supporting columns definition, scoped slots for custom cells, and
built-in delete action.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
THOLOT DECHENE Matthieu
2026-03-10 22:19:25 +01:00
parent e9ca888971
commit fa0adfde88
9 changed files with 267 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/components/AdminUserTab.vue
View File

@@ -10,49 +10,25 @@
</button>
</div>
<div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
<table class="w-full text-left text-sm">
<thead class="border-b border-neutral-200 bg-neutral-50">
<tr>
<th class="px-4 py-3 font-semibold text-neutral-700">Nom d'utilisateur</th>
<th class="px-4 py-3 font-semibold text-neutral-700">Rôles</th>
<th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in items"
:key="item.id"
class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
@click="openEdit(item)"
>
<td class="px-4 py-3 font-semibold text-primary-500">{{ item.username }}</td>
<td class="px-4 py-3">
<span
v-for="role in item.roles"
:key="role"
class="mr-1 rounded-full bg-neutral-200 px-2 py-0.5 text-xs font-semibold text-neutral-700"
>
{{ role }}
</span>
</td>
<td class="px-4 py-3">
<button
class="text-red-500 hover:text-red-700"
@click.stop="handleDelete(item.id)"
>
<Icon name="mdi:delete-outline" size="20" />
</button>
</td>
</tr>
<tr v-if="items.length === 0 && !isLoading">
<td colspan="3" class="px-4 py-8 text-center text-neutral-400">
Aucun utilisateur trouvé.
</td>
</tr>
</tbody>
</table>
</div>
<DataTable
:columns="columns"
:items="items"
:loading="isLoading"
empty-message="Aucun utilisateur trouvé."
deletable
@row-click="openEdit"
@delete="(item) => handleDelete(item.id)"
>
<template #cell-roles="{ item }">
<span
v-for="role in item.roles"
:key="role"
class="mr-1 rounded-full bg-neutral-200 px-2 py-0.5 text-xs font-semibold text-neutral-700"
>
{{ role }}
</span>
</template>
</DataTable>
<UserDrawer
v-model="drawerOpen"
@@ -66,6 +42,13 @@
import type { UserData } from '~/services/dto/user-data'
import { useUserService } from '~/services/users'
import type { DataTableColumn } from '~/components/DataTable.vue'
const columns: DataTableColumn[] = [
{ key: 'username', label: "Nom d'utilisateur", primary: true },
{ key: 'roles', label: 'Rôles' },
]
const { getAll, remove } = useUserService()
const items = ref<UserData[]>([])
const isLoading = ref(true)