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

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

@@ -1,5 +1,6 @@
-import { GenericDoc } from "ChillDocStoreAssets/types/generic_doc";
-import { StoredObject, StoredObjectStatus } from "ChillDocStoreAssets/types";
+import {GenericDoc} from "ChillDocStoreAssets/types/generic_doc";
+import {StoredObject, StoredObjectStatus} from "ChillDocStoreAssets/types";
+import {CreatableEntityType} from "ChillPersonAssets/types";
 
 export interface DateTime {
   datetime: string;
@@ -278,3 +279,12 @@ export interface addNewEntities {
   selected: Selected[];
   modal: Modal;
 }
+
+/**
+ * Configuration for the CreateModal and Create component
+ */
+export interface CreateComponentConfig {
+    action?: string;
+    allowedTypes: CreatableEntityType[];
+    query?: string;
+}

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

@@ -46,34 +46,29 @@
     />
   </div>
 </template>
-<script setup>
-import { ref, computed, onMounted } from "vue";
+<script setup lang="ts">
+import {computed, onMounted, ref} from "vue";
 import OnTheFlyPerson from "ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue";
 import OnTheFlyThirdparty from "ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue";
-import {
-  trans,
-  ONTHEFLY_CREATE_PERSON,
-  ONTHEFLY_CREATE_THIRDPARTY,
-} from "translator";
+import {ONTHEFLY_CREATE_PERSON, ONTHEFLY_CREATE_THIRDPARTY, trans,} from "translator";
+import {CreatableEntityType} from "ChillPersonAssets/types";
+import {CreateComponentConfig} from "ChillMainAssets/types";
 
-const props = defineProps({
-  action: String,
-  allowedTypes: Array,
-  query: String,
-});
+const props = defineProps<CreateComponentConfig>();
+const type = ref<CreatableEntityType| null>(null);
 
-const type = ref(null);
-
-const radioType = computed({
+const radioType = computed<CreatableEntityType| null>({
   get: () => type.value,
-  set: (val) => {
+  set: (val: CreatableEntityType | null) => {
     type.value = val;
     console.log("## type:", val, ", action:", props.action);
   },
 });
 
-const castPerson = ref(null);
-const castThirdparty = ref(null);
+type AnyComponentInstance = InstanceType<typeof OnTheFlyPerson> | InstanceType<typeof OnTheFlyThirdparty> | null;
+
+const castPerson = ref<AnyComponentInstance>(null);
+const castThirdparty = ref<AnyComponentInstance>(null);
 
 onMounted(() => {
   type.value =
@@ -82,22 +77,27 @@ onMounted(() => {
       : "person";
 });
 
-function isActive(tab) {
+function isActive(tab: CreatableEntityType) {
   return type.value === tab;
 }
 
-function castDataByType() {
+// Types for data structures coming from child components are not declared in TS yet.
+// We conservatively type them as any to preserve runtime behavior while enabling TS in this component.
+function castDataByType(): any {
   switch (radioType.value) {
     case "person":
-      return castPerson.value.$data.person;
-    case "thirdparty":
-      let data = castThirdparty.value.$data.thirdparty;
-      if (data.address !== undefined && data.address !== null) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return (castPerson.value as any)?.$data?.person;
+    case "thirdparty": {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let data: any = (castThirdparty.value as any)?.$data?.thirdparty;
+      if (data && data.address !== undefined && data.address !== null) {
         data.address = { id: data.address.address_id };
-      } else {
+      } else if (data) {
         data.address = null;
       }
       return data;
+    }
     default:
       throw Error("Invalid type of entity");
   }

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
+import Create from "ChillMainAssets/vuejs/OnTheFly/components/Create.vue";
+import {CreateComponentConfig} from "ChillMainAssets/types";
+
+const props = defineProps<CreateComponentConfig>();
+</script>
+
+<template>
+  <teleport to="body">
+    <modal
+      @close="() => emit('close')"
+      :modal-dialog-class="modalDialogClass"
+      :hide-footer="false"
+    >
+      <template #header>
+        <h3 class="modal-title">{{ modalTitle }}</h3>
+      </template>
+      <template #body-head>
+        <div class="modal-body">
+          <Create :allowed-types="props.allowed-types" :action="props.action" :query="props.query"></Create>
+        </div>
+      </template>
+
+      </modal>
+    </teleport>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>