Starseed/frontend/modules/commercial/pages/clients/index.vue

<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>