summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorUdo Walter2018-08-02 01:42:30 +0200
committerUdo Walter2018-08-02 01:42:30 +0200
commitb311735e97bedd764f2e6d43afe8d24bb4fb67a1 (patch)
treebcaf99471f341dde57e31a20634341756b45ef0c
parent[groups] add client edit functionality (diff)
downloadbas-b311735e97bedd764f2e6d43afe8d24bb4fb67a1.tar.gz
bas-b311735e97bedd764f2e6d43afe8d24bb4fb67a1.tar.xz
bas-b311735e97bedd764f2e6d43afe8d24bb4fb67a1.zip
[groups] add create functionality
-rw-r--r--server/api/clients.js6
-rw-r--r--server/api/groups.js6
-rw-r--r--webapp/src/components/GroupModule.vue2
-rw-r--r--webapp/src/components/GroupModuleClientList.vue72
-rw-r--r--webapp/src/components/GroupModuleClientView.vue26
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue70
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue38
-rw-r--r--webapp/src/components/GroupModuleHomeView.vue23
-rw-r--r--webapp/src/store/groups.js60
9 files changed, 173 insertions, 130 deletions
diff --git a/server/api/clients.js b/server/api/clients.js
index 5bb2a1b..1f28c0b 100644
--- a/server/api/clients.js
+++ b/server/api/clients.js
@@ -28,7 +28,7 @@ module.exports.get = {
// POST Requests
module.exports.post = {
// create client or update information of a client (returns id)
- saveInfo: function (req, res) {
+ updateOrCreate: function (req, res) {
const id = req.body.id > 0 ? req.body.id : null
if (id) {
db.client.findOne({ where: { id: id } }).then(client => {
@@ -38,7 +38,9 @@ module.exports.post = {
Promise.all(promises).then(() => { res.send({id}) })
})
} else {
- res.end()
+ db.client.create(req.body.info).then(client => {
+ if (req.body.groupIds) client.setGroups(req.body.groupIds).then(() => { res.send({ id: client.id }) })
+ })
}
}
}
diff --git a/server/api/groups.js b/server/api/groups.js
index 6debc4d..af63d98 100644
--- a/server/api/groups.js
+++ b/server/api/groups.js
@@ -29,7 +29,7 @@ module.exports.get = {
// POST Requests
module.exports.post = {
// create group or update information of a group (returns id)
- saveInfo: function (req, res) {
+ updateOrCreate: function (req, res) {
const id = req.body.id > 0 ? req.body.id : null
if (id) {
db.group.findOne({ where: { id: id } }).then(group => {
@@ -39,7 +39,9 @@ module.exports.post = {
Promise.all(promises).then(() => { res.send({id}) })
})
} else {
- res.end()
+ db.group.create(req.body.info).then(group => {
+ if (req.body.parentIds) group.setParents(req.body.parentIds).then(() => { res.send({ id: group.id }) })
+ })
}
}
}
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index e2541e2..c3cce99 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -18,7 +18,7 @@
<v-tab ripple :key="'tab' + index">
<v-icon v-if="item.tabType === 'home'">home</v-icon>
<v-icon v-if="item.tabType === 'client'" style="margin-right: 10px">computer</v-icon>
- <template v-if="item.tabType !== 'home'">{{ item.name ? item.name : item.id }}</template>
+ <template v-if="item.tabType !== 'home'">{{ item.name || item.id || '____________' }}</template>
</v-tab>
</template>
</v-tabs>
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
index 20ae332..c5bc312 100644
--- a/webapp/src/components/GroupModuleClientList.vue
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -8,47 +8,37 @@
</i18n>
<template>
- <div>
- <v-card>
- <v-data-table stlye="width: 100px"
- :headers="headers"
- :items="clients"
- item-key="id"
- hide-actions
- select-all
- v-model="selected"
- >
- <template slot="items" slot-scope="props">
- <tr @click="loadClient(props.item.id)">
- <td class="narrow-td">
- <v-checkbox
- color="primary"
- v-model="props.selected"
- hide-details
- @click.native.stop
- ></v-checkbox>
- </td>
- <td class="narrow-td">{{ props.item.id }}</td>
- <td>{{ props.item.name }}</td>
- <td>{{ props.item.ip }}</td>
- <td>{{ props.item.mac }}</td>
- <td>{{ props.item.uuid }}</td>
- <td class="narrow-td">
- <v-btn class="next-arrow" icon><v-icon>keyboard_arrow_right</v-icon></v-btn>
- </td>
- </tr>
- </template>
- </v-data-table>
- </v-card>
- <div v-if="tabIndex > 0" class="text-xs-right">
- <v-btn flat color="error"><v-icon left>remove_circle_outline</v-icon>Remove selected clients</v-btn>
- <v-btn flat color="success"><v-icon left>add_circle_outline</v-icon>Add clients</v-btn>
- </div>
- <div v-else class="text-xs-right">
- <v-btn flat color="error"><v-icon left>delete</v-icon>Delete selected clients</v-btn>
- <v-btn flat color="success"><v-icon left>create</v-icon>Create client</v-btn>
- </div>
- </div>
+ <v-card>
+ <v-data-table stlye="width: 100px"
+ :headers="headers"
+ :items="clients"
+ item-key="id"
+ hide-actions
+ select-all
+ v-model="selected"
+ >
+ <template slot="items" slot-scope="props">
+ <tr @click="loadClient(props.item.id)">
+ <td class="narrow-td">
+ <v-checkbox
+ color="primary"
+ v-model="props.selected"
+ hide-details
+ @click.native.stop
+ ></v-checkbox>
+ </td>
+ <td class="narrow-td">{{ props.item.id }}</td>
+ <td>{{ props.item.name }}</td>
+ <td>{{ props.item.ip }}</td>
+ <td>{{ props.item.mac }}</td>
+ <td>{{ props.item.uuid }}</td>
+ <td class="narrow-td">
+ <v-btn class="next-arrow" icon><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ </td>
+ </tr>
+ </template>
+ </v-data-table>
+ </v-card>
</template>
<script>
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index 9534274..43f09b2 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -26,7 +26,7 @@
<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" flat @click="cancelEdit">Cancel</v-btn>
<v-btn color="primary" @click="saveInfo">
<v-icon left>save</v-icon>Save
</v-btn>
@@ -62,7 +62,7 @@
</v-autocomplete>
<div v-else class="info-input">
<div class="body-2">Groups</div>
- <template v-if="client.groups.length > 0">
+ <template v-if="client.groups && client.groups.length > 0">
<v-chip v-for="group in client.groups" :key="group.id" small>
{{ group.name || group.id }}
</v-chip>
@@ -113,9 +113,18 @@ export default {
description: '',
ip: '',
mac: '',
- uuid: '',
- groupIds: []
- }
+ uuid: ''
+ },
+ groupIds: []
+ }
+ },
+ created () {
+ if (!this.client.id) this.editInfo()
+ },
+ watch: {
+ client (newValue, oldValue) {
+ if (!newValue.id) this.editInfo()
+ else if (newValue.id !== oldValue.id) this.editMode = false
}
},
methods: {
@@ -126,7 +135,12 @@ export default {
this.editMode = true
this.info.name = this.client.name
this.info.description = this.client.description
- this.groupIds = this.client.groups.map(x => x.id)
+ if (this.client.groups) this.groupIds = this.client.groups.map(x => x.id)
+ },
+ cancelEdit () {
+ this.editMode = false
+ this.$store.commit('groups/deleteFromTabChain', { index: this.tabIndex, count: 1 })
+ this.$store.commit('groups/setActiveTab', this.tabIndex - 1)
},
saveInfo () {
this.$store.dispatch('groups/saveClient', {
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index da51995..4351c1d 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -8,46 +8,36 @@
</i18n>
<template>
- <div>
- <v-card>
- <v-data-table
- class="group-table"
- :headers="headers"
- :items="groups"
- item-key="id"
- hide-actions
- select-all
- v-model="selected"
- >
- <template slot="items" slot-scope="props">
- <tr @click="loadGroup(props.item.id)">
- <td>
- <v-checkbox
- color="primary"
- v-model="props.selected"
- hide-details
- @click.native.stop
- ></v-checkbox>
- </td>
- <td>{{ props.item.id }}</td>
- <td>{{ props.item.name }}</td>
- <td>{{ props.item.description }}</td>
- <td>
- <v-btn class="next-arrow" icon><v-icon>keyboard_arrow_right</v-icon></v-btn>
- </td>
- </tr>
- </template>
- </v-data-table>
- </v-card>
- <div v-if="tabIndex > 0" class="text-xs-right">
- <v-btn flat color="error"><v-icon left>remove_circle_outline</v-icon>Remove selected subgroups</v-btn>
- <v-btn flat color="success"><v-icon left>add_circle_outline</v-icon>Add subgroups</v-btn>
- </div>
- <div v-else class="text-xs-right">
- <v-btn flat color="error"><v-icon left>delete</v-icon>Delete selected groups</v-btn>
- <v-btn flat color="success"><v-icon left>create</v-icon>Create group</v-btn>
- </div>
- </div>
+ <v-card>
+ <v-data-table
+ class="group-table"
+ :headers="headers"
+ :items="groups"
+ item-key="id"
+ hide-actions
+ select-all
+ v-model="selected"
+ >
+ <template slot="items" slot-scope="props">
+ <tr @click="loadGroup(props.item.id)">
+ <td>
+ <v-checkbox
+ color="primary"
+ v-model="props.selected"
+ hide-details
+ @click.native.stop
+ ></v-checkbox>
+ </td>
+ <td>{{ props.item.id }}</td>
+ <td>{{ props.item.name }}</td>
+ <td>{{ props.item.description }}</td>
+ <td>
+ <v-btn class="next-arrow" icon><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ </td>
+ </tr>
+ </template>
+ </v-data-table>
+ </v-card>
</template>
<script>
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index 1706ba4..8780e29 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -26,7 +26,7 @@
<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" flat @click="cancelEdit">Cancel</v-btn>
<v-btn color="primary" @click="saveInfo">
<v-icon left>save</v-icon>Save
</v-btn>
@@ -62,7 +62,7 @@
</v-autocomplete>
<div v-else class="info-input">
<div class="body-2">Parents</div>
- <template v-if="group.parents.length > 0">
+ <template v-if="group.parents && group.parents.length > 0">
<v-chip v-for="parent in group.parents" :key="parent.id" small>
{{ parent.name || parent.id }}
</v-chip>
@@ -73,10 +73,20 @@
</v-layout>
</v-card-text>
</v-card>
- <v-subheader>{{ tabIndex === 0 ? 'Groups' : 'Subgoups' }}</v-subheader>
- <group-module-group-list :tabIndex="tabIndex" :groups="group.subgroups" />
- <v-subheader>Clients</v-subheader>
- <group-module-client-list :tabIndex="tabIndex" :clients="group.clients" />
+ <template v-if="group.id">
+ <v-subheader>{{ tabIndex === 0 ? 'Groups' : 'Subgoups' }}</v-subheader>
+ <group-module-group-list :tabIndex="tabIndex" :groups="group.subgroups" />
+ <div class="text-xs-right">
+ <v-btn flat color="error"><v-icon left>remove_circle_outline</v-icon>Remove selected subgroups</v-btn>
+ <v-btn flat color="success"><v-icon left>add_circle_outline</v-icon>Add subgroups</v-btn>
+ </div>
+ <v-subheader>Clients</v-subheader>
+ <group-module-client-list :tabIndex="tabIndex" :clients="group.clients" />
+ <div class="text-xs-right">
+ <v-btn flat color="error"><v-icon left>remove_circle_outline</v-icon>Remove selected clients</v-btn>
+ <v-btn flat color="success"><v-icon left>add_circle_outline</v-icon>Add clients</v-btn>
+ </div>
+ </template>
</div>
</template>
@@ -101,6 +111,15 @@ export default {
parentIds: []
}
},
+ created () {
+ if (!this.group.id) this.editInfo()
+ },
+ watch: {
+ group (newValue, oldValue) {
+ if (!newValue.id) this.editInfo()
+ else if (newValue.id !== oldValue.id) this.editMode = false
+ }
+ },
methods: {
removeParent (id) {
console.log(this.parentIds.indexOf(id))
@@ -110,7 +129,12 @@ export default {
this.editMode = true
this.info.name = this.group.name
this.info.description = this.group.description
- this.parentIds = this.group.parents.map(x => x.id)
+ if (this.group.parents) this.parentIds = this.group.parents.map(x => x.id)
+ },
+ cancelEdit () {
+ this.editMode = false
+ this.$store.commit('groups/deleteFromTabChain', { index: this.tabIndex, count: 1 })
+ this.$store.commit('groups/setActiveTab', this.tabIndex - 1)
},
saveInfo () {
this.$store.dispatch('groups/saveGroup', {
diff --git a/webapp/src/components/GroupModuleHomeView.vue b/webapp/src/components/GroupModuleHomeView.vue
index eb5b12c..3fd127b 100644
--- a/webapp/src/components/GroupModuleHomeView.vue
+++ b/webapp/src/components/GroupModuleHomeView.vue
@@ -11,14 +11,23 @@
<div>
<v-subheader>Groups</v-subheader>
<group-module-group-list :tabIndex="0" :groups="home.groups" />
+ <div class="text-xs-right">
+ <v-btn flat color="error"><v-icon left>delete</v-icon>Delete selected groups</v-btn>
+ <v-btn flat color="success" @click="newGroup"><v-icon left>create</v-icon>Create group</v-btn>
+ </div>
<v-subheader>Clients</v-subheader>
<group-module-client-list :tabIndex="0" :clients="home.clients" />
+ <div class="text-xs-right">
+ <v-btn flat color="error"><v-icon left>delete</v-icon>Delete selected clients</v-btn>
+ <v-btn flat color="success" @click="newClient"><v-icon left>create</v-icon>Create client</v-btn>
+ </div>
</div>
</template>
<script>
import GroupModuleGroupList from '@/components/GroupModuleGroupList'
import GroupModuleClientList from '@/components/GroupModuleClientList'
+import { mapState, mapMutations } from 'vuex'
export default {
name: 'GroupModuleHomeView',
@@ -30,6 +39,20 @@ export default {
data () {
return {
}
+ },
+ computed: {
+ ...mapState('groups', ['showAll'])
+ },
+ methods: {
+ ...mapMutations('groups', ['setActiveTab', 'setTab']),
+ newGroup () {
+ this.setTab({ index: 1, item: { tabType: 'group' } })
+ this.setActiveTab(1)
+ },
+ newClient () {
+ this.setTab({ index: 1, item: { tabType: 'client' } })
+ this.setActiveTab(1)
+ }
}
}
</script>
diff --git a/webapp/src/store/groups.js b/webapp/src/store/groups.js
index 5df5609..aad77f4 100644
--- a/webapp/src/store/groups.js
+++ b/webapp/src/store/groups.js
@@ -1,4 +1,3 @@
-import Vue from 'vue'
import axios from 'axios'
export default {
@@ -7,7 +6,8 @@ export default {
groupList: [],
clientList: [],
tabChain: [],
- activeTab: 0
+ activeTab: 0,
+ showAll: false
},
mutations: {
setGroupList: (state, list) => { state.groupList = list },
@@ -15,22 +15,10 @@ export default {
setActiveTab: (state, index) => { state.activeTab = index },
deleteFromTabChain: (state, { index, count }) => { state.tabChain.splice(index, count) },
setTab: (state, { index, item }) => {
- if (state.tabChain.length > index && state.tabChain[index].id === item.id) {
- Object.keys(item).forEach(key => {
- Vue.set(state.tabChain[index], key, item[key])
- })
- } else {
- state.tabChain = state.tabChain.slice(0, index)
- state.tabChain.push(item)
+ if (state.tabChain.length > index + 1 && (state.tabChain[index].tabType !== item.tabType || state.tabChain[index].id !== item.id)) {
+ state.tabChain = state.tabChain.slice(0, index + 1)
}
- },
- resetStore (state) {
- state.groupList = []
- state.clientList = []
- state.home = null
- state.groupChain = []
- state.client = null
- state.activeTab = 0
+ state.tabChain.splice(index, 1, item)
}
},
actions: {
@@ -45,30 +33,39 @@ export default {
context.commit('setTab', { index: 0, item: { tabType: 'home', groups: res[0].data, clients: res[1].data } })
})
},
- loadGroup (context, { id, tabIndex, switchTab }) {
- axios.get('/api/groups/getGroup?id=' + id).then(res => {
- res.data.tabType = 'group'
- context.commit('setTab', { index: tabIndex, item: res.data })
+ loadGroup (context, { id, tabIndex, switchTab, reload }) {
+ if (!reload && context.state.tabChain.length > tabIndex && context.state.tabChain[tabIndex].id === id) {
if (switchTab) context.commit('setActiveTab', tabIndex)
- })
+ } else {
+ axios.get('/api/groups/getGroup?id=' + id).then(res => {
+ res.data.tabType = 'group'
+ context.commit('setTab', { index: tabIndex, item: res.data })
+ if (switchTab) context.commit('setActiveTab', tabIndex)
+ })
+ }
},
- loadClient (context, { id, tabIndex, switchTab }) {
- axios.get('/api/clients/getClient?id=' + id).then(res => {
- res.data.tabType = 'client'
- context.commit('setTab', { index: tabIndex, item: res.data })
+ loadClient (context, { tabType, id, tabIndex, switchTab, reload }) {
+ if (!reload && context.state.tabChain.length > tabIndex && context.state.tabChain[tabIndex].id === id) {
if (switchTab) context.commit('setActiveTab', tabIndex)
- })
+ } else {
+ axios.get('/api/clients/getClient?id=' + id).then(res => {
+ res.data.tabType = 'client'
+ context.commit('setTab', { index: tabIndex, item: res.data })
+ if (switchTab) context.commit('setActiveTab', tabIndex)
+ })
+ }
},
reload (context) {
context.dispatch('loadLists')
context.state.tabChain.forEach((item, index) => {
if (item.tabType === 'home') context.dispatch('loadHome')
- else if (item.tabType === 'group') context.dispatch('loadGroup', { id: item.id, tabIndex: index })
- else if (item.tabType === 'client') context.dispatch('loadClient', { id: item.id, tabIndex: index })
+ else if (item.tabType === 'group') context.dispatch('loadGroup', { id: item.id, tabIndex: index, reload: true })
+ else if (item.tabType === 'client') context.dispatch('loadClient', { id: item.id, tabIndex: index, reload: true })
})
},
saveGroup (context, { id, info, parentIds, tabIndex }) {
- axios.post('/api/groups/saveInfo', { id, info, parentIds }).then(res => {
+ axios.post('/api/groups/updateOrCreate', { id, info, parentIds }).then(res => {
+ if (!id) context.commit('setTab', { index: tabIndex, item: { id: res.data.id, name: info.name, tabType: 'group' } })
if (parentIds && tabIndex > 1 && !parentIds.includes(context.state.tabChain[tabIndex - 1].id)) {
context.commit('deleteFromTabChain', { index: 1, count: tabIndex - 1 })
context.commit('setActiveTab', 1)
@@ -77,7 +74,8 @@ export default {
})
},
saveClient (context, { id, info, groupIds, tabIndex }) {
- axios.post('/api/clients/saveInfo', { id, info, groupIds }).then(res => {
+ axios.post('/api/clients/updateOrCreate', { id, info, groupIds }).then(res => {
+ if (!id) context.commit('setTab', { index: tabIndex, item: { id: res.data.id, name: info.name, tabType: 'client' } })
if (groupIds && tabIndex > 1 && !groupIds.includes(context.state.tabChain[tabIndex - 1].id)) {
context.commit('deleteFromTabChain', { index: 1, count: tabIndex - 1 })
context.commit('setActiveTab', 1)