UnivateProperties/src/components/property/residential/residentialSearchResults.vue

<template>
  <main id="main" style="margin-top:-20px; padding-bottom:50px">
    <div v-if="wait" id="preloader"></div>
    <div class="row pt-5 justify-content-md-center">
      <h3 v-if="propertySearch.salesType === 'Sale'">RESIDENTIAL PROPERTIES FOR SALE</h3>
      <h3 v-else-if="propertySearch.salesType === 'Rent'">RESIDENTIAL PROPERTIES FOR RENT</h3>
    </div>
    <propertyCard
      v-if="properties.length > 0"
      name="propertyholder"
      :properties="properties"
      :showSort="false"
    />
    <section v-else id="intro" style="margin-bottom:-50px">
      <br/>
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="col-md-8">
            <div class="intro-content box text-center">
              <h2>Sorry no listing where found matching your search</h2>
              <a class="btn-white-border" href="javascript:history.back()">BACK TO SEARCH</a>
            </div>
          </div>
        </div>
      </div>

      <carousel
        :nav="false"
        :dots="false"
        :items="1"
        :autoplay="true"
        :loop="true"
        id="intro-carousel_residential"
        style="margin-top:-50px"
        :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
      >
        <img class="item" src="img/intro-carousel/comm-1.jpg" alt />
        <img class="item" src="img/intro-carousel/comm-2.jpg" alt />
        <img class="item" src="img/intro-carousel/comm-3.jpg" alt />
        <img class="item" src="img/intro-carousel/comm-4.jpg" alt />
        <img class="item" src="img/intro-carousel/comm-5.jpg" alt />
        <img class="item" src="img/intro-carousel/comm-6.jpg" alt />
      </carousel>
    </section>
  </main>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import propertyCard from "../propertyCardSearch";
import carousel from "vue-owl-carousel";

export default {
  name: "propertysearch",
  components: {
    propertyCard,
     carousel
  },
  data() {
    return {
      wait: true
    };
  },
  mounted() {
    this.wait = true;
    console.log(this.propertySearch.salesType);

    if (typeof this.propertySearch.propertyUsageType === "undefined") {
      this.propertySearch.propertyUsageType = "Residential";
    }
    if (this.user) {
      this.propertySearch.userName = this.user.username;
    }

    this.searchProperties(this.propertySearch).then(fulfilled => {
      this.wait = false;
    });
  },
  methods: {
    ...mapActions("propertySearch", [
      "searchProperties",
      "clearProperties",
      "updateResultsShowing"
    ]),
    SetType(item) {
      this.propertySearch.propertyUsageType = item;
    },
    SearchPage() {
      this.clearProperties();
      this.$router.push("/property/search");
    }
  },
  computed: {
    ...mapState("propertySearch", ["properties", "propertySearch", "resultsShowing"]),
    ...mapState("authentication", ["user"]),
    ParamsChanged() {
      console.log(JSON.stringify(this.propertySearch));
      if (typeof this.propertySearch.propertyUsageType === "undefined") {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.propertySearch.propertyUsageType = "Residential";
      }
      this.searchProperties(this.propertySearch).then(fulfilled => {
        this.wait = false;
      });
      return null;
    }
  },
  watch: {
    ParamsChanged() {
      return null;
    }
  },
  beforeDestroy(){
    this.propertySearch.city = "All";
    this.propertySearch.suburb = "All";
    this.propertySearch.province = "All";    
  }
};
</script>

<style lang="scss" scoped></style>