ui: fix form data double fetch/reset DeployVMFromBackup form data by ownership selection

ui/src/components/view/DeployVMFromBackup.vue

@@ -2050,7 +2050,9 @@ export default {
         this.owner.domainid = null
         this.owner.projectid = OwnerOptions.selectedProject
       }
-      this.resetData()
+      if (OwnerOptions.initialized) {
+        this.resetData()
+      }
     },
     fetchZones (zoneId, listZoneAllow) {
       this.zones = []

ui/src/views/compute/wizard/OwnershipSelection.vue

@@ -19,7 +19,7 @@
   <a-form layout="vertical" >
     <a-form-item :label="$t('label.owner.type')">
       <a-select
-        @change="changeDomain"
+        @change="changeAccountTypeOrDomain"
         v-model:value="selectedAccountType"
         defaultValue="account"
         autoFocus
@@ -37,7 +37,7 @@
     </a-form-item>
     <a-form-item :label="$t('label.domain')" required>
       <a-select
-        @change="changeDomain"
+        @change="changeAccountTypeOrDomain"
         v-model:value="selectedDomain"
         showSearch
         optionFilterProp="label"
@@ -136,14 +136,16 @@ export default {
   components: { ResourceIcon },
   data () {
     return {
+      initialized: false,
       domains: [],
       accounts: [],
       projects: [],
       selectedAccountType: this.$store.getters.project?.id ? 'Project' : 'Account',
       selectedDomain: null,
       selectedAccount: null,
       selectedProject: null,
-      loading: false
+      loading: false,
+      requestToken: 0
     }
   },
   props: {
@@ -177,7 +179,7 @@ export default {
           const domainIds = this.domains?.map(domain => domain.id)
           const ownerDomainId = this.$store.getters.project?.domainid || this.$store.getters.userInfo.domainid
           this.selectedDomain = domainIds?.includes(ownerDomainId) ? ownerDomainId : this.domains?.[0]?.id
-          this.changeDomain()
+          this.fetchOwnerData()
         })
         .catch((error) => {
           this.$notifyError(error)
@@ -186,8 +188,13 @@ export default {
           this.loading = false
         })
     },
+    incrementAndGetRequestToken () {
+      this.requestToken += 1
+      return this.requestToken
+    },
     fetchAccounts () {
       this.loading = true
+      const currentToken = this.incrementAndGetRequestToken()
       getAPI('listAccounts', {
         response: 'json',
         domainId: this.selectedDomain,
@@ -196,6 +203,9 @@ export default {
         isrecursive: false
       })
         .then((response) => {
+          if (currentToken !== this.requestToken) {
+            return
+          }
           this.accounts = response.listaccountsresponse.account || []
           if (this.override?.accounts && this.accounts) {
             this.accounts = this.accounts.filter(item => this.override.accounts.has(item.name))
@@ -214,10 +224,12 @@ export default {
         })
         .finally(() => {
           this.loading = false
+          this.initialized = true
         })
     },
     fetchProjects () {
       this.loading = true
+      const currentToken = this.incrementAndGetRequestToken()
       getAPI('listProjects', {
         response: 'json',
         domainId: this.selectedDomain,
@@ -227,6 +239,9 @@ export default {
         isrecursive: false
       })
         .then((response) => {
+          if (currentToken !== this.requestToken) {
+            return
+          }
           this.projects = response.listprojectsresponse.project
           if (this.override?.projects && this.projects) {
             this.projects = this.projects.filter(item => this.override.projects.has(item.id))
@@ -240,9 +255,14 @@ export default {
         })
         .finally(() => {
           this.loading = false
+          this.initialized = true
         })
     },
-    changeDomain () {
+    changeAccountTypeOrDomain () {
+      this.initialized = true
+      this.fetchOwnerData()
+    },
+    fetchOwnerData () {
       if (this.selectedAccountType === 'Account') {
         this.fetchAccounts()
       } else {