summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorUdo Walter2018-08-02 06:38:41 +0200
committerUdo Walter2018-08-02 06:38:41 +0200
commit6d7ca39adac324246b6862ed1299384ef998b8ec (patch)
tree82de9db2ece4396a9fdf4d98d9e55b5c32c2391c
parent[groups] add ability to show all groups and clients (diff)
downloadbas-6d7ca39adac324246b6862ed1299384ef998b8ec.tar.gz
bas-6d7ca39adac324246b6862ed1299384ef998b8ec.tar.xz
bas-6d7ca39adac324246b6862ed1299384ef998b8ec.zip
[groups] add delete client/group functionality
-rw-r--r--server/api/clients.js7
-rw-r--r--server/api/groups.js7
-rw-r--r--webapp/src/components/GroupModule.vue7
-rw-r--r--webapp/src/components/GroupModuleClientList.vue114
-rw-r--r--webapp/src/components/GroupModuleClientView.vue22
-rw-r--r--webapp/src/components/GroupModuleDialog.vue70
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue113
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue25
-rw-r--r--webapp/src/components/GroupModuleHomeView.vue19
-rw-r--r--webapp/src/store/groups.js36
10 files changed, 314 insertions, 106 deletions
diff --git a/server/api/clients.js b/server/api/clients.js
index 2780bd6..ef0dcaa 100644
--- a/server/api/clients.js
+++ b/server/api/clients.js
@@ -35,7 +35,7 @@ module.exports.get = {
// POST Requests
module.exports.post = {
// create client or update information of a client (returns id)
- updateOrCreate: function (req, res) {
+ save: function (req, res) {
const id = req.body.id > 0 ? req.body.id : null
if (id) {
db.client.findOne({ where: { id: id } }).then(client => {
@@ -49,5 +49,10 @@ module.exports.post = {
if (req.body.groupIds) client.setGroups(req.body.groupIds).then(() => { res.send({ id: client.id }) })
})
}
+ },
+
+ // delete clients
+ delete: function (req, res) {
+ db.client.destroy({ where: { id: req.body.ids } }).then(() => { res.end() })
}
}
diff --git a/server/api/groups.js b/server/api/groups.js
index 43abe4e..ece6b43 100644
--- a/server/api/groups.js
+++ b/server/api/groups.js
@@ -36,7 +36,7 @@ module.exports.get = {
// POST Requests
module.exports.post = {
// create group or update information of a group (returns id)
- updateOrCreate: function (req, res) {
+ save: function (req, res) {
const id = req.body.id > 0 ? req.body.id : null
if (id) {
db.group.findOne({ where: { id: id } }).then(group => {
@@ -50,5 +50,10 @@ module.exports.post = {
if (req.body.parentIds) group.setParents(req.body.parentIds).then(() => { res.send({ id: group.id }) })
})
}
+ },
+
+ // delete groups
+ delete: function (req, res) {
+ db.group.destroy({ where: { id: req.body.ids } }).then(() => { res.end() })
}
}
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index c3cce99..15ae711 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.id || '____________' }}</template>
+ <template v-if="item.tabType !== 'home'">{{ item.name || item.id || ' . . . . . . . . . . ' }}</template>
</v-tab>
</template>
</v-tabs>
@@ -32,6 +32,7 @@
</v-tabs-items>
</v-flex>
</v-layout>
+ <group-module-dialog />
</v-container>
</template>
@@ -39,6 +40,7 @@
import GroupModuleHomeView from '@/components/GroupModuleHomeView'
import GroupModuleGroupView from '@/components/GroupModuleGroupView'
import GroupModuleClientView from '@/components/GroupModuleClientView'
+import GroupModuleDialog from '@/components/GroupModuleDialog'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
@@ -46,7 +48,8 @@ export default {
components: {
GroupModuleHomeView,
GroupModuleGroupView,
- GroupModuleClientView
+ GroupModuleClientView,
+ GroupModuleDialog
},
data () {
return {
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
index c5bc312..ec1a774 100644
--- a/webapp/src/components/GroupModuleClientList.vue
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -8,40 +8,59 @@
</i18n>
<template>
- <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-card>
+ <v-card-title v-if="tabIndex === 0 && showAll" class="search-container">
+ <div>
+ <v-text-field class="search-field" v-model="search" hide-details prepend-inner-icon="search"></v-text-field>
+ </div>
+ </v-card-title>
+ <v-divider></v-divider>
+ <v-data-table
+ :headers="headers"
+ :items="clients"
+ item-key="id"
+ select-all
+ :hide-actions="tabIndex > 0 || !showAll"
+ v-model="selected"
+ :search="search"
+ >
+ <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" @click="deleteSelected" :disabled="selected.length === 0"><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 v-else 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>
</template>
<script>
+import { mapState, mapMutations } from 'vuex'
+
export default {
name: 'GroupModuleClientList',
props: ['tabIndex', 'clients'],
@@ -55,12 +74,32 @@ export default {
{ text: 'UUID', value: 'uuid' },
{ sortable: false }
],
- selected: []
+ selected: [],
+ search: ''
+ }
+ },
+ computed: {
+ ...mapState('groups', ['showAll'])
+ },
+ watch: {
+ showAll (value) {
+ if (!value) this.search = ''
+ },
+ clients () {
+ this.selected = []
}
},
methods: {
+ ...mapMutations('groups', ['setActiveTab', 'setTab', 'setDialog']),
loadClient (id) {
this.$store.dispatch('groups/loadClient', { id, tabIndex: this.tabIndex + 1, switchTab: true })
+ },
+ newClient () {
+ this.setTab({ index: 1, item: { tabType: 'client' } })
+ this.setActiveTab(1)
+ },
+ deleteSelected () {
+ this.setDialog({ show: true, type: 'deleteClients', selected: this.selected })
}
}
}
@@ -76,4 +115,15 @@ export default {
margin-left: 20px;
margin-right: -10px;
}
+
+.search-container {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.search-field {
+ margin-top: 0;
+ margin-right: 10px;
+ margin-bottom: 5px;
+}
</style>
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index 43f09b2..86874b1 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -14,7 +14,7 @@
<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>
+ <v-text-field box 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 || '-' }}
@@ -36,7 +36,7 @@
</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>
+ <v-textarea box 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>
@@ -44,6 +44,7 @@
</v-flex>
<v-flex sm6 xs12>
<v-autocomplete
+ box
v-if="editMode"
class="info-input"
:items="$store.state.groups.groupList"
@@ -55,7 +56,7 @@
multiple
>
<template slot="selection" slot-scope="data">
- <v-chip small :selected="data.selected" @input="removeGroup(data.item.value)" close>
+ <v-chip :color="chipColor" :text-color="chipTextColor" small :selected="data.selected" @input="removeGroup(data.item.value)" close>
{{ data.item.text }}
</v-chip>
</template>
@@ -73,14 +74,14 @@
</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>
+ <v-text-field box 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>
+ <v-text-field box 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 || '-' }}
@@ -89,7 +90,7 @@
</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>
+ <v-text-field box 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 || '-' }}
@@ -127,6 +128,14 @@ export default {
else if (newValue.id !== oldValue.id) this.editMode = false
}
},
+ computed: {
+ chipColor () {
+ return this.$store.state.settings.dark ? 'grey darken-1' : 'white'
+ },
+ chipTextColor () {
+ return this.$store.state.settings.dark ? 'white' : 'black'
+ }
+ },
methods: {
removeGroup (id) {
this.groupIds.splice(this.groupIds.indexOf(id), 1)
@@ -139,6 +148,7 @@ export default {
},
cancelEdit () {
this.editMode = false
+ if (this.client.id) return
this.$store.commit('groups/deleteFromTabChain', { index: this.tabIndex, count: 1 })
this.$store.commit('groups/setActiveTab', this.tabIndex - 1)
},
diff --git a/webapp/src/components/GroupModuleDialog.vue b/webapp/src/components/GroupModuleDialog.vue
new file mode 100644
index 0000000..43cec3e
--- /dev/null
+++ b/webapp/src/components/GroupModuleDialog.vue
@@ -0,0 +1,70 @@
+<i18n>
+{
+ "en": {
+ },
+ "de": {
+ }
+}
+</i18n>
+
+<template>
+ <v-dialog
+ v-if="dialog.type === 'deleteGroups' || dialog.type === 'deleteClients'"
+ :value="dialog.show"
+ @input="setDialog({ show: $event })"
+ max-width="500px"
+ scrollable
+ >
+ <v-card>
+ <v-card-title primary-title class="elevation-3">
+ <div>
+ <div class="headline">Delete selected?</div>
+ </div>
+ </v-card-title>
+ <v-card-text>
+ Are you sure?
+ <div style="margin: 10px">
+ <div v-for="item in dialog.selected" class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }}</div>
+ </div>
+ </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="error" @click="deleteSelected">{{ $t('delete') }}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+
+export default {
+ name: 'GroupModuleDialog',
+ data () {
+ return {
+ }
+ },
+ computed: {
+ ...mapState('groups', ['dialog'])
+ },
+ methods: {
+ ...mapMutations('groups', ['setDialog']),
+ deleteSelected () {
+ if (this.dialog.type === 'deleteGroups') this.$store.dispatch('groups/deleteGroups', this.dialog.selected.map(x => x.id))
+ if (this.dialog.type === 'deleteClients') this.$store.dispatch('groups/deleteClients', this.dialog.selected.map(x => x.id))
+ this.setDialog({ show: false })
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.show-toggle {
+ margin-top: 20px;
+ margin-right: 20px;
+ margin-bottom: -20px;
+}
+</style>
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index 4351c1d..62d447c 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -8,39 +8,57 @@
</i18n>
<template>
- <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-card>
+ <v-card-title v-if="tabIndex === 0 && showAll" class="search-container">
+ <div>
+ <v-text-field class="search-field" v-model="search" hide-details prepend-inner-icon="search"></v-text-field>
+ </div>
+ </v-card-title>
+ <v-divider></v-divider>
+ <v-data-table
+ :headers="headers"
+ :items="groups"
+ item-key="id"
+ select-all
+ :hide-actions="tabIndex > 0 || !showAll"
+ v-model="selected"
+ :search="search"
+ >
+ <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" @click="deleteSelected" :disabled="selected.length === 0"><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>
+ <div v-else 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>
</template>
<script>
+import { mapState, mapMutations } from 'vuex'
+
export default {
name: 'GroupModuleGroupList',
props: ['tabIndex', 'groups'],
@@ -49,15 +67,35 @@ export default {
headers: [
{ text: 'ID', value: 'id' },
{ text: 'Name', value: 'name' },
- { text: 'Description', value: 'description', width: '10000px' },
+ { text: 'Description', value: 'description', width: '100000px' },
{ sortable: false }
],
- selected: []
+ selected: [],
+ search: ''
+ }
+ },
+ computed: {
+ ...mapState('groups', ['showAll'])
+ },
+ watch: {
+ showAll (value) {
+ if (!value) this.search = ''
+ },
+ groups () {
+ this.selected = []
}
},
methods: {
+ ...mapMutations('groups', ['setActiveTab', 'setTab', 'setDialog']),
loadGroup (id) {
this.$store.dispatch('groups/loadGroup', { id, tabIndex: this.tabIndex + 1, switchTab: true })
+ },
+ newGroup () {
+ this.setTab({ index: 1, item: { tabType: 'group' } })
+ this.setActiveTab(1)
+ },
+ deleteSelected () {
+ this.setDialog({ show: true, type: 'deleteGroups', selected: this.selected })
}
}
}
@@ -69,4 +107,15 @@ export default {
margin-left: 20px;
margin-right: -10px;
}
+
+.search-container {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.search-field {
+ margin-top: 0;
+ margin-right: 10px;
+ margin-bottom: 5px;
+}
</style>
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index 8780e29..543bcd0 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -14,7 +14,7 @@
<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>
+ <v-text-field box 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>
{{ group.name || '-' }}
@@ -36,7 +36,7 @@
</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>
+ <v-textarea box 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>{{ group.description || '-' }}</pre>
@@ -44,6 +44,7 @@
</v-flex>
<v-flex sm6 xs12>
<v-autocomplete
+ box
v-if="editMode"
class="info-input"
:items="$store.state.groups.groupList"
@@ -55,7 +56,7 @@
multiple
>
<template slot="selection" slot-scope="data">
- <v-chip small :selected="data.selected" @input="removeParent(data.item.value)" close>
+ <v-chip :color="chipColor" :text-color="chipTextColor" small :selected="data.selected" @input="removeParent(data.item.value)" close>
{{ data.item.text }}
</v-chip>
</template>
@@ -76,16 +77,8 @@
<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>
@@ -120,9 +113,16 @@ export default {
else if (newValue.id !== oldValue.id) this.editMode = false
}
},
+ computed: {
+ chipColor () {
+ return this.$store.state.settings.dark ? 'grey darken-1' : 'white'
+ },
+ chipTextColor () {
+ return this.$store.state.settings.dark ? 'white' : 'black'
+ }
+ },
methods: {
removeParent (id) {
- console.log(this.parentIds.indexOf(id))
this.parentIds.splice(this.parentIds.indexOf(id), 1)
},
editInfo () {
@@ -133,6 +133,7 @@ export default {
},
cancelEdit () {
this.editMode = false
+ if (this.group.id) return
this.$store.commit('groups/deleteFromTabChain', { index: this.tabIndex, count: 1 })
this.$store.commit('groups/setActiveTab', this.tabIndex - 1)
},
diff --git a/webapp/src/components/GroupModuleHomeView.vue b/webapp/src/components/GroupModuleHomeView.vue
index 0ec8893..af5af3b 100644
--- a/webapp/src/components/GroupModuleHomeView.vue
+++ b/webapp/src/components/GroupModuleHomeView.vue
@@ -15,16 +15,8 @@
</v-layout>
<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>
@@ -53,15 +45,7 @@ export default {
}
},
methods: {
- ...mapMutations('groups', ['setActiveTab', 'setTab', 'setShowAll']),
- newGroup () {
- this.setTab({ index: 1, item: { tabType: 'group' } })
- this.setActiveTab(1)
- },
- newClient () {
- this.setTab({ index: 1, item: { tabType: 'client' } })
- this.setActiveTab(1)
- }
+ ...mapMutations('groups', ['setShowAll'])
}
}
</script>
@@ -71,5 +55,6 @@ export default {
.show-toggle {
margin-top: 20px;
margin-right: 20px;
+ margin-bottom: -20px;
}
</style>
diff --git a/webapp/src/store/groups.js b/webapp/src/store/groups.js
index 137ae6a..58d64b3 100644
--- a/webapp/src/store/groups.js
+++ b/webapp/src/store/groups.js
@@ -7,7 +7,12 @@ export default {
clientList: [],
tabChain: [],
activeTab: 0,
- showAll: false
+ showAll: false,
+ dialog: {
+ show: false,
+ type: '',
+ selected: []
+ }
},
mutations: {
setGroupList: (state, list) => { state.groupList = list },
@@ -20,6 +25,11 @@ export default {
state.tabChain = state.tabChain.slice(0, index + 1)
}
state.tabChain.splice(index, 1, item)
+ },
+ setDialog (state, { show, type, selected }) {
+ if (show !== undefined) state.dialog.type = type
+ if (selected !== undefined) state.dialog.selected = selected
+ if (show !== undefined) state.dialog.show = show
}
},
actions: {
@@ -66,7 +76,7 @@ export default {
})
},
saveGroup (context, { id, info, parentIds, tabIndex }) {
- axios.post('/api/groups/updateOrCreate', { id, info, parentIds }).then(res => {
+ axios.post('/api/groups/save', { 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 })
@@ -76,7 +86,7 @@ export default {
})
},
saveClient (context, { id, info, groupIds, tabIndex }) {
- axios.post('/api/clients/updateOrCreate', { id, info, groupIds }).then(res => {
+ axios.post('/api/clients/save', { 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 })
@@ -84,6 +94,26 @@ export default {
}
context.dispatch('reload')
})
+ },
+ deleteGroups (context, ids) {
+ axios.post('/api/groups/delete', { ids }).then(() => {
+ var i = 1
+ while (i < context.state.tabChain.length) {
+ if (context.state.tabChain[i].tabType === 'group' && ids.includes(context.state.tabChain[i].id)) {
+ context.commit('deleteFromTabChain', { index: i, count: context.state.tabChain.length - i })
+ }
+ i++
+ }
+ context.dispatch('reload')
+ })
+ },
+ deleteClients (context, ids) {
+ axios.post('/api/clients/delete', { ids }).then(() => {
+ const index = context.state.tabChain.length - 1
+ const item = context.state.tabChain[index]
+ if (item.tabType === 'client' && ids.includes(item.id)) context.commit('deleteFromTabChain', { index, count: 1 })
+ context.dispatch('reload')
+ })
}
}
}