Checkin of timeshare

package-lock.json

       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
       "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
     },
+    "v-file-upload": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/v-file-upload/-/v-file-upload-3.1.7.tgz",
+      "integrity": "sha512-ce+LVMB6NnA+qv0MsCQXpMHy8VnZ+EjzPcSKXGYWXPxKf/qYVGns+AxAw3fUZVuYRGmrSp7YQ7XEOGkZuGMugA=="
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

     "roboto-fontface": "*",
     "sass-loader": "^7.3.1",
     "stylus-loader": "^3.0.2",
+    "v-file-upload": "^3.1.7",
     "vue": "^2.6.10",
     "vue-eva-icons": "^1.1.1",
     "vue-router": "^3.0.7",

src/assets/myData.js

   seasons: ['Peak 1', 'Peak 2', 'Peak 3', 'Peak 4', 'Red', 'White', 'Blue', 'Flexi'],
   resortBedrooms: ['Studio', '1', '2', '3', '4', '5', '6'],
   maxBedrooms: ['2', '4', '6', '8', '10', '12'],
+  bankedEntities: ['Dial an Exchange', 'RCI', 'First Exchange', 'iExchange',
+    'Interval International',
+  ],
 };
 export default items;

src/components/shared/searchTab.vue

                 id="pills-video"
                 role="tabpanel"
                 aria-labelledby="pills-video-tab"
-              >timeshare search</div>
+              >
+                <timeshareSearch />
+              </div>
               <div
                 class="tab-pane fade"
                 id="pills-plans"
 
 <script>
 import propertySearch from '../property/propertySearchFields.vue';
+import timeshareSearch from '../timeshare/searchTimeshare.vue';
 
 export default {
   components: {
     propertySearch,
+    timeshareSearch,
   },
   data() {
     return {

src/components/timeshare/searchTimeshare.vue

+<template>
+  <div>
+    <form
+      id="mainForm"
+      method="POST"
+      action="/filter"
+      accept-charset="UTF-8"
+      enctype="multipart/form-data"
+    >
+      <div class="form-group">
+        <select class="form-control" name="region" id="region" v-model="selectedRegion">
+          <option v-for="(item, i) in regions" :key="i">{{item.regionName}}</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <select class="form-control" name="resort" id="resort" v-model="selectedResort">
+          <option v-for="(item, i) in filteredResorts" :key="i">{{item.resortName}}</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <select class="form-control" id="resort" name="resort">
+          <option value>Resort</option>
+        </select>
+      </div>
+      <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>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  data() {
+    return {
+      selectedRegion: undefined,
+      selectedResort: undefined,
+    };
+  },
+  created() {
+    this.initTimeshare();
+  },
+  computed: {
+    ...mapState('timeshare', [
+      'resorts',
+      'regions',
+      'detailedRegion',
+      'seasons',
+      'resortBedrooms',
+      'maxSleep',
+      'bankedEntities',
+      'sellItem',
+      'agencies',
+      'agents',
+    ]),
+    filteredResorts() {
+      if (this.selectedRegion) {
+        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']),
+    addResort(item) {
+      this.myResort.push(item);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/timeshare/sell/sellPage.vue

         <hr />
       </div>
     </div>
-    <div v-for="(item, i) in unitConfigurationList" :key="i">{{item}}</div>
+    <div v-for="(item, i) in sellItem" :key="i">{{item}}</div>
     <div class="row mb-4">
       <div class="col-md-12">
         <form
               </div>
             </div>
             <div class="col-md-4" v-if="refAgent">
-              <label for="Name of Agency"></label>
-              <input
-                class="form-control"
-                placeholder="Name of Agency"
-                type="text"
-                name="name of agency"
-                value
-              />
+              <label for="Name of Agency">Agency</label>
+              <select class="form-control" id="Agency" name="agency" v-model="sellItem.agency">
+                <option v-for="(item, i) in agencies" :key="i">{{item.agencyName}}</option>
+              </select>
             </div>
             <div class="col-md-4" v-if="refAgent">
-              <label for="Name of Agent"></label>
-              <input
-                class="form-control"
-                placeholder="Name of Agent"
-                type="text"
-                name="name of agenct"
-                value
-              />
+              <label for="Name of Agent">Agent</label>
+              <select class="form-control" id="agent" name="agent" v-model="sellItem.agent">
+                <option v-for="(item, i) in agents" :key="i">{{item.name}}</option>
+              </select>
             </div>
           </div>
 
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Resort Name"></label>
-              <select class="form-control" id="resort" name="resort">
-                <option value>Please select Resort Name</option>
-                <option value></option>
+              <label for="Resort Name">Resort Name</label>
+              <select
+                class="form-control"
+                id="resort"
+                name="resort"
+                v-model="sellItem.resort"
+                @change="resortChange()"
+              >
                 <option value="Other">Other</option>
+                <option
+                  v-for="(resort, r) in resorts"
+                  :key="r"
+                  :value="resort"
+                >{{resort.resortName}}</option>
               </select>
             </div>
             <div class="col-md-6">
-              <label for="* If other"></label>
-              <input class="form-control" placeholder="* If other" type="text" name="other" value />
+              <label for="* If other" v-if="sellItem.otherResort">Name of resort</label>
+              <input
+                class="form-control"
+                v-if="sellItem.otherResort"
+                placeholder="* If other"
+                type="text"
+                name="other"
+                v-model="sellItem.otherResortName"
+              />
             </div>
           </div>
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Region"></label>
-              <select class="form-control" name="region" id="region">
-                <option value>Please select Region</option>
+              <label for="Region">Region</label>
+              <select class="form-control" name="region" id="region" v-model="sellItem.region">
                 <option v-for="(region, r) in regions" :key="r">{{region.regionName}}</option>
               </select>
             </div>
             <div class="col-md-6">
-              <label for="Season"></label>
-              <select class="form-control" name="season">
-                <option value>Please select Season</option>
-                <option value="Peak">Peak</option>
-                <option value="Peak 1">Peak 1</option>
-                <option value="Peak 2">Peak 2</option>
-                <option value="Peak 3">Peak 3</option>
-                <option value="Peak 4">Peak 4</option>
-                <option value="Red">Red</option>
-                <option value="White">White</option>
-                <option value="Blue">Blue</option>
-                <option value="Flexi">Flexi</option>
+              <label for="Season">Season</label>
+              <select class="form-control" name="season" v-model="sellItem.season">
+                <option v-for="(season, r) in seasons" :key="r">{{season.name}}</option>
               </select>
             </div>
           </div>
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Module"></label>
-              <input class="form-control" placeholder="Module" type="text" name="module" value />
+              <label for="Module">Module</label>
+              <input
+                class="form-control"
+                placeholder="Module"
+                type="text"
+                name="module"
+                v-model="sellItem.module"
+              />
             </div>
             <div class="col-md-6">
-              <label for="Week number"></label>
-              <input class="form-control" placeholder="Week Number" type="text" name="week" value />
+              <label for="Week number">Week Number</label>
+              <input
+                class="form-control"
+                placeholder="Week Number"
+                type="text"
+                name="week"
+                v-model="sellItem.weekNumber"
+              />
             </div>
           </div>
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Bedrooms"></label>
-              <select class="form-control" name="bedrooms">
-                <option value>Please select Bedrooms</option>
-                <option value="Studio">Studio</option>
-                <option value="1">1</option>
-                <option value="2">2</option>
-                <option value="3">3</option>
-                <option value="4">4</option>
-                <option value="5">5</option>
-                <option value="6">6</option>
+              <label for="Bedrooms">Bedrooms</label>
+              <select class="form-control" name="bedrooms" v-model="sellItem.bedrooms">
+                <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
               </select>
             </div>
             <div class="col-md-6">
-              <label for="Sleeps maximum"></label>
-              <select class="form-control" name="sleeps">
-                <option value>Please select Sleeps maximum</option>
-                <option value="2">2</option>
-                <option value="4">4</option>
-                <option value="6">6</option>
-                <option value="8">8</option>
-                <option value="10">10</option>
-                <option value="12">12</option>
+              <label for="Sleeps maximum">Sleeps maximum</label>
+              <select class="form-control" name="sleeps" v-model="sellItem.maxSleep">
+                <option v-for="(item, i) in maxSleep" :key="i">{{item}}</option>
               </select>
             </div>
           </div>
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Unit number"></label>
-              <input class="form-control" placeholder="Unit Number" type="text" name="unit" value />
+              <label for="Unit number">Unit Number</label>
+              <input
+                class="form-control"
+                placeholder="Unit Number"
+                type="text"
+                name="unit"
+                v-model="sellItem.unitNumber"
+              />
             </div>
             <div class="col-md-6">
-              <label for="Owner"></label>
-              <input class="form-control" placeholder="Owner" type="text" name="owner" value />
+              <label for="Owner">Owner</label>
+              <input
+                class="form-control"
+                placeholder="Owner"
+                type="text"
+                name="owner"
+                v-model="sellItem.owner"
+              />
             </div>
           </div>
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Levy"></label>
+              <label for="Levy">Levy Amount</label>
               <input
                 class="form-control"
                 placeholder="Levy"
                 type="number"
                 step="any"
                 name="levy"
-                value
+                v-model="sellItem.levyAmount"
               />
             </div>
           </div>
                   name="spacebankedyear"
                   id="spacebankedyearyes"
                   value="Yes"
-                  checked
+                  @change="changeCurrentBanked"
+                  :checked="sellItem.currentYearBanked"
                 />
                 <label class="form-check-label" for="spacebankedyearyes">Yes</label>
               </div>
                   name="spacebankedyear"
                   id="spacebankedyearno"
                   value="No"
-                  checked
+                  :checked="!sellItem.currentYearBanked"
+                  @change="changeCurrentBanked"
                 />
                 <label class="form-check-label" for="spacebankedyearno">No</label>
               </div>
             </div>
             <div class="col-md-6">
-              <label for="If yes, please confirm with whom"></label>
-              <select class="form-control" name="spacebankOwner">
-                <option value>If yes, please confirm with whom</option>
-                <option value="Dial an Exchange">Dial an Exchange</option>
-                <option value="RCI">RCI</option>
-                <option value="First Exchange">First Exchange</option>
-                <option value="iExchange">iExchange</option>
-                <option value="Interval International">Interval International</option>
+              <label
+                for="If yes, please confirm with whom"
+                v-if="sellItem.currentYearBanked"
+              >Please confirm with whom</label>
+              <select
+                class="form-control"
+                name="spacebankOwner"
+                v-if="sellItem.currentYearBanked"
+                v-model="sellItem.bankedWith"
+              >
+                <option v-for="(item, i) in bankedEntities" :key="i">{{item}}</option>
               </select>
             </div>
           </div>
             >1.1 All levy amounts for the current cycle have been paid in full</label>
             <div class="col-md-4">
               <div class="form-check form-check-inline">
-                <input class="form-check-input" type="radio" name="paid" value="Yes" checked />
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="paid"
+                  value="Yes"
+                  :checked="sellItem.leviesPaidInFull"
+                  @change="changeLeviesPaidInFull()"
+                />
                 <label class="form-check-label" for="paid">Yes</label>
               </div>
               <div class="form-check form-check-inline">
-                <input class="form-check-input" type="radio" name="paid" value="No" checked />
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="paid"
+                  value="No"
+                  :checked="!sellItem.leviesPaidInFull"
+                  @change="changeLeviesPaidInFull()"
+                />
                 <label class="form-check-label" for="paid">No</label>
               </div>
             </div>
             >1.2 My week is placed for rental this year</label>
             <div class="col-md-4">
               <div class="form-check form-check-inline">
-                <input class="form-check-input" type="radio" name="rental" value="Yes" checked />
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="rental"
+                  value="Yes"
+                  :checked="sellItem.weekPlacedForRental"
+                  @change="changeWeekPlacedForRental()"
+                />
                 <label class="form-check-label" for="paidyes">Yes</label>
               </div>
               <div class="form-check form-check-inline">
-                <input class="form-check-input" type="radio" name="rental" value="No" checked />
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="rental"
+                  value="No"
+                  :checked="!sellItem.weekPlacedForRental"
+                  @change="changeWeekPlacedForRental()"
+                />
                 <label class="form-check-label" for="paidno">No</label>
               </div>
             </div>
               align="left"
             >1.3 I/We bought the timeshare module/week on the following date:</label>
             <div class="col-md-4">
-              <input type="date" class="form-control" name="date" value />
+              <input
+                type="date"
+                class="form-control"
+                name="date"
+                v-model="sellItem.originalPurchaseDate"
+              />
             </div>
           </div>
 
               align="left"
             >1.4 The purchase price for which I/we bought timeshare module/week was:</label>
             <div class="col-md-4">
-              <input
-                class="form-control"
-                type="number"
-                step="any"
-                name="purchasePrice"
-                placeholder="R"
-                value
-              />
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">R</span>
+                </div>
+                <input
+                  class="form-control"
+                  type="number"
+                  step="any"
+                  name="purchasePrice"
+                  placeholder="R"
+                  v-model="sellItem.originalPurchasePrice"
+                />
+              </div>
             </div>
           </div>
 
             >1.5 I/We bought the timeshare module/week for the following dates for the current year:</label>
             <div class="col-md-4">
               Arrival Date :
-              <input type="date" class="form-control" name="occupationDate1" value />
+              <input
+                type="date"
+                class="form-control"
+                name="occupationDate1"
+                v-model="sellItem.arrivalDate"
+              />
               Departure Date :
               <input
                 type="date"
                 class="form-control"
                 name="occupationDate2"
-                value
+                v-model="sellItem.departureDate"
               />
             </div>
           </div>
               align="left"
             >1.6 The selling price for the timeshare module/week for which I/we want to sell is: (Including Vat)</label>
             <div class="col-md-4">
-              <input
-                class="form-control"
-                type="number"
-                step="any"
-                name="sellingPrice"
-                placeholder="R"
-                value
-              />
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">R</span>
+                </div>
+                <input
+                  class="form-control"
+                  type="number"
+                  step="any"
+                  name="sellingPrice"
+                  placeholder="R"
+                  v-model="sellItem.sellingPrice"
+                />
+              </div>
             </div>
           </div>
 
               align="left"
             >1.7 Estate agent’s commission agreed to (state Rand value)</label>
             <div class="col-md-4">
-              <input
-                class="form-control"
-                type="number"
-                step="any"
-                name="commission"
-                placeholder="R"
-                value
-              />
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">R</span>
+                </div>
+                <input
+                  class="form-control"
+                  type="number"
+                  step="any"
+                  name="commission"
+                  placeholder="R"
+                  v-model="sellItem.agentCommission"
+                />
+              </div>
             </div>
           </div>
 
               align="left"
             >1.8 Mandate to sell timeshare</label>
             <div class="col-md-4">
-              <input class="btn btn-b-n" type="file" name="mandate" value />
+              <input class="btn btn-b-n" type="file" name="mandate" />
             </div>
           </div>
 
       'regions',
       'detailedRegion',
       'seasons',
-      'unitConfigurationList',
       'resortBedrooms',
-      'maxBedrooms',
+      'maxSleep',
       'bankedEntities',
       'sellItem',
       'agencies',
     },
   },
   methods: {
+    previewFiles(event) {
+      console.log(event.target.files);
+    },
     changeRef() {
+      this.sellItem.agent = undefined;
+      this.sellItem.agency = undefined;
       this.sellItem.referedByAgent = !this.sellItem.referedByAgent;
     },
+    changeLeviesPaidInFull() {
+      this.sellItem.leviesPaidInFull = !this.sellItem.leviesPaidInFull;
+    },
+    changeWeekPlacedForRental() {
+      this.sellItem.weekPlacedForRental = !this.sellItem.weekPlacedForRental;
+    },
+    changeCurrentBanked() {
+      this.sellItem.bankedWith = undefined;
+      this.sellItem.currentYearBanked = !this.sellItem.currentYearBanked;
+    },
+    resortChange() {
+      if (this.sellItem && this.sellItem.resort === 'Other') {
+        this.sellItem.otherResortName = undefined;
+        this.sellItem.otherResort = true;
+      } else {
+        this.sellItem.otherResortName = undefined;
+        this.sellItem.otherResort = false;
+      }
+    },
     ...mapActions('timeshare', ['initTimeshare']),
   },
 };

src/main.js

 import Vue from 'vue';
 import EvaIcons from 'vue-eva-icons';
+import FileUpload from 'v-file-upload';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 
 Vue.use(EvaIcons);
+Vue.use(FileUpload);
 
 Vue.config.productionTip = false;
 

src/router/index.js

 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/:id',
-      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: '/userField',
-      name: 'UserDefinedField',
-      component: UserField,
-    },
-    {
-      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/:id',
+    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: '/userField',
+    name: 'UserDefinedField',
+    component: UserField,
+  },
+  {
+    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,
+  },
   ],
 });

src/store/modules/timeshare/timeshare.js

     regions: [],
     detailedRegion: [],
     seasons: [],
-    unitConfigurationList: [],
     resortBedrooms: [],
-    maxBedrooms: [],
+    maxSleep: [],
     bankedEntities: [],
     agencies: [],
     agents: [],
     sellItem: {
       referedByAgent: false,
-      agent: {},
-      agency: {},
+      agent: undefined,
+      agency: undefined,
       otherResort: false,
-      resort: {},
-      region: '',
-      season: '',
-      module: '',
-      weekNumber: '',
-      levyAmount: 0,
+      otherResortName: undefined,
+      resort: undefined,
+      region: undefined,
+      owner: undefined,
+      season: undefined,
+      module: undefined,
+      unitNumber: undefined,
+      bedrooms: undefined,
+      maxSleep: undefined,
+      weekNumber: undefined,
+      levyAmount: undefined,
       currentYearBanked: false,
-      bankedWith: '',
+      bankedWith: undefined,
       leviesPaidInFull: false,
       weekPlacedForRental: false,
-      originalPurchasePrice: 0,
-      originalPurchaseDate: null,
-      arrivalDate: null,
-      departureDate: null,
-      status: {},
+      originalPurchasePrice: undefined,
+      originalPurchaseDate: undefined,
+      arrivalDate: undefined,
+      departureDate: undefined,
+      sellingPrice: undefined,
+      agentCommission: undefined,
+      mandate: undefined,
+      status: undefined,
     },
   },
   mutations: {
     setResortBedrooms(state, resortBedrooms) {
       state.resortBedrooms = resortBedrooms;
     },
-    setMaxBedrooms(state, maxBedrooms) {
-      state.maxBedrooms = maxBedrooms;
+    setMaxSleep(state, maxSleep) {
+      state.maxSleep = maxSleep;
     },
     setBankedEntities(state, bankedEntities) {
       state.bankedEntities = bankedEntities;
       dispatch,
     }) {
       commit('setResortBedrooms', MyData.resortBedrooms);
-      commit('setMaxBedrooms', MyData.maxBedrooms);
+      commit('setMaxSleep', MyData.maxBedrooms);
       commit('setBankedEntities', MyData.bankedEntities);
-      dispatch('getUnitConfigurationList');
-      dispatch('getSeason');
+      dispatch('getSeasons');
       dispatch('getAgents');
       dispatch('getAgencies');
       dispatch('getResorts');
       dispatch('getRegions');
     },
-    getUnitConfigurationList({
-      commit,
-      state,
-    }) {
-      console.log(111);
-      axios.get('/api/unitConfiguration')
-        .then(result => commit('setUnitConfigurationList', result.data))
-        .catch(console.error);
-      console.log(state.unitConfigurationList);
-    },
     getSeasons({
       commit,
     }) {
       axios
-        .get('http://localhost:57260/api/season')
+        .get('/api/season')
         .then(result => commit('setSeason', result.data))
         .catch(console.error);
     },
     getAgencies({
       commit,
     }) {
+      console.log(123);
       axios
-        .get('http://localhost:57260/api/agency')
+        .get('/api/agency')
         .then(result => commit('setAgency', result.data))
         .catch(console.error);
     },
       commit,
     }) {
       axios
-        .get('http://localhost:57260/api/agent')
+        .get('/api/agent')
         .then(result => commit('setAgent', result.data))
         .catch(console.error);
     },