Introduce edit functionality for PersonEdit and refactor OnTheFly components for improved modularity.

- Added support for editing a person entity in `PersonEdit.vue` with proper data initialization and API integration.
- Refactored `OnTheFly.vue` to dynamically render components based on the action (`show`, `edit`, etc.).
- Introduced `personToWritePerson` conversion logic for mapping `Person` to `PersonWrite` structure.
- Enhanced template conditions and loading states for `PersonEdit`.
- Updated API with `editPerson` function and adjusted related types for consistency.

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

@@ -30,7 +30,7 @@
         </h3>
       </template>
 
-      <template #body v-if="type === 'person' && action !== 'addContact'">
+      <template #body v-if="type === 'person' && action === 'show'">
         <on-the-fly-person
           :id="id"
           :type="type"
@@ -45,6 +45,15 @@
         </div>
       </template>
 
+      <template #body v-else-if="type === 'person' && action === 'edit'">
+        <PersonEdit
+          :id="id"
+          :action="'edit'"
+          :query="''"
+          ref="castEditPerson"
+          ></PersonEdit>
+      </template>
+
       <template #body v-else-if="type === 'thirdparty'">
         <on-the-fly-thirdparty
           :id="id"
@@ -80,17 +89,21 @@
 
       <template #footer>
         <a
+          v-if="action === 'show'"
           :href="buildLocation(id, type)"
           :title="titleMessage"
           class="btn btn-show"
           >{{ buttonMessage }}
         </a>
+        <a v-else class="btn btn-save" @click="saveAction">
+          {{ trans(ACTION_SAVE) }}
+        </a>
       </template>
     </modal>
   </teleport>
 </template>
 <script setup lang="ts">
-import { ref, computed, defineEmits, defineProps } from "vue";
+import {ref, computed, defineEmits, defineProps, useTemplateRef} from "vue";
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import OnTheFlyCreate from "./Create.vue";
 import OnTheFlyPerson from "ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue";
@@ -100,6 +113,7 @@ import {
   ACTION_SHOW,
   ACTION_EDIT,
   ACTION_CREATE,
+  ACTION_SAVE,
   ONTHEFLY_CREATE_TITLE_DEFAULT,
   ONTHEFLY_CREATE_TITLE_PERSON,
   ONTHEFLY_CREATE_TITLE_THIRDPARTY,
@@ -116,6 +130,7 @@ import {
   THIRDPARTY_ADDCONTACT,
   THIRDPARTY_ADDCONTACT_TITLE,
 } from "translator";
+import PersonEdit from "ChillPersonAssets/vuejs/_components/OnTheFly/PersonEdit.vue";
 
 // Types
 type EntityType = "person" | "thirdparty";
@@ -153,6 +168,9 @@ const emit = defineEmits<{
   (e: "saveFormOnTheFly", payload: { type: string | undefined; data: any }): void;
 }>();
 
+type castEditPersonType = InstanceType<typeof PersonEdit>;
+const castEditPerson = useTemplateRef<castEditPersonType>('castEditPerson')
+
 const modal = ref<{ showModal: boolean; modalDialogClass: string }>({
   showModal: false,
   modalDialogClass: "modal-dialog-scrollable modal-xl",
@@ -287,6 +305,15 @@ function buildLocation(id: string | number | undefined, type: EntityType | undef
   return undefined;
 }
 
+async function saveAction() {
+  if (props.type === "person") {
+    const person = await castEditPerson.value?.postPerson();
+    if (null !== person) {
+      emit("saveFormOnTheFly", {type: props.type, data: person})
+    }
+  }
+}
+
 defineExpose({
   openModal,
   closeModal,