Issue316 addresses search by postal code

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

@@ -556,8 +556,8 @@ export default {
          this.entity.selected.address.distribution = this.context.edit ? this.entity.address.distribution: null;
          this.entity.selected.address.extra = this.context.edit ? this.entity.address.extra: null;
 
-         this.entity.selected.writeNew.address = this.context.edit;
-         this.entity.selected.writeNew.postcode = this.context.edit;
+         this.entity.selected.writeNew.address = this.context.edit && this.entity.address.addressReference === null && this.entity.address.street.length > 0
+         this.entity.selected.writeNew.postcode = false // NB: this used to be this.context.edit, but think it was erroneous;
          console.log('!! just set writeNew.postcode to', this.entity.selected.writeNew.postcode);
       },
 
@@ -569,7 +569,6 @@ export default {
       applyChanges()
       {
          console.log('apply changes');
-
          let newAddress = {
             'isNoAddress': this.entity.selected.isNoAddress,
             'street': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.street,
@@ -633,7 +632,6 @@ export default {
          if (!this.context.edit) {
             this.addNewAddress(newAddress)
                .then(payload => this.addressChangedCallback(payload));
-
          } else {
             this.updateAddress({
                addressId: this.context.addressId,
@@ -697,8 +695,7 @@ export default {
       *  Async PATCH transactions,
       *  then update existing address with backend datas when promise is resolved
       */
-      updateAddress(payload)
-      {
+      updateAddress(payload) {
          this.flag.loading = true;
 
          // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue

@@ -18,6 +18,7 @@
          :taggable="true"
          :multiple="false"
          @tag="addAddress"
+         :loading="isLoading"
          :options="addresses">
       </VueMultiselect>
    </div>
@@ -48,14 +49,17 @@
 
 <script>
 import VueMultiselect from 'vue-multiselect';
+import { searchReferenceAddresses, fetchReferenceAddresses } from '../../api.js';
+
 
 export default {
    name: 'AddressSelection',
    components: { VueMultiselect },
-   props: ['entity', 'updateMapCenter'],
+   props: ['entity', 'context', 'updateMapCenter'],
    data() {
       return {
-         value: null
+         value: this.context.edit ? this.entity.address.addressReference : null,
+         isLoading: false
       }
    },
    computed: {
@@ -107,6 +111,36 @@ export default {
       },
       listenInputSearch(query) {
          //console.log('listenInputSearch', query, this.isAddressSelectorOpen);
+         if (!this.entity.selected.writeNew.postcode) {
+            if (query.length > 2) {
+               this.isLoading = true;
+               searchReferenceAddresses(query, this.entity.selected.city).then(
+                  addresses => new Promise((resolve, reject) => {
+                     this.entity.loaded.addresses = addresses.results;
+                     this.isLoading = false;
+                     resolve();
+               }))
+               .catch((error) => {
+                  console.log(error); //TODO better error handling
+                  this.isLoading = false;
+               });
+            } else {
+               if (query.length === 0) { // Fetch all cities when suppressing the query
+                  this.isLoading = true;
+                  fetchReferenceAddresses(this.entity.selected.city).then(
+                     addresses => new Promise((resolve, reject) => {
+                        this.entity.loaded.addresses = addresses.results;
+                        this.isLoading = false;
+                        resolve();
+                  }))
+                  .catch((error) => {
+                     console.log(error);
+                     this.isLoading = false;
+                  });
+               }
+            }
+         }
+
          if (this.isAddressSelectorOpen) {
             this.$data.value = { text: query };
          } else if (this.isEnteredCustomAddress) {

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue

@@ -18,6 +18,7 @@
          :multiple="false"
          @tag="addPostcode"
          :tagPlaceholder="$t('create_postal_code')"
+         :loading="isLoading"
          :options="cities">
       </VueMultiselect>
    </div>
@@ -48,15 +49,17 @@
 
 <script>
 import VueMultiselect from 'vue-multiselect';
+import { searchCities, fetchCities } from '../../api.js';
 
 export default {
    name: 'CitySelection',
    components: { VueMultiselect },
-   props: ['entity', 'focusOnAddress', 'updateMapCenter'],
+   props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter'],
    emits: ['getReferenceAddresses'],
    data() {
       return {
-         value: null
+         value: this.context.edit ? this.entity.address.postcode : null,
+         isLoading: false
       }
    },
    computed: {
@@ -93,6 +96,15 @@ export default {
    },
    mounted() {
       console.log('writeNew.postcode', this.entity.selected.writeNew.postcode, 'in mounted');
+      if (this.context.edit) {
+         this.entity.selected.city = this.value;
+         this.entity.selected.postcode.name = this.value.name;
+         this.entity.selected.postcode.code = this.value.code;
+         this.$emit('getReferenceAddresses', this.value);
+         if (this.value.center) {
+            this.updateMapCenter(this.value.center);
+         }
+      }
    },
    methods: {
       transName(value) {
@@ -105,7 +117,6 @@ export default {
          this.entity.selected.postcode.code = value.code;
          this.entity.selected.postcode.coordinates = value.center.coordinates;
          this.entity.selected.writeNew.postcode = false;
-         console.log('writeNew.postcode false, in selectCity');
          this.$emit('getReferenceAddresses', value);
          this.focusOnAddress();
          if (value.center) {
@@ -113,7 +124,33 @@ export default {
          }
       },
       listenInputSearch(query) {
-         //console.log('listenInputSearch', query, this.isCitySelectorOpen);
+         if (query.length > 2) {
+            this.isLoading = true;
+            searchCities(query, this.entity.selected.country).then(
+               cities => new Promise((resolve, reject) => {
+                  this.entity.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
+                  this.isLoading = false;
+                  resolve();
+            }))
+            .catch((error) => {
+               console.log(error); //TODO better error handling
+               this.isLoading = false;
+            });
+         } else {
+            if (query.length === 0) { // Fetch all cities when suppressing the query
+               this.isLoading = true;
+               fetchCities(this.entity.selected.country).then(
+                  cities => new Promise((resolve, reject) => {
+                     this.entity.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
+                     this.isLoading = false;
+                     resolve();
+               }))
+               .catch((error) => {
+                  console.log(error)
+                  this.isLoading = false;
+               });
+            }
+         }
          if (this.isCitySelectorOpen) {
             this.$data.value = { text: query };
          } else if (this.isEnteredCustomCity) {

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

@@ -30,6 +30,7 @@
 
             <city-selection
                v-bind:entity="entity"
+               v-bind:context="context"
                v-bind:focusOnAddress="focusOnAddress"
                v-bind:updateMapCenter="updateMapCenter"
                @getReferenceAddresses="$emit('getReferenceAddresses', selected.city)">
@@ -37,6 +38,7 @@
 
             <address-selection v-if="!isNoAddress"
                v-bind:entity="entity"
+               v-bind:context="context"
                v-bind:updateMapCenter="updateMapCenter">
             </address-selection>