Mercurial > gemma
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