ui/src/views/image/UpdateTemplateIsoPermissions.vue - cloudstack - Git at Google

 // 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>
   <div class="form" v-ctrl-enter="submitData">
     <div v-if="loading" class="loading">
       <loading-outlined />
     </div>

     <div class="form__item">
       <p class="form__label">{{ $t('label.operation') }}</p>
       <a-select
         v-model:value="selectedOperation"
         :defaultValue="'add'"
         @change="fetchData"
         v-focus="true"
         showSearch
         optionFilterProp="value"
         :filterOption="(input, option) => {
           return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
         }" >
         <a-select-option :value="'add'">{{ $t('label.add') }}</a-select-option>
         <a-select-option :value="'remove'">{{ $t('label.remove') }}</a-select-option>
         <a-select-option :value="'reset'">{{ $t('label.reset') }}</a-select-option>
       </a-select>
     </div>

     <template v-if="selectedOperation !== 'reset'">
       <div class="form__item">
         <p class="form__label">
           <span class="required">*</span>
           {{ $t('label.sharewith') }}
         </p>
         <a-select
           v-model:value="selectedShareWith"
           :defaultValue="$t('label.account')"
           @change="fetchData"
           showSearch
           optionFilterProp="value"
           :filterOption="(input, option) => {
             return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }">
           <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
           <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
         </a-select>
       </div>

       <template v-if="selectedShareWith === $t('label.account')">
         <div class="form__item">
           <p class="form__label">
             {{ $t('label.account') }}
           </p>
           <div v-if="showAccountSelect">
             <a-select
               mode="multiple"
               placeholder="Select Accounts"
               v-model:value="selectedAccounts"
               @change="handleChange"
               style="width: 100%"
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
                 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
               <a-select-option v-for="account in accountsList" :key="account.name" :label="account.name">
                 <span>
                   <resource-icon v-if="account.icon" :image="account.icon.base64image" size="1x" style="margin-right: 5px"/>
                   <team-outlined v-else style="margin-right: 5px" />
                   {{ account.name }}
                 </span>
               </a-select-option>
             </a-select>
           </div>
           <div v-else>
             <a-input v-model:value="selectedAccountsList" :placeholder="$t('label.comma.separated.list.description')"></a-input>
           </div>
         </div>
       </template>

       <template v-else>
         <div class="form__item">
           <p class="form__label">
             {{ $t('label.project') }}
           </p>
           <a-select
             mode="multiple"
             :placeholder="$t('label.select.projects')"
             v-model:value="selectedProjects"
             @change="handleChange"
             style="width: 100%"
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
               return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option v-for="project in projectsList" :key="project.name" :label="project.name">
               <span>
                 <resource-icon v-if="project.icon" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
                 <project-outlined v-else style="margin-right: 5px" />
                 {{ project.name }}
               </span>
             </a-select-option>
           </a-select>
         </div>
       </template>
     </template>

     <div :span="24" class="action-button">
       <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
       <a-button type="primary" ref="submit" @click="submitData">{{ $t('label.ok') }}</a-button>
     </div>
   </div>
 </template>
 <script>
 import { getAPI, postAPI } from '@/api'
 import ResourceIcon from '@/components/view/ResourceIcon'

 export default {
   name: 'UpdateTemplateIsoPermissions',
   props: {
     resource: {
       type: Object,
       required: true
     }
   },
   components: {
     ResourceIcon
   },
   inject: ['parentFetchData'],
   data () {
     return {
       projects: [],
       accounts: [],
       permittedAccounts: [],
       permittedProjects: [],
       selectedAccounts: [],
       selectedProjects: [],
       selectedAccountsList: '',
       selectedOperation: 'add',
       selectedShareWith: this.$t('label.account'),
       accountError: false,
       projectError: false,
       showAccountSelect: true,
       loading: false,
       isImageTypeIso: false
     }
   },
   computed: {
     accountsList () {
       return this.accounts.length > 0 ? this.accounts
         .filter(a =>
           this.selectedOperation === 'add'
             ? !this.permittedAccounts.includes(a.name)
             : this.permittedAccounts.includes(a.name)
         ) : this.accounts
     },
     projectsList () {
       return this.projects > 0 ? this.projects
         .filter(p =>
           this.selectedOperation === 'add'
             ? !this.permittedProjects.includes(p.id)
             : this.permittedProjects.includes(p.id)
         ) : this.projects
     }
   },
   created () {
     this.isImageTypeIso = this.$route.meta.name === 'iso'
     this.fetchData()
   },
   methods: {
     fetchData () {
       if (this.isImageTypeIso) {
         this.fetchIsoPermissions()
       } else {
         this.fetchTemplatePermissions()
       }
       if (this.selectedShareWith === this.$t('label.account')) {
         this.selectedAccounts = []
         this.fetchAccounts()
       } else {
         this.selectedProjects = []
         this.fetchProjects()
       }
       this.showAccountSelect = this.$store.getters.features.allowuserviewalldomainaccounts || !(this.$store.getters.userInfo.roletype === 'User')
     },
     fetchAccounts () {
       this.loading = true
       getAPI('listAccounts', {
         domainid: this.resource.domainid,
         showicon: true
       }).then(response => {
         this.accounts = response.listaccountsresponse.account.filter(account => account.name !== this.resource.account)
       }).finally(e => {
         this.loading = false
       })
     },
     fetchProjects () {
       getAPI('listProjects', {
         details: 'min',
         showicon: true,
         listall: true
       }).then(response => {
         this.projects = response.listprojectsresponse.project
       }).finally(e => {
         this.loading = false
       })
     },
     fetchTemplatePermissions () {
       this.loading = true
       getAPI('listTemplatePermissions', {
         id: this.resource.id
       }).then(response => {
         const permission = response.listtemplatepermissionsresponse.templatepermission
         if (permission && permission.account) {
           this.permittedAccounts = permission.account
         }
         if (permission && permission.projectids) {
           this.permittedProjects = permission.projectids
         }
       }).finally(e => {
         this.loading = false
       })
     },
     fetchIsoPermissions () {
       this.loading = true
       getAPI('listIsoPermissions', {
         id: this.resource.id
       }).then(response => {
         const permission = response.listtemplatepermissionsresponse.templatepermission
         if (permission && permission.account) {
           this.permittedAccounts = permission.account
         }
         if (permission && permission.projectids) {
           this.permittedProjects = permission.projectids
         }
       }).finally(e => {
         this.loading = false
       })
     },
     handleChange (selectedItems) {
       if (this.selectedOperation === 'add' || this.selectedOperation === 'remove') {
         if (this.selectedShareWith === this.$t('label.account')) {
           this.selectedAccounts = selectedItems
         } else {
           this.selectedProjects = selectedItems
         }
       }
     },
     closeModal () {
       this.$emit('close-action')
     },
     submitData () {
       if (this.loading) return
       let variableKey = ''
       let variableValue = ''
       if (this.selectedShareWith === this.$t('label.account')) {
         variableKey = 'accounts'
         if (this.showAccountSelect) {
           variableValue = this.selectedAccounts.map(account => account).join(',')
         } else {
           variableValue = this.selectedAccountsList
         }
       } else {
         variableKey = 'projectids'
         variableValue = this.projects.filter(p => this.selectedProjects.includes(p.name)).map(p => p.id).join(',')
       }
       this.loading = true
       const apiName = this.isImageTypeIso ? 'updateIsoPermissions' : 'updateTemplatePermissions'
       const resourceType = this.isImageTypeIso ? 'ISO' : 'template'
       postAPI(apiName, {
         [variableKey]: variableValue,
         id: this.resource.id,
         ispublic: this.resource.isPublic,
         isextractable: this.resource.isExtractable,
         featured: this.resource.featured,
         op: this.selectedOperation.toLowerCase()
       }).then(response => {
         this.$notification.success({
           message: `${this.$t('label.success.updated')} ${resourceType} ${this.$t('label.permissions')}`
         })
         this.closeModal()
         this.parentFetchData()
       }).catch(error => {
         this.$notifyError(error)
       }).finally(e => {
         this.loading = false
       })
     }
   }
 }
 </script>
 <style scoped lang="scss">
   .form {
     display: flex;
     flex-direction: column;
     width: 80vw;

     @media (min-width: 700px) {
       width: 500px;
     }

     &__item {
       display: flex;
       flex-direction: column;
       width: 100%;
       margin-bottom: 10px;
     }

     &__label {
       display: flex;
       font-weight: bold;
       margin-bottom: 5px;
     }

   }

   .required {
     margin-right: 2px;
     color: red;
     font-size: 0.7rem;
   }

   .loading {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 3rem;
   }
 </style>
	// 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>
	<div class="form" v-ctrl-enter="submitData">
	<div v-if="loading" class="loading">
	<loading-outlined />
	</div>

	<div class="form__item">
	<p class="form__label">{{ $t('label.operation') }}</p>
	<a-select
	v-model:value="selectedOperation"
	:defaultValue="'add'"
	@change="fetchData"
	v-focus="true"
	showSearch
	optionFilterProp="value"
	:filterOption="(input, option) => {
	return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
	}" >
	<a-select-option :value="'add'">{{ $t('label.add') }}</a-select-option>
	<a-select-option :value="'remove'">{{ $t('label.remove') }}</a-select-option>
	<a-select-option :value="'reset'">{{ $t('label.reset') }}</a-select-option>
	</a-select>
	</div>

	<template v-if="selectedOperation !== 'reset'">
	<div class="form__item">
	<p class="form__label">
	<span class="required">*</span>
	{{ $t('label.sharewith') }}
	</p>
	<a-select
	v-model:value="selectedShareWith"
	:defaultValue="$t('label.account')"
	@change="fetchData"
	showSearch
	optionFilterProp="value"
	:filterOption="(input, option) => {
	return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
	}">
	<a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
	<a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
	</a-select>
	</div>

	<template v-if="selectedShareWith === $t('label.account')">
	<div class="form__item">
	<p class="form__label">
	{{ $t('label.account') }}
	</p>
	<div v-if="showAccountSelect">
	<a-select
	mode="multiple"
	placeholder="Select Accounts"
	v-model:value="selectedAccounts"
	@change="handleChange"
	style="width: 100%"
	showSearch
	optionFilterProp="label"
	:filterOption="(input, option) => {
	return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
	}" >
	<a-select-option v-for="account in accountsList" :key="account.name" :label="account.name">
	<span>
	<resource-icon v-if="account.icon" :image="account.icon.base64image" size="1x" style="margin-right: 5px"/>
	<team-outlined v-else style="margin-right: 5px" />
	{{ account.name }}
	</span>
	</a-select-option>
	</a-select>
	</div>
	<div v-else>
	<a-input v-model:value="selectedAccountsList" :placeholder="$t('label.comma.separated.list.description')"></a-input>
	</div>
	</div>
	</template>

	<template v-else>
	<div class="form__item">
	<p class="form__label">
	{{ $t('label.project') }}
	</p>
	<a-select
	mode="multiple"
	:placeholder="$t('label.select.projects')"
	v-model:value="selectedProjects"
	@change="handleChange"
	style="width: 100%"
	showSearch
	optionFilterProp="label"
	:filterOption="(input, option) => {
	return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
	}" >
	<a-select-option v-for="project in projectsList" :key="project.name" :label="project.name">
	<span>
	<resource-icon v-if="project.icon" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
	<project-outlined v-else style="margin-right: 5px" />
	{{ project.name }}
	</span>
	</a-select-option>
	</a-select>
	</div>
	</template>
	</template>

	<div :span="24" class="action-button">
	<a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
	<a-button type="primary" ref="submit" @click="submitData">{{ $t('label.ok') }}</a-button>
	</div>
	</div>
	</template>
	<script>
	import { getAPI, postAPI } from '@/api'
	import ResourceIcon from '@/components/view/ResourceIcon'

	export default {
	name: 'UpdateTemplateIsoPermissions',
	props: {
	resource: {
	type: Object,
	required: true
	}
	},
	components: {
	ResourceIcon
	},
	inject: ['parentFetchData'],
	data () {
	return {
	projects: [],
	accounts: [],
	permittedAccounts: [],
	permittedProjects: [],
	selectedAccounts: [],
	selectedProjects: [],
	selectedAccountsList: '',
	selectedOperation: 'add',
	selectedShareWith: this.$t('label.account'),
	accountError: false,
	projectError: false,
	showAccountSelect: true,
	loading: false,
	isImageTypeIso: false
	}
	},
	computed: {
	accountsList () {
	return this.accounts.length > 0 ? this.accounts
	.filter(a =>
	this.selectedOperation === 'add'
	? !this.permittedAccounts.includes(a.name)
	: this.permittedAccounts.includes(a.name)
	) : this.accounts
	},
	projectsList () {
	return this.projects > 0 ? this.projects
	.filter(p =>
	this.selectedOperation === 'add'
	? !this.permittedProjects.includes(p.id)
	: this.permittedProjects.includes(p.id)
	) : this.projects
	}
	},
	created () {
	this.isImageTypeIso = this.$route.meta.name === 'iso'
	this.fetchData()
	},
	methods: {
	fetchData () {
	if (this.isImageTypeIso) {
	this.fetchIsoPermissions()
	} else {
	this.fetchTemplatePermissions()
	}
	if (this.selectedShareWith === this.$t('label.account')) {
	this.selectedAccounts = []
	this.fetchAccounts()
	} else {
	this.selectedProjects = []
	this.fetchProjects()
	}
	this.showAccountSelect = this.$store.getters.features.allowuserviewalldomainaccounts \|\| !(this.$store.getters.userInfo.roletype === 'User')
	},
	fetchAccounts () {
	this.loading = true
	getAPI('listAccounts', {
	domainid: this.resource.domainid,
	showicon: true
	}).then(response => {
	this.accounts = response.listaccountsresponse.account.filter(account => account.name !== this.resource.account)
	}).finally(e => {
	this.loading = false
	})
	},
	fetchProjects () {
	getAPI('listProjects', {
	details: 'min',
	showicon: true,
	listall: true
	}).then(response => {
	this.projects = response.listprojectsresponse.project
	}).finally(e => {
	this.loading = false
	})
	},
	fetchTemplatePermissions () {
	this.loading = true
	getAPI('listTemplatePermissions', {
	id: this.resource.id
	}).then(response => {
	const permission = response.listtemplatepermissionsresponse.templatepermission
	if (permission && permission.account) {
	this.permittedAccounts = permission.account
	}
	if (permission && permission.projectids) {
	this.permittedProjects = permission.projectids
	}
	}).finally(e => {
	this.loading = false
	})
	},
	fetchIsoPermissions () {
	this.loading = true
	getAPI('listIsoPermissions', {
	id: this.resource.id
	}).then(response => {
	const permission = response.listtemplatepermissionsresponse.templatepermission
	if (permission && permission.account) {
	this.permittedAccounts = permission.account
	}
	if (permission && permission.projectids) {
	this.permittedProjects = permission.projectids
	}
	}).finally(e => {
	this.loading = false
	})
	},
	handleChange (selectedItems) {
	if (this.selectedOperation === 'add' \|\| this.selectedOperation === 'remove') {
	if (this.selectedShareWith === this.$t('label.account')) {
	this.selectedAccounts = selectedItems
	} else {
	this.selectedProjects = selectedItems
	}
	}
	},
	closeModal () {
	this.$emit('close-action')
	},
	submitData () {
	if (this.loading) return
	let variableKey = ''
	let variableValue = ''
	if (this.selectedShareWith === this.$t('label.account')) {
	variableKey = 'accounts'
	if (this.showAccountSelect) {
	variableValue = this.selectedAccounts.map(account => account).join(',')
	} else {
	variableValue = this.selectedAccountsList
	}
	} else {
	variableKey = 'projectids'
	variableValue = this.projects.filter(p => this.selectedProjects.includes(p.name)).map(p => p.id).join(',')
	}
	this.loading = true
	const apiName = this.isImageTypeIso ? 'updateIsoPermissions' : 'updateTemplatePermissions'
	const resourceType = this.isImageTypeIso ? 'ISO' : 'template'
	postAPI(apiName, {
	[variableKey]: variableValue,
	id: this.resource.id,
	ispublic: this.resource.isPublic,
	isextractable: this.resource.isExtractable,
	featured: this.resource.featured,
	op: this.selectedOperation.toLowerCase()
	}).then(response => {
	this.$notification.success({
	message: `${this.$t('label.success.updated')} ${resourceType} ${this.$t('label.permissions')}`
	})
	this.closeModal()
	this.parentFetchData()
	}).catch(error => {
	this.$notifyError(error)
	}).finally(e => {
	this.loading = false
	})
	}
	}
	}
	</script>
	<style scoped lang="scss">
	.form {
	display: flex;
	flex-direction: column;
	width: 80vw;

	@media (min-width: 700px) {
	width: 500px;
	}

	&__item {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 10px;
	}

	&__label {
	display: flex;
	font-weight: bold;
	margin-bottom: 5px;
	}

	}

	.required {
	margin-right: 2px;
	color: red;
	font-size: 0.7rem;
	}

	.loading {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	}
	</style>