feat(front) : écran ajouter un ticket de pesée (blocs vide/plein, pesée, masque immat) (ERP-189)

2026-06-22 15:11:54 +02:00
parent ef7bf69980
commit 9f3fe4da4e
8 changed files with 1023 additions and 0 deletions
@@ -0,0 +1,375 @@
+<template>
+    <div>
+        <!-- En-tête : retour vers la liste + titre. -->
+        <div class="flex items-center gap-3 pt-11">
+            <MalioButtonIcon
+                icon="mdi:arrow-left-bold"
+                icon-size="24"
+                variant="ghost"
+                :title="t('logistique.weighingTickets.form.back')"
+                v-bind="{ ariaLabel: t('logistique.weighingTickets.form.back') }"
+                @click="goBack"
+            />
+            <h1 class="text-[30px] font-semibold text-m-primary">{{ t('logistique.weighingTickets.form.addTitle') }}</h1>
+        </div>
+
+        <div class="mt-[48px] flex flex-col gap-8">
+            <!-- ── Bloc « Poids à vide » (porte la contrepartie, RG-5.03) ──────── -->
+            <WeighingBlock
+                block-id="empty"
+                :title="t('logistique.weighingTickets.form.emptyBlock')"
+                :block="form.empty"
+                :immatriculation="form.immatriculation.value"
+                :plate-free-format="form.plateFreeFormat.value"
+                :errors="emptyBlockErrors"
+                :disabled="emptyLocked"
+                @update:block="(field, value) => updateBlock('empty', field, value)"
+                @update:immatriculation="(v) => form.immatriculation.value = v"
+                @update:plate-free-format="(v) => form.plateFreeFormat.value = v"
+                @request-auto="openAuto('empty')"
+                @request-manual="openManual('empty')"
+            >
+                <!-- Contrepartie : sélecteur + champ conditionnel (RG-5.03). -->
+                <template #counterparty>
+                    <MalioSelect
+                        :model-value="form.counterpartyType.value"
+                        :options="counterpartyOptions"
+                        :label="t('logistique.weighingTickets.form.counterparty.type')"
+                        :required="true"
+                        :disabled="emptyLocked"
+                        empty-option-label=""
+                        :error="errors.counterpartyType"
+                        @update:model-value="onCounterpartyTypeChange"
+                    />
+                    <MalioSelect
+                        v-if="form.counterpartyField.value === 'supplier'"
+                        :model-value="form.supplierIri.value"
+                        :options="referentials.suppliers.value"
+                        :label="t('logistique.weighingTickets.form.counterparty.supplier')"
+                        :required="true"
+                        :disabled="emptyLocked"
+                        empty-option-label=""
+                        :error="errors.supplier"
+                        @update:model-value="(v: string | number | null) => form.supplierIri.value = v === null ? null : String(v)"
+                    />
+                    <MalioSelect
+                        v-else-if="form.counterpartyField.value === 'client'"
+                        :model-value="form.clientIri.value"
+                        :options="referentials.clients.value"
+                        :label="t('logistique.weighingTickets.form.counterparty.client')"
+                        :required="true"
+                        :disabled="emptyLocked"
+                        empty-option-label=""
+                        :error="errors.client"
+                        @update:model-value="(v: string | number | null) => form.clientIri.value = v === null ? null : String(v)"
+                    />
+                    <MalioInputText
+                        v-else-if="form.counterpartyField.value === 'other'"
+                        :model-value="form.otherLabel.value"
+                        :label="t('logistique.weighingTickets.form.counterparty.other')"
+                        :required="true"
+                        :disabled="emptyLocked"
+                        :error="errors.otherLabel"
+                        @update:model-value="(v: string | null) => form.otherLabel.value = v"
+                    />
+                </template>
+            </WeighingBlock>
+
+            <!-- « Enregistrer » du bloc vide : POST initial du ticket (disparaît une
+                 fois le ticket créé — RG-5.08). -->
+            <div v-if="form.ticketId.value === null" class="flex justify-center">
+                <MalioButton
+                    variant="primary"
+                    :label="t('logistique.weighingTickets.form.save')"
+                    :disabled="creating"
+                    @click="submitCreate"
+                />
+            </div>
+
+            <!-- ── Bloc « Poids à plein » ───────────────────────────────────────-->
+            <WeighingBlock
+                block-id="full"
+                :title="t('logistique.weighingTickets.form.fullBlock')"
+                :block="form.full"
+                :immatriculation="form.immatriculation.value"
+                :plate-free-format="form.plateFreeFormat.value"
+                :errors="fullBlockErrors"
+                @update:block="(field, value) => updateBlock('full', field, value)"
+                @update:immatriculation="(v) => form.immatriculation.value = v"
+                @update:plate-free-format="(v) => form.plateFreeFormat.value = v"
+                @request-auto="openAuto('full')"
+                @request-manual="openManual('full')"
+            />
+        </div>
+
+        <!-- « Valider » (bas d'écran) : PATCH de la pesée à plein puis ouverture du
+             bon de pesée PDF (RG-5.08). Indisponible tant que le ticket n'est pas créé. -->
+        <div class="mt-12 flex justify-center">
+            <MalioButton
+                variant="primary"
+                :label="t('logistique.weighingTickets.form.validate')"
+                :disabled="validating || form.ticketId.value === null"
+                @click="submitValidate"
+            />
+        </div>
+
+        <!-- ── Modal « Confirmation pesée bascule » (RG-5.06) ──────────────────-->
+        <MalioModal v-model="autoModal.open" modal-class="max-w-md">
+            <template #header>
+                <h2 class="text-[24px] font-bold">{{ t('logistique.weighingTickets.form.weighbridge.confirmTitle') }}</h2>
+            </template>
+            <p>{{ t('logistique.weighingTickets.form.weighbridge.confirmMessage') }}</p>
+            <!-- Erreur de pont indisponible affichée INLINE dans la modal + invite
+                 à la pesée manuelle (RG-5.06). -->
+            <p v-if="autoModal.error" class="mt-4 text-m-danger">{{ autoModal.error }}</p>
+            <template #footer>
+                <MalioButton
+                    variant="secondary"
+                    button-class="flex-1"
+                    :label="t('logistique.weighingTickets.form.weighbridge.cancel')"
+                    @click="autoModal.open = false"
+                />
+                <MalioButton
+                    variant="primary"
+                    button-class="flex-1"
+                    :label="t('logistique.weighingTickets.form.weighbridge.validate')"
+                    :disabled="autoModal.loading"
+                    @click="confirmAuto"
+                />
+            </template>
+        </MalioModal>
+
+        <!-- ── Modal « Pesée manuelle » ────────────────────────────────────────-->
+        <MalioModal v-model="manualModal.open" modal-class="max-w-md">
+            <template #header>
+                <h2 class="text-[24px] font-bold">{{ t('logistique.weighingTickets.form.manual.title') }}</h2>
+            </template>
+            <div class="flex flex-col gap-4">
+                <MalioInputNumber
+                    v-model="manualModal.weight"
+                    :label="t('logistique.weighingTickets.form.manual.weight')"
+                    :required="true"
+                    :min="0"
+                    :error="manualModal.errors.weight"
+                />
+                <MalioInputText
+                    v-model="manualModal.manualNumber"
+                    :label="t('logistique.weighingTickets.form.manual.number')"
+                    :required="true"
+                    :error="manualModal.errors.manualNumber"
+                />
+            </div>
+            <template #footer>
+                <MalioButton
+                    variant="secondary"
+                    button-class="flex-1"
+                    :label="t('logistique.weighingTickets.form.manual.cancel')"
+                    @click="manualModal.open = false"
+                />
+                <MalioButton
+                    variant="primary"
+                    button-class="flex-1"
+                    :label="t('logistique.weighingTickets.form.manual.save')"
+                    :disabled="manualModal.loading"
+                    @click="confirmManual"
+                />
+            </template>
+        </MalioModal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useWeighingTicketForm, type WeighingBlockState } from '~/modules/logistique/composables/useWeighingTicketForm'
+import { useWeighbridge } from '~/modules/logistique/composables/useWeighbridge'
+import { useWeighingTicketReferentials, type RefOption } from '~/modules/logistique/composables/useWeighingTicketReferentials'
+
+const { t } = useI18n()
+const api = useApi()
+const router = useRouter()
+const { can } = usePermissions()
+
+useHead({ title: t('logistique.weighingTickets.form.addTitle') })
+
+// Création réservée à `manage` (Admin / Bureau / Usine) — sinon retour à la liste.
+if (!can('logistique.weighing_tickets.manage')) {
+    await navigateTo('/weighing-tickets')
+}
+
+const form = useWeighingTicketForm()
+const weighbridge = useWeighbridge()
+const referentials = useWeighingTicketReferentials()
+const { errors, clearErrors, handleApiError } = useFormErrors()
+
+// Le bloc vide se verrouille une fois le ticket créé (numéro/site attribués).
+const emptyLocked = computed(() => form.ticketId.value !== null)
+
+const creating = ref(false)
+const validating = ref(false)
+
+/** Retour vers la liste (flèche d'en-tête). */
+function goBack(): void {
+    router.push('/weighing-tickets')
+}
+
+// ── Contrepartie (RG-5.03) ───────────────────────────────────────────────────
+// Ordre maquette : Fournisseur / Client / Autre.
+const counterpartyOptions = computed<RefOption[]>(() => [
+    { value: 'FOURNISSEUR', label: t('logistique.weighingTickets.form.counterparty.supplier') },
+    { value: 'CLIENT', label: t('logistique.weighingTickets.form.counterparty.client') },
+    { value: 'AUTRE', label: t('logistique.weighingTickets.form.counterparty.other') },
+])
+
+function onCounterpartyTypeChange(value: string | number | null): void {
+    const type = (value === null || value === '') ? null : (String(value) as 'CLIENT' | 'FOURNISSEUR' | 'AUTRE')
+    form.setCounterpartyType(type)
+}
+
+// ── Erreurs par bloc (mapping propertyPath back → champs du composant) ────────
+const emptyBlockErrors = computed<Record<string, string>>(() => ({
+    date: errors.emptyDate,
+    weight: errors.emptyWeight,
+    dsd: errors.emptyDsd,
+    immatriculation: errors.immatriculation,
+}))
+const fullBlockErrors = computed<Record<string, string>>(() => ({
+    date: errors.fullDate,
+    weight: errors.fullWeight,
+    dsd: errors.fullDsd,
+    immatriculation: errors.immatriculation,
+}))
+
+/** Mute un champ d'un bloc de pesée (état centralisé dans le form). */
+function updateBlock(target: 'empty' | 'full', field: keyof WeighingBlockState, value: unknown): void {
+    // Affectation typée via l'index du bloc reactif (date est le seul champ éditable).
+    (form[target] as Record<string, unknown>)[field as string] = value
+}
+
+// ── Modal pesée bascule (AUTO) ────────────────────────────────────────────────
+const autoModal = reactive({
+    open: false,
+    error: '',
+    loading: false,
+    target: 'empty' as 'empty' | 'full',
+})
+
+function openAuto(target: 'empty' | 'full'): void {
+    autoModal.target = target
+    autoModal.error = ''
+    autoModal.open = true
+}
+
+/** Déclenche la pesée bascule ; erreur (RG-5.06) affichée dans la modal. */
+async function confirmAuto(): Promise<void> {
+    if (autoModal.loading) return
+    autoModal.loading = true
+    autoModal.error = ''
+    try {
+        const reading = await weighbridge.triggerAuto()
+        form.applyReading(form[autoModal.target], reading)
+        autoModal.open = false
+    }
+    catch (error) {
+        // Pont indisponible : message inline + invite à la pesée manuelle.
+        autoModal.error = weighbridge.extractWeighbridgeError(error)
+    }
+    finally {
+        autoModal.loading = false
+    }
+}
+
+// ── Modal pesée manuelle (MANUAL) ─────────────────────────────────────────────
+const manualModal = reactive({
+    open: false,
+    loading: false,
+    target: 'empty' as 'empty' | 'full',
+    weight: null as string | number | null,
+    manualNumber: null as string | null,
+    errors: {} as Record<string, string>,
+})
+
+function openManual(target: 'empty' | 'full'): void {
+    manualModal.target = target
+    manualModal.weight = null
+    manualModal.manualNumber = null
+    manualModal.errors = {}
+    manualModal.open = true
+}
+
+/** Valide la saisie manuelle puis remplit le bloc (DSD calculé serveur, RG-5.04). */
+async function confirmManual(): Promise<void> {
+    if (manualModal.loading) return
+    manualModal.errors = {}
+
+    const weight = manualModal.weight === null || manualModal.weight === '' ? null : Number(manualModal.weight)
+    const manualNumber = (manualModal.manualNumber ?? '').trim()
+    if (weight === null || Number.isNaN(weight)) {
+        manualModal.errors = { ...manualModal.errors, weight: t('logistique.weighingTickets.form.manual.weightRequired') }
+    }
+    if (manualNumber === '') {
+        manualModal.errors = { ...manualModal.errors, manualNumber: t('logistique.weighingTickets.form.manual.numberRequired') }
+    }
+    if (Object.keys(manualModal.errors).length > 0) return
+
+    manualModal.loading = true
+    try {
+        const reading = await weighbridge.triggerManual(weight as number, manualNumber)
+        form.applyReading(form[manualModal.target], reading)
+        manualModal.open = false
+    }
+    catch (error) {
+        manualModal.errors = { weight: weighbridge.extractWeighbridgeError(error) }
+    }
+    finally {
+        manualModal.loading = false
+    }
+}
+
+// ── Soumissions ──────────────────────────────────────────────────────────────
+interface TicketResponse { id: number }
+
+/** « Enregistrer » du bloc vide : POST /weighing_tickets (création + pesée à vide). */
+async function submitCreate(): Promise<void> {
+    if (creating.value) return
+    creating.value = true
+    clearErrors()
+    try {
+        const created = await api.post<TicketResponse>('/weighing_tickets', form.buildCreatePayload(), {
+            headers: { Accept: 'application/ld+json' },
+            toast: false,
+        })
+        form.ticketId.value = created.id
+    }
+    catch (error) {
+        handleApiError(error, { fallbackMessage: t('logistique.weighingTickets.toast.error') })
+    }
+    finally {
+        creating.value = false
+    }
+}
+
+/** « Valider » : PATCH de la pesée à plein puis ouverture du bon de pesée PDF (RG-5.08). */
+async function submitValidate(): Promise<void> {
+    if (validating.value || form.ticketId.value === null) return
+    validating.value = true
+    clearErrors()
+    try {
+        await api.patch(`/weighing_tickets/${form.ticketId.value}`, form.buildFullPayload(), { toast: false })
+        // Bon de pesée = PDF généré côté back (Twig, ERP-192) — on l'ouvre, on ne
+        // dessine aucun gabarit côté front (RG-5.08).
+        window.open(`/api/weighing_tickets/${form.ticketId.value}/print.pdf`, '_blank')
+        router.push('/weighing-tickets')
+    }
+    catch (error) {
+        handleApiError(error, { fallbackMessage: t('logistique.weighingTickets.toast.error') })
+    }
+    finally {
+        validating.value = false
+    }
+}
+
+onMounted(() => {
+    // Échec du chargement des référentiels non bloquant : les selects restent vides.
+    referentials.load().catch(() => {})
+})
+</script>