chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue

<template>
   <div class="address-form">

      <!-- Not display in modal -->
      <div v-if="insideModal === false" class="loading">
         <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
         <span class="sr-only">Loading...</span>
      </div>

      <div v-if="errors.length" class="alert alert-warning" >
         <ul>
            <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
         </ul>
      </div>

      <h4 class="h3">{{ $t('select_an_address_title') }}</h4>
      <div class="row my-3">
         <div class="col-lg-6">

            <div class="form-check">
               <input type="checkbox"
                  class="form-check-input"
                  id="isNoAddress"
                  v-model="isNoAddress"
                  v-bind:value="value" />
               <label class="form-check-label" for="isNoAddress">
                  {{ $t('isNoAddress') }}
               </label>
            </div>

            <country-selection
               v-bind:context="context"
               v-bind:entity="entity"
               v-bind:flag="flag"
               v-bind:checkErrors="checkErrors"
               @getCities="$emit('getCities', selected.country)">
            </country-selection>

            <city-selection
               v-bind:entity="entity"
               v-bind:context="context"
               v-bind:focusOnAddress="focusOnAddress"
               v-bind:updateMapCenter="updateMapCenter"
               v-bind:flag="flag"
               v-bind:checkErrors="checkErrors"
               @getReferenceAddresses="$emit('getReferenceAddresses', selected.city)">
            </city-selection>

            <address-selection v-if="!isNoAddress"
               v-bind:entity="entity"
               v-bind:context="context"
               v-bind:updateMapCenter="updateMapCenter"
               v-bind:flag="flag"
               v-bind:checkErrors="checkErrors">
            </address-selection>

         </div>
         <div class="col-lg-6 mt-3 mt-lg-0">

            <address-map
               v-bind:entity="entity"
               ref="addressMap">
            </address-map>

         </div>
      </div>

      <address-more v-if="!isNoAddress"
         v-bind:entity="entity">
      </address-more>

      <action-buttons v-if="insideModal === false"
         :options="this.options"
         :defaultz="this.defaultz">
         <template v-slot:before>
            <slot name="before"></slot>
         </template>
         <template v-slot:action>
            <slot name="action"></slot>
         </template>
         <template v-slot:after>
            <slot name="after"></slot>
         </template>
      </action-buttons>

   </div>
</template>

<script>
import CountrySelection from './AddAddress/CountrySelection';
import CitySelection from './AddAddress/CitySelection';
import AddressSelection from './AddAddress/AddressSelection';
import AddressMap from './AddAddress/AddressMap';
import AddressMore from './AddAddress/AddressMore';
import ActionButtons from './ActionButtons.vue';

export default {
   name: "EditPane",
   components: {
      CountrySelection,
      CitySelection,
      AddressSelection,
      AddressMap,
      AddressMore,
      ActionButtons
   },
   props: [
      'context',
      'options',
      'defaultz',
      'flag',
      'entity',
      'errorMsg',
      'insideModal',
      'errors',
      'checkErrors',
   ],
   emits: ['getCities', 'getReferenceAddresses'],
   data() {
      return {
         value: false
      }
   },
   computed: {
      address() {
         return this.entity.address;
      },
      loaded() {
         return this.entity.loaded;
      },
      selected() {
         return this.entity.selected;
      },
      addressMap() {
         return this.entity.addressMap;
      },
      isNoAddress: {
         set(value) {
            console.log('isNoAddress value', value);
            this.entity.selected.isNoAddress = value;
         },
         get() {
            return this.entity.selected.isNoAddress;
         }
      },
   },
   methods: {
      focusOnAddress() {
         const addressSelector = document.getElementById('addressSelector');
         if (addressSelector !== null) {
            addressSelector.focus();
         }
      },
      updateMapCenter(point) {
         console.log('point', point);
         this.addressMap.center[0] = point.coordinates[1];  // TODO use reverse()
         this.addressMap.center[1] = point.coordinates[0];
         this.$refs.addressMap.update(); // cast child methods
      }
   }
};
</script>

<style lang="scss">
div.address-form {
   div#address_map {
      height: 400px;
      width: 100%;
   }
}
</style>