Timeshare to buy search fix

src/components/shared/addressAutoComplete.vue

+<template>
+  <div>
+    <gmap-autocomplete class="form-control" @place_changed="setPlace"></gmap-autocomplete>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AddressAutoComplete",
+  props: {
+    placeholder: {
+      default: "ENTER LOCATION"
+    }
+  },
+  data() {
+    return {
+      streetNumber: "",
+      streetName: "",
+      suburb: "",
+      city: "",
+      province: "",
+      country: "",
+      postalCode: "",
+      url: ""
+    };
+  },
+  methods: {
+    setPlace(place) {
+      this.streetNumber = "";
+      this.streetName = "";
+      this.suburb = "";
+      this.city = "";
+      this.province = "";
+      this.country = "";
+      this.postalCode = "";
+      this.url = "";
+
+      for (let i = 0; i < place.address_components.length; i++) {
+        if (place.address_components[i].types[0] === "street_number") {
+          this.streetNumber = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "route") {
+          this.streetName = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "sublocality_level_1") {
+          this.suburb = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "locality") {
+          this.city = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "administrative_area_level_1") {
+          this.province = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "country") {
+          this.country = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "postal_code") {
+          this.postalCode = place.address_components[i].long_name;
+        }
+        this.url = place.url;
+
+        this.$emit("GoogleAddress", {
+          streetNumber: this.streetNumber,
+          streetName: this.streetName,
+          suburb: this.suburb,
+          city: this.city,
+          province: this.province,
+          country: this.country,
+          postalCode: this.postalCode,
+          url: this.url
+        });
+      }
+    }
+  }
+};
+</script>

src/components/timeshare/buy/carouselSection.vue

             </p>
             <div class="row">
               <div class="form-group col-md-6">
+                <div class="input-group">
+                  <label v-if="!searchParams.region" class="uniSelectLabel" for="region">REGION</label>
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="searchParams.region"
+                    @change="regionChange"
+                  >
+                    <option v-for="(region, r) in regions" :key="r">{{ region.regionName }}</option>
+                  </select>
+                </div>
+                <br />
+                <label>DATE FROM</label>
                 <input
-                  data-toggle="dropdown"
-                  name="region"
-                  class="form-control my-2"
-                  id="name"
-                  placeholder="Resort"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                />
-                <input
-                  data-toggle="dropdown"
-                  name="resort"
-                  class="form-control my-2"
-                  id="name"
-                  placeholder="Region"
-                  aria-haspopup="true"
-                  aria-expanded="false"
+                  type="date"
+                  name="arrival-to"
+                  class="form-control my-1 uniSelect"
+                  id="arrival-to"
+                  placeholder="Date From"
+                  v-model="filter.date"
                 />
               </div>
               <div class="form-group col-md-6">
+                <div class="input-group">
+                  <label
+                    v-if="!searchParams.resort"
+                    class="uniSelectLabel"
+                    for="weekInfoResortSelect"
+                  >RESORT</label>
+                  <select
+                    id="weekInfoResortSelect"
+                    class="form-control uniSelect"
+                    v-model="searchParams.resort"
+                  >
+                    <option
+                      v-for="(resort, r) in filteredResort"
+                      :key="r"
+                      :value="resort"
+                      @change="resortChange"
+                    >
+                      {{
+                      resort.resortName
+                      }}
+                    </option>
+                  </select>
+                </div>
+                <br />
+                <label>DATE TO</label>
                 <input
-                  data-toggle="dropdown"
-                  name="region"
-                  class="form-control my-2"
-                  id="name"
-                  placeholder="Week"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                />
-                <input
-                  data-toggle="dropdown"
-                  name="resort"
-                  class="form-control my-2"
-                  id="name"
-                  placeholder="Price Range"
-                  aria-haspopup="true"
-                  aria-expanded="false"
+                  type="date"
+                  name="arrival-to"
+                  class="form-control my-1 uniSelect"
+                  id="arrival-to"
+                  placeholder="Date To"
+                  v-model="filter.ddate"
                 />
               </div>
             </div>
-            <a href="resort-page.php" class="btn-solid-blue"><i class="fa fa-search"></i> SEARCH</a>
+            <button class="btn-solid-blue" @click="Search()">
+              <i class="fa fa-search"></i> SEARCH
+            </button>
           </div>
         </div>
       </div>
       style="margin-top:-50px"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" src="/img/intro-carousel/timeshare-1.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-2.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-3.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-4.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-5.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-6.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/timeshare-1.jpg" alt />
+      <img class="item" src="/img/intro-carousel/timeshare-2.jpg" alt />
+      <img class="item" src="/img/intro-carousel/timeshare-3.jpg" alt />
+      <img class="item" src="/img/intro-carousel/timeshare-4.jpg" alt />
+      <img class="item" src="/img/intro-carousel/timeshare-5.jpg" alt />
+      <img class="item" src="/img/intro-carousel/timeshare-6.jpg" alt />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>
 /* eslint-disable */
 
 import carousel from "vue-owl-carousel";
+import { mapState, mapActions, mapGetters } from "vuex";
 export default {
   components: {
-    carousel
-  }
+    carousel,
+  },
+  data() {
+    return {
+      regionObj: {},
+      resortObj: {},
+      region: "",
+      resort: "",
+      priceMin: undefined,
+      priceMax: undefined,
+    };
+  },
+  methods: {
+    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek"]),
+    regionChange(item) {
+      let reg = this.regions.find((r) => r.regionName === item.target.value);
+      this.regionObj = reg;
+    },
+    resortChange(item) {
+      let res = this.resorts.find((r) => r.resortName === item.target.value);
+      this.resortObj = res;
+    },
+    Search() {
+      if (this.searchParams.price) {
+        this.filter.minPrice = this.searchParams.price;
+      }
+      if (this.searchParams.week) {
+        this.filter.keyword = this.week;
+      }
+
+      if (!this.searchParams.resort) {
+        return;
+      }
+
+      this.$router.push(`/resort/${this.searchParams.resort.resortCode}`);
+    },
+  },
+  computed: {
+    ...mapState("timeshare", ["resorts", "regions", "detailedRegion"]),
+    ...mapState("weekList", ["searchParams", "filter"]),
+    filteredResort() {
+      let list = [];
+      if (this.searchParams.region && this.searchParams.region !== "") {
+        const item = this.detailedRegion.find(
+          (region) => region.region.regionCode === this.regionObj.regionCode
+        );
+        if (item) {
+          list = item.children;
+        }
+      } else {
+        list = this.resorts;
+      }
+      return _.sortBy(list, (x) => x.resortName);
+    },
+  },
+  created() {
+    this.initTimeshare(this.weekId);
+  },
+  mounted() {
+    this.searchParams.region = null;
+    this.searchParams.resort = null;
+    this.filter.date = null;
+    this.filter.ddate = null;
+  },
 };
 </script>
 

src/components/timeshare/buy/searchSection.vue

               v-model="selectedResort"
               @change="resortEvent()"
             >
-              <option v-for="(resort, i) in selectedRegion.resorts" :key="i" :value="resort">
-                {{ resort.resortName }}
-              </option>
+              <option
+                v-for="(resort, i) in selectedRegion.resorts"
+                :key="i"
+                :value="resort"
+              >{{ resort.resortName }}</option>
             </select>
           </div>
           <div v-else class="input-group my-1">
             <label v-if="selectedResort === null" class="uniSelectLabel" for="resort">Resort</label>
             <select class="form-control uniSelect" name="resort" id="resort">
-              <option disabled>
-                Please Select a Region First
-              </option>
+              <option disabled>Please Select a Region First</option>
             </select>
           </div>
-          <div class="input-group my-1">
+          <!-- <div class="input-group my-1">
             <label v-if="selectedSeason === null" class="uniSelectLabel" for="season">Season</label>
             <select
               class="form-control uniSelect"
               id="season"
               v-model="selectedSeason"
             >
-              <option v-for="season in seasons" :key="season.id" :value="season">
-                {{ season.name }}
-              </option>
+              <option v-for="season in seasons" :key="season.id" :value="season">{{ season.name }}</option>
             </select>
           </div>
 
               placeholder="mm/dd/yy"
               v-model="dateTo"
             />
-          </p>
-          <div class="btn-white-border"><i class="fa fa-search"></i> SEARCH</div>
+          </p>-->
+          <button class="btn-white-border" @click="ShowResort()">
+            <i class="fa fa-search"></i> SEARCH
+          </button>
         </div>
         <div class="col-md-8 p-5">
           <h2>Search by Province</h2>
 export default {
   name: "TimeshareToBuy",
   components: {
-    Alert
+    Alert,
   },
   data() {
     return {
       bedrooms: null,
       maxPrice: null,
       dateFrom: "",
-      dateTo: ""
+      dateTo: "",
     };
   },
   mounted() {
       return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
     },
     regions() {
-      return _.sortBy(this.detailedRegion, r => r.regionName);
-    }
+      return _.sortBy(this.detailedRegion, (r) => r.regionName);
+    },
   },
   methods: {
     ...mapActions("region", ["init", "getAvail", "getRegions", "getResort"]),
       if (this.maxPrice === "0") {
         this.maxPrice = null;
       }
-    }
-  }
+    },
+    ShowResort() {
+      if (this.selectedResort) {
+        this.$router.push(`/resort/${this.selectedResort.resortCode}`);
+      }
+    },
+  },
 };
 </script>
 

src/components/timeshare/buy/toBuySearchResults.vue

+<template>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+    <section>
+      <div class="container">
+        <div class="row pt-5 justify-content-md-center">
+          <h3>TIMESHARE TO BUY</h3>
+        </div>
+        <br />
+        <br />
+        <br />
+        <br />
+        <h1>bla</h1>
+        <!--<div v-if="properties.length > 0" class="row justify-content-md-center">
+          <div
+            class="col-lg-3 col-md-6 col-sm-6"
+            v-for="currentProperty in properties"
+            :key="currentProperty.id"
+          >
+            <div>
+              <div class="portfolio-item">
+                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
+
+                <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
+                <p>
+                  Opposite Monument Park Spar, Pretoria! Secure Parking. A stand-alone building,
+                  situated in the best location. Incredible bargain!
+                </p>
+                <br />
+
+                <router-link
+                  class="btn-white-border"
+                  :to="`/property/commercial/property/${currentProperty.id}`"
+                >VIEW</router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="row">
+          <div align="center" class="col-md-12">
+            <img src="img/no-homes.png" />
+            <br />
+            <br />
+            <p>Sorry no listing where found matching your search</p>
+          </div>
+        </div>-->
+      </div>
+    </section>
+  </main>
+</template>
+
+

src/components/timeshare/buy/weekListComponent.vue

         <thead>
           <tr>
             <th scope="col">Unit</th>
-            <th scope="col">Week</th>
             <th scope="col">Module</th>
             <th scope="col">Bedrooms</th>
             <th scope="col">Season</th>
           <tr v-for="(item, i) in filteredWeeks" :key="i">
             <td>{{ item.unitNumber }}</td>
             <td>{{ item.weekNumber }}</td>
-            <td>#module</td>
             <td>{{ item.bedrooms }}</td>
-            <td>#season</td>
+            <td>{{ item.season }}</td>
             <td>{{ item.sellPrice | toCurrency }}</td>
             <!-- <td>{{ item.region ? item.region.regionName : "" }}</td>
             <td>{{ item.resort ? item.resort.resortName : "" }}</td>
 
             <td>{{ item.arrivalDate | toDate }}</td>
-            <td>{{ item.departureDate | toDate }}</td> -->
+            <td>{{ item.departureDate | toDate }}</td>-->
 
             <!-- <td>{{item.status ? item.status.description : ''}}</td> -->
 
             </td>
             <!-- <div class="col-md-12">
                 <button type="button" class="btn btn-b-n" >View</button>
-              </div> -->
+            </div>-->
           </tr>
         </tbody>
       </table>
 export default {
   props: {
     resortCode: undefined,
-    userId: undefined
+    userId: undefined,
   },
   components: {},
   computed: {
     ...mapState("weekList", ["weeks", "status"]),
     ...mapGetters({
       filteredWeeks: "weekList/filteredWeeks",
-      getRegions: "weekList/getRegions"
-    })
+      getRegions: "weekList/getRegions",
+    }),
   },
   mounted() {
     if (this.resortCode) {
     View(item) {
       this.$router.push(`/resort/${item.resort.resortCode}/${item.unitNumber}`);
     },
-    ...mapActions("weekList", ["getWeeks", "applyResortFilter"])
-  }
+    ...mapActions("weekList", ["getWeeks", "applyResortFilter"]),
+  },
 };
 </script>
 

src/components/timeshare/resort/carouselSection.vue

       <carousel
         :nav="false"
         :dots="false"
-        :items="1"
+        :items="10"
         :autoplay="true"
         :loop="true"
         :autoHeight="true"
         style="margin-top:-50px;"
         :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
       >
-        <img
-          class="item"
-          style="object-fit:cover"
-          v-for="(image, i) in resortImages"
-          :src="image"
-          :key="i"
-        />
+        <div v-for="(image, i) in resortImages" :key="i">
+          <img class="item" style="object-fit:cover" :src="image" :key="i" />
+        </div>
       </carousel>
     </div>
   </section>
 import carousel from "vue-owl-carousel";
 export default {
   components: {
-    carousel
+    carousel,
   },
   props: {
-    resortImages: {}
-  }
+    resortImages: {},
+  },
 };
 </script>
 

src/components/timeshare/resort/resortPage.vue

 export default {
   components: {
     carouselSection,
-    contentSection
+    contentSection,
   },
   data() {
     return {
-      boolLoaded: false
+      boolLoaded: false,
     };
   },
   props: {
-    resortCode: {}
+    resortCode: {},
   },
   async created() {
     this.initResort(this.resortCode).then(() => {
       return this.resort
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
         : "";
-    }
+    },
   },
   methods: {
     ...mapActions("resort", ["initResort"]),
     routerGoTo(goto) {
       this.$router.push(goto);
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/timeshare/searchTimeshare.vue

     <h2>Filter Weeks</h2>
     <p>*Select at least 1 filter field</p>
     <div class="input-group mt-2">
-      <label v-if="selectedSeason === null" class="uniSelectLabel" for="season">Season</label>
-      <select class="form-control" name="season" id="season" v-model="selectedSeason">
-        <option v-for="season in seasons" :key="season.id" :value="season">
-          {{ season.name }}
-        </option>
+      <label v-if="!filter.season" class="uniSelectLabel" for="season">Season</label>
+      <select class="form-control" name="season" id="season" v-model="filter.season">
+        <option v-for="season in seasons" :key="season.id" :value="season">{{ season.name }}</option>
       </select>
     </div>
     <div class="input-group mt-2">
-      <label v-if="!filter.bedrooms" class="uniSelectLabel" for="weekInfoRegionSelect"
-        >Bedrooms</label
-      >
+      <label v-if="!filter.bedrooms" class="uniSelectLabel" for="weekInfoRegionSelect">Bedrooms</label>
       <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
         <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
       </select>
       v-model="filter.maxPrice"
     />
     <p class="mt-2">
-      Filter Arrival Date from
+      Date from
       <input
         type="date"
         name="arrival-from"
       />
     </p>
     <p>
-      Filter Arrival Date to
+      Date to
       <input
         type="date"
         name="arrival-to"
         class="form-control my-1"
         id="arrival-to"
         placeholder="mm/dd/yy"
+        v-model="filter.ddate"
       />
     </p>
-    <div class="btn-white-border"><i class="fa fa-search"></i> FILTER</div>
+    <button class="btn-white-border" @click="ClearFilter()">
+      <i class="fa fa-eraser"></i> CLEAR
+    </button>
+    <!-- <div class="btn-white-border">
+      <i class="fa fa-search"></i> FILTER
+    </div>-->
   </div>
 </template>
 
 export default {
   props: {
     hideTop: undefined,
-    keyword: undefined
+    keyword: undefined,
   },
   data() {
     return {
-      selectedSeason: null
+      selectedSeason: null,
     };
   },
   created() {
       "regions",
       "detailedRegion",
       "resortBedrooms",
-      "maxSleep"
+      "maxSleep",
     ]),
-    ...mapState("weekList", ["filter"]),
+    ...mapState("weekList", ["filter", "searchParams"]),
     ...mapState("timeshare", ["seasons"]),
     filteredResorts() {
       if (this.selectedRegion) {
-        const list = _.find(this.detailedRegion, i => i.region.regionName === this.selectedRegion)
-          .children;
-        return _.sortBy(list, r => r.resortName);
+        const list = _.find(
+          this.detailedRegion,
+          (i) => i.region.regionName === this.selectedRegion
+        ).children;
+        return _.sortBy(list, (r) => r.resortName);
       }
       return this.resorts;
-    }
+    },
   },
   methods: {
     ...mapActions("timeshare", ["initTimeshare"]),
     ...mapActions("weekList", ["clearFilter"]),
-    ...mapActions("timeshare", ["getSeasons"])
-  }
+    ...mapActions("timeshare", ["getSeasons"]),
+    ClearFilter() {
+      this.filter.season = null;
+      this.filter.bedrooms = null;
+      this.filter.maxPrice = null;
+      this.filter.date = null;
+      this.filter.ddate = null;
+    },
+  },
 };
 </script>
 

src/router/index.js

 
 import ResortPage from "../components/timeshare/resort/resortPage.vue";
 import UnitPage from "../components/timeshare/resort/unit/unitPage.vue";
+import ToBuySearch from "../components/timeshare/buy/toBuySearchResults.vue";
 
 import ContactUs from "../components/misc/contactUs.vue";
 import PrivacyPolicy from "../components/misc//privacyPolicy/privacyPolicyPage.vue";
       path: "/CampaignExpired",
       name: "CampaignExpired",
       component: MarketingPageExp
+    },
+    {
+      path: "/toBuyResults",
+      name: "ToBuySearch",
+      component: ToBuySearch
     }
   ]
 });

src/store/modules/timeshare/weekList.js

 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
 import axios from "axios";
-import _ from "lodash";
+import _, { min } from "lodash";
 
 export default {
   namespaced: true,
     weeks: [],
     status: undefined,
     filter: {
+      season: undefined,
       status: undefined,
       region: undefined,
       resort: undefined,
       bedrooms: undefined,
       date: undefined,
+      ddate: undefined,
       minPrice: undefined,
       maxPrice: undefined,
       keyword: undefined
     },
     prevFilter: undefined,
-    difFilter: undefined
+    difFilter: undefined,
+    searchParams: {
+      region: undefined,
+      resort: undefined,
+      fromDate: undefined,
+      toDate: undefined
+    }
   },
   mutations: {
     onLoading(state) {
           );
         }
         if (filter.bedrooms) {
-          weekList = _.filter(weekList, x => x.bedrooms && x.bedrooms == filter.bedrooms);
+          if (filter.bedrooms === "Studio") {
+            weekList = _.filter(weekList, x => (x.bedrooms && x.bedrooms === "0") || !x.bedrooms);
+          } else {
+            weekList = _.filter(weekList, x => x.bedrooms && x.bedrooms === filter.bedrooms);
+          }
         }
         if (filter.date) {
           const minDate = new Date(filter.date);
-          minDate.setDate(minDate.getDate() - 7);
-          const maxDate = new Date(filter.date);
-          maxDate.setDate(maxDate.getDate() + 7);
-          weekList = _.filter(
-            weekList,
-            x =>
-              new Date(x.arrivalDate) &&
-              new Date(x.departureDate) &&
-              new Date(x.arrivalDate) >= minDate &&
-              new Date(x.arrivalDate) <= maxDate
-          );
+          minDate.setDate(minDate.getDate() - 1);
+          weekList = _.filter(weekList, x => new Date(x.arrivalDate) >= minDate);
+        }
+        if (filter.ddate) {
+          const maxDate = new Date(filter.ddate);
+          weekList = _.filter(weekList, x => new Date(x.departureDate) <= maxDate);
         }
         if (filter.minPrice && filter.minPrice !== 0) {
           weekList = _.filter(weekList, x => x.sellPrice && x.sellPrice >= filter.minPrice);
         if (filter.maxPrice && filter.maxPrice !== 0) {
           weekList = _.filter(weekList, x => x.sellPrice && x.sellPrice <= filter.maxPrice);
         }
+        if (filter.season) {
+          weekList = _.filter(weekList, x => x.season === filter.season.name);
+        }
       }
       return _.sortBy(_.sortBy(weekList, "arrivalDate"), "resort.resortName");
     },
                 resortName: rootGetters["timeshare/getResortName"](code),
                 resortCode: code
               };
-              arr2.push(myItem);
             }
           }
           commit("setWeeks", arr2);
         })
         .catch(console.error);
     },
+    // getWeeks({ commit }) {
+    //   axios.get("api/timeshareweek").then(result =>
+    //     commit(
+    //       "setWeeks",
+    //       result.data.filter(x => x.region !== null)
+    //     )
+    //   );
+    // },
     clearFilter({ commit }, filter) {
       commit("onClearFilter", filter);
     }