UnivateProperties/src/components/shared/searchTab.vue

<template>
  <!-- eslint-disable max-len -->
  <div class="box-collapse">
    <div class="title-box-d">
      <h3 class="title-d">Search</h3>
    </div>
    <span class="close-box-collapse right-boxed ion-ios-close"></span>
    <div class="box-collapse-wrap">
      <form class="form-a">
        <div class="row">
          <div class="col-md-12 mb-2">
            <div class="form-group">
              <label for="Type">Keyword</label>
              <input
                type="text"
                class="form-control form-control-lg form-control-a"
                placeholder="Keyword"
                v-model="keyword"
              />
            </div>
          </div>
          <div class="col-md-12">
            <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
              <li class="nav-item">
                <a
                  class="nav-link active"
                  id="pills-video-tab"
                  data-toggle="pill"
                  href="#pills-video"
                  role="tab"
                  aria-controls="pills-video"
                  aria-selected="true"
                  v-on:click="updateType('Timeshare')"
                >Timeshare</a>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  id="pills-plans-tab"
                  data-toggle="pill"
                  href="#pills-plans"
                  role="tab"
                  aria-controls="pills-plans"
                  aria-selected="false"
                  v-on:click="updateType('Residential')"
                >Residential</a>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  id="pills-map-tab"
                  data-toggle="pill"
                  href="#pills-map"
                  role="tab"
                  aria-controls="pills-map"
                  aria-selected="false"
                  v-on:click="updateType('Commercial')"
                >Commercial</a>
              </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">
              <div
                class="tab-pane fade show active"
                id="pills-video"
                role="tabpanel"
                aria-labelledby="pills-video-tab"
              >
                <timeshareSearch />
              </div>
              <div
                class="tab-pane fade"
                id="pills-plans"
                role="tabpanel"
                aria-labelledby="pills-plans-tab"
              >
                <propertySearch
                  propertyType="Residential"
                  @TypeSelectedUpdated="TypeSelectedUpdated"
                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
                  @CitySelectedUpdated="CitySelectedUpdated"
                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
                />
              </div>
              <div
                class="tab-pane fade"
                id="pills-map"
                role="tabpanel"
                aria-labelledby="pills-map-tab"
              >
                <propertySearch
                  propertyType="Commercial"
                  @TypeSelectedUpdated="TypeSelectedUpdated"
                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
                  @CitySelectedUpdated="CitySelectedUpdated"
                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
                />
              </div>
            </div>
          </div>
          {{selectedPropertyType}}
          <div class="col-md-12">
            <button type="submit" class="btn btn-b-n" @click="Search">Search</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import propertySearch from '../property/propertySearchFields.vue';
import timeshareSearch from '../timeshare/searchTimeshare.vue';

export default {
  components: {
    propertySearch,
    timeshareSearch,
  },
  data() {
    return {
      selectedPropertyType: 'timeshare',
      selectedType: '',
      selectedProvince: '',
      selectedCity: '',
      selectedSuburb: '',
      selectedPropType: '',
      keyword: '',
    };
  },
  methods: {
    updateType(item) {
      this.selectedPropertyType = item;
    },
    TypeSelectedUpdated(item) {
      this.selectedType = item;
    },
    PropertyTypeSelectedUpdated(item) {
      this.selectedPropType = item;
    },
    ProvinceSelectedUpdated(item) {
      this.selectedProvince = item;
    },
    CitySelectedUpdated(item) {
      this.selectedCity = item;
    },
    SuburbSelectedUpdated(item) {
      this.selectedSuburb = item;
    },
    Search() {
      if (this.selectedPropertyType === 'timeshare') {
        this.$router.push('/timeshare/search/');
      } else {
        this.$router.push({
          path: '/property/search',
          query: {
            type: this.selectedType,
            propertyType: this.selectedPropertyType,
            province: this.selectedProvince,
            city: this.selectedCity,
            suburb: this.selectedSuburb,
            propType: this.selectedPropType,
            keyword: this.keyword,
          },
        });
      }
    },
  },
};
</script>