UnivateProperties/src/components/property/propertySearchResults.vue

<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <br />
    <div class="container col-md-12">
      <div class="col-sm-12">
        <div class="about-img-box">
          <img
            v-if="propertySearch.propertyUsageType === 'Residential'"
            src="img/Pretoria-South-Africa.jpg"
            alt="Property Listing"
            class="img-fluid"
            style="width:800px;height:400px; border-radius:10px"
          />
          <img
            v-else
            src="img/Johannesburg-south-africa-1.jpg"
            alt="Property Listing"
            class="img-fluid"
            style="width:800px;height:400px; border-radius:10px"
          />
        </div>
        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
          <h3 class="sinse-title">Property Listing</h3>
        </div>
      </div>
      <br />
      <div>
        <propertyCard
          v-if="properties.length > 0"
          name="propertyholder"
          :properties="properties"
          :salesType="propertySearch.salesType"
        />
        <!-- <div v-if="loading">
          <img
            class="img-fluid"
            src="/img/kloader.gif"
            alt="UVProp logo"
            style="width:128px;height:128px;"
          />
        </div>-->
        <div v-if="properties.length === 0">
          <img src="../../../public/img/no-homes.png" />
          <br />
          <br />
          <p>Sorry no listing where found matching your search</p>
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-md-2 offset-5">
          <button type="button" @click="SearchPage" class="btn btn-b-n">Back to Search</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import propertyCard from './propertyCard.vue';

export default {
  name: 'propertysearch',
  components: {
    propertyCard,
  },
  data() {
    return {};
  },
  mounted() {
    if (typeof this.propertySearch.propertyUsageType === 'undefined') {
      this.propertySearch.propertyUsageType = 'Residential';
    }
    if (this.user) {
      this.propertySearch.userName = this.user.username;
    }
    this.searchProperties(this.propertySearch);
  },
  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() {
      if (this.resultsShowing) {
        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);
      }
      return null;
    },
  },
  watch: {
    ParamsChanged() {
      return null;
    },
  },
};
</script>