feat(front) : onglet contact prestataire (ERP-142) (#104)

Empilée sur ERP-141 (#103). ## Périmètre ERP-142 Onglet **Contact** de l'écran `/providers/new` — saisie multi-contacts (blocs ajoutables) via la sous-ressource contacts. - **`ProviderContactBlock.vue`** (miroir `SupplierContactBlock`) : Nom / Prénom / Fonction / Email / Téléphone (x1, +1 révélable, **max 2**), erreurs 422 par champ (prop `:errors`). - **`useProviderForm`** étendu : état `contacts`, `canAddContact` (RG-3.04), `addContact`/`removeContact`, `submitContacts` (POST `/providers/{id}/contacts` pour les nouveaux, PATCH `/provider_contacts/{id}` pour les existants, groupe `provider:write:contacts`), `submitRows` (erreurs collectées **par ligne**, non bloquant). - **RG-3.04** : « + Nouveau contact » désactivé tant que le bloc courant est vide (≥1 champ parmi prénom/nom/fonction/tél/email — aligné back). - **RG-3.12** : onglet non validable vide ; une amorce vide est soumise pour déclencher la 422 `firstName` inline. - Suppression d'un bloc → modal de confirmation. - Helpers purs `utils/forms/providerContact.ts` (`isProviderContactBlank`, `buildProviderContactPayload`). - i18n `technique.providers.form.contact/confirmDelete` + `toast.updateSuccess`. ## Vérifications - Vitest : 418/418 (16 nouveaux : helpers, bloc, workflow contacts). - ESLint : OK. - `nuxi typecheck` : 0 erreur sur les fichiers source du ticket. - Golden path navigateur : bloc Contact rendu, « Nouveau contact » désactivé tant que vide puis activé après saisie, révélation du 2e téléphone (max 2). Reviewed-on: #104 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-06-15 09:05:07 +00:00
parent a6f01400ba
commit c1e45cd582
9 changed files with 709 additions and 6 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 cote parent. Masquee 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('technique.providers.form.contact.remove') }"
+            @click="$emit('remove')"
+        />
+
+        <MalioInputText
+            :model-value="model.lastName"
+            :label="t('technique.providers.form.contact.lastName')"
+            :readonly="readonly"
+            :error="errors?.lastName"
+            @update:model-value="(v: string) => update('lastName', v)"
+        />
+        <MalioInputText
+            :model-value="model.firstName"
+            :label="t('technique.providers.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. Le wrapper porte le col-span-2, le champ le remplit. -->
+        <div class="col-span-2">
+            <MalioInputText
+                :model-value="model.jobTitle"
+                :label="t('technique.providers.form.contact.jobTitle')"
+                :readonly="readonly"
+                :error="errors?.jobTitle"
+                @update:model-value="(v: string) => update('jobTitle', v)"
+            />
+        </div>
+        <MalioInputEmail
+            :model-value="model.email"
+            :label="t('technique.providers.form.contact.email')"
+            :readonly="readonly"
+            :lowercase="true"
+            :error="errors?.email"
+            @update:model-value="(v: string) => update('email', v)"
+        />
+        <MalioInputPhone
+            :model-value="model.phonePrimary"
+            :label="t('technique.providers.form.contact.phonePrimary')"
+            :mask="PHONE_MASK"
+            :readonly="readonly"
+            :error="errors?.phonePrimary"
+            :addable="!model.hasSecondaryPhone && !readonly"
+            :add-button-label="t('technique.providers.form.contact.addPhone')"
+            @update:model-value="(v: string) => update('phonePrimary', v)"
+            @add="revealSecondaryPhone"
+        />
+        <!-- 2e numero : revele a la demande (max 2 telephones par contact). -->
+        <MalioInputPhone
+            v-if="model.hasSecondaryPhone"
+            :model-value="model.phoneSecondary"
+            :label="t('technique.providers.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 { ProviderContactFormDraft } from '~/modules/technique/types/providerForm'
+
+// Masque telephone FR : 5 groupes de 2 chiffres (la normalisation finale reste serveur).
+const PHONE_MASK = '## ## ## ## ##'
+
+const props = defineProps<{
+    /** Brouillon du contact (v-model). */
+    modelValue: ProviderContactFormDraft
+    /** Affiche l'icone de suppression (1er bloc non supprimable). */
+    removable?: boolean
+    /** Bloc en lecture seule (onglet valide). */
+    readonly?: boolean
+    /** Erreurs serveur 422 de cette ligne, indexees par champ (ERP-101). */
+    errors?: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: ProviderContactFormDraft]
+    'remove': []
+}>()
+
+const { t } = useI18n()
+
+// Alias local pour la lisibilite du template.
+const model = computed(() => props.modelValue)
+
+/** Emet un nouveau brouillon avec le champ modifie (immutabilite). */
+function update<K extends keyof ProviderContactFormDraft>(field: K, value: ProviderContactFormDraft[K]): void {
+    emit('update:modelValue', { ...props.modelValue, [field]: value })
+}
+
+/** Revele le 2e numero (max 1 secondaire, le « + » disparait). */
+function revealSecondaryPhone(): void {
+    emit('update:modelValue', { ...props.modelValue, hasSecondaryPhone: true })
+}
+</script>
@@ -0,0 +1,55 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h, ref, computed } from 'vue'
+import { emptyProviderContact } from '~/modules/technique/types/providerForm'
+import ProviderContactBlock from '../ProviderContactBlock.vue'
+
+// Auto-imports Nuxt/Vue utilises sans import explicite par le composant.
+vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
+vi.stubGlobal('ref', ref)
+vi.stubGlobal('computed', computed)
+
+/** Stub d'un champ Malio qui re-expose la prop `error` recue dans un data-* attribut. */
+function errorProbe(testid: string) {
+    return defineComponent({
+        name: `Probe-${testid}`,
+        props: {
+            modelValue: { type: [String, Number, null], default: undefined },
+            error: { type: String, default: '' },
+            label: { type: String, default: '' },
+            readonly: { type: Boolean, default: false },
+        },
+        setup(props) {
+            return () => h('div', { 'data-testid': testid, 'data-error': props.error })
+        },
+    })
+}
+
+function mountBlock(errors?: Record<string, string>) {
+    return mount(ProviderContactBlock, {
+        props: {
+            modelValue: emptyProviderContact(),
+            ...(errors ? { errors } : {}),
+        },
+        global: {
+            stubs: {
+                MalioButtonIcon: true,
+                MalioInputPhone: true,
+                MalioInputText: errorProbe('contact-text'),
+                MalioInputEmail: errorProbe('contact-email'),
+            },
+        },
+    })
+}
+
+describe('ProviderContactBlock — mapping erreur par champ (ERP-101)', () => {
+    it('affiche l\'erreur serveur sur le champ email via la prop errors', () => {
+        const wrapper = mountBlock({ email: 'L\'adresse email n\'est pas valide.' })
+        expect(wrapper.find('[data-testid="contact-email"]').attributes('data-error')).toBe('L\'adresse email n\'est pas valide.')
+    })
+
+    it('laisse les champs sans erreur quand errors est absent', () => {
+        const wrapper = mountBlock()
+        expect(wrapper.find('[data-testid="contact-email"]').attributes('data-error')).toBe('')
+    })
+})