UnivateProperties/src/components/property/residential/residentialCarouselSection.vue

<template>
  <div>
    <section id="intro">
      <div class="container">
        <div class="row">
          <div align="left" class="col-sm-12 col-md-8">
            <div class="intro-content">
              <h2>Find your Home</h2>

              <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item">
                  <a
                    class="nav-link btn-white-border"
                    id="buy-tab"
                    data-toggle="pill"
                    href="#buy"
                    role="tab"
                    aria-controls="buy"
                    aria-selected="true"
                    @click="SetSalesType('Sale')"
                    >Buy</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link btn-white-border"
                    id="rent-tab"
                    data-toggle="pill"
                    href="#rent"
                    role="tab"
                    aria-controls="rent"
                    aria-selected="false"
                    @click="SetSalesType('Rent')"
                    >Rent</a
                  >
                </li>
              </ul>
              <div class="tab-content" id="pills-tabContent">
                <div
                  class="tab-pane fade show active"
                  id="start"
                  role="tabpanel"
                  aria-labelledby="start-tab"
                >
                  <p></p>
                </div>

                <div class="tab-pane fade show" id="buy" role="tabpanel" aria-labelledby="buy-tab">
                  <h4>PROPERTIES FOR SALE</h4>
                  <div class="row">
                    <div align="left" class="form-group col-md-12">
                      <autoComplete
                        align="left"
                        class="col-md-11 offset-1"
                        :items="suburbList"
                        @selection="SelectedFilter"
                        style="width:100%; margin-left:-15px"
                      />
                    </div>
                    <!-- <div class="form-group col-md-6">
                    <input
                      data-toggle="dropdown"
                      name="region"
                      class="form-control my-2"
                      id="name"
                      placeholder="Region"
                      aria-haspopup="true"
                      aria-expanded="false"
                    />
                    
                    <input
                      data-toggle="dropdown"
                      name="town"
                      class="form-control my-2"
                      id="name"
                      placeholder="Town"
                      aria-haspopup="true"
                      aria-expanded="false"
                    />
                  </div>
                  <div class="form-group col-md-6">
                    <input
                      data-toggle="dropdown"
                      name="suburb"
                      class="form-control my-2"
                      id="name"
                      placeholder="Suburb"
                      aria-haspopup="true"
                      aria-expanded="false"
                    />
                    <input
                      data-toggle="dropdown"
                      name="type"
                      class="form-control my-2"
                      id="name"
                      placeholder="Property Type"
                      aria-haspopup="true"
                      aria-expanded="false"
                    /> -->
                    <!-- </div> -->
                  </div>
                  <a v-on:click="SearchClick" class="btn-solid-blue"
                    ><i class="fa fa-search"></i> SEARCH</a
                  >
                </div>

                <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
                  <h4>RENTAL PROPERTIES</h4>
                  <div class="row">
                    <div align="left" class="form-group col">
                      <autoComplete
                        align="left"
                        class="col-md-11 offset-1"
                        :items="suburbList"
                        @selection="SelectedFilter"
                        style="width:100%; margin-left:-15px"
                      />
                    </div>
                    <!-- <div class="form-group col-md-6">
                    <input
                      data-toggle="dropdown"
                      name="region"
                      class="form-control my-2"
                      id="name"
                      placeholder="Region"
                      aria-haspopup="true"
                      aria-expanded="false"
                    />
                    <input
                      data-toggle="dropdown"
                      name="town"
                      class="form-control my-2"
                      id="name"
                      placeholder="Town"
                      aria-haspopup="true"
                      aria-expanded="false"
                    />
                  </div>
                  <div class="form-group col-md-6">
                    <input
                      data-toggle="dropdown"
                      name="suburb"
                      class="form-control my-2"
                      id="name"
                      placeholder="Suburb"
                      aria-haspopup="true"
                      aria-expanded="false"
                    />
                    <input
                      data-toggle="dropdown"
                      name="type"
                      class="form-control my-2"
                      id="name"
                      placeholder="Property Type"
                      aria-haspopup="true"
                      aria-expanded="false"
                    />
                  </div> -->
                  </div>
                  <a v-on:click="SearchClick" class="btn-solid-blue"
                    ><i class="fa fa-search"></i> FIND</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <carousel
        :nav="false"
        :dots="false"
        :items="1"
        :autoplay="true"
        :loop="true"
        id="intro-carousel"
        style="margin-top:-50px"
        :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
      >
        <img
          class="item"
          src="img/intro-carousel/residential-1.jpg"
          style="object-fit: cover"
          alt=""
        />
        <img
          class="item"
          src="img/intro-carousel/residential-2.jpg"
          style="object-fit: cover"
          alt=""
        />
        <img
          class="item"
          src="img/intro-carousel/residential-3.jpg"
          style="object-fit: cover"
          alt=""
        />
        <img
          class="item"
          src="img/intro-carousel/residential-4.jpg"
          style="object-fit: cover"
          alt=""
        />
        <img
          class="item"
          src="img/intro-carousel/residential-5.jpg"
          style="object-fit: cover"
          alt=""
        />
        <img
          class="item"
          src="img/intro-carousel/residential-6.jpg"
          style="object-fit: cover"
          alt=""
        />
      </carousel>
    </section>
    <main id="main" style="margin-top:-20px">
      <div class="container-fluid">
        <div class="row">
          <div
            ref="searchRes"
            :class="{ 'searchRes--clicked': clicked }"
            class="col-sm-12 searchRes"
          >
            <searchResult
              :class="{ 'searchComponent--clicked ': clicked }"
              class="searchComponent"
            />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import autoComplete from "../../shared/autoComplete";
import carousel from "vue-owl-carousel";
import searchResult from "../propertySearchResults";
export default {
  components: {
    carousel,
    autoComplete,
    searchResult
  },
  data() {
    return {
      propertyUsageType: "Residential",
      salesType: "Sale",
      searchText: "",
      clicked: false
    };
  },
  computed: {
    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"])
  },
  methods: {
    ...mapActions("propertySearch", ["getSuburbs", "applyFilter"]),
    SetSalesType(value) {
      this.salesType = value;
    },
    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.clicked = true;
      this.$router.push("/property/residential/searchResult");
    },
    SelectedFilter(item) {
      this.searchText = item;
    }
  },
  mounted() {
    this.getSuburbs();
  }
};
</script>

<style lang="scss" scoped>
.searchRes {
  will-change: transform;
  transition: height 500ms;
  height: 0px;
}

.searchRes--clicked {
  height: 75vh;
}

@media only screen and (max-width: 575px) {
  .searchRes--clicked {
    height: 100vh;
  }
}

@media only screen and (min-width: 576px) {
  .searchRes--clicked {
    height: 60vh;
  }
}

@media only screen and (min-width: 768px) {
  .searchRes--clicked {
    height: 75vh;
  }
}
@media only screen and (min-width: 992px) {
  .searchRes--clicked {
    height: 60vh;
  }
}

@media only screen and (min-width: 1200px) {
  .searchRes--clicked {
    height: 70vh;
  }
}

.searchComponent {
  will-change: transform;
  transition: opacity 0.2s ease-in-out;
  transition-delay: 0.5s;
  margin-bottom: 80px;
  position: absolute;
  width: 100%;
  left: 0;
  opacity: 0;
}

.searchComponent--clicked {
  opacity: 1;
}
</style>