[ERP-62] Page Répertoire clients (datatable + Ajouter / Exporter) (#44)

## ERP-62 — Page Répertoire clients (datatable + Ajouter / Exporter) Tâche Lesstime #480. **Stacke sur ERP-61** (clés i18n `commercial.clients.*`) — non encore mergé : la diff vers `develop` inclut le commit ERP-61 tant qu'il n'est pas mergé. ### Front - Page `/clients` (route à plat) : `MalioDataTable` 6 colonnes (Nom entreprise / Contact / Téléphone formaté / Email / codes Catégories / badges Site(s)), toggle « Voir les archivés » (état 100 % local), boutons **+ Ajouter** (visible si `commercial.clients.manage`) et **Exporter** (visible si `view`, télécharge `clients/export.xlsx` via `useApi`), clic ligne → `/clients/{id}`, empty state. - Composable `useClientsRepository` = wrapper de `usePaginatedList<Client>({ url: '/clients' })` + toggle `includeArchived` (repasse page 1). - Util `formatPhoneFR` (signature cible à coordonner avec ERP-66 / 1.13) + clé i18n `showArchived`. ### Back — ⚠️ MAJ contrat de sérialisation (incluse dans cette MR) Le `GET /api/clients` n'exposait ni les codes catégories ni les sites en liste (le bloc Lesstime l'affirmait à tort). Corrigé : - `Client` : `category:read` + `site:read` ajoutés aux `normalizationContext` (GetCollection/Get/Post/Patch) + accesseur agrégé `getSites()` (`#[Groups(client:read)]`). - `DoctrineClientRepository::createListQueryBuilder` : jointures + `addSelect` (categories / addresses / sites) anti N+1. - Aucune migration (pure sérialisation). ### Tests - Back : `ClientApiTest` (codes catégories + sites name/color en liste). `make test` ✅ 454. - Front : `useClientsRepository.spec.ts` + `phone.test.ts`. `vitest` ✅ 111. `nuxi typecheck` ✅ (mes fichiers). ### Non couvert Golden path navigateur non joué : dev-nuxt (conteneur) cassé (résolution `@malio/layer-ui/tailwind.config.ts`) + BDD sans clients démo (nécessite `make db-reset`). Aspects front restants traités séparément. --------- Co-authored-by: Matthieu <contact@malio.fr> Reviewed-on: #44 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-06-02 14:16:29 +00:00
parent 79dffccc79
commit ee1521384e
12 changed files with 1016 additions and 32 deletions
@@ -0,0 +1,85 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import type { HydraCollection } from '~/shared/utils/api'
+import type { Client } from '../useClientsRepository'
+
+// `useApi` est un auto-import Nuxt : on le stubbe globalement pour intercepter
+// les appels declenches par usePaginatedList (que useClientsRepository enveloppe)
+// et controler les reponses. Meme pattern que useCategoriesAdmin.spec.ts.
+const mockGet = vi.hoisted(() => vi.fn())
+vi.stubGlobal('useApi', () => ({
+    get: mockGet,
+    post: vi.fn(),
+    put: vi.fn(),
+    patch: vi.fn(),
+    delete: vi.fn(),
+}))
+
+// Import APRES le stub pour que useApi soit bien resolu au top-level du module.
+const { useClientsRepository } = await import('../useClientsRepository')
+
+/** Envelope Hydra minimale (la liste reelle des membres importe peu ici). */
+function makeHydra(total: number): HydraCollection<Client> {
+    return { totalItems: total, member: [] }
+}
+
+describe('useClientsRepository', () => {
+    beforeEach(() => {
+        mockGet.mockReset()
+        // 25 items → 3 pages a 10/page : permet de tester la navigation page 2.
+        mockGet.mockResolvedValue(makeHydra(25))
+    })
+
+    it('cible la ressource /clients en page 1 par defaut', async () => {
+        const repo = useClientsRepository()
+        await repo.fetch()
+
+        expect(mockGet).toHaveBeenLastCalledWith(
+            '/clients',
+            { page: 1, itemsPerPage: 10 },
+            expect.objectContaining({ toast: false }),
+        )
+    })
+
+    it('pousse les filtres du drawer (categories multi, sites, archives) et retombe en page 1', async () => {
+        const repo = useClientsRepository()
+        await repo.fetch()
+        await repo.goToPage(2)
+        expect(repo.currentPage.value).toBe(2)
+
+        await repo.setFilters(
+            {
+                search: 'acme',
+                'categoryCode[]': ['DISTRIBUTEUR', 'COURTIER'],
+                'siteId[]': ['1', '2'],
+                archivedOnly: true,
+            },
+            { replace: true },
+        )
+
+        expect(repo.currentPage.value).toBe(1)
+        expect(mockGet).toHaveBeenLastCalledWith(
+            '/clients',
+            {
+                search: 'acme',
+                'categoryCode[]': ['DISTRIBUTEUR', 'COURTIER'],
+                'siteId[]': ['1', '2'],
+                archivedOnly: true,
+                page: 1,
+                itemsPerPage: 10,
+            },
+            expect.objectContaining({ toast: false }),
+        )
+    })
+
+    it('repasse a une query propre apres reinitialisation des filtres', async () => {
+        const repo = useClientsRepository()
+        await repo.setFilters({ search: 'acme', archivedOnly: true }, { replace: true })
+        await repo.setFilters({}, { replace: true })
+
+        expect(mockGet).toHaveBeenLastCalledWith(
+            '/clients',
+            { page: 1, itemsPerPage: 10 },
+            expect.objectContaining({ toast: false }),
+        )
+    })
+})
@@ -0,0 +1,53 @@
+import { usePaginatedList } from '~/shared/composables/usePaginatedList'
+
+/**
+ * Site Starseed rattache a une adresse du client, tel qu'embarque en LISTE
+ * (groupe site:read) pour la colonne « Site(s) » du Repertoire (badges colores).
+ */
+export interface ClientSite {
+    id: number
+    name: string
+    color: string
+}
+
+/**
+ * Categorie rattachee au client, embarquee en LISTE (groupe category:read).
+ * Seul le `code` (stable, MAJUSCULE — ERP-78) est affiche dans la colonne
+ * « Catégories ». Les autres champs sont presents mais non utilises ici.
+ */
+export interface ClientCategory {
+    code: string
+    name?: string
+}
+
+/**
+ * Vue MINIMALE d'un client pour le Repertoire (datatable). Volontairement
+ * partielle : seuls les champs des colonnes + l'id (navigation) sont types ici.
+ * Le detail complet (onglets) est hors perimetre de cet ecran (ERP-62).
+ */
+export interface Client {
+    id: number
+    companyName: string
+    categories: ClientCategory[]
+    sites: ClientSite[]
+    /** Date ISO de derniere modification (default:read) — colonne « Dernière activité ». */
+    updatedAt: string | null
+    isArchived: boolean
+}
+
+/**
+ * Repertoire clients (ERP-62) — simple enveloppe de `usePaginatedList<Client>`
+ * sur la ressource `/clients` (RG-13 : pagination serveur obligatoire ; jamais
+ * de chargement integral en memoire).
+ *
+ * Les filtres (recherche, categories, sites, archives) sont pilotes par la page
+ * via `setFilters` du composable partage — la remise en page 1 est garantie.
+ *
+ * Volontairement PAR INSTANCE (pas de singleton module-level) : l'etat tableau
+ * est propre a l'ecran Repertoire et meurt avec lui, comme tout consommateur de
+ * `usePaginatedList` (cf. sites.vue / categories.vue). Aucun reset au logout a
+ * gerer.
+ */
+export function useClientsRepository() {
+    return usePaginatedList<Client>({ url: '/clients' })
+}
@@ -0,0 +1,421 @@
+<template>
+    <div>
+        <PageHeader>
+            {{ t('commercial.clients.title') }}
+            <template #actions>
+                <!-- gap-12 = 48px d'espacement entre Ajouter et Filtres. -->
+                <div class="flex items-center gap-12">
+                    <MalioButton
+                        v-if="canManage"
+                        variant="secondary"
+                        :label="t('commercial.clients.add')"
+                        icon-name="mdi:add-bold"
+                        icon-position="left"
+                        @click="goToCreate"
+                    />
+                    <!-- Bouton Filtres a DROITE d'Ajouter : meme design que
+                         l'audit-log. Le compteur reflete les filtres actifs. -->
+                    <MalioButton
+                        v-if="canView"
+                        variant="tertiary"
+                        :label="filterButtonLabel"
+                        icon-name="mdi:tune"
+                        icon-position="left"
+                        icon-size="24"
+                        button-class="w-[184px] justify-start gap-4 text-black"
+                        @click="openFilters"
+                    />
+                </div>
+            </template>
+        </PageHeader>
+
+        <!-- Datatable branchee sur usePaginatedList via useClientsRepository :
+             pagination serveur, tri companyName ASC par defaut (cote back). -->
+        <MalioDataTable
+            :columns="columns"
+            :items="rows"
+            :total-items="totalItems"
+            :page="currentPage"
+            :per-page="itemsPerPage"
+            :per-page-options="itemsPerPageOptions"
+            row-clickable
+            table-class="table-fixed"
+            :empty-message="t('commercial.clients.empty')"
+            @row-click="onRowClick"
+            @update:page="goToPage"
+            @update:per-page="setItemsPerPage"
+        >
+            <!-- Categories : codes stables separes par une virgule (ERP-78). -->
+            <template #cell-categories="{ item }">
+                {{ formatCategories(item) }}
+            </template>
+
+            <!-- Sites : badges colores (name + color), agreges des adresses. -->
+            <template #cell-sites="{ item }">
+                <span class="flex flex-wrap gap-1">
+                    <span
+                        v-for="site in (item.sites as ClientSite[])"
+                        :key="site.id"
+                        class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium text-white"
+                        :style="{ backgroundColor: site.color }"
+                    >
+                        {{ site.name }}
+                    </span>
+                </span>
+            </template>
+
+            <!-- Derniere activite : date de derniere modification (updatedAt). -->
+            <template #cell-lastActivity="{ item }">
+                {{ formatLastActivity(item) }}
+            </template>
+        </MalioDataTable>
+
+        <div class="flex justify-center mt-6">
+            <MalioButton
+                v-if="canView"
+                variant="primary"
+                :label="t('commercial.clients.export')"
+                :disabled="exporting"
+                @click="exportXlsx"
+            />
+        </div>
+
+        <!-- Drawer de filtres : etat BROUILLON, applique uniquement au clic sur
+             « Appliquer ». Meme pattern que l'audit-log. Etat 100 % local, jamais
+             dans l'URL (regle ABSOLUE n°6). -->
+        <MalioDrawer
+            v-model="filterDrawerOpen"
+            drawer-class="max-w-[450px]"
+            body-class="p-0"
+            footer-class="justify-between border-t border-black p-6"
+        >
+            <template #header>
+                <h2 class="text-[24px] font-bold uppercase">{{ t('commercial.clients.filters.title') }}</h2>
+            </template>
+
+            <MalioAccordion>
+                <!-- Recherche : nom societe + contact + email (param `search`). -->
+                <MalioAccordionItem :title="t('commercial.clients.filters.search')" value="search">
+                    <MalioInputText
+                        v-model="draftSearch"
+                        icon-name="mdi:magnify"
+                    />
+                </MalioAccordionItem>
+
+                <!-- Categories : cases a cocher (multi). Valeur = code stable. -->
+                <MalioAccordionItem :title="t('commercial.clients.filters.categories')" value="categories">
+                    <div class="flex flex-col">
+                        <MalioCheckbox
+                            v-for="opt in categoryOptions"
+                            :id="`filter-category-${opt.value}`"
+                            :key="opt.value"
+                            :label="opt.label"
+                            :model-value="draftCategoryCodes.includes(opt.value)"
+                            @update:model-value="(val: boolean) => toggleCategory(opt.value, val)"
+                        />
+                    </div>
+                </MalioAccordionItem>
+
+                <!-- Sites : cases a cocher (multi). Valeur = id du site. -->
+                <MalioAccordionItem :title="t('commercial.clients.filters.sites')" value="sites">
+                    <div class="flex flex-col">
+                        <MalioCheckbox
+                            v-for="opt in siteOptions"
+                            :id="`filter-site-${opt.value}`"
+                            :key="opt.value"
+                            :label="opt.label"
+                            :model-value="draftSiteIds.includes(opt.value)"
+                            @update:model-value="(val: boolean) => toggleSite(opt.value, val)"
+                        />
+                    </div>
+                </MalioAccordionItem>
+
+                <!-- Statut : bool unique. Coche = archives uniquement, sinon actifs. -->
+                <MalioAccordionItem :title="t('commercial.clients.filters.status')" value="status">
+                    <MalioCheckbox
+                        id="filter-archived-only"
+                        :label="t('commercial.clients.filters.archivedOnly')"
+                        :model-value="draftArchivedOnly"
+                        @update:model-value="(val: boolean) => draftArchivedOnly = val"
+                    />
+                </MalioAccordionItem>
+            </MalioAccordion>
+
+            <template #footer>
+                <MalioButton
+                    variant="tertiary"
+                    :label="t('commercial.clients.filters.reset')"
+                    button-class="w-m-btn-action"
+                    @click="resetFilters"
+                />
+                <MalioButton
+                    variant="primary"
+                    :label="t('commercial.clients.filters.apply')"
+                    button-class="w-[170px]"
+                    @click="applyFilters"
+                />
+            </template>
+        </MalioDrawer>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import type { Client, ClientSite } from '~/modules/commercial/composables/useClientsRepository'
+
+interface FilterOption {
+    value: string
+    label: string
+}
+
+const { t } = useI18n()
+const api = useApi()
+const router = useRouter()
+const toast = useToast()
+const { can } = usePermissions()
+
+useHead({ title: t('commercial.clients.title') })
+
+// Bouton « Ajouter » reserve a `manage` (POST /clients garde manage seul →
+// Compta / Usine ne creent pas). « Exporter » et « Filtres » suivent `view`.
+const canManage = computed(() => can('commercial.clients.manage'))
+const canView = computed(() => can('commercial.clients.view'))
+
+const {
+    items: clients,
+    totalItems,
+    currentPage,
+    itemsPerPage,
+    itemsPerPageOptions,
+    fetch: loadClients,
+    goToPage,
+    setItemsPerPage,
+    setFilters,
+} = useClientsRepository()
+
+// Mappe les clients en objets « plats » pour MalioDataTable (items typees
+// Record<string, unknown>[]) : un objet litteral porte une signature d'index
+// implicite, contrairement a l'interface Client. Meme pattern que sites.vue.
+const rows = computed(() => clients.value.map(client => ({
+    id: client.id,
+    companyName: client.companyName,
+    categories: client.categories,
+    sites: client.sites,
+    updatedAt: client.updatedAt,
+})))
+
+const columns = [
+    { key: 'companyName', label: t('commercial.clients.column.companyName') },
+    { key: 'categories', label: t('commercial.clients.column.categories') },
+    { key: 'sites', label: t('commercial.clients.column.sites') },
+    { key: 'lastActivity', label: t('commercial.clients.column.lastActivity') },
+]
+
+/** Codes des categories du client, separes par une virgule (ERP-78). */
+function formatCategories(item: Record<string, unknown>): string {
+    const categories = (item.categories as Client['categories']) ?? []
+    return categories.map(c => c.code).join(', ')
+}
+
+/**
+ * Derniere activite : faute de suivi d'activite metier au M1, on affiche la
+ * date de derniere modification de la fiche (updatedAt, expose en liste via
+ * default:read). Format court francais jj/mm/aaaa.
+ */
+function formatLastActivity(item: Record<string, unknown>): string {
+    const value = item.updatedAt as string | null | undefined
+    if (!value) {
+        return ''
+    }
+
+    // Garde-fou date invalide : un updatedAt mal forme donnerait « Invalid Date ».
+    const date = new Date(value)
+    if (Number.isNaN(date.getTime())) {
+        return ''
+    }
+
+    return date.toLocaleDateString('fr-FR')
+}
+
+/** Clic sur une ligne → ecran Consultation (route a plat /clients/{id}). */
+function onRowClick(item: Record<string, unknown>): void {
+    router.push(`/clients/${item.id}`)
+}
+
+function goToCreate(): void {
+    router.push('/clients/new')
+}
+
+// ── Filtres (drawer) ────────────────────────────────────────────────────────
+// Deux niveaux d'etat (pattern audit-log) :
+//  - APPLIED : pilote la liste/l'export + le compteur du bouton. Modifie
+//    uniquement au clic « Appliquer » / « Réinitialiser ».
+//  - DRAFT : edite librement dans le drawer ; recopie vers applied a la validation.
+const filterDrawerOpen = ref(false)
+
+const draftSearch = ref('')
+const draftCategoryCodes = ref<string[]>([])
+const draftSiteIds = ref<string[]>([])
+const draftArchivedOnly = ref(false)
+
+const appliedSearch = ref('')
+const appliedCategoryCodes = ref<string[]>([])
+const appliedSiteIds = ref<string[]>([])
+const appliedArchivedOnly = ref(false)
+
+// Options des selects multi, chargees une fois (referentiels courts).
+const categoryOptions = ref<FilterOption[]>([])
+const siteOptions = ref<FilterOption[]>([])
+
+const activeFilterCount = computed(() => {
+    let count = 0
+    if (appliedSearch.value.trim() !== '') count++
+    if (appliedCategoryCodes.value.length > 0) count++
+    if (appliedSiteIds.value.length > 0) count++
+    if (appliedArchivedOnly.value) count++
+    return count
+})
+
+const filterButtonLabel = computed(() => {
+    const base = t('commercial.clients.filters.title')
+    return activeFilterCount.value > 0 ? `${base} (${activeFilterCount.value})` : base
+})
+
+// Recopie l'etat applique vers le brouillon puis ouvre le drawer : la
+// reouverture reflete les filtres actifs.
+function openFilters(): void {
+    draftSearch.value = appliedSearch.value
+    draftCategoryCodes.value = [...appliedCategoryCodes.value]
+    draftSiteIds.value = [...appliedSiteIds.value]
+    draftArchivedOnly.value = appliedArchivedOnly.value
+    filterDrawerOpen.value = true
+}
+
+function toggleCategory(code: string, selected: boolean): void {
+    draftCategoryCodes.value = selected
+        ? [...draftCategoryCodes.value, code]
+        : draftCategoryCodes.value.filter(c => c !== code)
+}
+
+function toggleSite(id: string, selected: boolean): void {
+    draftSiteIds.value = selected
+        ? [...draftSiteIds.value, id]
+        : draftSiteIds.value.filter(s => s !== id)
+}
+
+/**
+ * Construit le payload de filtres serveur a partir de l'etat applique. Cles
+ * `categoryCode[]` / `siteId[]` pour que PHP les parse en tableaux (OR cote back).
+ * Les filtres vides sont omis pour une query propre.
+ */
+function buildFilterPayload(): Record<string, string | string[] | boolean> {
+    const payload: Record<string, string | string[] | boolean> = {}
+    if (appliedSearch.value.trim() !== '') payload.search = appliedSearch.value.trim()
+    if (appliedCategoryCodes.value.length > 0) payload['categoryCode[]'] = [...appliedCategoryCodes.value]
+    if (appliedSiteIds.value.length > 0) payload['siteId[]'] = [...appliedSiteIds.value]
+    if (appliedArchivedOnly.value) payload.archivedOnly = true
+    return payload
+}
+
+// « Appliquer » : recopie brouillon → applied, pousse les filtres (retombe en
+// page 1 via usePaginatedList) et ferme le drawer.
+function applyFilters(): void {
+    appliedSearch.value = draftSearch.value.trim()
+    appliedCategoryCodes.value = [...draftCategoryCodes.value]
+    appliedSiteIds.value = [...draftSiteIds.value]
+    appliedArchivedOnly.value = draftArchivedOnly.value
+
+    setFilters(buildFilterPayload(), { replace: true })
+    filterDrawerOpen.value = false
+}
+
+// « Réinitialiser » : vide brouillon ET applied, recharge la liste complete.
+// Le drawer reste ouvert pour montrer le formulaire vide.
+function resetFilters(): void {
+    draftSearch.value = ''
+    draftCategoryCodes.value = []
+    draftSiteIds.value = []
+    draftArchivedOnly.value = false
+
+    appliedSearch.value = ''
+    appliedCategoryCodes.value = []
+    appliedSiteIds.value = []
+    appliedArchivedOnly.value = false
+
+    setFilters({}, { replace: true })
+}
+
+/** Charge les referentiels du drawer (categories + sites) via ?pagination=false. */
+async function loadFilterOptions(): Promise<void> {
+    const [cats, sites] = await Promise.all([
+        api.get<{ member?: Array<{ code: string, name: string }> }>(
+            '/categories',
+            { pagination: 'false' },
+            { headers: { Accept: 'application/ld+json' }, toast: false },
+        ),
+        api.get<{ member?: Array<{ id: number, name: string }> }>(
+            '/sites',
+            { pagination: 'false' },
+            { headers: { Accept: 'application/ld+json' }, toast: false },
+        ),
+    ])
+
+    categoryOptions.value = (cats.member ?? []).map(c => ({ value: c.code, label: c.name }))
+    siteOptions.value = (sites.member ?? []).map(s => ({ value: String(s.id), label: s.name }))
+}
+
+// ── Export XLSX ─────────────────────────────────────────────────────────────
+// Memes filtres que la vue. La colonne SIREN n'est dans le fichier que si
+// l'utilisateur a accounting.view (gere cote back).
+const exporting = ref(false)
+
+async function exportXlsx(): Promise<void> {
+    if (exporting.value) {
+        return
+    }
+    exporting.value = true
+    try {
+        // useApi type ses options en JSON ; l'export renvoie un binaire, donc on
+        // force responseType:'blob' (transmis tel quel a ofetch au runtime). Cast
+        // contenu faute d'overload blob sur le client partage — a generaliser via
+        // un ticket dedie si d'autres exports binaires arrivent.
+        const blob = await api.get<Blob>('/clients/export.xlsx', buildFilterPayload(), {
+            responseType: 'blob',
+            toast: false,
+        } as unknown as Parameters<typeof api.get>[2])
+
+        triggerDownload(blob, 'repertoire-clients.xlsx')
+    }
+    catch {
+        toast.error({
+            title: t('commercial.clients.toast.error'),
+            message: t('commercial.clients.toast.exportError'),
+        })
+    }
+    finally {
+        exporting.value = false
+    }
+}
+
+/** Declenche le telechargement d'un blob via un lien temporaire. */
+function triggerDownload(blob: Blob, filename: string): void {
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = filename
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    URL.revokeObjectURL(url)
+}
+
+onMounted(() => {
+    loadClients()
+    // Echec du chargement des referentiels non bloquant : la liste s'affiche,
+    // l'utilisateur perd juste les options de filtre.
+    loadFilterOptions().catch(() => {
+        categoryOptions.value = []
+        siteOptions.value = []
+    })
+})
+</script>