Listview & timeshare admin

src/components/admin/status/timeshareAdminPage.vue

@@ -6,8 +6,24 @@
     <br />
     <br />
     <div class="row">
+      <div class="offset-1 col-md-3">
+        <button
+          type="button"
+          :class="{'form-control btn btn-primary ': (1===1), 'my-disable': (!selectedItems || selectedItems.length === 0)}"
+          value="Verify Week(s)"
+          :disabled="selectedItems.length > 0"
+        >{{ButtonMessage}}</button>
+        <div>{{Message}}</div>
+      </div>
       <div class="offset-1 col-md-10">
-        <ListView :items="items" :editable="true" @onEdit="onEdit" />
+        <ListView
+          :items="items"
+          :allowMultipleSelect="true"
+          @onRowClick="onRowClick"
+          @onClearSelected="onClearSelected"
+          :columnsCount="15"
+          :title="'Pending Weeks'"
+        />
       </div>
     </div>
   </div>
@@ -25,6 +41,8 @@ export default {
   data() {
     return {
       user: Log.getUser(),
+      selectedItems: [],
+      showMessage: false,
     };
   },
   mounted() {
@@ -32,17 +50,61 @@ export default {
     this.getItems(this.user.id);
   },
   computed: {
+    SelectedItems() {
+      const selectedArray = [];
+      this.selectedItems.forEach(x => selectedArray.push(this.items[x]));
+      return selectedArray;
+    },
+    ButtonMessage() {
+      let msg = '';
+      if (!(this.selectedItems.length > 0)) {
+        msg = 'No Items selected';
+      } else {
+        msg = 'Verify item';
+        if (this.selectedItems.length > 1) {
+          msg += 's';
+        }
+      }
+      return msg;
+    },
+    Message() {
+      let msg = '';
+      if (!(this.selectedItems.length > 0)) {
+        msg = 'Please select the item(s) to verify.';
+      } else {
+        msg = `${this.selectedItems.length}`;
+        if (this.selectedItems.length === 1) {
+          msg += ' item ';
+        } else msg += ' items ';
+        msg += 'selected. Click to verify or select more...';
+      }
+      return msg;
+    },
     ...mapState('myWeeks', ['items']),
   },
   methods: {
     ...mapActions('myWeeks', ['getItems']),
+    onRowClick(items) {
+      this.selectedItems = items;
+    },
     onEdit(item) {
       this.$router.push(`/timeshare/${item.id}`);
     },
+    onClearSelected() {
+      this.selectedItems = [];
+    },
   },
 };
 </script>
 
 
 <style>
+.my-disable {
+  background-color: silver;
+  border-color: silver;
+}
+.my-disable:hover {
+  background-color: lightgray;
+  border-color: lightgray;
+}
 </style>

src/components/shared/listView.vue

@@ -2,17 +2,35 @@
 /* eslint-disable guard-for-in */
 <template>
   <div>
-    <div class="d-flex justify-content-between">
+    <div style="height:5px"></div>
+    <div class="d-flex justify-content-between table-title">
       <div class="p-2" v-if="!hideSearch">
-        <input v-model="searchItem" class="form-control" placeholder="Search ..." />
+        <input v-model="searchItem" class="form-control" :placeholder="currentPage" />
       </div>
-      <div class="p-2" v-if="showNew">
-        <div class="btn btn-primary myBackground" @click="onNew()">New</div>
+      <div class="p-2" v-if="title">
+        <h2>{{title}}</h2>
+      </div>
+      <div class="p-2">
+        <div class="d-flex flex-row">
+          <div class="p2" v-if="selectedItems.length > 0">
+            <div
+              class="btn btn-primary myBackground btn-width"
+              @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>
+        </div>
       </div>
     </div>
+    <div style="height:5px"></div>
     <div v-if="items && items.length > 0" class="table-responsive">
-      <table id="table" class="table table-sm table-bordered table-hover">
-        <thead>
+      <table
+        id="table"
+        :class="{'table table-bordered table-hover': (1 === 1), 'table-sm': compact}"
+      >
+        <thead class="my-table table-header">
           <tr class="dnd-moved">
             <th v-for="(column, c) in Columns" :key="c">
               <div @click="sortBy(column)">{{ column }}</div>
@@ -21,7 +39,7 @@
             <th v-if="deleteable"></th>
           </tr>
         </thead>
-        <tbody>
+        <tbody class="my-table">
           <tr
             v-for="(item, i) in DisplayItems"
             :key="i"
@@ -41,7 +59,7 @@
           </tr>
         </tbody>
       </table>
-      <div class="d-flex justify-content-between">
+      <div class="d-flex justify-content-between" v-if="showPager">
         <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
         <div class="p-1">
           <BasePagination
@@ -96,6 +114,9 @@ export default {
     }
   },
   props: {
+    compact: {
+      default: true,
+    },
     allowSelect: {
       default: true,
     },
@@ -118,6 +139,12 @@ export default {
     columnsCount: {
       default: 6,
     },
+    showPager: {
+      default: true,
+    },
+    title: {
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -132,8 +159,13 @@ export default {
     };
   },
   methods: {
+    onClearSelected() {
+      this.selectedItems = [];
+      this.$emit('onClearSelected');
+    },
     isSelected(i) {
-      return _.some(this.selectedItems, x => x === i);
+      const ind = this.getActualIndex(i);
+      return _.some(this.selectedItems, x => x === ind);
     },
     onNew() {
       this.$emit('onNew');
@@ -148,15 +180,19 @@ export default {
       this.$emit('onDelete', item);
     },
     onRowClick(item, i) {
-      if (_.some(this.selectedItems, x => x === i)) {
-        this.selectedItems = this.selectedItems.filter(value => value !== i);
+      const ind = this.getActualIndex(i);
+      if (_.some(this.selectedItems, x => x === ind)) {
+        this.selectedItems = this.selectedItems.filter(x => x !== ind);
       } else {
         if (!this.allowMultipleSelect) {
           this.selectedItems = [];
         }
-        this.selectedItems.push(i);
+        this.selectedItems.push(ind);
       }
-      this.$emit('onRowClick', item);
+      this.$emit('onRowClick', this.selectedItems);
+    },
+    getActualIndex(index) {
+      return (this.currentPage - 1) * this.visibleItemsPerPageCount + index;
     },
     changeColumn(title, checked) {
       if (checked) {
@@ -285,4 +321,22 @@ th[draggable] a {
 .selected:hover {
   background-color: rgba(96, 203, 235, 0.85);
 }
+.btn-width {
+  width: 125px;
+}
+.table-title {
+  padding: 5px;
+  border: rgba(200, 200, 200, 0.66) double 2px;
+  border-radius: 5px;
+  background-color: rgba(96, 203, 235, 0.25);
+}
+.table-title:hover {
+  background-color: rgba(96, 203, 235, 0.4);
+}
+.table-header {
+  background-color: rgba(200, 200, 200, 0.66);
+}
+.my-table {
+  border: rgba(150, 150, 150, 0.75) 3px double;
+}
 </style>