UnivateProperties/src/components/misc/address.vue

<template>
  <div class="form">
    <div id="sendmessage">Your details has been sent. Thank you!</div>
    <div id="errormessage"></div>
    <form method="post" role="form" class="contactForm">
      <div class="form-row">
        <div class="form-group col-md-6">
          <input
            type="text"
            name="street-nr"
            class="form-control"
            id="street-nr"
            placeholder="Street Number"
            data-rule="minlen:4"
            data-msg="Please enter your street number"
            v-model="address.streetNumber"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            class="form-control"
            name="street"
            id="street"
            placeholder="Street Name"
            data-msg="Please enter your street name"
            v-model="address.street"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            name="province"
            class="form-control"
            id="province"
            placeholder="Province"
            data-rule="minlen:4"
            data-msg="Please enter your province"
            v-model="address.province"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            class="form-control"
            name="city"
            id="city"
            placeholder="City"
            data-rule="minlen:4"
            data-msg="Please enter your city"
            v-model="address.city"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            name="suburb"
            class="form-control"
            id="suburb"
            placeholder="Suburb"
            data-rule="minlen:4"
            data-msg="Please enter your suburb"
            v-model="address.suburb"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            class="form-control"
            name="postal"
            id="postal"
            placeholder="Postal Code"
            data-msg="Please enter your postal code"
            v-model="address.postalCode"
          />
          <div class="validation"></div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import propField from "../property/propertyFieldEditor.vue";

export default {
  components: {
    propField
  },
  data() {
    return {
      propertyType: "Residential"
    };
  },
  props: {
    address: {}
  },
  computed: {
    ...mapState("searchTab", ["provinces", "cities", "suburbs"])
  },
  methods: {
    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
    ProvinceSelected(item) {
      if (item.target.options.selectedIndex > 0) {
        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
        this.getCities(Object.assign({}, { province: this.selectedProvince }));
      }
    },
    CitySelected(item) {
      if (item.target.options.selectedIndex > 0) {
        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
        this.getSuburbs(
          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
        );
      }
    },
    getPostalCode(item) {
      this.address.postalCode = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
    },
    UpdateValue(item) {
      if (item.fieldName) {
        if (item.fieldName === "streetNumber") {
          this.address.streetNumber = item.value;
        }
        if (item.fieldName === "street") {
          this.address.street = item.value;
        }
        if (item.fieldName === "province") {
          if (item.value !== "") {
            this.address.province = item.value;
            this.getCities(Object.assign({}, { province: item.value }));
            this.address.city = null;
            this.address.suburb = null;
            this.address.postalCode = "";
          } else {
            this.address.province = null;
            this.address.city = null;
            this.address.suburb = null;
            this.address.postalCode = "";
            this.cities = [];
            this.suburbs = [];
          }
        }
        if (item.fieldName === "city") {
          if (item.value !== "") {
            this.address.city = item.value;
            // this.address.city = newCity;
            // this.address.cityId = newCity.id;
            this.getSuburbs(
              Object.assign(
                {},
                {
                  province: item.value,
                  city: item.value
                }
              )
            );
            this.address.suburb = null;
            this.address.postalCode = "";
          } else {
            this.address.city = null;
            this.address.suburb = null;
            this.address.postalCode = "";
            this.suburbs = [];
          }
        }
        if (item.fieldName === "suburb") {
          if (item.value !== "") {
            // const newSuburb = this.suburbs.find(
            //   p => p.description === item.value,
            // );
            // this.address.suburb = newSuburb;
            // this.address.suburbId = newSuburb.id;
            console.log(item.value);
            this.address.suburb = item.value;
            this.address.postalCode = this.address.suburb.postalCode;
          } else {
            this.address.suburb = null;
            this.address.postalCode = "";
          }
        }
      }
    }
  },
  mounted() {
    this.getProvince();
  }
};
</script>

<style lang="scss" scoped></style>