summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/ConfiguratorModuleAssign.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/ConfiguratorModuleAssign.vue')
-rw-r--r--webapp/src/components/ConfiguratorModuleAssign.vue84
1 files changed, 57 insertions, 27 deletions
diff --git a/webapp/src/components/ConfiguratorModuleAssign.vue b/webapp/src/components/ConfiguratorModuleAssign.vue
index 8c9ba83..af49d45 100644
--- a/webapp/src/components/ConfiguratorModuleAssign.vue
+++ b/webapp/src/components/ConfiguratorModuleAssign.vue
@@ -5,14 +5,22 @@
"description": "Description",
"ip": "IP Address",
"title": "Assign groups and clients",
- "assign": "Assign"
+ "assign": "Assign",
+ "groups": "Groups",
+ "clients": "Clients",
+ "success": "Assignment successful.",
+ "config": "Config"
},
"de": {
"name": "Name",
"description": "Beschreibung",
"ip": "IP Adresse",
- "title": "Gruppen und Clienten zuweisen",
- "assign": "Zuweisen"
+ "title": "Gruppen und Clients zuweisen",
+ "assign": "Zuweisen",
+ "groups": "Gruppen",
+ "clients": "Clients",
+ "success": "Zuweisung erfolgreich.",
+ "config": "Konfiguration"
}
}
</i18n>
@@ -20,17 +28,30 @@
<template>
<v-card style="overflow: hidden">
<v-card-title class="dialog-title elevation-3">
- <div class="headline">{{ $t('title') }}</div>
- <div class="subheading text--secondary pa-2">{{ dialog.info.name }}</div>
+ <div class="dialog-title-text">
+ <div class="headline non-selectable">{{ $t('title') }}</div>
+ <div class="subheading text--secondary pa-2">{{ $t('config') + ': ' + dialog.info.name }}</div>
+ </div>
+ <v-tabs v-model="tabs" grow slider-color="primary">
+ <v-tab><v-icon class="tabbar-tabicon">category</v-icon>{{ selectedGroups.length + ' ' + $t('groups') }}</v-tab>
+ <v-tab><v-icon class="tabbar-tabicon">computer</v-icon>{{ selectedClients.length + ' ' + $t('clients') }}</v-tab>
+ </v-tabs>
</v-card-title>
<v-card-text class="dialog-content">
- <data-table v-model="selectedGroups" :headers="groupHeaders" :items="groupList" slim></data-table>
+ <v-tabs-items v-model="tabs">
+ <v-tab-item>
+ <data-table v-model="selectedGroups" :headers="groupHeaders" :items="groupList" slim :row-count="$vuetify.breakpoint.smAndDown ? -1 : undefined"></data-table>
+ </v-tab-item>
+ <v-tab-item>
+ <data-table v-model="selectedClients" :headers="clientHeaders" :items="clientList" slim :row-count="$vuetify.breakpoint.smAndDown ? -1 : undefined"></data-table>
+ </v-tab-item>
+ </v-tabs-items>
</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="primary" @click="saveEntry">{{ $t('assign') }}</v-btn>
+ <v-btn color="primary" @click="saveAssignment">{{ $t('assign') }}</v-btn>
</v-card-actions>
</v-card>
</template>
@@ -46,6 +67,7 @@ export default {
},
data () {
return {
+ tabs: 0,
selectedGroups: [],
selectedClients: []
}
@@ -70,12 +92,16 @@ export default {
dialog: {
immediate: true,
deep: true,
- handler (value) {
- if (value.type === 'entry' && value.show) {
- this.name = value.info.name || ''
- this.script = value.info.script || ''
- this.interval.id = setInterval(this.refreshEditor, 50)
- this.interval.counter = 0
+ async handler (value) {
+ if (value.show && value.type === 'assign') {
+ this.selectedGroups = []
+ this.selectedClients = []
+ const [ groupsResponse, clientsResponse ] = await Promise.all([
+ this.$http.get(`/api/configurator/configs/${value.info.id}/groups`),
+ this.$http.get(`/api/configurator/configs/${value.info.id}/clients`)
+ ])
+ this.selectedGroups = groupsResponse.data
+ this.selectedClients = clientsResponse.data
}
}
}
@@ -84,20 +110,14 @@ export default {
setDialog (data) {
this.$store.commit('configurator/setDialog', data)
},
- async saveEntry () {
- let url = '/api/configurator/entries'
- if (this.dialog.info.id !== undefined) url += '/' + this.dialog.info.id
- await this.$http.post(url, {
- name: this.name,
- script: this.script
- })
- this.$store.dispatch('configurator/loadData')
+ async saveAssignment () {
+ let url = '/api/configurator/configs/' + this.dialog.info.id
+ await Promise.all([
+ this.$http.put(url + '/groups', { ids: this.selectedGroups.map(x => x.id) }),
+ this.$http.put(url + '/clients', { ids: this.selectedClients.map(x => x.id) })
+ ])
+ this.$snackbar({ color: 'success', text: this.$t('success') })
this.setDialog({ show: false })
- },
- refreshEditor () {
- this.interval.counter++
- if (this.$refs.editor) this.$refs.editor.codemirror.refresh()
- if (this.interval.counter >= 15) clearInterval(this.interval.id)
}
}
}
@@ -109,7 +129,17 @@ export default {
z-index: 1;
display: flex;
flex-direction: column;
- align-items: flex-start;
+ align-items: stretch;
+ margin: 0;
+ padding: 0;
+}
+
+.dialog-title >>> .v-tabs .v-tabs__item {
+ text-transform: none;
+}
+
+.dialog-title-text {
+ padding: 16px 16px 0 16px;
}
.dialog-content {