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

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

      <div v-for="error in displayErrors" class="alert alert-danger my-2">
         {{ error }}
      </div>

      <div v-if="hasNoLocation">
         <label class="chill-no-data-statement">
            {{ $t('courselocation.no_address') }}
         </label>
      </div>

      <div class="flex-table" v-if="accompanyingCourse.location">
         <div class="item-bloc">
            <address-render-box
               :address="accompanyingCourse.location">
            </address-render-box>

            <div v-if="isPersonLocation" class="alert alert-secondary separator">
               <label class="col-form-label">
                  {{ $t('courselocation.person_locator', [ accompanyingCourse.personLocation.text ]) }}
               </label>
            </div>

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

      <div>
         <ul class="record_actions">
            <li>
               <add-address
                  v-if="!isPersonLocation"
                  :context="context"
                  :key="addAddress.type"
                  :options="addAddress.options"
                  :addressChangedCallback="submitTemporaryAddress"
                  ref="addAddress">
               </add-address>
            </li>
            <li v-if="isPersonLocation">
               <button
                  class="btn btn-remove"
                  @click="removeAddress"
                  :title="$t('courselocation.remove_button')">
                  {{ $t('action.remove') }}
               </button>
            </li>
         </ul>
      </div>

   </div>
</template>

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

export default {
   name: "CourseLocation",
   components: {
      AddAddress,
      AddressRenderBox
   },
   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
               openPanesInModal: true,
               // Use Date fields
               useDate: {
                  validFrom: true
               },
               hideAddress: true
            }
         }
      }
   },
   computed: {
      ...mapState({
         accompanyingCourse: state => state.accompanyingCourse,
         context: state => state.addressContext
      }),
      isTemporaryAddress() {
         return this.accompanyingCourse.locationStatus === 'address';
      },
      isPersonLocation() {
         return this.accompanyingCourse.locationStatus === 'person';
      },
      hasNoLocation() {
         return this.accompanyingCourse.locationStatus === 'none';
      },
      isContextEdit() {
         return this.context.edit;
      }
   },
   methods: {
      initAddressContext() {
         let context = {
            target: {
               name: 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);
      },
      removeAddress() {
         let payload = {
            target: this.context.target.name,
            targetId: this.context.target.id,
            locationStatusTo: 'none'
         };
         //console.log('remove address');
         this.$store.dispatch('updateLocation', payload);
      },
      displayErrors() {
         return this.$refs.addAddress.errorMsg;
      },
      submitTemporaryAddress(payload) {
         //console.log('@@@ click on Submit Temporary Address Button', payload);
         payload['locationStatusTo'] = 'address'; // <== temporary, not none, not person
         this.$store.dispatch('updateLocation', payload);
         this.$store.commit('setEditContextTrue', payload);
      }
   },
   created() {
      this.initAddressContext();

      console.log('ac.locationStatus', this.accompanyingCourse.locationStatus);
      console.log('ac.location (temporary location)', this.accompanyingCourse.location);
      console.log('ac.personLocation', this.accompanyingCourse.personLocation);
   }
}
</script>
<style lang="scss" scoped>

div.flex-table {
   div.item-bloc {
      div.alert {
         margin: 0 -0.9em -1em;
      }
   }
}

</style>