summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorUdo Walter2018-08-06 12:27:37 +0200
committerUdo Walter2018-08-06 12:27:37 +0200
commitf4f76462e1c6a6c4f9669d8c124c438447df633e (patch)
tree5dccf3fa5ec758a4f9d172081c6882cab81ee64c
parent[webapp/searchtable] add multi item selection with shift key (diff)
downloadbas-f4f76462e1c6a6c4f9669d8c124c438447df633e.tar.gz
bas-f4f76462e1c6a6c4f9669d8c124c438447df633e.tar.xz
bas-f4f76462e1c6a6c4f9669d8c124c438447df633e.zip
[webapp/groups] add color to selected table rows + bug fixes
-rw-r--r--webapp/src/components/ComponentSearchTable.vue55
-rw-r--r--webapp/src/components/GroupModuleClientList.vue12
-rw-r--r--webapp/src/components/GroupModuleDialog.vue57
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue12
4 files changed, 64 insertions, 72 deletions
diff --git a/webapp/src/components/ComponentSearchTable.vue b/webapp/src/components/ComponentSearchTable.vue
index 9a30c57..a22fa96 100644
--- a/webapp/src/components/ComponentSearchTable.vue
+++ b/webapp/src/components/ComponentSearchTable.vue
@@ -57,16 +57,21 @@
</v-layout>
<v-divider v-if="actionsNeeded"></v-divider>
<v-data-table
- v-bind="computedDataTableProps"
- :value="value"
- @input="$emit('input', $event)"
- :search="search"
- :pagination.sync="pagination"
- :custom-filter="customFilter"
- @click.native.capture.passive="setShiftState"
+ :headers="headers"
+ :items="items"
+ :select-all="selectAll"
+ :item-key="itemKey"
+ v-bind="dataTableProps"
+ :value="value"
+ @input="$emit('input', $event)"
+ hide-actions
+ :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>
+ <slot name="items" :data="props" :color="props.selected && { backgroundColor: $vuetify.theme.primary + '11' }" ></slot>
</template>
</v-data-table>
</div>
@@ -77,10 +82,26 @@
export default {
name: 'ComponentSearchTable',
props: {
+ headers: {
+ type: Array,
+ required: true
+ },
+ items: {
+ type: Array,
+ required: true
+ },
value: {
type: Array,
default: () => []
},
+ selectAll: {
+ type: Boolean,
+ default: () => false
+ },
+ itemKey: {
+ type: String,
+ default: () => 'id'
+ },
dataTableProps: {
type: Object,
default: () => {}
@@ -100,15 +121,11 @@ export default {
}
},
computed: {
- computedDataTableProps () {
- return { ...this.dataTableProps, hideActions: true }
- },
- items () { return this.dataTableProps.items },
- headersValues () { return this.dataTableProps.headers.map(x => x.value) },
- headerCount () { return this.dataTableProps.headers.length + (this.dataTableProps.selectAll ? 1 : 0) },
+ headersValues () { return this.headers.map(x => x.value) },
+ headerCount () { return this.headers.length + (this.selectAll ? 1 : 0) },
rowsPerPage () { return this.pagination.rowsPerPage },
actionsNeeded () {
- return this.dataTableProps.items && this.rowsPerPageItems.length > 0 && this.dataTableProps.items.length > this.rowsPerPageItems[0]
+ return this.items && this.rowsPerPageItems.length > 0 && this.items.length > this.rowsPerPageItems[0]
},
page () { return this.pagination.page }
},
@@ -136,14 +153,11 @@ export default {
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++) {
@@ -191,10 +205,7 @@ export default {
padding: 20px;
}
.search-field {
- margin-top: 0;
- margin-left: 10px;
- margin-right: 10px;
- margin-bottom: 5px;
+ margin: 0 10px 5px 10px;
}
.rows-per-page-select {
display: inline-block;
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
index 7de5ab4..3aed123 100644
--- a/webapp/src/components/GroupModuleClientList.vue
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -28,9 +28,9 @@
<template>
<div>
<v-card>
- <component-search-table v-model="selected" :data-table-props="dataTableProps">
+ <component-search-table v-model="selected" :headers="headers" :items="clients" select-all>
<template slot="items" slot-scope="row">
- <tr @click="row.data.selected = !row.data.selected" @dblclick="loadClient(row.data.item.id)">
+ <tr :style="row.color" @click="row.data.selected = !row.data.selected" @dblclick="loadClient(row.data.item.id)">
<td class="narrow-td">
<v-checkbox
color="primary"
@@ -90,14 +90,6 @@ export default {
{ text: this.$t('uuid'), value: 'uuid' },
{ sortable: false }
]
- },
- dataTableProps () {
- return {
- headers: this.headers,
- items: this.clients,
- selectAll: true,
- itemKey: 'id'
- }
}
},
watch: {
diff --git a/webapp/src/components/GroupModuleDialog.vue b/webapp/src/components/GroupModuleDialog.vue
index 69527b2..924d35f 100644
--- a/webapp/src/components/GroupModuleDialog.vue
+++ b/webapp/src/components/GroupModuleDialog.vue
@@ -49,43 +49,35 @@
<v-dialog
:value="dialog.show"
@input="setDialog({ show: $event })"
- max-width="500px"
+ :max-width="action === 'add' ? '700px' : '500px'"
scrollable
+ :persistent="action === 'add'"
>
<v-card>
<v-card-title primary-title class="dialog-title elevation-3">
<div class="headline">{{ title }}</div>
+ <v-spacer></v-spacer>
+ <v-btn v-if="action === 'add'" class="new-button" flat color="success" @click="newItem">
+ <v-icon left>create</v-icon>{{ $t('new') }}
+ </v-btn>
</v-card-title>
<v-card-text v-if="action === 'add'" class="table-container">
- <v-layout justify-space-between align-center>
- <v-btn flat color="success" @click="newItem"><v-icon left>create</v-icon>{{ $t('new') }}</v-btn>
- <v-text-field class="search-field" v-model="search" hide-details prepend-inner-icon="search"></v-text-field>
- </v-layout>
<v-divider></v-divider>
- <v-data-table
- :headers="headers"
- :items="items"
- item-key="id"
- select-all
- hide-actions
- v-model="selected"
- :search="search"
- >
- <template slot="items" slot-scope="props">
- <tr @click="props.selected = !props.selected">
+ <component-search-table v-model="selected" :headers="headers" :items="items" select-all>
+ <template slot="items" slot-scope="row">
+ <tr :style="row.color" @click="row.data.selected = !row.data.selected">
<td>
<v-checkbox
color="primary"
- v-model="props.selected"
+ v-model="row.data.selected"
hide-details
- @click.native.stop
></v-checkbox>
</td>
- <td>{{ props.item.id }}</td>
- <td>{{ props.item.name }}</td>
+ <td>{{ row.data.item.id }}</td>
+ <td>{{ row.data.item.name }}</td>
</tr>
</template>
- </v-data-table>
+ </component-search-table>
</v-card-text>
<v-card-text v-else class="selected-list">
<v-checkbox
@@ -109,23 +101,28 @@
</template>
<script>
+import ComponentSearchTable from '@/components/ComponentSearchTable'
import { mapState, mapMutations } from 'vuex'
export default {
name: 'GroupModuleDialog',
+ components: {
+ ComponentSearchTable
+ },
data () {
return {
- headers: [
- { text: 'ID', value: 'id' },
- { text: 'Name', value: 'name', width: '100000px' }
- ],
selected: [],
- search: '',
deleteInsteadOfRemove: false
}
},
computed: {
...mapState('groups', ['dialog', 'tabChain']),
+ headers () {
+ return [
+ { text: this.$t('id'), value: 'id' },
+ { text: this.$t('name'), value: 'name', width: '100000px' }
+ ]
+ },
action () {
return this.dialog.info.action === 'remove' && this.deleteInsteadOfRemove ? 'delete' : this.dialog.info.action
},
@@ -178,13 +175,13 @@ export default {
.table-container {
padding: 0;
}
-.search-field {
- margin: 10px;
- max-width: 200px;
-}
.dialog-title {
z-index: 1;
}
+.new-button {
+ margin-top: 0;
+ margin-bottom: 0;
+}
.delete-checkbox {
margin-top: 0;
margin-bottom: 20px;
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index 76fbdb1..1669aa9 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -24,9 +24,9 @@
<template>
<div>
<v-card>
- <component-search-table v-model="selected" :data-table-props="dataTableProps">
+ <component-search-table v-model="selected" :headers="headers" :items="groups" select-all>
<template slot="items" slot-scope="row">
- <tr @click="row.data.selected = !row.data.selected" @dblclick="loadGroup(row.data.item.id)">
+ <tr :style="row.color" @click="row.data.selected = !row.data.selected" @dblclick="loadGroup(row.data.item.id)">
<td class="narrow-td">
<v-checkbox
color="primary"
@@ -82,14 +82,6 @@ export default {
{ text: this.$t('description'), value: 'description' },
{ sortable: false }
]
- },
- dataTableProps () {
- return {
- headers: this.headers,
- items: this.groups,
- selectAll: true,
- itemKey: 'id'
- }
}
},
watch: {