From f33e5d8c920b1f673431f6b031b2da470ecd6387 Mon Sep 17 00:00:00 2001 From: Udo Walter Date: Sun, 14 Apr 2019 12:53:08 +0000 Subject: [webapp/groups] same as last commit but better --- webapp/src/components/GroupModule.vue | 9 ++------- webapp/src/components/GroupModuleClientView.vue | 7 ++++--- webapp/src/components/GroupModuleGroupView.vue | 7 ++++--- webapp/src/store/groups.js | 12 +++++++++++- 4 files changed, 21 insertions(+), 14 deletions(-) (limited to 'webapp') diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue index 2c7a399..5d7a25d 100644 --- a/webapp/src/components/GroupModule.vue +++ b/webapp/src/components/GroupModule.vue @@ -64,15 +64,9 @@ export default { ...mapState('groups', ['tabChain', 'activeTab', 'groupList', 'clientList']), reloading () { return this.tabChain.some(tab => tab.loading) - }, - activeTabName () { - return this.tabChain[this.activeTab].name } }, watch: { - activeTabName () { - window.dispatchEvent(new Event('resize')) - }, activeTab (index) { this.updateUrl() }, @@ -81,7 +75,7 @@ export default { } }, methods: { - ...mapMutations('groups', ['setActiveTab', 'setTab']), + ...mapMutations('groups', ['setActiveTab', 'setTab', 'adjustTabSlider']), ...mapActions('groups', ['reload']), loadItem (routeName, id) { const type = routeName.replace('GroupModule.', '') @@ -108,6 +102,7 @@ export default { 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.adjustTabSlider() this.loadItem(this.$route.name, this.$route.params.id) } else { const tabType = this.tabChain.length ? this.tabChain[this.activeTab].tabType : 'group' diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue index c8f0bb1..6e5e2e6 100644 --- a/webapp/src/components/GroupModuleClientView.vue +++ b/webapp/src/components/GroupModuleClientView.vue @@ -193,7 +193,7 @@ export default { } }, methods: { - ...mapMutations('groups', ['setDialog']), + ...mapMutations('groups', ['setDialog', 'setActiveTab', 'adjustTabSlider', 'deleteFromTabChain']), editInfo () { this.editMode = true this.info.name = this.client.name @@ -207,12 +207,13 @@ export default { cancelEdit () { this.editMode = false if (this.client.id === 'create') { - this.$store.commit('groups/deleteFromTabChain', { index: this.tabIndex, count: 1 }) - this.$store.commit('groups/setActiveTab', this.tabIndex - 1) + this.deleteFromTabChain({ index: this.tabIndex, count: 1 }) + this.setActiveTab(this.tabIndex - 1) } }, saveData () { this.info.configId = this.info.configId === undefined ? null : this.info.configId + this.adjustTabSlider() this.$store.dispatch('groups/saveClient', { id: this.client.id, data: this.info, diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue index 7333c74..a793d8a 100644 --- a/webapp/src/components/GroupModuleGroupView.vue +++ b/webapp/src/components/GroupModuleGroupView.vue @@ -249,7 +249,7 @@ export default { } }, methods: { - ...mapMutations('groups', ['setDialog']), + ...mapMutations('groups', ['setDialog', 'setActiveTab', 'adjustTabSlider', 'deleteFromTabChain']), setShowAll (value) { this.$store.commit('groups/setShowAll', { index: this.tabIndex, value }) this.$store.dispatch('groups/loadGroup', { id: this.group.id, tabIndex: this.tabIndex }) @@ -271,13 +271,14 @@ export default { cancelEdit () { this.editMode = false if (this.group.id === 'create') { - this.$store.commit('groups/deleteFromTabChain', { index: this.tabIndex, count: 1 }) - this.$store.commit('groups/setActiveTab', this.tabIndex - 1) + this.deleteFromTabChain({ index: this.tabIndex, count: 1 }) + this.setActiveTab(this.tabIndex - 1) } }, saveData () { this.info.configId = this.info.configId === undefined ? null : this.info.configId this.ipranges = this.ipranges.filter(iprange => iprange.startIp && iprange.endIp) + this.adjustTabSlider() this.$store.dispatch('groups/saveGroup', { id: this.group.id, data: this.info, diff --git a/webapp/src/store/groups.js b/webapp/src/store/groups.js index 8d97bd7..c5df70a 100644 --- a/webapp/src/store/groups.js +++ b/webapp/src/store/groups.js @@ -12,7 +12,8 @@ export default { dialog: { show: false, info: {} - } + }, + adjustTabSlider: false }, mutations: { setGroupList: (state, list) => { state.groupList = list }, @@ -21,14 +22,23 @@ export default { setActiveTab (state, index) { state.activeTab = index }, setShowAll (state, { index, value }) { state.tabChain[index].tabShowAll = value }, deleteFromTabChain (state, { index, count }) { state.tabChain.splice(index, count) }, + adjustTabSlider (state) { state.adjustTabSlider = true }, 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) + if (state.adjustTabSlider && index === state.activeTab) { + state.adjustTabSlider = false + window.dispatchEvent(new Event('resize')) + } }, insertTab (state, { index, item }) { state.tabChain.splice(1, index - 1, item) + if (state.adjustTabSlider && (index - 1) === state.activeTab) { + state.adjustTabSlider = false + window.dispatchEvent(new Event('resize')) + } }, setTabLoading (state, index) { if (state.tabChain.length > index) Vue.set(state.tabChain[index], 'loading', true) -- cgit v1.2.3-55-g7522