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" v-model="propertySearch.salesType">
            <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" 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" 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" v-model="propertySearch.province" @change="ProvinceSelected">
            <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 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" v-model="propertySearch.city" @change="CitySelected">
            <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 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" v-model="propertySearch.suburb">
            <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 class="form-group">
        <div class="row">
          <div class="col-md-6 text-left">
            <label>Minimum Price</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" style="color: #60CBEB">
                  <b>R</b>
                </span>
              </div>
              <input
                class="form-control"
                type="number"
                setp="any"
                v-model="propertySearch.minPrice"
              />
              <div class="input-group-append" @click="clearFilter('minPrice')">
                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
                  <b>X</b>
                </span>
              </div>
            </div>
          </div>
          <div class="col-md-6 text-left">
            <label>Maximum Price</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" style="color: #60CBEB">
                  <b>R</b>
                </span>
              </div>
              <input
                class="form-control"
                type="number"
                setp="any"
                v-model="propertySearch.maxPrice"
              />
              <div class="input-group-append" @click="clearFilter('maxPrice')">
                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
                  <b>X</b>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-12 text-left">
            <label>Available From</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" style="color: #60CBEB">
                  <b>R</b>
                </span>
              </div>
              <input
                class="form-control"
                type="date"
                setp="any"
                v-model="propertySearch.availableFrom"
              />
              <div class="input-group-append" @click="clearFilter('availableFrom')">
                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
                  <b>X</b>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="propertytype">Property ID</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>
          <input class="form-control" v-model="propertySearch.propertyId" type="number" />
          <div class="input-group-append" @click="clearFilter('propertyId')">
            <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.getPropertyTypesRes();
    this.getPropertyTypesCom();
    this.propertySearch.propertyUsageType = this.propertyType;
  },
  computed: {
    ...mapState("property", ["propertyTypesRes", "propertyTypesCom"]),
    ...mapState("propertySearch", ["propertySearch"]),
  },
  methods: {
    ...mapActions("property", ["getPropertyTypesRes", "getPropertyTypesCom"]),
    ...mapActions("propertySearch", ["clearFilter"]),
    clearResType() {
      this.clearFilter("propertyType");
      this.resType = "All";
    },
    clearComType() {
      this.clearFilter("propertyType");
      this.comType = "All";
    },
    PropertyTypeSelected(item) {
      this.propertySearch.propertyType = item.target.value;
      let typeitem = this.propertyTypesCom.find(
        (t) => t.description === item.target.value
      );
      if (typeof typeitem === "undefined") {
        typeitem = this.propertyTypesRes.find(
          (t) => t.description === item.target.value
        );
      }
      if (typeitem.usageType === 1) {
        this.propertySearch.propertyUsageType = "Commercial";
      } else {
        this.propertySearch.propertyUsageType = "Residential";
      }
    },
  },
};
</script>