145 lines
6.4 KiB
Vue
145 lines
6.4 KiB
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) ou en lecture seule. -->
|
|
<MalioButtonIcon
|
|
v-if="removable && !readonly && !disabled"
|
|
icon="mdi:delete-outline"
|
|
variant="ghost"
|
|
button-class="p-0"
|
|
v-bind="{ ariaLabel: t('technique.providers.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('technique.providers.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('technique.providers.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('technique.providers.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('technique.providers.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('technique.providers.form.contact.phonePrimary')"
|
|
:mask="PHONE_MASK"
|
|
:readonly="readonly"
|
|
:disabled="disabled"
|
|
: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 && (!hideEmpty || isFilled(model.phoneSecondary))"
|
|
:model-value="model.phoneSecondary"
|
|
:label="t('technique.providers.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 { ProviderContactFormDraft } from '~/modules/technique/types/providerForm'
|
|
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).
|
|
const PHONE_MASK = '## ## ## ## ##'
|
|
|
|
const props = defineProps<{
|
|
/** Brouillon du contact (v-model). */
|
|
modelValue: ProviderContactFormDraft
|
|
/** Titre du bloc (ex: « Contact 1 »). */
|
|
title: string
|
|
/** Affiche l'icone de suppression (1er bloc non supprimable). */
|
|
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: ProviderContactFormDraft]
|
|
'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 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>
|