mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
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.
This commit is contained in:
Hoang Nguyen
GitHub
parent
645ceecea4
commit
1654391309
@ -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]
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -66,8 +66,7 @@
|
||||
:loading="loading"
|
||||
:tabs="$route.meta.tabs"
|
||||
@change-resource="changeResource"
|
||||
@change-tree-store="changeDomainStore"
|
||||
:actionData="actionData"/>
|
||||
@change-tree-store="changeDomainStore"/>
|
||||
</div>
|
||||
|
||||
<div v-if="showAction">
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user