add new OnTheFly vue sub-component

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

@@ -0,0 +1,85 @@
+<template>
+  
+   <a class="sc-button" target="_blank"
+      :class="classAction"
+      :title="$t(titleAction)"
+      @click="openModal">
+   </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(modalTitle) }}</h3>
+         </template>
+         <template v-slot:body>
+            
+         </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';
+
+export default {
+   name: 'OnTheFly',
+   components: {
+      Modal
+   },
+   props: ['type', 'id', 'action'],
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"
+         }
+      }
+   },
+   computed: {
+      classAction() {
+         switch (this.action) {
+            case 'show':
+               return 'bt-show';
+            case 'create':
+               return 'bt-create';
+            case 'edit':
+               return 'bt-update';
+         }
+      },
+      titleAction() {
+         switch (this.action) {
+            case 'show':
+               return 'action.show';
+            case 'create':
+               return 'action.create';
+            case 'edit':
+               return 'action.edit';
+         }
+      },
+   },
+   methods: {
+      openModal() {
+         this.modal.showModal = true;
+         this.$nextTick(function() {
+            //this.$refs.search.focus();
+         })
+      }
+   }
+}
+</script>
+
+<style lang="css" scoped>
+a {
+   cursor: pointer;
+}
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue

@@ -13,16 +13,18 @@
    <td>
       <ul class="record_actions">
          <li>
-            <a class="sc-button bt-show" target="_blank"
-               :href="url.show"
-               :title="$t('action.show')">
-            </a>
+            <on-the-fly
+               :type="participation.person.type"
+               :id="participation.person.id"
+               action="show">
+            </on-the-fly>
          </li>
          <li>
-            <a class="sc-button bt-update" target="_blank"
-               :href="url.edit"
-               :title="$t('action.edit')">
-            </a>
+            <on-the-fly
+               :type="participation.person.type"
+               :id="participation.person.id"
+               action="edit">
+            </on-the-fly>
          </li>
          <!--li>
             <button class="sc-button bt-delete"
@@ -44,8 +46,13 @@
 </template>
 
 <script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
 export default {
    name: 'PersonItem',
+   components: {
+      OnTheFly
+   },
    props: ['participation'],
    data() {
       return {