Files
Starseed/frontend/modules/logistique/components/WeighingBlock.vue
T

133 lines
5.5 KiB
Vue

<template>
<div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
<!-- En-tête du bloc : titre + boutons de pesée (bascule / manuelle). -->
<div class="flex items-center justify-between">
<h2 class="text-[20px] font-semibold text-m-primary">{{ title }}</h2>
<div class="flex items-center gap-4">
<MalioButton
variant="secondary"
:label="t('logistique.weighingTickets.form.weighbridge.auto')"
:disabled="disabled"
@click="$emit('request-auto')"
/>
<MalioButton
variant="primary"
:label="t('logistique.weighingTickets.form.weighbridge.manual')"
:disabled="disabled"
@click="$emit('request-manual')"
/>
</div>
</div>
<div class="mt-6 grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
<!-- Contrepartie : rendue par le parent (bloc vide uniquement) via le slot. -->
<slot name="counterparty" />
<!-- Date de la pesée jour par défaut (RG-5.07). MalioDate (composant
projet pour le type date, exception tolérée @.claude/rules/frontend.md). -->
<MalioDate
:model-value="block.date"
:label="t('logistique.weighingTickets.form.date')"
:required="true"
:editable="true"
:disabled="disabled"
:error="errors.date"
@update:model-value="(v: string | null) => emitBlock('date', v)"
/>
<!-- Poids : readonly, rempli par la pesée (RG-5.07). Unité Kg dans le label. -->
<MalioInputNumber
:model-value="block.weight"
:label="t('logistique.weighingTickets.form.weight')"
:required="true"
:readonly="true"
:disabled="disabled"
:error="errors.weight"
/>
<!-- DSD : readonly, rempli par la pesée (RG-5.04 / RG-5.07). -->
<MalioInputNumber
:model-value="block.dsd"
:label="t('logistique.weighingTickets.form.dsd')"
:required="true"
:readonly="true"
:disabled="disabled"
:error="errors.dsd"
/>
<!-- Immatriculation : masque XX-000-XX (plaque FR SIV) sauf « Tout format ».
PARTAGÉE entre les 2 blocs (RG-5.01) — v-model remonté au form parent.
TODO migrer le masque plaque quand @malio/layer-ui couvrira le format. -->
<MalioInputText
:model-value="immatriculation"
:mask="plateFreeFormat ? undefined : PLATE_MASK"
:label="t('logistique.weighingTickets.form.immatriculation')"
:required="true"
:disabled="disabled"
:error="errors.immatriculation"
@update:model-value="(v: string | null) => $emit('update:immatriculation', v)"
/>
<!-- « Tout format » : désactive le masque plaque. Partagé entre blocs (RG-5.01). -->
<MalioCheckbox
:id="`${blockId}-plate-free-format`"
:model-value="plateFreeFormat"
:label="t('logistique.weighingTickets.form.plateFreeFormat')"
group-class="self-center"
:disabled="disabled"
@update:model-value="(v: boolean) => $emit('update:plateFreeFormat', v)"
/>
</div>
</div>
</template>
<script setup lang="ts">
import type { WeighingBlockState } from '~/modules/logistique/composables/useWeighingTicketForm'
/**
* Bloc de pesée (« Poids à vide » ou « Poids à plein ») de l'écran Ticket de pesée.
* Champs Date / Poids / DSD / Immatriculation / « Tout format » + boutons de pesée.
* L'immatriculation et « Tout format » sont PARTAGÉS entre les 2 blocs (RG-5.01) :
* portés par le form parent et remontés en `update:*`. Le slot `counterparty`
* permet au parent d'injecter la contrepartie sur le seul bloc vide (RG-5.03).
*/
// Masque plaque FR SIV `XX-000-XX` (maska) : 2 lettres, 3 chiffres, 2 lettres,
// majuscules forcées. Désactivé quand « Tout format » est coché (RG-5.01).
const PLATE_MASK = {
mask: 'AA-###-AA',
tokens: { A: { pattern: /[A-Za-z]/, transform: (c: string) => c.toUpperCase() } },
}
const props = defineProps<{
/** Identifiant technique du bloc (pour les `id` de champs uniques). */
blockId: string
title: string
block: WeighingBlockState
/** Immatriculation partagée (RG-5.01) — portée par le form parent. */
immatriculation: string | null
/** « Tout format » partagé (RG-5.01) — porté par le form parent. */
plateFreeFormat: boolean
/** Erreurs 422 par champ (propertyPath → message). */
errors?: Record<string, string>
disabled?: boolean
}>()
const emit = defineEmits<{
'update:block': [field: keyof WeighingBlockState, value: unknown]
'update:immatriculation': [value: string | null]
'update:plateFreeFormat': [value: boolean]
'request-auto': []
'request-manual': []
}>()
const { t } = useI18n()
const errors = computed(() => props.errors ?? {})
/** Remonte la mutation d'un champ du bloc au parent (état des pesées centralisé). */
function emitBlock(field: keyof WeighingBlockState, value: unknown): void {
emit('update:block', field, value)
}
</script>