feat(transport) : consultation + modification transporteur (ERP-170)

This commit is contained in:
2026-06-17 11:35:14 +02:00
parent fb9c15c52a
commit e612eae391
8 changed files with 1250 additions and 1 deletions
+42 -1
View File
@@ -530,7 +530,48 @@
"integrateSuccess": "Transporteur QUALIMAT intégré",
"addressSaved": "Adresse enregistrée",
"contactSaved": "Contact enregistré",
"priceSaved": "Prix enregistré"
"priceSaved": "Prix enregistré",
"updateSuccess": "Transporteur mis à jour avec succès",
"archiveSuccess": "Transporteur archivé avec succès",
"restoreSuccess": "Transporteur restauré avec succès"
},
"action": {
"edit": "Modifier",
"archive": "Archiver",
"restore": "Restaurer"
},
"consultation": {
"title": "Consultation transporteur",
"back": "Retour au répertoire",
"loading": "Chargement du transporteur…",
"notFound": "Transporteur introuvable.",
"confirmArchive": {
"title": "Archiver le transporteur",
"message": "Ce transporteur n'apparaîtra plus dans le répertoire actif. Confirmer l'archivage ?"
},
"confirmRestore": {
"title": "Restaurer le transporteur",
"message": "Ce transporteur réapparaîtra dans le répertoire actif. Confirmer la restauration ?"
},
"price": {
"group": "Contenant",
"carrier": "Transporteur",
"aproOrSite": "Adresse appro / site",
"delivery": "Adresse de livraison",
"forfait": "Forfait €",
"tonne": "Tonne €",
"indexation": "Indexation",
"state": "État du prix",
"export": "Exporter",
"empty": "Aucun prix pour ce transporteur."
}
},
"edit": {
"title": "Modifier le transporteur",
"back": "Retour à la consultation",
"loading": "Chargement du transporteur…",
"notFound": "Transporteur introuvable.",
"save": "Enregistrer"
},
"containerType": {
"BENNE": "Benne",
@@ -912,3 +912,49 @@ describe('useCarrierForm — onglet Prix (ERP-169)', () => {
expect(form.prices.value).toHaveLength(1)
})
})
describe('useCarrierForm — édition (ERP-170)', () => {
beforeEach(() => {
mockPost.mockReset()
mockPatch.mockReset()
})
it('prefillFrom : peuple carrierId + principal + sous-collections, passe en editMode', () => {
const form = useCarrierForm()
form.prefillFrom({
'@id': '/api/carriers/7',
id: 7,
name: 'TRANSPORTS ACME',
certificationType: 'GMP_PLUS',
addresses: [{ '@id': '/api/carrier_addresses/3', id: 3, city: 'Poitiers' }],
contacts: [{ '@id': '/api/carrier_contacts/9', id: 9, lastName: 'Doe', phonePrimary: '0102030405' }],
prices: [{ '@id': '/api/carrier_prices/5', id: 5, direction: 'CLIENT', client: { '@id': '/api/clients/3' }, containerType: 'BENNE', pricingUnit: 'FORFAIT', price: '120', priceState: 'EN_COURS' }],
})
expect(form.carrierId.value).toBe(7)
expect(form.editMode.value).toBe(true)
expect(form.main.name).toBe('TRANSPORTS ACME')
expect(form.main.certificationType).toBe('GMP_PLUS')
expect(form.addresses.value).toHaveLength(1)
expect(form.addresses.value[0]?.id).toBe(3)
expect(form.contacts.value[0]?.id).toBe(9)
expect(form.prices.value[0]?.clientIri).toBe('/api/clients/3')
})
it('updateMain : PATCH /carriers/{id} (pas de POST), réaffiche le nom normalisé', async () => {
mockPatch.mockResolvedValueOnce({ id: 7, name: 'TRANSPORTS ACME', certificationType: 'GMP_PLUS' })
const form = useCarrierForm()
form.prefillFrom({ '@id': '/api/carriers/7', id: 7, name: 'Transports Acme', certificationType: 'GMP_PLUS' })
const ok = await form.updateMain()
expect(ok).toBe(true)
expect(mockPost).not.toHaveBeenCalled()
expect(mockPatch).toHaveBeenCalledWith(
'/carriers/7',
expect.objectContaining({ name: 'Transports Acme', certificationType: 'GMP_PLUS' }),
{ toast: false },
)
expect(form.main.name).toBe('TRANSPORTS ACME')
})
})
@@ -0,0 +1,68 @@
import { ref } from 'vue'
import type { CarrierDetail } from '~/modules/transport/utils/forms/carrierMappers'
/**
* Chargement et actions d'archivage d'un transporteur unique (écrans Consultation /
* Modification, ERP-170). Miroir de `useProvider` (M3) / `useSupplier` (M2). Lit le
* détail embarqué via `GET /api/carriers/{id}` (qualimatCarrier + addresses /
* contacts / prices sous `carrier:item:read`, relations cross-module via leurs
* read-groups) — une SEULE requête peuple les deux écrans (embed borné, pas de N+1).
*
* L'en-tête `Accept: application/ld+json` est imposé pour obtenir le payload Hydra
* complet (avec les `@id` des relations embarquées, indispensables au préremplissage).
*
* État 100 % local à l'instance (refs). Les erreurs d'archivage / restauration
* (notamment le 409 d'homonyme actif à la restauration) sont PROPAGÉES à l'appelant.
*/
export function useCarrier(id: number | string) {
const api = useApi()
const carrier = ref<CarrierDetail | null>(null)
const loading = ref(false)
const error = ref(false)
/** Récupère le détail complet (embed qualimatCarrier + addresses / contacts / prices). */
function fetchDetail(): Promise<CarrierDetail> {
return api.get<CarrierDetail>(
`/carriers/${id}`,
{},
{ headers: { Accept: 'application/ld+json' }, toast: false },
)
}
/** Charge le détail du transporteur. En cas d'échec : `error = true`, `carrier = null`. */
async function load(): Promise<void> {
loading.value = true
error.value = false
try {
carrier.value = await fetchDetail()
}
catch {
error.value = true
carrier.value = null
}
finally {
loading.value = false
}
}
/**
* Bascule l'archivage (PATCH `isArchived` SEUL — groupe carrier:write:archive ;
* tout autre champ → 422, security archive = Admin seul), puis RECHARGE le détail
* complet (la réponse du PATCH ne porte pas l'embed des sous-collections). Toute
* erreur est propagée à l'appelant AVANT le rechargement.
*/
async function setArchived(isArchived: boolean): Promise<void> {
await api.patch(`/carriers/${id}`, { isArchived }, { toast: false })
carrier.value = await fetchDetail()
}
return {
carrier,
loading,
error,
load,
archive: () => setArchived(true),
restore: () => setArchived(false),
}
}
@@ -18,6 +18,13 @@ import {
import { buildCarrierAddressPayload, isCarrierAddressValid } from '~/modules/transport/utils/forms/carrierAddress'
import { buildCarrierContactPayload, isCarrierContactBlank, isCarrierContactNamed } from '~/modules/transport/utils/forms/carrierContact'
import { buildCarrierPricePayload, isCarrierPriceValid } from '~/modules/transport/utils/forms/carrierPrice'
import {
mapAddressToDraft,
mapContactToDraft,
mapMainToDraft,
mapPriceToDraft,
type CarrierDetail,
} from '~/modules/transport/utils/forms/carrierMappers'
import type { QualimatCarrierRow } from '~/modules/transport/composables/useQualimatSearch'
/** Nom du cas spécial « compte-propre » LIOT (comparaison insensible à la casse, RG-4.01). */
@@ -257,6 +264,68 @@ export function useCarrierForm() {
}
}
/**
* MODIFICATION du formulaire principal (ERP-170) : PATCH /api/carriers/{id} sur le
* groupe carrier:write:main (PAS de re-POST). Pré-check front + 409 doublon / 422
* inline comme `submitMain`. Ne verrouille rien et ne bascule pas d'onglet (édition
* = navigation libre). Retourne true si le PATCH a réussi.
*/
async function updateMain(): Promise<boolean> {
if (carrierId.value === null || mainSubmitting.value) return false
mainErrors.clearErrors()
if (!validateMainFront()) return false
mainSubmitting.value = true
try {
const updated = await api.patch<CarrierMainResponse>(
`/carriers/${carrierId.value}`,
buildMainPayload(),
{ toast: false },
)
main.name = updated.name ?? main.name
main.certificationType = updated.certificationType ?? main.certificationType
return true
}
catch (error) {
const status = (error as { response?: { status?: number } })?.response?.status
if (status === 409) {
const message = t('transport.carriers.form.duplicateName')
mainErrors.setError('name', message)
toast.error({ title: t('transport.carriers.toast.error'), message })
}
else {
mainErrors.handleApiError(error, { fallbackMessage: t('transport.carriers.toast.error') })
}
return false
}
finally {
mainSubmitting.value = false
}
}
/**
* Pré-remplit le formulaire depuis le détail `GET /api/carriers/{id}` (écran
* Modification) : peuple carrierId + principal + adresses / contacts / prix via les
* mappers, passe en `editMode` (navigation libre, tous onglets accessibles, bloc
* principal éditable). Au moins un bloc Adresse / Contact affiché même sans donnée.
*/
function prefillFrom(detail: CarrierDetail): void {
carrierId.value = detail.id
editMode.value = true
mainLocked.value = false
unlockedIndex.value = tabKeys.value.length - 1
Object.assign(main, mapMainToDraft(detail))
const mappedAddresses = (detail.addresses ?? []).map(mapAddressToDraft)
addresses.value = mappedAddresses.length > 0 ? mappedAddresses : [emptyCarrierAddress()]
const mappedContacts = (detail.contacts ?? []).map(mapContactToDraft)
contacts.value = mappedContacts.length > 0 ? mappedContacts : [emptyCarrierContact()]
prices.value = (detail.prices ?? []).map(mapPriceToDraft)
}
/**
* PATCH partiel du transporteur (mode strict : un seul groupe de sérialisation
* par appel — spec-back § 2.9). Servira les onglets à champs scalaires des
@@ -702,6 +771,8 @@ export function useCarrierForm() {
validateMainFront,
buildMainPayload,
submitMain,
updateMain,
prefillFrom,
patchCarrier,
applyQualimatSelection,
completeTab,
@@ -0,0 +1,345 @@
<template>
<div>
<!-- En-tête : retour consultation + titre. -->
<div class="flex items-center gap-3 pt-11">
<MalioButtonIcon
icon="mdi:arrow-left-bold"
icon-size="24"
variant="ghost"
v-bind="{ ariaLabel: t('transport.carriers.edit.back') }"
@click="goBack"
/>
<h1 class="text-[30px] font-semibold text-m-primary">{{ t('transport.carriers.edit.title') }}</h1>
</div>
<p v-if="loading" class="mt-12 text-center text-black/60">{{ t('transport.carriers.edit.loading') }}</p>
<p v-else-if="error" class="mt-12 text-center text-m-danger">{{ t('transport.carriers.edit.notFound') }}</p>
<template v-else>
<!-- Formulaire principal (éditable, PATCH partiel) -->
<div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
<MalioInputText
v-model="main.name"
:label="t('transport.carriers.form.main.name')"
:required="true"
:error="mainErrors.errors.name"
/>
<MalioInputText
v-if="isLiot"
v-model="main.liotPlates"
:label="t('transport.carriers.form.main.liotPlates')"
:hint="t('transport.carriers.form.main.liotPlatesHint')"
:required="true"
:error="mainErrors.errors.liotPlates"
/>
<template v-if="!isLiot">
<MalioSelect
:model-value="main.certificationType"
:options="certificationOptions"
:label="t('transport.carriers.form.main.certificationType')"
empty-option-label=""
:required="true"
:readonly="certificationReadonly"
:error="mainErrors.errors.certificationType"
@update:model-value="(v: string | number | null) => main.certificationType = v === null ? null : String(v)"
/>
<MalioInputUpload
v-if="showDischarge"
:label="t('transport.carriers.form.main.discharge')"
accept="application/pdf,image/*"
:required="true"
:clearable="true"
:error="mainErrors.errors.dischargeDocument"
@clear="main.dischargeDocumentIri = null"
/>
<div v-else class="hidden xl:block"></div>
<div class="flex h-12 items-center">
<MalioCheckbox
id="carrier-edit-chartered"
:label="t('transport.carriers.form.main.isChartered')"
:model-value="main.isChartered"
:reserve-message-space="false"
@update:model-value="(val: boolean) => main.isChartered = val"
/>
</div>
<template v-if="showCharteredFields">
<MalioInputNumber v-model="main.indexationRate" :label="t('transport.carriers.form.main.indexationRate')" :required="true" :error="mainErrors.errors.indexationRate" />
<MalioSelect
:model-value="main.containerType"
:options="containerOptions"
:label="t('transport.carriers.form.main.containerType')"
empty-option-label=""
:required="true"
:error="mainErrors.errors.containerType"
@update:model-value="(v: string | number | null) => main.containerType = v === null ? null : String(v)"
/>
<MalioInputNumber v-model="main.volumeM3" :label="t('transport.carriers.form.main.volumeM3')" :required="true" :error="mainErrors.errors.volumeM3" />
</template>
</template>
</div>
<div class="mt-12 flex justify-center">
<MalioButton
variant="primary"
:label="t('transport.carriers.edit.save')"
:disabled="mainSubmitting"
@click="onUpdateMain"
/>
</div>
<!-- ── Onglets éditables (navigation libre, PATCH partiel par onglet) ── -->
<MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
<template #addresses>
<div class="mt-12 flex flex-col gap-6">
<CarrierAddressBlock
v-for="(address, index) in addresses"
:key="index"
:model-value="address"
:country-options="countryOptions"
:removable="isRowRemovable(addresses, index)"
:errors="addressErrors[index]"
@update:model-value="(v) => addresses[index] = v"
@remove="askRemoveAddress(index)"
@degraded="onAddressDegraded"
/>
<div class="flex justify-center gap-6">
<MalioButton variant="secondary" icon-name="mdi:add-bold" icon-position="left" :label="t('transport.carriers.form.address.add')" :disabled="!canAddAddress" @click="addAddress" />
<MalioButton variant="primary" :label="t('transport.carriers.edit.save')" :disabled="tabSubmitting" @click="onSubmitAddresses" />
</div>
</div>
</template>
<template #contacts>
<div class="mt-12 flex flex-col gap-6">
<CarrierContactBlock
v-for="(contact, index) in contacts"
:key="index"
:model-value="contact"
:removable="isRowRemovable(contacts, index)"
:errors="contactErrors[index]"
@update:model-value="(v) => contacts[index] = v"
@remove="askRemoveContact(index)"
/>
<div class="flex justify-center gap-6">
<MalioButton variant="secondary" icon-name="mdi:add-bold" icon-position="left" :label="t('transport.carriers.form.contact.add')" :disabled="!canAddContact" @click="addContact" />
<MalioButton variant="primary" :label="t('transport.carriers.edit.save')" :disabled="tabSubmitting" @click="onSubmitContacts" />
</div>
</div>
</template>
<template #prices>
<div class="mt-12 flex flex-col gap-6">
<CarrierPriceBlock
v-for="(price, index) in prices"
:key="index"
:model-value="price"
:client-options="clientOptions"
:supplier-options="supplierOptions"
:site-options="siteOptions"
removable
:errors="priceErrors[index]"
@update:model-value="(v) => prices[index] = v"
@remove="askRemovePrice(index)"
/>
<div class="flex justify-center gap-6">
<MalioButton variant="secondary" icon-name="mdi:add-bold" icon-position="left" :label="t('transport.carriers.form.price.add')" :disabled="!canAddPrice" @click="addPrice" />
<MalioButton variant="primary" :label="t('transport.carriers.edit.save')" :disabled="tabSubmitting" @click="onSubmitPrices" />
</div>
</div>
</template>
</MalioTabList>
</template>
<!-- Modal de confirmation de suppression de bloc. -->
<MalioModal v-model="deleteConfirm.open" modal-class="max-w-md">
<template #header>
<h2 class="text-[24px] font-bold">{{ t('transport.carriers.form.confirmDelete.title') }}</h2>
</template>
<p>{{ t('transport.carriers.form.confirmDelete.message') }}</p>
<template #footer>
<MalioButton variant="secondary" button-class="flex-1" :label="t('transport.carriers.form.confirmDelete.cancel')" @click="deleteConfirm.open = false" />
<MalioButton variant="danger" button-class="flex-1" :label="t('transport.carriers.form.confirmDelete.confirm')" @click="runDeleteConfirm" />
</template>
</MalioModal>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { extractApiErrorMessage } from '~/shared/utils/api'
import { isRowRemovable } from '~/shared/utils/collectionRow'
import CarrierAddressBlock from '~/modules/transport/components/CarrierAddressBlock.vue'
import CarrierContactBlock from '~/modules/transport/components/CarrierContactBlock.vue'
import CarrierPriceBlock from '~/modules/transport/components/CarrierPriceBlock.vue'
import { useCarrierForm } from '~/modules/transport/composables/useCarrierForm'
import { useCarrier } from '~/modules/transport/composables/useCarrier'
interface SelectOption {
value: string
label: string
}
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const api = useApi()
const { can } = usePermissions()
const carrierId = route.params.id as string
useHead({ title: t('transport.carriers.edit.title') })
// Gating route : l'édition est réservée à `manage` ; sinon retour consultation.
if (!can('transport.carriers.manage')) {
await navigateTo(`/carriers/${carrierId}`)
}
const { carrier, loading, error, load } = useCarrier(carrierId)
const {
main,
mainSubmitting,
tabSubmitting,
mainErrors,
isLiot,
certificationReadonly,
showCharteredFields,
showDischarge,
addresses,
addressErrors,
canAddAddress,
addAddress,
removeAddress,
submitAddresses,
contacts,
contactErrors,
canAddContact,
addContact,
removeContact,
submitContacts,
prices,
priceErrors,
canAddPrice,
addPrice,
removePrice,
submitPrices,
updateMain,
prefillFrom,
} = useCarrierForm()
const SELECTABLE_CERTIFICATIONS = ['GMP_PLUS', 'OVOCOM', 'COMPTE_PROPRE', 'AUTRE'] as const
const certificationOptions = computed<SelectOption[]>(() => {
const codes: string[] = [...SELECTABLE_CERTIFICATIONS]
if (main.certificationType === 'QUALIMAT') codes.unshift('QUALIMAT')
return codes.map(code => ({ value: code, label: t(`transport.carriers.certification.${code}`) }))
})
const CONTAINER_TYPES = ['BENNE', 'FOND_MOUVANT'] as const
const containerOptions = computed<SelectOption[]>(() =>
CONTAINER_TYPES.map(code => ({ value: code, label: t(`transport.carriers.containerType.${code}`) })),
)
const TAB_ICONS: Record<string, string> = {
addresses: 'mdi:map-marker-outline',
contacts: 'mdi:account-box-plus-outline',
prices: 'mdi:currency-eur',
}
const activeTab = ref('addresses')
const tabs = computed(() => ['addresses', 'contacts', 'prices'].map(key => ({
key,
label: t(`transport.carriers.tab.${key}`),
icon: TAB_ICONS[key],
})))
// ── Référentiels (pays + clients / fournisseurs / sites pour l'onglet Prix) ───
const countryOptions = ref<SelectOption[]>([{ value: 'France', label: 'France' }])
const clientOptions = ref<SelectOption[]>([])
const supplierOptions = ref<SelectOption[]>([])
const siteOptions = ref<SelectOption[]>([])
async function loadOptions(url: string, target: typeof clientOptions, labelOf: (m: Record<string, unknown>) => string): Promise<void> {
try {
const data = await api.get<{ member?: Record<string, unknown>[] }>(url, { pagination: 'false' }, { headers: { Accept: 'application/ld+json' }, toast: false })
target.value = (data.member ?? []).map(m => ({ value: String(m['@id']), label: labelOf(m) }))
}
catch {
target.value = []
}
}
async function loadCountries(): Promise<void> {
try {
const data = await api.get<{ member?: { name: string }[] }>('/countries', { pagination: 'false' }, { headers: { Accept: 'application/ld+json' }, toast: false })
const list = (data.member ?? []).map(c => ({ value: c.name, label: c.name }))
countryOptions.value = list.some(c => c.value === 'France') ? list : [{ value: 'France', label: 'France' }, ...list]
}
catch { /* fallback France */ }
}
// ── Chargement + préremplissage ──────────────────────────────────────────────
onMounted(async () => {
await load()
if (carrier.value) {
prefillFrom(carrier.value)
}
loadCountries().catch(() => {})
void loadOptions('/clients', clientOptions, m => String(m.companyName ?? m['@id']))
void loadOptions('/suppliers', supplierOptions, m => String(m.companyName ?? m['@id']))
void loadOptions('/sites', siteOptions, m => String(m.name ?? m['@id']))
})
function apiErrorMessage(err: unknown): string {
const data = (err as { response?: { _data?: unknown } })?.response?._data
return extractApiErrorMessage(data) || t('transport.carriers.toast.error')
}
function goBack(): void {
router.push(`/carriers/${carrierId}`)
}
/** PATCH du formulaire principal (pas de re-POST). */
async function onUpdateMain(): Promise<void> {
const ok = await updateMain()
if (ok) {
toast.success({ title: t('transport.carriers.toast.updateSuccess') })
}
}
async function onSubmitAddresses(): Promise<void> {
const ok = await submitAddresses(err => toast.error({ title: t('transport.carriers.toast.error'), message: apiErrorMessage(err) }))
if (ok) toast.success({ title: t('transport.carriers.toast.addressSaved') })
}
async function onSubmitContacts(): Promise<void> {
const ok = await submitContacts(err => toast.error({ title: t('transport.carriers.toast.error'), message: apiErrorMessage(err) }))
if (ok) toast.success({ title: t('transport.carriers.toast.contactSaved') })
}
async function onSubmitPrices(): Promise<void> {
const ok = await submitPrices(err => toast.error({ title: t('transport.carriers.toast.error'), message: apiErrorMessage(err) }))
if (ok) toast.success({ title: t('transport.carriers.toast.priceSaved') })
}
// ── Suppression de bloc (modal de confirmation générique) ────────────────────
const deleteConfirm = reactive({ open: false, action: null as null | (() => void) })
function askRemoveAddress(index: number): void {
deleteConfirm.action = () => { void removeAddress(index) }
deleteConfirm.open = true
}
function askRemoveContact(index: number): void {
deleteConfirm.action = () => { void removeContact(index) }
deleteConfirm.open = true
}
function askRemovePrice(index: number): void {
deleteConfirm.action = () => { void removePrice(index) }
deleteConfirm.open = true
}
function runDeleteConfirm(): void {
deleteConfirm.action?.()
deleteConfirm.action = null
deleteConfirm.open = false
}
function onAddressDegraded(): void {
toast.warning({ title: t('transport.carriers.toast.error'), message: t('transport.carriers.form.address.degraded') })
}
</script>
@@ -0,0 +1,368 @@
<template>
<div>
<!-- En-tête : retour répertoire + nom + actions. -->
<div class="flex items-center gap-3 pt-11">
<MalioButtonIcon
icon="mdi:arrow-left-bold"
icon-size="24"
variant="ghost"
v-bind="{ ariaLabel: t('transport.carriers.consultation.back') }"
@click="goBack"
/>
<h1 class="text-[30px] font-semibold text-m-primary">{{ headerTitle }}</h1>
<div class="ml-auto flex items-center gap-12">
<MalioButton
v-if="canEdit"
variant="secondary"
icon-name="mdi:pencil-outline"
icon-position="left"
:label="t('transport.carriers.action.edit')"
@click="goEdit"
/>
<MalioButton
v-if="showArchive"
variant="secondary"
icon-name="mdi:archive-arrow-down-outline"
icon-position="left"
:label="t('transport.carriers.action.archive')"
@click="askToggleArchive"
/>
<MalioButton
v-if="showRestore"
variant="secondary"
icon-name="mdi:archive-arrow-up-outline"
icon-position="left"
:label="t('transport.carriers.action.restore')"
@click="askToggleArchive"
/>
</div>
</div>
<p v-if="loading" class="mt-12 text-center text-black/60">{{ t('transport.carriers.consultation.loading') }}</p>
<p v-else-if="error" class="mt-12 text-center text-m-danger">{{ t('transport.carriers.consultation.notFound') }}</p>
<template v-else-if="carrier">
<!-- Bloc principal (lecture seule) -->
<div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
<MalioInputText :model-value="main.name" :label="t('transport.carriers.form.main.name')" readonly />
<MalioInputText
v-if="main.certificationType"
:model-value="certificationLabel"
:label="t('transport.carriers.form.main.certificationType')"
readonly
/>
<MalioInputText
v-if="isLiot"
:model-value="main.liotPlates"
:label="t('transport.carriers.form.main.liotPlates')"
readonly
/>
<div class="flex h-12 items-center">
<MalioCheckbox
id="carrier-view-chartered"
:label="t('transport.carriers.form.main.isChartered')"
:model-value="main.isChartered"
readonly
:reserve-message-space="false"
/>
</div>
<template v-if="main.isChartered">
<MalioInputText :model-value="main.indexationRate" :label="t('transport.carriers.form.main.indexationRate')" readonly />
<MalioInputText :model-value="containerLabel" :label="t('transport.carriers.form.main.containerType')" readonly />
<MalioInputText :model-value="main.volumeM3" :label="t('transport.carriers.form.main.volumeM3')" readonly />
</template>
</div>
<!-- Onglets (Adresses · Contacts · Prix) ouvre sur Adresses -->
<MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
<template #addresses>
<div class="mt-12 flex flex-col gap-6">
<CarrierAddressBlock
v-for="(address, index) in addresses"
:key="index"
:model-value="address"
:country-options="countryOptionsFor(address.country)"
readonly
/>
</div>
</template>
<template #contacts>
<div class="mt-12 flex flex-col gap-6">
<CarrierContactBlock
v-for="(contact, index) in contacts"
:key="index"
:model-value="contact"
readonly
/>
</div>
</template>
<!-- Prix : tableau présentationnel regroupé par contenant + export. -->
<template #prices>
<div class="mt-12 flex flex-col gap-6">
<table class="w-full border-collapse text-left text-sm">
<thead>
<tr class="border-b border-black">
<th class="py-2 font-semibold">{{ t('transport.carriers.consultation.price.group') }}</th>
<th class="py-2 font-semibold">{{ t('transport.carriers.consultation.price.carrier') }}</th>
<th class="py-2 font-semibold">{{ t('transport.carriers.consultation.price.aproOrSite') }}</th>
<th class="py-2 font-semibold">{{ t('transport.carriers.consultation.price.delivery') }}</th>
<th class="py-2 font-semibold">{{ t('transport.carriers.consultation.price.forfait') }}</th>
<th class="py-2 font-semibold">{{ t('transport.carriers.consultation.price.tonne') }}</th>
<th class="py-2 font-semibold">{{ t('transport.carriers.consultation.price.indexation') }}</th>
<th class="py-2 font-semibold">{{ t('transport.carriers.consultation.price.state') }}</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, index) in priceRows"
:key="index"
class="border-b border-m-muted/30"
>
<td class="py-2 font-medium">{{ row.group }}</td>
<td class="py-2">{{ headerTitle }}</td>
<td class="py-2">{{ row.aproOrSite }}</td>
<td class="py-2">{{ row.delivery }}</td>
<td class="py-2">{{ row.forfait }}</td>
<td class="py-2">{{ row.tonne }}</td>
<td class="py-2">{{ row.indexation }}</td>
<td class="py-2">{{ row.state }}</td>
</tr>
<tr v-if="priceRows.length === 0">
<td colspan="8" class="py-4 text-center text-m-muted">
{{ t('transport.carriers.consultation.price.empty') }}
</td>
</tr>
</tbody>
</table>
<div v-if="priceRows.length > 0" class="flex justify-center">
<MalioButton
variant="primary"
:label="t('transport.carriers.consultation.price.export')"
:disabled="exporting"
@click="exportPrices"
/>
</div>
</div>
</template>
</MalioTabList>
</template>
<!-- Modal de confirmation archivage / restauration. -->
<MalioModal v-model="confirmArchive.open" modal-class="max-w-md">
<template #header>
<h2 class="text-[24px] font-bold">{{ confirmArchive.title }}</h2>
</template>
<p>{{ confirmArchive.message }}</p>
<template #footer>
<MalioButton
variant="secondary"
button-class="flex-1"
:label="t('transport.carriers.form.confirmDelete.cancel')"
@click="confirmArchive.open = false"
/>
<MalioButton
variant="danger"
button-class="flex-1"
:label="confirmArchive.confirmLabel"
@click="runToggleArchive"
/>
</template>
</MalioModal>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import CarrierAddressBlock from '~/modules/transport/components/CarrierAddressBlock.vue'
import CarrierContactBlock from '~/modules/transport/components/CarrierContactBlock.vue'
import { useCarrier } from '~/modules/transport/composables/useCarrier'
import {
canEditCarrier,
labelOfRelation,
mapAddressToDraft,
mapContactToDraft,
mapMainToDraft,
showArchiveAction,
showRestoreAction,
type CarrierPriceRead,
} from '~/modules/transport/utils/forms/carrierMappers'
interface SelectOption {
value: string
label: string
}
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const api = useApi()
const { can } = usePermissions()
const carrierId = route.params.id as string
const { carrier, loading, error, load, archive, restore } = useCarrier(carrierId)
const isArchived = computed(() => carrier.value?.isArchived ?? false)
const canEdit = computed(() => canEditCarrier(can))
const showArchive = computed(() => showArchiveAction(can, isArchived.value))
const showRestore = computed(() => showRestoreAction(can, isArchived.value))
const headerTitle = computed(() => carrier.value?.name || t('transport.carriers.consultation.title'))
useHead({ title: t('transport.carriers.consultation.title') })
// ── Bloc principal mappé (lecture seule) ─────────────────────────────────────
const main = computed(() => mapMainToDraft(carrier.value ?? { id: 0, '@id': '' }))
const isLiot = computed(() => main.value.name.trim().toUpperCase() === 'LIOT')
const certificationLabel = computed(() => main.value.certificationType
? t(`transport.carriers.certification.${main.value.certificationType}`)
: '')
const containerLabel = computed(() => main.value.containerType
? t(`transport.carriers.containerType.${main.value.containerType}`)
: '')
// ── Onglets : Adresses · Contacts · Prix (ouvre sur Adresses, pas de Qualimat) ──
const activeTab = ref('addresses')
const TAB_ICONS: Record<string, string> = {
addresses: 'mdi:map-marker-outline',
contacts: 'mdi:account-box-plus-outline',
prices: 'mdi:currency-eur',
}
const tabs = computed(() => ['addresses', 'contacts', 'prices'].map(key => ({
key,
label: t(`transport.carriers.tab.${key}`),
icon: TAB_ICONS[key],
})))
// Au moins un bloc affiché même sans donnée (bloc vide en lecture seule).
const addresses = computed(() => {
const list = (carrier.value?.addresses ?? []).map(mapAddressToDraft)
return list.length > 0 ? list : [mapAddressToDraft({ id: 0, '@id': '' })]
})
const contacts = computed(() => {
const list = (carrier.value?.contacts ?? []).map(mapContactToDraft)
return list.length > 0 ? list : [mapContactToDraft({ id: 0, '@id': '' })]
})
/** Pays : une seule option (valeur courante), suffisant pour l'affichage readonly. */
function countryOptionsFor(country: string): SelectOption[] {
return country ? [{ value: country, label: country }] : []
}
// ── Tableau Prix consultation (regroupé par contenant Fond Mouvant / Benne) ───
const PRICE_GROUP_ORDER = ['FOND_MOUVANT', 'BENNE'] as const
interface PriceRowView {
group: string
aproOrSite: string
delivery: string
forfait: string
tonne: string
indexation: string
state: string
}
/** Construit une ligne d'affichage depuis un prix embarqué. */
function toPriceRow(price: CarrierPriceRead): PriceRowView {
const isClient = price.direction === 'CLIENT'
return {
group: price.containerType ? t(`transport.carriers.containerType.${price.containerType}`) : '',
// RG : prix Client → site de départ ; prix Fournisseur → adresse d'appro.
aproOrSite: isClient ? labelOfRelation(price.departureSite) : labelOfRelation(price.supplierSupplyAddress),
delivery: isClient ? labelOfRelation(price.clientDeliveryAddress) : labelOfRelation(price.deliverySite),
forfait: price.pricingUnit === 'FORFAIT' ? (price.price ?? '') : '',
tonne: price.pricingUnit === 'TONNE' ? (price.price ?? '') : '',
indexation: main.value.indexationRate || '',
state: price.priceState ? t(`transport.carriers.form.price.state${stateSuffix(price.priceState)}`) : '',
}
}
/** EN_COURS → EnCours, VALIDE → Valide, NON_VALIDE → NonValide (clés i18n existantes). */
function stateSuffix(state: string): string {
const map: Record<string, string> = { EN_COURS: 'EnCours', VALIDE: 'Valide', NON_VALIDE: 'NonValide' }
return map[state] ?? ''
}
// Prix triés/regroupés par contenant (Fond Mouvant puis Benne).
const priceRows = computed<PriceRowView[]>(() => {
const list = carrier.value?.prices ?? []
return [...list]
.sort((a, b) => PRICE_GROUP_ORDER.indexOf((a.containerType ?? '') as 'FOND_MOUVANT')
- PRICE_GROUP_ORDER.indexOf((b.containerType ?? '') as 'FOND_MOUVANT'))
.map(toPriceRow)
})
// ── Export XLSX des prix ─────────────────────────────────────────────────────
const exporting = ref(false)
async function exportPrices(): Promise<void> {
if (exporting.value) return
exporting.value = true
try {
const blob = await api.get<Blob>(`/carriers/${carrierId}/prices/export.xlsx`, {}, {
responseType: 'blob',
toast: false,
} as unknown as Parameters<typeof api.get>[2])
triggerDownload(blob, `transporteur-${carrierId}-prix.xlsx`)
}
catch {
toast.error({ title: t('transport.carriers.toast.error'), message: t('transport.carriers.toast.exportError') })
}
finally {
exporting.value = false
}
}
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)
}
// ── Navigation / archivage ───────────────────────────────────────────────────
function goBack(): void {
router.push('/carriers')
}
function goEdit(): void {
router.push(`/carriers/${carrierId}/edit`)
}
const confirmArchive = reactive({ open: false, title: '', message: '', confirmLabel: '' })
function askToggleArchive(): void {
const archiving = !isArchived.value
confirmArchive.title = archiving ? t('transport.carriers.action.archive') : t('transport.carriers.action.restore')
confirmArchive.message = archiving
? t('transport.carriers.consultation.confirmArchive.message')
: t('transport.carriers.consultation.confirmRestore.message')
confirmArchive.confirmLabel = archiving ? t('transport.carriers.action.archive') : t('transport.carriers.action.restore')
confirmArchive.open = true
}
async function runToggleArchive(): Promise<void> {
const archiving = !isArchived.value
confirmArchive.open = false
try {
await (archiving ? archive() : restore())
toast.success({
title: archiving
? t('transport.carriers.toast.archiveSuccess')
: t('transport.carriers.toast.restoreSuccess'),
})
}
catch {
toast.error({ title: t('transport.carriers.toast.error') })
}
}
onMounted(load)
</script>
@@ -0,0 +1,120 @@
import { describe, it, expect } from 'vitest'
import {
canEditCarrier,
iriOf,
labelOfRelation,
mapAddressToDraft,
mapContactToDraft,
mapMainToDraft,
mapPriceToDraft,
showArchiveAction,
showRestoreAction,
type CarrierDetail,
} from '../carrierMappers'
/**
* Tests des mappers détail → brouillons (M4 Transport, ERP-170) : peuplent les écrans
* Consultation / Modification depuis la SEULE réponse `GET /api/carriers/{id}`, et
* helpers de visibilité des boutons (Modifier / Archiver / Restaurer) selon la permission.
*/
describe('carrierMappers', () => {
it('iriOf : objet embarqué, IRI nu, ou null', () => {
expect(iriOf({ '@id': '/api/clients/3' })).toBe('/api/clients/3')
expect(iriOf('/api/sites/1')).toBe('/api/sites/1')
expect(iriOf(null)).toBeNull()
expect(iriOf(undefined)).toBeNull()
})
it('labelOfRelation : name (site) à défaut adresse condensée', () => {
expect(labelOfRelation({ '@id': '/api/sites/1', name: 'Châtellerault' })).toBe('Châtellerault')
expect(labelOfRelation({ '@id': '/api/client_addresses/8', street: '1 rue X', postalCode: '86000', city: 'Poitiers' })).toBe('1 rue X · 86000 · Poitiers')
expect(labelOfRelation('/api/sites/1')).toBe('')
expect(labelOfRelation(null)).toBe('')
})
it('mapMainToDraft : scalaires + IRI décharge / qualimat', () => {
const detail: CarrierDetail = {
'@id': '/api/carriers/7',
id: 7,
name: 'TRANSPORTS ACME',
certificationType: 'QUALIMAT',
isChartered: true,
indexationRate: '5.00',
containerType: 'BENNE',
volumeM3: '30.00',
dischargeDocument: { '@id': '/api/uploaded_documents/4' },
qualimatCarrier: { '@id': '/api/qualimat_carriers/42' },
}
expect(mapMainToDraft(detail)).toEqual({
name: 'TRANSPORTS ACME',
certificationType: 'QUALIMAT',
isChartered: true,
indexationRate: '5.00',
containerType: 'BENNE',
volumeM3: '30.00',
liotPlates: '',
dischargeDocumentIri: '/api/uploaded_documents/4',
qualimatCarrierIri: '/api/qualimat_carriers/42',
})
})
it('mapAddressToDraft : pays par défaut France si absent', () => {
expect(mapAddressToDraft({ '@id': '/api/carrier_addresses/3', id: 3, postalCode: '86000', city: 'Poitiers' }))
.toEqual({ id: 3, country: 'France', postalCode: '86000', city: 'Poitiers', street: null, streetComplement: null })
})
it('mapContactToDraft : hasSecondaryPhone vrai seulement si 2e numéro présent', () => {
const one = mapContactToDraft({ '@id': '/api/carrier_contacts/1', id: 1, firstName: 'Jean', phonePrimary: '0102030405' })
expect(one.hasSecondaryPhone).toBe(false)
expect(one.firstName).toBe('Jean')
const two = mapContactToDraft({ '@id': '/api/carrier_contacts/2', id: 2, phonePrimary: '0102030405', phoneSecondary: '0605040302' })
expect(two.hasSecondaryPhone).toBe(true)
expect(two.phoneSecondary).toBeTruthy()
})
it('mapPriceToDraft : direction + IRIs des relations de branche', () => {
const draft = mapPriceToDraft({
'@id': '/api/carrier_prices/5',
id: 5,
direction: 'CLIENT',
client: { '@id': '/api/clients/3' },
clientDeliveryAddress: { '@id': '/api/client_addresses/8' },
departureSite: '/api/sites/1',
containerType: 'BENNE',
pricingUnit: 'FORFAIT',
price: '120.00',
priceState: 'EN_COURS',
})
expect(draft).toMatchObject({
id: 5,
direction: 'CLIENT',
clientIri: '/api/clients/3',
clientDeliveryAddressIri: '/api/client_addresses/8',
departureSiteIri: '/api/sites/1',
supplierIri: null,
containerType: 'BENNE',
pricingUnit: 'FORFAIT',
price: '120.00',
priceState: 'EN_COURS',
})
})
it('visibilité des boutons selon la permission', () => {
const can = (granted: string[]) => (code: string) => granted.includes(code)
// Modifier : seulement avec manage.
expect(canEditCarrier(can(['transport.carriers.manage']))).toBe(true)
expect(canEditCarrier(can(['transport.carriers.view']))).toBe(false)
// Archiver : permission archive ET actif ; Restaurer : archive ET archivé.
const withArchive = can(['transport.carriers.archive'])
const noArchive = can(['transport.carriers.manage'])
expect(showArchiveAction(withArchive, false)).toBe(true)
expect(showArchiveAction(withArchive, true)).toBe(false)
expect(showRestoreAction(withArchive, true)).toBe(true)
expect(showRestoreAction(withArchive, false)).toBe(false)
expect(showArchiveAction(noArchive, false)).toBe(false)
expect(showRestoreAction(noArchive, true)).toBe(false)
})
})
@@ -0,0 +1,190 @@
/**
* Helpers purs des écrans Consultation / Modification transporteur (M4, ERP-170) —
* miroir de `providerDetail.ts` (M3). Mappent le payload `GET /api/carriers/{id}`
* (relations embarquées via les groupes `carrier:item:read` + `qualimat:read` +
* read-groups cross-module client/supplier/site/adresses) vers les brouillons
* « plats » partagés avec les blocs Adresse / Contact / Prix.
*
* Ne touchent ni à l'API ni à l'état réactif (testables unitairement). Les champs
* nuls peuvent être OMIS (skip_null_values) → toujours lire avec `?? null`.
*/
import { formatPhoneFR } from '~/shared/utils/phone'
import type {
CarrierAddressFormDraft,
CarrierContactFormDraft,
CarrierMainDraft,
CarrierPriceFormDraft,
} from '~/modules/transport/types/carrierForm'
/** Référence Hydra embarquée minimale (@id toujours présent). */
export interface HydraRef {
'@id': string
[key: string]: unknown
}
/** Une relation peut être embarquée (objet), un IRI nu (chaîne) ou absente. */
export type Relation = HydraRef | string | null | undefined
/** Adresse embarquée (groupe carrier:item:read). */
export interface CarrierAddressRead extends HydraRef {
id: number
country?: string | null
postalCode?: string | null
city?: string | null
street?: string | null
streetComplement?: string | null
}
/** Contact embarqué (groupe carrier:item:read). */
export interface CarrierContactRead extends HydraRef {
id: number
firstName?: string | null
lastName?: string | null
jobTitle?: string | null
phonePrimary?: string | null
phoneSecondary?: string | null
email?: string | null
}
/** Prix embarqué (groupe carrier:item:read + relations cross-module). */
export interface CarrierPriceRead extends HydraRef {
id: number
direction?: string | null
client?: Relation
clientDeliveryAddress?: Relation
departureSite?: Relation
supplier?: Relation
supplierSupplyAddress?: Relation
deliverySite?: Relation
containerType?: string | null
pricingUnit?: string | null
price?: string | null
priceState?: string | null
}
/**
* Détail d'un transporteur (`GET /api/carriers/{id}`). Tous les champs optionnels :
* skip_null_values peut omettre n'importe quelle clé.
*/
export interface CarrierDetail extends HydraRef {
id: number
name?: string | null
certificationType?: string | null
isChartered?: boolean
indexationRate?: string | null
containerType?: string | null
volumeM3?: string | null
liotPlates?: string | null
dischargeDocument?: Relation
qualimatCarrier?: Relation
isArchived?: boolean
addresses?: CarrierAddressRead[]
contacts?: CarrierContactRead[]
prices?: CarrierPriceRead[]
}
/** Extrait l'IRI d'une relation (objet embarqué, IRI nu, ou null si absente). */
export function iriOf(relation: Relation): string | null {
if (relation === null || relation === undefined) {
return null
}
if (typeof relation === 'string') {
return relation
}
return relation['@id'] ?? null
}
/**
* Libellé d'affichage d'une relation embarquée : `name` (site) à défaut une adresse
* condensée (voie · CP · ville). Chaîne vide si la relation est un IRI nu / absente.
*/
export function labelOfRelation(relation: Relation): string {
if (!relation || typeof relation === 'string') {
return ''
}
const name = relation.name as string | undefined
if (name) {
return name
}
const parts = [relation.street, relation.postalCode, relation.city].filter(Boolean)
return parts.join(' · ')
}
/** Mappe le détail vers le brouillon du formulaire principal. */
export function mapMainToDraft(detail: CarrierDetail): CarrierMainDraft {
return {
name: detail.name ?? '',
certificationType: detail.certificationType ?? null,
isChartered: detail.isChartered ?? false,
indexationRate: detail.indexationRate ?? '',
containerType: detail.containerType ?? null,
volumeM3: detail.volumeM3 ?? '',
liotPlates: detail.liotPlates ?? '',
dischargeDocumentIri: iriOf(detail.dischargeDocument),
qualimatCarrierIri: iriOf(detail.qualimatCarrier),
}
}
/** Mappe une adresse embarquée vers un brouillon. */
export function mapAddressToDraft(address: CarrierAddressRead): CarrierAddressFormDraft {
return {
id: address.id,
country: address.country ?? 'France',
postalCode: address.postalCode ?? null,
city: address.city ?? null,
street: address.street ?? null,
streetComplement: address.streetComplement ?? null,
}
}
/** Mappe un contact embarqué vers un brouillon (téléphones formatés XX XX XX XX XX). */
export function mapContactToDraft(contact: CarrierContactRead): CarrierContactFormDraft {
const secondary = contact.phoneSecondary ?? null
return {
id: contact.id,
firstName: contact.firstName ?? null,
lastName: contact.lastName ?? null,
jobTitle: contact.jobTitle ?? null,
phonePrimary: contact.phonePrimary ? formatPhoneFR(contact.phonePrimary) : null,
phoneSecondary: secondary ? formatPhoneFR(secondary) : null,
email: contact.email ?? null,
hasSecondaryPhone: secondary !== null && secondary !== '',
}
}
/** Mappe un prix embarqué vers un brouillon (relations en IRI). */
export function mapPriceToDraft(price: CarrierPriceRead): CarrierPriceFormDraft {
const direction = price.direction === 'CLIENT' || price.direction === 'FOURNISSEUR'
? price.direction
: null
return {
id: price.id,
direction,
clientIri: iriOf(price.client),
clientDeliveryAddressIri: iriOf(price.clientDeliveryAddress),
departureSiteIri: iriOf(price.departureSite),
supplierIri: iriOf(price.supplier),
supplierSupplyAddressIri: iriOf(price.supplierSupplyAddress),
deliverySiteIri: iriOf(price.deliverySite),
containerType: price.containerType ?? null,
pricingUnit: price.pricingUnit ?? null,
price: price.price ?? null,
priceState: price.priceState ?? null,
}
}
/** Bouton « Modifier » : visible avec la permission `manage` (Admin / Bureau). */
export function canEditCarrier(can: (code: string) => boolean): boolean {
return can('transport.carriers.manage')
}
/** Bouton « Archiver » : permission archive ET transporteur encore actif (Admin seul). */
export function showArchiveAction(can: (code: string) => boolean, isArchived: boolean): boolean {
return can('transport.carriers.archive') && !isArchived
}
/** Bouton « Restaurer » : permission archive ET transporteur déjà archivé (Admin seul). */
export function showRestoreAction(can: (code: string) => boolean, isArchived: boolean): boolean {
return can('transport.carriers.archive') && isArchived
}