Added timeshare filter fix

src/components/shared/searchTab.vue

@@ -99,7 +99,6 @@
               </div>
             </div>
           </div>
-          {{selectedPropertyType}}
           <div class="col-md-12">
             <button type="submit" class="btn btn-b-n" @click="Search">Search</button>
           </div>

src/components/timeshare/buy/buyPage.vue

@@ -13,10 +13,7 @@
             />
           </div>
           <div class="sinse-box">
-            <h3 class="sinse-title">
-              Timeshare To Buy
-              <span></span>
-            </h3>
+            <h3 class="sinse-title">Timshare</h3>
           </div>
         </div>
 
@@ -108,14 +105,6 @@
                     >See map bigger</a>
                   </small>
                 </div>
-                <div
-                  class="tab-pane fade"
-                  id="resort-layout"
-                  role="tabpanel"
-                  aria-labelledby="resort-layout-tab"
-                >
-                  <img class="img-fluid" :src="layout" alt="Resort Layout" />
-                </div>
               </div>
             </div>
           </div>

src/components/timeshare/buy/weekListComponent.vue

@@ -1,62 +1,72 @@
 <template>
   <div>
-    <table class="table table-bordered">
-      <thead>
-        <tr>
-          <th>Region</th>
-          <th>Resort</th>
-          <th>Unit Number</th>
-          <th>Week Number</th>
-          <th>Arrival Date</th>
-          <th>Departure Date</th>
-          <th>Bedrooms</th>
-          <th>Price</th>
-          <th>Status</th>
-          <th>Interested</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(item, i) in filteredWeeks" :key="i">
-          <td>{{item.region ? item.region.regionName : ''}}</td>
-          <td>{{item.resort ? item.resort.resortName : ''}}</td>
-          <td>{{item.unitNumber}}</td>
-          <td>{{item.weekNumber}}</td>
-          <td>{{item.arrivalDate}}</td>
-          <td>{{item.departureDate}}</td>
-          <td>{{item.bedrooms}}</td>
-          <td>{{item.sellPrice | toCurrency}}</td>
-          <td>{{item.status ? item.status.description : ''}}</td>
-          <td>
-            <div class="col-md-12">
-              <button
-                type="button"
-                class="btn btn-b-n"
-                data-toggle="modal"
-                data-target="#myModal"
-              >Make an Offer</button>
-              <div id="myModal" class="modal fade" role="dialog">
-                <div class="modal-dialog modal-lg">
-                  <!-- Modal content-->
-                  <div class="modal-content">
-                    <div class="modal-header">
-                      <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    </div>
-                    <div padding-left="20px">
-                      <makeOffer
-                        name="MakeOffer"
-                        :isMakeOffer="true"
-                        :isProperty="false"
-                        :item="item"
-                      />
+    <div v-if="filteredWeeks.length > 0">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>Region</th>
+            <th>Resort</th>
+            <th>Unit Number</th>
+            <th>Week Number</th>
+            <th>Arrival Date</th>
+            <th>Departure Date</th>
+            <th>Bedrooms</th>
+            <th>Price</th>
+            <th>Status</th>
+            <th>Interested</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in filteredWeeks" :key="i">
+            <td>{{item.region ? item.region.regionName : ''}}</td>
+            <td>{{item.resort ? item.resort.resortName : ''}}</td>
+            <td>{{item.unitNumber}}</td>
+            <td>{{item.weekNumber}}</td>
+            <td>{{item.arrivalDate | toDate}}</td>
+            <td>{{item.departureDate | toDate}}</td>
+            <td>{{item.bedrooms}}</td>
+            <td>{{item.sellPrice | toCurrency}}</td>
+            <td>{{item.status ? item.status.description : ''}}</td>
+            <td>
+              <div class="col-md-12">
+                <button
+                  type="button"
+                  class="btn btn-b-n"
+                  data-toggle="modal"
+                  data-target="#myModal"
+                >Make an Offer</button>
+                <div id="myModal" class="modal fade" role="dialog">
+                  <div class="modal-dialog modal-lg">
+                    <!-- Modal content-->
+                    <div class="modal-content">
+                      <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                      </div>
+                      <div padding-left="20px">
+                        <makeOffer
+                          name="MakeOffer"
+                          :isMakeOffer="true"
+                          :isProperty="false"
+                          :item="item"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div v-else>
+      <div class="row">
+        <div class="col-md-12">
+          <hr />No Results Found
+          <hr />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -64,6 +74,9 @@ import { mapState, mapActions, mapGetters } from 'vuex';
 import makeOffer from '../../processFlow/makeOffer.vue';
 
 export default {
+  props: {
+    resortCode: undefined,
+  },
   components: {
     makeOffer,
   },
@@ -74,10 +87,13 @@ export default {
     }),
   },
   mounted() {
+    if (this.resortCode) {
+      this.applyResortFilter(this.resortCode);
+    }
     this.getWeeks();
   },
   methods: {
-    ...mapActions('weekList', ['getWeeks', 'addDummyWeek']),
+    ...mapActions('weekList', ['getWeeks', 'applyResortFilter']),
   },
 };
 </script>

src/components/timeshare/resort/resortPage.vue

@@ -30,59 +30,7 @@
       <div class="row">
         <div class="col-md-3">
           <h4>Filter Resort</h4>
-          <form
-            id="mainForm"
-            method="POST"
-            action="/filter"
-            accept-charset="UTF-8"
-            enctype="multipart/form-data"
-          >
-            <div class="form-group">
-              <select class="form-control" name="season">
-                <option value>
-                  <span style="color:white;">Season</span>
-                </option>
-              </select>
-            </div>
-            <div class="form-group">
-              <select class="form-control" name="bedrooms">
-                <option value>Bedrooms</option>
-              </select>
-            </div>
-
-            <div class="form-group">
-              <input
-                class="form-control"
-                type="number"
-                step="any"
-                id="minPrice"
-                name="minPrice"
-                placeholder="Minimum Price"
-              />
-            </div>
-            <div class="form-group">
-              <input
-                class="form-control"
-                type="number"
-                step="any"
-                id="maxPrice"
-                name="maxPrice"
-                placeholder="Maximum Price"
-              />
-            </div>
-            <div class="form-group">
-              <label>Filter Arrival Date From</label>
-              <input type="date" class="form-control" name="arrivaldate" value />
-            </div>
-            <div class="form-group">
-              <label>Filter Arrival Date To</label>
-              <input type="date" class="form-control" name="arrivaldate" value />
-            </div>
-
-            <br />
-
-            <button class="btn btn-b-n" type="submit">Search</button>
-          </form>
+          <FilterComponent :hideTop="true" />
         </div>
         <div class="col-md-9">
           <WeekList :resortCode="resortCode" />
@@ -163,6 +111,7 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import WeekList from '../buy/weekListComponent.vue';
+import FilterComponent from '../searchTimeshare.vue';
 
 export default {
   props: {
@@ -170,6 +119,7 @@ export default {
   },
   components: {
     WeekList,
+    FilterComponent,
   },
   mounted() {
     this.initResort(this.resortCode);

src/components/timeshare/searchTimeshare.vue

@@ -7,7 +7,7 @@
       accept-charset="UTF-8"
       enctype="multipart/form-data"
     >
-      <div class="form-group text-left">
+      <div class="form-group text-left" v-if="!hideTop">
         <label>Province</label>
         <div class="input-group mb-3">
           <div class="input-group-prepend">
@@ -25,7 +25,7 @@
           </div>
         </div>
       </div>
-      <div class="form-group text-left">
+      <div class="form-group text-left" v-if="!hideTop">
         <label>Resort Name</label>
         <div class="input-group mb-3">
           <div class="input-group-prepend">
@@ -34,7 +34,10 @@
             </span>
           </div>
           <select class="form-control" name="resort" id="resort" v-model="filter.resort">
-            <option v-for="(item, i) in filteredResorts" :key="i" :value="item">{{item.resortName}}</option>
+            <option v-for="(item, i) in filteredResorts" :key="i" :value="item">
+              {
+              {item.resortName}}
+            </option>
           </select>
           <div class="input-group-append" @click="clearFilter('resort')">
             <span class="input-group-text cursor-pointer" style="color: #60CBEB">
@@ -140,6 +143,9 @@ import { mapState, mapActions } from 'vuex';
 import _ from 'lodash';
 
 export default {
+  props: {
+    hideTop: undefined,
+  },
   created() {
     this.initTimeshare();
   },

src/main.js

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-template */
 import Vue from 'vue';
 import EvaIcons from 'vue-eva-icons';
 import App from './App.vue';
@@ -18,6 +19,16 @@ Vue.filter('toCurrency', (value) => {
   return `R ${formatter.format(value)}`;
 });
 
+const myPad = function (value, pattern) {
+  const val = '' + value;
+  return pattern.substring(0, pattern.length - val.length) + val;
+};
+
+Vue.filter('toDate', (value) => {
+  const date = new Date(value);
+  return `${date.getFullYear()}/${myPad(date.getMonth(), '00')}/${myPad(date.getDay(), '00')}`;
+});
+
 new Vue({
   render: h => h(App),
   router,

src/store/modules/timeshare/timeshare.js

@@ -185,5 +185,15 @@ export default {
         }
       }
     },
+    saveWeek({
+      commit,
+    }, week) {
+      axios
+        .post('/api/timeshareweek', week)
+        .then(result => commit('addDetailedRegion', {
+          week,
+        }))
+        .catch(console.error);
+    },
   },
 };

src/store/modules/timeshare/weekList.js

@@ -1,3 +1,4 @@
+/* eslint-disable eqeqeq */
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
 import axios from 'axios';
@@ -26,6 +27,9 @@ export default {
     addWeek(state, week) {
       state.weeks.push(week);
     },
+    applyResort(state, resort) {
+      state.filter.resort = resort;
+    },
   },
   getters: {
     filteredWeeks: (state) => {
@@ -44,8 +48,7 @@ export default {
             && x.resort.resortCode === filter.resort.resortCode);
         }
         if (filter.bedrooms) {
-          weekList = _.filter(weekList, x => x.bedrooms
-            && x.bedrooms === filter.bedrooms);
+          weekList = _.filter(weekList, x => x.bedrooms && x.bedrooms == filter.bedrooms);
         }
         if (filter.date) {
           const minDate = new Date(filter.date);
@@ -58,19 +61,25 @@ export default {
             && new Date(x.arrivalDate) <= maxDate);
         }
         if (filter.minPrice && filter.minPrice !== 0) {
-          weekList = _.filter(weekList, x => x.sellingPrice
-            && x.sellingPrice >= filter.minPrice);
+          weekList = _.filter(weekList, x => x.sellPrice
+            && x.sellPrice >= filter.minPrice);
         }
         if (filter.maxPrice && filter.maxPrice !== 0) {
-          weekList = _.filter(weekList, x => x.sellingPrice
-            && x.sellingPrice <= filter.maxPrice);
+          weekList = _.filter(weekList, x => x.sellPrice
+            && x.sellPrice <= filter.maxPrice);
         }
       }
-
       return weekList;
     },
   },
   actions: {
+    applyResortFilter({
+      commit,
+    }, resortCode) {
+      commit('applyResort', {
+        resortCode,
+      });
+    },
     getWeeks({
       commit,
     }) {