summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleDialog.vue
diff options
context:
space:
mode:
authorUdo Walter2019-02-24 02:33:52 +0100
committerUdo Walter2019-02-24 02:33:52 +0100
commit813195e3dfb5baae09aa11cddeef12fb0b9fb49b (patch)
tree58562c85d76efdad41afcd0664c5a8cdc8cb4a55 /webapp/src/components/GroupModuleDialog.vue
parent[webapp/alerts] Remove unnecessary code which produced vue warnings (diff)
downloadbas-813195e3dfb5baae09aa11cddeef12fb0b9fb49b.tar.gz
bas-813195e3dfb5baae09aa11cddeef12fb0b9fb49b.tar.xz
bas-813195e3dfb5baae09aa11cddeef12fb0b9fb49b.zip
[webapp/groups] rework old tables to new data table
slightly redesigned the editing of groups and clients
Diffstat (limited to 'webapp/src/components/GroupModuleDialog.vue')
-rw-r--r--webapp/src/components/GroupModuleDialog.vue106
1 files changed, 68 insertions, 38 deletions
diff --git a/webapp/src/components/GroupModuleDialog.vue b/webapp/src/components/GroupModuleDialog.vue
index 7c20e85..5dcab77 100644
--- a/webapp/src/components/GroupModuleDialog.vue
+++ b/webapp/src/components/GroupModuleDialog.vue
@@ -13,6 +13,10 @@
"add": {
"group": "Add groups | Add this group? | Add these {0} groups?",
"client": "Add clients | Add this client? | Add these {0} clients?"
+ },
+ "select": {
+ "group": "Select groups",
+ "client": "Select clients"
}
},
"success": {
@@ -35,7 +39,9 @@
},
"new": "New",
"id": "ID",
- "name": "Name"
+ "name": "Name",
+ "description": "Description",
+ "ip": "IP Address"
},
"de": {
"title": {
@@ -50,6 +56,10 @@
"add": {
"group": "Gruppen hinzufügen | Diese Gruppe hinzufügen? | Diese {0} Gruppen hinzufügen?",
"client": "Clienten hinzufügen | Diesen Clienten hinzufügen? | Diese {0} Clienten hinzufügen?"
+ },
+ "select": {
+ "group": "Gruppen auswählen",
+ "clienten": "Clienten auswählen"
}
},
"success": {
@@ -72,7 +82,9 @@
},
"new": "Neu",
"id": "ID",
- "name": "Name"
+ "name": "Name",
+ "description": "Beschreibung",
+ "ip": "IP Adresse"
}
}
</i18n>
@@ -81,10 +93,10 @@
<v-dialog
:value="dialog.show"
@input="setDialog({ show: $event })"
- :max-width="action === 'add' ? '1000px' : '500px'"
+ :max-width="actionWidthMap[action]"
scrollable
- :persistent="action === 'add'"
- :fullscreen="$vuetify.breakpoint.xsOnly"
+ :persistent="action === 'add' || action === 'select'"
+ :fullscreen="$vuetify.breakpoint.smAndDown"
>
<v-card>
<v-card-title primary-title class="dialog-title elevation-3">
@@ -94,25 +106,11 @@
<v-icon left>create</v-icon>{{ $t('new') }}
</v-btn>
</v-card-title>
- <v-card-text v-if="action === 'add'" class="table-container">
- <v-divider></v-divider>
- <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="row.data.selected"
- hide-details
- ></v-checkbox>
- </td>
- <td>{{ row.data.item.id }}</td>
- <td>{{ row.data.item.name }}</td>
- </tr>
- </template>
- </component-search-table>
+
+ <v-card-text v-if="action === 'add' || action === 'select'" class="table-container">
+ <data-table ref="datatable" v-model="selected" :headers="headers" :items="items" :page-mode="$vuetify.breakpoint.smAndDown"></data-table>
</v-card-text>
- <v-card-text v-else class="selected-list">
+ <v-card-text v-else-if="action === 'remove' || action === 'delete'" class="selected-list">
<v-checkbox
class="delete-checkbox"
v-if="dialog.info.action === 'remove'"
@@ -123,37 +121,53 @@
></v-checkbox>
<div v-for="item in dialog.info.selected" class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }}</div>
</v-card-text>
+
<v-divider></v-divider>
+
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
- <v-btn :color="action === 'add' ? 'success' : 'error'" @click="submitAction">{{ $t(action) }}</v-btn>
+ <v-btn :color="actionColorMap[action]" @click="submitAction">{{ $t(action) }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
-import ComponentSearchTable from '@/components/ComponentSearchTable'
+import DataTable from '@/components/DataTable'
import { mapState, mapMutations } from 'vuex'
export default {
name: 'GroupModuleDialog',
components: {
- ComponentSearchTable
+ DataTable
},
data () {
return {
selected: [],
- deleteInsteadOfRemove: false
+ deleteInsteadOfRemove: false,
+ actionColorMap: {
+ 'add': 'success',
+ 'remove': 'error',
+ 'delete': 'error',
+ 'select': 'primary'
+ },
+ actionWidthMap: {
+ 'add': '1000px',
+ 'remove': '500px',
+ 'delete': '500px',
+ 'select': '1000px'
+ }
}
},
computed: {
...mapState('groups', ['dialog', 'tabChain']),
headers () {
+ const lastColumn = this.dialog.info.type === 'client' ? 'ip' : 'description'
return [
- { text: this.$t('id'), value: 'id' },
- { text: this.$t('name'), value: 'name', width: '100000px' }
+ { key: 'id', text: this.$t('id'), width: '100px' },
+ { key: 'name', text: this.$t('name') },
+ { key: lastColumn, text: this.$t(lastColumn) }
]
},
action () {
@@ -168,19 +182,35 @@ export default {
items () {
if (this.dialog.info.type === 'group') return this.$store.state.groups.groupList
if (this.dialog.info.type === 'client') return this.$store.state.groups.clientList
+ },
+ dialogAction () {
+ return this.dialog.info ? this.dialog.info.action : undefined
}
},
- methods: {
- ...mapMutations('groups', ['setActiveTab', 'setTab']),
- setDialog (data) {
- this.$store.commit('groups/setDialog', data)
- if (data.show === false) {
- this.selected = []
- this.search = ''
- this.deleteInsteadOfRemove = false
- }
+ watch: {
+ dialogAction () {
+ if (this.$refs.datatable) this.$refs.datatable.resetData()
},
+ dialog: {
+ deep: true,
+ handler () {
+ if (this.dialog.show) {
+ this.deleteInsteadOfRemove = false
+ if (this.dialog.info.action === 'select') this.selected = this.dialog.info.selected
+ else this.selected = []
+ }
+ }
+ }
+ },
+ methods: {
+ ...mapMutations('groups', ['setActiveTab', 'setTab', 'setDialog']),
submitAction () {
+ if (this.action === 'select') {
+ this.dialog.info.callback(this.selected)
+ this.setDialog({ show: false })
+ return
+ }
+
const actionMap = {
'delete': { 'group': 'deleteGroups', 'client': 'deleteClients' },
'remove': { 'group': 'removeSubroups', 'client': 'removeClients' },