summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-03-30 17:20:14 +0100
committerUdo Walter2019-03-30 17:20:14 +0100
commitf2e328aa4be343458f332eb29dfe9d334b329c11 (patch)
treefed94126069ff058cec8359ec3b2167a9b2c5db5 /webapp
parent[server] disable sequelize logging; [webapp] group module reload on open; loa... (diff)
downloadbas-f2e328aa4be343458f332eb29dfe9d334b329c11.tar.gz
bas-f2e328aa4be343458f332eb29dfe9d334b329c11.tar.xz
bas-f2e328aa4be343458f332eb29dfe9d334b329c11.zip
[webapp/groups] parents of groups and clients are now clickable
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/DataTable.vue2
-rw-r--r--webapp/src/components/GroupModule.vue17
-rw-r--r--webapp/src/components/GroupModuleClientView.vue6
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue8
-rw-r--r--webapp/src/store/groups.js95
5 files changed, 69 insertions, 59 deletions
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index facf2aa..27d8d77 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -147,7 +147,7 @@
<v-icon style="cursor: pointer" :color="item.selected ? 'primary' : ''">{{ selectedIconMap[item.selected] }}</v-icon>
</div>
<div v-for="header in headers" :key="header.key" :style="{ width: header.width }" :class="{ 'auto-width': header.width === undefined }">
- <span style="user-select: text" v-if="$scopedSlots[header.key] === undefined" @dblclick.stop>{{ item.data[header.key] }}</span>
+ <span style="user-select: text" v-if="$scopedSlots[header.key] === undefined">{{ item.data[header.key] }}</span>
<slot v-else :name="header.key" :item="item.data" />
</div>
</div>
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index 4630824..f351a6b 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -93,18 +93,17 @@ export default {
}
},
created () {
- if (this.tabChain.length === 0) {
+ this.$store.dispatch('groups/loadLists')
+ if (this.$route.params.id > 0 || this.$route.params.id === 'create') {
this.$store.dispatch('groups/loadGroup', { id: 0, tabIndex: 0 })
- this.$store.dispatch('groups/loadConfigs')
- this.$store.dispatch('groups/loadLists')
+ this.loadItem(this.$route.name, this.$route.params.id)
} else {
- this.reload()
+ const tabType = this.tabChain.length ? this.tabChain[this.activeTab].tabType : 'group'
+ const id = this.tabChain.length ? this.tabChain[this.activeTab].id : 0
+ this.$router.replace({ name: 'GroupModule.' + tabType, params: { id, noReload: true } })
+ if (this.tabChain.length) this.reload()
+ else this.$store.dispatch('groups/loadGroup', { id: 0, tabIndex: 0 })
}
- if (this.$route.params.id !== '0') this.loadItem(this.$route.name, this.$route.params.id)
- this.$router.replace({
- name: 'GroupModule.' + this.tabChain[this.activeTab].tabType,
- params: { id: this.tabChain[this.activeTab].id, noReload: true }
- })
},
beforeRouteUpdate (to, from, next) {
if (!to.params.noReload) {
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index e0c2f8d..cc648f4 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -48,7 +48,7 @@
<div v-else class="chip-container non-selectable">
<v-tooltip v-for="group in firstGroups" :key="group.id" top open-delay="800">
<template #activator="{ on }">
- <v-chip v-on="on" small label style="width: calc(50% - 8px)">
+ <v-chip v-on="on" small label style="width: calc(50% - 8px)" @click="openGroup(group)">
<span class="chip-text">{{ group.name || group.id }}</span>
</v-chip>
</template>
@@ -234,6 +234,9 @@ export default {
name: 'GroupModule.client',
params: { id, noReload: true }
})
+ },
+ openGroup (group) {
+ this.$store.dispatch('groups/loadGroup', { id: group.id, name: group.name, tabIndex: this.tabIndex, asParent: true, switchTab: true })
}
},
created () {
@@ -256,6 +259,7 @@ export default {
.chip-container >>> .v-chip__content {
width: 100%;
+ cursor: pointer;
}
.chip-text {
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index df2dec6..634b49b 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -60,7 +60,7 @@
<div v-else class="chip-container non-selectable">
<v-tooltip v-for="parent in firstParents" :key="parent.id" top open-delay="800">
<template #activator="{ on }">
- <v-chip v-on="on" small label style="width: calc(50% - 8px)">
+ <v-chip v-on="on" small label style="width: calc(50% - 8px)" @click="openParent(parent)">
<span class="chip-text">{{ parent.name || parent.id }}</span>
</v-chip>
</template>
@@ -231,7 +231,7 @@ export default {
...mapMutations('groups', ['setDialog']),
setShowAll (value) {
this.$store.commit('groups/setShowAll', { index: this.tabIndex, value })
- this.$store.dispatch('groups/loadGroup', { id: this.group.id, tabIndex: this.tabIndex, reload: true })
+ this.$store.dispatch('groups/loadGroup', { id: this.group.id, tabIndex: this.tabIndex })
},
removeIprange (index) {
this.ipranges.splice(index, 1)
@@ -275,6 +275,9 @@ export default {
name: 'GroupModule.group',
params: { id, noReload: true }
})
+ },
+ openParent (parent) {
+ this.$store.dispatch('groups/loadGroup', { id: parent.id, name: parent.name, tabIndex: this.tabIndex, asParent: true, switchTab: true })
}
},
created () {
@@ -317,6 +320,7 @@ export default {
.chip-container >>> .v-chip__content {
width: 100%;
+ cursor: pointer;
}
.chip-text {
diff --git a/webapp/src/store/groups.js b/webapp/src/store/groups.js
index 4b1ec5a..f438b00 100644
--- a/webapp/src/store/groups.js
+++ b/webapp/src/store/groups.js
@@ -26,15 +26,18 @@ export default {
})
state.configNames = names
},
- setActiveTab: (state, index) => { state.activeTab = index },
- setShowAll: (state, { index, value }) => { state.tabChain[index].tabShowAll = value },
- deleteFromTabChain: (state, { index, count }) => { state.tabChain.splice(index, count) },
- setTab: (state, { index, item }) => {
+ setActiveTab (state, index) { state.activeTab = index },
+ setShowAll (state, { index, value }) { state.tabChain[index].tabShowAll = value },
+ deleteFromTabChain (state, { index, count }) { state.tabChain.splice(index, count) },
+ setTab (state, { index, 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)
}
state.tabChain.splice(index, 1, item)
},
+ insertTab (state, { index, item }) {
+ state.tabChain.splice(1, index - 1, item)
+ },
setTabLoading (state, index) {
if (state.tabChain.length > index) Vue.set(state.tabChain[index], 'loading', true)
},
@@ -44,7 +47,7 @@ export default {
}
},
actions: {
- loadConfigs (context) {
+ loadConfigList (context) {
axios.get('/api/configurator/configs').then(result => {
context.commit('setConfigList', result.data.map(x => ({ id: x.id, name: x.name || x.id })))
})
@@ -62,56 +65,56 @@ export default {
loadLists (context) {
context.dispatch('loadGroupList')
context.dispatch('loadClientList')
- },
- loadGroup (context, { id, name, tabIndex, switchTab, reload, save, placeholderName }) {
- if (!reload && context.state.tabChain.length > tabIndex && context.state.tabChain[tabIndex].id === id) {
- if (switchTab) context.commit('setActiveTab', tabIndex)
- } else {
- const showAll = context.state.tabChain.length > tabIndex &&
- context.state.tabChain[tabIndex].id === id &&
- context.state.tabChain[tabIndex].tabShowAll
- if (context.state.tabChain.length <= tabIndex || context.state.tabChain[tabIndex].id !== id) {
- context.commit('setTab', { index: tabIndex, item: { id, name, tabType: 'group', tabShowAll: showAll, subgroups: [], clients: [] } })
- }
- if (!save) context.commit('setTabLoading', tabIndex)
- if (switchTab) context.commit('setActiveTab', tabIndex)
- axios.get('/api/groups/' + id + (showAll ? '?all' : '')).then(res => {
- res.data.tabType = 'group'
- res.data.tabShowAll = showAll
- res.data.subgroups = Object.freeze(res.data.subgroups)
- context.commit('setTab', { index: tabIndex, item: res.data })
- }).catch(err => {
- console.log(err)
- if (switchTab) context.commit('setActiveTab', tabIndex - 1)
- context.commit('deleteFromTabChain', { index: tabIndex, count: context.state.tabChain.length - tabIndex })
+ context.dispatch('loadConfigList')
+ },
+ async loadGroup (context, { id, name, tabIndex, switchTab, asParent }) {
+ const tabChain = context.state.tabChain
+ const showAll = tabChain.length > tabIndex && tabChain[tabIndex].id === id && tabChain[tabIndex].tabShowAll
+ const insert = asParent && tabChain.length > tabIndex && tabIndex >= 1 && tabChain[tabIndex - 1].id !== id
+ if (asParent && tabChain.length > tabIndex && tabChain[tabIndex - 1].id === id) tabIndex -= 1
+ if (insert || tabChain.length <= tabIndex || tabChain[tabIndex].id !== id) {
+ if (insert) context.commit('setActiveTab', 2)
+ context.commit(insert ? 'insertTab' : 'setTab', {
+ index: tabIndex,
+ item: { id, name, tabType: 'group', tabShowAll: showAll, subgroups: [], clients: [] }
})
}
+ if (insert) tabIndex = 1
+ context.commit('setTabLoading', tabIndex)
+ const srcTabIndex = context.state.activeTab
+ if (switchTab) context.commit('setActiveTab', tabIndex)
+ try {
+ const res = await axios.get('/api/groups/' + id + (showAll ? '?all' : ''))
+ res.data.tabType = 'group'
+ res.data.tabShowAll = showAll
+ res.data.subgroups = Object.freeze(res.data.subgroups)
+ context.commit('setTab', { index: tabIndex, item: res.data })
+ } catch (e) {
+ if (switchTab) context.commit('setActiveTab', srcTabIndex)
+ context.commit('deleteFromTabChain', { index: tabIndex, count: insert ? 1 : tabChain.length - tabIndex })
+ }
},
- loadClient (context, { id, name, tabIndex, switchTab, reload }) {
- if (!reload && context.state.tabChain.length > tabIndex && context.state.tabChain[tabIndex].id === id) {
- if (switchTab) context.commit('setActiveTab', tabIndex)
- } else {
- if (context.state.tabChain.length <= tabIndex || context.state.tabChain[tabIndex].id !== id) {
- context.commit('setTab', { index: tabIndex, item: { id, name, tabType: 'client' } })
- }
- if (switchTab) context.commit('setActiveTab', tabIndex)
- axios.get('/api/clients/' + id).then(res => {
- res.data.tabType = 'client'
- context.commit('setTab', { index: tabIndex, item: res.data })
- }).catch(err => {
- console.log(err)
- if (switchTab) context.commit('setActiveTab', tabIndex - 1)
- context.commit('deleteFromTabChain', { index: tabIndex, count: context.state.tabChain.length - tabIndex })
- })
+ async loadClient (context, { id, name, tabIndex, switchTab }) {
+ if (context.state.tabChain.length <= tabIndex || context.state.tabChain[tabIndex].id !== id) {
+ context.commit('setTab', { index: tabIndex, item: { id, name, tabType: 'client' } })
+ }
+ const srcTabIndex = context.state.activeTab
+ if (switchTab) context.commit('setActiveTab', tabIndex)
+ try {
+ const res = await axios.get('/api/clients/' + id)
+ res.data.tabType = 'client'
+ context.commit('setTab', { index: tabIndex, item: res.data })
+ } catch (e) {
+ if (switchTab) context.commit('setActiveTab', srcTabIndex)
+ context.commit('deleteFromTabChain', { index: tabIndex, count: context.state.tabChain.length - tabIndex })
}
},
reload (context) {
- context.dispatch('loadConfigs')
context.dispatch('loadLists')
context.state.tabChain.forEach((item, index) => {
if (item.id === 'create') return
- if (item.tabType === 'group') context.dispatch('loadGroup', { id: item.id, tabIndex: index, reload: true, tabShowAll: item.tabShowAll })
- else if (item.tabType === 'client') context.dispatch('loadClient', { id: item.id, tabIndex: index, reload: true })
+ 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 })
})
},
saveGroup (context, { id, data, parents, ipranges, tabIndex, callback }) {