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">
            <div class="form-group" style="text-align:left">
              <label for="Type">Keyword</label>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text myFill" style="font-size:75%;">
                    <i class="fa fa-search"></i>
                  </span>
                </div>
                <input type="text" class="form-control" placeholder="Keyword" v-model="keyword" />
                <div class="input-group-append" @click="clearFilter('resort')">
                  <span class="input-group-text cursor-pointer myFill">
                    <b>X</b>
                  </span>
                </div>
              </div>
            </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 :keyword="keyword" />
              </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" @updateSearch="updateSearch" />
              </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 } 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: {
        keyword: '',
        userName: '',
        salesType: 'Sale',
        propertyUsageType: 'All',
        propertyType: 'All',
        province: 'All',
        city: 'All',
        suburb: 'All',
        minPrice: 0,
        maxPrice: 0,
      },
    };
  },
  computed: {
    ...mapState('weekList', ['filter']),
  },
  methods: {
    updateType(item) {
      this.selectedPropertyType = item;
    },
    updateSearch(item) {
      this.propertySearch = item;
      this.propertySearch.propertyUsageType = this.selectedPropertyType;
      this.propertySearch.keyword = this.filter.keyword;
    },
    Search() {
      if (this.selectedPropertyType === 'timeshare') {
        this.$router.push('/timesharesearch');
      } else {
        // this.$router.push('/property/search');
        this.$router.push({
          path: '/property/search',
          query: this.propertySearch,
        });
      }
    },
  },
};
</script>