Starseed/frontend/modules/commercial/components/ClientContactBlock.vue

<template>
    <!-- Bloc a plat (sans box-shadow) : un filet noir 1px le separe du suivant
         (pas de bordure sous le dernier bloc). -->
    <div class="pb-[20px]" :class="{ 'border-b border-black': !last }">
        <!-- En-tete : titre du bloc (noir) a gauche, poubelle de suppression a droite. -->
        <div class="flex items-center justify-between">
            <h2 class="text-[20px] font-semibold text-black">{{ title }}</h2>
            <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
                 non supprimable (1er bloc obligatoire RG-1.14) ou en lecture seule.
                 ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
            <MalioButtonIcon
                v-if="removable && !readonly && !disabled"
                icon="mdi:delete-outline"
                variant="ghost"
                button-class="p-0"
                v-bind="{ ariaLabel: t('commercial.clients.form.contact.remove') }"
                @click="$emit('remove')"
            />
        </div>

        <!-- Grille 4 colonnes des champs du contact. -->
        <div class="mt-6 grid grid-cols-4 gap-x-[44px] gap-y-4">
            <MalioInputText
                v-if="!hideEmpty || isFilled(model.lastName)"
                :model-value="model.lastName"
                :label="t('commercial.clients.form.contact.lastName')"
                :mask="PERSON_NAME_MASK"
                :readonly="readonly"
                :disabled="disabled"
                :error="errors?.lastName"
                @update:model-value="(v: string) => update('lastName', v)"
            />
            <MalioInputText
                v-if="!hideEmpty || isFilled(model.firstName)"
                :model-value="model.firstName"
                :label="t('commercial.clients.form.contact.firstName')"
                :mask="PERSON_NAME_MASK"
                :readonly="readonly"
                :disabled="disabled"
                :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 v-if="!hideEmpty || isFilled(model.jobTitle)" class="col-span-2">
                <MalioInputText
                    :model-value="model.jobTitle"
                    :label="t('commercial.clients.form.contact.jobTitle')"
                    :mask="FREE_TEXT_MASK"
                    :readonly="readonly"
                    :disabled="disabled"
                    :error="errors?.jobTitle"
                    @update:model-value="(v: string) => update('jobTitle', v)"
                />
            </div>
            <MalioInputEmail
                v-if="!hideEmpty || isFilled(model.email)"
                :model-value="model.email"
                :label="t('commercial.clients.form.contact.email')"
                :readonly="readonly"
                :disabled="disabled"
                :lowercase="true"
                :error="errors?.email"
                @update:model-value="(v: string) => update('email', v)"
            />
            <MalioInputPhone
                v-if="!hideEmpty || isFilled(model.phonePrimary)"
                :model-value="model.phonePrimary"
                :label="t('commercial.clients.form.contact.phonePrimary')"
                :mask="PHONE_MASK"
                :readonly="readonly"
                :disabled="disabled"
                :error="errors?.phonePrimary"
                :addable="!model.hasSecondaryPhone && !readonly"
                :add-button-label="t('commercial.clients.form.contact.addPhone')"
                @update:model-value="(v: string) => update('phonePrimary', v)"
                @add="revealSecondaryPhone"
            />
            <MalioInputPhone
                v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
                :model-value="model.phoneSecondary"
                :label="t('commercial.clients.form.contact.phoneSecondary')"
                :mask="PHONE_MASK"
                :readonly="readonly"
                :disabled="disabled"
                :error="errors?.phoneSecondary"
                @update:model-value="(v: string) => update('phoneSecondary', v)"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import type { ContactFormDraft } from '~/modules/commercial/types/clientForm'
import { FREE_TEXT_MASK, PERSON_NAME_MASK } from '~/shared/utils/textSanitize'
import { isFilled } from '~/shared/utils/consultationDisplay'

// Masque telephone FR : 5 groupes de 2 chiffres (la normalisation finale reste
// serveur, cf. formatPhoneFR re-applique a la valeur renvoyee).
const PHONE_MASK = '## ## ## ## ##'

const props = defineProps<{
    /** Brouillon du contact (v-model). */
    modelValue: ContactFormDraft
    /** Titre du bloc (ex: « Contact 1 »). */
    title: string
    /** Affiche l'icone de suppression (1er bloc non supprimable, RG-1.14). */
    removable?: boolean
    /** Dernier bloc de la liste : supprime le filet de separation bas. */
    last?: boolean
    /** Bloc en lecture seule (onglet valide). */
    readonly?: boolean
    /** Bloc desactive (champs grises, consultation — distinct de readonly). */
    disabled?: boolean
    /** Consultation : masque les champs non remplis (ERP-193). */
    hideEmpty?: boolean
    /** Erreurs serveur 422 de cette ligne, indexees par champ (ERP-101). */
    errors?: Record<string, string>
}>()

const emit = defineEmits<{
    'update:modelValue': [value: ContactFormDraft]
    'remove': []
}>()

const { t } = useI18n()

// Alias local pour la lisibilite du template.
const model = computed(() => props.modelValue)

// Filtrage des caracteres parasites : porte par les masks maska sur les champs
// (PERSON_NAME_MASK / FREE_TEXT_MASK), filtrage natif au focus/curseur. L'email n'a
// pas de mask (ERP-101 : validation de format via Assert\Email + erreur inline).

/** Emet un nouveau brouillon avec le champ modifie (immutabilite). */
function update<K extends keyof ContactFormDraft>(field: K, value: ContactFormDraft[K]): void {
    emit('update:modelValue', { ...props.modelValue, [field]: value })
}

/** Revele le 2e numero (RG-1.02/1.20 : max 1 secondaire, le « + » disparait). */
function revealSecondaryPhone(): void {
    emit('update:modelValue', { ...props.modelValue, hasSecondaryPhone: true })
}
</script>