UnivateProperties/src/components/property/propertySearchPage.vue

<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <div class="container col-md-12" v-if="propertySearch.propertyUsageType === '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; 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 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" style="border-radius:10px"/>
          </p>
        </div>
      </div>
      <div>
        <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
        <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="propertySearch.propertyUsageType === '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; 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 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"
              style="border-radius:10px"
            />
          </p>
        </div>
      </div>
      <div>
        <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
        <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: '',
      propertySearch: {
        userID: 0,
        keyword: '',
        salesType: 'All',
        propertyUsageType: 'All',
        propertyType: 'All',
        province: 'All',
        city: 'All',
        suburb: 'All',
      },
    };
  },
  methods: {
    ...mapActions('propertySearch', ['searchProperties']),
  },
  computed: {
    ...mapState('propertySearch', ['properties']),
    ParamsChanged() {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.propertySearch = {
        userID: 0,
        keyword: '',
        salesType: 'All',
        propertyUsageType: 'All',
        propertyType: 'All',
        province: 'All',
        city: 'All',
        suburb: 'All',
      };

      if (typeof this.$route.params.propertyType === 'undefined') {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.propertySearch = this.$route.query;
      } else {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.propertySearch.propertyUsageType = this.$route.params.propertyType;
      }

      console.log(`PropertySearch = ${JSON.stringify(this.propertySearch)}`);

      this.searchProperties(this.propertySearch);
      // 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>