refactor(frontend) : extract reusable DataTable component from repeated table markup
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:
@@ -10,39 +10,15 @@
|
||||
</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">Libellé</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="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
|
||||
@click="openEdit(item)"
|
||||
>
|
||||
<td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</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="2" class="px-4 py-8 text-center text-neutral-400">
|
||||
Aucun effort trouvé.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:items="items"
|
||||
:loading="isLoading"
|
||||
empty-message="Aucun effort trouvé."
|
||||
deletable
|
||||
@row-click="openEdit"
|
||||
@delete="(item) => handleDelete(item.id)"
|
||||
/>
|
||||
|
||||
<TaskEffortDrawer
|
||||
v-model="drawerOpen"
|
||||
@@ -56,6 +32,12 @@
|
||||
import type { TaskEffort } from '~/services/dto/task-effort'
|
||||
import { useTaskEffortService } from '~/services/task-efforts'
|
||||
|
||||
import type { DataTableColumn } from '~/components/DataTable.vue'
|
||||
|
||||
const columns: DataTableColumn[] = [
|
||||
{ key: 'label', label: 'Libellé', primary: true },
|
||||
]
|
||||
|
||||
const { getAll, remove } = useTaskEffortService()
|
||||
const items = ref<TaskEffort[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
@@ -10,46 +10,22 @@
|
||||
</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">Libellé</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700">Couleur</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="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
|
||||
@click="openEdit(item)"
|
||||
>
|
||||
<td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="inline-block h-6 w-6 rounded-full"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
/>
|
||||
</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">
|
||||
Aucune priorité trouvée.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:items="items"
|
||||
:loading="isLoading"
|
||||
empty-message="Aucune priorité trouvée."
|
||||
deletable
|
||||
@row-click="openEdit"
|
||||
@delete="(item) => handleDelete(item.id)"
|
||||
>
|
||||
<template #cell-color="{ item }">
|
||||
<span
|
||||
class="inline-block h-6 w-6 rounded-full"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
/>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<TaskPriorityDrawer
|
||||
v-model="drawerOpen"
|
||||
@@ -63,6 +39,13 @@
|
||||
import type { TaskPriority } from '~/services/dto/task-priority'
|
||||
import { useTaskPriorityService } from '~/services/task-priorities'
|
||||
|
||||
import type { DataTableColumn } from '~/components/DataTable.vue'
|
||||
|
||||
const columns: DataTableColumn[] = [
|
||||
{ key: 'label', label: 'Libellé', primary: true },
|
||||
{ key: 'color', label: 'Couleur' },
|
||||
]
|
||||
|
||||
const { getAll, remove } = useTaskPriorityService()
|
||||
const items = ref<TaskPriority[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
@@ -10,48 +10,22 @@
|
||||
</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">Libellé</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700">Position</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="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
|
||||
@click="openEdit(item)"
|
||||
>
|
||||
<td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="inline-block h-6 w-6 rounded-full"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-neutral-700">{{ item.position }}</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="4" class="px-4 py-8 text-center text-neutral-400">
|
||||
Aucun statut trouvé.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:items="items"
|
||||
:loading="isLoading"
|
||||
empty-message="Aucun statut trouvé."
|
||||
deletable
|
||||
@row-click="openEdit"
|
||||
@delete="(item) => handleDelete(item.id)"
|
||||
>
|
||||
<template #cell-color="{ item }">
|
||||
<span
|
||||
class="inline-block h-6 w-6 rounded-full"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
/>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<TaskStatusDrawer
|
||||
v-model="drawerOpen"
|
||||
@@ -65,6 +39,14 @@
|
||||
import type { TaskStatus } from '~/services/dto/task-status'
|
||||
import { useTaskStatusService } from '~/services/task-statuses'
|
||||
|
||||
import type { DataTableColumn } from '~/components/DataTable.vue'
|
||||
|
||||
const columns: DataTableColumn[] = [
|
||||
{ key: 'label', label: 'Libellé', primary: true },
|
||||
{ key: 'color', label: 'Couleur' },
|
||||
{ key: 'position', label: 'Position', class: 'text-neutral-700' },
|
||||
]
|
||||
|
||||
const { getAll, remove } = useTaskStatusService()
|
||||
const items = ref<TaskStatus[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
@@ -10,46 +10,22 @@
|
||||
</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">Libellé</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700">Couleur</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="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
|
||||
@click="openEdit(item)"
|
||||
>
|
||||
<td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="inline-block h-6 w-6 rounded-full"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
/>
|
||||
</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 type trouvé.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:items="items"
|
||||
:loading="isLoading"
|
||||
empty-message="Aucun type trouvé."
|
||||
deletable
|
||||
@row-click="openEdit"
|
||||
@delete="(item) => handleDelete(item.id)"
|
||||
>
|
||||
<template #cell-color="{ item }">
|
||||
<span
|
||||
class="inline-block h-6 w-6 rounded-full"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
/>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<TaskTypeDrawer
|
||||
v-model="drawerOpen"
|
||||
@@ -63,6 +39,13 @@
|
||||
import type { TaskType } from '~/services/dto/task-type'
|
||||
import { useTaskTypeService } from '~/services/task-types'
|
||||
|
||||
import type { DataTableColumn } from '~/components/DataTable.vue'
|
||||
|
||||
const columns: DataTableColumn[] = [
|
||||
{ key: 'label', label: 'Libellé', primary: true },
|
||||
{ key: 'color', label: 'Couleur' },
|
||||
]
|
||||
|
||||
const { getAll, remove } = useTaskTypeService()
|
||||
const items = ref<TaskType[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
@@ -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)
|
||||
|
||||
77
frontend/components/DataTable.vue
Normal file
77
frontend/components/DataTable.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<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
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
class="px-4 py-3 font-semibold text-neutral-700"
|
||||
>
|
||||
{{ col.label }}
|
||||
</th>
|
||||
<th v-if="deletable" 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="$emit('row-click', item)"
|
||||
>
|
||||
<td
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
class="px-4 py-3"
|
||||
:class="[col.class, { 'font-semibold text-primary-500': col.primary }]"
|
||||
>
|
||||
<slot :name="`cell-${col.key}`" :item="item" :value="item[col.key]">
|
||||
{{ item[col.key] }}
|
||||
</slot>
|
||||
</td>
|
||||
<td v-if="deletable" class="px-4 py-3">
|
||||
<button
|
||||
class="text-red-500 hover:text-red-700"
|
||||
@click.stop="$emit('delete', item)"
|
||||
>
|
||||
<Icon name="mdi:delete-outline" size="20" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="items.length === 0 && !loading">
|
||||
<td
|
||||
:colspan="columns.length + (deletable ? 1 : 0)"
|
||||
class="px-4 py-8 text-center text-neutral-400"
|
||||
>
|
||||
{{ emptyMessage }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
export interface DataTableColumn {
|
||||
key: string
|
||||
label: string
|
||||
primary?: boolean
|
||||
class?: string
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
columns: DataTableColumn[]
|
||||
items: Record<string, any>[]
|
||||
loading?: boolean
|
||||
emptyMessage?: string
|
||||
deletable?: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'row-click', item: any): void
|
||||
(e: 'delete', item: any): void
|
||||
}>()
|
||||
</script>
|
||||
@@ -10,50 +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">Titre</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700">Description</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.title }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="inline-block h-6 w-6 rounded-full"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
/>
|
||||
</td>
|
||||
<td class="max-w-xs truncate px-4 py-3 text-neutral-700">
|
||||
{{ item.description ?? '—' }}
|
||||
</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="4" class="px-4 py-8 text-center text-neutral-400">
|
||||
Aucun groupe trouvé.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:items="items"
|
||||
:loading="isLoading"
|
||||
empty-message="Aucun groupe trouvé."
|
||||
deletable
|
||||
@row-click="openEdit"
|
||||
@delete="(item) => handleDelete(item.id)"
|
||||
>
|
||||
<template #cell-color="{ item }">
|
||||
<span
|
||||
class="inline-block h-6 w-6 rounded-full"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
/>
|
||||
</template>
|
||||
<template #cell-description="{ item }">
|
||||
{{ item.description ?? '—' }}
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<TaskGroupDrawer
|
||||
v-model="drawerOpen"
|
||||
@@ -76,6 +51,14 @@ const emit = defineEmits<{
|
||||
(e: 'updated'): void
|
||||
}>()
|
||||
|
||||
import type { DataTableColumn } from '~/components/DataTable.vue'
|
||||
|
||||
const columns: DataTableColumn[] = [
|
||||
{ key: 'title', label: 'Titre', primary: true },
|
||||
{ key: 'color', label: 'Couleur' },
|
||||
{ key: 'description', label: 'Description', class: 'max-w-xs truncate text-neutral-700' },
|
||||
]
|
||||
|
||||
const { getByProject, remove } = useTaskGroupService()
|
||||
const items = ref<TaskGroup[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
@@ -10,48 +10,22 @@
|
||||
</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">Libellé</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700">Position</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.label }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="inline-block h-6 w-6 rounded-full"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-neutral-700">{{ item.position }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<button
|
||||
class="text-red-500 hover:text-red-700"
|
||||
@click.stop="requestDelete(item)"
|
||||
>
|
||||
<Icon name="mdi:delete-outline" size="20" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="items.length === 0 && !isLoading">
|
||||
<td colspan="4" class="px-4 py-8 text-center text-neutral-400">
|
||||
Aucun statut trouvé.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:items="items"
|
||||
:loading="isLoading"
|
||||
empty-message="Aucun statut trouvé."
|
||||
deletable
|
||||
@row-click="openEdit"
|
||||
@delete="requestDelete"
|
||||
>
|
||||
<template #cell-color="{ item }">
|
||||
<span
|
||||
class="inline-block h-6 w-6 rounded-full"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
/>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<TaskStatusDrawer
|
||||
v-model="drawerOpen"
|
||||
@@ -80,6 +54,14 @@ const props = defineProps<{
|
||||
projectId: number
|
||||
}>()
|
||||
|
||||
import type { DataTableColumn } from '~/components/DataTable.vue'
|
||||
|
||||
const columns: DataTableColumn[] = [
|
||||
{ key: 'label', label: 'Libellé', primary: true },
|
||||
{ key: 'color', label: 'Couleur' },
|
||||
{ key: 'position', label: 'Position', class: 'text-neutral-700' },
|
||||
]
|
||||
|
||||
const statusService = useTaskStatusService()
|
||||
const taskService = useTaskService()
|
||||
|
||||
|
||||
@@ -10,45 +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</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700">Email</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700">Adresse</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700">Téléphone</th>
|
||||
<th class="px-4 py-3 font-semibold text-neutral-700"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="client in clients"
|
||||
:key="client.id"
|
||||
class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
|
||||
@click="openEdit(client)"
|
||||
>
|
||||
<td class="px-4 py-3 font-semibold text-primary-500">{{ client.name }}</td>
|
||||
<td class="px-4 py-3 text-primary-500">{{ client.email ?? '-' }}</td>
|
||||
<td class="px-4 py-3 text-neutral-700">{{ formatAddress(client) }}</td>
|
||||
<td class="px-4 py-3 text-primary-500">{{ client.phone ?? '-' }}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button
|
||||
class="text-red-500 hover:text-red-700"
|
||||
@click.stop="handleDelete(client.id)"
|
||||
>
|
||||
<Icon name="mdi:delete-outline" size="20" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="clients.length === 0 && !isLoading">
|
||||
<td colspan="4" class="px-4 py-8 text-center text-neutral-400">
|
||||
Aucun client trouvé.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:items="clients"
|
||||
:loading="isLoading"
|
||||
empty-message="Aucun client trouvé."
|
||||
deletable
|
||||
@row-click="openEdit"
|
||||
@delete="(item) => handleDelete(item.id)"
|
||||
>
|
||||
<template #cell-email="{ item }">
|
||||
{{ item.email ?? '-' }}
|
||||
</template>
|
||||
<template #cell-address="{ item }">
|
||||
{{ formatAddress(item) }}
|
||||
</template>
|
||||
<template #cell-phone="{ item }">
|
||||
{{ item.phone ?? '-' }}
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<ClientDrawer
|
||||
v-model="drawerOpen"
|
||||
@@ -64,6 +44,15 @@ import { useClientService } from '~/services/clients'
|
||||
|
||||
useHead({ title: 'Clients' })
|
||||
|
||||
import type { DataTableColumn } from '~/components/DataTable.vue'
|
||||
|
||||
const columns: DataTableColumn[] = [
|
||||
{ key: 'name', label: 'Nom', primary: true },
|
||||
{ key: 'email', label: 'Email', class: 'text-primary-500' },
|
||||
{ key: 'address', label: 'Adresse', class: 'text-neutral-700' },
|
||||
{ key: 'phone', label: 'Téléphone', class: 'text-primary-500' },
|
||||
]
|
||||
|
||||
const { getAll, remove } = useClientService()
|
||||
const clients = ref<Client[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
Reference in New Issue
Block a user