Filtering of timeshare

package.json

@@ -14,6 +14,7 @@
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "datatables.net": "^1.10.19",
+    "jquery": "^3.4.1",
     "lodash": "^4.17.15",
     "material-design-icons-iconfont": "^3.0.3",
     "node-sass": "^4.12.0",

public/js/main.js

@@ -1,150 +1,164 @@
 (function ($) {
-  "use strict";
   
+
   // Preloader
-  $(window).on('load', function () {
-    if ($('#preloader').length) {
-      $('#preloader').delay(100).fadeOut('slow', function () {
+  $(window).on('load', () => {
+    if ($('#preloader')) {
+      $('#preloader').fadeOut('slow', function () {
         $(this).remove();
       });
     }
   });
 
   // Back to top button
-  $(window).scroll(function() {
+  $(window).scroll(function () {
     if ($(this).scrollTop() > 100) {
       $('.back-to-top').fadeIn('slow');
     } else {
       $('.back-to-top').fadeOut('slow');
     }
   });
-  $('.back-to-top').click(function(){
-    $('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
+  $('.back-to-top').click(() => {
+    $('html, body').animate({
+      scrollTop: 0,
+    }, 1500, 'easeInOutExpo');
     return false;
   });
-  
-	var nav = $('nav');
-	var navHeight = nav.outerHeight();
 
-	/*--/ ScrollReveal /Easy scroll animations for web and mobile browsers /--*/
-	window.sr = ScrollReveal();
-	sr.reveal('.foo', { duration: 1000, delay: 15 });
+  const nav = $('nav');
+  const navHeight = nav.outerHeight();
 
-	/*--/ Carousel owl /--*/
-	$('#carousel').owlCarousel({
-		loop: true,
-		margin: -1,
-		items: 1,
-		nav: true,
-		navText: ['<i class="ion-ios-arrow-back" aria-hidden="true"></i>', '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>'],
-		autoplay: true,
-		autoplayTimeout: 3000,
-		autoplayHoverPause: true
-	});
+  /* --/ ScrollReveal /Easy scroll animations for web and mobile browsers /--*/
+  window.sr = ScrollReveal();
+  sr.reveal('.foo', {
+    duration: 1000,
+    delay: 15,
+  });
 
-	/*--/ Animate Carousel /--*/
-	$('.intro-carousel').on('translate.owl.carousel', function () {
-		$('.intro-content .intro-title').removeClass('zoomIn animated').hide();
-		$('.intro-content .intro-price').removeClass('fadeInUp animated').hide();
-		$('.intro-content .intro-title-top, .intro-content .spacial').removeClass('fadeIn animated').hide();
-	});
+  /* --/ Carousel owl /--*/
+  $('#carousel').owlCarousel({
+    loop: true,
+    margin: -1,
+    items: 1,
+    nav: true,
+    navText: ['<i class="ion-ios-arrow-back" aria-hidden="true"></i>',
+      '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>',
+    ],
+    autoplay: true,
+    autoplayTimeout: 3000,
+    autoplayHoverPause: true,
+  });
 
-	$('.intro-carousel').on('translated.owl.carousel', function () {
-		$('.intro-content .intro-title').addClass('zoomIn animated').show();
-		$('.intro-content .intro-price').addClass('fadeInUp animated').show();
-		$('.intro-content .intro-title-top, .intro-content .spacial').addClass('fadeIn animated').show();
-	});
+  /* --/ Animate Carousel /--*/
+  $('.intro-carousel').on('translate.owl.carousel', () => {
+    $('.intro-content .intro-title').removeClass('zoomIn animated').hide();
+    $('.intro-content .intro-price').removeClass('fadeInUp animated').hide();
+    $('.intro-content .intro-title-top, .intro-content .spacial').removeClass(
+      'fadeIn animated'
+)
+      .hide();
+  });
 
-	/*--/ Navbar Collapse /--*/
-	$('.navbar-toggle-box-collapse').on('click', function () {
-		$('body').removeClass('box-collapse-closed').addClass('box-collapse-open');
-	});
-	$('.close-box-collapse, .click-closed').on('click', function () {
-		$('body').removeClass('box-collapse-open').addClass('box-collapse-closed');
-		$('.menu-list ul').slideUp(700);
-	});
+  $('.intro-carousel').on('translated.owl.carousel', () => {
+    $('.intro-content .intro-title').addClass('zoomIn animated').show();
+    $('.intro-content .intro-price').addClass('fadeInUp animated').show();
+    $('.intro-content .intro-title-top, .intro-content .spacial').addClass('fadeIn animated')
+      .show();
+  });
 
-	/*--/ Navbar Menu Reduce /--*/
-	$(window).trigger('scroll');
-	$(window).bind('scroll', function () {
-		var pixels = 50;
-		var top = 1200;
-		if ($(window).scrollTop() > pixels) {
-			$('.navbar-default').addClass('navbar-reduce');
-			$('.navbar-default').removeClass('navbar-trans');
-		} else {
-			$('.navbar-default').addClass('navbar-trans');
-			$('.navbar-default').removeClass('navbar-reduce');
-		}
-		if ($(window).scrollTop() > top) {
-			$('.scrolltop-mf').fadeIn(1000, "easeInOutExpo");
-		} else {
-			$('.scrolltop-mf').fadeOut(1000, "easeInOutExpo");
-		}
-	});
+  /* --/ Navbar Collapse /--*/
+  $('.navbar-toggle-box-collapse').on('click', () => {
+    $('body').removeClass('box-collapse-closed').addClass('box-collapse-open');
+  });
+  $('.close-box-collapse, .click-closed').on('click', () => {
+    $('body').removeClass('box-collapse-open').addClass('box-collapse-closed');
+    $('.menu-list ul').slideUp(700);
+  });
 
-	/*--/ Property owl /--*/
-	$('#property-carousel').owlCarousel({
-		loop: true,
-		margin: 30,
-		responsive: {
-			0: {
-				items: 1,
-			},
-			769: {
-				items: 2,
-			},
-			992: {
-				items: 3,
-			}
-		}
-	});
+  /* --/ Navbar Menu Reduce /--*/
+  $(window).trigger('scroll');
+  $(window).bind('scroll', () => {
+    let pixels = 50;
+    let top = 1200;
+    if ($(window).scrollTop() > pixels) {
+      $('.navbar-default').addClass('navbar-reduce');
+      $('.navbar-default').removeClass('navbar-trans');
+    } else {
+      $('.navbar-default').addClass('navbar-trans');
+      $('.navbar-default').removeClass('navbar-reduce');
+    }
+    if ($(window).scrollTop() > top) {
+      $('.scrolltop-mf').fadeIn(1000, 'easeInOutExpo');
+    } else {
+      $('.scrolltop-mf').fadeOut(1000, 'easeInOutExpo');
+    }
+  });
 
-	/*--/ Property owl owl /--*/
-	$('#property-single-carousel').owlCarousel({
-		loop: true,
-		margin: 0,  
-		nav: true,
-		navText: ['<i class="ion-ios-arrow-back" aria-hidden="true"></i>', '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>'],
-		responsive: {
-			0: {
-				items: 1,
-			}
-		}
-	});
+  /* --/ Property owl /--*/
+  $('#property-carousel').owlCarousel({
+    loop: true,
+    margin: 30,
+    responsive: {
+      0: {
+        items: 1,
+      },
+      769: {
+        items: 2,
+      },
+      992: {
+        items: 3,
+      },
+    },
+  });
 
-	/*--/ News owl /--*/
-	$('#new-carousel').owlCarousel({
-		loop: true,
-		margin: 30,
-		responsive: {
-			0: {  
-				items: 1,
-			},
-			769: {
-				items: 2,
-			},
-			992: {
-				items: 3,
-			}
-		}
-	});
+  /* --/ Property owl owl /--*/
+  $('#property-single-carousel').owlCarousel({
+    loop: true,
+    margin: 0,
+    nav: true,
+    navText: ['<i class="ion-ios-arrow-back" aria-hidden="true"></i>',
+      '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>',
+    ],
+    responsive: {
+      0: {
+        items: 1,
+      },
+    },
+  });
 
-	/*--/ Testimonials owl /--*/
-	$('#testimonial-carousel').owlCarousel({
-		margin: 0,
-		autoplay: true,
-		nav: true,
-		animateOut: 'fadeOut',
-		animateIn: 'fadeInUp',
-		navText: ['<i class="ion-ios-arrow-back" aria-hidden="true"></i>', '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>'],
-		autoplayTimeout: 4000,
-		autoplayHoverPause: true,
-		responsive: {
-			0: {
-				items: 1,
-			}
-		}
-	});
+  /* --/ News owl /--*/
+  $('#new-carousel').owlCarousel({
+    loop: true,
+    margin: 30,
+    responsive: {
+      0: {
+        items: 1,
+      },
+      769: {
+        items: 2,
+      },
+      992: {
+        items: 3,
+      },
+    },
+  });
 
-})(jQuery);
+  /* --/ Testimonials owl /--*/
+  $('#testimonial-carousel').owlCarousel({
+    margin: 0,
+    autoplay: true,
+    nav: true,
+    animateOut: 'fadeOut',
+    animateIn: 'fadeInUp',
+    navText: ['<i class="ion-ios-arrow-back" aria-hidden="true"></i>',
+      '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>',
+    ],
+    autoplayTimeout: 4000,
+    autoplayHoverPause: true,
+    responsive: {
+      0: {
+        items: 1,
+      },
+    },
+  });
+}(jQuery));

src/components/shared/searchTab.vue

@@ -99,6 +99,7 @@
               </div>
             </div>
           </div>
+          {{selectedPropertyType}}
           <div class="col-md-12">
             <button type="submit" class="btn btn-b" @click="Search">Search</button>
           </div>
@@ -148,19 +149,22 @@ export default {
       this.selectedSuburb = item;
     },
     Search() {
-      // need to see how to differenciate between properties and timeshare.
-      this.$router.push({
-        path: '/property/search',
-        query: {
-          type: this.selectedType,
-          propertyType: this.selectedPropertyType,
-          province: this.selectedProvince,
-          city: this.selectedCity,
-          suburb: this.selectedSuburb,
-          propType: this.selectedPropType,
-          keyword: this.keyword,
-        },
-      });
+      if (this.selectedPropertyType === 'timeshare') {
+        this.$router.push('/timeshare/search/');
+      } else {
+        this.$router.push({
+          path: '/property/search',
+          query: {
+            type: this.selectedType,
+            propertyType: this.selectedPropertyType,
+            province: this.selectedProvince,
+            city: this.selectedCity,
+            suburb: this.selectedSuburb,
+            propType: this.selectedPropType,
+            keyword: this.keyword,
+          },
+        });
+      }
     },
   },
 };

src/components/timeshare/buy/weekListComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <button @click="addDummyWeek" class="btn btn-primary">Add Dummy</button>
     <table class="table table-bordered">
       <thead>
         <tr>
@@ -15,36 +16,36 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(item, i) in weeks" :key="i">
-          <td>{{item.id}}</td>
-          <td>{{item.code}}</td>
-          <td>{{item.description}}</td>
-          <td>{{item.id}}</td>
-          <td>{{item.code}}</td>
-          <td>{{item.description}}</td>
-          <td>{{item.id}}</td>
-          <td>{{item.code}}</td>
-          <td>{{item.description}}</td>
+        <tr v-for="(item, i) in filteredWeeks" :key="i">
+          <td>{{item.resort.resortName}}</td>
+          <td>{{item.unitNumber}}</td>
+          <td>{{item.weekNumber}}</td>
+          <td>{{item.module}}</td>
+          <td>{{item.bedrooms}}</td>
+          <td>{{item.season}}</td>
+          <td>{{item.sellPrice}}</td>
+          <td>{{item.status ? item.status.description : ''}}</td>
+          <td></td>
         </tr>
       </tbody>
     </table>
   </div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 
 export default {
-  props: {
-    resortCode: undefined,
-  },
-  mounted() {
-    this.getWeeks(this.resortCode);
-  },
   computed: {
     ...mapState('weekList', ['weeks']),
+    ...mapGetters({
+      filteredWeeks: 'weekList/filteredWeeks',
+    }),
+  },
+  mounted() {
+    this.addDummyWeek();
   },
   methods: {
-    ...mapActions('weekList', ['getWeeks']),
+    ...mapActions('weekList', ['getWeeks', 'addDummyWeek']),
   },
 };
 </script>

src/components/timeshare/buy/weekListPage.vue

@@ -7,15 +7,19 @@
     <br />
     <br />
     <br />
-    <br />123
-    <br />
-    <br />
-    <br />
-    <br />123
+    {{filter}}
+    <WeekListComponent />
   </div>
 </template>
 <script>
-export default {};
+import WeekListComponent from './weekListComponent.vue';
+
+export default {
+  components: {
+    WeekListComponent,
+  },
+  computed: {},
+};
 </script>
 <style>
 </style>

src/components/timeshare/searchTimeshare.vue

@@ -7,25 +7,31 @@
       accept-charset="UTF-8"
       enctype="multipart/form-data"
     >
+      {{filter}}
       <div class="form-group text-left">
         <label>Region</label>
-        <select class="form-control" name="region" id="region" v-model="selectedRegion">
-          <option v-for="(item, i) in regions" :key="i">{{item.regionName}}</option>
+        <select class="form-control" name="region" id="region" v-model="filter.region">
+          <option v-for="(item, i) in regions" :key="i" :value="item">{{item.regionName}}</option>
         </select>
       </div>
       <div class="form-group text-left">
         <label>Resort Name</label>
-        <select class="form-control" name="resort" id="resort" v-model="selectedResort">
-          <option v-for="(item, i) in filteredResorts" :key="i">{{item.resortName}}</option>
+        <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>
         </select>
       </div>
       <div class="form-group text-left">
         <label>Bedrooms</label>
-        <select class="form-control" name="bedrooms" v-model="sellItem.bedrooms">
+        <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
           <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
         </select>
       </div>
       <hr />
+      <div class="form-group text-left">
+        <label>Date</label>
+        <input type="date" class="form-control" name="arrivaldate" v-model="filter.date" />
+      </div>
+      <hr />
       <div class="form-group">
         <div class="row">
           <div class="col-md-6 text-left">
@@ -41,6 +47,7 @@
                 id="minPrice"
                 name="minPrice"
                 placeholder="Minimum Price"
+                v-model="filter.minPrice"
               />
             </div>
           </div>
@@ -57,24 +64,13 @@
                 id="maxPrice"
                 name="maxPrice"
                 placeholder="Maximum Price"
+                v-model="filter.maxPrice"
               />
             </div>
           </div>
         </div>
       </div>
-      <hr />
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-6 text-left">
-            <label>Filter Arrival Date From</label>
-            <input type="date" class="form-control" name="arrivaldate" value />
-          </div>
-          <div class="col-md-6 text-left">
-            <label>Filter Arrival Date To</label>
-            <input type="date" class="form-control" name="arrivaldate" value />
-          </div>
-        </div>
-      </div>
+      {{filter}}
     </form>
   </div>
 </template>
@@ -84,11 +80,8 @@ import { mapState, mapActions } from 'vuex';
 import _ from 'lodash';
 
 export default {
-  data() {
-    return {
-      selectedRegion: undefined,
-      selectedResort: undefined,
-    };
+  props: {
+    filter: undefined,
   },
   created() {
     this.initTimeshare();
@@ -98,14 +91,10 @@ export default {
       'resorts',
       'regions',
       'detailedRegion',
-      'seasons',
       'resortBedrooms',
       'maxSleep',
-      'bankedEntities',
-      'sellItem',
-      'agencies',
-      'agents',
     ]),
+    ...mapState('weekList', ['filter']),
     filteredResorts() {
       if (this.selectedRegion) {
         const list = _.find(
@@ -119,9 +108,6 @@ export default {
   },
   methods: {
     ...mapActions('timeshare', ['initTimeshare']),
-    addResort(item) {
-      this.myResort.push(item);
-    },
   },
 };
 </script>

src/components/timeshare/sell/sellPage.vue

@@ -216,8 +216,8 @@
               <br />
               <br />
               <br />
-              <DetailIndividual />
             </div>
+            <DetailIndividual />
           </div>
           <hr />
           <br />

src/router/index.js

@@ -6,6 +6,7 @@ import HomePage from '../components/home/homePage.vue';
 import TimeshareBuy from '../components/timeshare/buy/buyPage.vue';
 import TimeshareSell from '../components/timeshare/sell/sellPage.vue';
 import TimeshareFAQ from '../components/timeshare/faqPage.vue';
+import TimeshareSearch from '../components/timeshare/buy/weekListPage.vue';
 
 import Login from '../components/user/loginPage.vue';
 import PrivateIndividual from '../components/user/registerPage.vue';
@@ -39,163 +40,168 @@ import PrivacyPolicy from '../components/misc/privacyPolicyPage.vue';
 Vue.use(Router);
 
 export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'Home',
-      component: HomePage,
-    },
-    {
-      path: '/about/us',
-      name: 'aboutus',
-      component: AboutUs,
-    },
-    {
-      path: '/about/timeshare',
-      name: 'abouttimeshare',
-      component: AboutTimeshare,
-    },
-    {
-      path: '/timeshare/sell',
-      name: 'TimeshareSell',
-      component: TimeshareSell,
-    },
-    {
-      path: '/timeshare/buy',
-      name: 'TimeshareBuy',
-      component: TimeshareBuy,
-    },
-    {
-      path: '/timeshare/faq',
-      name: 'TimeshareFAQ',
-      component: TimeshareFAQ,
-    },
-    {
-      path: '/user/login',
-      name: 'Login',
-      component: Login,
-    },
-    {
-      path: '/user/register',
-      name: 'PrivateIndividual',
-      component: PrivateIndividual,
-    },
-    {
-      path: '/user/registeragency',
-      name: 'Agency',
-      component: Agency,
-    },
-    {
-      path: '/property/property/:id',
-      name: 'PropertyPage',
-      component: PropertyPage,
-    },
-    {
-      path: '/property/:propertyType/search',
-      name: 'PropertySearch',
-      component: PropertySearch,
-    },
-    {
-      path: '/property/search',
-      name: 'PropertySearchTab',
-      component: PropertySearch,
-    },
-    {
-      path: '/property/:propType/:saleType',
-      name: 'PropertyNew',
-      component: PropertyEdit,
-    },
-    {
-      path: '/property/edit/:id/:propType/:saleType',
-      name: 'PropertyEdit',
-      component: PropertyEdit,
-    },
-    {
-      path: '/property/list/:propertyType/:user',
-      name: 'PropertyList',
-      component: PropertyList,
-    },
-    {
-      path: '/propertyTypes/list',
-      name: 'PropertyTypeList',
-      component: PropertyTypeList,
-    },
-    {
-      path: '/propertyType/new',
-      name: 'PropertyTypeNew',
-      component: PropertyType,
-    },
-    {
-      path: '/propertyType/:id',
-      name: 'PropertyTypeEdit',
-      component: PropertyType,
-    },
-    {
-      path: '/userDefinedGroups/list',
-      name: 'UserDefinedGroupsList',
-      component: UserDefinedGroups,
-    },
-    {
-      path: '/userDefinedGroups/userDefinedGroup/:id',
-      name: 'UserDefinedGroupEdit',
-      component: UserDefinedGroup,
-    },
-    {
-      path: '/userDefinedGroups/userDefinedGroup',
-      name: 'UserDefinedGroupNew',
-      component: UserDefinedGroup,
-    },
-    {
-      path: '/status/list',
-      name: 'StatusList',
-      component: Status,
-    },
-    {
-      path: '/status/timeshareAdmin',
-      name: 'TimeshareAdmin',
-      component: timeshareAdminPage,
-    },
-    {
-      path: '/status/tenderWeekAdmin',
-      name: 'TenderWeekAdmin',
-      component: tenderWeekAdminPage,
-    },
-    {
-      path: '/status/userManagementPage',
-      name: 'userManagementPage',
-      component: userManagementPage,
-    },
-    {
-      path: '/status/changeLogPage',
-      name: 'changeLogPage',
-      component: changeLogPage,
-    },
-    {
-      path: '/unitConfiguration/list',
-      name: 'UnitConfiguration',
-      component: UnitConfiguration,
-    },
-    {
-      path: '/contactus',
-      name: 'ContactUs',
-      component: ContactUs,
-    },
-    {
-      path: '/privacypolicy',
-      name: 'PrivacyPolicy',
-      component: PrivacyPolicy,
-    },
-    {
-      path: '/resort/:resortCode',
-      name: 'ResortPage',
-      component: ResortPage,
-      props: true,
-    },
-    {
-      path: '/resort/:resortCode/:weekId',
-      name: 'UnitPage',
-      component: UnitPage,
-      props: true,
-    },
+  routes: [{
+    path: '/',
+    name: 'Home',
+    component: HomePage,
+  },
+  {
+    path: '/about/us',
+    name: 'aboutus',
+    component: AboutUs,
+  },
+  {
+    path: '/about/timeshare',
+    name: 'abouttimeshare',
+    component: AboutTimeshare,
+  },
+  {
+    path: '/timeshare/sell',
+    name: 'TimeshareSell',
+    component: TimeshareSell,
+  },
+  {
+    path: '/timeshare/buy',
+    name: 'TimeshareBuy',
+    component: TimeshareBuy,
+  },
+  {
+    path: '/timeshare/faq',
+    name: 'TimeshareFAQ',
+    component: TimeshareFAQ,
+  },
+  {
+    path: '/user/login',
+    name: 'Login',
+    component: Login,
+  },
+  {
+    path: '/user/register',
+    name: 'PrivateIndividual',
+    component: PrivateIndividual,
+  },
+  {
+    path: '/user/registeragency',
+    name: 'Agency',
+    component: Agency,
+  },
+  {
+    path: '/property/property/:id',
+    name: 'PropertyPage',
+    component: PropertyPage,
+  },
+  {
+    path: '/property/:propertyType/search',
+    name: 'PropertySearch',
+    component: PropertySearch,
+  },
+  {
+    path: '/property/search',
+    name: 'PropertySearchTab',
+    component: PropertySearch,
+  },
+  {
+    path: '/property/:propType/:saleType',
+    name: 'PropertyNew',
+    component: PropertyEdit,
+  },
+  {
+    path: '/property/edit/:id/:propType/:saleType',
+    name: 'PropertyEdit',
+    component: PropertyEdit,
+  },
+  {
+    path: '/property/list/:propertyType/:user',
+    name: 'PropertyList',
+    component: PropertyList,
+  },
+  {
+    path: '/propertyTypes/list',
+    name: 'PropertyTypeList',
+    component: PropertyTypeList,
+  },
+  {
+    path: '/propertyType/new',
+    name: 'PropertyTypeNew',
+    component: PropertyType,
+  },
+  {
+    path: '/propertyType/:id',
+    name: 'PropertyTypeEdit',
+    component: PropertyType,
+  },
+  {
+    path: '/userDefinedGroups/list',
+    name: 'UserDefinedGroupsList',
+    component: UserDefinedGroups,
+  },
+  {
+    path: '/userDefinedGroups/userDefinedGroup/:id',
+    name: 'UserDefinedGroupEdit',
+    component: UserDefinedGroup,
+  },
+  {
+    path: '/userDefinedGroups/userDefinedGroup',
+    name: 'UserDefinedGroupNew',
+    component: UserDefinedGroup,
+  },
+  {
+    path: '/status/list',
+    name: 'StatusList',
+    component: Status,
+  },
+  {
+    path: '/status/timeshareAdmin',
+    name: 'TimeshareAdmin',
+    component: timeshareAdminPage,
+  },
+  {
+    path: '/status/tenderWeekAdmin',
+    name: 'TenderWeekAdmin',
+    component: tenderWeekAdminPage,
+  },
+  {
+    path: '/status/userManagementPage',
+    name: 'userManagementPage',
+    component: userManagementPage,
+  },
+  {
+    path: '/status/changeLogPage',
+    name: 'changeLogPage',
+    component: changeLogPage,
+  },
+  {
+    path: '/unitConfiguration/list',
+    name: 'UnitConfiguration',
+    component: UnitConfiguration,
+  },
+  {
+    path: '/contactus',
+    name: 'ContactUs',
+    component: ContactUs,
+  },
+  {
+    path: '/privacypolicy',
+    name: 'PrivacyPolicy',
+    component: PrivacyPolicy,
+  },
+  {
+    path: '/resort/:resortCode',
+    name: 'ResortPage',
+    component: ResortPage,
+    props: true,
+  },
+  {
+    path: '/resort/:resortCode/:weekId',
+    name: 'UnitPage',
+    component: UnitPage,
+    props: true,
+  },
+  {
+    path: '/timeshare/search',
+    name: 'TimeshareSearch',
+    component: TimeshareSearch,
+    props: true,
+  },
   ],
 });

src/store/modules/timeshare/weekList.js

@@ -1,26 +1,108 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
 import axios from 'axios';
+import _ from 'lodash';
 
 export default {
   namespaced: true,
   state: {
     weeks: [],
+    filter: {
+      region: undefined,
+      resort: undefined,
+      bedrooms: undefined,
+      date: undefined,
+      minPrice: undefined,
+      maxPrice: undefined,
+    },
   },
   mutations: {
     setWeeks(state, weeks) {
       state.weeks = weeks;
     },
+    addWeek(state, week) {
+      state.weeks.push(week);
+    },
+  },
+  getters: {
+    filteredWeeks: (state) => {
+      let weekList = state.weeks;
+      const {
+        filter,
+      } = state;
+      if (filter) {
+        if (filter.region) {
+          weekList = _.filter(weekList, x => x.region
+            && x.region.regionCode === filter.region.regionCode);
+        }
+        if (filter.resort) {
+          weekList = _.filter(weekList, x => x.resort
+            && x.resort.resortCode === filter.resort.resortCode);
+        }
+        if (filter.bedrooms) {
+          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);
+        }
+        if (filter.minPrice && filter.minPrice !== 0) {
+          weekList = _.filter(weekList, x => x.sellingPrice
+            && x.sellingPrice >= filter.minPrice);
+        }
+        if (filter.maxPrice && filter.maxPrice !== 0) {
+          weekList = _.filter(weekList, x => x.sellingPrice
+            && x.sellingPrice <= filter.maxPrice);
+        }
+      }
+
+      return weekList;
+    },
   },
-  getters: {},
   actions: {
     getWeeks({
       commit,
-    }, resortCode) {
+    }) {
       axios
-        .get(`/api/timeshare/GetByResortCode/${resortCode}`)
+        .get('/api/timeshareweek')
         .then(result => commit('setStatusList', result.data))
         .catch(console.error);
     },
+    addDummyWeek({
+      commit,
+    }) {
+      commit('addWeek', {
+        id: 1,
+        unit: '359',
+        week: 'N18',
+        module: '359/N18 River View',
+        sellingPrice: 85000,
+        currentLevy: 5455,
+        arrivalDate: '2019/09/09',
+        departureDate: '2019/09/16',
+        region: {
+          regionCode: 'EC',
+          regionName: 'Eastern Cape',
+          id: 1,
+        },
+        resort: {
+          resortName: 'Ekuthuleni Hoedspruit',
+          resortCode: 'EKU',
+          town: 'Hoedspruit',
+          city: 'Hoedspruit',
+          id: 17,
+        },
+        bedrooms: '2',
+        unitNumber: '18',
+        weekNumber: '25',
+      });
+    },
   },
 };