tenderWeeks admin

src/App.vue

 </script>
 
 <style>
+button:hover {
+  cursor: pointer;
+},
 hr {
   background-color: #60cbeb;
 }

src/components/admin/status/tenderWeekAdminPage.vue

       </div>
     </div>
     <div id="table" class="col-xs-12 table-responsive">
-      <datatable :columns="columns" :data="rows"></datatable>
+      <ListView :items="items" :showNew="false"></listView>
     </div>
     <br />
   </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import ListView from '../../shared/listView.vue';
 
 export default {
   name: 'TenderWeekAdmin',
   created() {
-    this.gettenderWeekdmin();
+    this.getItems();
+  },
+  components: {
+    ListView
   },
   computed: {
-    ...mapState('status', ['tenderWeekAdmin']),
+    ...mapState('tenderWeek', ['items']),
   },
   methods: {
-    ...mapActions('status', ['gettenderWeekAdmin']),
+    ...mapActions('tenderWeek', ['getItems']),
   },
 };
 </script>

src/components/shared/listView.vue

         <div class="d-flex flex-row">
           <div class="p2" v-if="selectedItems.length > 0">
             <div
-              class="btn btn-primary myBackground btn-width"
+              class="btn btn-primary myBackground btn-width cursor-pointer"
               @click="onClearSelected()"
             >Clear Selected</div>
           </div>
           <div class="p2" v-if="showNew">
-            <div class="btn btn-primary myBackground btn-width" @click="onNew()">New</div>
+            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">New</div>
           </div>
         </div>
       </div>

src/components/timeshare/buy/buyPage.vue

           </div>
           <hr />
           <div class="row mb-4">
-            <div class="container col-md-4">
-              <div class="accordion" id="accordionExample">
+            <div class="container col-md-4" v-if="availRegion">
+              <div class="accordion" id="accordionExample" v-if="availRegion.length > 0">
                 <div class="card darker-border" v-for="(region, r) in availRegion" :key="r">
                   <a
                     class="mb-0 color-text-a"
                     </div>
                   </div>
                 </div>
+                  </div>
+                  <div v-else>
+                    <Alert :text="'No items found...'" :type="'INFO'" />
               </div>
             </div>
             <div class="col-md-8">
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import Alert from '../../shared/alert.vue';
 
 export default {
   name: 'TimeshareToBuy',
+  components:{
+    Alert
+  },
   data() {
     return {
       myMap: 'SouthAfrica',

src/components/timeshare/myWeeksPage.vue

 <template>
-  <div>
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    
-    <div class="row">
-      <div class="offset-1 col-md-10">
-        <ListView :items="items" :editable="true" @onEdit="onEdit" />
-      </div>
+<div>
+  <br />
+  <div class="row">
+    <div class="offset-1 col-md-3">
+      {{items[selectedItems]}}
+      <button 
+        type="button"
+        :class="{'form-control btn btn-primary ': (1===1), 'my-disable': (!(selectedItems.length == 1) || !items[selectedItems] || items[selectedItems].status.code !== 'A2')}"
+        value="Publish Week"
+        :disabled="!(items.length == 1)"
+      >
+        Publish selected week
+      </button>
+    </div>
+    <div class="offset-1 col-md-10">
+      <ListView :items="items" :editable="true" @onNew="onNew" @onRowClick="onRowClick"
+          @onClearSelected="onClearSelected"  />
     </div>
   </div>
+</div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
   data() {
     return {
       user: Log.getUser(),
+      selectedItems: [],
     };
   },
   mounted() {
     onEdit(item) {
       this.$router.push(`/timeshare/${item.id}`);
     },
+    onNew() {
+      this.$router.push('/timeshare/sell');
+    },
+    onRowClick(items) {
+      this.selectedItems = items;
+    },
+    onClearSelected() {
+      this.selectedItems = [];
+    },
   },
 };
 </script>
+<style scoped>
+.my-disable {
+  background-color: silver;
+  border-color: silver;
+}
+.my-disable:hover {
+  background-color: lightgray;
+  border-color: lightgray;
+}
+</style>

src/store/index.js

 import Carousel from './modules/misc/carousel';
 import Individual from './modules/user/individual';
 import Alert from './modules/misc/alert';
+import TenderWeek from './modules/timeshare/tenderWeeks';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     carousel: Carousel,
     individual: Individual,
     alert: Alert,
+    tenderWeek: TenderWeek
   },
 });

src/store/modules/timeshare/myWeeks.js

         console.log(err);
       }
     },
+    publishWeek(id) {
+      axios.post(`/api/timeshareweek/publishweek/${id}`).catch(console.error);
+    }
 
   },
 };

src/store/modules/timeshare/tenderWeeks.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    items: [],
+  },
+  mutations: {
+    setItems(state, list) {
+      state.items = list;
+    },
+  },
+  getters: {},
+  actions: {
+    getItems({ commit }) {
+      axios
+        .get('/api/timeshareweek/getTenderWeeks')
+        .then(result => commit('setItems', result.data))
+        .catch(console.error);
+    },
+  },
+};