Refactor Person.vue and ThirdParty.vue to enhance data loading and improve conditional rendering.

- Added `loadData` method in `Person.vue` to handle person data fetching based on props.
- Improved `ThirdParty.vue` by refining conditional checks and updating prop types for better maintainability.

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -48,4 +48,22 @@ const props = withDefaults(defineProps<Props>(), {query: ""});
 
 const person = ref<Person | null>(null);
 
+function loadData(): void {
+  if (props.id === undefined || props.id === null) {
+    return;
+  }
+  const idNum = props.id;
+  if (!Number.isFinite(idNum)) {
+    return;
+  }
+  getPerson(idNum as number).then((p) => {
+    person.value = p;
+  });
+}
+
+onMounted(() => {
+  if (props.action !== "create") {
+    loadData();
+  }
+});
 </script>

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="action === 'show'">
+  <div v-if="action === 'show' && thirdparty !== null">
     <div class="flex-table">
       <third-party-render-box
         :thirdparty="thirdparty"
@@ -7,13 +7,9 @@
           addInfo: true,
           addEntity: true,
           entityDisplayLong: true,
-          addAltNames: true,
           addId: true,
           addLink: false,
-          addAge: false,
           hLevel: 3,
-          addCenter: true,
-          addNoData: true,
           isMultiline: true,
         }"
       />
@@ -29,23 +25,36 @@
 
 </template>
 
-<script setup>
-import { reactive, onMounted } from 'vue'
+<script setup lang="ts">
+import {onMounted, ref} from 'vue'
 import ThirdPartyRenderBox from '../Entity/ThirdPartyRenderBox.vue'
 import ThirdPartyEdit from './ThirdPartyEdit.vue'
 import { getThirdparty } from '../../_api/OnTheFly'
+import {Thirdparty, ThirdpartyCompany} from '../../../types'
 
-const props = defineProps(['id', 'type', 'action', 'query', 'parent'])
-
-const thirdparty = reactive({
+type ThirdPartyProp = {
+  id: number,
   type: 'thirdparty',
-})
+  action: 'show'|'edit'|'create',
+  parent?: null,
+}
+type ThirdPartyAddContact = {
+  id: number,
+  type: 'thirdparty',
+  action: 'addContact',
+  parent: ThirdpartyCompany,
+}
 
-function loadData() {
-  if (!props.id) return Promise.resolve()
-  return getThirdparty(props.id).then((tp) => {
-    Object.assign(thirdparty, tp)
-  })
+type ThirdPartyProps = ThirdPartyProp|ThirdPartyAddContact;
+
+const props = withDefaults(defineProps<ThirdPartyProps>(), {
+  parent: null,
+});
+
+const thirdparty = ref<Thirdparty|null>(null);
+
+async function loadData() {
+  thirdparty.value = await getThirdparty(props.id);
 }
 
 onMounted(() => {