M1 · 2/3 (Front) — Retirer le bloc contact principal des ecrans Client (#57)

## Objectif Retirer le bloc « contact principal » (Nom, Prénom, Téléphone, Téléphone 2, Email) des trois écrans Client — **création**, **consultation**, **modification** — ainsi que des types, mappeurs, validations et clés i18n associés. La saisie des contacts passe désormais exclusivement par l'onglet **Contacts** (`ClientContactBlock`, inchangé). Dépend du ticket **1/3 (back)** : l'API ne renvoie/n'accepte plus ces 5 champs sur `client`. Contexte : `docs/specs/M1-clients/refonte-contact/README.md`. ## Changements - **`pages/clients/new.vue`** : bloc principal réduit à Nom entreprise / Catégories / Relation / Triage. Suppression de `main.firstName/lastName/email`, `mainPhones`, `addMainPhone()`, `prefillFirstContact()`. `isMainValid` ne dépend plus que de `companyName` + ≥ 1 catégorie + relation valide. Payload POST et `ClientResponse` nettoyés. - **`pages/clients/[id]/edit.vue`** : mêmes champs retirés, `isMainValid` simplifié. - **`pages/clients/[id]/index.vue`** : affichage lecture seule des 5 champs retiré. - **`utils/clientEdit.ts`** : `MainFormDraft`, `mapMainDraft()`, `buildMainPayload()` débarrassés des 5 champs + `hasSecondaryPhone`. - **`utils/clientConsultation.ts`** : `ClientDetail` débarrassé des champs inline (`ContactRead` conservé). - **`i18n/locales/fr.json`** : clés `form.main.firstName/lastName/email/phonePrimary/phoneSecondary/addPhone` supprimées. `form.contact.*` conservé. - **Tests** : `clientEdit.spec.ts` ajusté (factory, `MAIN_KEYS`, assertions `mapMainDraft`, test téléphone secondaire obsolète retiré). ## Vérifications - `make nuxt-test` : suites `clientEdit` / `clientConsultation` / `clientFormRules` vertes. Les 2 échecs restants (`useClientReferentials.spec.ts`, libellé de site) sont **pré-existants** sur `develop` (confirmé par `git stash`), sans rapport avec ce ticket. - `eslint` sur les fichiers touchés : OK, aucun import/variable mort. - Zéro référence orpheline aux clés `form.main.*` supprimées ; JSON i18n valide. ## Reste à faire - Golden path navigateur (création → consultation → modification sans bloc inline) à valider manuellement. Reviewed-on: #57 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-06-03 14:48:55 +00:00
parent 468894cfad
commit ec952896ba
8 changed files with 34 additions and 216 deletions
@@ -29,16 +29,6 @@
                    :required="true"
                    :readonly="businessReadonly"
                />
-                <MalioInputText
-                    v-model="main.lastName"
-                    :label="t('commercial.clients.form.main.lastName')"
-                    :readonly="businessReadonly"
-                />
-                <MalioInputText
-                    v-model="main.firstName"
-                    :label="t('commercial.clients.form.main.firstName')"
-                    :readonly="businessReadonly"
-                />
                <MalioSelectCheckbox
                    :model-value="main.categoryIris"
                    :options="mainCategoryOptions"
@@ -47,34 +37,11 @@
                    :disabled="businessReadonly"
                    @update:model-value="(v: (string | number)[]) => main.categoryIris = v.map(String)"
                />
-                <MalioInputPhone
-                    v-model="main.phonePrimary"
-                    :label="t('commercial.clients.form.main.phonePrimary')"
-                    :mask="PHONE_MASK"
-                    :required="true"
-                    :readonly="businessReadonly"
-                    add-icon-name="mdi:plus"
-                    :addable="!main.hasSecondaryPhone && !businessReadonly"
-                    :add-button-label="t('commercial.clients.form.main.addPhone')"
-                    @add="main.hasSecondaryPhone = true"
-                />
-                <MalioInputPhone
-                    v-if="main.hasSecondaryPhone"
-                    v-model="main.phoneSecondary"
-                    :label="t('commercial.clients.form.main.phoneSecondary')"
-                    :mask="PHONE_MASK"
-                    :readonly="businessReadonly"
-                />
-                <MalioInputEmail
-                    v-model="main.email"
-                    :label="t('commercial.clients.form.main.email')"
-                    :required="true"
-                    :readonly="businessReadonly"
-                />
                <MalioSelect
                    :model-value="main.relationType"
                    :options="relationOptions"
                    :label="t('commercial.clients.form.main.relation')"
+                    :empty-option-label="t('commercial.clients.form.main.relationNone')"
                    :disabled="businessReadonly"
                    @update:model-value="onRelationChange"
                />
@@ -424,7 +391,6 @@ import {
 import { extractApiErrorMessage } from '~/shared/utils/api'

 // Masques de saisie (la normalisation finale reste serveur).
-const PHONE_MASK = '## ## ## ## ##'
 const SIREN_MASK = '#########'
 const EMPLOYEES_MASK = '#######'

@@ -620,9 +586,6 @@ const isMainValid = computed(() => {
        || (main.relationType === 'distributeur' && filled(main.distributorIri))
        || (main.relationType === 'courtier' && filled(main.brokerIri))
    return filled(main.companyName)
-        && filled(main.email)
-        && filled(main.phonePrimary)
-        && (filled(main.firstName) || filled(main.lastName))
        && main.categoryIris.length >= 1
        && relationValid
 })
@@ -52,16 +52,6 @@
                    :label="t('commercial.clients.form.main.companyName')"
                    readonly
                />
-                <MalioInputText
-                    :model-value="client.lastName"
-                    :label="t('commercial.clients.form.main.lastName')"
-                    readonly
-                />
-                <MalioInputText
-                    :model-value="client.firstName"
-                    :label="t('commercial.clients.form.main.firstName')"
-                    readonly
-                />
                <MalioSelectCheckbox
                    :model-value="categoryIris"
                    :options="mainCategoryOptions"
@@ -69,26 +59,16 @@
                    :display-tag="true"
                    disabled
                />
-                <MalioInputPhone
-                    v-for="(phone, index) in mainPhones"
-                    :key="index"
-                    :model-value="phone"
-                    :label="index === 0 ? t('commercial.clients.form.main.phonePrimary') : t('commercial.clients.form.main.phoneSecondary')"
-                    :mask="PHONE_MASK"
-                    readonly
-                />
-                <MalioInputEmail
-                    :model-value="client.email"
-                    :label="t('commercial.clients.form.main.email')"
-                    readonly
-                />
+                <!-- Relation toujours affichee (vide = « Aucun »), comme en edition. -->
                <MalioSelect
-                    v-if="relation.type"
                    :model-value="relation.type"
                    :options="relationOptions"
                    :label="t('commercial.clients.form.main.relation')"
+                    :empty-option-label="t('commercial.clients.form.main.relationNone')"
                    disabled
                />
+                <!-- Nom du distributeur/courtier : conditionnel (libelle type-dependant,
+                     aucune valeur sans relation — meme comportement qu'en edition). -->
                <MalioInputText
                    v-if="relation.type"
                    :model-value="relation.name"
@@ -313,11 +293,9 @@ import {
    type ClientDetail,
    type SelectOption,
 } from '~/modules/commercial/utils/clientConsultation'
-import { formatPhoneFR } from '~/shared/utils/phone'
 import { emptyAddress, emptyContact, emptyRib } from '~/modules/commercial/types/clientForm'

-// Masques d'affichage (purement visuels, la donnee reste celle du serveur).
-const PHONE_MASK = '## ## ## ## ##'
+// Masque d'affichage (purement visuel, la donnee reste celle du serveur).
 const SIREN_MASK = '#########'

 const { t } = useI18n()
@@ -350,13 +328,6 @@ const headerTitle = computed(() => client.value?.companyName ?? t('commercial.cl
 const relation = computed(() => (client.value ? relationOf(client.value) : { type: null, name: null }))
 const categoryIris = computed(() => (client.value?.categories ?? []).map(c => c['@id']))

-// Telephones du formulaire principal, formates XX XX XX XX XX (RG d'affichage).
-const mainPhones = computed(() =>
-    [client.value?.phonePrimary, client.value?.phoneSecondary]
-        .filter((p): p is string => Boolean(p))
-        .map(formatPhoneFR),
-)
-
 const information = computed(() => ({
    description: client.value?.description ?? null,
    competitors: client.value?.competitors ?? null,
@@ -23,16 +23,6 @@
                :required="true"
                :readonly="mainLocked"
            />
-            <MalioInputText
-                v-model="main.lastName"
-                :label="t('commercial.clients.form.main.lastName')"
-                :readonly="mainLocked"
-            />
-            <MalioInputText
-                v-model="main.firstName"
-                :label="t('commercial.clients.form.main.firstName')"
-                :readonly="mainLocked"
-            />
            <MalioSelectCheckbox
                :model-value="main.categoryIris"
                :options="referentials.categories.value"
@@ -41,30 +31,11 @@
                :disabled="mainLocked"
                @update:model-value="(v: (string | number)[]) => main.categoryIris = v.map(String)"
            />
-            <!-- Telephones : 1 par defaut, le bouton « + » revele le 2e (max 2, RG-1.02). -->
-            <MalioInputPhone
-                v-for="(_, index) in mainPhones"
-                :key="index"
-                v-model="mainPhones[index]"
-                :label="t('commercial.clients.form.main.phonePrimary')"
-                :mask="PHONE_MASK"
-                :required="index === 0"
-                :readonly="mainLocked"
-                add-icon-name="mdi:plus"
-                :addable="mainPhones.length === 1 && !mainLocked"
-                :add-button-label="t('commercial.clients.form.main.addPhone')"
-                @add="addMainPhone"
-            />
-            <MalioInputEmail
-                v-model="main.email"
-                :label="t('commercial.clients.form.main.email')"
-                :required="true"
-                :readonly="mainLocked"
-            />
            <MalioSelect
                :model-value="main.relationType"
                :options="relationOptions"
                :label="t('commercial.clients.form.main.relation')"
+                :empty-option-label="t('commercial.clients.form.main.relationNone')"
                :disabled="mainLocked"
                @update:model-value="onRelationChange"
            />
@@ -388,11 +359,9 @@ import {
    type ContactFormDraft,
    type RibFormDraft,
 } from '~/modules/commercial/types/clientForm'
-import { formatPhoneFR } from '~/shared/utils/phone'
 import { extractApiErrorMessage } from '~/shared/utils/api'

 // Masques de saisie (la normalisation finale reste serveur).
-const PHONE_MASK = '## ## ## ## ##'
 const SIREN_MASK = '#########'
 // Masque « nombre » du champ Nombre de salaries : chiffres uniquement (max 7).
 const EMPLOYEES_MASK = '#######'
@@ -444,9 +413,6 @@ const tabSubmitting = ref(false)
 // ── Formulaire principal ────────────────────────────────────────────────────
 const main = reactive({
    companyName: null as string | null,
-    firstName: null as string | null,
-    lastName: null as string | null,
-    email: null as string | null,
    categoryIris: [] as string[],
    relationType: null as 'distributeur' | 'courtier' | null,
    distributorIri: null as string | null,
@@ -454,17 +420,6 @@ const main = reactive({
    triageService: false,
 })

-// Telephones du formulaire principal : 1 par defaut, 2 au maximum (RG-1.02).
-// L'index 0 alimente phonePrimary, l'index 1 phoneSecondary au POST.
-const mainPhones = ref<string[]>([''])
-
-/** Revele le 2e numero (le bouton « + » disparait une fois a 2, RG-1.02). */
-function addMainPhone(): void {
-    if (mainPhones.value.length === 1) {
-        mainPhones.value.push('')
-    }
-}
-
 // Pas d'option « Aucun » : le select est vide par defaut (relationType = null).
 const relationOptions = computed<RefOption[]>(() => [
    { value: 'distributeur', label: t('commercial.clients.form.main.relationDistributor') },
@@ -472,10 +427,11 @@ const relationOptions = computed<RefOption[]>(() => [
 ])

 // Validation du formulaire principal (gate le bouton « Valider ») :
-//  - companyName / email / telephone principal / >= 1 categorie obligatoires ;
-//  - RG-1.01 : nom OU prenom du contact principal ;
-//  - relation Distributeur/Courtier obligatoire (un des deux), ET le nom
-//    correspondant obligatoire selon le choix (spec fonctionnelle).
+//  - companyName / >= 1 categorie obligatoires ;
+//  - relation Distributeur/Courtier optionnelle, mais le nom correspondant
+//    devient requis si l'un des deux est choisi (spec fonctionnelle).
+// Les coordonnees de contact ne sont plus saisies ici : elles vivent dans
+// l'onglet Contacts (RG-1.05/1.14 garantissent >= 1 contact valide).
 const isMainValid = computed(() => {
    const filled = (v: string | null | undefined) => v !== null && v !== undefined && v.trim() !== ''
    // Relation Distributeur/Courtier OPTIONNELLE ; mais si « Depend du
@@ -485,9 +441,6 @@ const isMainValid = computed(() => {
        || (main.relationType === 'distributeur' && filled(main.distributorIri))
        || (main.relationType === 'courtier' && filled(main.brokerIri))
    return filled(main.companyName)
-        && filled(main.email)
-        && filled(mainPhones.value[0])
-        && (filled(main.firstName) || filled(main.lastName))
        && main.categoryIris.length >= 1
        && relationValid
 })
@@ -512,11 +465,6 @@ async function submitMain(): Promise<void> {
    try {
        const payload: Record<string, unknown> = {
            companyName: main.companyName,
-            firstName: main.firstName || null,
-            lastName: main.lastName || null,
-            email: main.email,
-            phonePrimary: mainPhones.value[0] || null,
-            phoneSecondary: mainPhones.value[1] || null,
            categories: main.categoryIris,
            distributor: main.relationType === 'distributeur' ? main.distributorIri : null,
            broker: main.relationType === 'courtier' ? main.brokerIri : null,
@@ -528,18 +476,8 @@ async function submitMain(): Promise<void> {
        })

        clientId.value = created.id
-        // Reaffiche les valeurs normalisees renvoyees par le serveur.
+        // Reaffiche la valeur normalisee renvoyee par le serveur.
        main.companyName = created.companyName ?? main.companyName
-        main.firstName = created.firstName ?? null
-        main.lastName = created.lastName ?? null
-        main.email = created.email ?? main.email
-        // Reaffiche les telephones normalises (reformates via formatPhoneFR).
-        const normalizedPhones = [formatPhoneFR(created.phonePrimary), formatPhoneFR(created.phoneSecondary)]
-            .filter(p => p !== '')
-        mainPhones.value = normalizedPhones.length > 0 ? normalizedPhones : ['']
-
-        // Pre-remplit le 1er contact a partir du formulaire principal (editable).
-        prefillFirstContact()

        mainLocked.value = true
        unlockedIndex.value = 0
@@ -652,18 +590,10 @@ async function submitInformation(): Promise<void> {
 }

 // ── Onglet Contact ──────────────────────────────────────────────────────────
+// Au moins un bloc Contact vide au depart : c'est desormais le seul point de
+// saisie des coordonnees (le bloc principal ne porte plus de contact inline).
 const contacts = ref<ContactFormDraft[]>([emptyContact()])

-/** Pre-remplit le 1er contact depuis le formulaire principal (apres creation). */
-function prefillFirstContact(): void {
-    const first = contacts.value[0]
-    if (!first) return
-    first.lastName = main.lastName
-    first.firstName = main.firstName
-    first.email = main.email
-    first.phonePrimary = mainPhones.value[0] ?? null
-}
-
 // « + Nouveau contact » desactive tant que le dernier bloc n'a ni nom ni prenom.
 const canAddContact = computed(() => {
    const last = contacts.value[contacts.value.length - 1]
@@ -945,11 +875,6 @@ function runConfirm(): void {
 interface ClientResponse {
    id: number
    companyName: string | null
-    firstName: string | null
-    lastName: string | null
-    email: string | null
-    phonePrimary: string | null
-    phoneSecondary: string | null
 }

 interface ContactResponse {