refactor(front) : retirer le bloc contact principal des ecrans client

Les 5 champs inline (nom, prenom, telephones, email) sont retires des ecrans creation / consultation / modification du Client. Les coordonnees sont saisies exclusivement dans l'onglet Contacts (ClientContactBlock). Types, mappeurs, validations, payloads et cles i18n form.main.* associes nettoyes ; tests Vitest clientEdit ajustes. Ticket M1 2/3 (front), refonte-contact.
2026-06-03 16:13:36 +02:00
parent 468894cfad
commit 3b2b441e5f
7 changed files with 21 additions and 211 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,30 +37,6 @@
                    :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"
@@ -424,7 +390,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 +585,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,19 +59,6 @@
                    :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
-                />
                <MalioSelect
                    v-if="relation.type"
                    :model-value="relation.type"
@@ -313,11 +290,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 +325,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,26 +31,6 @@
                :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"
@@ -388,11 +358,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 +412,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 +419,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 +426,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 +440,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 +464,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 +475,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 +589,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 +874,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 {