diff client/src/components/importoverview/ImportOverview.vue @ 2738:add2d47c2567

client: tables: implemented simple default sorting
author Markus Kottlaender <markus@intevation.de>
date Tue, 19 Mar 2019 18:59:40 +0100
parents 375c9dd935ad
children 85de42146bdb
line wrap: on
line diff
--- a/client/src/components/importoverview/ImportOverview.vue	Tue Mar 19 18:07:50 2019 +0100
+++ b/client/src/components/importoverview/ImportOverview.vue	Tue Mar 19 18:59:40 2019 +0100
@@ -29,47 +29,25 @@
       </div>
       <UITableHeader
         :columns="[
-          { id: 'id', title: 'Id', width: '79px', disableSorting: true },
-          {
-            id: 'kind',
-            title: 'Kind',
-            width: '53px',
-            disableSorting: true
-          },
-          {
-            id: 'enqueued',
-            title: 'Enqueued',
-            width: '138px',
-            disableSorting: true
-          },
-          {
-            id: 'user',
-            title: 'User',
-            width: '105px',
-            disableSorting: true
-          },
-          {
-            id: 'signer',
-            title: 'Signer',
-            width: '105px',
-            disableSorting: true
-          },
-          {
-            id: 'state',
-            title: 'Status',
-            width: '72px',
-            disableSorting: true
-          },
-          {
-            id: 'warning',
-            icon: 'exclamation-triangle',
-            width: '44px',
-            disableSorting: true
-          }
+          { id: 'id', title: 'Id', width: '79px' },
+          { id: 'kind', title: 'Kind', width: '53px' },
+          { id: 'enqueued', title: 'Enqueued', width: '138px' },
+          { id: 'user', title: 'User', width: '105px' },
+          { id: 'signer', title: 'Signer', width: '105px' },
+          { id: 'state', title: 'Status', width: '72px' },
+          { id: 'warnings', icon: 'exclamation-triangle', width: '44px' }
         ]"
-        @sortingChanged="sortBy"
       />
-      <UITableBody :data="imports" maxHeight="80vh" v-slot="{ item: entry }">
+      <!--
+      For server-side sorting, etc simply don't use the sortTable filter.
+      Instead you could just pass a function that loads the imports, like:
+      :data="loadImports(sortColumn, sortDirection)"
+     -->
+      <UITableBody
+        :data="filteredImports() | sortTable(sortColumn, sortDirection)"
+        maxHeight="80vh"
+        v-slot="{ item: entry }"
+      >
         <LogEntry :entry="entry"></LogEntry>
       </UITableBody>
     </div>
@@ -100,14 +78,17 @@
  *
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 
 import { mapState, mapGetters } from "vuex";
-import { displayError, displayInfo } from "@/lib/errors.js";
-import { STATES } from "@/store/imports.js";
+import { displayError, displayInfo } from "@/lib/errors";
+import { STATES } from "@/store/imports";
+import { sortTable } from "@/lib/mixins";
 
 export default {
   name: "importoverviewalt",
+  mixins: [sortTable],
   components: {
     Filters: () => import("./Filters.vue"),
     LogEntry: () => import("./LogEntry.vue")
@@ -118,11 +99,18 @@
     };
   },
   computed: {
+    ...mapState("application", ["searchQuery"]),
     ...mapState("imports", ["imports", "reviewed"]),
     ...mapGetters("imports", ["filters"])
   },
   methods: {
-    sortBy() {},
+    filteredImports() {
+      return this.imports.filter(i => {
+        return (i.kind + i.id)
+          .toLowerCase()
+          .includes(this.searchQuery.toLowerCase());
+      });
+    },
     loadLogs() {
       this.loading = true;
       this.$store