Soring on Property Admin

src/assets/staticData/itemsPerPageFive.js

+const items = [5, 10, 15, 20, 25, 50, 100];
+export default items;

src/components/admin/property/propertyList.vue

           <table class="table table-striped table-responsive">
             <thead>
               <tr>
-                <th scope="col">Owner</th>
-                <th scope="col">Reference</th>
-                <th scope="col">Property</th>
+                <th scope="col" v-for="(col, c) in displayColumns" :key="c">
+                  <div @click="sortBy(columns[c])" style="cursor: pointer;">
+                    <div class="d-flex bd-highlight">
+                      <div class="w-100 bd-highlight">{{ col }}</div>
+                      <div class="flex-shrink-1 bd-highlight">
+                        <img
+                          src="../../../../public/img/sort-up.png"
+                          height="8px;"
+                          v-if="sortKey === columns[c] && reverse"
+                        />
+                        <img
+                          src="../../../../public/img/sort-down.png"
+                          height="8px;"
+                          v-if="sortKey === columns[c] && !reverse"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </th>
+                <!-- <th scope="col">Property</th>
                 <th scope="col">Unit</th>
                 <th scope="col">Size</th>
                 <th scope="col">Price Ex VAT</th>
                 <th scope="col">Suburb</th>
                 <th scope="col">Status</th>
                 <th scope="col">Type</th>
-                <th scope="col">Publish</th>
+                <th scope="col">Publish</th>-->
                 <th scope="col">Edit</th>
                 <th scope="col">Delete</th>
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(item, i) in FilteredProperties" :key="i">
+              <tr v-for="(item, i) in DisplayItems" :key="i">
                 <td>{{ item.owner }}</td>
                 <td>{{ item.reference }}</td>
                 <td>{{ item.property }}</td>
               </tr>
             </tbody>
           </table>
+          <div class="d-flex justify-content-between" v-if="showPager">
+            <div class="p-1">
+              {{
+              currentPage +
+              " / " +
+              PageCount +
+              (" - (" + FilteredProperties.length + " items)")
+              }}
+            </div>
+            <div class="p-1">
+              <BasePagination
+                :currentPage="currentPage"
+                :pageCount="PageCount"
+                @nextPage="pageChangeHandle('next')"
+                @previousPage="pageChangeHandle('previous')"
+                @loadPage="pageChangeHandle"
+              />
+            </div>
+            <div class="p-2">
+              <div class="d-flex flex-row">
+                <div>
+                  <select
+                    class="form-control uniSelect"
+                    v-model="visibleItemsPerPageCount"
+                    @change="onChangeItemsPerPage()"
+                  >
+                    <option v-for="(item, i) in itemsPerPageList" :key="i">{{ item }}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="p-2">
+            <div class="d-flex flex-row">
+              <div>
+                <button v-if="sortKey !== 'id'" class="btn-solid-blue" @click="ClearSort">Clear Sort</button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div v-if="wait" id="preloader"></div>
 <script>
 import { mapState, mapActions } from "vuex";
 import Log from "../../../assets/Log";
+import BasePagination from "../../shared/basePagination";
+import ItemsPerPageList from "../../../assets/staticData/itemsPerPageFive";
 import _ from "lodash";
 
 export default {
+  components: {
+    BasePagination,
+  },
   data() {
     return {
+      hover: -1,
       filter: undefined,
       userId: Log.getUser().id,
       wait: true,
+      showPager: true,
+      visibleItemsPerPageCount: 10,
+      itemsPerPageList: ItemsPerPageList,
+      currentPage: 1,
+      reverse: true,
+      sortKey: "id",
+      displayColumns: [
+        "Owner",
+        "Reference",
+        "Property",
+        "Unit",
+        "Size",
+        "Price Ex VAT",
+        "Region",
+        "Town",
+        "Suburb",
+        "Status",
+        "Type",
+        "Publish",
+      ],
+      columns: [
+        "owner",
+        "reference",
+        "property",
+        "unit",
+        "size",
+        "price",
+        "region",
+        "town",
+        "suburb",
+        "status",
+        "type",
+        "isPublished",
+      ],
     };
   },
   methods: {
     Delete(item) {
       this.deleteProperty(item.id);
     },
+    async pageChangeHandle(value) {
+      switch (value) {
+        case "next":
+          this.currentPage += 1;
+          break;
+        case "previous":
+          this.currentPage -= 1;
+          break;
+        default:
+          this.currentPage = value;
+      }
+    },
+    sortBy(sortKey) {
+      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
+      this.sortKey = sortKey;
+    },
+    ClearSort() {
+      this.reverse = true;
+      this.sortKey = "id";
+    },
   },
   computed: {
     ...mapState("propertyList", ["properties"]),
                 .indexOf(this.filter.toLowerCase()) > -1
           )
         );
-        return list;
+        return _.orderBy(list, this.sortKey, this.SortDirection);
       } else {
-        return this.properties;
+        return _.orderBy(this.properties, this.sortKey, this.SortDirection);
       }
     },
+    PageCount() {
+      return this.visibleItemsPerPageCount !== 0
+        ? Math.ceil(
+            this.FilteredProperties.length / this.visibleItemsPerPageCount
+          )
+        : 1;
+    },
+    DisplayItems() {
+      const list = this.FilteredProperties;
+      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
+      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
+      if (endSlice > list.length) {
+        endSlice = list.length;
+      }
+      return list.slice(startSlice, endSlice);
+    },
+    SortDirection() {
+      return this.reverse ? "desc" : "asc";
+    },
   },
   mounted() {
     this.wait = true;
     this.getAdminProperties(this.userId).then((fulfuilled) => {
       this.wait = false;
+      if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
+        const [startItem] = this.itemsPerPageList;
+        this.visibleItemsPerPageCount = startItem;
+      }
     });
   },
+  // watch: {
+  //   sortKey: {
+  //     immediate: true,
+  //     handler(val, oldVal) {
+  //       return this.FilteredProperties;
+  //     },
+  //   },
+  // },
 };
 </script>