From e9367f45d6e2d864ee32a4a09e8b6ec09915eaa9 Mon Sep 17 00:00:00 2001
From: bzp2010 <bzp20000818@gmail.com>
Date: Mon, 6 Apr 2020 11:41:03 +0800
Subject: [PATCH 1/3] feat: add array property editor

---
 src/components/PluginDialog/index.vue | 74 ++++++++++++++++++++++++++-
 src/lang/en.ts                        |  3 ++
 src/lang/zh.ts                        |  3 ++
 3 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/src/components/PluginDialog/index.vue b/src/components/PluginDialog/index.vue
index a1a5f4be03..bc9b990134 100644
--- a/src/components/PluginDialog/index.vue
+++ b/src/components/PluginDialog/index.vue
@@ -132,6 +132,26 @@
             active-color="#13ce66"
             inactive-color="#ff4949"
           />
+
+          <!-- array property -->
+          <div v-if="schema.properties[key].type === 'array'">
+            <!-- @input="onPropertyChange(key, $event)" -->
+            <el-input
+              v-for="(arrayIndex) in arrayPropertiesLength[key]"
+              :key="arrayIndex"
+              v-model="data[key][arrayIndex]"
+              :placeholder="key + ' [' + (arrayIndex) + ']'"
+              style="margin-top:5px;"
+              @input="isDataChanged = true"
+            />
+
+            <el-button
+              style="margin-top:5px;"
+              @click="addArrayItem(key)"
+            >
+              {{ $t('button.addValue') }}
+            </el-button>
+          </div>
         </el-form-item>
       </el-form>
       <span
@@ -177,6 +197,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 +263,37 @@ 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) {
@@ -291,6 +341,19 @@ export default class extends Vue {
     })
   }
 
+  /**
+   * 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.cannotAddMore')}`)
+    }
+  }
+
   private onPropertyChange(key: any, value: any) {
     this.data[key] = value
     this.isDataChanged = true
@@ -314,6 +377,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
     }
 
diff --git a/src/lang/en.ts b/src/lang/en.ts
index c82338e987..59401336e6 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -85,5 +85,8 @@ export default {
     },
     keyTip: 'You can edit and input any value here,and press Enter to confirm.',
     hashOnTip: 'Select a hash on.'
+  },
+  message: {
+    cannotAddMore: 'You cannot add more item!'
   }
 }
diff --git a/src/lang/zh.ts b/src/lang/zh.ts
index b35ad59682..33dccc91b8 100644
--- a/src/lang/zh.ts
+++ b/src/lang/zh.ts
@@ -93,5 +93,8 @@ export default {
     },
     keyTip: '你可以编辑并输入任何值,输入值后回车确认。',
     hashOnTip: '选择 chash 参数来源。'
+  },
+  message: {
+    cannotAddMore: '不能添加更多项了！'
   }
 }

From 003422a420814886b6eceed28a67ae6ba5727754 Mon Sep 17 00:00:00 2001
From: bzp2010 <bzp20000818@gmail.com>
Date: Mon, 6 Apr 2020 19:04:12 +0800
Subject: [PATCH 2/3] fix some problem

---
 src/components/PluginDialog/index.vue | 29 ++++++++++++++++++---------
 src/lang/en.ts                        |  4 +++-
 src/lang/zh.ts                        |  4 +++-
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/PluginDialog/index.vue b/src/components/PluginDialog/index.vue
index bc9b990134..40a2b1ffea 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="&quot;Select a &quot; + 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,6 +129,7 @@
             @input="onPropertyChange(key, $event)"
           />
 
+          <!-- boolean property -->
           <el-switch
             v-if="schema.properties[key].type === 'boolean' && !schema.properties[key].hasOwnProperty('enum')"
             v-model="data[key]"
@@ -134,19 +138,19 @@
           />
 
           <!-- array property -->
-          <div v-if="schema.properties[key].type === 'array'">
-            <!-- @input="onPropertyChange(key, $event)" -->
+          <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) + ']'"
-              style="margin-top:5px;"
+              :placeholder="`${key} [${arrayIndex}]`"
               @input="isDataChanged = true"
             />
 
             <el-button
-              style="margin-top:5px;"
               @click="addArrayItem(key)"
             >
               {{ $t('button.addValue') }}
@@ -161,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>
@@ -334,7 +338,7 @@ 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
       }
@@ -350,7 +354,7 @@ export default class extends Vue {
       this.arrayPropertiesLength[key].push(this.arrayPropertiesLength[key].length)
       this.$forceUpdate()
     } else {
-      this.$message.warning(`${this.$t('message.cannotAddMore')}`)
+      this.$message.warning(`${this.$t('message.cannotAddMoreItems')}`)
     }
   }
 
@@ -413,5 +417,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 59401336e6..58623f7438 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',
@@ -87,6 +88,7 @@ export default {
     hashOnTip: 'Select a hash on.'
   },
   message: {
-    cannotAddMore: 'You cannot add more item!'
+    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 33dccc91b8..5eb56c4db9 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',
@@ -95,6 +96,7 @@ export default {
     hashOnTip: '选择 chash 参数来源。'
   },
   message: {
-    cannotAddMore: '不能添加更多项了！'
+    cannotAddMoreItems: '不能添加更多项了！',
+    clickSaveButton: '你的数据将在点击保存按钮后被保存！'
   }
 }

From 17813de87c24e7f906790e009db076cea7a4a532 Mon Sep 17 00:00:00 2001
From: bzp2010 <bzp20000818@gmail.com>
Date: Mon, 6 Apr 2020 21:25:16 +0800
Subject: [PATCH 3/3] clean useless codes

---
 src/components/PluginDialog/index.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/PluginDialog/index.vue b/src/components/PluginDialog/index.vue
index 40a2b1ffea..045626605b 100644
--- a/src/components/PluginDialog/index.vue
+++ b/src/components/PluginDialog/index.vue
@@ -280,15 +280,12 @@ export default class extends Vue {
           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] = ''
       }