Refactor person creation workflow: Introduce PersonEdit component and integrate it across Create, Person.vue, and modals for improved modularity. Update type definitions and API methods for consistency.

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -3,7 +3,7 @@
     class="btn"
     :class="getClassButton"
     :title="buttonTitle"
-    @click="openModal"
+    @click="openModalChoose"
   >
     <span v-if="displayTextButton">{{ buttonTitle }}</span>
   </a>
@@ -16,22 +16,28 @@
     :selected="selected"
     :modal-dialog-class="'modal-dialog-scrollable modal-xl'"
     :allow-create="props.allowCreate"
-    @close="closeModal"
-    @addNewPersons="payload => emit('addNewPersons', payload)"
+    @close="closeModalChoose"
+    @addNewPersons="(payload) => emit('addNewPersons', payload)"
     @onAskForCreate="onAskForCreate"
   />
 
   <CreateModal
     v-if="creatableEntityTypes.length > 0 && showModalCreate"
     :allowed-types="creatableEntityTypes"
-    ></CreateModal>
+    @close="closeModalCreate"
+  ></CreateModal>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import PersonChooseModal from './AddPersons/PersonChooseModal.vue';
-import type {Suggestion, SearchOptions, CreatableEntityType, EntityType} from 'ChillPersonAssets/types';
-import {marked} from "marked";
+import { ref, computed } from "vue";
+import PersonChooseModal from "./AddPersons/PersonChooseModal.vue";
+import type {
+  Suggestion,
+  SearchOptions,
+  CreatableEntityType,
+  EntityType,
+} from "ChillPersonAssets/types";
+import { marked } from "marked";
 import options = marked.options;
 import CreateModal from "ChillMainAssets/vuejs/OnTheFly/components/CreateModal.vue";
 
@@ -42,7 +48,7 @@ interface AddPersonsConfig {
   modalTitle: string;
   options: SearchOptions;
   allowCreate?: boolean;
-  types?: EntityType|undefined;
+  types?: EntityType | undefined;
 }
 
 const props = withDefaults(defineProps<AddPersonsConfig>(), {
@@ -52,43 +58,54 @@ const props = withDefaults(defineProps<AddPersonsConfig>(), {
   types: () => undefined,
 });
 
-const emit = defineEmits<{
-  (e: 'addNewPersons', payload: { selected: Suggestion[] }): void;
-}>();
+const emit =
+  defineEmits<
+    (e: "addNewPersons", payload: { selected: Suggestion[] }) => void
+  >();
 
 const showModalChoose = ref(false);
 const showModalCreate = ref(false);
 
 const getClassButton = computed(() => {
-  const size = props.options?.button?.size ?? '';
-  const type = props.options?.button?.type ?? 'btn-create';
+  const size = props.options?.button?.size ?? "";
+  const type = props.options?.button?.type ?? "btn-create";
   return size ? `${size} ${type}` : type;
 });
 
 const displayTextButton = computed(() =>
-  props.options?.button?.display !== undefined ? props.options.button.display : true,
+  props.options?.button?.display !== undefined
+    ? props.options.button.display
+    : true,
 );
 
 const creatableEntityTypes = computed<CreatableEntityType[]>(() => {
-  if (typeof props.options.type !== 'undefined') {
-    return props.options.type.filter((e: EntityType) => e === 'thirdparty' || e === 'person');
+  if (typeof props.options.type !== "undefined") {
+    return props.options.type.filter(
+      (e: EntityType) => e === "thirdparty" || e === "person",
+    );
   }
-  return props.type.filter((e: EntityType) => e === 'thirdparty' || e === 'person');
-})
+  return props.types.filter(
+    (e: EntityType) => e === "thirdparty" || e === "person",
+  );
+});
 
-function onAskForCreate({query}: {query: string}) {
-  console.log('onAskForCreate', query);
+function onAskForCreate({ query }: { query: string }) {
+  console.log("onAskForCreate", query);
   showModalChoose.value = false;
   showModalCreate.value = true;
 }
 
-function openModal() {
+function openModalChoose() {
   showModalChoose.value = true;
 }
 
-function closeModal() {
+function closeModalChoose() {
   showModalChoose.value = false;
 }
+
+function closeModalCreate() {
+  showModalCreate.value = false;
+}
 </script>
 
 <style lang="scss" scoped>