UnivateProperties/src/components/property/propertySearchFields.vue

<template>
  <div>
    <div class="container text-left">
      <div class="form-group">
        <label for="city">For:</label>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" style="color: #60CBEB">
              <b>F</b>
            </span>
          </div>
          <select
            class="form-control form-control-lg form-control-a"
            id="forSelector"
            v-model="propertySearch.salesType"
            @change="salesTypeSelected"
          >
            <option value="Sale">Sale</option>
            <option value="Rent">Rent</option>
          </select>
        </div>
      </div>
      <div class="form-group" v-if="propertyType === 'Residential'">
        <label for="propertytype">Property Type</label>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" style="color: #60CBEB">
              <b>T</b>
            </span>
          </div>
          <select
            class="form-control form-control-lg form-control-a"
            id="forSelector"
            v-model="resType"
            @change="PropertyTypeSelected"
          >
            <option>All</option>
            <option
              v-for="(propertyType, i) in propertyTypesRes"
              :key="i"
            >{{ propertyType.description }}</option>
          </select>
          <div class="input-group-append" @click="clearResType">
            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
              <b>X</b>
            </span>
          </div>
        </div>
      </div>
      <div v-else class="form-group">
        <label for="propertytype">Property Type</label>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" style="color: #60CBEB">
              <b>T</b>
            </span>
          </div>
          <select
            class="form-control form-control-lg form-control-a"
            id="forSelector"
            v-model="comType"
            @change="PropertyTypeSelected"
          >
            <option>All</option>
            <option
              v-for="(propertyType, i) in propertyTypesCom"
              :key="i"
            >{{ propertyType.description }}</option>
          </select>
          <div class="input-group-append" @click="clearComType">
            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
              <b>X</b>
            </span>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="province">Province</label>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" style="color: #60CBEB">
              <b>P</b>
            </span>
          </div>
          <select
            class="form-control form-control-lg form-control-a"
            id="provinceselector"
            @change="ProvinceSelected"
            v-model="propertySearch.province"
          >
            <option>All</option>
            <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
          </select>
          <div class="input-group-append" @click="clearFilter('province')">
            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
              <b>X</b>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="container text-left">
      <div class="form-group">
        <label for="city">City</label>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" style="color: #60CBEB">
              <b>C</b>
            </span>
          </div>
          <select
            class="form-control form-control-lg form-control-a"
            id="cityselector"
            @change="CitySelected"
            v-model="propertySearch.city"
          >
            <option>All</option>
            <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
          </select>
          <div class="input-group-append" @click="clearFilter('city')">
            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
              <b>X</b>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="container text-left">
      <div class="form-group">
        <label for="suburb">Suburb</label>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" style="color: #60CBEB">
              <b>S</b>
            </span>
          </div>
          <select
            class="form-control form-control-lg form-control-a"
            id="suburbselector"
            v-model="propertySearch.suburb"
            @change="SuburbSeleted"
          >
            <option>All</option>
            <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
          </select>
          <div class="input-group-append" @click="clearFilter('suburb')">
            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
              <b>X</b>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  props: {
    propertyType: String,
  },
  data() {
    return {
      resType: 'All',
      comType: 'All',
    };
  },
  mounted() {
    this.getProvince();
    this.getPropertyTypesRes();
    this.getPropertyTypesCom();
    this.getPropertySearchObject();
    setTimeout(() => {
      this.propertySearch.propertyUsageType = this.propertyType;
    }, 100);
  },
  computed: {
    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
    ...mapState('property', ['propertyTypesRes', 'propertyTypesCom']),
    ...mapState('propertySearch', ['propertySearch']),
  },
  methods: {
    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
    ...mapActions('property', ['getPropertyTypesRes', 'getPropertyTypesCom']),
    ...mapActions('propertySearch', ['getPropertySearchObject', 'clearFilter']),
    clearResType() {
      this.clearFilter('propertyType');
      this.resType = 'All';
    },
    clearComType() {
      this.clearFilter('propertyType');
      this.comType = 'All';
    },
    salesTypeSelected() {
      this.$emit('updateSearch', this.propertySearch);
    },
    PropertyTypeSelected(item) {
      this.propertySearch.propertyType = item.target.value;
      this.$emit('updateSearch', this.propertySearch);
    },
    ProvinceSelected(item) {
      if (item.target.value !== 'All') {
        this.getCities(
          Object.assign({}, { province: this.propertySearch.province }),
        );
      }
      this.$emit('updateSearch', this.propertySearch);
    },
    CitySelected(item) {
      if (item.target.value !== 'All') {
        this.getSuburbs(
          Object.assign(
            {},
            {
              province: this.propertySearch.province,
              city: this.propertySearch.city,
            },
          ),
        );
      }
      this.$emit('updateSearch', this.propertySearch);
    },
    SuburbSeleted() {
      this.$emit('updateSearch', this.propertySearch);
    },
  },
};
</script>