From 165439130911ddac7335845e7887e5f1526ba843 Mon Sep 17 00:00:00 2001 From: Hoang Nguyen Date: Thu, 6 May 2021 16:30:25 +0700 Subject: [PATCH] ui: update treeview when clicking the refresh button (#4999) Fixes #4975 When a domain is generated by another client, the treeview is modified when clicking the refresh button. --- ui/src/components/view/TreeView.vue | 124 +++++++------------------- ui/src/views/iam/DomainActionForm.vue | 7 +- ui/src/views/iam/DomainView.vue | 8 +- 3 files changed, 34 insertions(+), 105 deletions(-) diff --git a/ui/src/components/view/TreeView.vue b/ui/src/components/view/TreeView.vue index 2b763ba487f..832f5b3e354 100644 --- a/ui/src/components/view/TreeView.vue +++ b/ui/src/components/view/TreeView.vue @@ -117,12 +117,6 @@ export default { type: Boolean, default: false }, - actionData: { - type: Array, - default () { - return [] - } - }, treeStore: { type: Object, default () { @@ -163,22 +157,15 @@ export default { watch: { loading () { this.detailLoading = this.loading - }, - treeData () { - if (this.oldTreeViewData.length === 0) { + this.treeViewData = [] + this.arrExpand = [] + if (!this.loading) { this.treeViewData = this.treeData this.treeVerticalData = this.treeData - } - if (this.treeViewData.length > 0) { - this.oldTreeViewData = this.treeViewData - this.rootKey = this.treeViewData[0].key - } - - if (Object.keys(this.resource).length > 0) { - const resourceIndex = this.treeVerticalData.findIndex(item => item.id === this.resource.id) - if (resourceIndex === -1) { - this.$el.querySelector(`[title=${this.resource.parentdomainname}]`).click() + if (this.treeViewData.length > 0) { + this.oldTreeViewData = this.treeViewData + this.rootKey = this.treeViewData[0].key } } }, @@ -213,13 +200,6 @@ export default { this.defaultSelected.push(arrSelected[0]) } }, - actionData (newData, oldData) { - if (!newData || newData.length === 0) { - return - } - - this.reloadTreeData(newData) - }, treeVerticalData () { if (!this.treeStore.isExpand) { return @@ -233,25 +213,6 @@ export default { if (keyVisible > -1) this.arrExpand.push(expandKey) } } - - if (this.treeStore.selected) { - this.selectedTreeKey = this.treeStore.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: { @@ -297,10 +258,36 @@ export default { } } + this.onSelectResource() resolve() }) }) }, + onSelectResource () { + if (this.treeStore.selected) { + this.selectedTreeKey = this.treeStore.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 resourceIdx = this.treeVerticalData.findIndex(item => item.id === this.resource.id) + const parentIndex = this.treeVerticalData.findIndex(item => item.id === this.resource.parentdomainid) + if (resourceIdx !== -1) { + this.resource = this.treeVerticalData[resourceIdx] + } else if (parentIndex !== 1) { + this.resource = this.treeVerticalData[parentIndex] + } else { + this.resource = this.treeVerticalData[0] + } + this.selectedTreeKey = this.resource.key + this.defaultSelected = [this.selectedTreeKey] + this.$emit('change-resource', this.resource) + } + } + }, onSelect (selectedKeys, event) { if (!event.selected) { setTimeout(() => { event.node.$refs.selectHandle.click() }) @@ -398,53 +385,6 @@ export default { onTabChange (key) { this.tabActive = key }, - reloadTreeData (objData) { - if (objData && objData[0].isDel) { - this.treeVerticalData = this.treeVerticalData.filter(item => item.id !== objData[0].id) - this.treeVerticalData = this.treeVerticalData.filter(item => item.parentdomainid !== objData[0].id) - } else { - // data response from action - let jsonResponse = this.getResponseJsonData(objData[0]) - jsonResponse = this.createResourceData(jsonResponse) - - // resource for check create or edit - const resource = this.treeVerticalData.filter(item => item.id === jsonResponse.id) - - // when edit - if (resource && resource[0]) { - this.treeVerticalData.filter((item, index) => { - if (item.id === jsonResponse.id) { - // replace all value of tree data - Object.keys(jsonResponse).forEach((value, idx) => { - this.$set(this.treeVerticalData[index], value, jsonResponse[value]) - }) - } - }) - } else { - // when create - let resourceExists = true - - // check is searching data - if (this.searchQuery !== '') { - resourceExists = jsonResponse.title.indexOf(this.searchQuery) > -1 - } - - // push new resource to tree data - if (this.resource.haschild && resourceExists) { - this.treeVerticalData.push(jsonResponse) - } - - // set resource is currently active as a parent - this.treeVerticalData.filter((item, index) => { - if (item.id === this.resource.id) { - this.$set(this.treeVerticalData[index], 'isLeaf', false) - this.$set(this.treeVerticalData[index], 'haschild', true) - } - }) - } - } - this.recursiveTreeData(this.treeVerticalData) - }, getDetailResource (selectedKey) { // set api name and parameter const apiName = this.$route.meta.permission[0] diff --git a/ui/src/views/iam/DomainActionForm.vue b/ui/src/views/iam/DomainActionForm.vue index 7e15e32e73c..b5152a61d6b 100644 --- a/ui/src/views/iam/DomainActionForm.vue +++ b/ui/src/views/iam/DomainActionForm.vue @@ -169,16 +169,12 @@ export default { this.fillEditFormFieldValues() } }, - inject: ['parentCloseAction', 'parentFetchData', 'parentUpdActionData'], + inject: ['parentCloseAction', 'parentFetchData'], methods: { pollActionCompletion (jobId, action) { this.$pollJob({ jobId, successMethod: result => { - if (this.action.api === 'deleteDomain') { - this.$set(this.resource, 'isDel', true) - this.parentUpdActionData(this.resource) - } this.parentFetchData() if (action.response) { const description = action.response(result.jobresult) @@ -283,7 +279,6 @@ export default { key: this.action.label + resourceName, duration: duration }) - this.parentUpdActionData(json) this.parentFetchData() } this.parentCloseAction() diff --git a/ui/src/views/iam/DomainView.vue b/ui/src/views/iam/DomainView.vue index c9747970822..90ed5a6a336 100644 --- a/ui/src/views/iam/DomainView.vue +++ b/ui/src/views/iam/DomainView.vue @@ -66,8 +66,7 @@ :loading="loading" :tabs="$route.meta.tabs" @change-resource="changeResource" - @change-tree-store="changeDomainStore" - :actionData="actionData"/> + @change-tree-store="changeDomainStore"/>
@@ -106,7 +105,6 @@ export default { loading: false, selectedRowKeys: [], treeData: [], - actionData: [], treeSelected: {}, showAction: false, action: {}, @@ -154,7 +152,6 @@ export default { provide () { return { parentCloseAction: this.closeAction, - parentUpdActionData: this.updateActionData, parentFetchData: this.fetchData } }, @@ -317,9 +314,6 @@ export default { }, closeAction () { this.showAction = false - }, - updateActionData (data) { - this.actionData.push(data) } } }