UnivateProperties/src/components/property/commercial/commercialSearchResults.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'">COMMERCIAL PROPERTIES FOR SALE</h3>
      <h3 v-else-if="propertySearch.salesType === 'Rent'">COMMERCIAL PROPERTIES FOR RENT</h3>
    </div>
    <propertyCard
      v-if="properties.length > 0"
      name="propertyholder"
      :properties="properties"
      :showSort="false"
    />
    <!-- <section v-if="properties.length > 0">
      <div class="container">
        <div class="row justify-content-md-center">
          <div
            class="col-lg-3 col-md-6 col-sm-6"
            v-for="currentProperty in properties"
            :key="currentProperty.id"
          >
            <div>
              <div class="portfolio-item">
                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
                <h4>{{ currentProperty.displayPrice }}</h4>
                <p>
                  {{ currentProperty.suburb }}, {{ currentProperty.city }} |
                  {{ currentProperty.area }}
                </p>
                <p>{{ currentProperty.shortDescription }}</p>
                <br />

                <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a>
                <router-link
                  class="btn-white-border"
                  :to="`/property/commercial/property/${currentProperty.id}`"
                  >VIEW</router-link
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </section> -->
    <section v-else id="intro" style="margin-bottom:-50px">
      <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"
        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;
    if (typeof this.propertySearch.propertyUsageType === "undefined") {
      this.propertySearch.propertyUsageType = "Commercial";
    }
    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;
    }
  }
};
</script>

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