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

src/Bundle/ChillPersonBundle/Resources/public/types.ts

@@ -328,11 +328,20 @@ export interface AccompanyingPeriodWorkEvaluationDocument {
   workflows: object[];
 }
 
-export type EntityType =
+/**
+ * Entity types that a user can create
+ */
+export type CreatableEntityType =
+  | "person"
+  | "thirdparty";
+
+
+/**
+ * Entities that can be search and selected by a user
+ */
+export type EntityType = CreatableEntityType
   | "user_group"
   | "user"
-  | "person"
-  | "thirdparty"
   | "household";
 
 export type Entities = (UserGroup | User | Person | Thirdparty | Household) & {
@@ -370,7 +379,8 @@ export interface Search {
 
 export interface SearchOptions {
   uniq: boolean;
-  type: string[];
+  /** @deprecated */
+  type: EntityType[];
   priority: number | null;
   button: {
     size: string;

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>
 

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

@@ -1,10 +1,8 @@
 <template>
   <teleport to="body">
     <modal
-      v-if="show"
       @close="() => emit('close')"
       :modal-dialog-class="modalDialogClass"
-      :show="show"
       :hide-footer="false"
     >
       <template #header>
@@ -58,7 +56,6 @@
             :item="item"
             :search="search"
             :type="checkUniq"
-            @save-form-on-the-fly="saveFormOnTheFly"
             @new-prior-suggestion="newPriorSuggestion"
             @update-selected="updateSelected"
           />
@@ -84,6 +81,7 @@
               @save-form-on-the-fly="saveFormOnTheFly"
               ref="onTheFly"
             />
+            -->
           </div>
         </div>
       </template>
@@ -102,7 +100,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, nextTick, watch } from 'vue';
+import {ref, reactive, computed, nextTick, watch, onMounted} from 'vue';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
 import PersonSuggestion from './PersonSuggestion.vue';
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
@@ -130,7 +128,6 @@ import type {
 type Result = OriginalResult & { addressId?: number };
 
 interface Props {
-  show: boolean;
   modalTitle: string;
   options: SearchOptions;
   suggested?: Suggestion[];
@@ -148,22 +145,19 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   (e: 'close'): void;
+  /** @deprecated use 'onPickEntities' */
   (e: 'addNewPersons', payload: { selected: Suggestion[] }): void;
   (e: 'onPickEntities', payload: { selected: EntitiesOrMe[] }): void;
+  (e: 'onAskForCreate', payload: { query: string }): void;
 }>();
 
 const searchRef = ref<HTMLInputElement | null>(null);
 const onTheFly = ref<InstanceType<typeof OnTheFly> | null>(null);
 
-watch(
-  () => props.show,
-  async (visible) => {
-    if (visible) {
-      await nextTick();
-      searchRef.value?.focus();
-    }
-  }
-);
+onMounted(() => {
+  // give the focus on the search bar
+  searchRef.value?.focus();
+});
 
 const search = reactive({
   query: '' as string,
@@ -318,6 +312,8 @@ function pickEntities(): void {
   emit('close');
 }
 
+/*
+TODO remove this
 async function saveFormOnTheFly({ type, data }: { type: string; data: Result }) {
   try {
     if (type === 'person') {
@@ -362,6 +358,8 @@ async function saveFormOnTheFly({ type, data }: { type: string; data: Result })
   }
 }
 
+ */
+
 defineExpose({ resetSearch });
 </script>