summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleGroupView.vue
diff options
context:
space:
mode:
authorUdo Walter2018-07-31 04:20:37 +0200
committerUdo Walter2018-07-31 04:20:37 +0200
commitcb7711cc9f76fe4211538bad74de68c57cd07e83 (patch)
tree633568bcbc8737e97eb0e99eaefbf846422e6147 /webapp/src/components/GroupModuleGroupView.vue
parent[webapp/external-backends] Dialog polishing. Thx Udo for fixing the scroll co... (diff)
downloadbas-cb7711cc9f76fe4211538bad74de68c57cd07e83.tar.gz
bas-cb7711cc9f76fe4211538bad74de68c57cd07e83.tar.xz
bas-cb7711cc9f76fe4211538bad74de68c57cd07e83.zip
[groups] add edit form for groups; add description to groups and clients
Diffstat (limited to 'webapp/src/components/GroupModuleGroupView.vue')
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue114
1 files changed, 107 insertions, 7 deletions
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index 69a8832..4126b2c 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -9,14 +9,77 @@
<template>
<div>
- <v-subheader>Groups</v-subheader>
- <v-card>
- <group-module-group-list :tabIndex="tabIndex" />
- </v-card>
+ <template v-if="tabIndex > 0">
+ <v-subheader>Info</v-subheader>
+ <v-card>
+ <v-card-text>
+ <v-layout wrap>
+ <v-flex sm6 xs12 order-xs2 order-sm1>
+ <v-text-field v-if="editMode" hide-details class="info-input" label="Name" box color="primary" v-model="info.name"></v-text-field>
+ <div v-else class="info-input">
+ <div class="body-2">Name</div>
+ {{ group.name || '-' }}
+ </div>
+ </v-flex>
+ <v-flex sm6 xs12 order-xs1 order-sm2 class="text-xs-right">
+ <div class="info-input">
+ <v-btn v-if="!editMode" color="primary" flat @click="editInfo">
+ <v-icon left>create</v-icon>Edit
+ </v-btn>
+ <div v-else>
+ <v-btn color="primary" flat @click="editMode = false">Cancel</v-btn>
+ <v-btn color="primary" @click="saveInfo">
+ <v-icon left>save</v-icon>Save
+ </v-btn>
+ </div>
+ </div>
+ </v-flex>
+ </v-layout>
+ <v-layout wrap>
+ <v-flex sm6 xs12>
+ <v-textarea v-if="editMode" rows="1" auto-grow hide-details class="info-input" label="Description" box color="primary" v-model="info.description"></v-textarea>
+ <div v-else class="info-input">
+ <div class="body-2">Description</div>
+ <pre>{{ group.description || '-' }}</pre>
+ </div>
+ </v-flex>
+ <v-flex sm6 xs12>
+ <v-select
+ v-if="editMode"
+ class="info-input"
+ :items="groupList"
+ v-model="info.parents"
+ hide-details
+ offset-y
+ label="Parents"
+ box color="primary"
+ multiple
+ autocomplete
+ >
+ <template slot="selection" slot-scope="data">
+ <v-chip small :color="chipColor" :text-color="chipTextColor" :selected="data.selected" @input="removeParent(data.item.value)" close>
+ {{ data.item.text }}
+ </v-chip>
+ </template>
+ </v-select>
+ <div v-else class="info-input">
+ <div class="body-2">Parents</div>
+ <template v-if="group.parents.length > 0">
+ <v-chip v-for="parent in group.parents" :key="parent.id" small>
+ {{ parent.name || parent.id }}
+ </v-chip>
+ </template>
+ <span v-else>-</span>
+ </div>
+ </v-flex>
+ </v-layout>
+ </v-card-text>
+ </v-card>
+ </template>
+ <v-subheader>{{ tabIndex === 0 ? 'Groups' : 'Subgoups' }}</v-subheader>
+ <group-module-group-list :tabIndex="tabIndex" />
<v-subheader>Clients</v-subheader>
- <v-card>
- <group-module-client-list :tabIndex="tabIndex" />
- </v-card>
+ <group-module-client-list :tabIndex="tabIndex" />
</div>
</template>
@@ -33,6 +96,40 @@ export default {
},
data () {
return {
+ editMode: false,
+ info: {
+ name: '',
+ description: '',
+ parents: []
+ }
+ }
+ },
+ computed: {
+ groupList () {
+ return this.$store.state.groups.groupList
+ },
+ group () {
+ return this.$store.state.groups.groupChain[this.tabIndex]
+ },
+ chipColor () {
+ return this.$store.state.settings.dark ? 'grey darken-1' : 'white'
+ },
+ chipTextColor () {
+ return this.$store.state.settings.dark ? 'white' : 'black'
+ }
+ },
+ methods: {
+ removeParent (id) {
+ this.info.parents.splice(this.info.parents.indexOf(id), 1)
+ },
+ editInfo () {
+ this.editMode = true
+ this.info.name = this.group.name
+ this.info.description = this.group.description
+ this.info.parents = this.group.parents.map(x => x.id)
+ },
+ saveInfo () {
+
}
}
}
@@ -40,4 +137,7 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
+.info-input {
+ margin: 10px;
+}
</style>