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.

This commit is contained in:
2025-09-12 23:51:52 +02:00
parent 1c0ed9abc8
commit c05d0aad47
12 changed files with 692 additions and 624 deletions

View File

@@ -1,6 +1,6 @@
<template>
<ul class="nav nav-tabs">
<li v-if="allowedTypes.includes('person')" class="nav-item">
<li v-if="containsPerson" class="nav-item">
<a class="nav-link" :class="{ active: isActive('person') }">
<label for="person">
<input
@@ -14,7 +14,7 @@
</label>
</a>
</li>
<li v-if="allowedTypes.includes('thirdparty')" class="nav-item">
<li v-if="containsThirdParty" class="nav-item">
<a class="nav-link" :class="{ active: isActive('thirdparty') }">
<label for="thirdparty">
<input
@@ -31,9 +31,9 @@
</ul>
<div class="my-4">
<on-the-fly-person
<PersonEdit
v-if="type === 'person'"
:action="action"
action="create"
:query="query"
ref="castPerson"
/>
@@ -47,17 +47,26 @@
</div>
</template>
<script setup lang="ts">
import {computed, onMounted, ref} from "vue";
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 {ONTHEFLY_CREATE_PERSON, ONTHEFLY_CREATE_THIRDPARTY, trans,} from "translator";
import {CreatableEntityType} from "ChillPersonAssets/types";
import {CreateComponentConfig} from "ChillMainAssets/types";
import {
ONTHEFLY_CREATE_PERSON,
ONTHEFLY_CREATE_THIRDPARTY,
trans,
} from "translator";
import { CreatableEntityType } from "ChillPersonAssets/types";
import { CreateComponentConfig } from "ChillMainAssets/types";
import PersonEdit from "ChillPersonAssets/vuejs/_components/OnTheFly/PersonEdit.vue";
const props = defineProps<CreateComponentConfig>();
const type = ref<CreatableEntityType| null>(null);
const props = withDefaults(defineProps<CreateComponentConfig>(), {
allowedTypes: ["person", "thirdparty"],
action: "create",
query: "",
});
const type = ref<CreatableEntityType | null>(null);
const radioType = computed<CreatableEntityType| null>({
const radioType = computed<CreatableEntityType | null>({
get: () => type.value,
set: (val: CreatableEntityType | null) => {
type.value = val;
@@ -65,7 +74,10 @@ const radioType = computed<CreatableEntityType| null>({
},
});
type AnyComponentInstance = InstanceType<typeof OnTheFlyPerson> | InstanceType<typeof OnTheFlyThirdparty> | null;
type AnyComponentInstance =
| InstanceType<typeof OnTheFlyPerson>
| InstanceType<typeof OnTheFlyThirdparty>
| null;
const castPerson = ref<AnyComponentInstance>(null);
const castThirdparty = ref<AnyComponentInstance>(null);
@@ -81,6 +93,14 @@ function isActive(tab: CreatableEntityType) {
return type.value === tab;
}
const containsThirdParty = computed<boolean>(() =>
props.allowedTypes.includes("thirdparty"),
);
const containsPerson = computed<boolean>(() => {
console.log(props.allowedTypes);
return props.allowedTypes.includes("person");
});
// 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 {