UnivateProperties/src/components/property/propertySearchPage.vue

<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <div class="container col-md-12" v-if="propertyType === 'Residential'">
      <div class="col-sm-12">
        <div class="about-img-box">
          <img
            src="img/Pretoria-South-Africa.jpg"
            alt="Property Listing"
            class="img-fluid"
            style="width:800px;height:400px;"
          />
        </div>
        <div class="sinse-box">
          <h3 class="sinse-title">
            Property Listing
            <span></span>
          </h3>
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-md-12">
          <h1 class="my-4">About Residential Properties</h1>
        </div>
        <div class="container col-md-6 text-left">
          <p>
            Uni-Vate Properties understands the necessity in property-seekers
            to find that perfect fit;
            a home that meets, and exceeds the individual's needs. That is why,
            our dedicated team sources
            a range of property types, whether that home is a rental option near
            a University for a student
            just starting out, or a family home fit for entertaining.
          </p>
          <p>
            Looking to sell your residential property, instead? Uni-Vate
            Properties prides itself on
            professionalism and the right expertise, to help you secure the
            best possible deal for your home.
          </p>
          <p>
            Wish to RENT your property?
            <router-link to="/property/Residential/Rental">Click Here</router-link>
          </p>
          <p>
            Wish to SELL your property?
            <router-link to="/property/Residential/Sale">Click Here</router-link>
          </p>
        </div>
        <div class="col-md-4">
          <p>
            <img class="img-fluid" src="./../../../public/img/residential.jpg" alt="About Resale" />
          </p>
        </div>
      </div>
      <div>
        <propertyCard
          v-if="properties.length > 0"
          name="propertyholder"
          :properties="properties"
          :key="propertysearch"
        />
        <div v-if="properties.length === 0">
          <img src="../../../public/img/no-homes.gif" />
          <br />
          <br />
          <p>Sorry no listing where found matching your search</p>
        </div>
      </div>
      <br />
    </div>

    <div class="container col-md-12" v-if="propertyType === 'Commercial'">
      <div class="col-sm-12">
        <div class="about-img-box">
          <img
            src="img/Johannesburg-south-africa-1.jpg"
            alt="Property Listing"
            class="img-fluid"
            style="width:800px;height:400px;"
          />
        </div>
        <div class="sinse-box">
          <h3 class="sinse-title">
            Property Listing
            <span></span>
          </h3>
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-md-12">
          <h1 class="my-4">About Commercial Properties</h1>
        </div>
        <div class="container col-md-6 text-left">
          <p>
            Commercial properties are characteristically any larger properties that
            generate profit through leasing or rental activities. These properties
            are typically used to conduct business and provide companies with cut-and-dry
            leasing agreements, which keep their involvement in the maintenance of the property
            to a minimum, so they may focus on the growth of their company.
          </p>
          <p>
            Uni-Vate Properties seeks out professional, clean spaces for such companies and acts as
            mediator between the landlord/-lady and the tenants. Uni-Vate Properties provides
            value-adding service to clients and conducts business with a high standard
            and integrity.
          </p>
          <p>
            Wish to RENT your property?
            <router-link to="/property/Commercial/Rental">Click Here</router-link>
          </p>
          <p>
            Wish to SELL your property?
            <router-link to="/property/Commercial/Sale">Click Here</router-link>
          </p>
        </div>
        <div class="col-md-4">
          <p>
            <img class="img-fluid" src="./../../../public/img/commercial.jpg" alt="About Resale" />
          </p>
        </div>
      </div>
      <div>
        <propertyCard
          v-if="properties.length > 0"
          name="propertyholder"
          :properties="properties"
          :key="propertysearch"
        />
        <div v-if="properties.length === 0">
          <img src="../../../public/img/no-homes.gif" />
          <br />
          <br />
          <p>Sorry no listing where found matching your search</p>
        </div>
      </div>
      <br />
    </div>
  </div>
</template>
<script>
import { mkdir } from 'fs';
import { mapState, mapActions } from 'vuex';
import propertyCard from './propertyCard.vue';

export default {
  name: 'propertysearch',
  components: {
    propertyCard,
  },
  data() {
    return {
      type: '',
      propertyType: '',
      propertyTypeparam: '',
      province: '',
      city: '',
      suburb: '',
      proptype: '',
      keyword: '',
    };
  },
  methods: {
    ...mapActions('property', [
      'searchPropertiesParams',
      'searchPropertiesKeyword',
    ]),
  },
  computed: {
    ...mapState('property', ['properties']),
    ParamsChanged() {
      this.propertyTypeparam = this.$route.params.propertyType;
      this.type = this.$route.query.type;
      this.propertyType = this.$route.query.propertyType;
      this.province = this.$route.query.province;
      this.city = this.$route.query.city;
      this.suburb = this.$route.query.suburb;
      this.proptype = this.$route.query.propType;
      this.keyword = this.$route.query.keyword;

      if (typeof this.propertyType === 'undefined') {
        this.propertyType = this.propertyTypeparam;
      }

      if (this.type === '') {
        this.type = 'undefined';
      }
      if (this.propertyType === '') {
        this.propertyType = 'undefined';
      }
      if (this.province === '') {
        this.province = 'undefined';
      }
      if (this.city === '') {
        this.city = 'undefined';
      }
      if (this.suburb === '') {
        this.suburb = 'undefined';
      }
      if (this.proptype === '') {
        this.propType = 'undefined';
      }
      if (typeof this.keyword === 'undefined' || this.keyword === '') {
        this.searchPropertiesParams(
          Object.assign(
            {},
            {
              type: this.type,
              propertyType: this.propertyType,
              province: this.province,
              city: this.city,
              suburb: this.suburb,
              propType: this.proptype,
            },
          ),
        );
      } else {
        this.searchPropertiesKeyword(
          Object.assign({}, { keyword: this.keyword }),
        );
      }

      return null;
    },
  },
  watch: {
    ParamsChanged() {
      console.log(JSON.stringify(this.$route.query));
    },
  },
};
</script>