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

<template>
    <div>
        <PageHeader>
            {{ t('commercial.clients.title') }}
            <template #actions>
                <MalioButton
                    v-if="canManage"
                    variant="secondary"
                    :label="t('commercial.clients.add')"
                    icon-name="mdi:add-bold"
                    icon-position="left"
                    @click="goToCreate"
                />
            </template>
        </PageHeader>

        <!-- Toggle « Voir les archivés » : etat 100 % local (regle ABSOLUE n°6),
             desactive par defaut (clients actifs uniquement). -->
        <div class="mb-4">
            <MalioCheckbox
                id="clients-include-archived"
                :label="t('commercial.clients.showArchived')"
                :model-value="includeArchived"
                @update:model-value="onToggleArchived"
            />
        </div>

        <!-- 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>
    </div>
</template>

<script setup lang="ts">
import type { Client, ClientSite } from '~/modules/commercial/composables/useClientsRepository'

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 » suit `view`.
const canManage = computed(() => can('commercial.clients.manage'))
const canView = computed(() => can('commercial.clients.view'))

const {
    items: clients,
    totalItems,
    currentPage,
    itemsPerPage,
    itemsPerPageOptions,
    includeArchived,
    fetch: loadClients,
    goToPage,
    setItemsPerPage,
    setIncludeArchived,
} = 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 ''
    }

    return new Date(value).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')
}

function onToggleArchived(value: boolean): void {
    setIncludeArchived(value)
}

// Export XLSX : memes filtres que la vue (includeArchived). 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 {
        const query: Record<string, unknown> = {}
        if (includeArchived.value) {
            query.includeArchived = true
        }

        // 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', query, {
            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.error'),
        })
    }
    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()
})
</script>