Unit step back

src/components/processFlow/makeOffer.vue

         <div class="form-group row">
           <div class="col-md-6 col-lg-5 section-md-t3">
             <div class="title-box-d">
-              <h3 class="title-d">{{ item.resort.resortName }}</h3>
+              <h3 class="title-d">{{ item ? item.resortName : '' }}</h3>
             </div>
           </div>
         </div>

src/components/timeshare/buy/weekListComponent.vue

             <!-- <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>
+                <button type="button" class="btn btn-b-n" @click="View(item)">View</button>
               </div>
             </td>
           </tr>
 </template>
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import makeOffer from '../../processFlow/makeOffer.vue';
 
 export default {
   props: {
     resortCode: undefined,
   },
-  components: {
-    makeOffer,
-  },
+  components: {},
   computed: {
     ...mapState('weekList', ['weeks']),
     ...mapGetters({
     this.getWeeks();
   },
   methods: {
+    View(item) {
+      console.log(item);
+      this.$router.push(`/resort/${item.resort.resortCode}/${item.id}`);
+    },
     ...mapActions('weekList', ['getWeeks', 'applyResortFilter']),
   },
 };

src/components/timeshare/resort/resortPage.vue

           </div>
           {{description}}
           <hr />
-
           <div class="row">
             <div class="col-md-10 mb-4">
               <ul class="nav nav-tabs" id="myTab" role="tablist">

src/components/timeshare/resort/unitPage.vue

     <div class="row">
       <div class="col-md-12 col-lg-8">
         <div class="title-box-d">
-          <h1 class="title-d" style="text-align:left; font-size: 250%">{{resort.prName}}</h1>
+          <h1
+            class="title-d"
+            style="text-align:left; font-size: 250%"
+          >{{week ? week.resortName : ''}}</h1>
         </div>
         <br />
       </div>
             </ul>
           </div>
         </div>
-        <div class="col-md-6">
+        <div class="col-md-6" v-if="week">
           <form
             id="mainForm"
             method="POST"
                     type="text"
                     id="resort"
                     name="resortunit"
-                    :value="week.unit"
+                    :value="week ? week.unitNumber : ''"
                     disabled
                   />
                 </div>
                     type="text"
                     id="week"
                     name="resortWeek"
-                    :value="week.module"
+                    :value="week ? week.weekNumber : ''"
                     disabled
                   />
                 </div>
                     type="text"
                     id="levy"
                     name="levy"
-                    :value="formatPrice(week.currentLevy)"
+                    :value="formatPrice(week ? week.levyAmount : 0)"
                     disabled
                   />
                 </div>
                   <div style="width: 260px; height: 70px; border-style: solid; color: #60CBEB;">
                     <!-- <div class="card-title-c align-self-center"> -->
                     <a class="justify-content-center" style="color: black; font-size: 250%">
-                      <b>R{{ formatPrice(week.price) }}</b>
+                      <b>R{{ formatPrice(week ? week.sellPrice : 0) }}</b>
                     </a>
                     <!-- </div> -->
                   </div>
               </div>
             </div>
             <br />
-            <div class="form-row">
-              <div>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text">
-                      <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
-                    </span>
-                    <input class="form-control" type="text" name="name" placeholder="Name" />
-                  </div>
-                </div>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text">
-                      <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
-                    </span>
-                    <input
-                      class="form-control"
-                      type="number"
-                      name="mobile"
-                      placeholder="Contact Number"
-                    />
-                  </div>
-                </div>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text">
-                      <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
-                    </span>
-                    <input class="form-control" type="email" name="email" placeholder="Email" />
-                  </div>
-                </div>
-              </div>
-            </div>
           </form>
           <br />
 
-          <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>
-
           <!-- <a
               class="btn btn-b-n even-width mr-auto"
               href="/share-transfer-initiation-for-purchaser/"
             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="{resort: resort.prName, unit: week.unit, week: week.week, module: week.module, price: week.price}"
-                  />
+          <div class="col-md-12">
+            <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="week"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
       'image2',
       'image3',
     ]),
-    ...mapState('week', ['week', 'contactDetails']),
+    ...mapState('week', ['week']),
   },
   methods: {
     ...mapActions('resort', ['initResort']),

src/main.js

   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')}`;
-});
+Vue.filter('toDate', value => value.substring(0, value.length > 9 ? 10 : value.length));
 
 new Vue({
   render: h => h(App),

src/store/modules/timeshare/week.js

+/* eslint-disable prefer-destructuring */
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
 import axios from 'axios';
 export default {
   namespaced: true,
   state: {
-    week: {
-      id: '',
-      unit: '',
-      week: '',
-      module: '',
-      price: '',
-      currentLevy: '',
-    },
-    contactDetails: {
-      name: '',
-      number: '',
-      email: '',
-    },
+    week: undefined,
   },
   mutations: {
     setWeek(state, week) {
-      state.week = week;
+      if (week.length > 0) {
+        state.week = week[0];
+      }
     },
   },
   getters: {},
     initWeek({
       commit,
     }, weekId) {
-      commit('setWeek', {
-        id: weekId,
-        unit: '359',
-        week: 'N18',
-        module: '359/N18 River View',
-        price: 85000,
-        currentLevy: 5455,
-      });
+      axios.get(`/api/timeshareweek/${weekId}`).then(r => commit('setWeek', r.data)).catch(console
+        .error);
     },
   },
 };