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

<template>
   <div class="vue-component">
      <h2><a name="section-50"></a>
         {{ $t('courselocation.title') }}
      </h2>
      <div class="my-4">

         <!-- {# include vue_address component #} -->
         <div v-for="error in displayErrors" class="alert alert-danger my-2">
            {{ error }}
         </div>

         <show-address
            v-if="accompanyingCourse.location"
            :address="accompanyingCourse.location">
         </show-address>

         <div v-if="isTemporaryAddress"
              class="alert alert-warning">
            <p>{{ $t('courselocation.temporary_address_must_be_changed') }}</p>
         </div>

         <ul class="record_actions">
            <li>
               <add-address
                  v-if="hasTemporaryAddressButton"
                  :context="context"
                  :key="addAddress.type"
                  :options="addAddress.options"
                  :result="addAddress.result"
                  @submitAddress="submitAddress"
                  ref="addAddress">
               </add-address>
            </li>
            <li>
               <button v-if="isContextEdit"
                  class="btn btn-remove"
                  @click="removeAddress"
                  :title="$t('courselocation.remove_button')"></button>
            </li>
         </ul>

      </div>
   </div>
</template>

<script>
import { mapState } from "vuex";
import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';

export default {
   name: "CourseLocation",
   components: {
      AddAddress,
      ShowAddress
   },
   data() {
      return {
         addAddress: {
            type: 'accompanying_course_location',
            options: {
               /// Options override default.
               /// null value take default component value
               button: {
                  text:  {
                     create: 'courselocation.add_temporary_address',
                     edit: 'courselocation.edit_temporary_address'
                  }
               },
               title: {
                  create: 'courselocation.add_temporary_address',
                  edit: 'courselocation.edit_temporary_address'
               },
               /// Display each step in page or Modal
               bindModal: {
                  //step1: false, step2: false
               }
            }
         }
      }
   },
   computed: {
      ...mapState({
         accompanyingCourse: state => state.accompanyingCourse,
         context: state => state.addressContext
      }),
      hasTemporaryAddressButton() {  // return true if locationStatus equal 'none' or 'address'
         return this.accompanyingCourse.locationStatus !== 'person';
      },
      isTemporaryAddress() {
         return this.accompanyingCourse.locationStatus === 'address';
      },
      isContextEdit() {
         return this.context.edit;
      }
   },
   methods: {
      initAddressContext() {
         let context = {
            entity: {
               type: this.accompanyingCourse.type,
               id: this.accompanyingCourse.id
            },
            edit: false,
            addressId: null
         }
         if (this.accompanyingCourse.location) {
            context['edit'] = true;
            context['addressId'] = this.accompanyingCourse.location.address_id
         }
         this.$store.commit('setAddressContext', context);
      },
      initAddressOptions() {
         // here button.type is a contextual option
         this.$refs.addAddress.$data.default.button.type = this.isContextEdit ? 'btn-update' : '';
      },
      removeAddress() {
         console.log('remove address');
      },
      displayErrors() {
         return this.$refs.addAddress.errorMsg;
      },
      submitAddress() {
         console.log('@@@ click on Submit Address Button');

         let payload = this.$refs.addAddress.submitNewAddress();
         console.log('payload from parent', payload);

         this.$store.dispatch('updateLocation', payload);
      }
   },
   mounted() {
      this.initAddressContext();
      this.initAddressOptions();

      console.log('ac.locationStatus', this.accompanyingCourse.locationStatus);
      console.log('ac.location (temporary location)', this.accompanyingCourse.location);
      console.log('ac.personLocation', this.accompanyingCourse.personLocation);
   }
}
</script>