111 lines
3.7 KiB
Vue
111 lines
3.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-2xl font-bold text-neutral-900">Clients</h1>
|
|
<button
|
|
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
|
|
@click="openCreate"
|
|
>
|
|
+ Ajouter un client
|
|
</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>
|
|
|
|
<ClientDrawer
|
|
v-model="drawerOpen"
|
|
:client="selectedClient"
|
|
@saved="onSaved"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Client } from '~/services/dto/client'
|
|
import { useClientService } from '~/services/clients'
|
|
|
|
useHead({ title: 'Clients' })
|
|
|
|
const { getAll, remove } = useClientService()
|
|
const clients = ref<Client[]>([])
|
|
const isLoading = ref(true)
|
|
const drawerOpen = ref(false)
|
|
const selectedClient = ref<Client | null>(null)
|
|
|
|
async function loadClients() {
|
|
isLoading.value = true
|
|
try {
|
|
clients.value = await getAll()
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
function openCreate() {
|
|
selectedClient.value = null
|
|
drawerOpen.value = true
|
|
}
|
|
|
|
function openEdit(client: Client) {
|
|
selectedClient.value = client
|
|
drawerOpen.value = true
|
|
}
|
|
|
|
function formatAddress(client: Client): string {
|
|
return [client.street, client.postalCode, client.city]
|
|
.filter(Boolean)
|
|
.join(', ') || '-'
|
|
}
|
|
|
|
async function handleDelete(id: number) {
|
|
await remove(id)
|
|
await loadClients()
|
|
}
|
|
|
|
async function onSaved() {
|
|
await loadClients()
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadClients()
|
|
})
|
|
</script>
|