UnivateProperties/src/components/shared/searchTab.vue

<template>
  <!-- eslint-disable max-len -->
  <div class="box-collapse">
    <div class="title-box-d">
      <h3 class="title-d" style="text-align:left">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" style="text-align:left">
              <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" @updateSearch="updateSearch" />
              </div>
              <div
                class="tab-pane fade"
                id="pills-map"
                role="tabpanel"
                aria-labelledby="pills-map-tab"
              >
                <propertySearch propertyType="Commercial" />
              </div>
            </div>
          </div>
          <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 { mapState, mapActions } from 'vuex';
import propertySearch from '../property/propertySearchFields.vue';
import timeshareSearch from '../timeshare/searchTimeshare.vue';

export default {
  components: {
    propertySearch,
    timeshareSearch,
  },
  data() {
    return {
      selectedPropertyType: 'timeshare',
      keyword: '',
      propertySearch: {
        userID: 0,
        keyword: '',
        salesType: 'Sale',
        propertyUsageType: 'All',
        propertyType: 'All',
        province: 'All',
        city: 'All',
        suburb: 'All',
      },
    };
  },
  computed: {},
  methods: {
    updateType(item) {
      this.selectedPropertyType = item;
    },
    updateSearch(item) {
      this.propertySearch = item;
      this.propertySearch.propertyUsageType = this.selectedPropertyType;
      this.propertySearch.keyword = this.keyword;
    },
    Search() {
      if (this.selectedPropertyType === 'timeshare') {
        this.$router.push('/timeshare/search/');
      } else {
        this.$router.push({
          path: '/property/search',
          query: this.propertySearch,
        });
        // this.$router.push('/property/search');
      }
    },
  },
};
</script>