From c19206be0caaf3d6b99fb8c2d385dbac68e32596 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Wed, 17 Sep 2025 20:21:50 +0200
Subject: [PATCH] Enhance validation in `PersonEdit`: Introduce
 `hasValidationError` and `validationError` helpers for form inputs. Improve
 error feedback for fields such as `firstName`, `lastName`, `gender`, and
 others. Refactor `postPerson` to handle validation exceptions and map errors
 to specific fields. Update related methods, styles, and API error type
 definitions.

---
 .../Resources/public/lib/api/apiMethods.ts    |   4 +-
 .../vuejs/OnTheFly/components/Create.vue      |  11 +-
 .../vuejs/OnTheFly/components/CreateModal.vue |  17 +-
 .../Resources/public/types.ts                 |   6 +-
 .../Resources/public/vuejs/_api/OnTheFly.ts   |  55 ++-
 .../public/vuejs/_components/AddPersons.vue   |  11 +-
 .../vuejs/_components/OnTheFly/PersonEdit.vue | 434 +++++++++++-------
 7 files changed, 355 insertions(+), 183 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts
index 36645d51b..79927cc4d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts
@@ -117,9 +117,9 @@ export class ValidationException<
  * Check that the exception is a ValidationExceptionInterface
  * @param x
  */
-export function isValidationException(
+export function isValidationException<M extends Record<string, Record<string, unknown>>>(
   x: unknown,
-): x is ValidationExceptionInterface<Record<string, Record<string, unknown>>> {
+): x is ValidationExceptionInterface<M> {
   return (
     x instanceof ValidationException ||
     (typeof x === "object" &&
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
index ec94b2d88..ca88afb25 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
@@ -56,7 +56,7 @@ import {
   ONTHEFLY_CREATE_THIRDPARTY,
   trans,
 } from "translator";
-import {CreatableEntityType, Person} from "ChillPersonAssets/types";
+import { CreatableEntityType, Person } from "ChillPersonAssets/types";
 import { CreateComponentConfig } from "ChillMainAssets/types";
 import PersonEdit from "ChillPersonAssets/vuejs/_components/OnTheFly/PersonEdit.vue";
 
@@ -66,9 +66,8 @@ const props = withDefaults(defineProps<CreateComponentConfig>(), {
   query: "",
 });
 
-const emit = defineEmits<{
-  (e: "onPersonCreated", payload: { person: Person }): void;
-}>();
+const emit =
+  defineEmits<(e: "onPersonCreated", payload: { person: Person }) => void>();
 
 const type = ref<CreatableEntityType | null>(null);
 
@@ -112,9 +111,7 @@ function save(): void {
   castPerson.value.postPerson();
 }
 
-defineExpose({save});
-
-
+defineExpose({ save });
 </script>
 
 <style lang="css" scoped>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/CreateModal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/CreateModal.vue
index e83db6caf..c48bbc83f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/CreateModal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/CreateModal.vue
@@ -2,9 +2,9 @@
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import Create from "ChillMainAssets/vuejs/OnTheFly/components/Create.vue";
 import { CreateComponentConfig } from "ChillMainAssets/types";
-import {trans, SAVE} from "translator";
-import {useTemplateRef} from "vue";
-import {Person} from "ChillPersonAssets/types";
+import { trans, SAVE } from "translator";
+import { useTemplateRef } from "vue";
+import { Person } from "ChillPersonAssets/types";
 
 const emit = defineEmits<{
   (e: "onPersonCreated", payload: { person: Person }): void;
@@ -14,17 +14,16 @@ const emit = defineEmits<{
 const props = defineProps<CreateComponentConfig>();
 const modalDialogClass = { "modal-xl": true, "modal-scrollable": true };
 
-type CreateComponentType = InstanceType<typeof Create>
+type CreateComponentType = InstanceType<typeof Create>;
 
 const create = useTemplateRef<CreateComponentType>("create");
 
 function save(): void {
-  console.log('save from CreateModal');
+  console.log("save from CreateModal");
   create.value?.save();
 }
 
-defineExpose({save})
-
+defineExpose({ save });
 </script>
 
 <template>
@@ -49,7 +48,9 @@ defineExpose({save})
         </div>
       </template>
       <template #footer>
-        <button class="btn btn-save" type="button" @click.prevent="save">{{ trans(SAVE) }}</button>
+        <button class="btn btn-save" type="button" @click.prevent="save">
+          {{ trans(SAVE) }}
+        </button>
       </template>
     </modal>
   </teleport>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/types.ts b/src/Bundle/ChillPersonBundle/Resources/public/types.ts
index 923434e10..be7b5d6d6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillPersonBundle/Resources/public/types.ts
@@ -10,7 +10,11 @@ import {
   Scope,
   Job,
   PrivateCommentEmbeddable,
-  TranslatableString, DateTimeCreate, SetGender, SetCenter, SetCivility,
+  TranslatableString,
+  DateTimeCreate,
+  SetGender,
+  SetCenter,
+  SetCivility,
 } from "ChillMainAssets/types";
 import { StoredObject } from "ChillDocStoreAssets/types";
 import { Thirdparty } from "../../../ChillThirdPartyBundle/Resources/public/types";
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.ts b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.ts
index 25a6f112b..86f7d266a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.ts
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.ts
@@ -1,6 +1,11 @@
 import { fetchResults, makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import { Center, Civility, Gender } from "ChillMainAssets/types";
-import {AltName, Person, PersonIdentifierWorker, PersonWrite} from "ChillPersonAssets/types";
+import {
+  AltName,
+  Person,
+  PersonIdentifierWorker,
+  PersonWrite,
+} from "ChillPersonAssets/types";
 import person from "ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue";
 
 /*
@@ -30,12 +35,48 @@ export const getCivilities = async (): Promise<Civility[]> =>
 export const getGenders = async (): Promise<Gender[]> =>
   fetchResults("/api/1.0/main/gender.json");
 
-export const getCentersForPersonCreation = async (): Promise<{showCenters: boolean; centers: Center[];}> =>
-  makeFetch("GET", "/api/1.0/person/creation/authorized-centers", null);
+export const getCentersForPersonCreation = async (): Promise<{
+  showCenters: boolean;
+  centers: Center[];
+}> => makeFetch("GET", "/api/1.0/person/creation/authorized-centers", null);
 
-export const getPersonIdentifiers = async (): Promise<PersonIdentifierWorker[]> =>
-  fetchResults("/api/1.0/person/identifiers/workers");
+export const getPersonIdentifiers = async (): Promise<
+  PersonIdentifierWorker[]
+> => fetchResults("/api/1.0/person/identifiers/workers");
 
-export const createPerson = async (person: PersonWrite): Promise<Person> => {
-  return makeFetch("POST", "/api/1.0/person/person.json", person);
+export interface WritePersonViolationMap
+  extends Record<string, Record<string, unknown>> {
+  firstName: {
+    "{{ value }}": string | null;
+  };
+  lastName: {
+    "{{ value }}": string | null;
+  };
+  gender: {
+    "{{ value }}": string | null;
+  };
+  mobilenumber: {
+    "{{ types }}": string; // ex: "mobile number"
+    "{{ value }}": string; // ex: "+33 1 02 03 04 05"
+  };
+  phonenumber: {
+    "{{ types }}": string; // ex: "mobile number"
+    "{{ value }}": string; // ex: "+33 1 02 03 04 05"
+  };
+  email: {
+    "{{ value }}": string | null;
+  };
+  center: {
+    "{{ value }}": string | null;
+  };
+  civility: {
+    "{{ value }}": string | null;
+  };
 }
+export const createPerson = async (person: PersonWrite): Promise<Person> => {
+  return makeFetch<PersonWrite, Person, WritePersonViolationMap>(
+    "POST",
+    "/api/1.0/person/person.json",
+    person,
+  );
+};
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index 2d118c371..fcc6dbc65 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -37,7 +37,8 @@ import type {
   Suggestion,
   SearchOptions,
   CreatableEntityType,
-  EntityType, Person,
+  EntityType,
+  Person,
 } from "ChillPersonAssets/types";
 import { marked } from "marked";
 import options = marked.options;
@@ -113,8 +114,12 @@ function closeModalCreate() {
 function onPersonCreated(payload: { person: Person }) {
   console.log("onPersonCreated", payload);
   showModalCreate.value = false;
-  const suggestion = {result: payload.person, relevance: 999999, key: "person"};
-  emit("addNewPersons", {selected: [suggestion]});
+  const suggestion = {
+    result: payload.person,
+    relevance: 999999,
+    key: "person",
+  };
+  emit("addNewPersons", { selected: [suggestion] });
 }
 </script>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/PersonEdit.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/PersonEdit.vue
index 40b03e4e2..6bd75de8a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/PersonEdit.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/PersonEdit.vue
@@ -1,13 +1,26 @@
 <template>
   <div>
-    <div class="form-floating mb-3">
-      <input
-        class="form-control form-control-lg"
-        id="lastname"
-        v-model="lastName"
-        :placeholder="trans(PERSON_MESSAGES_PERSON_LASTNAME)"
-      />
-      <label for="lastname">{{ trans(PERSON_MESSAGES_PERSON_LASTNAME) }}</label>
+    <div class="mb-3">
+      <div class="input-group has-validation">
+        <div class="form-floating">
+          <input
+            class="form-control form-control-lg"
+            :class="{ 'is-invalid': hasValidationError('lastName') }"
+            id="lastname"
+            v-model="lastName"
+            :placeholder="trans(PERSON_MESSAGES_PERSON_LASTNAME)"
+          />
+          <label for="lastname">{{
+            trans(PERSON_MESSAGES_PERSON_LASTNAME)
+          }}</label>
+        </div>
+      </div>
+      <div
+        v-for="err in validationError('lastName')"
+        class="invalid-feedback was-validated-force"
+      >
+        {{ err }}
+      </div>
     </div>
 
     <div v-if="queryItems">
@@ -22,16 +35,27 @@
       </ul>
     </div>
 
-    <div class="form-floating mb-3">
-      <input
-        class="form-control form-control-lg"
-        id="firstname"
-        v-model="firstName"
-        :placeholder="trans(PERSON_MESSAGES_PERSON_FIRSTNAME)"
-      />
-      <label for="firstname">{{
-        trans(PERSON_MESSAGES_PERSON_FIRSTNAME)
-      }}</label>
+    <div class="mb-3">
+      <div class="input-group has-validation">
+        <div class="form-floating">
+          <input
+            class="form-control form-control-lg"
+            :class="{ 'is-invalid': hasValidationError('firstName') }"
+            id="firstname"
+            v-model="firstName"
+            :placeholder="trans(PERSON_MESSAGES_PERSON_FIRSTNAME)"
+          />
+          <label for="firstname">{{
+            trans(PERSON_MESSAGES_PERSON_FIRSTNAME)
+          }}</label>
+        </div>
+      </div>
+      <div
+        v-for="err in validationError('firstName')"
+        class="invalid-feedback was-validated-force"
+      >
+        {{ err }}
+      </div>
     </div>
 
     <div v-if="queryItems">
@@ -46,116 +70,190 @@
       </ul>
     </div>
 
-    <div
-      v-for="(a, i) in config.altNames"
-      :key="a.key"
-      class="form-floating mb-3"
-    >
-      <input
-        class="form-control form-control-lg"
-        :id="a.key"
-        :name="'label_'+a.key"
-        value=""
-        @input="onAltNameInput($event, a.key)"
-      />
-      <label :for="'label_'+a.key">{{ localizeString(a.labels) }}</label>
+    <div v-for="(a, i) in config.altNames" :key="a.key" class="mb-3">
+      <div class="input-group has-validation">
+        <div class="form-floating">
+          <input
+            class="form-control form-control-lg"
+            :id="a.key"
+            :name="'label_' + a.key"
+            value=""
+            @input="onAltNameInput($event, a.key)"
+          />
+          <label :for="'label_' + a.key">{{ localizeString(a.labels) }}</label>
+        </div>
+      </div>
     </div>
 
     <div
       v-for="worker in config.identifiers"
       :key="worker.definition_id"
-      class="form-floating mb-3"
+      class="mb-3"
     >
-      <input
-        class="form-control form-control-lg"
-        type="text"
-        :name="'worker_'+worker.definition_id"
-        :placeholder="localizeString(worker.label)"
-        @input="onIdentifierInput($event, worker.definition_id)"
-        />
-      <label :for="'worker_'+worker.definition_id">{{ localizeString(worker.label) }}</label>
+      <div class="input-group has-validation">
+        <div class="form-floating">
+          <input
+            class="form-control form-control-lg"
+            type="text"
+            :name="'worker_' + worker.definition_id"
+            :placeholder="localizeString(worker.label)"
+            @input="onIdentifierInput($event, worker.definition_id)"
+          />
+          <label :for="'worker_' + worker.definition_id">{{
+            localizeString(worker.label)
+          }}</label>
+        </div>
+      </div>
     </div>
 
-    <div class="form-floating mb-3">
-      <select class="form-select form-select-lg" id="gender" v-model="gender">
-        <option selected disabled>
-          {{ trans(PERSON_MESSAGES_PERSON_GENDER_PLACEHOLDER) }}
-        </option>
-        <option v-for="g in config.genders" :value="g.id" :key="g.id">
-          {{ g.label }}
-        </option>
-      </select>
-      <label>{{ trans(PERSON_MESSAGES_PERSON_GENDER_TITLE) }}</label>
+    <div class="mb-3">
+      <div class="input-group has-validation">
+        <div class="form-floating">
+          <select
+            class="form-select form-select-lg"
+            :class="{ 'is-invalid': hasValidationError('gender') }"
+            id="gender"
+            v-model="gender"
+          >
+            <option selected disabled>
+              {{ trans(PERSON_MESSAGES_PERSON_GENDER_PLACEHOLDER) }}
+            </option>
+            <option v-for="g in config.genders" :value="g.id" :key="g.id">
+              {{ g.label }}
+            </option>
+          </select>
+          <label for="gender" class="form-label">{{
+            trans(PERSON_MESSAGES_PERSON_GENDER_TITLE)
+          }}</label>
+        </div>
+        <div
+          v-for="err in validationError('gender')"
+          class="invalid-feedback was-validated-force"
+        >
+          {{ err }}
+        </div>
+      </div>
     </div>
 
-    <div
-      class="form-floating mb-3"
-      v-if="showCenters && config.centers.length > 1"
-    >
-      <select class="form-select form-select-lg" id="center" v-model="center">
-        <option selected disabled>
-          {{ trans(PERSON_MESSAGES_PERSON_CENTER_PLACEHOLDER) }}
-        </option>
-        <option v-for="c in config.centers" :value="c" :key="c.id">
-          {{ c.name }}
-        </option>
-      </select>
-      <label>{{ trans(PERSON_MESSAGES_PERSON_CENTER_TITLE) }}</label>
+    <div class="mb-3" v-if="showCenters && config.centers.length > 1">
+      <div class="input-group">
+        <div class="form-floating">
+          <select
+            class="form-select form-select-lg"
+            id="center"
+            v-model="center"
+          >
+            <option selected disabled>
+              {{ trans(PERSON_MESSAGES_PERSON_CENTER_PLACEHOLDER) }}
+            </option>
+            <option v-for="c in config.centers" :value="c" :key="c.id">
+              {{ c.name }}
+            </option>
+          </select>
+          <label>{{ trans(PERSON_MESSAGES_PERSON_CENTER_TITLE) }}</label>
+        </div>
+        <div
+          v-for="err in validationError('center')"
+          class="invalid-feedback was-validated-force"
+        >
+          {{ err }}
+        </div>
+      </div>
     </div>
 
-    <div class="form-floating mb-3">
-      <select
-        class="form-select form-select-lg"
-        id="civility"
-        v-model="civility"
-      >
-        <option selected disabled>
-          {{ trans(PERSON_MESSAGES_PERSON_CIVILITY_PLACEHOLDER) }}
-        </option>
-        <option v-for="c in config.civilities" :value="c.id" :key="c.id">
-          {{ localizeString(c.name) }}
-        </option>
-      </select>
-      <label>{{ trans(PERSON_MESSAGES_PERSON_CIVILITY_TITLE) }}</label>
+    <div class="mb-3">
+      <div class="input-group has-validation">
+        <div class="form-floating">
+          <select
+            class="form-select form-select-lg"
+            id="civility"
+            v-model="civility"
+          >
+            <option selected disabled>
+              {{ trans(PERSON_MESSAGES_PERSON_CIVILITY_PLACEHOLDER) }}
+            </option>
+            <option v-for="c in config.civilities" :value="c.id" :key="c.id">
+              {{ localizeString(c.name) }}
+            </option>
+          </select>
+          <label>{{ trans(PERSON_MESSAGES_PERSON_CIVILITY_TITLE) }}</label>
+        </div>
+        <div
+          v-for="err in validationError('civility')"
+          class="invalid-feedback was-validated-force"
+        >
+          {{ err }}
+        </div>
+      </div>
     </div>
 
-    <div class="input-group mb-3">
-      <span class="input-group-text" id="phonenumber">
-        <i class="fa fa-fw fa-phone"></i>
-      </span>
-      <input
-        class="form-control form-control-lg"
-        v-model="phonenumber"
-        :placeholder="trans(PERSON_MESSAGES_PERSON_PHONENUMBER)"
-        :aria-label="trans(PERSON_MESSAGES_PERSON_PHONENUMBER)"
-        aria-describedby="phonenumber"
-      />
+    <div class="mb-3">
+      <div class="input-group has-validation">
+        <span class="input-group-text" id="phonenumber">
+          <i class="fa fa-fw fa-phone"></i>
+        </span>
+        <div class="form-floating">
+          <input
+            class="form-control form-control-lg"
+            v-model="phonenumber"
+            :placeholder="trans(PERSON_MESSAGES_PERSON_PHONENUMBER)"
+            :aria-label="trans(PERSON_MESSAGES_PERSON_PHONENUMBER)"
+            aria-describedby="phonenumber"
+          />
+        </div>
+        <div
+          v-for="err in validationError('phonenumber')"
+          class="invalid-feedback was-validated-force"
+        >
+          {{ err }}
+        </div>
+      </div>
     </div>
 
-    <div class="input-group mb-3">
-      <span class="input-group-text" id="mobilenumber">
-        <i class="fa fa-fw fa-mobile"></i>
-      </span>
-      <input
-        class="form-control form-control-lg"
-        v-model="mobilenumber"
-        :placeholder="trans(PERSON_MESSAGES_PERSON_MOBILENUMBER)"
-        :aria-label="trans(PERSON_MESSAGES_PERSON_MOBILENUMBER)"
-        aria-describedby="mobilenumber"
-      />
+    <div class="mb-3">
+      <div class="input-group has-validation">
+        <span class="input-group-text" id="mobilenumber">
+          <i class="fa fa-fw fa-mobile"></i>
+        </span>
+        <div class="form-floating">
+          <input
+            class="form-control form-control-lg"
+            v-model="mobilenumber"
+            :placeholder="trans(PERSON_MESSAGES_PERSON_MOBILENUMBER)"
+            :aria-label="trans(PERSON_MESSAGES_PERSON_MOBILENUMBER)"
+            aria-describedby="mobilenumber"
+          />
+        </div>
+        <div
+          v-for="err in validationError('mobilenumber')"
+          class="invalid-feedback was-validated-force"
+        >
+          {{ err }}
+        </div>
+      </div>
     </div>
 
-    <div class="input-group mb-3">
-      <span class="input-group-text" id="email">
-        <i class="fa fa-fw fa-at"></i>
-      </span>
-      <input
-        class="form-control form-control-lg"
-        v-model="email"
-        :placeholder="trans(PERSON_MESSAGES_PERSON_EMAIL)"
-        :aria-label="trans(PERSON_MESSAGES_PERSON_EMAIL)"
-        aria-describedby="email"
-      />
+    <div class="mb-3">
+      <div class="input-group has-validation">
+        <span class="input-group-text" id="email">
+          <i class="fa fa-fw fa-at"></i>
+        </span>
+        <div class="form-floating">
+          <input
+            class="form-control form-control-lg"
+            v-model="email"
+            :placeholder="trans(PERSON_MESSAGES_PERSON_EMAIL)"
+            :aria-label="trans(PERSON_MESSAGES_PERSON_EMAIL)"
+            aria-describedby="email"
+          />
+        </div>
+        <div
+          v-for="err in validationError('email')"
+          class="invalid-feedback was-validated-force"
+        >
+          {{ err }}
+        </div>
+      </div>
     </div>
 
     <div v-if="action === 'create'" class="input-group mb-3 form-check">
@@ -190,6 +288,7 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted } from "vue";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
@@ -200,7 +299,9 @@ import {
   getCivilities,
   getGenders,
   getPerson,
-  getPersonAltNames, getPersonIdentifiers,
+  getPersonAltNames,
+  getPersonIdentifiers,
+  WritePersonViolationMap,
 } from "../../_api/OnTheFly";
 import {
   trans,
@@ -230,9 +331,12 @@ import {
   PersonWrite,
   PersonIdentifierWorker,
   type Suggestion,
-  type EntitiesOrMe
+  type EntitiesOrMe,
 } from "ChillPersonAssets/types";
-
+import {
+  isValidationException,
+  ValidationExceptionInterface,
+} from "ChillMainAssets/lib/api/apiMethods";
 
 interface PersonEditComponentConfig {
   id?: number | null;
@@ -246,11 +350,10 @@ const props = withDefaults(defineProps<PersonEditComponentConfig>(), {
   type: "TODO",
 });
 
-const emit = defineEmits<{
-  (e: "onPersonCreated", payload: { person: Person }): void;
-}>();
+const emit =
+  defineEmits<(e: "onPersonCreated", payload: { person: Person }) => void>();
 
-defineExpose({postPerson});
+defineExpose({ postPerson });
 
 const person = reactive<PersonWrite>({
   type: "person",
@@ -318,7 +421,9 @@ const lastName = computed({
 const gender = computed({
   get: () => (person.gender ? person.gender.id : null),
   set: (value: string | null) => {
-    person.gender = value ? { id: Number.parseInt(value), type: "chill_main_gender" } : null;
+    person.gender = value
+      ? { id: Number.parseInt(value), type: "chill_main_gender" }
+      : null;
   },
 });
 const civility = computed({
@@ -373,7 +478,7 @@ const center = computed({
     if (null !== value) {
       person.center = {
         id: value.id,
-        type: (value).type,
+        type: value.type,
       };
     } else {
       person.center = null;
@@ -385,39 +490,23 @@ const center = computed({
  * Find the query items to display for suggestion
  */
 const queryItems = computed(() => {
-    const words: null|string[] = props.query ? props.query.split(" ") : null;
+  const words: null | string[] = props.query ? props.query.split(" ") : null;
 
-    if (null === words) {
-      return null;
-    }
+  if (null === words) {
+    return null;
+  }
 
-    const firstNameWords = (person.firstName || "").trim().toLowerCase().split(" ");
-    const lastNameWords = (person.lastName || "").trim().toLowerCase().split(" ");
+  const firstNameWords = (person.firstName || "")
+    .trim()
+    .toLowerCase()
+    .split(" ");
+  const lastNameWords = (person.lastName || "").trim().toLowerCase().split(" ");
 
-    return words
-        .filter((word) => !firstNameWords.includes(word.toLowerCase()))
-        .filter((word) => !lastNameWords.includes(word.toLowerCase()));
+  return words
+    .filter((word) => !firstNameWords.includes(word.toLowerCase()))
+    .filter((word) => !lastNameWords.includes(word.toLowerCase()));
 });
 
-/*
-function checkErrors() {
-  errors.value = [];
-  if (person.lastName === "") {
-    errors.value.push("Le nom ne doit pas être vide.");
-  }
-  if (person.firstName === "") {
-    errors.value.push("Le prénom ne doit pas être vide.");
-  }
-  if (!person.gender) {
-    errors.value.push("Le genre doit être renseigné");
-  }
-  if (showCenters.value && person.center === null) {
-    errors.value.push("Le centre doit être renseigné");
-  }
-}
-
- */
-
 async function loadData() {
   if (props.id !== undefined && props.id !== null) {
     const person = await getPerson(props.id);
@@ -429,7 +518,7 @@ function onAltNameInput(event: Event, key: string): void {
   const value = target.value;
   const updateAltNamesKey = person.altNames.findIndex((a) => a.key === key);
   if (-1 === updateAltNamesKey) {
-    person.altNames.push({key, value})
+    person.altNames.push({ key, value });
   } else {
     person.altNames[updateAltNamesKey].value = value;
   }
@@ -438,11 +527,17 @@ function onAltNameInput(event: Event, key: string): void {
 function onIdentifierInput(event: Event, definition_id: number): void {
   const target = event.target as HTMLInputElement;
   const value = target.value;
-  const updateIdentifierKey = person.identifiers.findIndex((w) => w.definition_id === definition_id);
+  const updateIdentifierKey = person.identifiers.findIndex(
+    (w) => w.definition_id === definition_id,
+  );
   if (-1 === updateIdentifierKey) {
-    person.identifiers.push({type: "person_identifier", definition_id, value: { content: value }})
+    person.identifiers.push({
+      type: "person_identifier",
+      definition_id,
+      value: { content: value },
+    });
   } else {
-    person.identifiers[updateIdentifierKey].value = {content: value}
+    person.identifiers[updateIdentifierKey].value = { content: value };
   }
 }
 
@@ -461,15 +556,38 @@ function addQueryItem(field: "lastName" | "firstName", queryItem: string) {
   }
 }
 
+type WritePersonViolationKey = Extract<keyof WritePersonViolationMap, string>;
+const validationErrors = ref<Partial<Record<WritePersonViolationKey, string[]>>>({});
+
+
+function validationError(
+  property: WritePersonViolationKey,
+): string[] {
+  return validationErrors.value[property] ?? [];
+}
+
+function hasValidationError(
+  property: WritePersonViolationKey,
+): boolean {
+  return validationError(property).length > 0;
+}
+
 function submitNewAddress(payload: { addressId: number }) {
   // person.addressId = payload.addressId;
 }
 
 async function postPerson(): Promise<void> {
-  console.log('postPerson');
-  const createdPerson = await createPerson(person);
+  console.log("postPerson");
+  try {
+    const createdPerson = await createPerson(person);
 
-  emit('onPersonCreated', {person: createdPerson});
+    emit("onPersonCreated", { person: createdPerson });
+  } catch (e: unknown) {
+    if (isValidationException<WritePersonViolationMap>(e)) {
+      console.log(e.byProperty);
+      validationErrors.value = e.byProperty;
+    }
+  }
 }
 
 onMounted(() => {
@@ -495,10 +613,16 @@ onMounted(() => {
         // if there is only one center, preselect it
         person.center = {
           id: config.centers[0].id,
-          type: (config.centers[0]).type ?? "center",
+          type: config.centers[0].type ?? "center",
         };
       }
     });
   }
 });
 </script>
+
+<style lang="scss" scoped>
+.was-validated-force {
+  display: block;
+}
+</style>