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"
      />
      <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="isConfidential"
            v-model="isConfidential"
            :value="valueConfidential"
          >
          <label
            class="form-check-label"
            for="isConfidential"
          >
            {{ $t('isConfidential') }}
          </label>
        </div>
        <div class="form-check">
          <input
            type="checkbox"
            class="form-check-input"
            id="isNoAddress"
            v-model="isNoAddress"
            :value="value"
          >
          <label
            class="form-check-label"
            for="isNoAddress"
          >
            {{ $t('isNoAddress') }}
          </label>
        </div>

        <country-selection
          :context="context"
          :entity="entity"
          :flag="flag"
          :check-errors="checkErrors"
          @get-cities="$emit('getCities', selected.country)"
        />

        <city-selection
          :entity="entity"
          :context="context"
          :focus-on-address="focusOnAddress"
          :update-map-center="updateMapCenter"
          :flag="flag"
          :check-errors="checkErrors"
          @get-reference-addresses="$emit('getReferenceAddresses', selected.city)"
        />

        <address-selection
          v-if="!isNoAddress"
          :entity="entity"
          :context="context"
          :update-map-center="updateMapCenter"
          :flag="flag"
          :check-errors="checkErrors"
        />
      </div>
      <div class="col-lg-6 mt-3 mt-lg-0">
        <address-map
          :entity="entity"
          ref="addressMap"
        />
      </div>
    </div>

    <address-more
      :entity="entity"
      :is-no-address="isNoAddress"
    />

    <action-buttons
      v-if="insideModal === false"
      :options="this.options"
      :defaultz="this.defaultz"
    >
      <template #before>
        <slot name="before" />
      </template>
      <template #action>
        <slot name="action" />
      </template>
      <template #after>
        <slot name="after" />
      </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,
         valueConfidential: false,
      }
   },
   computed: {
      address() {
         return this.entity.address;
      },
      loaded() {
         return this.entity.loaded;
      },
      selected() {
         return this.entity.selected;
      },
      addressMap() {
         return this.entity.addressMap;
      },
      isConfidential: {
         set(value) {
            this.entity.selected.confidential = value;
         },
         get() {
            return this.entity.selected.confidential;
         }
      },
      isNoAddress: {
         set(value) {
            console.log('isNoAddress value', value);
            this.entity.selected.isNoAddress = value;
            this.checkErrors();
         },
         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[0];
         this.addressMap.center[1] = point.coordinates[1];
         this.$refs.addressMap.update(); // cast child methods
      }
   }
};
</script>

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