summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleClientView.vue
diff options
context:
space:
mode:
authorUdo Walter2018-08-01 23:41:24 +0200
committerUdo Walter2018-08-01 23:41:24 +0200
commitbf83c4680d2b63aad7852da5a34d50529fc148db (patch)
tree325d42f8cbb138aa8fa5ca97b62582416e1e4bd5 /webapp/src/components/GroupModuleClientView.vue
parent[groups] add edit functionality to group infos (diff)
downloadbas-bf83c4680d2b63aad7852da5a34d50529fc148db.tar.gz
bas-bf83c4680d2b63aad7852da5a34d50529fc148db.tar.xz
bas-bf83c4680d2b63aad7852da5a34d50529fc148db.zip
[groups] add client edit functionality
Diffstat (limited to 'webapp/src/components/GroupModuleClientView.vue')
-rw-r--r--webapp/src/components/GroupModuleClientView.vue121
1 files changed, 119 insertions, 2 deletions
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index 7518d67..9534274 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -11,7 +11,92 @@
<div>
<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" color="primary" v-model="info.name"></v-text-field>
+ <div v-else class="info-input">
+ <div class="body-2">Name</div>
+ {{ client.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" color="primary" v-model="info.description"></v-textarea>
+ <div v-else class="info-input">
+ <div class="body-2">Description</div>
+ <pre>{{ client.description || '-' }}</pre>
+ </div>
+ </v-flex>
+ <v-flex sm6 xs12>
+ <v-autocomplete
+ v-if="editMode"
+ class="info-input"
+ :items="$store.state.groups.groupList"
+ v-model="groupIds"
+ hide-details
+ offset-y
+ label="Parents"
+ color="primary"
+ multiple
+ >
+ <template slot="selection" slot-scope="data">
+ <v-chip small :selected="data.selected" @input="removeGroup(data.item.value)" close>
+ {{ data.item.text }}
+ </v-chip>
+ </template>
+ </v-autocomplete>
+ <div v-else class="info-input">
+ <div class="body-2">Groups</div>
+ <template v-if="client.groups.length > 0">
+ <v-chip v-for="group in client.groups" :key="group.id" small>
+ {{ group.name || group.id }}
+ </v-chip>
+ </template>
+ <span v-else>-</span>
+ </div>
+ </v-flex>
+ </v-layout>
+ <v-layout wrap>
+ <v-flex sm6 xs12>
+ <v-text-field v-if="editMode" hide-details class="info-input" label="IP Address" color="primary" v-model="info.ip"></v-text-field>
+ <div v-else class="info-input">
+ <div class="body-2">IP Address</div>
+ {{ client.ip || '-' }}
+ </div>
+ </v-flex>
+ <v-flex sm6 xs12>
+ <v-text-field v-if="editMode" hide-details class="info-input" label="MAC Address" color="primary" v-model="info.mac"></v-text-field>
+ <div v-else class="info-input">
+ <div class="body-2">MAC Address</div>
+ {{ client.mac || '-' }}
+ </div>
+ </v-flex>
+ </v-layout>
+ <v-layout wrap>
+ <v-flex sm6 xs12>
+ <v-text-field v-if="editMode" hide-details class="info-input" label="UUID" color="primary" v-model="info.uuid"></v-text-field>
+ <div v-else class="info-input">
+ <div class="body-2">UUID</div>
+ {{ client.uuid || '-' }}
+ </div>
+ </v-flex>
+ </v-layout>
+ </v-card-text>
</v-card>
</div>
</template>
@@ -19,9 +104,38 @@
<script>
export default {
name: 'GroupModuleClientView',
- props: ['tabIndex'],
+ props: ['tabIndex', 'client'],
data () {
return {
+ editMode: false,
+ info: {
+ name: '',
+ description: '',
+ ip: '',
+ mac: '',
+ uuid: '',
+ groupIds: []
+ }
+ }
+ },
+ methods: {
+ removeGroup (id) {
+ this.groupIds.splice(this.groupIds.indexOf(id), 1)
+ },
+ editInfo () {
+ this.editMode = true
+ this.info.name = this.client.name
+ this.info.description = this.client.description
+ this.groupIds = this.client.groups.map(x => x.id)
+ },
+ saveInfo () {
+ this.$store.dispatch('groups/saveClient', {
+ id: this.client.id,
+ info: this.info,
+ groupIds: this.groupIds,
+ tabIndex: this.tabIndex
+ })
+ this.editMode = false
}
}
}
@@ -29,4 +143,7 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
+.info-input {
+ margin: 10px;
+}
</style>