Added multi select to listview

src/components/admin/status/timeshareAdminPage.vue

@@ -1,40 +1,44 @@
 <template>
-  <!-- <section class="intro-single"> -->
-  <div class="container">
+  <div>
+    <br />
     <br />
     <br />
     <br />
     <br />
     <div class="row">
-      <div class="col-md-12 col-lg-8">
-        <!-- <div class="title-single-box"> -->
-        <!-- <h1 class="title-single" style="text-align:left;">Timeshare Admin</h1> -->
-        <!-- </div> -->
-        <div class="title-box-d">
-          <h1 class="title-d" style="text-align:left; font-size: 250%">Timeshare Admin</h1>
-        </div>
-        <br />
+      <div class="offset-1 col-md-10">
+        <ListView :items="items" :editable="true" @onEdit="onEdit" />
       </div>
     </div>
-    <div id="table" class="col-xs-12 table-responsive">
-      <datatable :columns="columns" :data="rows"></datatable>
-    </div>
   </div>
-  <!-- </section> -->
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import Log from '../../../assets/Log';
+import ListView from '../../shared/listView.vue';
 
 export default {
   name: 'TimeshareAdmin',
-  created() {
-    this.gettimeshareAdmin();
+  components: {
+    ListView,
+  },
+  data() {
+    return {
+      user: Log.getUser(),
+    };
+  },
+  mounted() {
+    console.log(this.user.id);
+    this.getItems(this.user.id);
   },
   computed: {
-    ...mapState('status', ['timeshareAdmin']),
+    ...mapState('myWeeks', ['items']),
   },
   methods: {
-    ...mapActions('status', ['gettimeshareAdmin']),
+    ...mapActions('myWeeks', ['getItems']),
+    onEdit(item) {
+      this.$router.push(`/timeshare/${item.id}`);
+    },
   },
 };
 </script>

src/components/communication/templateDetail.vue

@@ -174,6 +174,7 @@
             :hideSearch="true"
             :showNew="false"
             :deleteable="CanEdit"
+            :allowMultipleSelect="true"
             @onDelete="onItemDelete"
           />
         </div>

src/components/communication/templatePage.vue

@@ -57,7 +57,9 @@ export default {
   methods: {
     ...mapActions('template', ['getList']),
     onRowClick(item) {
-      this.detailItem = item;
+      if (this.detailItem !== item) {
+        this.detailItem = item;
+      } else this.detailItem = undefined;
       this.clickedNew = false;
     },
     onNew() {

src/components/shared/listView.vue

@@ -10,8 +10,8 @@
         <div class="btn btn-primary myBackground" @click="onNew()">New</div>
       </div>
     </div>
-    <div v-if="items && items.length > 0">
-      <table id="table" class="table table-bordered table-hover">
+    <div v-if="items && items.length > 0" class="table-responsive">
+      <table id="table" class="table table-sm table-bordered table-hover">
         <thead>
           <tr class="dnd-moved">
             <th v-for="(column, c) in Columns" :key="c">
@@ -25,8 +25,8 @@
           <tr
             v-for="(item, i) in DisplayItems"
             :key="i"
-            class="text-left dnd-moved"
-            @click="onRowClick(item)"
+            @click="onRowClick(item, i)"
+            :class="{'selected': isSelected(i), 'cursor-pointer': allowSelect}"
           >
             <td
               v-for="(column, c) in Columns"
@@ -96,6 +96,12 @@ export default {
     }
   },
   props: {
+    allowSelect: {
+      default: true,
+    },
+    allowMultipleSelect: {
+      default: false,
+    },
     hideSearch: {
       default: false,
     },
@@ -115,6 +121,7 @@ export default {
   },
   data() {
     return {
+      selectedItems: [],
       showControl: false,
       sortKey: '',
       reverse: false,
@@ -125,6 +132,9 @@ export default {
     };
   },
   methods: {
+    isSelected(i) {
+      return _.some(this.selectedItems, x => x === i);
+    },
     onNew() {
       this.$emit('onNew');
     },
@@ -137,7 +147,15 @@ export default {
     onDelete(item) {
       this.$emit('onDelete', item);
     },
-    onRowClick(item) {
+    onRowClick(item, i) {
+      if (_.some(this.selectedItems, x => x === i)) {
+        this.selectedItems = this.selectedItems.filter(value => value !== i);
+      } else {
+        if (!this.allowMultipleSelect) {
+          this.selectedItems = [];
+        }
+        this.selectedItems.push(i);
+      }
       this.$emit('onRowClick', item);
     },
     changeColumn(title, checked) {
@@ -257,4 +275,14 @@ th[draggable] a {
 .over {
   background-color: rgba(0, 0, 255, 0.35);
 }
+.my-border {
+  border: solid 3px silver;
+}
+.selected {
+  background-color: rgba(96, 203, 235, 0.5);
+  border: white 2px double;
+}
+.selected:hover {
+  background-color: rgba(96, 203, 235, 0.85);
+}
 </style>

src/components/shared/navBar.vue

@@ -144,6 +144,11 @@
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/unitConfiguration/list')"
                 >Unit Configuration</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/communication/template')"
+                >Templates</a>
+                <hr />
                 <a
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/status/userManagementPage')"
@@ -160,6 +165,7 @@
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/propertyTypes/list')"
                 >Property Types</a>
+                <hr />
                 <a
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/searchLog')"