UnivateProperties/src/components/timeshare/buy/toBuySearchResults.vue

<template>
  <main id="main" style="margin-top:-20px; padding-bottom:50px">
    <section>
      <div class="container">
        <div class="row pt-5 justify-content-md-center">
          <h3>TIMESHARE TO BUY</h3>
        </div>
        <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
          <li class="nav-item">
            <a
              class="nav-link active"
              id="home-tab"
              data-toggle="tab"
              href="#facilities"
              role="tab"
              aria-controls="home"
              aria-selected="true"
            >
              <h2>With Availability</h2>
            </a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="profile-tab"
              data-toggle="tab"
              href="#directions"
              role="tab"
              aria-controls="profile"
              aria-selected="false"
            >
              <h2>All</h2>
            </a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div
            class="tab-pane fade show active"
            id="facilities"
            role="tabpanel"
            aria-labelledby="home-tab"
          >
            <searchPanal :resorts="Available" />
          </div>
          <div class="tab-pane fade" id="directions" role="tabpanel" aria-labelledby="profile-tab">
            <searchPanal :resorts="resorts" />
          </div>
        </div>
        <div v-if="wait" id="preloader"></div>
      </div>
    </section>
  </main>
</template>

<script>
import { mapState, mapActions } from "vuex";
import searchPanal from "./searchResults";
import _ from "lodash";

export default {
  name: "ToBuySearchResults",
  components: {
    searchPanal,
  },
  data() {
    return {
      wait: false,
    };
  },
  methods: {
    ...mapActions("resort", ["getResorts", "getImage1"]),
    //methods
  },
  computed: {
    ...mapState("weekList", ["searchParams"]),
    ...mapState("resort", ["resorts"]),
    Available() {
      let resortList = this.resorts;
      resortList = _.filter(resortList, (x) => x.weeksAvailable > 0);
      return resortList;
    },
  },
  mounted() {
    this.wait = true;
    this.getResorts(this.searchParams.regionObj.regionCode)
      .then((fulfilled) => {
        this.wait = false;
      })
      .catch((error) => {
        this.wait = false;
      });
  },
};
</script>