OnTheFly modal, Person Sub-component: create/edit form, show

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue

@@ -20,7 +20,8 @@
             <on-the-fly-person
                v-bind:id="id"
                v-bind:type="type"
-               v-bind:action="action">
+               v-bind:action="action"
+               ref="castPerson">
             </on-the-fly-person>
          </template>
          
@@ -28,13 +29,15 @@
             <on-the-fly-thirdparty
                v-bind:id="id"
                v-bind:type="type"
-               v-bind:action="action">
+               v-bind:action="action"
+               ref="castThirdparty">
             </on-the-fly-thirdparty>
          </template>
          
          <template v-slot:body v-else>
             <on-the-fly-create
-               v-bind:action="action">
+               v-bind:action="action"
+               ref="castNew">
             </on-the-fly-create>
          </template>
             
@@ -44,7 +47,10 @@
                class="sc-button bt-update"> <!-- @click.prevent="$emit('..', ..)" -->
             </button>
             <button v-else
-               class="sc-button bt-save"> <!-- @click.prevent="$emit('..', ..)" -->
+               class="sc-button bt-save"
+               @click="saveAction"
+               > <!--  
+               -->
                {{ $t('action.save')}}
             </button>
          </template>
@@ -55,8 +61,8 @@
 </template>
 
 <script>
-import Modal from 'ChillMainAssets/vuejs/_components/Modal';
-import OnTheFlyPerson from './OnTheFly/Person.vue';
+import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
+import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
 import OnTheFlyThirdparty from './OnTheFly/ThirdParty.vue';
 import OnTheFlyCreate from './OnTheFly/Create.vue';
 
@@ -123,6 +129,16 @@ export default {
       changeActionTo(action) {
          // [BUG] clic first on show item button; in modal clic edit button; close modal; clic again on show item button
          this.$data.action = action; 
+      },
+      saveAction() {
+         console.log('saveAction');
+         if (this.type === 'person') {
+            this.$refs.castPerson.postData();
+         } else if (this.type === 'thirdparty') {
+            this.$refs.castThirdparty.postData();
+         } else {
+            this.$refs.castNew.castByType();
+         }
       }
    }
 }

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

@@ -21,19 +21,21 @@
    <div class="my-4">
       <on-the-fly-person
          v-if="type === 'person'"
-         v-bind:action="action">
+         v-bind:action="action"
+         ref="castPerson">
       </on-the-fly-person>
       
       <on-the-fly-thirdparty
          v-if="type === 'thirdparty'"
-         v-bind:action="action">
+         v-bind:action="action"
+         ref="castThirdparty">
       </on-the-fly-thirdparty>
    </div>      
 </template>
 
 <script>
-import OnTheFlyPerson from './Person.vue';
-import OnTheFlyThirdparty from './ThirdParty.vue';
+import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
+import OnTheFlyThirdparty from './ThirdParty.vue'; // TODO move in ChillThirdpartyAssets
 
 export default {
    name: "OnTheFlyCreate",
@@ -44,7 +46,7 @@ export default {
    },
    data() {
       return {
-         type: 'person'
+         type: 'person' //by default
       }
    },
    computed: {
@@ -60,8 +62,17 @@ export default {
    methods: {
       isActive(tab) {
          return (this.type === tab) ? true : false; 
+      },
+      castByType() {
+         console.log('saveActionByType');
+         if (this.type === 'person') {
+            this.$refs.castPerson.postData();
+         } else if (this.type === 'thirdparty') {
+            this.$refs.castThirdparty.postData();
+         } else {
+            throw Error('Invalid type of entity');
+         }
       }
-      
    }
 }
 </script>

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

@@ -1,22 +0,0 @@
-<template>
-   <div v-if="action === 'show'">
-      show
-      person
-      {{ id }}
-   </div>
-   <div v-else-if="action === 'edit' || action === 'create'">
-      {{ action }}
-      person 
-      {{ id }}
-   </div>
-</template>
-
-<script>
-export default {
-   name: "OnTheFlyPerson",
-   props: ['id', 'type', 'action']
-}
-</script>
-
-<style lang="css" scoped>
-</style>

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

@@ -16,6 +16,7 @@ export default {
    name: "OnTheFlyThirdParty",
    props: ['id', 'type', 'action']
 }
+// TODO move in ChillThirdpartyAssets
 </script>
 
 <style lang="css" scoped>