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

<template>
  
   <a class="sc-button" 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">
            </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">
            </on-the-fly-thirdparty>
         </template>
         
         <template v-slot:body v-else>
            <on-the-fly-create
               v-bind:action="action">
            </on-the-fly-create>
         </template>
            
         <template v-slot:footer>
            <button class="sc-button bt-save"> <!-- @click.prevent="$emit('..', ..)" -->
               {{ $t('action.save')}}
            </button>
         </template>
         
      </modal>
   </teleport>
   
</template>

<script>
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import OnTheFlyPerson from './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"
         }
      }
   },
   computed: {
      classAction() {
         switch (this.action) {
            case 'show':
               return 'bt-show';
            case 'edit':
               return 'bt-update';
            case 'create':
               return 'bt-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();
         })
      }
   }
}
</script>

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