Enhance entity creation: Add CreateModal and integrate with AddPersons workflow.

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

@@ -9,22 +9,31 @@
   </a>
 
   <person-choose-modal
-    v-if="showModal"
-    :show="showModal"
+    v-if="showModalChoose"
     :modal-title="modalTitle"
     :options="options"
     :suggested="suggested"
     :selected="selected"
     :modal-dialog-class="'modal-dialog-scrollable modal-xl'"
+    :allow-create="props.allowCreate"
     @close="closeModal"
-    @addNewPersons="payload => $emit('addNewPersons', payload)"
+    @addNewPersons="payload => emit('addNewPersons', payload)"
+    @onAskForCreate="onAskForCreate"
   />
+
+  <CreateModal
+    v-if="creatableEntityTypes.length > 0 && showModalCreate"
+    :allowed-types="creatableEntityTypes"
+    ></CreateModal>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import PersonChooseModal from './AddPersons/PersonChooseModal.vue';
-import type { Suggestion, SearchOptions } from 'ChillPersonAssets/types';
+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";
 
 interface AddPersonsConfig {
   suggested?: Suggestion[];
@@ -33,19 +42,22 @@ interface AddPersonsConfig {
   modalTitle: string;
   options: SearchOptions;
   allowCreate?: boolean;
+  types?: EntityType|undefined;
 }
 
 const props = withDefaults(defineProps<AddPersonsConfig>(), {
   suggested: () => [],
   selected: () => [],
   allowCreate: () => true,
+  types: () => undefined,
 });
 
 const emit = defineEmits<{
   (e: 'addNewPersons', payload: { selected: Suggestion[] }): void;
 }>();
 
-const showModal = ref(false);
+const showModalChoose = ref(false);
+const showModalCreate = ref(false);
 
 const getClassButton = computed(() => {
   const size = props.options?.button?.size ?? '';
@@ -57,12 +69,25 @@ const displayTextButton = computed(() =>
   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');
+  }
+  return props.type.filter((e: EntityType) => e === 'thirdparty' || e === 'person');
+})
+
+function onAskForCreate({query}: {query: string}) {
+  console.log('onAskForCreate', query);
+  showModalChoose.value = false;
+  showModalCreate.value = true;
+}
+
 function openModal() {
-  showModal.value = true;
+  showModalChoose.value = true;
 }
 
 function closeModal() {
-  showModal.value = false;
+  showModalChoose.value = false;
 }
 </script>