feat(front) : referentiels + blocs reutilisables contact/adresse/placeholder (ERP-63)

- useClientReferentials : chargement des selects (categories, sites, modes TVA, delais/types de reglement, banques) en ?pagination=false + listes distributeurs/courtiers via ?categoryCode=DISTRIBUTEUR|COURTIER. - ClientContactBlock / ClientAddressBlock : blocs reutilises par 1.11/1.12. L'adresse gere la saisie assistee BAN (via le stub) avec bascule en mode degrade (ville/adresse en saisie libre). - TabPlaceholderBlank : frame vide des onglets non implementes.
2026-06-02 17:25:09 +02:00
parent 1193832505
commit 1bc432e8fa
4 changed files with 537 additions and 0 deletions
@@ -0,0 +1,102 @@
+<template>
+    <div class="rounded-md border border-neutral-200 bg-white p-6">
+        <div class="mb-4 flex items-center justify-between">
+            <h3 class="text-lg font-bold">{{ title }}</h3>
+            <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee
+                 si non supprimable (1er bloc obligatoire RG-1.14) ou en lecture seule. -->
+            <!-- ariaLabel passe via v-bind objet : la prop du composant est
+                 camelCase (aria-* serait traite en attribut HTML, jamais en prop). -->
+            <MalioButtonIcon
+                v-if="removable && !readonly"
+                icon="mdi:trash-can-outline"
+                variant="ghost"
+                v-bind="{ ariaLabel: t('commercial.clients.form.contact.remove') }"
+                @click="$emit('remove')"
+            />
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <MalioInputText
+                :model-value="model.lastName"
+                :label="t('commercial.clients.form.contact.lastName')"
+                :readonly="readonly"
+                @update:model-value="(v: string) => update('lastName', v)"
+            />
+            <MalioInputText
+                :model-value="model.firstName"
+                :label="t('commercial.clients.form.contact.firstName')"
+                :readonly="readonly"
+                @update:model-value="(v: string) => update('firstName', v)"
+            />
+            <MalioInputText
+                :model-value="model.jobTitle"
+                :label="t('commercial.clients.form.contact.jobTitle')"
+                :readonly="readonly"
+                @update:model-value="(v: string) => update('jobTitle', v)"
+            />
+            <MalioInputEmail
+                :model-value="model.email"
+                :label="t('commercial.clients.form.contact.email')"
+                :readonly="readonly"
+                @update:model-value="(v: string) => update('email', v)"
+            />
+            <MalioInputPhone
+                :model-value="model.phonePrimary"
+                :label="t('commercial.clients.form.contact.phonePrimary')"
+                :mask="PHONE_MASK"
+                :readonly="readonly"
+                :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"
+                :model-value="model.phoneSecondary"
+                :label="t('commercial.clients.form.contact.phoneSecondary')"
+                :mask="PHONE_MASK"
+                :readonly="readonly"
+                @update:model-value="(v: string) => update('phoneSecondary', v)"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ContactFormDraft } from '~/modules/commercial/types/clientForm'
+
+// 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
+    /** Bloc en lecture seule (onglet valide). */
+    readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: ContactFormDraft]
+    '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 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>