UnivateProperties/src/components/property/commercial/commercialSearchResults.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 v-if="propertySearch.salesType === 'Sale'">COMMERCIAL PROPERTIES FOR SALE</h3>
          <h3 v-else-if="propertySearch.salesType === 'Rent'">COMMERCIAL PROPERTIES FOR RENT</h3>
        </div>
        <div v-if="properties.length > 0" 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 class="mt-3">{{ currentProperty.suburb }}</h4>
                <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 v-else class="row">
          <div align="center" class="col-md-12">
            <img src="img/no-homes.png" />
            <br />
            <br />
            <p>Sorry no listings where found matching your search</p>
          </div>
        </div>
        <div v-if="wait" id="preloader"></div>
      </div>
    </section>
  </main>
</template>

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

export default {
  name: "propertysearch",
  components: {
    propertyCard,
  },
  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;
    },
  },
};
</script>

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