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

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

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>