Files
chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue

125 lines
3.1 KiB
Vue

<template>
<ul class="nav nav-tabs">
<li v-if="containsPerson" class="nav-item">
<a class="nav-link" :class="{ active: isActive('person') }">
<label for="person">
<input
type="radio"
name="person"
id="person"
v-model="radioType"
value="person"
/>
{{ trans(ONTHEFLY_CREATE_PERSON) }}
</label>
</a>
</li>
<li v-if="containsThirdParty" class="nav-item">
<a class="nav-link" :class="{ active: isActive('thirdparty') }">
<label for="thirdparty">
<input
type="radio"
name="thirdparty"
id="thirdparty"
v-model="radioType"
value="thirdparty"
/>
{{ trans(ONTHEFLY_CREATE_THIRDPARTY) }}
</label>
</a>
</li>
</ul>
<div class="my-4">
<PersonEdit
v-if="type === 'person'"
action="create"
:query="query"
ref="castPerson"
@onPersonCreated="(payload) => emit('onPersonCreated', payload)"
/>
<on-the-fly-thirdparty
v-if="type === 'thirdparty'"
:action="action"
:query="query"
ref="castThirdparty"
/>
</div>
</template>
<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 {
ONTHEFLY_CREATE_PERSON,
ONTHEFLY_CREATE_THIRDPARTY,
trans,
} from "translator";
import {CreatableEntityType, Person} from "ChillPersonAssets/types";
import { CreateComponentConfig } from "ChillMainAssets/types";
import PersonEdit from "ChillPersonAssets/vuejs/_components/OnTheFly/PersonEdit.vue";
const props = withDefaults(defineProps<CreateComponentConfig>(), {
allowedTypes: ["person"],
action: "create",
query: "",
});
const emit = defineEmits<{
(e: "onPersonCreated", payload: { person: Person }): void;
}>();
const type = ref<CreatableEntityType | null>(null);
const radioType = computed<CreatableEntityType | null>({
get: () => type.value,
set: (val: CreatableEntityType | null) => {
type.value = val;
console.log("## type:", val, ", action:", props.action);
},
});
type PersonEditComponent = InstanceType<typeof PersonEdit>;
type AnyComponentInstance =
| InstanceType<typeof OnTheFlyPerson>
| InstanceType<typeof OnTheFlyThirdparty>
| null;
const castPerson = ref<PersonEditComponent>(null);
const castThirdparty = ref<AnyComponentInstance>(null);
onMounted(() => {
type.value =
props.allowedTypes.length === 1 && props.allowedTypes.includes("thirdparty")
? "thirdparty"
: "person";
});
function isActive(tab: CreatableEntityType) {
return type.value === tab;
}
const containsThirdParty = computed<boolean>(() =>
props.allowedTypes.includes("thirdparty"),
);
const containsPerson = computed<boolean>(() => {
return props.allowedTypes.includes("person");
});
function save(): void {
castPerson.value.postPerson();
}
defineExpose({save});
</script>
<style lang="css" scoped>
label {
cursor: pointer;
}
</style>