Address: rename [Show|Edit]AddressPane files

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

@@ -0,0 +1,162 @@
+<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>
+
+      <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"
+               @getCities="$emit('getCities', selected.country)">
+            </country-selection>
+
+            <city-selection
+               v-bind:entity="entity"
+               v-bind:focusOnAddress="focusOnAddress"
+               @getReferenceAddresses="$emit('getReferenceAddresses', selected.city)">
+            </city-selection>
+
+            <address-selection v-if="!isNoAddress"
+               v-bind:entity="entity"
+               v-bind:updateMapCenter="updateMapCenter">
+            </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>
+
+      <!-- Not display in modal -->
+      <ul v-if="insideModal == false"
+          class="record_actions sticky-form-buttons">
+         <li class="cancel">
+            <a class="btn btn-cancel" v-bind:href="context.backUrl">
+               {{ $t('back_to_the_list') }}
+            </a>
+         </li>
+         <li>
+            <a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
+               {{ $t('action.cancel') }}
+            </a>
+         </li>
+         <li>
+            <a class="btn btn-update" @click.prevent="$emit('closeEditPane')">
+               {{ $t('action.valid_and_see')}}
+            </a>
+         </li>
+      </ul>
+
+   </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'
+
+export default {
+   name: "EditPane",
+   components: {
+      CountrySelection,
+      CitySelection,
+      AddressSelection,
+      AddressMap,
+      AddressMore
+   },
+   props: [
+      'context',
+      'options',
+      'default',
+      'flag',
+      'entity',
+      'errorMsg',
+      'insideModal'
+   ],
+   emits: ['closeEditPane', '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 {
+   h4.h3 {
+      font-weight: bold;
+   }
+   div#address_map {
+      height: 400px;
+      width: 100%;
+   }
+}
+</style>