This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new fbb6315 feature: add array property editor (#167)
fbb6315 is described below
commit fbb631597668ee4f43fb1c94d8014766595d11d0
Author: bzp2010 <[email protected]>
AuthorDate: Tue Apr 7 09:29:52 2020 +0800
feature: add array property editor (#167)
* feat: add array property editor
* fix some problem
* clean useless codes
---
src/components/PluginDialog/index.vue | 88 +++++++++++++++++++++++++++++++++--
src/lang/en.ts | 5 ++
src/lang/zh.ts | 5 ++
3 files changed, 93 insertions(+), 5 deletions(-)
diff --git a/src/components/PluginDialog/index.vue
b/src/components/PluginDialog/index.vue
index a1a5f4b..0456266 100644
--- a/src/components/PluginDialog/index.vue
+++ b/src/components/PluginDialog/index.vue
@@ -95,6 +95,7 @@
:prop="key"
>
<!-- 分情况讨论 -->
+ <!-- number property -->
<el-input-number
v-if="schema.properties[key].type === 'integer' ||
schema.properties[key].type === 'number'"
v-model="data[key]"
@@ -104,11 +105,12 @@
@change="onPropertyChange(key, $event)"
/>
+ <!-- enum property -->
<el-select
v-if="schema.properties[key].hasOwnProperty('enum')"
v-model="data[key]"
:clearable="true"
- :placeholder=""Select a " + key"
+ :placeholder="`Select a ${key}`"
@change="onPropertyChange(key, $event)"
>
<el-option
@@ -119,6 +121,7 @@
/>
</el-select>
+ <!-- string property -->
<el-input
v-if="schema.properties[key].type === 'string' &&
!schema.properties[key].hasOwnProperty('enum')"
v-model="data[key]"
@@ -126,12 +129,33 @@
@input="onPropertyChange(key, $event)"
/>
+ <!-- boolean property -->
<el-switch
v-if="schema.properties[key].type === 'boolean' &&
!schema.properties[key].hasOwnProperty('enum')"
v-model="data[key]"
active-color="#13ce66"
inactive-color="#ff4949"
/>
+
+ <!-- array property -->
+ <div
+ v-if="schema.properties[key].type === 'array'"
+ class="array-input-container"
+ >
+ <el-input
+ v-for="(arrayIndex) in arrayPropertiesLength[key]"
+ :key="arrayIndex"
+ v-model="data[key][arrayIndex]"
+ :placeholder="`${key} [${arrayIndex}]`"
+ @input="isDataChanged = true"
+ />
+
+ <el-button
+ @click="addArrayItem(key)"
+ >
+ {{ $t('button.addValue') }}
+ </el-button>
+ </div>
</el-form-item>
</el-form>
<span
@@ -141,14 +165,14 @@
<el-button
@click="onCancel"
>
- Cancel
+ {{ $t('button.cancel') }}
</el-button>
<el-button
type="primary"
:disabled="!isDataChanged && oneOfPropHasEmptyValue"
@click="onSave"
>
- Confirm
+ {{ $t('button.confirm') }}
</el-button>
</span>
</el-dialog>
@@ -177,6 +201,7 @@ export default class extends Vue {
private data: any = {}
private isDataChanged: boolean = false
private showDialog: boolean = false
+ private arrayPropertiesLength = {}
@Watch('show')
private onShowChange(value: boolean) {
@@ -242,8 +267,34 @@ export default class extends Vue {
this.rules = rules
+ // Generate initial data and merge current data
+ let schemaKeys = {}
+ for (let key in schema.properties) {
+ if (schema.properties[key].default) {
+ schemaKeys[key] = schema.properties[key].default
+ continue
+ }
+
+ switch (schema.properties[key].type) {
+ case 'array':
+ schemaKeys[key] = []
+ this.arrayPropertiesLength[key] = [...new Array(this.pluginData[key]
? this.pluginData[key].length : schema.properties[key].minItems).keys()]
+ break
+ case 'object':
+ schemaKeys[key] = {}
+ break
+ case 'boolean':
+ schemaKeys[key] = false
+ break
+ default:
+ schemaKeys[key] = ''
+ }
+ }
+
if (this.pluginData) {
- this.data = Object.assign({}, this.pluginData)
+ this.data = Object.assign(schemaKeys, this.pluginData)
+ } else {
+ this.data = schemaKeys
}
if (this.name === 'key-auth' && !this.pluginData) {
@@ -284,13 +335,26 @@ export default class extends Vue {
if (valid) {
this.data = this.processOneOfProp(this.data)
this.$emit('save', this.name, this.data)
- this.$message.warning('Your data will be saved after you click the
Save button')
+ this.$message.warning(`${this.$t('message.clickSaveButton')}`)
} else {
return false
}
})
}
+ /**
+ * Add item to array property
+ * @param key
+ */
+ private addArrayItem(key: any) {
+ if (this.arrayPropertiesLength[key].length <
this.schema.properties[key].maxItems) {
+
this.arrayPropertiesLength[key].push(this.arrayPropertiesLength[key].length)
+ this.$forceUpdate()
+ } else {
+ this.$message.warning(`${this.$t('message.cannotAddMoreItems')}`)
+ }
+ }
+
private onPropertyChange(key: any, value: any) {
this.data[key] = value
this.isDataChanged = true
@@ -314,6 +378,15 @@ export default class extends Vue {
private processOneOfProp(data: any) {
if (!this.schema.oneOf) {
+ // remove empty field
+ for (let key in data) {
+ if (data[key] === '') {
+ delete data[key]
+ }
+ if (typeof data[key] === 'object' && Object.keys(data[key]).length ===
0) {
+ delete data[key]
+ }
+ }
return data
}
@@ -341,5 +414,10 @@ export default class extends Vue {
margin-left: 10px;
}
}
+
+ .array-input-container > * {
+ display: flex;
+ margin-top: 5px;
+ }
}
</style>
diff --git a/src/lang/en.ts b/src/lang/en.ts
index c82338e..58623f7 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -64,6 +64,7 @@ export default {
},
button: {
save: 'Save',
+ confirm: 'Confirm',
cancel: 'Cancel',
add_plugin: 'Add Plugin',
add_node: 'Add Node',
@@ -85,5 +86,9 @@ export default {
},
keyTip: 'You can edit and input any value here,and press Enter to
confirm.',
hashOnTip: 'Select a hash on.'
+ },
+ message: {
+ cannotAddMoreItems: 'You cannot add more item!',
+ clickSaveButton: 'Your data will be saved after you click the Save button!'
}
}
diff --git a/src/lang/zh.ts b/src/lang/zh.ts
index b35ad59..5eb56c4 100644
--- a/src/lang/zh.ts
+++ b/src/lang/zh.ts
@@ -72,6 +72,7 @@ export default {
},
button: {
save: '保存',
+ confirm: '确认',
cancel: '取消',
add_plugin: '添加 Plugin',
add_node: '添加 Node',
@@ -93,5 +94,9 @@ export default {
},
keyTip: '你可以编辑并输入任何值,输入值后回车确认。',
hashOnTip: '选择 chash 参数来源。'
+ },
+ message: {
+ cannotAddMoreItems: '不能添加更多项了！',
+ clickSaveButton: '你的数据将在点击保存按钮后被保存！'
}
}
