summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/RegistrationModuleEdit.vue
diff options
context:
space:
mode:
authorUdo Walter2019-02-24 06:22:08 +0100
committerUdo Walter2019-02-24 06:22:08 +0100
commit57b6d39f762ff5c96c5d51bb06fb0fbd1d84ac9e (patch)
tree989368ef9ac860a50f3c7502536ed069d1ad239a /webapp/src/components/RegistrationModuleEdit.vue
parent[webapp/datatable] use minWidth prop for menuMode (diff)
downloadbas-57b6d39f762ff5c96c5d51bb06fb0fbd1d84ac9e.tar.gz
bas-57b6d39f762ff5c96c5d51bb06fb0fbd1d84ac9e.tar.xz
bas-57b6d39f762ff5c96c5d51bb06fb0fbd1d84ac9e.zip
[webapp/registration] use datatable to select groups
Diffstat (limited to 'webapp/src/components/RegistrationModuleEdit.vue')
-rw-r--r--webapp/src/components/RegistrationModuleEdit.vue51
1 files changed, 31 insertions, 20 deletions
diff --git a/webapp/src/components/RegistrationModuleEdit.vue b/webapp/src/components/RegistrationModuleEdit.vue
index f223523..4822dc9 100644
--- a/webapp/src/components/RegistrationModuleEdit.vue
+++ b/webapp/src/components/RegistrationModuleEdit.vue
@@ -7,7 +7,8 @@
"groups": "Groups",
"script": "Script",
"titleNew": "Create hook",
- "titleExisting": "Edit hook"
+ "titleExisting": "Edit hook",
+ "groupRestricted": "Restrict to groups"
},
"de": {
"name": "Name",
@@ -16,7 +17,8 @@
"groups": "Gruppen",
"script": "Skript",
"titleNew": "Hook erstellen",
- "titleExisting": "Hook bearbeiten"
+ "titleExisting": "Hook bearbeiten",
+ "groupRestricted": "Auf Gruppen beschränken"
}
}
</i18n>
@@ -26,27 +28,28 @@
<v-card-title primary-title class="dialog-title elevation-3">
<div class="headline">{{ dialog.info.id ? $t('titleExisting') : $t('titleNew') }}</div>
</v-card-title>
- <v-card-text>
+ <v-card-text style="height: 100%;">
<v-layout row wrap>
- <v-flex xs12 sm9>
+ <v-flex xs12 sm6>
<v-text-field prepend-icon="label" :label="$t('name')" color="primary" v-model="name"></v-text-field>
</v-flex>
+ <v-flex xs12 sm2 offset-sm1 style="display: flex; justify-content: center">
+ <v-tooltip top open-delay="800">
+ <v-menu offset-y left :close-on-content-click="false" :max-width="400" lazy slot="activator">
+ <v-btn slot="activator" class="info-heading-button">
+ <v-icon :left="groups.length > 0">device_hub</v-icon>{{ groups.length > 0 ? groups.length : '' }}
+ </v-btn>
+ <v-card>
+ <data-table v-model="groups" :headers="headers" :items="groupList" menu-mode min-width="200px"></data-table>
+ </v-card>
+ </v-menu>
+ <span>{{ $t('groupRestricted') }}</span>
+ </v-tooltip>
+ </v-flex>
<v-flex xs12 sm2 offset-sm1>
<v-select prepend-icon="label" color="primary" :items="types" :label="$t('type')" v-model="type" menu-props="offsetY"></v-select>
</v-flex>
</v-layout>
- <v-autocomplete
- prepend-icon="device_hub"
- :items="groupList"
- v-model="groups"
- :label="$t('groups')"
- color="primary"
- multiple
- item-value="id"
- item-text="name"
- small-chips
- deletable-chips
- ></v-autocomplete>
<v-textarea prepend-icon="description" rows="3" :label="$t('description')" color="primary" v-model="description"></v-textarea>
<div class="body-1 script-heading"><v-icon>code</v-icon><span>{{ $t('script') }}</span></div>
<codemirror class="script-editor" ref="editor" v-model="script"></codemirror>
@@ -61,11 +64,14 @@
</template>
<script>
-import axios from 'axios'
+import DataTable from '@/components/DataTable'
import { mapState } from 'vuex'
export default {
name: 'RegistrationModuleEdit',
+ components: {
+ DataTable
+ },
data () {
return {
name: '',
@@ -81,7 +87,12 @@ export default {
}
},
computed: {
- ...mapState('registration', ['dialog', 'groupList'])
+ ...mapState('registration', ['dialog', 'groupList']),
+ headers () {
+ return [
+ { key: 'name', text: this.$t('name') }
+ ]
+ }
},
watch: {
dialog: {
@@ -105,11 +116,11 @@ export default {
this.$store.commit('registration/setDialog', data)
},
async saveHook () {
- await axios.post('/api/registration/hooks/' + this.dialog.info.id, {
+ await this.$http.post('/api/registration/hooks/' + this.dialog.info.id, {
name: this.name,
description: this.description,
type: this.type,
- groups: this.groups,
+ groups: this.groups.map(x => x.id),
script: this.script
})
this.$store.dispatch('registration/loadHooks')