From f2e328aa4be343458f332eb29dfe9d334b329c11 Mon Sep 17 00:00:00 2001 From: Udo Walter Date: Sat, 30 Mar 2019 16:20:14 +0000 Subject: [webapp/groups] parents of groups and clients are now clickable --- webapp/src/components/DataTable.vue | 2 +- webapp/src/components/GroupModule.vue | 17 +++-- webapp/src/components/GroupModuleClientView.vue | 6 +- webapp/src/components/GroupModuleGroupView.vue | 8 ++- webapp/src/store/groups.js | 95 +++++++++++++------------ 5 files changed, 69 insertions(+), 59 deletions(-) (limited to 'webapp') 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 @@ {{ selectedIconMap[item.selected] }}
- {{ item.data[header.key] }} + {{ item.data[header.key] }}
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 @@
@@ -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 @@
@@ -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 }) { -- cgit v1.2.3-55-g7522