From e9666683847c357333610d138706c52e271c0af8 Mon Sep 17 00:00:00 2001 From: utchoang Date: Mon, 8 Mar 2021 15:15:40 +0700 Subject: [PATCH 1/4] save and auto-expand list domain when reloading --- ui/src/components/view/TreeView.vue | 53 +++++++++++++++++++++++++++-- ui/src/store/getters.js | 3 +- ui/src/store/modules/user.js | 16 +++++++-- ui/src/store/mutation-types.js | 1 + ui/src/views/iam/DomainView.vue | 4 +++ 5 files changed, 72 insertions(+), 5 deletions(-) diff --git a/ui/src/components/view/TreeView.vue b/ui/src/components/view/TreeView.vue index 4c0bcce36d07..0120e3a8da51 100644 --- a/ui/src/components/view/TreeView.vue +++ b/ui/src/components/view/TreeView.vue @@ -36,11 +36,11 @@ :loadData="onLoadData" :expandAction="false" :showIcon="true" - :defaultSelectedKeys="defaultSelected" + :selectedKeys="defaultSelected" :checkStrictly="true" @select="onSelect" @expand="onExpand" - :defaultExpandedKeys="arrExpand"> + :expandedKeys="arrExpand"> @@ -146,6 +146,7 @@ export default { oldSearchQuery: '', searchQuery: '', arrExpand: [], + domainStore: {}, rootKey: '' } }, @@ -153,6 +154,7 @@ export default { this.metaName = this.$route.meta.name this.apiList = this.$route.meta.permission[0] ? this.$route.meta.permission[0] : '' this.apiChildren = this.$route.meta.permission[1] ? this.$route.meta.permission[1] : '' + this.domainStore = store.getters.domainStore }, watch: { loading () { @@ -213,6 +215,40 @@ export default { } this.reloadTreeData(newData) + }, + treeVerticalData () { + if (!this.domainStore.isExpand) { + return + } + if (this.domainStore.expands && this.domainStore.expands.length > 0) { + for (let i = 0; i < this.domainStore.expands.length; i++) { + const expandKey = this.domainStore.expands[i] + if (this.arrExpand.includes(expandKey)) { + continue + } + const keyVisible = this.treeVerticalData.findIndex(item => item.key === expandKey) + if (keyVisible > -1) this.arrExpand.push(expandKey) + } + } + + if (this.domainStore.selected) { + this.selectedTreeKey = this.domainStore.selected + this.defaultSelected = [this.selectedTreeKey] + + const resource = this.treeVerticalData.filter(item => item.id === this.selectedTreeKey) + if (resource.length > 0) { + this.resource = resource[0] + this.$emit('change-resource', this.resource) + } else { + const rootResource = this.treeVerticalData[0] + if (rootResource) { + this.resource = rootResource + this.selectedTreeKey = this.resource.key + this.defaultSelected = [this.selectedTreeKey] + this.$emit('change-resource', this.resource) + } + } + } } }, methods: { @@ -273,10 +309,21 @@ export default { this.selectedTreeKey = selectedKeys[0] } + this.defaultSelected = [] + this.defaultSelected.push(this.selectedTreeKey) + + this.domainStore.expands = this.arrExpand + this.domainStore.selected = this.selectedTreeKey + store.dispatch('SetDomainStore', this.domainStore) + this.getDetailResource(this.selectedTreeKey) }, onExpand (treeExpand) { this.arrExpand = treeExpand + this.domainStore.isExpand = true + this.domainStore.expands = this.arrExpand + this.domainStore.selected = this.selectedTreeKey + store.dispatch('SetDomainStore', this.domainStore) }, onSearch (value) { if (this.searchQuery === '' && this.oldSearchQuery === '') { @@ -303,6 +350,8 @@ export default { this.arrExpand = [] this.treeViewData = [] this.loadingSearch = true + this.domainStore = {} + store.dispatch('SetDomainStore', this.domainStore) api(this.apiList, params).then(json => { const listDomains = this.getResponseJsonData(json) diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js index 4e2d5eb21a60..359dccc7c6f7 100644 --- a/ui/src/store/getters.js +++ b/ui/src/store/getters.js @@ -35,7 +35,8 @@ const getters = { cloudian: state => state.user.cloudian, zones: state => state.user.zones, timezoneoffset: state => state.user.timezoneoffset, - usebrowsertimezone: state => state.user.usebrowsertimezone + usebrowsertimezone: state => state.user.usebrowsertimezone, + domainStore: state => state.user.domainStore } export default getters diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js index 9ed40e38c443..0c99c99eac2b 100644 --- a/ui/src/store/modules/user.js +++ b/ui/src/store/modules/user.js @@ -24,7 +24,7 @@ import router from '@/router' import store from '@/store' import { login, logout, api } from '@/api' import { i18n } from '@/locales' -import { ACCESS_TOKEN, CURRENT_PROJECT, DEFAULT_THEME, APIS, ASYNC_JOB_IDS, ZONES, TIMEZONE_OFFSET, USE_BROWSER_TIMEZONE } from '@/store/mutation-types' +import { ACCESS_TOKEN, CURRENT_PROJECT, DEFAULT_THEME, APIS, ASYNC_JOB_IDS, ZONES, TIMEZONE_OFFSET, USE_BROWSER_TIMEZONE, DOMAIN_STORE } from '@/store/mutation-types' const user = { state: { @@ -40,7 +40,8 @@ const user = { cloudian: {}, zones: {}, timezoneoffset: 0.0, - usebrowsertimezone: false + usebrowsertimezone: false, + domainStore: {} }, mutations: { @@ -91,6 +92,10 @@ const user = { SET_ZONES: (state, zones) => { state.zones = zones Vue.ls.set(ZONES, zones) + }, + SET_DOMAIN_STORE (state, domainStore) { + state.domainStore = domainStore + Vue.ls.set(DOMAIN_STORE, domainStore) } }, @@ -142,7 +147,10 @@ const user = { const cachedZones = Vue.ls.get(ZONES, []) const cachedTimezoneOffset = Vue.ls.get(TIMEZONE_OFFSET, 0.0) const cachedUseBrowserTimezone = Vue.ls.get(USE_BROWSER_TIMEZONE, false) + const domainStore = Vue.ls.get(DOMAIN_STORE, {}) const hasAuth = Object.keys(cachedApis).length > 0 + + commit('SET_DOMAIN_STORE', domainStore) if (hasAuth) { console.log('Login detected, using cached APIs') commit('SET_ZONES', cachedZones) @@ -304,6 +312,10 @@ const user = { reject(error) }) }) + }, + + SetDomainStore ({ commit }, domainStore) { + commit('SET_DOMAIN_STORE', domainStore) } } } diff --git a/ui/src/store/mutation-types.js b/ui/src/store/mutation-types.js index 9d735610e072..01a9755cb58f 100644 --- a/ui/src/store/mutation-types.js +++ b/ui/src/store/mutation-types.js @@ -32,6 +32,7 @@ export const ZONES = 'ZONES' export const ASYNC_JOB_IDS = 'ASYNC_JOB_IDS' export const TIMEZONE_OFFSET = 'TIMEZONE_OFFSET' export const USE_BROWSER_TIMEZONE = 'USE_BROWSER_TIMEZONE' +export const DOMAIN_STORE = 'DOMAIN_STORE' export const CONTENT_WIDTH_TYPE = { Fluid: 'Fluid', diff --git a/ui/src/views/iam/DomainView.vue b/ui/src/views/iam/DomainView.vue index 12ba40b61d80..4abcb3275431 100644 --- a/ui/src/views/iam/DomainView.vue +++ b/ui/src/views/iam/DomainView.vue @@ -132,6 +132,7 @@ export default { next() }, beforeRouteLeave (to, from, next) { + this.updateDomainStoreWhenLeave() next() }, watch: { @@ -311,6 +312,9 @@ export default { }, updateActionData (data) { this.actionData.push(data) + }, + updateDomainStoreWhenLeave () { + store.dispatch('SetDomainStore', {}) } } } From 4394f7077097968e1ac0f387bcfeac470809bb28 Mon Sep 17 00:00:00 2001 From: utchoang Date: Wed, 10 Mar 2021 08:11:31 +0700 Subject: [PATCH 2/4] fix for simplify the code --- ui/src/components/view/TreeView.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/src/components/view/TreeView.vue b/ui/src/components/view/TreeView.vue index 0120e3a8da51..7cb52368e3db 100644 --- a/ui/src/components/view/TreeView.vue +++ b/ui/src/components/view/TreeView.vue @@ -221,8 +221,7 @@ export default { return } if (this.domainStore.expands && this.domainStore.expands.length > 0) { - for (let i = 0; i < this.domainStore.expands.length; i++) { - const expandKey = this.domainStore.expands[i] + for (const expandKey of this.domainStore.expands) { if (this.arrExpand.includes(expandKey)) { continue } From 25766dcb3e6434dde0f3ef05f050021bde8e2a5f Mon Sep 17 00:00:00 2001 From: utchoang Date: Wed, 10 Mar 2021 10:10:41 +0700 Subject: [PATCH 3/4] clear variables, prop of common component --- ui/src/components/view/TreeView.vue | 35 ++++++++++++++++------------- ui/src/store/modules/user.js | 14 +++++++++++- ui/src/views/iam/DomainView.vue | 17 +++++++++----- 3 files changed, 44 insertions(+), 22 deletions(-) diff --git a/ui/src/components/view/TreeView.vue b/ui/src/components/view/TreeView.vue index 7cb52368e3db..2b763ba487fb 100644 --- a/ui/src/components/view/TreeView.vue +++ b/ui/src/components/view/TreeView.vue @@ -122,6 +122,12 @@ export default { default () { return [] } + }, + treeStore: { + type: Object, + default () { + return {} + } } }, data () { @@ -146,7 +152,6 @@ export default { oldSearchQuery: '', searchQuery: '', arrExpand: [], - domainStore: {}, rootKey: '' } }, @@ -154,7 +159,6 @@ export default { this.metaName = this.$route.meta.name this.apiList = this.$route.meta.permission[0] ? this.$route.meta.permission[0] : '' this.apiChildren = this.$route.meta.permission[1] ? this.$route.meta.permission[1] : '' - this.domainStore = store.getters.domainStore }, watch: { loading () { @@ -217,11 +221,11 @@ export default { this.reloadTreeData(newData) }, treeVerticalData () { - if (!this.domainStore.isExpand) { + if (!this.treeStore.isExpand) { return } - if (this.domainStore.expands && this.domainStore.expands.length > 0) { - for (const expandKey of this.domainStore.expands) { + if (this.treeStore.expands && this.treeStore.expands.length > 0) { + for (const expandKey of this.treeStore.expands) { if (this.arrExpand.includes(expandKey)) { continue } @@ -230,8 +234,8 @@ export default { } } - if (this.domainStore.selected) { - this.selectedTreeKey = this.domainStore.selected + if (this.treeStore.selected) { + this.selectedTreeKey = this.treeStore.selected this.defaultSelected = [this.selectedTreeKey] const resource = this.treeVerticalData.filter(item => item.id === this.selectedTreeKey) @@ -311,18 +315,18 @@ export default { this.defaultSelected = [] this.defaultSelected.push(this.selectedTreeKey) - this.domainStore.expands = this.arrExpand - this.domainStore.selected = this.selectedTreeKey - store.dispatch('SetDomainStore', this.domainStore) + this.treeStore.expands = this.arrExpand + this.treeStore.selected = this.selectedTreeKey + this.$emit('change-tree-store', this.treeStore) this.getDetailResource(this.selectedTreeKey) }, onExpand (treeExpand) { this.arrExpand = treeExpand - this.domainStore.isExpand = true - this.domainStore.expands = this.arrExpand - this.domainStore.selected = this.selectedTreeKey - store.dispatch('SetDomainStore', this.domainStore) + this.treeStore.isExpand = true + this.treeStore.expands = this.arrExpand + this.treeStore.selected = this.selectedTreeKey + this.$emit('change-tree-store', this.treeStore) }, onSearch (value) { if (this.searchQuery === '' && this.oldSearchQuery === '') { @@ -349,8 +353,7 @@ export default { this.arrExpand = [] this.treeViewData = [] this.loadingSearch = true - this.domainStore = {} - store.dispatch('SetDomainStore', this.domainStore) + this.$emit('change-tree-store', {}) api(this.apiList, params).then(json => { const listDomains = this.getResponseJsonData(json) diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js index 0c99c99eac2b..f18bc4d3a3a6 100644 --- a/ui/src/store/modules/user.js +++ b/ui/src/store/modules/user.js @@ -24,7 +24,17 @@ import router from '@/router' import store from '@/store' import { login, logout, api } from '@/api' import { i18n } from '@/locales' -import { ACCESS_TOKEN, CURRENT_PROJECT, DEFAULT_THEME, APIS, ASYNC_JOB_IDS, ZONES, TIMEZONE_OFFSET, USE_BROWSER_TIMEZONE, DOMAIN_STORE } from '@/store/mutation-types' +import { + ACCESS_TOKEN, + CURRENT_PROJECT, + DEFAULT_THEME, + APIS, + ZONES, + TIMEZONE_OFFSET, + USE_BROWSER_TIMEZONE, + HEADER_NOTICES, + DOMAIN_STORE +} from '@/store/mutation-types' const user = { state: { @@ -131,6 +141,7 @@ const user = { commit('SET_FEATURES', {}) commit('SET_LDAP', {}) commit('SET_CLOUDIAN', {}) + commit('SET_DOMAIN_STORE', {}) notification.destroy() @@ -258,6 +269,7 @@ const user = { commit('SET_LDAP', {}) commit('SET_CLOUDIAN', {}) commit('RESET_THEME') + commit('SET_DOMAIN_STORE', {}) Vue.ls.remove(CURRENT_PROJECT) Vue.ls.remove(ACCESS_TOKEN) Vue.ls.remove(ASYNC_JOB_IDS) diff --git a/ui/src/views/iam/DomainView.vue b/ui/src/views/iam/DomainView.vue index 4abcb3275431..be99073d89cf 100644 --- a/ui/src/views/iam/DomainView.vue +++ b/ui/src/views/iam/DomainView.vue @@ -62,9 +62,11 @@ v-else :treeData="treeData" :treeSelected="treeSelected" + :treeStore="domainStore" :loading="loading" :tabs="$route.meta.tabs" @change-resource="changeResource" + @change-tree-store="changeDomainStore" :actionData="actionData"/> @@ -108,7 +110,8 @@ export default { treeSelected: {}, showAction: false, action: {}, - dataView: false + dataView: false, + domainStore: {} } }, computed: { @@ -132,9 +135,12 @@ export default { next() }, beforeRouteLeave (to, from, next) { - this.updateDomainStoreWhenLeave() + this.changeDomainStore({}) next() }, + created () { + this.domainStore = store.getters.domainStore + }, watch: { '$route' (to, from) { if (to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) { @@ -307,14 +313,15 @@ export default { this.treeSelected = resource this.resource = this.treeSelected }, + changeDomainStore (domainStore) { + this.domainStore = domainStore + store.dispatch('SetDomainStore', domainStore) + }, closeAction () { this.showAction = false }, updateActionData (data) { this.actionData.push(data) - }, - updateDomainStoreWhenLeave () { - store.dispatch('SetDomainStore', {}) } } } From 1c94db2906f8e1e19f8bb3aef12dbd14dc8f1285 Mon Sep 17 00:00:00 2001 From: utchoang Date: Thu, 25 Mar 2021 14:51:57 +0700 Subject: [PATCH 4/4] fix lint errors found --- ui/src/store/modules/user.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js index f18bc4d3a3a6..ff29b75700a8 100644 --- a/ui/src/store/modules/user.js +++ b/ui/src/store/modules/user.js @@ -32,7 +32,7 @@ import { ZONES, TIMEZONE_OFFSET, USE_BROWSER_TIMEZONE, - HEADER_NOTICES, + ASYNC_JOB_IDS, DOMAIN_STORE } from '@/store/mutation-types'