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.

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" &&

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.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);
 
@@ -113,8 +112,6 @@ function save(): void {
 }
 
 defineExpose({ save });
-
-
 </script>
 
 <style lang="css" scoped>

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/CreateModal.vue

@@ -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>

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";

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,
+  );
+};

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,7 +114,11 @@ function closeModalCreate() {
 function onPersonCreated(payload: { person: Person }) {
   console.log("onPersonCreated", payload);
   showModalCreate.value = false;
-  const suggestion = {result: payload.person, relevance: 999999, key: "person"};
+  const suggestion = {
+    result: payload.person,
+    relevance: 999999,
+    key: "person",
+  };
   emit("addNewPersons", { selected: [suggestion] });
 }
 </script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/PersonEdit.vue

@@ -1,13 +1,26 @@
 <template>
   <div>
-    <div class="form-floating mb-3">
+    <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>
+          <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,9 +35,12 @@
       </ul>
     </div>
 
-    <div class="form-floating mb-3">
+    <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)"
@@ -33,6 +49,14 @@
             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">
       <ul class="list-suggest add-items inline">
@@ -46,11 +70,9 @@
       </ul>
     </div>
 
-    <div
-      v-for="(a, i) in config.altNames"
-      :key="a.key"
-      class="form-floating mb-3"
-    >
+    <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"
@@ -60,12 +82,16 @@
           />
           <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"
     >
+      <div class="input-group has-validation">
+        <div class="form-floating">
           <input
             class="form-control form-control-lg"
             type="text"
@@ -73,11 +99,22 @@
             :placeholder="localizeString(worker.label)"
             @input="onIdentifierInput($event, worker.definition_id)"
           />
-      <label :for="'worker_'+worker.definition_id">{{ localizeString(worker.label) }}</label>
+          <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">
+    <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>
@@ -85,14 +122,27 @@
               {{ g.label }}
             </option>
           </select>
-      <label>{{ trans(PERSON_MESSAGES_PERSON_GENDER_TITLE) }}</label>
+          <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"
+    <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"
           >
-      <select class="form-select form-select-lg" id="center" v-model="center">
             <option selected disabled>
               {{ trans(PERSON_MESSAGES_PERSON_CENTER_PLACEHOLDER) }}
             </option>
@@ -102,8 +152,18 @@
           </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">
+    <div class="mb-3">
+      <div class="input-group has-validation">
+        <div class="form-floating">
           <select
             class="form-select form-select-lg"
             id="civility"
@@ -118,11 +178,21 @@
           </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">
+    <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"
@@ -131,11 +201,21 @@
             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">
+    <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"
@@ -144,11 +224,21 @@
             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">
+    <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"
@@ -157,6 +247,14 @@
             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">
       <input
@@ -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,9 +350,8 @@ 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 });
 
@@ -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;
@@ -391,7 +496,10 @@ const queryItems = computed(() => {
     return null;
   }
 
-    const firstNameWords = (person.firstName || "").trim().toLowerCase().split(" ");
+  const firstNameWords = (person.firstName || "")
+    .trim()
+    .toLowerCase()
+    .split(" ");
   const lastNameWords = (person.lastName || "").trim().toLowerCase().split(" ");
 
   return words
@@ -399,25 +507,6 @@ const queryItems = computed(() => {
     .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');
+  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>