feat(directory) : add Clients/Prospects repertoire front layer
LST-58 (2.4) front. Completes the Directory module.
- New frontend/modules/directory/ layer (auto-detected): /directory page with
Clients and Prospects tabs.
- Client front moved into the layer (clients service + client DTO +
ClientDrawer). New prospects service, prospect DTO and ProspectDrawer (with
a "Convert to client" action calling POST /prospects/{id}/convert).
- Consumers repointed to ~/modules/directory/... (admin client tab, PM project
drawer + project pages + project DTO, time-tracking page + export drawer).
- Sidebar admin item /directory gated by the directory module; /directory
protected by the admin middleware. i18n keys added (directory.*, prospects.*).
nuxt build passes; routes preserved.
Adds the 2.4 plan doc.
This commit is contained in:
Matthieu
@@ -0,0 +1,240 @@
|
||||
<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-city="{ item }">
|
||||
{{ (item as Client).city ?? '—' }}
|
||||
</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
|
||||
v-if="!(item as ProspectRow).convertedClient"
|
||||
class="flex justify-end"
|
||||
@click.stop
|
||||
>
|
||||
<MalioButtonIcon
|
||||
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)"
|
||||
/>
|
||||
</div>
|
||||
<span v-else class="text-neutral-300">—</span>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
</div>
|
||||
</template>
|
||||
</MalioTabList>
|
||||
|
||||
<ClientDrawer
|
||||
v-model="clientDrawerOpen"
|
||||
:client="selectedClient"
|
||||
@saved="loadClients"
|
||||
/>
|
||||
<ProspectDrawer
|
||||
v-model="prospectDrawerOpen"
|
||||
:prospect="selectedProspect"
|
||||
@saved="loadProspects"
|
||||
/>
|
||||
</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: 'city', label: t('prospects.fields.city') },
|
||||
]
|
||||
|
||||
async function loadClients() {
|
||||
clients.value = await clientService.getAll()
|
||||
}
|
||||
|
||||
function openCreateClient() {
|
||||
selectedClient.value = null
|
||||
clientDrawerOpen.value = true
|
||||
}
|
||||
|
||||
function openEditClient(item: Record<string, unknown>) {
|
||||
selectedClient.value = item as Client
|
||||
clientDrawerOpen.value = true
|
||||
}
|
||||
|
||||
// --- 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>) {
|
||||
selectedProspect.value = item as Prospect
|
||||
prospectDrawerOpen.value = true
|
||||
}
|
||||
|
||||
async function convertProspect(row: ProspectRow) {
|
||||
await prospectService.convert(row.id)
|
||||
await loadProspects()
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user