BUG #167

Author: alainabbas

apps/web/src/components/core/jsonforms-renderer.vue

@@ -162,6 +162,28 @@ export default defineNuxtComponent({
     }
   },
   methods: {
+    /**
+     * Restreint une map de validations « a plat » au schema courant.
+     *
+     * `DtoValidationPipe` renvoie des cles prefixees par le chemin complet du champ
+     * (`inetOrgPerson.cn`, `additionalFields.attributes.people.uid`) alors que chaque
+     * renderer travaille sur un sous-objet de l'identite. Sans retrait du prefixe,
+     * l'`instancePath` produit ne correspond a aucun controle et l'erreur n'est pas affichee.
+     */
+    scopeFlatValidations(validations: Record<string, unknown>, schemaName: string): Record<string, unknown> {
+      const suffix = `${schemaName}.`
+      const scoped: Record<string, unknown> = {}
+
+      for (const [key, value] of Object.entries(validations)) {
+        const index = key.indexOf(suffix)
+        // Le nom du schema doit etre un segment complet du chemin, pas une sous-chaine d'un champ.
+        if (index === 0 || (index > 0 && key[index - 1] === '.')) {
+          scoped[key.slice(index + suffix.length)] = value
+        }
+      }
+
+      return scoped
+    },
     onChange(event: any) {
       this.$emit('update:modelValue', event.data)
 
@@ -192,7 +214,11 @@ export default defineNuxtComponent({
     i18n() {
       return {
         locale: 'fr',
-        translate: computed(() => this.createTranslator('fr')),
+        // `translate` doit etre la fonction elle-meme : JSON Forms l'appelle directement
+        // (`t(key, defaultMessage, context)`) des qu'un controle porte une erreur. Enveloppee
+        // dans un `computed`, l'appel levait une TypeError avalee par `errorCaptured`,
+        // et le champ en defaut n'etait jamais signale.
+        translate: this.createTranslator('fr'),
       }
     },
     getSchemaValidations(): any[] {
@@ -205,7 +231,7 @@ export default defineNuxtComponent({
         : hasSchemaScopedValidation
           ? rootValidations[this.schemaName]
           : isFlatValidationMap
-            ? rootValidations
+            ? this.scopeFlatValidations(rootValidations, this.schemaName)
             : {}
 
       const entries: Array<{ path: string; message: string }> = []

apps/web/src/components/pages/identities/schemas-bar.vue

@@ -171,7 +171,18 @@ export default defineNuxtComponent({
         return false
       }
 
-      return hasValidation(this.validations?.[tab]) ? 'red' : false
+      // Format imbrique (`{ people: { uid: '...' } }`) renvoye par la validation de schema.
+      if (hasValidation(this.validations?.[tab])) return 'red'
+
+      // Format a plat a cles pointees (`{ 'inetOrgPerson.cn': '...' }`) renvoye par le DTO :
+      // le nom de l'onglet doit y etre un segment complet du chemin.
+      const suffix = `${tab}.`
+      const matchesTab = Object.entries(this.validations || {}).some(([key, value]) => {
+        const index = key.indexOf(suffix)
+        return (index === 0 || (index > 0 && key[index - 1] === '.')) && hasValidation(value)
+      })
+
+      return matchesTab ? 'red' : false
     },
     addSchema(schema) {
       if (!this.identity.additionalFields) {

apps/web/src/composables/useErrorHandling.ts

@@ -12,7 +12,7 @@ type handleErrorPayload = {
   message?: string
 }
 
-function extractErrorMessage(error: any): string | undefined {
+export function extractErrorMessage(error: any): string | undefined {
   const raw = error?.response?._data?.message ?? error?.data?.message ?? error?.cause?.response?._data?.message ?? error?.message
   if (Array.isArray(raw)) {
     const joined = raw.map((item) => `${item}`.trim()).filter(Boolean).join(', ')
@@ -25,6 +25,59 @@ function extractErrorMessage(error: any): string | undefined {
   return undefined
 }
 
+/**
+ * Recupere la map `validations` d'une reponse API.
+ *
+ * Selon l'appelant (`$http` direct, `useHttp`/`useAsyncData`, erreur re-emise), la charge utile
+ * est accessible via `response._data`, `data`, ou la meme chose sous `cause` : on teste les
+ * quatre emplacements, comme le fait deja `extractErrorMessage`.
+ */
+export function extractValidations(error: any): Record<string, unknown> | undefined {
+  const validations =
+    error?.response?._data?.validations ??
+    error?.data?.validations ??
+    error?.cause?.response?._data?.validations ??
+    error?.cause?.data?.validations
+
+  return validations && typeof validations === 'object' ? validations : undefined
+}
+
+/**
+ * Construit un message d'erreur lisible a partir d'une reponse API :
+ * le `message` renvoye par l'API, complete des `validations` par champ quand elles existent.
+ */
+export function formatApiErrorMessage(error: any, fallback: string): string {
+  const parts: string[] = []
+  const message = extractErrorMessage(error)
+  if (message) parts.push(message)
+
+  const validations = extractValidations(error)
+  if (validations) {
+    for (const [field, detail] of Object.entries(validations)) {
+      if (field === 'message') continue
+      const text = typeof detail === 'string' ? detail : flattenValidationDetail(detail)
+      if (text) parts.push(`${field} : ${text}`)
+    }
+  }
+
+  return parts.length ? parts.join(' - ') : fallback
+}
+
+function flattenValidationDetail(detail: any): string {
+  if (typeof detail === 'string') return detail
+  if (Array.isArray(detail)) return detail.map(flattenValidationDetail).filter(Boolean).join(', ')
+  if (detail && typeof detail === 'object') {
+    return Object.entries(detail)
+      .map(([key, value]) => {
+        const text = flattenValidationDetail(value)
+        return text ? `${key} : ${text}` : ''
+      })
+      .filter(Boolean)
+      .join(', ')
+  }
+  return ''
+}
+
 export function useErrorHandling(): useErrorHandlingReturnType {
   function handleMfaRequiredIfNeeded(error: any): boolean {
     const statusCode = error?.response?._data?.statusCode || error?.data?.statusCode

apps/web/src/pages/identities/table/[_id].vue

@@ -39,6 +39,7 @@ q-card.flex.column.fit.absolute(flat)
 </template>
 
 <script lang="ts">
+import { extractValidations, formatApiErrorMessage } from '~/composables/useErrorHandling'
 import { clone } from 'radash'
 import { IdentityState } from '~/constants/enums'
 import { useIdentityStateStore } from '~/stores/identityState'
@@ -71,7 +72,9 @@ export default defineNuxtComponent({
 
     if (NewTargetId === $route.params._id) {
       return {
-        identity: {
+        // `ref` obligatoire : un objet litteral renvoye par `setup` n'est pas reactif,
+        // les erreurs de validation posees sur `additionalFields.validations` ne seraient pas affichees.
+        identity: ref({
           state: IdentityState.TO_CREATE,
           inetOrgPerson: {
             mail: '',
@@ -80,8 +83,9 @@ export default defineNuxtComponent({
           additionalFields: {
             attributes: {},
             objectClasses: [] as string[],
+            validations: {},
           },
-        } as Identity,
+        } as Identity),
         originTarget,
         refresh: () => Promise.resolve(),
         toPathWithQueries,
@@ -168,14 +172,17 @@ export default defineNuxtComponent({
         this.$emit('refresh')
       } catch (error: any) {
         this.$q.notify({
-          message: "Erreur lors de la sauvegarde de l'identité",
+          message: formatApiErrorMessage(error, "Erreur lors de la sauvegarde de l'identité"),
           color: 'negative',
           position: 'top-right',
           icon: 'mdi-alert-circle-outline',
+          multiLine: true,
+          timeout: 10000,
         })
         console.error('Erreur lors de la sauvegarde de l identité:', error)
 
-        if (error?.response?._data?.validations) {
+        const validations = extractValidations(error)
+        if (validations) {
           if (!this.identity.additionalFields) {
             this.identity.additionalFields = {
               attributes: {},
@@ -184,13 +191,7 @@ export default defineNuxtComponent({
             }
           }
 
-          if (!this.identity.additionalFields.validations) {
-            this.identity.additionalFields.validations = {}
-          }
-
-          this.identity.additionalFields.validations = {
-            ...error.response._data.validations,
-          }
+          this.identity.additionalFields.validations = { ...validations }
         }
       }
     },

apps/web/src/pages/identities/table/[_id]/index.vue

@@ -2,7 +2,7 @@
   .column.no-wrap.full-height.relative
     .sesame-sticky-space
     q-toolbar.bg-transparent.q-pr-none.sesame-sticky-bar
-      q-btn.sesame.infinite.animated.flash(size="sm" padding="xs" color="negative" @click="validationsModal = true" v-if="!isNew && hasValidations" outline)
+      q-btn.sesame.infinite.animated.flash(size="sm" padding="xs" color="negative" @click="validationsModal = true" v-if="hasValidations" outline)
         q-tooltip.text-body2(slot="trigger") Afficher les erreurs
         q-icon.text-negative(name='mdi-alert-box')
       q-dialog(v-model="validationsModal")
@@ -12,10 +12,10 @@
             div.text-h6.q-ml-md Erreurs de validation
           q-card-section.q-py-sm
             q-list(separator)
-              q-item(v-for="field in Object.keys(validations)" :key="field")
+              q-item(v-for="entry in validationEntries" :key="entry.field")
                 q-item-section.text-negative
-                  q-item-label {{ field }}
-                  q-item-label(v-for='f in validations[field]' caption) - {{ f }}
+                  q-item-label {{ entry.field }}
+                  q-item-label(v-for='message in entry.messages' :key="message" caption) - {{ message }}
           q-card-actions(align="right")
             q-btn(flat label="Fermer" color="primary" v-close-popup)
       q-toolbar-title.gt-xs Fiche identité
@@ -290,15 +290,27 @@ export default defineNuxtComponent({
         employeeType: this.identity?.inetOrgPerson?.employeeType,
       }
     },
-    hasValidations() {
-      if (this.validations) {
-        for (const field in this.validations) {
-          if (Object.keys(this.validations[field]).length > 0) {
-            return true
-          }
+    /**
+     * Aplatit les deux formes de `validations` renvoyees par l'API :
+     * une map imbriquee par classe d'objet (`{ people: { uid: '...' } }`) issue de la validation
+     * de schema, ou une map a plat a cles pointees (`{ 'inetOrgPerson.cn': '...' }`) issue du DTO.
+     */
+    validationEntries(): Array<{ field: string; messages: string[] }> {
+      const flatten = (value: unknown): string[] => {
+        if (typeof value === 'string') return value.trim() ? [value.trim()] : []
+        if (Array.isArray(value)) return value.flatMap(flatten)
+        if (value && typeof value === 'object') {
+          return Object.entries(value).flatMap(([key, child]) => flatten(child).map((message) => `${key} : ${message}`))
         }
+        return []
       }
-      return false
+
+      return Object.entries(this.validations)
+        .map(([field, value]) => ({ field, messages: flatten(value) }))
+        .filter((entry) => entry.messages.length > 0)
+    },
+    hasValidations() {
+      return this.validationEntries.length > 0
     },
     getStatusColor() {
       if (this.identity.dataStatus === 1) {

apps/web/src/pages/identities/trash/[_id].vue

@@ -70,6 +70,7 @@ q-card.flex.column.fit.absolute(flat)
 </template>
 
 <script lang="ts">
+import { extractValidations, formatApiErrorMessage } from '~/composables/useErrorHandling'
 import { useIdentityStateStore } from '~/stores/identityState'
 
 export default defineNuxtComponent({
@@ -179,21 +180,18 @@ export default defineNuxtComponent({
         this.$emit('refresh')
       } catch (error: any) {
         this.$q.notify({
-          message: "Erreur lors de la sauvegarde de l'identité",
+          message: formatApiErrorMessage(error, "Erreur lors de la sauvegarde de l'identité"),
           color: 'negative',
           position: 'top-right',
           icon: 'mdi-alert-circle-outline',
+          multiLine: true,
+          timeout: 10000,
         })
         console.error('Erreur lors de la sauvegarde de l identité:', error)
 
-        if (error?.response?._data?.validations) {
-          if (!this.identity?.additionalFields?.validations) {
-            this.identity.additionalFields.validations = {}
-          }
-
-          for (const v in error.response._data.validations) {
-            this.identity.additionalFields.validations[v] = error.response._data.validations[v]
-          }
+        const validations = extractValidations(error)
+        if (validations && this.identity.additionalFields) {
+          this.identity.additionalFields.validations = { ...validations }
         }
       }
     },

apps/web/src/server/routes/config/ui.get.ts

@@ -60,6 +60,16 @@ async function readYamlFile(filePath: string): Promise<Record<string, unknown>>
   }
 }
 
+/**
+ * Lit un fichier de `./config`, avec repli sur `./default` : en dev local
+ * `scripts/checkinstall.sh` (qui peuple `./config`) n'est pas exécuté.
+ */
+async function readConfigYamlFile(fileName: string): Promise<Record<string, unknown>> {
+  const fromConfig = await readYamlFile(`./config/${fileName}`)
+  if (Object.keys(fromConfig).length > 0) return fromConfig
+  return readYamlFile(`./default/${fileName}`)
+}
+
 let defaultMenuEntriesJsonGenerated = false
 
 async function ensureDefaultMenuDataJson(): Promise<void> {
@@ -95,9 +105,9 @@ async function ensureDefaultMenuDataJson(): Promise<void> {
 export default defineEventHandler(async () => {
   await ensureDefaultMenuDataJson()
 
-  const menusFile = await readYamlFile('./config/menus.yml')
-  const identitiesColumnsFile = await readYamlFile('./config/identities-columns.yml')
-  const identitiesSearchFieldsFile = await readYamlFile('./config/identities-search-fields.yml')
+  const menusFile = await readConfigYamlFile('menus.yml')
+  const identitiesColumnsFile = await readConfigYamlFile('identities-columns.yml')
+  const identitiesSearchFieldsFile = await readConfigYamlFile('identities-search-fields.yml')
 
   return {
     menus: {