Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 04c794addb | |||
| c1e45cd582 |
+1
-1
@@ -1,2 +1,2 @@
|
|||||||
parameters:
|
parameters:
|
||||||
app.version: '0.1.116'
|
app.version: '0.1.117'
|
||||||
|
|||||||
@@ -406,12 +406,30 @@
|
|||||||
"errors": {
|
"errors": {
|
||||||
"siteRequired": "Sélectionnez au moins un site.",
|
"siteRequired": "Sélectionnez au moins un site.",
|
||||||
"categoryRequired": "Sélectionnez au moins une catégorie."
|
"categoryRequired": "Sélectionnez au moins une catégorie."
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"lastName": "Nom",
|
||||||
|
"firstName": "Prénom",
|
||||||
|
"jobTitle": "Fonction",
|
||||||
|
"email": "Email",
|
||||||
|
"phonePrimary": "Téléphone",
|
||||||
|
"phoneSecondary": "Téléphone (2)",
|
||||||
|
"addPhone": "Ajouter un numéro",
|
||||||
|
"remove": "Supprimer le contact",
|
||||||
|
"add": "Nouveau contact"
|
||||||
|
},
|
||||||
|
"confirmDelete": {
|
||||||
|
"title": "Confirmer la suppression",
|
||||||
|
"cancel": "Annuler",
|
||||||
|
"confirm": "Supprimer",
|
||||||
|
"contact": "Supprimer ce contact ?"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"toast": {
|
"toast": {
|
||||||
"error": "Une erreur est survenue. Réessayez.",
|
"error": "Une erreur est survenue. Réessayez.",
|
||||||
"exportError": "L'export du répertoire prestataires a échoué. Réessayez.",
|
"exportError": "L'export du répertoire prestataires a échoué. Réessayez.",
|
||||||
"createSuccess": "Prestataire créé avec succès"
|
"createSuccess": "Prestataire créé avec succès",
|
||||||
|
"updateSuccess": "Prestataire mis à jour avec succès"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -0,0 +1,108 @@
|
|||||||
|
<template>
|
||||||
|
<div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
|
||||||
|
<!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
|
||||||
|
non supprimable (1er bloc) ou en lecture seule. -->
|
||||||
|
<MalioButtonIcon
|
||||||
|
v-if="removable && !readonly"
|
||||||
|
icon="mdi:delete-outline"
|
||||||
|
variant="ghost"
|
||||||
|
button-class="absolute top-3 right-3"
|
||||||
|
v-bind="{ ariaLabel: t('technique.providers.form.contact.remove') }"
|
||||||
|
@click="$emit('remove')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<MalioInputText
|
||||||
|
:model-value="model.lastName"
|
||||||
|
:label="t('technique.providers.form.contact.lastName')"
|
||||||
|
:readonly="readonly"
|
||||||
|
:error="errors?.lastName"
|
||||||
|
@update:model-value="(v: string) => update('lastName', v)"
|
||||||
|
/>
|
||||||
|
<MalioInputText
|
||||||
|
:model-value="model.firstName"
|
||||||
|
:label="t('technique.providers.form.contact.firstName')"
|
||||||
|
:readonly="readonly"
|
||||||
|
: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 class="col-span-2">
|
||||||
|
<MalioInputText
|
||||||
|
:model-value="model.jobTitle"
|
||||||
|
:label="t('technique.providers.form.contact.jobTitle')"
|
||||||
|
:readonly="readonly"
|
||||||
|
:error="errors?.jobTitle"
|
||||||
|
@update:model-value="(v: string) => update('jobTitle', v)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<MalioInputEmail
|
||||||
|
:model-value="model.email"
|
||||||
|
:label="t('technique.providers.form.contact.email')"
|
||||||
|
:readonly="readonly"
|
||||||
|
:lowercase="true"
|
||||||
|
:error="errors?.email"
|
||||||
|
@update:model-value="(v: string) => update('email', v)"
|
||||||
|
/>
|
||||||
|
<MalioInputPhone
|
||||||
|
:model-value="model.phonePrimary"
|
||||||
|
:label="t('technique.providers.form.contact.phonePrimary')"
|
||||||
|
:mask="PHONE_MASK"
|
||||||
|
:readonly="readonly"
|
||||||
|
: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"
|
||||||
|
:model-value="model.phoneSecondary"
|
||||||
|
:label="t('technique.providers.form.contact.phoneSecondary')"
|
||||||
|
:mask="PHONE_MASK"
|
||||||
|
:readonly="readonly"
|
||||||
|
:error="errors?.phoneSecondary"
|
||||||
|
@update:model-value="(v: string) => update('phoneSecondary', v)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { ProviderContactFormDraft } from '~/modules/technique/types/providerForm'
|
||||||
|
|
||||||
|
// 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
|
||||||
|
/** Affiche l'icone de suppression (1er bloc non supprimable). */
|
||||||
|
removable?: boolean
|
||||||
|
/** Bloc en lecture seule (onglet valide). */
|
||||||
|
readonly?: 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)
|
||||||
|
|
||||||
|
/** 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>
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { describe, it, expect, vi } from 'vitest'
|
||||||
|
import { mount } from '@vue/test-utils'
|
||||||
|
import { defineComponent, h, ref, computed } from 'vue'
|
||||||
|
import { emptyProviderContact } from '~/modules/technique/types/providerForm'
|
||||||
|
import ProviderContactBlock from '../ProviderContactBlock.vue'
|
||||||
|
|
||||||
|
// Auto-imports Nuxt/Vue utilises sans import explicite par le composant.
|
||||||
|
vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
|
||||||
|
vi.stubGlobal('ref', ref)
|
||||||
|
vi.stubGlobal('computed', computed)
|
||||||
|
|
||||||
|
/** Stub d'un champ Malio qui re-expose la prop `error` recue dans un data-* attribut. */
|
||||||
|
function errorProbe(testid: string) {
|
||||||
|
return defineComponent({
|
||||||
|
name: `Probe-${testid}`,
|
||||||
|
props: {
|
||||||
|
modelValue: { type: [String, Number, null], default: undefined },
|
||||||
|
error: { type: String, default: '' },
|
||||||
|
label: { type: String, default: '' },
|
||||||
|
readonly: { type: Boolean, default: false },
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
return () => h('div', { 'data-testid': testid, 'data-error': props.error })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function mountBlock(errors?: Record<string, string>) {
|
||||||
|
return mount(ProviderContactBlock, {
|
||||||
|
props: {
|
||||||
|
modelValue: emptyProviderContact(),
|
||||||
|
...(errors ? { errors } : {}),
|
||||||
|
},
|
||||||
|
global: {
|
||||||
|
stubs: {
|
||||||
|
MalioButtonIcon: true,
|
||||||
|
MalioInputPhone: true,
|
||||||
|
MalioInputText: errorProbe('contact-text'),
|
||||||
|
MalioInputEmail: errorProbe('contact-email'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('ProviderContactBlock — mapping erreur par champ (ERP-101)', () => {
|
||||||
|
it('affiche l\'erreur serveur sur le champ email via la prop errors', () => {
|
||||||
|
const wrapper = mountBlock({ email: 'L\'adresse email n\'est pas valide.' })
|
||||||
|
expect(wrapper.find('[data-testid="contact-email"]').attributes('data-error')).toBe('L\'adresse email n\'est pas valide.')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('laisse les champs sans erreur quand errors est absent', () => {
|
||||||
|
const wrapper = mountBlock()
|
||||||
|
expect(wrapper.find('[data-testid="contact-email"]').attributes('data-error')).toBe('')
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -41,10 +41,17 @@ vi.stubGlobal('usePermissions', () => ({
|
|||||||
}))
|
}))
|
||||||
|
|
||||||
const { useProviderForm, buildProviderCreateTabKeys } = await import('../useProviderForm')
|
const { useProviderForm, buildProviderCreateTabKeys } = await import('../useProviderForm')
|
||||||
|
const { emptyProviderContact } = await import('~/modules/technique/types/providerForm')
|
||||||
|
type ProviderForm = ReturnType<typeof useProviderForm>
|
||||||
|
|
||||||
const SITE_86 = '/api/sites/1'
|
const SITE_86 = '/api/sites/1'
|
||||||
const CAT_MAINT = '/api/categories/7'
|
const CAT_MAINT = '/api/categories/7'
|
||||||
|
|
||||||
|
/** Accede a un bloc contact (cast : sous noUncheckedIndexedAccess l'index est optionnel). */
|
||||||
|
function contactAt(form: ProviderForm, index = 0) {
|
||||||
|
return form.contacts.value[index] ?? emptyProviderContact()
|
||||||
|
}
|
||||||
|
|
||||||
describe('useProviderForm', () => {
|
describe('useProviderForm', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
mockPost.mockReset()
|
mockPost.mockReset()
|
||||||
@@ -190,3 +197,110 @@ describe('useProviderForm', () => {
|
|||||||
expect(mockPatch).toHaveBeenCalledWith('/providers/9', { siren: '123456789' }, { toast: false })
|
expect(mockPatch).toHaveBeenCalledWith('/providers/9', { siren: '123456789' }, { toast: false })
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
describe('useProviderForm — onglet Contact (ERP-142)', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
mockPost.mockReset()
|
||||||
|
mockPatch.mockReset()
|
||||||
|
permState.accountingView = false
|
||||||
|
})
|
||||||
|
|
||||||
|
/** Place le formulaire en etat « prestataire cree » (onglet Contact accessible). */
|
||||||
|
function createdForm() {
|
||||||
|
const form = useProviderForm()
|
||||||
|
form.providerId.value = 7
|
||||||
|
return form
|
||||||
|
}
|
||||||
|
|
||||||
|
it('RG-3.04 : « + Nouveau contact » desactive tant que le dernier bloc est vide', () => {
|
||||||
|
const form = createdForm()
|
||||||
|
expect(form.canAddContact.value).toBe(false)
|
||||||
|
|
||||||
|
// addContact est un no-op tant que le bloc est vide.
|
||||||
|
form.addContact()
|
||||||
|
expect(form.contacts.value).toHaveLength(1)
|
||||||
|
|
||||||
|
contactAt(form).lastName = 'Doe'
|
||||||
|
expect(form.canAddContact.value).toBe(true)
|
||||||
|
form.addContact()
|
||||||
|
expect(form.contacts.value).toHaveLength(2)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('removeContact retire le bloc et son erreur de ligne', () => {
|
||||||
|
const form = createdForm()
|
||||||
|
contactAt(form).lastName = 'Doe'
|
||||||
|
form.addContact()
|
||||||
|
form.contactErrors.value = [{}, { lastName: 'x' }]
|
||||||
|
|
||||||
|
form.removeContact(1)
|
||||||
|
expect(form.contacts.value).toHaveLength(1)
|
||||||
|
expect(form.contactErrors.value).toHaveLength(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('submitContacts : POST des nouveaux, capture id + IRI, finalise l\'onglet', async () => {
|
||||||
|
mockPost.mockResolvedValueOnce({ '@id': '/api/provider_contacts/55', id: 55 })
|
||||||
|
const form = createdForm()
|
||||||
|
contactAt(form).lastName = 'Doe'
|
||||||
|
|
||||||
|
const ok = await form.submitContacts(vi.fn())
|
||||||
|
|
||||||
|
expect(ok).toBe(true)
|
||||||
|
const [url, body, opts] = mockPost.mock.calls[0] ?? []
|
||||||
|
expect(url).toBe('/providers/7/contacts')
|
||||||
|
expect(body).toMatchObject({ lastName: 'Doe' })
|
||||||
|
expect(opts).toMatchObject({ toast: false, headers: { Accept: 'application/ld+json' } })
|
||||||
|
expect(contactAt(form).id).toBe(55)
|
||||||
|
expect(contactAt(form).iri).toBe('/api/provider_contacts/55')
|
||||||
|
expect(form.isValidated('contact')).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('submitContacts : PATCH des contacts existants sur /provider_contacts/{id}', async () => {
|
||||||
|
mockPatch.mockResolvedValueOnce({})
|
||||||
|
const form = createdForm()
|
||||||
|
contactAt(form).id = 55
|
||||||
|
contactAt(form).lastName = 'Doe'
|
||||||
|
|
||||||
|
await form.submitContacts(vi.fn())
|
||||||
|
|
||||||
|
expect(mockPost).not.toHaveBeenCalled()
|
||||||
|
expect(mockPatch).toHaveBeenCalledWith('/provider_contacts/55', expect.objectContaining({ lastName: 'Doe' }), { toast: false })
|
||||||
|
})
|
||||||
|
|
||||||
|
it('RG-3.12 : onglet vide -> soumet l\'amorce pour declencher la 422 firstName inline', async () => {
|
||||||
|
mockPost.mockRejectedValueOnce({
|
||||||
|
response: {
|
||||||
|
status: 422,
|
||||||
|
_data: { violations: [{ propertyPath: 'firstName', message: 'Au moins un champ du contact est obligatoire.' }] },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const form = createdForm()
|
||||||
|
|
||||||
|
const ok = await form.submitContacts(vi.fn())
|
||||||
|
|
||||||
|
expect(ok).toBe(false)
|
||||||
|
expect(mockPost).toHaveBeenCalledTimes(1)
|
||||||
|
expect(form.contactErrors.value[0]?.firstName).toBe('Au moins un champ du contact est obligatoire.')
|
||||||
|
expect(form.isValidated('contact')).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('mappe les erreurs 422 PAR LIGNE (le bloc 2 echoue, le bloc 1 passe)', async () => {
|
||||||
|
mockPost
|
||||||
|
.mockResolvedValueOnce({ '@id': '/api/provider_contacts/1', id: 1 })
|
||||||
|
.mockRejectedValueOnce({
|
||||||
|
response: {
|
||||||
|
status: 422,
|
||||||
|
_data: { violations: [{ propertyPath: 'email', message: 'L\'adresse email n\'est pas valide.' }] },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const form = createdForm()
|
||||||
|
contactAt(form).lastName = 'Doe'
|
||||||
|
form.addContact()
|
||||||
|
contactAt(form, 1).email = 'invalide'
|
||||||
|
|
||||||
|
const ok = await form.submitContacts(vi.fn())
|
||||||
|
|
||||||
|
expect(ok).toBe(false)
|
||||||
|
expect(form.contactErrors.value[0]).toBeUndefined()
|
||||||
|
expect(form.contactErrors.value[1]?.email).toBe('L\'adresse email n\'est pas valide.')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|||||||
@@ -1,10 +1,18 @@
|
|||||||
import { computed, reactive, ref } from 'vue'
|
import { computed, reactive, ref, type Ref } from 'vue'
|
||||||
import { useFormErrors } from '~/shared/composables/useFormErrors'
|
import { useFormErrors } from '~/shared/composables/useFormErrors'
|
||||||
|
import { mapViolationsToRecord } from '~/shared/utils/api'
|
||||||
import {
|
import {
|
||||||
|
emptyProviderContact,
|
||||||
emptyProviderMain,
|
emptyProviderMain,
|
||||||
|
type ProviderContactFormDraft,
|
||||||
|
type ProviderContactResponse,
|
||||||
type ProviderMainDraft,
|
type ProviderMainDraft,
|
||||||
type ProviderMainResponse,
|
type ProviderMainResponse,
|
||||||
} from '~/modules/technique/types/providerForm'
|
} from '~/modules/technique/types/providerForm'
|
||||||
|
import {
|
||||||
|
buildProviderContactPayload,
|
||||||
|
isProviderContactBlank,
|
||||||
|
} from '~/modules/technique/utils/forms/providerContact'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Workflow de l'ecran « Ajouter un prestataire » (M3 Technique, ERP-141) —
|
* Workflow de l'ecran « Ajouter un prestataire » (M3 Technique, ERP-141) —
|
||||||
@@ -182,6 +190,114 @@ export function useProviderForm() {
|
|||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Soumet TOUS les blocs d'une collection en collectant les erreurs PAR INDEX :
|
||||||
|
* on n'arrete pas au premier bloc en echec (decision ERP-101). Reinitialise la
|
||||||
|
* cible, tente chaque ligne via `saveRow`, mappe les 422 inline ou delegue le
|
||||||
|
* fallback a `onUnmappedError`. `shouldSkip` ignore les amorces vides. Retourne
|
||||||
|
* true si au moins un bloc a echoue. Miroir de `useSupplierFormErrors.submitRows`.
|
||||||
|
*/
|
||||||
|
async function submitRows<T>(
|
||||||
|
rows: T[],
|
||||||
|
target: Ref<Record<string, string>[]>,
|
||||||
|
saveRow: (row: T, index: number) => Promise<void>,
|
||||||
|
onUnmappedError: (error: unknown, index: number) => void,
|
||||||
|
shouldSkip?: (row: T, index: number) => boolean,
|
||||||
|
): Promise<boolean> {
|
||||||
|
target.value = []
|
||||||
|
let hasError = false
|
||||||
|
for (let index = 0; index < rows.length; index++) {
|
||||||
|
const row = rows[index] as T
|
||||||
|
if (shouldSkip?.(row, index)) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await saveRow(row, index)
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
const response = (error as { response?: { status?: number, _data?: unknown } })?.response
|
||||||
|
const mapped = response?.status === 422 ? mapViolationsToRecord(response._data) : {}
|
||||||
|
if (Object.keys(mapped).length > 0) {
|
||||||
|
target.value[index] = mapped
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
onUnmappedError(error, index)
|
||||||
|
}
|
||||||
|
hasError = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return hasError
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Onglet Contact (ERP-142) ──────────────────────────────────────────────
|
||||||
|
const contacts = ref<ProviderContactFormDraft[]>([emptyProviderContact()])
|
||||||
|
// Erreurs 422 par ligne (alignees sur l'index du v-for), peuplees par submitRows.
|
||||||
|
const contactErrors = ref<Record<string, string>[]>([])
|
||||||
|
|
||||||
|
// « + Nouveau contact » desactive tant que le dernier bloc est vide (RG-3.04).
|
||||||
|
const canAddContact = computed(() => {
|
||||||
|
const last = contacts.value[contacts.value.length - 1]
|
||||||
|
return last !== undefined && !isProviderContactBlank(last)
|
||||||
|
})
|
||||||
|
|
||||||
|
function addContact(): void {
|
||||||
|
if (canAddContact.value) {
|
||||||
|
contacts.value.push(emptyProviderContact())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeContact(index: number): void {
|
||||||
|
contacts.value.splice(index, 1)
|
||||||
|
contactErrors.value.splice(index, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Valide l'onglet Contact : POST des nouveaux contacts sur
|
||||||
|
* /providers/{id}/contacts, PATCH des existants sur /provider_contacts/{id}
|
||||||
|
* (sous-ressource, groupe provider:write:contacts). RG-3.12 : au moins un bloc
|
||||||
|
* valide. Si l'onglet ne contient QUE des amorces vides, on les soumet pour
|
||||||
|
* declencher la 422 RG-3.04 inline (sur `firstName`) plutot que de finaliser un
|
||||||
|
* onglet vide. Retourne true si l'onglet a ete valide (avance/termine).
|
||||||
|
*/
|
||||||
|
async function submitContacts(onError: (error: unknown) => void): Promise<boolean> {
|
||||||
|
if (providerId.value === null || tabSubmitting.value) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
tabSubmitting.value = true
|
||||||
|
try {
|
||||||
|
const hasSubmittable = contacts.value.some(c => c.id !== null || !isProviderContactBlank(c))
|
||||||
|
const hasError = await submitRows(
|
||||||
|
contacts.value,
|
||||||
|
contactErrors,
|
||||||
|
async (contact) => {
|
||||||
|
const body = buildProviderContactPayload(contact)
|
||||||
|
if (contact.id === null) {
|
||||||
|
const created = await api.post<ProviderContactResponse>(
|
||||||
|
`/providers/${providerId.value}/contacts`,
|
||||||
|
body,
|
||||||
|
{ headers: { Accept: 'application/ld+json' }, toast: false },
|
||||||
|
)
|
||||||
|
contact.id = created.id
|
||||||
|
contact.iri = created['@id'] ?? null
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
await api.patch(`/provider_contacts/${contact.id}`, body, { toast: false })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError,
|
||||||
|
contact => hasSubmittable && contact.id === null && isProviderContactBlank(contact),
|
||||||
|
)
|
||||||
|
if (hasError) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
completeTab('contact')
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
tabSubmitting.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
// etat
|
// etat
|
||||||
main,
|
main,
|
||||||
@@ -197,11 +313,19 @@ export function useProviderForm() {
|
|||||||
unlockedIndex,
|
unlockedIndex,
|
||||||
validated,
|
validated,
|
||||||
isValidated,
|
isValidated,
|
||||||
|
// contacts
|
||||||
|
contacts,
|
||||||
|
contactErrors,
|
||||||
|
canAddContact,
|
||||||
|
addContact,
|
||||||
|
removeContact,
|
||||||
|
submitContacts,
|
||||||
// actions
|
// actions
|
||||||
validateMainFront,
|
validateMainFront,
|
||||||
buildMainPayload,
|
buildMainPayload,
|
||||||
submitMain,
|
submitMain,
|
||||||
patchProvider,
|
patchProvider,
|
||||||
completeTab,
|
completeTab,
|
||||||
|
submitRows,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -57,23 +57,77 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ── Onglets a validation incrementale ─────────────────────────────
|
<!-- ── Onglets a validation incrementale ─────────────────────────────
|
||||||
Le contenu des onglets (Contact / Adresse / Comptabilite) arrive aux
|
Onglet Contact actif (ERP-142) ; Adresse / Comptabilite arrivent aux
|
||||||
tickets ERP-142 → 144 : placeholders « A venir » pour l'instant. -->
|
tickets ERP-143 / 144 : placeholders « A venir » pour l'instant. -->
|
||||||
<MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
|
<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 #address><ComingSoonPlaceholder /></template>
|
||||||
<template v-if="canAccountingView" #accounting><ComingSoonPlaceholder /></template>
|
<template v-if="canAccountingView" #accounting><ComingSoonPlaceholder /></template>
|
||||||
</MalioTabList>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, onMounted } from 'vue'
|
import { computed, onMounted, reactive } from 'vue'
|
||||||
import { useProviderReferentials } from '~/modules/technique/composables/useProviderReferentials'
|
import { useProviderReferentials } from '~/modules/technique/composables/useProviderReferentials'
|
||||||
import { useProviderForm } from '~/modules/technique/composables/useProviderForm'
|
import { useProviderForm } from '~/modules/technique/composables/useProviderForm'
|
||||||
|
import { extractApiErrorMessage } from '~/shared/utils/api'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const toast = useToast()
|
||||||
const { can } = usePermissions()
|
const { can } = usePermissions()
|
||||||
|
|
||||||
useHead({ title: t('technique.providers.form.title') })
|
useHead({ title: t('technique.providers.form.title') })
|
||||||
@@ -97,6 +151,14 @@ const {
|
|||||||
activeTab,
|
activeTab,
|
||||||
unlockedIndex,
|
unlockedIndex,
|
||||||
submitMain,
|
submitMain,
|
||||||
|
tabSubmitting,
|
||||||
|
isValidated,
|
||||||
|
contacts,
|
||||||
|
contactErrors,
|
||||||
|
canAddContact,
|
||||||
|
addContact,
|
||||||
|
removeContact,
|
||||||
|
submitContacts,
|
||||||
} = useProviderForm()
|
} = useProviderForm()
|
||||||
|
|
||||||
/** Retour vers le repertoire prestataires (fleche d'en-tete). */
|
/** Retour vers le repertoire prestataires (fleche d'en-tete). */
|
||||||
@@ -104,6 +166,50 @@ function goBack(): void {
|
|||||||
router.push('/providers')
|
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.
|
// Icone (Iconify) affichee dans l'onglet, par cle.
|
||||||
const TAB_ICONS: Record<string, string> = {
|
const TAB_ICONS: Record<string, string> = {
|
||||||
contact: 'mdi:account-box-plus-outline',
|
contact: 'mdi:account-box-plus-outline',
|
||||||
|
|||||||
@@ -39,3 +39,45 @@ export interface ProviderMainResponse {
|
|||||||
/** Nom renvoye normalise (UPPERCASE) par le serveur, reaffiche en lecture seule. */
|
/** Nom renvoye normalise (UPPERCASE) par le serveur, reaffiche en lecture seule. */
|
||||||
companyName: string | null
|
companyName: string | null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Un contact du prestataire (onglet Contact, ERP-142). Miroir de
|
||||||
|
* `SupplierContactFormDraft` (M2). Tous les champs sont nullable cote ORM ; la
|
||||||
|
* validite (RG-3.04) tient a la presence d'AU MOINS un champ rempli parmi
|
||||||
|
* prenom / nom / fonction / telephone principal / email (cf. back).
|
||||||
|
*/
|
||||||
|
export interface ProviderContactFormDraft {
|
||||||
|
/** Id serveur une fois le contact cree (null tant que non persiste). */
|
||||||
|
id: number | null
|
||||||
|
/** IRI Hydra du contact cree — servira au rattachement M2M cote adresse (ERP-143). */
|
||||||
|
iri: string | null
|
||||||
|
firstName: string | null
|
||||||
|
lastName: string | null
|
||||||
|
jobTitle: string | null
|
||||||
|
phonePrimary: string | null
|
||||||
|
phoneSecondary: string | null
|
||||||
|
email: string | null
|
||||||
|
/** UI : le 2e numero a ete revele via le bouton « + » (max 2 telephones). */
|
||||||
|
hasSecondaryPhone: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Fabrique un contact vierge. */
|
||||||
|
export function emptyProviderContact(): ProviderContactFormDraft {
|
||||||
|
return {
|
||||||
|
id: null,
|
||||||
|
iri: null,
|
||||||
|
firstName: null,
|
||||||
|
lastName: null,
|
||||||
|
jobTitle: null,
|
||||||
|
phonePrimary: null,
|
||||||
|
phoneSecondary: null,
|
||||||
|
email: null,
|
||||||
|
hasSecondaryPhone: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Reponse du POST /providers/{id}/contacts (groupe provider:item:read + IRI Hydra). */
|
||||||
|
export interface ProviderContactResponse {
|
||||||
|
'@id'?: string
|
||||||
|
id: number
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,79 @@
|
|||||||
|
import { describe, it, expect } from 'vitest'
|
||||||
|
import {
|
||||||
|
buildProviderContactPayload,
|
||||||
|
hasAtLeastOneFilledContact,
|
||||||
|
isProviderContactBlank,
|
||||||
|
} from '../providerContact'
|
||||||
|
import { emptyProviderContact } from '~/modules/technique/types/providerForm'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Helpers purs de l'onglet Contact prestataire (ERP-142). On verifie la
|
||||||
|
* definition de « bloc vide » (RG-3.04, alignee sur le back) et la construction
|
||||||
|
* du payload de sous-ressource.
|
||||||
|
*/
|
||||||
|
describe('providerContact helpers', () => {
|
||||||
|
describe('isProviderContactBlank (RG-3.04)', () => {
|
||||||
|
it('un bloc vierge est vide', () => {
|
||||||
|
expect(isProviderContactBlank(emptyProviderContact())).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('un seul champ rempli parmi nom/prenom/fonction/tel/email suffit a le rendre non vide', () => {
|
||||||
|
for (const field of ['firstName', 'lastName', 'jobTitle', 'phonePrimary', 'email'] as const) {
|
||||||
|
const contact = { ...emptyProviderContact(), [field]: 'x' }
|
||||||
|
expect(isProviderContactBlank(contact)).toBe(false)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
it('ignore les espaces (trim) — un champ blanc ne compte pas', () => {
|
||||||
|
expect(isProviderContactBlank({ ...emptyProviderContact(), lastName: ' ' })).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('un 2e telephone seul NE suffit PAS (exclu, comme le back)', () => {
|
||||||
|
const contact = { ...emptyProviderContact(), hasSecondaryPhone: true, phoneSecondary: '0102030405' }
|
||||||
|
expect(isProviderContactBlank(contact)).toBe(true)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('hasAtLeastOneFilledContact (RG-3.12)', () => {
|
||||||
|
it('false si tous les blocs sont vides', () => {
|
||||||
|
expect(hasAtLeastOneFilledContact([emptyProviderContact(), emptyProviderContact()])).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('true des qu\'un bloc porte une donnee', () => {
|
||||||
|
expect(hasAtLeastOneFilledContact([
|
||||||
|
emptyProviderContact(),
|
||||||
|
{ ...emptyProviderContact(), email: 'a@b.fr' },
|
||||||
|
])).toBe(true)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('buildProviderContactPayload', () => {
|
||||||
|
it('mappe les champs et envoie null pour les vides', () => {
|
||||||
|
const payload = buildProviderContactPayload({ ...emptyProviderContact(), lastName: 'Doe' })
|
||||||
|
expect(payload).toEqual({
|
||||||
|
firstName: null,
|
||||||
|
lastName: 'Doe',
|
||||||
|
jobTitle: null,
|
||||||
|
phonePrimary: null,
|
||||||
|
phoneSecondary: null,
|
||||||
|
email: null,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('n\'envoie le 2e telephone que si revele (max 2)', () => {
|
||||||
|
const masque = buildProviderContactPayload({
|
||||||
|
...emptyProviderContact(),
|
||||||
|
phoneSecondary: '0102030405',
|
||||||
|
hasSecondaryPhone: false,
|
||||||
|
})
|
||||||
|
expect(masque.phoneSecondary).toBeNull()
|
||||||
|
|
||||||
|
const revele = buildProviderContactPayload({
|
||||||
|
...emptyProviderContact(),
|
||||||
|
phoneSecondary: '0102030405',
|
||||||
|
hasSecondaryPhone: true,
|
||||||
|
})
|
||||||
|
expect(revele.phoneSecondary).toBe('0102030405')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
/**
|
||||||
|
* Helpers purs de l'onglet Contact prestataire (M3 Technique, ERP-142) — miroir
|
||||||
|
* reduit de `supplierFormRules.ts` / `supplierEdit.ts` (M2). Testables sans Vue
|
||||||
|
* ni API : detection de bloc vide (RG-3.04) et construction du payload de
|
||||||
|
* sous-ressource contacts.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { ProviderContactFormDraft } from '~/modules/technique/types/providerForm'
|
||||||
|
|
||||||
|
/** Vrai si une chaine porte au moins un caractere non-espace. */
|
||||||
|
function isFilled(value: string | null | undefined): boolean {
|
||||||
|
return value !== null && value !== undefined && value.trim() !== ''
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* RG-3.04 : un bloc Contact est VIDE tant qu'aucun des champs comptant pour la
|
||||||
|
* validite n'est rempli — prenom / nom / fonction / telephone principal / email.
|
||||||
|
*
|
||||||
|
* `phoneSecondary` est volontairement EXCLU : le back (CHECK
|
||||||
|
* `chk_provider_contact_name` + `ProviderContactProcessor`) ne le compte pas non
|
||||||
|
* plus, un bloc ne portant qu'un 2e numero reste invalide. Garder la meme
|
||||||
|
* definition cote front evite tout drift (un bloc « vide » front == bloc rejete
|
||||||
|
* back).
|
||||||
|
*/
|
||||||
|
export function isProviderContactBlank(contact: ProviderContactFormDraft): boolean {
|
||||||
|
return ![
|
||||||
|
contact.firstName,
|
||||||
|
contact.lastName,
|
||||||
|
contact.jobTitle,
|
||||||
|
contact.phonePrimary,
|
||||||
|
contact.email,
|
||||||
|
].some(isFilled)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* RG-3.12 : l'onglet Contact ne peut etre finalise que s'il reste au moins un
|
||||||
|
* bloc non vide (au moins un contact valide).
|
||||||
|
*/
|
||||||
|
export function hasAtLeastOneFilledContact(contacts: ProviderContactFormDraft[]): boolean {
|
||||||
|
return contacts.some(contact => !isProviderContactBlank(contact))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Payload de la sous-ressource contacts (groupe `provider:write:contacts`). Les
|
||||||
|
* chaines vides sont envoyees a null (le serveur normalise/trim de toute facon).
|
||||||
|
* `phoneSecondary` n'est envoye que si le 2e numero a ete revele (max 2 tel).
|
||||||
|
*/
|
||||||
|
export function buildProviderContactPayload(contact: ProviderContactFormDraft): Record<string, unknown> {
|
||||||
|
return {
|
||||||
|
firstName: contact.firstName || null,
|
||||||
|
lastName: contact.lastName || null,
|
||||||
|
jobTitle: contact.jobTitle || null,
|
||||||
|
phonePrimary: contact.phonePrimary || null,
|
||||||
|
phoneSecondary: contact.hasSecondaryPhone ? (contact.phoneSecondary || null) : null,
|
||||||
|
email: contact.email || null,
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user