otf: prepare to create vue root component: moving files

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

@@ -0,0 +1,91 @@
+<template>
+   <ul class="nav nav-tabs">
+      <li 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 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'"
+         v-bind:action="action"
+         ref="castPerson"
+      >
+      </on-the-fly-person>
+
+      <on-the-fly-thirdparty
+         v-if="type === 'thirdparty'"
+         v-bind:action="action"
+         ref="castThirdparty"
+      >
+      </on-the-fly-thirdparty>
+   </div>
+</template>
+
+<script>
+import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
+import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';
+import { postPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
+
+export default {
+   name: "OnTheFlyCreate",
+   props: ['action'],
+   components: {
+      OnTheFlyPerson,
+      OnTheFlyThirdparty
+   },
+   data() {
+      return {
+         type: 'person' //by default
+      }
+   },
+   computed: {
+      radioType: {
+         set(type) {
+            this.type = type;
+            console.log('## type:', type, ', action:', this.action);
+         },
+         get() {
+            return this.type;
+         }
+      }
+   },
+   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;
+               data.name = data.text;
+               data.address = { id: data.address.address_id }
+               return data;
+            default:
+               throw Error('Invalid type of entity')
+         }
+      }
+   }
+}
+</script>
+
+<style lang="css" scoped>
+label {
+   cursor: pointer;
+}
+</style>