435 lines
17 KiB
Vue
435 lines
17 KiB
Vue
<template>
|
|
<div>
|
|
<PageHeader>
|
|
{{ t('commercial.suppliers.title') }}
|
|
<template #actions>
|
|
<!-- gap-8 = 32px d'espacement entre Filtres et Ajouter. -->
|
|
<div class="flex items-center gap-8">
|
|
<!-- Bouton Filtres 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('commercial.suppliers.add')"
|
|
icon-name="mdi:add-bold"
|
|
icon-position="left"
|
|
@click="goToCreate"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</PageHeader>
|
|
|
|
<!-- Datatable branchee sur usePaginatedList via useSuppliersRepository :
|
|
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 suppliers-table"
|
|
:empty-message="t('commercial.suppliers.empty')"
|
|
@row-click="onRowClick"
|
|
@update:page="goToPage"
|
|
@update:per-page="setItemsPerPage"
|
|
>
|
|
<!-- Categories : libelles (name) separes par une virgule (spec M2). -->
|
|
<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 SupplierSite[])"
|
|
: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). -->
|
|
<template #cell-lastActivity="{ item }">
|
|
{{ formatLastActivity(item) }}
|
|
</template>
|
|
</MalioDataTable>
|
|
|
|
<div class="flex justify-center mt-4">
|
|
<MalioButton
|
|
v-if="canView"
|
|
variant="primary"
|
|
:label="t('commercial.suppliers.export')"
|
|
:disabled="exporting"
|
|
@click="exportXlsx"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Drawer de filtres : etat BROUILLON, applique uniquement au clic sur
|
|
« Appliquer ». Meme pattern que le repertoire clients. 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.suppliers.filters.title') }}</h2>
|
|
</template>
|
|
|
|
<MalioAccordion>
|
|
<!-- Recherche : nom societe + contact + email (param `search`, decision D1). -->
|
|
<MalioAccordionItem :title="t('commercial.suppliers.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.suppliers.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.suppliers.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('commercial.suppliers.filters.status')" value="status">
|
|
<MalioCheckbox
|
|
id="filter-include-archived"
|
|
:label="t('commercial.suppliers.filters.includeArchived')"
|
|
:model-value="draftIncludeArchived"
|
|
@update:model-value="(val: boolean) => draftIncludeArchived = val"
|
|
/>
|
|
</MalioAccordionItem>
|
|
</MalioAccordion>
|
|
|
|
<template #footer>
|
|
<MalioButton
|
|
variant="tertiary"
|
|
:label="t('commercial.suppliers.filters.reset')"
|
|
button-class="w-m-btn-action"
|
|
@click="resetFilters"
|
|
/>
|
|
<MalioButton
|
|
variant="primary"
|
|
:label="t('commercial.suppliers.filters.apply')"
|
|
button-class="w-[170px]"
|
|
@click="applyFilters"
|
|
/>
|
|
</template>
|
|
</MalioDrawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import type { Supplier, SupplierSite } from '~/modules/commercial/composables/useSuppliersRepository'
|
|
|
|
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.suppliers.title') })
|
|
|
|
// Bouton « Ajouter » reserve a `manage` (POST /suppliers garde manage seul →
|
|
// Compta / Usine ne creent pas). « Exporter » et « Filtres » suivent `view`.
|
|
const canManage = computed(() => can('commercial.suppliers.manage'))
|
|
const canView = computed(() => can('commercial.suppliers.view'))
|
|
|
|
const {
|
|
items: suppliers,
|
|
totalItems,
|
|
currentPage,
|
|
itemsPerPage,
|
|
itemsPerPageOptions,
|
|
fetch: loadSuppliers,
|
|
goToPage,
|
|
setItemsPerPage,
|
|
setFilters,
|
|
} = useSuppliersRepository()
|
|
|
|
// Mappe les fournisseurs en objets « plats » pour MalioDataTable (items typees
|
|
// Record<string, unknown>[]) : un objet litteral porte une signature d'index
|
|
// implicite, contrairement a l'interface Supplier. Meme pattern que clients.
|
|
const rows = computed(() => suppliers.value.map(supplier => ({
|
|
id: supplier.id,
|
|
companyName: supplier.companyName,
|
|
categories: supplier.categories,
|
|
sites: supplier.sites,
|
|
updatedAt: supplier.updatedAt,
|
|
})))
|
|
|
|
const columns = [
|
|
{ key: 'companyName', label: t('commercial.suppliers.column.companyName') },
|
|
{ key: 'categories', label: t('commercial.suppliers.column.categories') },
|
|
{ key: 'sites', label: t('commercial.suppliers.column.sites') },
|
|
{ key: 'lastActivity', label: t('commercial.suppliers.column.lastActivity') },
|
|
]
|
|
|
|
/** Libelles des categories du fournisseur, separes par une virgule (spec M2 : name). */
|
|
function formatCategories(item: Record<string, unknown>): string {
|
|
const categories = (item.categories as Supplier['categories']) ?? []
|
|
return categories.map(c => c.name).join(', ')
|
|
}
|
|
|
|
/**
|
|
* Derniere activite : faute de suivi d'activite metier au M2, 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 /suppliers/{id}). */
|
|
function onRowClick(item: Record<string, unknown>): void {
|
|
router.push(`/suppliers/${item.id}`)
|
|
}
|
|
|
|
function goToCreate(): void {
|
|
router.push('/suppliers/new')
|
|
}
|
|
|
|
// ── Filtres (drawer) ────────────────────────────────────────────────────────
|
|
// Deux niveaux d'etat (pattern repertoire clients) :
|
|
// - 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 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('commercial.suppliers.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
|
|
}
|
|
|
|
// « 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]
|
|
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 FOURNISSEUR + 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 (ERP-84) : le filtre du repertoire fournisseurs
|
|
// ne propose que les categories de type FOURNISSEUR (pas les CLIENT).
|
|
{ pagination: 'false', typeCode: 'FOURNISSEUR' },
|
|
{ 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>('/suppliers/export.xlsx', buildFilterPayload(), {
|
|
responseType: 'blob',
|
|
toast: false,
|
|
} as unknown as Parameters<typeof api.get>[2])
|
|
|
|
triggerDownload(blob, 'repertoire-fournisseurs.xlsx')
|
|
}
|
|
catch {
|
|
toast.error({
|
|
title: t('commercial.suppliers.toast.error'),
|
|
message: t('commercial.suppliers.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(() => {
|
|
loadSuppliers()
|
|
// 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(.suppliers-table tbody td:nth-child(3)) {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
</style>
|