|
| 1 | +// Licensed to the Apache Software Foundation (ASF) under one |
| 2 | +// or more contributor license agreements. See the NOTICE file |
| 3 | +// distributed with this work for additional information |
| 4 | +// regarding copyright ownership. The ASF licenses this file |
| 5 | +// to you under the Apache License, Version 2.0 (the |
| 6 | +// "License"); you may not use this file except in compliance |
| 7 | +// with the License. You may obtain a copy of the License at |
| 8 | +// |
| 9 | +// http://www.apache.org/licenses/LICENSE-2.0 |
| 10 | +// |
| 11 | +// Unless required by applicable law or agreed to in writing, |
| 12 | +// software distributed under the License is distributed on an |
| 13 | +// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| 14 | +// KIND, either express or implied. See the License for the |
| 15 | +// specific language governing permissions and limitations |
| 16 | +// under the License. |
| 17 | + |
| 18 | +<template> |
| 19 | + <a-spin :spinning="loading"> |
| 20 | + <div v-show="!showAddDetail"> |
| 21 | + <a-button type="dashed" style="width: 100%" icon="plus" @click="showAddDetail = true">Add Setting</a-button> |
| 22 | + </div> |
| 23 | + <div v-show="showAddDetail"> |
| 24 | + <a-auto-complete |
| 25 | + style="width: 100%" |
| 26 | + :value="newKey" |
| 27 | + :dataSource="Object.keys(detailOptions)" |
| 28 | + placeholder="Name" |
| 29 | + @change="e => onAddInputChange(e, 'newKey')" /> |
| 30 | + <a-auto-complete |
| 31 | + style="width: 100%" |
| 32 | + :value="newValue" |
| 33 | + :dataSource="detailOptions[newKey]" |
| 34 | + placeholder="Value" |
| 35 | + @change="e => onAddInputChange(e, 'newValue')" /> |
| 36 | + <a-button type="dashed" style="width: 50%" icon="close" @click="showAddDetail = false">Cancel</a-button> |
| 37 | + <a-button type="primary" style="width: 50%" icon="plus" @click="addDetail">Add Setting</a-button> |
| 38 | + </div> |
| 39 | + <a-list size="large"> |
| 40 | + <a-list-item :key="index" v-for="(item, index) in details"> |
| 41 | + <a-list-item-meta> |
| 42 | + <span slot="title">{{ item.name }}</span> |
| 43 | + <span slot="description" style="word-break: break-all"> |
| 44 | + <span v-if="item.edit" style="display: flex"> |
| 45 | + <a-auto-complete |
| 46 | + style="width: 100%" |
| 47 | + :value="item.value" |
| 48 | + :dataSource="detailOptions[item.name]" |
| 49 | + @change="val => handleInputChange(val, index)" |
| 50 | + @pressEnter="e => updateDetail(index)" /> |
| 51 | + <a-button shape="circle" size="small" @click="updateDetail(index)" style="margin: 2px"> |
| 52 | + <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" style="font-size: 24px"/> |
| 53 | + </a-button> |
| 54 | + <a-button shape="circle" size="small" @click="hideEditDetail(index)" style="margin: 2px"> |
| 55 | + <a-icon type="close-circle" theme="twoTone" twoToneColor="#eb2f96" style="font-size: 24px"/> |
| 56 | + </a-button> |
| 57 | + </span> |
| 58 | + <span v-else>{{ item.value }}</span> |
| 59 | + </span> |
| 60 | + </a-list-item-meta> |
| 61 | + <div slot="actions"> |
| 62 | + <a-button shape="circle" @click="showEditDetail(index)"> |
| 63 | + <a-icon type="edit" /> |
| 64 | + </a-button> |
| 65 | + </div> |
| 66 | + <div slot="actions"> |
| 67 | + <a-popconfirm |
| 68 | + title="Delete setting?" |
| 69 | + @confirm="deleteDetail(index)" |
| 70 | + okText="Yes" |
| 71 | + cancelText="No" |
| 72 | + placement="left" |
| 73 | + > |
| 74 | + <a-button shape="circle"> |
| 75 | + <a-icon type="delete" theme="twoTone" twoToneColor="#f5222d" /> |
| 76 | + </a-button> |
| 77 | + </a-popconfirm> |
| 78 | + </div> |
| 79 | + </a-list-item> |
| 80 | + </a-list> |
| 81 | + </a-spin> |
| 82 | +</template> |
| 83 | + |
| 84 | +<script> |
| 85 | +import { api } from '@/api' |
| 86 | +
|
| 87 | +export default { |
| 88 | + name: 'DetailSettings', |
| 89 | + props: { |
| 90 | + resource: { |
| 91 | + type: Object, |
| 92 | + required: true |
| 93 | + } |
| 94 | + }, |
| 95 | + data () { |
| 96 | + return { |
| 97 | + details: [], |
| 98 | + detailOptions: {}, |
| 99 | + showAddDetail: false, |
| 100 | + newKey: '', |
| 101 | + newValue: '', |
| 102 | + loading: false, |
| 103 | + resourceType: 'UserVm' |
| 104 | + } |
| 105 | + }, |
| 106 | + watch: { |
| 107 | + resource: function (newItem, oldItem) { |
| 108 | + this.updateResource(newItem) |
| 109 | + } |
| 110 | + }, |
| 111 | + mounted () { |
| 112 | + this.updateResource(this.resource) |
| 113 | + }, |
| 114 | + methods: { |
| 115 | + updateResource (resource) { |
| 116 | + if (!resource) { |
| 117 | + return |
| 118 | + } |
| 119 | + this.resource = resource |
| 120 | + this.resourceType = this.$route.meta.resourceType |
| 121 | + if (!resource.details) { |
| 122 | + return |
| 123 | + } |
| 124 | + this.details = Object.keys(this.resource.details).map(k => { |
| 125 | + return { name: k, value: this.resource.details[k], edit: false } |
| 126 | + }) |
| 127 | + api('listDetailOptions', { resourcetype: this.resourceType, resourceid: this.resource.id }).then(json => { |
| 128 | + this.detailOptions = json.listdetailoptionsresponse.detailoptions.details |
| 129 | + }) |
| 130 | + }, |
| 131 | + showEditDetail (index) { |
| 132 | + this.details[index].edit = true |
| 133 | + this.details[index].originalValue = this.details[index].value |
| 134 | + this.$set(this.details, index, this.details[index]) |
| 135 | + }, |
| 136 | + hideEditDetail (index) { |
| 137 | + this.details[index].edit = false |
| 138 | + this.details[index].value = this.details[index].originalValue |
| 139 | + this.$set(this.details, index, this.details[index]) |
| 140 | + }, |
| 141 | + handleInputChange (val, index) { |
| 142 | + this.details[index].value = val |
| 143 | + this.$set(this.details, index, this.details[index]) |
| 144 | + }, |
| 145 | + onAddInputChange (val, obj) { |
| 146 | + this[obj] = val |
| 147 | + }, |
| 148 | + runApi () { |
| 149 | + var apiName = '' |
| 150 | + if (this.resourceType === 'UserVm') { |
| 151 | + apiName = 'updateVirtualMachine' |
| 152 | + } else if (this.resourceType === 'Template') { |
| 153 | + apiName = 'updateTemplate' |
| 154 | + } |
| 155 | + if (!(apiName in this.$store.getters.apis)) { |
| 156 | + this.$notification.error({ |
| 157 | + message: 'Failed to execute API: ' + apiName, |
| 158 | + description: 'User is not permitted to use the API' |
| 159 | + }) |
| 160 | + return |
| 161 | + } |
| 162 | +
|
| 163 | + const params = { id: this.resource.id } |
| 164 | + this.details.forEach(function (item, index) { |
| 165 | + params['details[0].' + item.name] = item.value |
| 166 | + }) |
| 167 | + this.loading = true |
| 168 | + api(apiName, params).then(json => { |
| 169 | + var details = {} |
| 170 | + if (this.resourceType === 'UserVm') { |
| 171 | + details = json.updatevirtualmachineresponse.virtualmachine.details |
| 172 | + } else if (this.resourceType === 'Template') { |
| 173 | + details = json.updatetemplateresponse.template.details |
| 174 | + } |
| 175 | + this.details = Object.keys(details).map(k => { |
| 176 | + return { name: k, value: details[k], edit: false } |
| 177 | + }) |
| 178 | + }).catch(error => { |
| 179 | + this.$notification.error({ |
| 180 | + message: 'Failed to add setting', |
| 181 | + description: error.response.headers['x-description'] |
| 182 | + }) |
| 183 | + }).finally(f => { |
| 184 | + this.loading = false |
| 185 | + this.showAddDetail = false |
| 186 | + this.newKey = '' |
| 187 | + this.newValue = '' |
| 188 | + }) |
| 189 | + }, |
| 190 | + addDetail () { |
| 191 | + this.details.push({ name: this.newKey, value: this.newValue }) |
| 192 | + this.runApi() |
| 193 | + }, |
| 194 | + updateDetail (index) { |
| 195 | + this.runApi() |
| 196 | + }, |
| 197 | + deleteDetail (index) { |
| 198 | + this.details.splice(index, 1) |
| 199 | + this.runApi() |
| 200 | + } |
| 201 | + } |
| 202 | +} |
| 203 | +</script> |
0 commit comments