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

<template>

   <a class="btn btn-sm" target="_blank"
      :class="classAction"
      :title="$t(titleAction)"
      @click="openModal">
      {{ buttonText }}
   </a>

   <teleport to="body">
      <modal v-if="modal.showModal"
         :modalDialogClass="modal.modalDialogClass"
         @close="modal.showModal = false">

         <template v-slot:header>
            <h3 class="modal-title">{{ $t(titleModal) }}</h3>
         </template>

         <template v-slot:body v-if="type === 'person'">
            <on-the-fly-person
               v-bind:id="id"
               v-bind:type="type"
               v-bind:action="action"
               ref="castPerson">
            </on-the-fly-person>
         </template>

         <template v-slot:body v-else-if="type === 'thirdparty'">
            <on-the-fly-thirdparty
               v-bind:id="id"
               v-bind:type="type"
               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"
               ref="castNew">
            </on-the-fly-create>
         </template>

         <template v-slot:footer>
            <button v-if="action === 'show'"
               @click="changeActionTo('edit')"
               class="btn btn-update">
            </button>
            <button v-else
               class="btn btn-save"
               @click="saveAction">
               {{ $t('action.save')}}
            </button>
         </template>

      </modal>
   </teleport>

</template>

<script>
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';

export default {
   name: 'OnTheFly',
   components: {
      Modal,
      OnTheFlyPerson,
      OnTheFlyThirdparty,
      OnTheFlyCreate
   },
   props: ['type', 'id', 'action', 'buttonText'],
   data() {
      return {
         modal: {
            showModal: false,
            modalDialogClass: "modal-dialog-scrollable modal-xl"
         },
         //action: this.action
      }
   },
   computed: {
      //action() {
      //   return this.$data.action;
      //},
      classAction() {
         switch (this.action) {
            case 'show':
               return 'btn-show';
            case 'edit':
               return 'btn-update';
            case 'create':
               return 'btn-create';
         }
      },
      titleAction() {
         switch (this.action) {
            case 'show':
               return 'action.show';
            case 'edit':
               return 'action.edit';
            case 'create':
               return 'action.create';
         }
      },
      titleModal() {
         switch (this.action) {
            case 'show':
               return 'onthefly.show.' + this.type;
            case 'edit':
               return 'onthefly.edit.' + this.type;
            case 'create':
               return 'onthefly.create.title';
         }
      }
   },
   methods: {
      openModal() {
         this.modal.showModal = true;
         this.$nextTick(function() {
            //this.$refs.search.focus();
         })
      },
      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 {
            // saveAction() ==cast=to==> child.castByType() ==cast=to==> grand-child.postData()
            this.$refs.castNew.castByType();
         }
         this.modal.showModal = false;
      }
   }
}
</script>

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