UnivateProperties/src/components/property/propertySearchFields.vue

<template>
  <div>
    <div class="col-md-6 mb-2">
      <div class="form-group">
        <label for="city">For:</label>
        <select
          class="form-control form-control-lg form-control-a"
          id="forSelector"
          v-model="selectedType"
          @change="TypeSelected"
        >
          <option value="Sale">Sale</option>
          <option value="Rent">Rent</option>
        </select>
      </div>
      <div class="form-group" v-if="propertyType === 'Residential'">
        <label for="city">Property Type</label>
        <select
          class="form-control form-control-lg form-control-a"
          id="forSelector"
          v-model="selectedPropertyTypeRes"
          @change="PropertyTypeSelected"
        >
          <option>All</option>
          <option
            v-for="(propertyType, i) in propertyTypesRes"
            :key="i"
          >{{ propertyType.description }}</option>
        </select>
      </div>
      <div v-else class="form-group">
        <label for="city">Property Type</label>
        <select
          class="form-control form-control-lg form-control-a"
          id="forSelector"
          v-model="selectedPropertyTypeCom"
          @change="PropertyTypeSelected"
        >
          <option>All</option>
          <option
            v-for="(propertyType, i) in propertyTypesCom"
            :key="i"
          >{{ propertyType.description }}</option>
        </select>
      </div>
      <div class="form-group">
        <label for="city">Province</label>
        <select
          class="form-control form-control-lg form-control-a"
          id="provinceselector"
          @change="ProvinceSelected"
          v-model="selectedProvince"
        >
          <option>All</option>
          <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
        </select>
      </div>
    </div>
    <div class="col-md-6 mb-2">
      <div class="form-group">
        <label for="city">City</label>
        <select
          class="form-control form-control-lg form-control-a"
          id="cityselector"
          @change="CitySelected"
          v-model="selectedCity"
        >
          <option>All</option>
          <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
        </select>
      </div>
    </div>
    <div class="col-md-6 mb-2">
      <div class="form-group">
        <label for="city">Suburb</label>
        <select
          class="form-control form-control-lg form-control-a"
          id="suburbselector"
          v-model="selectedSuburb"
          @change="SuburbSelected"
        >
          <option>All</option>
          <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
        </select>
      </div>
    </div>
  </div>
</template>

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

export default {
  props: {
    propertyType: String,
  },
  data() {
    return {
      selectedType: 'Sale',
      selectedProvince: 'All',
      selectedCity: 'All',
      selectedSuburb: 'All',
      selectedPropertyTypeRes: 'All',
      selectedPropertyTypeCom: 'All',
    };
  },
  mounted() {
    this.getProvince();
    this.$emit('TypeSelectedUpdated', this.selectedType);
    this.getPropertyTypesRes();
    this.getPropertyTypesCom();
  },
  computed: {
    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
    ...mapState('property', ['propertyTypesRes', 'propertyTypesCom']),
  },
  methods: {
    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
    ...mapActions('property', ['getPropertyTypesRes', 'getPropertyTypesCom']),
    TypeSelected(item) {
      this.$emit('TypeSelectedUpdated', item.target.value);
    },
    PropertyTypeSelected(item) {
      this.$emit('PropertyTypeSelectedUpdated', item.target.value);
    },
    ProvinceSelected(item) {
      if (item.target.value !== 'All') {
        this.getCities(Object.assign({}, { province: this.selectedProvince }));
      }
      this.$emit('ProvinceSelectedUpdated', item.target.value);
    },
    CitySelected(item) {
      if (item.target.value !== 'All') {
        this.getSuburbs(
          Object.assign(
            {},
            { province: this.selectedProvince, city: this.selectedCity },
          ),
        );
      }
      this.$emit('CitySelectedUpdated', item.target.value);
    },
    SuburbSelected(item) {
      this.$emit('SuburbSelectedUpdated', item.target.value);
    },
  },
};
</script>