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

<template>
    <ul class="nav nav-tabs">
        <li v-if="allowedTypes.includes('person')" 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"
                    />
                    {{ $t("onthefly.create.person") }}
                </label>
            </a>
        </li>
        <li v-if="allowedTypes.includes('thirdparty')" 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"
                    />
                    {{ $t("onthefly.create.thirdparty") }}
                </label>
            </a>
        </li>
    </ul>

    <div class="my-4">
        <on-the-fly-person
            v-if="type === 'person'"
            :action="action"
            :query="query"
            ref="castPerson"
        />

        <on-the-fly-thirdparty
            v-if="type === 'thirdparty'"
            :action="action"
            :query="query"
            ref="castThirdparty"
        />
    </div>
</template>

<script>
import OnTheFlyPerson from "ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue";
import OnTheFlyThirdparty from "ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue";

export default {
    name: "OnTheFlyCreate",
    props: ["action", "allowedTypes", "query"],
    components: {
        OnTheFlyPerson,
        OnTheFlyThirdparty,
    },
    data() {
        return {
            type: null,
        };
    },
    computed: {
        radioType: {
            set(type) {
                this.type = type;
                console.log("## type:", type, ", action:", this.action);
            },
            get() {
                return this.type;
            },
        },
    },
    mounted() {
        this.type =
            this.allowedTypes.length === 1 &&
            this.allowedTypes.includes("thirdparty")
                ? "thirdparty"
                : "person";
    },
    methods: {
        isActive(tab) {
            return this.type === tab ? true : false;
        },
        castDataByType() {
            switch (this.radioType) {
                case "person":
                    return this.$refs.castPerson.$data.person;
                case "thirdparty":
                    let data = this.$refs.castThirdparty.$data.thirdparty;
                    if (data.address !== undefined && data.address !== null) {
                        data.address = { id: data.address.address_id };
                    } else {
                        data.address = null;
                    }

                    return data;
                default:
                    throw Error("Invalid type of entity");
            }
        },
    },
};
</script>

<style lang="css" scoped>
label {
    cursor: pointer;
}
</style>