summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/ComponentSearchTable.vue
diff options
context:
space:
mode:
authorUdo Walter2018-08-06 11:08:07 +0200
committerUdo Walter2018-08-06 11:08:07 +0200
commite16d85208d8eacfb7802893a36b00a3bf207a12c (patch)
tree4b8a44997529b4577b7fd3beebbd0c0ce0b1439e /webapp/src/components/ComponentSearchTable.vue
parent[webapp/searchtable] bugfix (diff)
downloadbas-e16d85208d8eacfb7802893a36b00a3bf207a12c.tar.gz
bas-e16d85208d8eacfb7802893a36b00a3bf207a12c.tar.xz
bas-e16d85208d8eacfb7802893a36b00a3bf207a12c.zip
[webapp/searchtable] add multi item selection with shift key
Diffstat (limited to 'webapp/src/components/ComponentSearchTable.vue')
-rw-r--r--webapp/src/components/ComponentSearchTable.vue55
1 files changed, 50 insertions, 5 deletions
diff --git a/webapp/src/components/ComponentSearchTable.vue b/webapp/src/components/ComponentSearchTable.vue
index 98a2a55..9a30c57 100644
--- a/webapp/src/components/ComponentSearchTable.vue
+++ b/webapp/src/components/ComponentSearchTable.vue
@@ -63,6 +63,7 @@
:search="search"
:pagination.sync="pagination"
:custom-filter="customFilter"
+ @click.native.capture.passive="setShiftState"
>
<template v-if="$scopedSlots.items" slot="items" slot-scope="props">
<slot name="items" :data="props" ></slot>
@@ -93,7 +94,9 @@ export default {
return {
search: '',
pagination: {},
- selected: []
+ displayedItems: [],
+ lastSelectId: null,
+ shiftKey: false
}
},
computed: {
@@ -106,14 +109,53 @@ export default {
rowsPerPage () { return this.pagination.rowsPerPage },
actionsNeeded () {
return this.dataTableProps.items && this.rowsPerPageItems.length > 0 && this.dataTableProps.items.length > this.rowsPerPageItems[0]
- }
+ },
+ page () { return this.pagination.page }
},
watch: {
rowsPerPage () {
this.pagination.page = 1
+ this.lastSelectId = null
},
items () {
this.pagination.page = 1
+ this.lastSelectId = null
+ },
+ page (value) {
+ this.lastSelectId = null
+ },
+ displayedItems () {
+ this.lastSelectId = null
+ },
+ value (newValue, oldValue) {
+ const changedCount = newValue.length - oldValue.length
+ var doSelect
+ var startId = null
+ if (this.shiftKey !== null && changedCount === 1) {
+ if (this.shiftKey) startId = this.lastSelectId
+ this.lastSelectId = newValue.find(x => !oldValue.includes(x)).id
+ doSelect = true
+ } else if (this.shiftKey !== null && changedCount === -1) {
+ console.log('a')
+ if (this.shiftKey) startId = this.lastSelectId
+ this.lastSelectId = oldValue.find(x => !newValue.includes(x)).id
+ doSelect = false
+ }
+ if (startId !== null) {
+ console.log(changedCount)
+ console.log(startId, this.lastSelectId)
+ var inRange = false
+ var tmp = doSelect ? [...this.value] : []
+ for (var i = 0; i < this.displayedItems.length; i++) {
+ if (!inRange && (this.displayedItems[i].id === startId || (this.displayedItems[i].id === this.lastSelectId))) inRange = true
+ else if (inRange && (this.displayedItems[i].id === startId || (this.displayedItems[i].id === this.lastSelectId))) break
+ if (inRange && (!doSelect || !tmp.includes(this.displayedItems[i]))) tmp.push(this.displayedItems[i])
+ }
+ if (!doSelect || !tmp.includes(this.displayedItems[i])) tmp.push(this.displayedItems[i])
+ if (!doSelect) tmp = this.value.filter(x => !tmp.includes(x))
+ this.shiftKey = null
+ this.$emit('input', tmp)
+ }
}
},
methods: {
@@ -125,13 +167,16 @@ export default {
},
customFilter (items, search) {
search = String(search).toLowerCase().trim()
- let matchedItems = search === '' ? items : items.filter(item => {
+ this.displayedItems = search === '' ? items : items.filter(item => {
return Object.keys(item).some(key => {
return this.headersValues.includes(key) && String(item[key]).toLowerCase().includes(search)
})
})
- this.pagination.totalItems = matchedItems.length
- return matchedItems
+ this.pagination.totalItems = this.displayedItems.length
+ return this.displayedItems
+ },
+ setShiftState (event) {
+ this.shiftKey = event.shiftKey
}
},
created () {