Starseed/frontend/modules/technique/pages/providers/index.vue

<template>
    <div>
        <PageHeader>
            {{ t('technique.providers.title') }}
            <template #actions>
                <!-- gap-8 = 32px d'espacement entre Filtrer et Ajouter. -->
                <div class="flex items-center gap-8">
                    <!-- Bouton Filtrer a GAUCHE d'Ajouter. Le compteur reflete les filtres actifs. -->
                    <MalioButton
                        v-if="canView"
                        variant="tertiary"
                        :label="filterButtonLabel"
                        icon-name="mdi:tune"
                        icon-position="left"
                        icon-size="24"
                        @click="openFilters"
                    />
                    <MalioButton
                        v-if="canManage"
                        variant="secondary"
                        :label="t('technique.providers.add')"
                        icon-name="mdi:add-bold"
                        icon-position="left"
                        @click="goToCreate"
                    />
                </div>
            </template>
        </PageHeader>

        <!-- Datatable branchee sur usePaginatedList via useProvidersRepository :
             pagination serveur, tri companyName ASC par defaut (cote back),
             archives masques par defaut. Cloisonnement par site 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 providers-table"
            :empty-message="t('technique.providers.empty')"
            @row-click="onRowClick"
            @update:page="goToPage"
            @update:per-page="setItemsPerPage"
        >
            <!-- Categories : libelles (name) separes par une virgule. -->
            <template #cell-categories="{ item }">
                {{ formatCategories(item) }}
            </template>

            <!-- Sites : badges colores (name + color), relation directe du prestataire. -->
            <template #cell-sites="{ item }">
                <span class="flex flex-wrap gap-1">
                    <span
                        v-for="site in (item.sites as ProviderSite[])"
                        :key="site.id"
                        class="inline-flex items-center rounded-full px-2 py-0.5 font-medium text-white"
                        :style="{ backgroundColor: site.color }"
                    >
                        {{ site.name }}
                    </span>
                </span>
            </template>

            <!-- Derniere activite : date de derniere modification (updatedAt), format JJ-MM-AAAA. -->
            <template #cell-lastActivity="{ item }">
                {{ formatLastActivity(item) }}
            </template>
        </MalioDataTable>

        <div class="flex justify-center mt-4">
            <MalioButton
                v-if="canView"
                variant="primary"
                :label="t('technique.providers.export')"
                :disabled="exporting"
                @click="exportXlsx"
            />
        </div>

        <!-- Drawer de filtres : etat BROUILLON, applique uniquement au clic sur
             « Voir les résultats ». Meme pattern que le repertoire fournisseurs.
             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('technique.providers.filters.title') }}</h2>
            </template>

            <MalioAccordion>
                <!-- Recherche : nom entreprise + contact + email (param `search`). -->
                <MalioAccordionItem :title="t('technique.providers.filters.search')" value="search">
                    <MalioInputText
                        v-model="draftSearch"
                        icon-name="mdi:magnify"
                    />
                </MalioAccordionItem>

                <!-- Categories (type PRESTATAIRE) : cases a cocher (multi). Valeur = code stable. -->
                <MalioAccordionItem :title="t('technique.providers.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('technique.providers.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 = inclut aussi les archives (sinon actifs seuls). -->
                <MalioAccordionItem :title="t('technique.providers.filters.status')" value="status">
                    <MalioCheckbox
                        id="filter-include-archived"
                        :label="t('technique.providers.filters.includeArchived')"
                        :model-value="draftIncludeArchived"
                        @update:model-value="(val: boolean) => draftIncludeArchived = val"
                    />
                </MalioAccordionItem>
            </MalioAccordion>

            <template #footer>
                <MalioButton
                    variant="tertiary"
                    :label="t('technique.providers.filters.reset')"
                    button-class="w-m-btn-action"
                    @click="resetFilters"
                />
                <MalioButton
                    variant="primary"
                    :label="t('technique.providers.filters.apply')"
                    button-class="w-[170px]"
                    @click="applyFilters"
                />
            </template>
        </MalioDrawer>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import type { Provider, ProviderSite } from '~/modules/technique/composables/useProvidersRepository'

interface FilterOption {
    value: string
    label: string
}

const { t } = useI18n()
const api = useApi()
const router = useRouter()
const toast = useToast()
const { can } = usePermissions()

useHead({ title: t('technique.providers.title') })

// Bouton « Ajouter » reserve a `manage` (POST /providers garde manage seul —
// Compta cree pas). « Exporter » et « Filtrer » suivent `view`.
const canManage = computed(() => can('technique.providers.manage'))
const canView = computed(() => can('technique.providers.view'))

const {
    items: providers,
    totalItems,
    currentPage,
    itemsPerPage,
    itemsPerPageOptions,
    fetch: loadProviders,
    goToPage,
    setItemsPerPage,
    setFilters,
} = useProvidersRepository()

// Mappe les prestataires en objets « plats » pour MalioDataTable (items typees
// Record<string, unknown>[]) : un objet litteral porte une signature d'index
// implicite, contrairement a l'interface Provider. Meme pattern que fournisseurs.
const rows = computed(() => providers.value.map(provider => ({
    id: provider.id,
    companyName: provider.companyName,
    categories: provider.categories,
    sites: provider.sites,
    updatedAt: provider.updatedAt,
})))

const columns = [
    { key: 'companyName', label: t('technique.providers.column.companyName') },
    { key: 'categories', label: t('technique.providers.column.categories') },
    { key: 'sites', label: t('technique.providers.column.sites') },
    { key: 'lastActivity', label: t('technique.providers.column.lastActivity') },
]

/** Libelles des categories du prestataire, separes par une virgule (name). */
function formatCategories(item: Record<string, unknown>): string {
    const categories = (item.categories as Provider['categories']) ?? []
    return categories.map(c => c.name).join(', ')
}

/**
 * Derniere activite : date de derniere modification de la fiche (updatedAt,
 * expose en liste via default:read). Format court francais JJ-MM-AAAA (tirets,
 * cf. spec-front M3 § Datatable).
 */
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 ''
    }

    const day = String(date.getDate()).padStart(2, '0')
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const year = date.getFullYear()
    return `${day}-${month}-${year}`
}

/** Clic sur une ligne → ecran Consultation (route a plat /providers/{id}). */
function onRowClick(item: Record<string, unknown>): void {
    router.push(`/providers/${item.id}`)
}

function goToCreate(): void {
    router.push('/providers/new')
}

// ── Filtres (drawer) ────────────────────────────────────────────────────────
// Deux niveaux d'etat (pattern repertoire fournisseurs) :
//  - APPLIED : pilote la liste/l'export + le compteur du bouton. Modifie
//    uniquement au clic « Voir les résultats » / « 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 draftIncludeArchived = ref(false)

const appliedSearch = ref('')
const appliedCategoryCodes = ref<string[]>([])
const appliedSiteIds = ref<string[]>([])
const appliedIncludeArchived = 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 (appliedIncludeArchived.value) count++
    return count
})

const filterButtonLabel = computed(() => {
    const base = t('technique.providers.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]
    draftIncludeArchived.value = appliedIncludeArchived.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 (appliedIncludeArchived.value) payload.includeArchived = true
    return payload
}

// « Voir les résultats » : 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]
    appliedIncludeArchived.value = draftIncludeArchived.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 = []
    draftIncludeArchived.value = false

    appliedSearch.value = ''
    appliedCategoryCodes.value = []
    appliedSiteIds.value = []
    appliedIncludeArchived.value = false

    setFilters({}, { replace: true })
}

/** Charge les referentiels du drawer (categories PRESTATAIRE + sites) via ?pagination=false. */
async function loadFilterOptions(): Promise<void> {
    const [cats, sites] = await Promise.all([
        api.get<{ member?: Array<{ code: string, name: string }> }>(
            '/categories',
            // Taxonomie multi-types : le filtre du repertoire prestataires ne
            // propose que les categories de type PRESTATAIRE.
            { pagination: 'false', typeCode: 'PRESTATAIRE' },
            { 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 — meme approche que
        // l'export fournisseurs.
        const blob = await api.get<Blob>('/providers/export.xlsx', buildFilterPayload(), {
            responseType: 'blob',
            toast: false,
        } as unknown as Parameters<typeof api.get>[2])

        triggerDownload(blob, 'repertoire-prestataires.xlsx')
    }
    catch {
        toast.error({
            title: t('technique.providers.toast.error'),
            message: t('technique.providers.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(() => {
    loadProviders()
    // 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>

<style scoped>
/*
 * Colonne Sites uniquement (3e colonne : companyName, categories, SITES,
 * lastActivity) : ses badges rendent la cellule trop haute. On reduit le padding
 * vertical de SON td (16px Malio -> 8px) sans toucher les autres colonnes ni les
 * couleurs/tailles (qui restent sur les defauts Malio).
 */
:deep(.providers-table tbody td:nth-child(3)) {
    padding-top: 8px;
    padding-bottom: 8px;
}
</style>