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

<template>
   <div class="vue-component">
      <h2><a id="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') }}
                  <i class="fa fa-fw fa-map-marker"></i>
               </p>
            </div>
         </div>
      </div>

      <div v-if="hasNoPersonLocation" class="alert alert-danger no-person-location">
         <i class="fa fa-warning fa-2x"></i>
         <div>
            <p>
               {{ $t('courselocation.associate_at_least_one_person_with_one_household_with_address') }}
               <a href="#section-10">
                  <i class="fa fa-level-up fa-fw"></i>
               </a>
            </p>
         </div>
      </div>

      <div>
         <ul class="record_actions">
            <li>
               <add-address
                  v-if="!isPersonLocation"
                  :key="key"
                  :context="context"
                  :options="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 v-if="!isLocationValid" class="alert alert-warning to-confirm">
         {{ $t('courselocation.not_valid') }}
      </div>

   </div>
</template>

<script>
import {mapGetters, 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: {
            options: {
               button: {
                  text:  {
                     create: 'courselocation.add_temporary_address',
                     edit: 'courselocation.edit_temporary_address'
                  }
               },
               title: {
                  create: 'courselocation.add_temporary_address',
                  edit: 'courselocation.edit_temporary_address'
               },
               onlyButton: true
            }
         }
      }
   },
   computed: {
      ...mapState({
         accompanyingCourse: state => state.accompanyingCourse,
         context: state => state.addressContext
      }),
      ...mapGetters([
         'isLocationValid'
      ]),
      options() {
         return this.addAddress.options;
      },
      key() {
         return (this.context.edit) ? 'address_' + this.context.addressId
            : this.accompanyingCourse.type + '_' + this.accompanyingCourse.id ;
      },
      isTemporaryAddress() {
         return this.accompanyingCourse.locationStatus === 'address';
      },
      isPersonLocation() {
         return this.accompanyingCourse.locationStatus === 'person';
      },
      hasNoLocation() {
         return this.accompanyingCourse.locationStatus === 'none';
      },
      currentParticipations() {
         return this.accompanyingCourse.participations.filter(p => p.enddate !== null);
      },
      hasNoPersonLocation() {

         let addressInParticipations_ = []
         this.currentParticipations.forEach(p => {
            addressInParticipations_.push(this.checkHouseholdAddressForParticipation(p));
         });

         const booleanReducer = (previousValue, currentValue) => previousValue || currentValue;

         let addressInParticipations = (addressInParticipations_.length > 0) ?
            addressInParticipations_.reduce(booleanReducer) : false;

         //console.log(addressInParticipations_, addressInParticipations);
         return (
            this.accompanyingCourse.step !== 'DRAFT'
            && this.isTemporaryAddress
            && !addressInParticipations
            )
         ;
      },
      isContextEdit() {
         return this.context.edit;
      }
   },
   methods: {
      checkHouseholdAddressForParticipation(participation) {
         if (participation.person.current_household_id === null) {
            return false;
         }
         return participation.person.current_household_address !== null;
      },
      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)
            .catch(({name, violations}) => {
               if (name === 'ValidationException' || name === 'AccessException') {
                  violations.forEach((violation) => this.$toast.open({message: violation}));
               } else {
                  this.$toast.open({message: 'An error occurred'})
               }
            });
      },
      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)
            .catch(({name, violations}) => {
               if (name === 'ValidationException' || name === 'AccessException') {
                  violations.forEach((violation) => this.$toast.open({message: violation}));
               } else {
                  this.$toast.open({message: 'An error occurred'})
               }
            });

         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#accompanying-course {
   div.vue-component {
      & > div.alert.no-person-location {
         margin: 1px 0 0;
      }
      div.no-person-location {
         padding-top: 1.5em;
         display: flex;
         flex-direction: row;
         & > i {
            flex-basis: 1.5em; flex-grow: 0; flex-shrink: 0;
            padding-top: 0.2em;
            opacity: 0.75;
         }
         & > div {
            flex-basis: auto;
            div.action {
               button.btn-update {
                  margin-right: 2em;
               }
            }
         }
      }
      div.flex-table {
         div.item-bloc {
            div.alert {
               margin: 0 -0.9em -1em;
            }
         }
      }
   }
}
</style>