feat(transport) : onglet contacts transporteur (ERP-168)

2026-06-17 09:28:03 +02:00
parent 6a69d7cd23
commit 94db73b807
7 changed files with 487 additions and 5 deletions
@@ -0,0 +1,108 @@
+<template>
+    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+        <!-- Suppression : ouvre une modal de confirmation côté parent. Masquée si
+             non supprimable (1er bloc) ou en lecture seule. -->
+        <MalioButtonIcon
+            v-if="removable && !readonly"
+            icon="mdi:delete-outline"
+            variant="ghost"
+            button-class="absolute top-3 right-3"
+            v-bind="{ ariaLabel: t('transport.carriers.form.contact.remove') }"
+            @click="$emit('remove')"
+        />
+
+        <MalioInputText
+            :model-value="model.lastName"
+            :label="t('transport.carriers.form.contact.lastName')"
+            :readonly="readonly"
+            :error="errors?.lastName"
+            @update:model-value="(v: string) => update('lastName', v)"
+        />
+        <MalioInputText
+            :model-value="model.firstName"
+            :label="t('transport.carriers.form.contact.firstName')"
+            :readonly="readonly"
+            :error="errors?.firstName"
+            @update:model-value="(v: string) => update('firstName', v)"
+        />
+        <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText (inheritAttrs:false)
+             renvoie `class` sur l'input interne, pas sur la cellule de grille. -->
+        <div class="col-span-2">
+            <MalioInputText
+                :model-value="model.jobTitle"
+                :label="t('transport.carriers.form.contact.jobTitle')"
+                :readonly="readonly"
+                :error="errors?.jobTitle"
+                @update:model-value="(v: string) => update('jobTitle', v)"
+            />
+        </div>
+        <MalioInputEmail
+            :model-value="model.email"
+            :label="t('transport.carriers.form.contact.email')"
+            :readonly="readonly"
+            :lowercase="true"
+            :error="errors?.email"
+            @update:model-value="(v: string) => update('email', v)"
+        />
+        <!-- Téléphone principal + bouton « + » révélant le 2e numéro (max 2). -->
+        <MalioInputPhone
+            :model-value="model.phonePrimary"
+            :label="t('transport.carriers.form.contact.phonePrimary')"
+            :mask="PHONE_MASK"
+            :readonly="readonly"
+            :error="errors?.phonePrimary"
+            :addable="!model.hasSecondaryPhone && !readonly"
+            :add-button-label="t('transport.carriers.form.contact.addPhone')"
+            @update:model-value="(v: string) => update('phonePrimary', v)"
+            @add="revealSecondaryPhone"
+        />
+        <!-- 2e numéro : révélé à la demande (max 2 téléphones — RG-4.08). -->
+        <MalioInputPhone
+            v-if="model.hasSecondaryPhone"
+            :model-value="model.phoneSecondary"
+            :label="t('transport.carriers.form.contact.phoneSecondary')"
+            :mask="PHONE_MASK"
+            :readonly="readonly"
+            :error="errors?.phoneSecondary"
+            @update:model-value="(v: string) => update('phoneSecondary', v)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { CarrierContactFormDraft } from '~/modules/transport/types/carrierForm'
+
+// Masque téléphone FR : 5 groupes de 2 chiffres (la normalisation finale reste serveur).
+const PHONE_MASK = '## ## ## ## ##'
+
+const props = defineProps<{
+    /** Brouillon du contact (v-model). */
+    modelValue: CarrierContactFormDraft
+    /** Affiche l'icône de suppression (1er bloc non supprimable). */
+    removable?: boolean
+    /** Bloc en lecture seule (onglet validé). */
+    readonly?: boolean
+    /** Erreurs serveur 422 de cette ligne, indexées par champ (ERP-101). */
+    errors?: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: CarrierContactFormDraft]
+    'remove': []
+}>()
+
+const { t } = useI18n()
+
+// Alias local pour la lisibilité du template.
+const model = computed(() => props.modelValue)
+
+/** Émet un nouveau brouillon avec le champ modifié (immutabilité). */
+function update<K extends keyof CarrierContactFormDraft>(field: K, value: CarrierContactFormDraft[K]): void {
+    emit('update:modelValue', { ...props.modelValue, [field]: value })
+}
+
+/** Révèle le 2e numéro (max 1 secondaire, le « + » disparaît). */
+function revealSecondaryPhone(): void {
+    emit('update:modelValue', { ...props.modelValue, hasSecondaryPhone: true })
+}
+</script>