To Buy Resorts Search Screen

src/App.vue

@@ -22,13 +22,13 @@ export default {
   name: "app",
   data() {
     return {
-      isLandingPage: false
+      isLandingPage: false,
     };
   },
   components: {
     SearchTab,
     NavBar,
-    FooterSection
+    FooterSection,
   },
 
   methods: {
@@ -37,8 +37,8 @@ export default {
     },
     setLandingPage(item) {
       this.isLandingPage = item;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -137,6 +137,9 @@ html {
 .pendingOffer {
   background-color: #ff8344;
 }
+.noWeeks {
+  background-color: #ff4444;
+}
 </style>
 
 <style scoped>

src/components/timeshare/buy/carouselSection.vue

@@ -138,7 +138,8 @@ export default {
       }
 
       if (!this.searchParams.resort) {
-        return;
+        this.searchParams.regionObj = this.regionObj;
+        this.$router.push("/timeshareToByResults");
       }
 
       this.$router.push(`/resort/${this.searchParams.resort.resortCode}`);

src/components/timeshare/buy/searchResults.vue

@@ -0,0 +1,62 @@
+<template>
+  <section>
+    <div v-if="resorts.length > 0" class="row justify-content-md-center">
+      <div class="col-lg-3 col-md-6 col-sm-6" v-for="resort in resorts" :key="resort.id">
+        <div>
+          <br />
+          <div class="portfolio-item">
+            <img
+              v-if="resort.resortImage != ''"
+              style="width:255px; height:255px; object-fit: cover;"
+              :src="resort.resortImage"
+              alt
+            />
+            <img
+              v-else
+              style="width:255px; height:255px; object-fit: cover;"
+              src="../../../../public/img/blankImg.png"
+              alt
+            />
+            <p
+              v-if="resort.weeksAvailable == 1"
+              class="normalText"
+            >{{ resort.weeksAvailable }} Week Available</p>
+            <p
+              v-else-if="resort.weeksAvailable > 1"
+              class="normalText"
+            >{{ resort.weeksAvailable }} Weeks Available</p>
+            <p v-else class="noWeeks">No Weeks Available</p>
+            <h4 class="mt-3">{{ resort.resortName }}</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="`/resort/${resort.resortCode}`"
+              :disable="resort.resortCode && resort.resortCode != ''"
+            >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>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    resorts: [],
+  },
+};
+</script>

src/components/timeshare/buy/toBuySearchResults.vue

@@ -5,47 +5,92 @@
         <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">
+        <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
+          <li class="nav-item">
+            <a
+              class="nav-link active"
+              id="home-tab"
+              data-toggle="tab"
+              href="#facilities"
+              role="tab"
+              aria-controls="home"
+              aria-selected="true"
+            >
+              <h2>With Availability</h2>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              id="profile-tab"
+              data-toggle="tab"
+              href="#directions"
+              role="tab"
+              aria-controls="profile"
+              aria-selected="false"
+            >
+              <h2>All</h2>
+            </a>
+          </li>
+        </ul>
+        <div class="tab-content" id="myTabContent">
           <div
-            class="col-lg-3 col-md-6 col-sm-6"
-            v-for="currentProperty in properties"
-            :key="currentProperty.id"
+            class="tab-pane fade show active"
+            id="facilities"
+            role="tabpanel"
+            aria-labelledby="home-tab"
           >
-            <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>
+            <searchPanal :resorts="Available" />
           </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 class="tab-pane fade" id="directions" role="tabpanel" aria-labelledby="profile-tab">
+            <searchPanal :resorts="resorts" />
           </div>
-        </div>-->
+        </div>
+        <div v-if="wait" id="preloader"></div>
       </div>
     </section>
   </main>
 </template>
 
+<script>
+import { mapState, mapActions } from "vuex";
+import searchPanal from "./searchResults";
+import _ from "lodash";
+
+export default {
+  name: "ToBuySearchResults",
+  components: {
+    searchPanal,
+  },
+  data() {
+    return {
+      wait: false,
+    };
+  },
+  methods: {
+    ...mapActions("resort", ["getResorts", "getImage1"]),
+    //methods
+  },
+  computed: {
+    ...mapState("weekList", ["searchParams"]),
+    ...mapState("resort", ["resorts"]),
+    Available() {
+      let resortList = this.resorts;
+      resortList = _.filter(resortList, (x) => x.weeksAvailable > 0);
+      return resortList;
+    },
+  },
+  mounted() {
+    this.wait = true;
+    this.getResorts(this.searchParams.regionObj.regionCode)
+      .then((fulfilled) => {
+        this.wait = false;
+      })
+      .catch((error) => {
+        this.wait = false;
+      });
+  },
+};
+</script>
+
 

src/components/timeshare/resort/contentSection.vue

@@ -3,13 +3,13 @@
     <div class="container">
       <div class="row" id="resort-profile">
         <div class="col-md-4">
-          <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt="" />
+          <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
           <div class="row no-gutters">
             <div class="col-6">
-              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt="" />
+              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
             </div>
             <div class="col-6">
-              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt="" />
+              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
             </div>
           </div>
           <gallerySection :images="images" />
@@ -18,53 +18,7 @@
         <div class="col-md-8 p-5 resort-profile">
           <h2>{{ resort.prName }}</h2>
           <WeekList :resortCode="resortCode" />
-          <!-- <div>
-            <table class="table table-striped">
-              <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>
-                  <th scope="col">Price Incl VAT</th>
-                  <th scope="col">Interested?</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th scope="row">#</th>
-                  <td>#week</td>
-
-                  <td>#Beds</td>
-
-                  <td>#price</td>
-                  <td><a href="#" class="btn-solid-blue">YES</a></td>
-                </tr>
-                <tr>
-                  <th scope="row">#</th>
-                  <td>#week</td>
-                  <td>#module</td>
-                  <td>#Beds</td>
-                  <td>#season</td>
-                  <td>#price</td>
-                  <td><a href="#" class="btn-solid-blue">YES</a></td>
-                </tr>
-                <tr>
-                  <th scope="row">#</th>
-                  <td>#week</td>
-                  <td>#module</td>
-                  <td>#Beds</td>
-                  <td>#season</td>
-                  <td>#price</td>
-                  <td><a href="#" class="btn-solid-blue">YES</a></td>
-                </tr>
-              </tbody>
-            </table>
-          </div> -->
-          <p>
-            {{ resort.prNotes }}
-          </p>
+          <p>{{ resort.prNotes }}</p>
           <div class="d-flex mt-3">
             <iframe
               width="100%"
@@ -100,13 +54,13 @@ import gallerySection from "./gallerySection";
 
 export default {
   props: {
-    resortCode: {}
+    resortCode: {},
   },
   components: {
     WeekList,
     FilterComponent,
     ResortImages,
-    gallerySection
+    gallerySection,
   },
   async mounted() {
     await this.initResort(this.resortCode);
@@ -115,7 +69,7 @@ export default {
   data() {
     return {
       index: null,
-      boolLoaded: false
+      boolLoaded: false,
     };
   },
   computed: {
@@ -126,14 +80,14 @@ export default {
       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/router/index.js

@@ -422,7 +422,7 @@ export default new Router({
       component: EnquireNow
     },
     {
-      path: "/toBuyResults",
+      path: "/timeshareToByResults",
       name: "ToBuySearch",
       component: ToBuySearch
     }

src/store/modules/timeshare/resort.js

@@ -5,6 +5,7 @@ import axios from "axios";
 export default {
   namespaced: true,
   state: {
+    resorts: [],
     resort: {},
     images: [],
     layout: "",
@@ -27,6 +28,9 @@ export default {
     },
     setLayout(state, image) {
       state.layout = `data:image/jpeg;base64,${image}`;
+    },
+    setResorts(state, list) {
+      state.resorts = list;
     }
   },
   getters: {},
@@ -108,6 +112,17 @@ export default {
         )
         .then(result => commit("setLayout", result.data))
         .catch(console.error);
+    },
+    getResorts({ commit }, regionCode) {
+      return new Promise((resolve, reject) => {
+        axios
+          .get(`/api/resort/${regionCode}`)
+          .then(result => {
+            commit("setResorts", result.data);
+            resolve();
+          })
+          .catch(error => reject(new Error(error.message)));
+      });
     }
   }
 };

src/store/modules/timeshare/weekList.js

@@ -27,8 +27,7 @@ export default {
     searchParams: {
       region: undefined,
       resort: undefined,
-      fromDate: undefined,
-      toDate: undefined
+      regionObj: undefined
     }
   },
   mutations: {