feat(admin) : move clients into admin page, remove standalone page
This commit is contained in:
@@ -19,6 +19,7 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<AdminClientTab v-if="activeTab === 'clients'" />
|
||||
<AdminEffortTab v-if="activeTab === 'efforts'" />
|
||||
<AdminPriorityTab v-if="activeTab === 'priorities'" />
|
||||
<AdminTypeTab v-if="activeTab === 'types'" />
|
||||
@@ -31,6 +32,7 @@
|
||||
useHead({ title: 'Administration' })
|
||||
|
||||
const tabs = [
|
||||
{ key: 'clients', label: 'Clients' },
|
||||
{ key: 'efforts', label: 'Efforts' },
|
||||
{ key: 'priorities', label: 'Priorités' },
|
||||
{ key: 'types', label: 'Types' },
|
||||
@@ -39,5 +41,5 @@ const tabs = [
|
||||
|
||||
type TabKey = typeof tabs[number]['key']
|
||||
|
||||
const activeTab = ref<TabKey>('efforts')
|
||||
const activeTab = ref<TabKey>('clients')
|
||||
</script>
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold text-primary-500">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>
|
||||
|
||||
<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"
|
||||
: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' })
|
||||
|
||||
import type { DataTableColumn } from '~/components/ui/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)
|
||||
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>
|
||||
Reference in New Issue
Block a user