chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue

<template>
   <li>
      <button class="btn btn-sm btn-secondary"
         @click="modal.showModal = true"
         :title="$t('courselocation.assign_course_address')">
         <i class="fa fa-map-marker"></i>
      </button>
   </li>

   <teleport to="body">
      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
         <template v-slot:header>
            <h2 class="modal-title">{{ $t('courselocation.sure') }}</h2>
         </template>
         <template v-slot:body>
            <address-render-box :address="person.current_household_address"></address-render-box>
            <p>{{ $t('courselocation.sure_description') }}</p>
         </template>
         <template v-slot:footer>
            <button class="btn btn-danger" @click="assignAddress">
               {{ $t('courselocation.ok') }}
            </button>
         </template>
      </modal>
   </teleport>
</template>

<script>
import {mapState} from "vuex";
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";

export default {
   name: "ButtonLocation",
   components: {
      AddressRenderBox,
      Modal,
   },
   props: ['person'],
   data() {
      return {
         modal: {
            showModal: false,
            modalDialogClass: "modal-dialog-centered modal-md"
         }
      }
   },
   computed: {
      ...mapState({
         context: state => state.addressContext
      }),
   },
   methods: {
      assignAddress() {
        //console.log('assignAddress id', this.person.current_household_address);
         let payload = {
            entity: this.context.entity.name,
            entityId: this.context.entity.id,
            locationStatusTo: 'person',
            personId: this.person.id
         };
         this.$store.dispatch('updateLocation', payload);
         window.location.assign('#section-20');
         this.modal.showModal = false;
      }
   }
}
</script>