Fix Commercial and Timeshare to Buy links to pages

src/components/property/commercial/singleView/contentSection.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <div class="row" id="resort-profile">
         <div class="col-md-4">
-          <div class="resPortfolioSection" style="margin-top:-5px">
+          <div class="resPortfolioSection" style="margin-top: -5px;">
             <iframe
               v-if="property.video !== null"
               width="100%"
@@ -11,36 +11,52 @@
               frameborder="0"
               allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
               allowfullscreen
-              style="margin-bottom:-6px"
+              style="margin-bottom: -6px;"
             ></iframe>
             <div v-if="propertyImages.length > 0">
-              <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
+              <div
+                v-for="(image, i) in propertyImages"
+                @click="index = i"
+                :key="i"
+              >
                 <div v-if="i < 3">
                   <img
                     v-if="i === 0"
-                    style="width:100%; height:201px;object-fit: cover"
+                    style="width: 100%; height: 201px; object-fit: cover;"
                     :src="image.image"
                   />
                   <div v-else-if="i !== 0">
                     <img
                       v-if="i % 2 === 0"
-                      style="width:50%; height:140px; float:right;"
+                      style="width: 50%; height: 140px; float: right;"
+                      :src="image.image"
+                    />
+                    <img
+                      v-else
+                      style="width: 50%; height: 140px; float: left;"
                       :src="image.image"
                     />
-                    <img v-else style="width:50%; height:140px; float:left" :src="image.image" />
                   </div>
                 </div>
               </div>
-              <gallery :images="Images" :index="index" @close="index = null"></gallery>
+              <gallery
+                :images="Images"
+                :index="index"
+                @close="index = null"
+              ></gallery>
             </div>
           </div>
 
           <div
             class="panel-left p-5"
-            :class="propertyImages.length > 0 ? 'galleryImages' : 'noGalleryImages'"
+            :class="
+              propertyImages.length > 0 ? 'galleryImages' : 'noGalleryImages'
+            "
           >
             <h2>Property Detail</h2>
-            <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
+            <p v-if="property.showAddress">
+              {{ property.streetNumber }} {{ property.streetName }}
+            </p>
             <p>{{ property.city }}, {{ property.suburb }}</p>
             <div v-if="property.displayData.length > 0">
               <div v-for="(data, i) in property.displayData" :key="i">
@@ -57,7 +73,9 @@
             </div>-->
             <p>{{ property.shortDescription }}</p>
 
-            <p v-if="property.statusString === 'For Sale'">{{ property.price | toCurrency }}</p>
+            <p v-if="property.statusString === 'For Sale'">
+              {{ property.price | toCurrency }}
+            </p>
             <p v-else>{{ property.price | toCurrency }} Per Month</p>
           </div>
           <div class="panel-left px-5 pb-5 text-center">
@@ -66,25 +84,37 @@
               href="http://www.facebook.com/sharer.php?u=https://www.univateproperties.co.za/"
               target="_blank"
             >
-              <img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1" />
+              <img
+                src="img/icon-facebook.svg"
+                alt="Share on Facebook"
+                class="col-3 p-1 mx-1"
+              />
             </a>
             <a
               href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
             >
-              <img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1" />
+              <img
+                src="/img/icon-email.svg"
+                alt="Share on email"
+                class="col-3 p-1 mx-1"
+              />
             </a>
             <a
               href="whatsapp://send?text=Have a look at this property: https://www.univateproperties.co.za"
               data-action="share/whatsapp/share"
               target="_blank"
             >
-              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1" />
+              <img
+                src="img/icon-whatsapp.svg"
+                alt="Share on whatsapp"
+                class="col-3 p-1 mx-1"
+              />
             </a>
           </div>
         </div>
         <div class="col-md-8 p-5 resort-profile">
           <h2 v-if="property.showAddress">
-            <div style="display:inline" v-if="property.propertyName !== null">
+            <div style="display: inline;" v-if="property.propertyName !== null">
               {{ property.propertyName }} /
             </div>
             {{ property.streetNumber }} {{ property.streetName }}
@@ -93,10 +123,18 @@
           <p>{{ property.shortDescription }}</p>
           <h4>Property Features</h4>
           <div v-if="property.displayData.length > 0">
-            <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
+            <div
+              v-for="(data, i) in property.displayData"
+              :key="i"
+              class="row my-3"
+            >
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
                 <div
-                  :style="field.value.toUpperCase() === 'FALSE' ? 'display:none' : 'display:show'"
+                  :style="
+                    field.value.toUpperCase() === 'FALSE'
+                      ? 'display:none'
+                      : 'display:show'
+                  "
                   v-if="field.value.toUpperCase() != 'TRUE'"
                 >
                   <i class="fa fa-check-circle"></i>
@@ -112,7 +150,7 @@
 
           <div class="mt-5" v-html="property.description"></div>
           <button
-            style="float:right; white-space: nowrap;"
+            style="float: right; white-space: nowrap;"
             :class="checkStatus() ? 'btn-disabled mt-3' : 'btn-solid-blue mt-3'"
             :disabled="checkStatus()"
             @click="goToSingle()"
@@ -120,7 +158,9 @@
             ENQUIRE NOW
           </button>
 
-          <h4 v-if="property.virtualTour !== null" style="margin-top:150px">Virtual Tour</h4>
+          <h4 v-if="property.virtualTour !== null" style="margin-top: 150px;">
+            Virtual Tour
+          </h4>
           <iframe
             v-if="property.virtualTour !== null"
             width="100%"
@@ -129,7 +169,7 @@
             frameborder="0"
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
             allowfullscreen
-            style="margin-bottom:-6px"
+            style="margin-bottom: -6px;"
             class="mt-3"
           ></iframe>
           <h4 v-if="property.video !== null" class="mt-5">Video</h4>
@@ -141,7 +181,7 @@
             frameborder="0"
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
             allowfullscreen
-            style="margin-bottom:-6px"
+            style="margin-bottom: -6px;"
             class="mt-3"
           ></iframe>
         </div>
@@ -152,67 +192,70 @@
 
 <script>
 /* eslint-disable */
-import gallery from "../../../shared/gallerySlideShow";
-import { mapState, mapActions } from "vuex";
+import gallery from '../../../shared/gallerySlideShow'
+import { mapState, mapActions } from 'vuex'
 export default {
   components: {
-    gallery
+    gallery,
   },
   props: {
     property: {},
-    propertyImages: {}
+    propertyImages: {},
   },
   data() {
     return {
       index: null,
-      date: new Date()
-    };
+      date: new Date(),
+    }
   },
   computed: {
-    ...mapState("status", ["singleStatus"]),
+    ...mapState('status', ['singleStatus']),
     Images() {
-      const list = [];
+      const list = []
       if (this.propertyImages) {
         for (let i = 0; i < this.propertyImages.length; i++) {
-          list.push(this.propertyImages[i].image);
+          list.push(this.propertyImages[i].image)
         }
       }
-      return list;
-    }
+      return list
+    },
   },
   methods: {
-    ...mapActions("status", ["getSingleStatus"]),
+    ...mapActions('status', ['getSingleStatus']),
     goToSingle() {
-      this.$router.push({ name: "EnquireNow", params: { id: this.$route.params.id } });
+      this.$router.push({
+        name: 'EnquireNow',
+        params: { id: this.$route.params.id },
+      })
     },
     checkStatus() {
-      this.getSingleStatus(this.property.statusId);
+      this.getSingleStatus(this.property.statusId)
       if (
-        this.singleStatus.code === "CIP" ||
-        this.singleStatus.code === "S" ||
-        this.singleStatus.code === "P"
+        this.singleStatus.code === 'CIP' ||
+        this.singleStatus.code === 'S' ||
+        this.singleStatus.code === 'P'
       ) {
-        return true;
+        return true
       } else {
-        return false;
+        return false
       }
-    }
+    },
   },
   mounted() {
-    if (this.property.video === "") {
-      this.property.video = null;
+    if (this.property.video === '') {
+      this.property.video = null
     }
-    if (this.property.virtualTour === "") {
-      this.property.virtualTour = null;
+    if (this.property.virtualTour === '') {
+      this.property.virtualTour = null
     }
-    this.$emit("Loaded", true);
-  }
-};
+    this.$emit('Loaded', true)
+  },
+}
 </script>
 
 <style lang="scss" scoped>
 .btn-disabled {
-  font-family: "Muli";
+  font-family: 'Muli';
   font-size: 15px;
   letter-spacing: 1px;
   display: inline-block;

src/components/timeshare/buy/weekListComponent.vue

@@ -168,11 +168,7 @@ export default {
     },
   },
   mounted() {
-    //if (this.resortCode) {
-    //  this.applyResortFilter(this.resortCode);
-    //}
     this.getByResortCode(this.$route.params.resortCode)
-    //this.getWeeks();
   },
   methods: {
     ...mapActions('weekList', [
@@ -181,7 +177,7 @@ export default {
       'getByResortCode',
     ]),
     View(item) {
-      this.$router.push(`/resort/${item.resort.resortCode}/${item.unitNumber}`)
+      this.$router.push(`/resort/${item.resort.resortCode}/${item.id}`)
     },
     onChangeItemsPerPage() {
       if (this.currentPage !== 1) {

src/components/timeshare/resort/resortPageNew.vue

@@ -4,50 +4,52 @@
     <main id="main" style="margin-top: 20px;">
       <section>
         <div class="container">
-          <div class="row" id="resort-profile">
-            <div class="col-md-3">
-              <gallerySection :images="resort.images" />
-              <FilterComponent :hideTop="true" />
-            </div>
-            <div
-              class="col-md-9 resort-profile"
-              style="margin-top: 15px; margin-bottom: 15px;"
-            >
-              <h2>{{ resort.prName }}</h2>
-              <WeekList :resortCode="resortCode" />
-              <p v-if="description && description !== ''">
-                {{ description }}
-              </p>
-              <br v-if="description && description !== ''" />
-              <div class="d-flex mt-3">
-                <iframe
-                  width="100%"
-                  height="200"
-                  id="gmap_canvas"
-                  :src="
-                    'https://maps.google.com/maps?q=' +
-                    resort.prLatitude +
-                    ',' +
-                    resort.prLongitude +
-                    '&hl=en&z=14&amp;output=embed'
-                  "
-                  frameborder="0"
-                  scrolling="no"
-                  marginheight="0"
-                  marginwidth="0"
-                ></iframe>
+          <div class="form">
+            <div class="row" id="resort-profile">
+              <div class="col-md-3">
+                <gallerySection :images="resort.images" />
+                <FilterComponent :hideTop="true" />
               </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col">
-              <router-link
-                style="float: right;"
-                class="btn-white-border mb-4"
-                to="/timeshare/buy"
+              <div
+                class="col-md-9 resort-profile"
+                style="margin-top: 15px; margin-bottom: 15px;"
               >
-                Back
-              </router-link>
+                <h2>{{ resort.prName }}</h2>
+                <WeekList :resortCode="resortCode" />
+                <p v-if="description && description !== ''">
+                  {{ description }}
+                </p>
+                <br v-if="description && description !== ''" />
+                <div class="d-flex mt-3">
+                  <iframe
+                    width="100%"
+                    height="200"
+                    id="gmap_canvas"
+                    :src="
+                      'https://maps.google.com/maps?q=' +
+                      resort.prLatitude +
+                      ',' +
+                      resort.prLongitude +
+                      '&hl=en&z=14&amp;output=embed'
+                    "
+                    frameborder="0"
+                    scrolling="no"
+                    marginheight="0"
+                    marginwidth="0"
+                  ></iframe>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col">
+                <router-link
+                  style="float: right;"
+                  class="btn-white-border mb-4"
+                  to="/timeshare/buy"
+                >
+                  Back
+                </router-link>
+              </div>
             </div>
           </div>
         </div>
@@ -94,11 +96,8 @@ export default {
     ...mapState('resort', ['resort', 'images', 'description']),
   },
   created() {
-    console.log('Resort Description')
-    console.log(this.resortCode)
     this.getDescription(this.resortCode)
 
-    console.log(this.resort.description)
     this.getResortData(
       this.resortCode.includes('SILV') ? 'SILV1' : this.resortCode,
     ).then(() => (this.wait = false))

src/components/timeshare/resort/unit/summarySection.vue

@@ -3,7 +3,7 @@
     <div class="row">
       <div class="col">
         <div class="section-header">
-          <h2>{{ week ? week.resort.resortName : '' }}</h2>
+          <!--<h2>{{ week ? week.resort.resortName : '' }}</h2> -->
         </div>
       </div>
     </div>
@@ -105,25 +105,18 @@ export default {
     makeOffer,
     gallerySection,
   },
+  mounted() {
+    this.getWeek(this.weekId)
+  },
   computed: {
     ...mapState('resort', ['resort', 'description', 'images', 'layout']),
-
-    ...mapGetters({
-      weekById: 'weekList/weekById',
-    }),
-    week() {
-      return this.weekById(this.resortCode, this.unitNumber)
-    },
-    // ...mapState('week', ['currentWeek']),
+    ...mapState('weekList', ['week']),
   },
   props: {
-    resortCode: {},
-    unitNumber: {},
+    weekId: {},
   },
   methods: {
-    ...mapActions('weekList', ['getWeeks', 'applyResortFilter']),
-    ...mapActions('resort', ['initResort']),
-    // ...mapActions('week', ['initWeek']),
+    ...mapActions('weekList', ['getWeek']),
     formatPrice(value) {
       if (value) {
         const val = (value / 1).toFixed(2)

src/components/timeshare/resort/unit/unitPageNew.vue

@@ -1,12 +1,12 @@
 <template>
-  <main id="main" style="padding-bottom:50px">
+  <main id="main" style="padding-bottom: 50px;">
     <!-- <carouselSection v-if="!wait" :resortImages="resort.images" /> -->
-    <summarySection :resortCode="resortCode" :unitNumber="unitNumber" />
+    <summarySection :weekId="weekId" />
     <div class="container">
       <div class="row mt-5">
         <div class="col">
           <tabSection
-            style="margin-bottom:100px"
+            style="margin-bottom: 100px;"
             :resortCode="calculatedCode"
             :resortCoords="resort.prPostAdd1"
             :layoutImages="layouts"
@@ -21,28 +21,28 @@
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions, mapGetters } from "vuex";
-import gallerySection from "../gallerySection";
-import tabSection from "./tabSection";
-import summarySection from "./summarySection";
-import carouselSection from "./carouselSection";
+import { mapState, mapActions, mapGetters } from 'vuex'
+import gallerySection from '../gallerySection'
+import tabSection from './tabSection'
+import summarySection from './summarySection'
+import carouselSection from './carouselSection'
 
 export default {
-  name: "unit",
+  name: 'unit',
   components: {
     gallerySection,
     tabSection,
     summarySection,
-    carouselSection
+    carouselSection,
   },
   props: {
     resortCode: {},
-    unitNumber: {}
+    weekId: {},
   },
   data() {
     return {
-      wait: false
-    };
+      wait: false,
+    }
   },
   mounted() {
     // await this.initResort(this.resortCode);
@@ -54,50 +54,42 @@ export default {
     // setTimeout(() => {
     //   this.boolLoaded = true;
     // }, 500);
-    this.wait = true;
-    this.getResortData(this.resortCode.includes("SILV") ? "SILV1" : this.resortCode).then(
-      fulfilled => {
-        this.applyResortFilter(this.resortCode.includes("SILV") ? "SILV1" : this.resortCode);
-        this.getWeeks();
-        this.wait = false;
-      }
-    );
+    this.wait = true
+    console.log(this.weekId)
+    this.getResortData(
+      this.resortCode.includes('SILV') ? 'SILV1' : this.resortCode,
+    ).then((fulfilled) => {
+      this.applyResortFilter(
+        this.resortCode.includes('SILV') ? 'SILV1' : this.resortCode,
+      )
+      this.getWeeks()
+      this.wait = false
+    })
   },
   computed: {
-    ...mapState("resort", ["resort"]),
-
-    ...mapGetters({
-      weekById: "weekList/weekById"
-    }),
-    week() {
-      return this.weekById(
-        this.resortCode.includes("SILV") ? "SILV1" : this.resortCode,
-        this.unitNumber
-      );
-    },
+    ...mapState('resort', ['resort']),
+    ...mapState('weekList', ['weeks', 'week']),
     layouts() {
-      var layouts = [];
-      layouts.push(this.resort.layout);
-      return layouts;
+      var layouts = []
+      layouts.push(this.resort.layout)
+      return layouts
     },
     calculatedCode() {
-      return this.resortCode.includes("SILV") ? "SILV1" : this.resortCode;
-    }
-    // ...mapState('week', ['currentWeek']),
+      return this.resortCode.includes('SILV') ? 'SILV1' : this.resortCode
+    },
   },
   methods: {
-    ...mapActions("weekList", ["getWeeks", "applyResortFilter"]),
-    ...mapActions("resort", ["getResortData"]),
-    // ...mapActions('week', ['initWeek']),
+    ...mapActions('weekList', ['getWeeks', 'getWeek', 'applyResortFilter']),
+    ...mapActions('resort', ['getResortData']),
     formatPrice(value) {
       if (value) {
-        const val = (value / 1).toFixed(2);
-        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+        const val = (value / 1).toFixed(2)
+        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
       }
-      return "";
-    }
-  }
-};
+      return ''
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>

src/router/index.js

@@ -399,7 +399,7 @@ export default new Router({
             props: true,
         },
         {
-            path: '/resort/:resortCode/:unitNumber',
+            path: '/resort/:resortCode/:weekId',
             name: 'UnitPage',
             component: UnitPage,
             props: true,

src/store/modules/timeshare/status.js

@@ -5,24 +5,24 @@ export default {
     namespaced: true,
     state: {
         statusList: [],
-        status: {},
+        singleStatus: {},
     },
     mutations: {
         setStatusList(state, list) {
             state.statusList = list
         },
-        addNewStatus(state, status) {
-            state.statusList.push(status)
+        addNewStatus(state, jsstatus) {
+            state.statusList.push(jsstatus)
         },
-        setSingleStatus(state, status) {
-            state.status = status
+        setSingleStatus(state, jsstatus) {
+            state.singleStatus = jsstatus
         },
-        deleteStatus(state, id) {
-            var index = state.statusList.findIndex((stat) => stat.id == id)
+        deleteStatus(state, jsid) {
+            var index = state.statusList.findIndex((stat) => stat.id == jsid)
             state.statusList.splice(index, 1)
         },
         clearStatus(state) {
-            state.status = {
+            state.singleStatus = {
                 code: '',
                 description: '',
             }

src/store/modules/timeshare/weekList.js

@@ -10,6 +10,7 @@ export default {
     namespaced: true,
     state: {
         weeks: [],
+        week: {},
         status: undefined,
         filter: {
             season: undefined,
@@ -38,18 +39,21 @@ export default {
         onError(state) {
             state.status = 'Error occurred getting data.'
         },
-        onClearFilter(state, filter) {
-            state.filter[filter] = undefined
+        onClearFilter(state, jsfilter) {
+            state.filter[jsfilter] = undefined
         },
-        setWeeks(state, weeks) {
-            state.weeks = weeks
+        setWeeks(state, jsweeks) {
+            state.weeks = jsweeks
             state.status = ''
         },
-        addWeek(state, week) {
-            state.weeks.push(week)
+        setWeek(state, jsweek) {
+            state.week = jsweek
         },
-        applyResort(state, resort) {
-            state.filter.resort = resort
+        addWeek(state, jsweek) {
+            state.weeks.push(jsweek)
+        },
+        applyResort(state, jsresort) {
+            state.filter.resort = jsresort
         },
     },
     getters: {
@@ -140,15 +144,8 @@ export default {
             return rootGetters['timeshare/getRegionCode']('KK')
         },
         weekById(state) {
-            return (resortCode, unitNumber) => {
-                const w = state.weeks.find(
-                    (week) =>
-                    week.resort !== undefined &&
-                    week.resort.resortCode === resortCode &&
-                    week.unitNumber === unitNumber,
-                )
-                console.log(resortCode, unitNumber)
-
+            return (week) => {
+                const w = state.weeks.find((week) => week.id === weekId)
                 if (w) {
                     return w
                 }
@@ -167,7 +164,6 @@ export default {
                 .get('/api/timeshareweek/getByResortCode/' + resortCode)
                 .then((result) => {
                     commit('setWeeks', result.data)
-                    console.log(result)
                 })
         },
         async getWeeks({ commit, rootGetters }) {
@@ -183,29 +179,25 @@ export default {
                         if (myItem !== undefined) {
                             const code = myItem.resort.resortCode
                             myItem.region = {
-                                regionName: rootGetters['timeshare/getRegionCode'](code),
+                                regionName: rootGetters['timeshare/getRegionCode'](this.code),
                             }
                             myItem.resort = {
-                                resortName: rootGetters['timeshare/getResortName'](code),
-                                resortCode: code,
+                                resortName: rootGetters['timeshare/getResortName'](this.code),
+                                resortCode: this.code,
                             }
                         }
                     }
-
-                    console.log(code)
-                        //console.log(arr3)
                     commit('setWeeks', arr2)
                 })
                 .catch(console.error)
         },
-        // getWeeks({ commit }) {
-        //   axios.get("api/timeshareweek").then(result =>
-        //     commit(
-        //       "setWeeks",
-        //       result.data.filter(x => x.region !== null)
-        //     )
-        //   );
-        // },
+        async getWeek({ commit }, jsweekId) {
+            commit('onLoading')
+            await axios.get('/api/timeshareweek/' + jsweekId).then((result) => {
+                commit('setWeek', result.data)
+            })
+        },
+
         clearFilter({ commit }, filter) {
             commit('onClearFilter', filter)
         },

vue.config.js

@@ -4,7 +4,7 @@ module.exports = {
             '/api': {
                 target: 'http://localhost:57260/',
                 //target: 'http://training.provision-sa.com:120/',
-                //target: "https://www.pvsl.co.za:86/",
+                //target: 'https://www.pvsl.co.za:86/',
                 changeOrigin: true,
             },
             '/nph-srep': {