summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorUdo Walter2018-08-06 11:08:07 +0200
committerUdo Walter2018-08-06 11:08:07 +0200
commite16d85208d8eacfb7802893a36b00a3bf207a12c (patch)
tree4b8a44997529b4577b7fd3beebbd0c0ce0b1439e
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
-rw-r--r--webapp/src/components/ComponentSearchTable.vue55
-rw-r--r--webapp/src/components/GroupModuleClientList.vue20
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue16
3 files changed, 66 insertions, 25 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 () {
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
index 101de5a..7de5ab4 100644
--- a/webapp/src/components/GroupModuleClientList.vue
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -29,24 +29,22 @@
<div>
<v-card>
<component-search-table v-model="selected" :data-table-props="dataTableProps">
- <template slot="items" slot-scope="table">
- <tr @click.stop="table.data.selected = !table.data.selected" @dblclick="loadClient(table.data.item.id)">
+ <template slot="items" slot-scope="row">
+ <tr @click="row.data.selected = !row.data.selected" @dblclick="loadClient(row.data.item.id)">
<td class="narrow-td">
<v-checkbox
color="primary"
- v-model="table.data.selected"
+ v-model="row.data.selected"
hide-details
- @click.native.stop
- @dblclick.native.stop
></v-checkbox>
</td>
- <td class="narrow-td">{{ table.data.item.id }}</td>
- <td>{{ table.data.item.name }}</td>
- <td>{{ table.data.item.ip }}</td>
- <td>{{ table.data.item.mac }}</td>
- <td>{{ table.data.item.uuid }}</td>
+ <td class="narrow-td">{{ row.data.item.id }}</td>
+ <td>{{ row.data.item.name }}</td>
+ <td>{{ row.data.item.ip }}</td>
+ <td>{{ row.data.item.mac }}</td>
+ <td>{{ row.data.item.uuid }}</td>
<td class="narrow-td">
- <v-btn class="next-arrow" icon @click="loadClient(table.data.item.id)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ <v-btn class="next-arrow" icon @click.stop="loadClient(row.data.item.id)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
</td>
</tr>
</template>
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index 24cd325..76fbdb1 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -25,22 +25,20 @@
<div>
<v-card>
<component-search-table v-model="selected" :data-table-props="dataTableProps">
- <template slot="items" slot-scope="table">
- <tr @click.stop="table.data.selected = !table.data.selected" @dblclick="loadGroup(table.data.item.id)">
+ <template slot="items" slot-scope="row">
+ <tr @click="row.data.selected = !row.data.selected" @dblclick="loadGroup(row.data.item.id)">
<td class="narrow-td">
<v-checkbox
color="primary"
- v-model="table.data.selected"
+ v-model="row.data.selected"
hide-details
- @click.native.stop
- @dblclick.native.stop
></v-checkbox>
</td>
- <td class="narrow-td">{{ table.data.item.id }}</td>
- <td>{{ table.data.item.name }}</td>
- <td>{{ table.data.item.description }}</td>
+ <td class="narrow-td">{{ row.data.item.id }}</td>
+ <td>{{ row.data.item.name }}</td>
+ <td>{{ row.data.item.description }}</td>
<td class="narrow-td">
- <v-btn class="next-arrow" icon @click="loadGroup(table.data.item.id)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ <v-btn class="next-arrow" icon @click.stop="loadGroup(row.data.item.id)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
</td>
</tr>
</template>