| // Licensed to the Apache Software Foundation (ASF) under one | |
| // or more contributor license agreements. See the NOTICE file | |
| // distributed with this work for additional information | |
| // regarding copyright ownership. The ASF licenses this file | |
| // to you under the Apache License, Version 2.0 (the | |
| // "License"); you may not use this file except in compliance | |
| // with the License. You may obtain a copy of the License at | |
| // | |
| // http://www.apache.org/licenses/LICENSE-2.0 | |
| // | |
| // Unless required by applicable law or agreed to in writing, | |
| // software distributed under the License is distributed on an | |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| // KIND, either express or implied. See the License for the | |
| // specific language governing permissions and limitations | |
| // under the License. | |
| <template> | |
| <a-form layout="vertical" > | |
| <a-form-item :label="$t('label.owner.type')"> | |
| <a-select | |
| @change="changeAccountTypeOrDomain" | |
| v-model:value="selectedAccountType" | |
| defaultValue="account" | |
| autoFocus | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption=" | |
| (input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| } | |
| " | |
| > | |
| <a-select-option :value="'Account'">{{ $t('label.account') }}</a-select-option> | |
| <a-select-option :value="'Project'">{{ $t('label.project') }}</a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <a-form-item :label="$t('label.domain')" required> | |
| <a-select | |
| @change="changeAccountTypeOrDomain" | |
| v-model:value="selectedDomain" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption=" | |
| (input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| } | |
| " | |
| > | |
| <a-select-option | |
| v-for="domain in domains" | |
| :key="domain.name" | |
| :value="domain.id" | |
| :label="domain.path || domain.name || domain.description" | |
| > | |
| <span> | |
| <resource-icon | |
| v-if="domain && domain.icon" | |
| :image="domain.icon.base64image" | |
| size="1x" | |
| style="margin-right: 5px" | |
| /> | |
| <block-outlined v-else /> | |
| {{ domain.path || domain.name || domain.description }} | |
| </span> | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <template v-if="selectedAccountType === 'Account'"> | |
| <a-form-item :label="$t('label.account')" required> | |
| <a-select | |
| @change="emitChangeEvent" | |
| v-model:value="selectedAccount" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption=" | |
| (input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| } | |
| " | |
| > | |
| <a-select-option v-for="account in accounts" :key="account.name" :value="account.name"> | |
| <span> | |
| <resource-icon | |
| v-if="account && account.icon" | |
| :image="account.icon.base64image" | |
| size="1x" | |
| style="margin-right: 5px" | |
| /> | |
| <team-outlined v-else /> | |
| {{ account.name }} | |
| </span> | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| </template> | |
| <template v-else> | |
| <a-form-item :label="$t('label.project')" required> | |
| <a-select | |
| @change="emitChangeEvent" | |
| v-model:value="selectedProject" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption=" | |
| (input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| } | |
| " | |
| > | |
| <a-select-option v-for="project in projects" :key="project.id" :value="project.id" :label="project.name"> | |
| <span> | |
| <resource-icon | |
| v-if="project && project.icon" | |
| :image="project.icon.base64image" | |
| size="1x" | |
| style="margin-right: 5px" | |
| /> | |
| <project-outlined v-else /> | |
| {{ project.name }} | |
| </span> | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| </template> | |
| </a-form> | |
| </template> | |
| <script> | |
| import { getAPI } from '@/api' | |
| import ResourceIcon from '@/components/view/ResourceIcon.vue' | |
| export default { | |
| name: 'OwnershipSelection', | |
| 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, | |
| requestToken: 0 | |
| } | |
| }, | |
| props: { | |
| override: { | |
| type: Object | |
| } | |
| }, | |
| created () { | |
| this.fetchData() | |
| }, | |
| methods: { | |
| fetchData () { | |
| this.loading = true | |
| getAPI('listDomains', { | |
| response: 'json', | |
| listAll: true, | |
| showicon: true, | |
| details: 'min' | |
| }) | |
| .then((response) => { | |
| this.domains = response.listdomainsresponse.domain | |
| if (this.override) { | |
| this.domains = this.domains.filter(item => this.override.domains.has(item.id)) | |
| } | |
| if (this.domains.length === 0) { | |
| this.selectedDomain = null | |
| this.selectedProject = null | |
| this.selectedAccount = null | |
| return | |
| } | |
| 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.fetchOwnerData() | |
| }) | |
| .catch((error) => { | |
| this.$notifyError(error) | |
| }) | |
| .finally(() => { | |
| 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, | |
| showicon: true, | |
| state: 'Enabled', | |
| 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)) | |
| } | |
| const accountNames = this.accounts.map(account => account.name) | |
| if (this.selectedDomain === this.$store.getters.userInfo.domainid && accountNames.includes(this.$store.getters.userInfo.account)) { | |
| this.selectedAccount = this.$store.getters.userInfo.account | |
| } else { | |
| this.selectedAccount = this.accounts?.[0]?.name | |
| } | |
| this.selectedProject = null | |
| this.emitChangeEvent() | |
| }) | |
| .catch((error) => { | |
| this.$notifyError(error) | |
| }) | |
| .finally(() => { | |
| this.loading = false | |
| this.initialized = true | |
| }) | |
| }, | |
| fetchProjects () { | |
| this.loading = true | |
| const currentToken = this.incrementAndGetRequestToken() | |
| getAPI('listProjects', { | |
| response: 'json', | |
| domainId: this.selectedDomain, | |
| state: 'Active', | |
| showicon: true, | |
| details: 'min', | |
| 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)) | |
| } | |
| this.selectedProject = this.projects?.map(project => project.id)?.includes(this.$store.getters.project?.id) ? this.$store.getters.project?.id : this.projects?.[0]?.id | |
| this.selectedAccount = null | |
| this.emitChangeEvent() | |
| }) | |
| .catch((error) => { | |
| this.$notifyError(error) | |
| }) | |
| .finally(() => { | |
| this.loading = false | |
| this.initialized = true | |
| }) | |
| }, | |
| changeAccountTypeOrDomain () { | |
| this.initialized = true | |
| this.fetchOwnerData() | |
| }, | |
| fetchOwnerData () { | |
| if (this.selectedAccountType === 'Account') { | |
| this.fetchAccounts() | |
| } else { | |
| this.fetchProjects() | |
| } | |
| }, | |
| emitChangeEvent () { | |
| this.$emit('fetch-owner', this) | |
| } | |
| } | |
| } | |
| </script> |