feature: add array property editor (#167)

* feat: add array property editor

* fix some problem

* clean useless codes

Author: bzp2010

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,19 +121,41 @@
             />
           </el-select>
 
+          <!-- string property -->
           <el-input
             v-if="schema.properties[key].type === 'string' && !schema.properties[key].hasOwnProperty('enum')"
             v-model="data[key]"
             :placeholder="key"
             @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>

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!'
   }
 }

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: '你的数据将在点击保存按钮后被保存！'
   }
 }