Matthieu
312 lines
11 KiB
Vue
312 lines
11 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-6">
|
|
<h1 class="text-2xl font-bold text-neutral-900">
|
|
{{ $t('directory.title') }}
|
|
</h1>
|
|
|
|
<MalioTabList v-model="activeTab" :tabs="tabs">
|
|
<!-- Clients -->
|
|
<template #clients>
|
|
<div class="flex min-h-[30rem] flex-col gap-4 pt-10">
|
|
<div class="flex items-center justify-end">
|
|
<MalioButton
|
|
icon-name="mdi:plus"
|
|
icon-position="left"
|
|
button-class="w-auto px-4"
|
|
:label="$t('directory.clients.add')"
|
|
@click="openCreateClient"
|
|
/>
|
|
</div>
|
|
|
|
<MalioDataTable
|
|
:columns="clientColumns"
|
|
:items="clients"
|
|
:total-items="clients.length"
|
|
:empty-message="$t('directory.clients.empty')"
|
|
@row-click="openEditClient"
|
|
>
|
|
<template #cell-email="{ item }">
|
|
{{ (item as Client).email ?? '—' }}
|
|
</template>
|
|
<template #cell-phone="{ item }">
|
|
{{ (item as Client).phone ?? '—' }}
|
|
</template>
|
|
<template #cell-actions="{ item }">
|
|
<div class="flex justify-end" @click.stop>
|
|
<MalioButtonIcon
|
|
icon="mdi:trash-can-outline"
|
|
:aria-label="$t('common.delete')"
|
|
button-class="!bg-red-100 !text-red-700"
|
|
:icon-size="18"
|
|
@click="askDeleteClient(item as Client)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</MalioDataTable>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Prospects -->
|
|
<template #prospects>
|
|
<div class="flex min-h-[30rem] flex-col gap-4 pt-10">
|
|
<div class="flex flex-wrap items-end justify-between gap-3">
|
|
<MalioSelect
|
|
v-model="statusFilter"
|
|
:label="$t('prospects.fields.status')"
|
|
:options="statusOptions"
|
|
:empty-option-label="$t('directory.prospects.allStatuses')"
|
|
group-class="w-48"
|
|
/>
|
|
<MalioButton
|
|
icon-name="mdi:plus"
|
|
icon-position="left"
|
|
button-class="w-auto px-4"
|
|
:label="$t('directory.prospects.add')"
|
|
@click="openCreateProspect"
|
|
/>
|
|
</div>
|
|
|
|
<MalioDataTable
|
|
:columns="prospectColumns"
|
|
:items="prospectRows"
|
|
:total-items="prospectRows.length"
|
|
:empty-message="$t('directory.prospects.empty')"
|
|
@row-click="openEditProspect"
|
|
>
|
|
<template #cell-status="{ item }">
|
|
<StatusBadge
|
|
:label="statusLabel((item as ProspectRow).status)"
|
|
:variant="statusVariant((item as ProspectRow).status)"
|
|
/>
|
|
</template>
|
|
<template #cell-email="{ item }">
|
|
{{ (item as ProspectRow).email ?? '—' }}
|
|
</template>
|
|
<template #cell-phone="{ item }">
|
|
{{ (item as ProspectRow).phone ?? '—' }}
|
|
</template>
|
|
<template #cell-actions="{ item }">
|
|
<div class="flex justify-end gap-2" @click.stop>
|
|
<MalioButtonIcon
|
|
v-if="!(item as ProspectRow).convertedClient"
|
|
icon="mdi:account-convert"
|
|
:aria-label="$t('prospects.convert')"
|
|
button-class="!bg-green-100 !text-green-700"
|
|
:icon-size="18"
|
|
@click="convertProspect(item as ProspectRow)"
|
|
/>
|
|
<MalioButtonIcon
|
|
icon="mdi:trash-can-outline"
|
|
:aria-label="$t('common.delete')"
|
|
button-class="!bg-red-100 !text-red-700"
|
|
:icon-size="18"
|
|
@click="askDeleteProspect(item as ProspectRow)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</MalioDataTable>
|
|
</div>
|
|
</template>
|
|
</MalioTabList>
|
|
|
|
<ClientDrawer
|
|
v-model="clientDrawerOpen"
|
|
:client="selectedClient"
|
|
@saved="loadClients"
|
|
/>
|
|
<ProspectDrawer
|
|
v-model="prospectDrawerOpen"
|
|
:prospect="selectedProspect"
|
|
@saved="onProspectSaved"
|
|
/>
|
|
|
|
<ConfirmDeleteModal
|
|
v-model="deleteModalOpen"
|
|
:title="deleteModalTitle"
|
|
:message="deleteModalMessage"
|
|
@confirm="confirmDelete"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Client } from '~/modules/directory/services/dto/client'
|
|
import { useClientService } from '~/modules/directory/services/clients'
|
|
import type { Prospect, ProspectStatus } from '~/modules/directory/services/dto/prospect'
|
|
import { useProspectService } from '~/modules/directory/services/prospects'
|
|
|
|
definePageMeta({ middleware: ['admin'] })
|
|
|
|
type ProspectRow = Prospect
|
|
|
|
const { t } = useI18n()
|
|
useHead({ title: t('directory.title') })
|
|
|
|
const clientService = useClientService()
|
|
const prospectService = useProspectService()
|
|
|
|
const activeTab = ref('clients')
|
|
const tabs = [
|
|
{ key: 'clients', label: t('directory.tabs.clients'), icon: 'mdi:account-tie-outline' },
|
|
{ key: 'prospects', label: t('directory.tabs.prospects'), icon: 'mdi:account-search-outline' },
|
|
]
|
|
|
|
// --- Clients ---
|
|
const clients = ref<Client[]>([])
|
|
const clientDrawerOpen = ref(false)
|
|
const selectedClient = ref<Client | null>(null)
|
|
|
|
const clientColumns = [
|
|
{ key: 'name', label: t('prospects.fields.name') },
|
|
{ key: 'email', label: t('prospects.fields.email') },
|
|
{ key: 'phone', label: t('prospects.fields.phone') },
|
|
{ key: 'actions', label: '' },
|
|
]
|
|
|
|
async function loadClients() {
|
|
clients.value = await clientService.getAll()
|
|
}
|
|
|
|
function openCreateClient() {
|
|
selectedClient.value = null
|
|
clientDrawerOpen.value = true
|
|
}
|
|
|
|
function openEditClient(item: Record<string, unknown>) {
|
|
navigateTo(`/directory/clients/${(item as Client).id}`)
|
|
}
|
|
|
|
// --- Prospects ---
|
|
const prospects = ref<Prospect[]>([])
|
|
const prospectDrawerOpen = ref(false)
|
|
const selectedProspect = ref<Prospect | null>(null)
|
|
const statusFilter = ref<ProspectStatus | null>(null)
|
|
|
|
const statusOptions = [
|
|
{ label: t('prospects.status.new'), value: 'new' },
|
|
{ label: t('prospects.status.contacted'), value: 'contacted' },
|
|
{ label: t('prospects.status.qualified'), value: 'qualified' },
|
|
{ label: t('prospects.status.won'), value: 'won' },
|
|
{ label: t('prospects.status.lost'), value: 'lost' },
|
|
]
|
|
|
|
const prospectColumns = [
|
|
{ key: 'name', label: t('prospects.fields.name') },
|
|
{ key: 'company', label: t('prospects.fields.company') },
|
|
{ key: 'status', label: t('prospects.fields.status') },
|
|
{ key: 'email', label: t('prospects.fields.email') },
|
|
{ key: 'phone', label: t('prospects.fields.phone') },
|
|
{ key: 'actions', label: '' },
|
|
]
|
|
|
|
const prospectRows = computed<ProspectRow[]>(() => prospects.value)
|
|
|
|
function statusLabel(status: ProspectStatus): string {
|
|
return t(`prospects.status.${status}`)
|
|
}
|
|
|
|
function statusVariant(status: ProspectStatus): 'neutral' | 'info' | 'success' | 'warning' | 'danger' {
|
|
switch (status) {
|
|
case 'new':
|
|
return 'info'
|
|
case 'contacted':
|
|
return 'warning'
|
|
case 'qualified':
|
|
return 'neutral'
|
|
case 'won':
|
|
return 'success'
|
|
case 'lost':
|
|
return 'danger'
|
|
default:
|
|
return 'neutral'
|
|
}
|
|
}
|
|
|
|
async function loadProspects() {
|
|
prospects.value = await prospectService.getAll(statusFilter.value ?? undefined)
|
|
}
|
|
|
|
function openCreateProspect() {
|
|
selectedProspect.value = null
|
|
prospectDrawerOpen.value = true
|
|
}
|
|
|
|
function openEditProspect(item: Record<string, unknown>) {
|
|
navigateTo(`/directory/prospects/${(item as Prospect).id}`)
|
|
}
|
|
|
|
async function convertProspect(row: ProspectRow) {
|
|
await prospectService.convert(row.id)
|
|
// La conversion crée un client et retire le prospect : rafraîchir les deux listes.
|
|
await Promise.all([loadProspects(), loadClients()])
|
|
}
|
|
|
|
// Le ProspectDrawer porte aussi le bouton « Convertir » : son event 'saved' peut
|
|
// donc être une conversion → toujours rafraîchir les deux listes par sécurité.
|
|
async function onProspectSaved() {
|
|
await Promise.all([loadProspects(), loadClients()])
|
|
}
|
|
|
|
// --- Suppression (clients & prospects) ---
|
|
type DeleteTarget =
|
|
| { type: 'client'; item: Client }
|
|
| { type: 'prospect'; item: Prospect }
|
|
|
|
const deleteModalOpen = ref(false)
|
|
const deleteTarget = ref<DeleteTarget | null>(null)
|
|
|
|
const deleteModalTitle = computed(() =>
|
|
deleteTarget.value?.type === 'prospect'
|
|
? t('prospects.deleteConfirmTitle')
|
|
: t('clients.deleteConfirmTitle'),
|
|
)
|
|
|
|
const deleteModalMessage = computed(() => {
|
|
if (!deleteTarget.value) return ''
|
|
const name = deleteTarget.value.item.name
|
|
return deleteTarget.value.type === 'prospect'
|
|
? t('prospects.deleteConfirmMessage', { name })
|
|
: t('clients.deleteConfirmMessage', { name })
|
|
})
|
|
|
|
function askDeleteClient(item: Client) {
|
|
deleteTarget.value = { type: 'client', item }
|
|
deleteModalOpen.value = true
|
|
}
|
|
|
|
function askDeleteProspect(item: Prospect) {
|
|
deleteTarget.value = { type: 'prospect', item }
|
|
deleteModalOpen.value = true
|
|
}
|
|
|
|
async function confirmDelete() {
|
|
const target = deleteTarget.value
|
|
if (!target) return
|
|
|
|
if (target.type === 'client') {
|
|
await clientService.remove(target.item.id)
|
|
await loadClients()
|
|
} else {
|
|
await prospectService.remove(target.item.id)
|
|
await loadProspects()
|
|
}
|
|
|
|
deleteModalOpen.value = false
|
|
deleteTarget.value = null
|
|
}
|
|
|
|
watch(statusFilter, loadProspects)
|
|
|
|
onMounted(async () => {
|
|
await Promise.all([loadClients(), loadProspects()])
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* MalioTabList (lib) : aère les onglets verticalement (espace haut/bas du texte) */
|
|
:deep([role="tab"]) {
|
|
padding-top: 0.9rem;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
</style>
|