feat(front) : onglet contact prestataire

frontend/modules/technique/pages/providers/new.vue

@@ -57,23 +57,77 @@
         </div>
 
         <!-- ── Onglets a validation incrementale ─────────────────────────────
-             Le contenu des onglets (Contact / Adresse / Comptabilite) arrive aux
-             tickets ERP-142 → 144 : placeholders « A venir » pour l'instant. -->
+             Onglet Contact actif (ERP-142) ; Adresse / Comptabilite arrivent aux
+             tickets ERP-143 / 144 : placeholders « A venir » pour l'instant. -->
         <MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
-            <template #contact><ComingSoonPlaceholder /></template>
+            <!-- Onglet Contact : saisie multi-contacts (blocs ajoutables). -->
+            <template #contact>
+                <div class="mt-12 flex flex-col gap-6">
+                    <ProviderContactBlock
+                        v-for="(contact, index) in contacts"
+                        :key="index"
+                        :model-value="contact"
+                        :removable="index > 0"
+                        :readonly="isValidated('contact')"
+                        :errors="contactErrors[index]"
+                        @update:model-value="(v) => contacts[index] = v"
+                        @remove="askRemoveContact(index)"
+                    />
+                    <div v-if="!isValidated('contact')" class="flex justify-center gap-6">
+                        <MalioButton
+                            variant="secondary"
+                            icon-name="mdi:add-bold"
+                            icon-position="left"
+                            :label="t('technique.providers.form.contact.add')"
+                            :disabled="!canAddContact"
+                            @click="addContact"
+                        />
+                        <MalioButton
+                            variant="primary"
+                            :label="t('technique.providers.form.submit')"
+                            :disabled="tabSubmitting"
+                            @click="onSubmitContacts"
+                        />
+                    </div>
+                </div>
+            </template>
             <template #address><ComingSoonPlaceholder /></template>
             <template v-if="canAccountingView" #accounting><ComingSoonPlaceholder /></template>
         </MalioTabList>
+
+        <!-- Modal de confirmation generique (suppression d'un bloc contact). -->
+        <MalioModal v-model="confirmModal.open" modal-class="max-w-md">
+            <template #header>
+                <h2 class="text-[24px] font-bold">{{ t('technique.providers.form.confirmDelete.title') }}</h2>
+            </template>
+            <p>{{ confirmModal.message }}</p>
+            <template #footer>
+                <MalioButton
+                    variant="secondary"
+                    button-class="flex-1"
+                    :label="t('technique.providers.form.confirmDelete.cancel')"
+                    @click="confirmModal.open = false"
+                />
+                <MalioButton
+                    variant="danger"
+                    button-class="flex-1"
+                    :label="t('technique.providers.form.confirmDelete.confirm')"
+                    @click="runConfirm"
+                />
+            </template>
+        </MalioModal>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, reactive } from 'vue'
 import { useProviderReferentials } from '~/modules/technique/composables/useProviderReferentials'
 import { useProviderForm } from '~/modules/technique/composables/useProviderForm'
+import { extractApiErrorMessage } from '~/shared/utils/api'
 
 const { t } = useI18n()
 const router = useRouter()
+const toast = useToast()
 const { can } = usePermissions()
 
 useHead({ title: t('technique.providers.form.title') })
@@ -97,6 +151,14 @@ const {
     activeTab,
     unlockedIndex,
     submitMain,
+    tabSubmitting,
+    isValidated,
+    contacts,
+    contactErrors,
+    canAddContact,
+    addContact,
+    removeContact,
+    submitContacts,
 } = useProviderForm()
 
 /** Retour vers le repertoire prestataires (fleche d'en-tete). */
@@ -104,6 +166,50 @@ function goBack(): void {
     router.push('/providers')
 }
 
+/**
+ * Message d'erreur a afficher dans un toast a partir d'une erreur d'API. Retourne
+ * TOUJOURS une chaine (le composant de toast plante sur `undefined`).
+ */
+function apiErrorMessage(error: unknown): string {
+    const data = (error as { response?: { _data?: unknown } })?.response?._data
+    return extractApiErrorMessage(data) || t('technique.providers.toast.error')
+}
+
+// ── Onglet Contact ──────────────────────────────────────────────────────────
+/** Valide l'onglet Contact ; toast de succes si l'onglet a ete finalise. */
+async function onSubmitContacts(): Promise<void> {
+    const ok = await submitContacts(error => toast.error({
+        title: t('technique.providers.toast.error'),
+        message: apiErrorMessage(error),
+    }))
+    if (ok) {
+        toast.success({ title: t('technique.providers.toast.updateSuccess') })
+    }
+}
+
+function askRemoveContact(index: number): void {
+    askConfirm(t('technique.providers.form.confirmDelete.contact'), () => removeContact(index))
+}
+
+// ── Modal de confirmation generique ─────────────────────────────────────────
+const confirmModal = reactive({
+    open: false,
+    message: '',
+    action: null as null | (() => void),
+})
+
+function askConfirm(message: string, action: () => void): void {
+    confirmModal.message = message
+    confirmModal.action = action
+    confirmModal.open = true
+}
+
+function runConfirm(): void {
+    confirmModal.action?.()
+    confirmModal.action = null
+    confirmModal.open = false
+}
+
 // Icone (Iconify) affichee dans l'onglet, par cle.
 const TAB_ICONS: Record<string, string> = {
     contact: 'mdi:account-box-plus-outline',