refactor

Author: jazzlikethat

src/components/TicketsTable/SortFilterSearch.js

@@ -43,6 +43,42 @@ export default {
         return match;
       });
     },
+    performSort: function() {
+      let field = this.serverParams.sort.field;
+      let type = this.serverParams.sort.type;
+      if (field === "" || type === "") {
+        return;
+      }
+      let columnFieldType = this.columns.filter(function(entry) {
+        return entry.field === field;
+      })[0].type;
+      this.filteredTickets.sort(function(a, b) {
+        a = a[field];
+        b = b[field];
+        if (columnFieldType !== "number") {
+          a = a
+            .split("-")
+            .pop()
+            .trim();
+          b = b
+            .split("-")
+            .pop()
+            .trim();
+        }
+        if (type === "asc") {
+          return a < b ? -1 : a > b ? 1 : 0;
+        } else {
+          // type = "desc"
+          return a > b ? -1 : a < b ? 1 : 0;
+        }
+      });
+      // reset page number on sort
+      this.serverParams.page = 1;
+      this.ticketsToShow = this.filteredTickets.slice(
+        0,
+        this.serverParams.perPage
+      );
+    },
     getChartsData: function() {
       let priority = {
         "0 - Unassigned": 0,
@@ -92,6 +128,7 @@ export default {
 
       this.performFilter();
       this.performSearch();
+      this.performSort();
       this.getChartsData();
 
       this.ticketsToShow = this.filteredTickets.slice(
@@ -125,35 +162,7 @@ export default {
         field: field,
         type: type
       };
-      let columnFieldType = this.columns.filter(function(entry) {
-        return entry.field === field;
-      })[0].type;
-      this.filteredTickets.sort(function(a, b) {
-        a = a[field];
-        b = b[field];
-        if (columnFieldType !== "number") {
-          a = a
-            .split("-")
-            .pop()
-            .trim();
-          b = b
-            .split("-")
-            .pop()
-            .trim();
-        }
-        if (type === "asc") {
-          return a < b ? -1 : a > b ? 1 : 0;
-        } else {
-          // type = "dsc"
-          return a > b ? -1 : a < b ? 1 : 0;
-        }
-      });
-      // reset page number on sort
-      this.serverParams.page = 1;
-      this.ticketsToShow = this.filteredTickets.slice(
-        0,
-        this.serverParams.perPage
-      );
+      this.performSort();
     },
     onPageChange: function(params) {
       // event from vue-good-table

src/components/TicketsTable/TicketsTable.vue

@@ -8,7 +8,7 @@
         type="text"
         class="form-control"
         v-model="userSearchInput"
-        placeholder="Search tickets"
+        v-bind:placeholder="searchPlaceholder"
       />
     </div>
     <!-- Modal Component -->
@@ -44,7 +44,7 @@
         perPageDropdown: [10],
         dropdownAllowAll: false
       }"
-      :totalRows="filteredTickets.length"
+      :totalRows="filteredTicketsLength"
       :columns="columns"
       :rows="ticketsToShow"
       @on-column-filter="onColumnFilter"
@@ -57,7 +57,7 @@
 
 <script>
 import debounce from "lodash.debounce";
-import ticketsFromJSONFile from "@/data/sample-data-2.json";
+import ticketsFromJSONFile from "@/data/sample-data.json";
 import PieChart from "../PieChart.vue";
 import BarChart from "../BarChart.vue";
 import NewTicket from "../NewTicket.vue";
@@ -112,6 +112,9 @@ export default {
       };
       this.serverParams.page = 1;
       this.userSearchInput = "";
+
+      // render the tickets after reseting the params
+      this.performFilterSearch();
     },
     closeModal: function() {
       this.$refs.myModalRef.hide();
@@ -143,6 +146,14 @@ export default {
     userSearchInput: function() {
       this.debounceSearch();
     }
+  },
+  computed: {
+    searchPlaceholder() {
+      return "Search in " + this.filteredTickets.length + " tickets";
+    },
+    filteredTicketsLength() {
+      return this.filteredTickets.length;
+    }
   }
 };
 </script>
@@ -165,7 +176,7 @@ export default {
 
     input {
       display: inline-block;
-      width: 250px;
+      width: 300px;
       max-width: 50%;
     }
   }