UnivateProperties/src/components/misc/address.vue

<template>
  <!-- eslint-disable max-len -->
  <div>
    <br />
    <div class="col-md-12" style="text-align:centre">
      <div class="myWell">
        <h4>Address</h4>
      </div>
      <div class="form-group row"></div>
      <div class="row" style="text-align:left">
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Street Number *</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input
              class="form-control"
              type="text"
              name="streetnumber"
              v-model="address.streetNumber"
            />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Street Name *</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="streetname" v-model="address.streetName" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Province *</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <select
              class="form-control"
              name="propertyType"
              id="propertyType"
              @change="ProvinceSelected"
              v-model="address.provinceId"
            >
              <option value="0">Please select province</option>
              <option
                v-for="province in provinces"
                :value="province.id"
                :key="province.id"
              >{{ province.description }}</option>
            </select>
          </div>
        </div>

        <div class="col-md-6" style="margin-bottom: 1em">
          <label>City *</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <select
              class="form-control"
              name="propertyType"
              id="propertyType"
              @change="CitySelected"
              v-model="address.cityId"
            >
              <option value="0">Please select city</option>
              <option v-for="city in cities" :value="city.id" :key="city.id">{{ city.description }}</option>
            </select>
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Suburb *</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <select
              class="form-control"
              name="propertyType"
              id="suburbselector"
              v-model="address.suburbId"
              @change="getPostalCode"
            >
              <option value="0">Please select suburb</option>
              <option
                v-for="suburb in suburbs"
                :value="suburb.id"
                :key="suburb.id"
              >{{ suburb.description }}</option>
            </select>
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Postal Code *</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="postalcode" v-model="address.postalCode" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  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;
    },
  },
  mounted() {
    this.getProvince();
  },
};
</script>

<style>
.goDown {
  margin-top: 150px;
}
</style>