UnivateProperties/src/components/property/propertySearchPage.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="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 class="row">
        <div class="col-md-2 offset-4">
          <button type="button" @click="SetType('Residential')" class="btn btn-b-n">Residential</button>
        </div>
        <div class="col-md-2">
          <button type="button" @click="SetType('Commercial')" class="btn btn-b-n">Commercial</button>
        </div>
      </div>
      <br />
      <div class="col-md-10 offset-1">
        <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
          <li class="nav-item">
            <a
              class="nav-link active"
              id="pills-video-tab"
              data-toggle="pill"
              href="#pills-video"
              role="tab"
              aria-controls="pills-video"
              aria-selected="true"
              v-on:click="SetSalesType('Sale')"
            >For Sale</a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="pills-plans-tab"
              data-toggle="pill"
              href="#pills-plans"
              role="tab"
              aria-controls="pills-plans"
              aria-selected="false"
              v-on:click="SetSalesType('Rent')"
            >To Rent</a>
          </li>
        </ul>
      </div>
      <br />
      <div class="row">
        <autoComplete class="col-md-11 offset-1" :items="suburbList" @selection="SelectedFilter" />
      </div>
      <br />
      <div class="row">
        <div class="col-md-10 offset-1">
          <button
            type="button"
            class="input-group-text fa fa-search"
            style="color: #60CBEB"
            @click="SearchClick"
          >Search</button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h1 class="my-4" v-if="propertyUsageType === 'Residential'">About Residential Properties</h1>
          <h1 class="my-4" v-else>About Commercial Properties</h1>
        </div>
        <div class="container col-md-6 text-left" v-if="propertyUsageType === 'Residential'">
          <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/new/Residential/Rental">Click Here</router-link>
          </p>
          <p>
            Wish to SELL your property?
            <router-link to="/property/new/Residential/Sale">Click Here</router-link>
          </p>
        </div>
        <div class="container col-md-6 text-left" v-else>
          <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/new/Commercial/Rental">Click Here</router-link>
          </p>
          <p>
            Wish to SELL your property?
            <router-link to="/property/new/Commercial/Sale">Click Here</router-link>
          </p>
        </div>
        <div class="col-md-4">
          <p>
            <img
              v-if="propertyUsageType === 'Residential'"
              class="img-fluid"
              src="./../../../public/img/residential.jpg"
              alt="About Resale"
              style="border-radius:10px"
            />
            <img
              v-else
              class="img-fluid"
              src="./../../../public/img/commercial.jpg"
              alt="About Resale"
              style="border-radius:10px"
            />
          </p>
        </div>
      </div>
      <br />
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import autoComplete from "../shared/autoComplete.vue";

export default {
  name: "propertysearch",
  components: {
    autoComplete,
  },
  data() {
    return {
      propertyUsageType: "Residential",
      salesType: "Sale",
      searchText: "",
    };
  },
  computed: {
    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"]),
  },
  methods: {
    ...mapActions("propertySearch", ["applyFilter"]),
    SetType(item) {
      this.propertyUsageType = item;
      localStorage.propertySearchUsageType = item;
    },
    SearchClick() {
      const item = this.suburbs.find((s) => s.display === this.searchText);
      this.propertySearch.province = item.province;
      this.propertySearch.city = item.city;
      this.propertySearch.suburb = item.suburb;
      this.propertySearch.propertyUsageType = this.propertyUsageType;
      this.propertySearch.salesType = this.salesType;

      this.$router.push("/property/propertySearch/results");
    },
    Filter() {
      this.applyFilter(this.searchText);
    },
    SetSalesType(value) {
      this.salesType = value;
    },
    SelectedFilter(item) {
      this.searchText = item;
    },
  },
  mounted() {
    if (this.$route.params.propertyUsageType) {
      this.propertyUsageType = this.$route.params.propertyUsageType;
    } else if (localStorage.propertySearchUsageType) {
      this.propertyUsageType = localStorage.propertySearchUsageType;
    } else {
      this.propertyUsageType = "Residential";
    }
  },
};
</script>