summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleDialog.vue
diff options
context:
space:
mode:
authorUdo Walter2018-08-06 12:27:37 +0200
committerUdo Walter2018-08-06 12:27:37 +0200
commitf4f76462e1c6a6c4f9669d8c124c438447df633e (patch)
tree5dccf3fa5ec758a4f9d172081c6882cab81ee64c /webapp/src/components/GroupModuleDialog.vue
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
Diffstat (limited to 'webapp/src/components/GroupModuleDialog.vue')
-rw-r--r--webapp/src/components/GroupModuleDialog.vue57
1 files changed, 27 insertions, 30 deletions
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;