(cloudstack) branch 4.20 updated: Add ownership selection to VPC form (#10124)

[dahn]

This is an automated email from the ASF dual-hosted git repository.

dahn pushed a commit to branch 4.20
in repository https://gitbox.apache.org/repos/asf/cloudstack.git


The following commit(s) were added to refs/heads/4.20 by this push:
     new cbac6cc05bd Add ownership selection to VPC form (#10124)
cbac6cc05bd is described below

commit cbac6cc05bd13df8ebb33207122f6cc4f00599a8
Author: Bryan Lima <42067040+bryanml...@users.noreply.github.com>
AuthorDate: Mon Dec 23 06:30:46 2024 -0300

    Add ownership selection to VPC form (#10124)
---
 ui/src/views/network/CreateVpc.vue | 37 +++++++++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/network/CreateVpc.vue 
b/ui/src/views/network/CreateVpc.vue
index 6fb9a712262..d239d04e143 100644
--- a/ui/src/views/network/CreateVpc.vue
+++ b/ui/src/views/network/CreateVpc.vue
@@ -62,6 +62,7 @@
             </a-select-option>
           </a-select>
         </a-form-item>
+        <ownership-selection v-if="isAdminOrDomainAdmin()" 
@fetch-owner="fetchOwnerOptions"/>
         <a-form-item name="cidr" ref="cidr" v-if="selectedVpcOffering && 
(selectedVpcOffering.networkmode !== 'ROUTED' || isAdmin())">
           <template #label>
             <tooltip-label :title="$t('label.cidr')" 
:tooltip="apiParams.cidr.description"/>
@@ -210,13 +211,15 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
-import { isAdmin } from '@/role'
+import { isAdmin, isAdminOrDomainAdmin } from '@/role'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import OwnershipSelection from '@/views/compute/wizard/OwnershipSelection.vue'
 
 export default {
   name: 'CreateVpc',
   components: {
+    OwnershipSelection,
     ResourceIcon,
     TooltipLabel
   },
@@ -267,6 +270,7 @@ export default {
     }
   },
   methods: {
+    isAdminOrDomainAdmin,
     initForm () {
       this.formRef = ref()
       this.form = reactive({
@@ -359,6 +363,28 @@ export default {
         }
       })
     },
+    fetchOwnerOptions (OwnerOptions) {
+      this.owner = {
+        projectid: null,
+        domainid: this.$store.getters.userInfo.domainid,
+        account: this.$store.getters.userInfo.account
+      }
+      if (OwnerOptions.selectedAccountType === 'Account') {
+        if (!OwnerOptions.selectedAccount) {
+          return
+        }
+        this.owner.account = OwnerOptions.selectedAccount
+        this.owner.domainid = OwnerOptions.selectedDomain
+        this.owner.projectid = null
+      } else if (OwnerOptions.selectedAccountType === 'Project') {
+        if (!OwnerOptions.selectedProject) {
+          return
+        }
+        this.owner.account = null
+        this.owner.domainid = null
+        this.owner.projectid = OwnerOptions.selectedProject
+      }
+    },
     handleVpcOfferingChange (value) {
       this.selectedVpcOffering = {}
       if (!value) {
@@ -398,7 +424,14 @@ export default {
       if (this.loading) return
       this.formRef.value.validate().then(() => {
         const values = toRaw(this.form)
-        const params = {}
+        var params = {}
+        if (this.owner?.account) {
+          params.account = this.owner.account
+          params.domainid = this.owner.domainid
+        } else if (this.owner?.projectid) {
+          params.domainid = this.owner.domainid
+          params.projectid = this.owner.projectid
+        }
         for (const key in values) {
           const input = values[key]
           if (input === '' || input === null || input === undefined) {