Timeshare - week

src/components/admin/status/statusPage.vue

     </div>
     <!-- </section> -->
     <div class="container">
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>Id</th>
-            <th>Code</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in statusList" :key="i">
-            <td>{{item.id}}</td>
-            <td>{{item.code}}</td>
-            <td>{{item.description}}</td>
-          </tr>
-        </tbody>
-      </table>
+      <ListView :items="statusList" :columnCount="4" :compact="false" :showNew="false" />
     </div>
   </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import ListView from '../../shared/listView.vue';
 
 export default {
   name: 'StatusList',
+  components: {
+    ListView,
+  },
   created() {
     this.getStatusList();
   },

src/components/admin/status/timeshareAdminPage.vue

+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
 <template>
   <div>
-    <br />
-    <br />
-    <br />
-    <br />
     <br />
     <div class="row">
       <div class="offset-1 col-md-3">
           type="button"
           :class="{'form-control btn btn-primary ': (1===1), 'my-disable': (!selectedItems || selectedItems.length === 0)}"
           value="Verify Week(s)"
-          :disabled="selectedItems.length > 0"
+          :disabled="!(selectedItems.length > 0)"
+          @click="onVerify()"
         >{{ButtonMessage}}</button>
         <div>{{Message}}</div>
       </div>
       <div class="offset-1 col-md-10">
         <ListView
-          :items="items"
-          :allowMultipleSelect="true"
+          :items="getNeedsVerify"
           @onRowClick="onRowClick"
           @onClearSelected="onClearSelected"
-          :columnsCount="15"
           :title="'Pending Weeks'"
           :showNew="false"
         />
   </div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import Log from '../../../assets/Log';
 import ListView from '../../shared/listView.vue';
 
     };
   },
   mounted() {
-    console.log(this.user.id);
     this.getItems(this.user.id);
   },
   computed: {
       return msg;
     },
     ...mapState('myWeeks', ['items']),
+    ...mapGetters({ getNeedsVerify: 'myWeeks/getNeedsVerify' }),
   },
   methods: {
-    ...mapActions('myWeeks', ['getItems']),
+    ...mapActions('myWeeks', ['getItems', 'verifyWeek']),
+    ...mapActions('alert', ['success']),
+    onVerify() {
+      if (this.selectedItems.length > 0) {
+        for (const i in this.selectedItems) {
+          const selectedIndex = this.selectedItems[i];
+          const item = this.items[selectedIndex];
+          if (item) {
+            this.verifyWeek(item.id);
+          }
+        }
+        this.success('Week verified!');
+        this.$router.push('/shared/alert');
+      }
+    },
     onRowClick(items) {
       this.selectedItems = items;
     },

src/components/communication/templatePage.vue

   },
   methods: {
     ...mapActions('template', ['getList']),
-    onRowClick(item) {
-      if (this.detailItem !== item) {
-        this.detailItem = item;
-      } else this.detailItem = undefined;
-      this.clickedNew = false;
+    onRowClick(items) {
+      if (items.length > 0) {
+        const i = items[0];
+        const item = this.list[i];
+        if (this.detailItem !== item) {
+          this.detailItem = item;
+        } else this.detailItem = undefined;
+        this.clickedNew = false;
+      }
     },
     onNew() {
       this.detailItem = {};

src/components/shared/alertPage.vue

+<template>
+  <div>
+    <br />
+    <Alert :text="message" :type="type" />
+    <div class="row">
+      <div class="offset-3 col-md-2">
+        <button type="button" class="form-control btn btn-primary" @click="goBack()">Back</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Alert from './alert.vue';
+
+export default {
+  components: {
+    Alert,
+  },
+  computed: {
+    ...mapState('alert', ['message', 'type']),
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>

src/components/shared/listView.vue

     <div v-if="items && items.length > 0" class="table-responsive">
       <table
         id="table"
-        :class="{'table table-bordered table-hover': (1 === 1), 'table-sm': compact}"
+        :class="{'table table-hover': (1 === 1), 'table-sm': compact, 'table-bordered': bordered, 'table-striped': striped}"
       >
-        <thead class="my-table table-header">
+        <thead >
           <tr class="dnd-moved">
             <th v-for="(column, c) in Columns" :key="c">
-              <div @click="sortBy(column)">{{ column }}</div>
+              <div
+                @click="sortBy(column)"
+                @mouseover="hover = c"
+                @mouseleave="hover = -1"
+                :class="{ active: hover === c }"
+              >
+                <div class="d-flex bd-highlight">
+                  <div class="p-2 w-100 bd-highlight">{{ column | toProper }}</div>
+                  <div class="p-2 flex-shrink-1 bd-highlight">
+                    <img
+                      src="../../../public/img/sort-up.png"
+                      height="8px;"
+                      v-if="sortKey === column && reverse"
+                    />
+                    <img
+                      src="../../../public/img/sort-down.png"
+                      height="8px;"
+                      v-if="sortKey === column && !reverse"
+                    />
+                  </div>
+                </div>
+              </div>
             </th>
             <th v-if="editable"></th>
             <th v-if="deleteable"></th>
         </tbody>
       </table>
       <div class="d-flex justify-content-between" v-if="showPager">
-        <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
+        <div
+          class="p-1"
+        >{{ currentPage + ' / ' + PageCount + (!hideItemCount ? ' - (' + items.length + ' items)' : '')}}</div>
         <div class="p-1">
           <BasePagination
             :currentPage="currentPage"
     deleteable: {
       default: false,
     },
-    columnsCount: {
+    columnCount: {
       default: 6,
     },
     showPager: {
     title: {
       default: undefined,
     },
+    hideItemCount: {
+      default: false,
+    },
+    itemsPerPageList: {
+      default: ItemsPerPageList,
+    },
+    currentPage: {
+      default: 1
+    },
+    bordered: {
+      default: true
+    }, 
+    striped: {
+      default: true
+    }
   },
   data() {
     return {
+      hover: -1,
       selectedItems: [],
       showControl: false,
       sortKey: '',
       reverse: false,
       searchItem: '',
-      itemsPerPageList: ItemsPerPageList,
       visibleItemsPerPageCount: 0,
       currentPage: 1,
     };
               !list.includes(Object.keys(item)[o])
               && !Array.isArray(Object.values(item)[o])
             ) {
-              if (list.length < this.columnsCount) {
+              if (list.length < this.columnCount) {
                 list.push(Object.keys(item)[o]);
               }
             }
   text-decoration: none;
   color: #333333;
 }
+.active {
+  background-color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+}
 .table > tbody > tr > td {
   vertical-align: middle;
 }

src/components/timeshare/buy/buyPage.vue

           <div class="row mb-4">
             <div class="container col-md-4">
               <div class="accordion" id="accordionExample">
-                <div class="card" v-for="(region, r) in availRegion" :key="r">
+                <div class="card darker-border" v-for="(region, r) in availRegion" :key="r">
                   <a
                     class="mb-0 color-text-a"
                     data-toggle="collapse"
   border-radius: 5px;
   cursor: pointer;
 }
+.darker-border {
+  border-color: #A5A5A5;
+}
 </style>

src/components/timeshare/myWeeksPage.vue

     <br />
     <br />
     <br />
+    
     <div class="row">
       <div class="offset-1 col-md-10">
         <ListView :items="items" :editable="true" @onEdit="onEdit" />

src/main.js

   return `R ${formatter.format(value)}`;
 });
 
+Vue.filter('toProper', (value) => {
+  if (typeof value !== 'string') {
+    console.log(typeof value);
+    return value;
+  }
+  value = value.replace(/([a-z])([A-Z])/g, '$1 $2');
+  return value.charAt(0).toUpperCase() + value.slice(1);
+});
+
 
 Vue.filter('toDate', value => value.substring(0, value.length > 9 ? 10 : value.length));
 

src/router/index.js

 import TemplatePage from '../components/communication/templatePage.vue';
 import CarouselList from '../components/admin/misc/carouselList.vue';
 import CarouselDetail from '../components/admin/misc/carousel.vue';
+import AlertPage from '../components/shared/alertPage.vue';
 
 Vue.use(Router);
 
     component: TimeshareSell,
     props: true,
   },
+  {
+    path: '/shared/alert',
+    name: 'AlertPage',
+    component: AlertPage,
+  },
   {
     path: '/MakeOffer',
     name: 'MakeOffer',

src/store/index.js

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

src/store/modules/misc/alert.js

+export default {
+  namespaced: true,
+  state: {
+    type: undefined,
+    message: undefined,
+  },
+  mutations: {
+    setSuccess(state, msg) {
+      state.type = 'SUCCESS';
+      state.message = msg;
+    },
+  },
+  getters: {},
+  actions: {
+    success({
+      commit,
+    }, msg) {
+      commit('setSuccess', msg);
+    },
+  },
+};

src/store/modules/timeshare/myWeeks.js

+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
 import axios from 'axios';
 
 export default {
   namespaced: true,
   state: {
-    test: 'kobus',
     items: [],
   },
   mutations: {
       state.items = list;
     },
   },
-  getters: {},
+  getters: {
+    getNeedsVerify(state) {
+      return _.filter(state.items, x => x.status && x.status.code === 'A1');
+    },
+  },
   actions: {
     getItems({
       commit,
           .error,
       );
     },
+    verifyWeek({
+      commit,
+    }, id) {
+      try {
+        axios.post(`/api/timeshareweek/verifyweek/${id}`).catch(console.error);
+      } catch (err) {
+        console.log(err);
+      }
+    },
+
   },
 };