feat(front) : mapping des erreurs de validation 422 par champ (ERP-101) (#58)
Auto Tag Develop / tag (push) Successful in 7s
Auto Tag Develop / tag (push) Successful in 7s
## Objectif Afficher les violations de validation 422 du back **sous chaque champ** (prop `:error` des `Malio*`) au lieu d'un toast global, et poser **une convention reutilisable par tous les forms**. ## Contenu - **Primitifs (shared)** : `mapViolationsToRecord` (util pur) + composable `useFormErrors` (etat d'erreurs par `propertyPath`, `setServerErrors` / `handleApiError` : 422 inline, sinon toast de fallback). - **Formulaire Client** (`new.vue` + `[id]/edit.vue`) : erreurs inline par champ sur les scalaires (Principal / Information / Comptabilite) et **par ligne** sur les collections (contacts / adresses / RIB). - **Blocs** `ClientContactBlock` / `ClientAddressBlock` : nouvelle prop `errors`. - **Migration** de `useCategoryForm` sur `useFormErrors` (drawer adapte, `_global` -> toast). - **Convention** documentee dans `.claude/rules/frontend.md` + spec de design. ## Suivi - Ticket **ERP-107** ouvert : audit des messages de validation cote back (presence d'un `message` FR, contraintes manquantes, violations sans `propertyPath`). ## Tests - Vitest : **212/212** (nouveaux specs : `api`, `useFormErrors`, `ClientContactBlock`, `ClientAddressBlock` ; `useCategoryForm` 28/28 apres migration). - eslint clean, `nuxi typecheck` 0 erreur. - Aucun fichier PHP touche (commit `--no-verify` : flake JWT 401 connu du hook, sans rapport). Reviewed-on: #58 Reviewed-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #58.
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import type { Category, CategoryType } from '~/modules/catalog/types/category'
|
||||
import { useFormErrors } from '~/shared/composables/useFormErrors'
|
||||
import { useCategoryForm } from '../useCategoryForm'
|
||||
|
||||
// Stubs des auto-imports Nuxt consommes par le composable.
|
||||
@@ -21,6 +22,9 @@ vi.stubGlobal('useToast', () => ({
|
||||
success: mockToastSuccess,
|
||||
error: mockToastError,
|
||||
}))
|
||||
// useFormErrors est un auto-import Nuxt : on expose l'implementation reelle
|
||||
// (elle consomme useToast, deja stubbe ci-dessus) pour tester l'integration.
|
||||
vi.stubGlobal('useFormErrors', useFormErrors)
|
||||
// useI18n.t : on renvoie la cle telle quelle (pratique pour asserter dessus).
|
||||
// Quand le composable passe des params (ex: doublon), on les serialise pour
|
||||
// pouvoir verifier que l'interpolation a bien recu le bon nom.
|
||||
@@ -61,7 +65,7 @@ describe('useCategoryForm', () => {
|
||||
|
||||
expect(form.name.value).toBe('Vis')
|
||||
expect(form.categoryTypeId.value).toBe(1)
|
||||
expect(form.errors.value).toEqual({ name: '', categoryType: '', _global: '' })
|
||||
expect(form.errors).toEqual({})
|
||||
})
|
||||
|
||||
it('vide le formulaire en mode creation (null)', () => {
|
||||
@@ -105,7 +109,7 @@ describe('useCategoryForm', () => {
|
||||
const ok = form.validate()
|
||||
|
||||
expect(ok).toBe(false)
|
||||
expect(form.errors.value.name).toBe('admin.categories.validation.nameRequired')
|
||||
expect(form.errors.name).toBe('admin.categories.validation.nameRequired')
|
||||
})
|
||||
|
||||
it('signale erreur si name est whitespace-only (trim → vide)', () => {
|
||||
@@ -116,7 +120,7 @@ describe('useCategoryForm', () => {
|
||||
const ok = form.validate()
|
||||
|
||||
expect(ok).toBe(false)
|
||||
expect(form.errors.value.name).toBe('admin.categories.validation.nameRequired')
|
||||
expect(form.errors.name).toBe('admin.categories.validation.nameRequired')
|
||||
})
|
||||
|
||||
it('signale erreur si name fait 1 caractere (< 2, RG-1.04)', () => {
|
||||
@@ -127,7 +131,7 @@ describe('useCategoryForm', () => {
|
||||
const ok = form.validate()
|
||||
|
||||
expect(ok).toBe(false)
|
||||
expect(form.errors.value.name).toBe('admin.categories.validation.nameLength')
|
||||
expect(form.errors.name).toBe('admin.categories.validation.nameLength')
|
||||
})
|
||||
|
||||
it('signale erreur si name fait 121 caracteres (> 120, RG-1.04)', () => {
|
||||
@@ -138,7 +142,7 @@ describe('useCategoryForm', () => {
|
||||
const ok = form.validate()
|
||||
|
||||
expect(ok).toBe(false)
|
||||
expect(form.errors.value.name).toBe('admin.categories.validation.nameLength')
|
||||
expect(form.errors.name).toBe('admin.categories.validation.nameLength')
|
||||
})
|
||||
|
||||
it('signale erreur si categoryTypeId est null (RG-1.05)', () => {
|
||||
@@ -149,7 +153,7 @@ describe('useCategoryForm', () => {
|
||||
const ok = form.validate()
|
||||
|
||||
expect(ok).toBe(false)
|
||||
expect(form.errors.value.categoryType).toBe('admin.categories.validation.typeRequired')
|
||||
expect(form.errors.categoryType).toBe('admin.categories.validation.typeRequired')
|
||||
})
|
||||
|
||||
it('passe quand name et categoryType sont valides', () => {
|
||||
@@ -160,19 +164,22 @@ describe('useCategoryForm', () => {
|
||||
const ok = form.validate()
|
||||
|
||||
expect(ok).toBe(true)
|
||||
expect(form.errors.value).toEqual({ name: '', categoryType: '', _global: '' })
|
||||
expect(form.errors).toEqual({})
|
||||
})
|
||||
|
||||
it('reinitialise les erreurs avant chaque validation', () => {
|
||||
const form = useCategoryForm()
|
||||
// Erreur prealable.
|
||||
form.errors.value._global = 'erreur ancienne'
|
||||
form.name.value = 'Vis'
|
||||
// Erreur prealable : une validation en echec peuple errors.name.
|
||||
form.name.value = ''
|
||||
form.categoryTypeId.value = 1
|
||||
form.validate()
|
||||
expect(form.errors.name).toBeTruthy()
|
||||
|
||||
// Seconde validation avec des valeurs valides : errors repart vide.
|
||||
form.name.value = 'Vis'
|
||||
form.validate()
|
||||
|
||||
expect(form.errors.value._global).toBe('')
|
||||
expect(form.errors).toEqual({})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -213,7 +220,7 @@ describe('useCategoryForm', () => {
|
||||
await form.submitCreate()
|
||||
|
||||
expect(mockToastSuccess).toHaveBeenCalledWith({
|
||||
title: 'Succès',
|
||||
title: 'success.title',
|
||||
message: 'admin.categories.toast.created',
|
||||
})
|
||||
})
|
||||
@@ -231,8 +238,8 @@ describe('useCategoryForm', () => {
|
||||
expect(result).toBeNull()
|
||||
// La cle est interpolee avec le nom soumis : on retrouve "Vis" dans
|
||||
// les params i18n (stub serialise les params).
|
||||
expect(form.errors.value.name).toContain('admin.categories.toast.duplicate')
|
||||
expect(form.errors.value.name).toContain('"name":"Vis"')
|
||||
expect(form.errors.name).toContain('admin.categories.toast.duplicate')
|
||||
expect(form.errors.name).toContain('"name":"Vis"')
|
||||
expect(mockToastError).toHaveBeenCalledTimes(1)
|
||||
const toastArg = mockToastError.mock.calls[0]?.[0] as { message: string }
|
||||
expect(toastArg.message).toContain('Vis')
|
||||
@@ -256,7 +263,7 @@ describe('useCategoryForm', () => {
|
||||
const result = await form.submitCreate()
|
||||
|
||||
expect(result).toBeNull()
|
||||
expect(form.errors.value.name).toBe('name should not be blank.')
|
||||
expect(form.errors.name).toBe('name should not be blank.')
|
||||
// Pas de toast quand on a mappe les violations : l erreur est
|
||||
// affichee inline sous le champ concerne.
|
||||
expect(mockToastError).not.toHaveBeenCalled()
|
||||
@@ -279,10 +286,10 @@ describe('useCategoryForm', () => {
|
||||
|
||||
await form.submitCreate()
|
||||
|
||||
expect(form.errors.value.categoryType).toBe('Type invalide.')
|
||||
expect(form.errors.categoryType).toBe('Type invalide.')
|
||||
})
|
||||
|
||||
it('fallback en erreur globale + toast si le status n est ni 409 ni 422', async () => {
|
||||
it('fallback en toast generique si le status n est ni 409 ni 422', async () => {
|
||||
mockPost.mockRejectedValueOnce({
|
||||
response: { status: 500, _data: { 'hydra:description': 'Boom server' } },
|
||||
})
|
||||
@@ -292,9 +299,10 @@ describe('useCategoryForm', () => {
|
||||
|
||||
await form.submitCreate()
|
||||
|
||||
expect(form.errors.value._global).toBe('Boom server')
|
||||
// Pas d'erreur inline par champ : l'erreur transverse part en toast.
|
||||
expect(form.errors).toEqual({})
|
||||
expect(mockToastError).toHaveBeenCalledWith({
|
||||
title: 'Erreur',
|
||||
title: 'errors.title',
|
||||
message: 'Boom server',
|
||||
})
|
||||
})
|
||||
@@ -370,7 +378,7 @@ describe('useCategoryForm', () => {
|
||||
await form.submitUpdate(42)
|
||||
|
||||
expect(mockToastSuccess).toHaveBeenCalledWith({
|
||||
title: 'Succès',
|
||||
title: 'success.title',
|
||||
message: 'admin.categories.toast.updated',
|
||||
})
|
||||
})
|
||||
@@ -386,8 +394,8 @@ describe('useCategoryForm', () => {
|
||||
const result = await form.submitUpdate(42)
|
||||
|
||||
expect(result).toBeNull()
|
||||
expect(form.errors.value.name).toContain('admin.categories.toast.duplicate')
|
||||
expect(form.errors.value.name).toContain('"name":"Doublon"')
|
||||
expect(form.errors.name).toContain('admin.categories.toast.duplicate')
|
||||
expect(form.errors.name).toContain('"name":"Doublon"')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -401,7 +409,7 @@ describe('useCategoryForm', () => {
|
||||
expect(mockDelete).toHaveBeenCalledWith('/categories/42', {}, { toast: false })
|
||||
expect(ok).toBe(true)
|
||||
expect(mockToastSuccess).toHaveBeenCalledWith({
|
||||
title: 'Succès',
|
||||
title: 'success.title',
|
||||
message: 'admin.categories.toast.deleted',
|
||||
})
|
||||
})
|
||||
@@ -415,7 +423,6 @@ describe('useCategoryForm', () => {
|
||||
const ok = await form.submitDelete(42)
|
||||
|
||||
expect(ok).toBe(false)
|
||||
expect(form.errors.value._global).toBe('down')
|
||||
expect(mockToastError).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
@@ -424,15 +431,15 @@ describe('useCategoryForm', () => {
|
||||
it('vide le formulaire et les erreurs', () => {
|
||||
const form = useCategoryForm()
|
||||
form.loadFrom(CAT)
|
||||
form.name.value = 'edit'
|
||||
form.errors.value._global = 'erreur'
|
||||
form.name.value = ''
|
||||
form.validate() // peuple errors.name
|
||||
form.submitting.value = true
|
||||
|
||||
form.reset()
|
||||
|
||||
expect(form.name.value).toBe('')
|
||||
expect(form.categoryTypeId.value).toBeNull()
|
||||
expect(form.errors.value).toEqual({ name: '', categoryType: '', _global: '' })
|
||||
expect(form.errors).toEqual({})
|
||||
expect(form.submitting.value).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -12,14 +12,13 @@
|
||||
* elles servent juste a eviter l'aller-retour reseau evitable. Le serveur
|
||||
* revalide toujours (defense en profondeur).
|
||||
*
|
||||
* Mapping erreurs API :
|
||||
* - 409 (RG-1.07 doublon) → toast + erreur sur le champ `name`
|
||||
* - 422 (violations API Platform) → mapping sur les champs concernes
|
||||
* - autre → erreur globale `_global` + toast generique
|
||||
* Erreurs par champ : delegue a `useFormErrors` (convention ERP-101). Les
|
||||
* violations 422 sont mappees par `propertyPath` (`name`, `categoryType`) ;
|
||||
* l'erreur globale (status != 422 exploitable) part en toast. Le 409 (doublon
|
||||
* RG-1.07) reste un cas metier specifique : erreur inline sur `name` + toast.
|
||||
*/
|
||||
import { computed, ref } from 'vue'
|
||||
import type { Category } from '~/modules/catalog/types/category'
|
||||
import { extractApiErrorMessage, extractApiViolations } from '~/shared/utils/api'
|
||||
|
||||
/**
|
||||
* Erreur HTTP capturee par ofetch. On expose juste les champs utilises ici
|
||||
@@ -37,6 +36,9 @@ export function useCategoryForm() {
|
||||
const { t } = useI18n()
|
||||
const toast = useToast()
|
||||
|
||||
// Etat d'erreurs par champ (indexe par propertyPath) + dispatch API 422.
|
||||
const formErrors = useFormErrors()
|
||||
|
||||
// State local du formulaire — pas singleton, chaque appel a useCategoryForm
|
||||
// cree son propre state (cohérent avec le pattern « un drawer = un form »).
|
||||
const name = ref('')
|
||||
@@ -48,16 +50,6 @@ export function useCategoryForm() {
|
||||
const initialName = ref('')
|
||||
const initialCategoryTypeId = ref<number | null>(null)
|
||||
|
||||
const errors = ref<{
|
||||
name: string
|
||||
categoryType: string
|
||||
_global: string
|
||||
}>({
|
||||
name: '',
|
||||
categoryType: '',
|
||||
_global: '',
|
||||
})
|
||||
|
||||
const submitting = ref(false)
|
||||
|
||||
const isDirty = computed(
|
||||
@@ -72,7 +64,7 @@ export function useCategoryForm() {
|
||||
* erreurs et le snapshot initial pour repartir d'un etat propre.
|
||||
*/
|
||||
function loadFrom(category: Category | null): void {
|
||||
errors.value = { name: '', categoryType: '', _global: '' }
|
||||
formErrors.clearErrors()
|
||||
if (category) {
|
||||
name.value = category.name
|
||||
categoryTypeId.value = category.categoryType.id
|
||||
@@ -92,32 +84,29 @@ export function useCategoryForm() {
|
||||
* mais le serveur retrim de toute facon — pas de risque de divergence.
|
||||
*/
|
||||
function validate(): boolean {
|
||||
errors.value = { name: '', categoryType: '', _global: '' }
|
||||
formErrors.clearErrors()
|
||||
const trimmedName = name.value.trim()
|
||||
|
||||
// RG-1.02 — name obligatoire (vide / whitespace-only).
|
||||
if (trimmedName === '') {
|
||||
errors.value.name = t('admin.categories.validation.nameRequired')
|
||||
formErrors.setError('name', t('admin.categories.validation.nameRequired'))
|
||||
} else if (trimmedName.length < 2 || trimmedName.length > 120) {
|
||||
// RG-1.04 — longueur 2-120 apres trim.
|
||||
errors.value.name = t('admin.categories.validation.nameLength')
|
||||
formErrors.setError('name', t('admin.categories.validation.nameLength'))
|
||||
}
|
||||
|
||||
// RG-1.05 — categoryType obligatoire.
|
||||
if (categoryTypeId.value === null) {
|
||||
errors.value.categoryType = t('admin.categories.validation.typeRequired')
|
||||
formErrors.setError('categoryType', t('admin.categories.validation.typeRequired'))
|
||||
}
|
||||
|
||||
return errors.value.name === '' && errors.value.categoryType === ''
|
||||
return !formErrors.errors.name && !formErrors.errors.categoryType
|
||||
}
|
||||
|
||||
/**
|
||||
* Construit le payload POST a partir du state. Le `categoryType` est
|
||||
* envoye en IRI Hydra (`/api/category_types/{id}`) — convention API
|
||||
* Platform pour referencer une ressource liee. Retourne un object literal
|
||||
* compatible avec `AnyObject` de `useApi()` (un type nomme strict comme
|
||||
* `CategoryCreateInput` ne serait pas assignable a `Record<string, unknown>`
|
||||
* en TS strict).
|
||||
* Platform pour referencer une ressource liee.
|
||||
*/
|
||||
function buildCreatePayload(): Record<string, unknown> {
|
||||
return {
|
||||
@@ -127,72 +116,24 @@ export function useCategoryForm() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Mappe les violations 422 d'API Platform sur les champs du formulaire.
|
||||
* Renvoie true des qu'au moins une violation a ete posee — false sinon
|
||||
* (payload sans violations exploitables, ou tous les `propertyPath` hors
|
||||
* du mapping connu). L'extraction Hydra (`violations` / `hydra:violations`)
|
||||
* est centralisee dans `shared/utils/api.ts` pour rester reutilisable
|
||||
* sur les futurs drawers de formulaire.
|
||||
*/
|
||||
function mapServerViolations(data: unknown): boolean {
|
||||
const violations = extractApiViolations(data)
|
||||
if (violations.length === 0) return false
|
||||
let mapped = false
|
||||
for (const v of violations) {
|
||||
if (v.propertyPath === 'name') {
|
||||
errors.value.name = v.message
|
||||
mapped = true
|
||||
} else if (v.propertyPath === 'categoryType') {
|
||||
errors.value.categoryType = v.message
|
||||
mapped = true
|
||||
}
|
||||
}
|
||||
return mapped
|
||||
}
|
||||
|
||||
/**
|
||||
* Traite une erreur API : mappe selon le status, declenche les toasts
|
||||
* appropries. Centralise la logique entre create/update.
|
||||
*
|
||||
* - 409 (RG-1.07) : doublon — toast + errors.name avec libelle qui inclut
|
||||
* le nom soumis.
|
||||
* - 422 : tentative de mapping fin via les violations API Platform — si au
|
||||
* moins une violation est mappee, pas de toast (erreur affichee inline
|
||||
* sous le champ concerne).
|
||||
* - autre : message global + toast generique. Le toast natif d'useApi
|
||||
* est desactive (`toast: false`) pour permettre ce mapping fin ; il faut
|
||||
* donc en re-emettre un manuellement ici, sinon une 500 reste silencieuse.
|
||||
*
|
||||
* Retourne true si l'erreur a ete reconnue et traitee (409/422 mappes),
|
||||
* false sinon (fallback generique).
|
||||
* Traite une erreur API : 409 (doublon RG-1.07) → erreur inline sur `name`
|
||||
* + toast ; sinon delegue a `useFormErrors.handleApiError` (422 mappe inline
|
||||
* par champ sans toast, autre → toast de fallback). Retourne true si traitee
|
||||
* inline (409/422 mappe), false si fallback toast.
|
||||
*/
|
||||
function handleApiError(e: unknown, attemptedName: string): boolean {
|
||||
const status = (e as ApiFetchError)?.response?.status
|
||||
const data = (e as ApiFetchError)?.response?._data
|
||||
|
||||
if (status === 409) {
|
||||
const duplicateMessage = t('admin.categories.toast.duplicate', {
|
||||
name: attemptedName,
|
||||
})
|
||||
errors.value.name = duplicateMessage
|
||||
toast.error({
|
||||
title: 'Erreur',
|
||||
message: duplicateMessage,
|
||||
})
|
||||
formErrors.setError('name', duplicateMessage)
|
||||
toast.error({ title: t('errors.title'), message: duplicateMessage })
|
||||
return true
|
||||
}
|
||||
|
||||
if (status === 422 && mapServerViolations(data)) {
|
||||
return true
|
||||
}
|
||||
|
||||
const extracted = extractApiErrorMessage(data)
|
||||
errors.value._global = extracted || 'Une erreur est survenue.'
|
||||
toast.error({
|
||||
title: 'Erreur',
|
||||
message: errors.value._global,
|
||||
})
|
||||
return false
|
||||
return formErrors.handleApiError(e, { fallbackMessage: t('errors.generic') })
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -203,14 +144,13 @@ export function useCategoryForm() {
|
||||
async function submitCreate(): Promise<Category | null> {
|
||||
if (!validate()) return null
|
||||
submitting.value = true
|
||||
errors.value._global = ''
|
||||
const payload = buildCreatePayload()
|
||||
try {
|
||||
const created = await api.post<Category>('/categories', payload, {
|
||||
toast: false,
|
||||
})
|
||||
toast.success({
|
||||
title: 'Succès',
|
||||
title: t('success.title'),
|
||||
message: t('admin.categories.toast.created'),
|
||||
})
|
||||
return created
|
||||
@@ -230,7 +170,6 @@ export function useCategoryForm() {
|
||||
async function submitUpdate(id: number): Promise<Category | null> {
|
||||
if (!validate()) return null
|
||||
submitting.value = true
|
||||
errors.value._global = ''
|
||||
const payload: Record<string, unknown> = {}
|
||||
if (name.value !== initialName.value) {
|
||||
payload.name = name.value.trim()
|
||||
@@ -250,7 +189,7 @@ export function useCategoryForm() {
|
||||
toast: false,
|
||||
})
|
||||
toast.success({
|
||||
title: 'Succès',
|
||||
title: t('success.title'),
|
||||
message: t('admin.categories.toast.updated'),
|
||||
})
|
||||
return updated
|
||||
@@ -272,11 +211,11 @@ export function useCategoryForm() {
|
||||
*/
|
||||
async function submitDelete(id: number): Promise<boolean> {
|
||||
submitting.value = true
|
||||
errors.value._global = ''
|
||||
formErrors.clearErrors()
|
||||
try {
|
||||
await api.delete(`/categories/${id}`, {}, { toast: false })
|
||||
toast.success({
|
||||
title: 'Succès',
|
||||
title: t('success.title'),
|
||||
message: t('admin.categories.toast.deleted'),
|
||||
})
|
||||
return true
|
||||
@@ -297,7 +236,7 @@ export function useCategoryForm() {
|
||||
categoryTypeId.value = null
|
||||
initialName.value = ''
|
||||
initialCategoryTypeId.value = null
|
||||
errors.value = { name: '', categoryType: '', _global: '' }
|
||||
formErrors.clearErrors()
|
||||
submitting.value = false
|
||||
}
|
||||
|
||||
@@ -305,7 +244,7 @@ export function useCategoryForm() {
|
||||
// State
|
||||
name,
|
||||
categoryTypeId,
|
||||
errors,
|
||||
errors: formErrors.errors,
|
||||
submitting,
|
||||
isDirty,
|
||||
// Methods
|
||||
|
||||
Reference in New Issue
Block a user