[incubator-apisix-dashboard] 01/01: fix oneOf prop

[juzhiyuan]

This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch fix-plugin-oneof
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git

commit 58d60f3802b7ab3a087fbbb4a4c2994698b4da98
Author: juzhiyuan <jjzhiy...@gmail.com>
AuthorDate: Wed Oct 30 15:43:32 2019 +0800

    fix oneOf prop
---
 src/components/PluginDialog/index.vue | 94 ++++++++++++++++++++++++++++++++++-
 src/lang/en.ts                        |  3 +-
 src/lang/zh.ts                        |  3 +-
 3 files changed, 96 insertions(+), 4 deletions(-)

diff --git a/src/components/PluginDialog/index.vue 
b/src/components/PluginDialog/index.vue
index d3b4b2e..2a3f466 100644
--- a/src/components/PluginDialog/index.vue
+++ b/src/components/PluginDialog/index.vue
@@ -21,9 +21,68 @@
   <div class="plugin-dialog">
     <el-dialog
       :title="'Plugin ' + name + ' Edit'"
-      :visible.sync="show"
+      :visible.sync="showDialog"
     >
       <el-form
+        v-if="schema.oneOf"
+        ref="form"
+        :model="data"
+        :rules="rules"
+        :show-message="false"
+        class="oneof-plugin-wrapper"
+      >
+        <el-form-item
+          label="Option"
+          :rules="{
+            required: true, trigger: 'blur'
+          }"
+        >
+          <el-radio-group
+            v-model="data['radioKey']"
+            @change="handleOneOfChange"
+          >
+            <el-radio
+              v-for="(value, key) in schema.properties"
+              :key="key"
+              :label="key"
+            >
+              {{ key }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item
+          v-for="(value, index) in data['values']"
+          :key="index"
+          :label="'Value' + (index + 1)"
+          :rules="{
+            required: true, trigger: 'blur'
+          }"
+        >
+          {{ data.values.length }}
+          <el-input v-model="data['values'][index]" />
+          <el-button
+            v-if="data.values.length !== 1"
+            class="remove-value-btn"
+            type="danger"
+            @click.prevent="removeOneOfPropValue(index)"
+          >
+            Remove
+          </el-button>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button
+            :disabled="oneOfPropHasEmptyValue"
+            @click="addValueInput"
+          >
+            {{ $t('button.addValue') }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-form
+        v-if="!schema.oneOf"
         ref="form"
         :model="data"
         :rules="rules"
@@ -80,7 +139,7 @@
         </el-button>
         <el-button
           type="primary"
-          :disabled="!isDataChanged"
+          :disabled="!isDataChanged && oneOfPropHasEmptyValue"
           @click="onSave"
         >
           Confirm
@@ -111,6 +170,7 @@ export default class extends Vue {
   private rules: any = {}
   private data: any = {}
   private isDataChanged: boolean = false
+  private showDialog: boolean = false
 
   @Watch('show')
   private onShowChange(value: boolean) {
@@ -118,6 +178,7 @@ export default class extends Vue {
     if (value) {
       this.getschema(this.name)
     }
+    this.showDialog = value
   }
 
   private resetPlugin() {
@@ -186,6 +247,13 @@ export default class extends Vue {
 
       this.isDataChanged = true
     }
+
+    if (this.schema.oneOf) {
+      this.data = {
+        radioKey: Object.keys(this.schema.properties)[0],
+        values: ['']
+      }
+    }
   }
 
   private onCancel() {
@@ -208,6 +276,22 @@ export default class extends Vue {
     this.data[key] = value
     this.isDataChanged = true
   }
+
+  private handleOneOfChange(e: any) {
+    this.data.values = []
+  }
+
+  get oneOfPropHasEmptyValue() {
+    return this.data.values ? this.data.values.find((value: string) => value 
=== '') : true
+  }
+
+  private addValueInput() {
+    this.data.values = this.data.values.concat([''])
+  }
+
+  private removeOneOfPropValue(index: number) {
+    this.data.values = this.data.values.filter((item: any, _index: number) => 
index !== _index)
+  }
 }
 </script>
 
@@ -222,5 +306,11 @@ export default class extends Vue {
       }
     }
   }
+
+  .oneof-plugin-wrapper {
+    .remove-value-btn {
+      margin-left: 10px;
+    }
+  }
 }
 </style>
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 4bd4f93..a0b68f4 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -156,6 +156,7 @@ export default {
     cancel: 'Cancel',
     add_plugin: 'Add Plugin',
     add_node: 'Add Node',
-    delete: 'Delete'
+    delete: 'Delete',
+    addValue: 'Add Value'
   }
 }
diff --git a/src/lang/zh.ts b/src/lang/zh.ts
index 1ecb0f4..35d347b 100644
--- a/src/lang/zh.ts
+++ b/src/lang/zh.ts
@@ -156,6 +156,7 @@ export default {
     cancel: '取消',
     add_plugin: '添加 Plugin',
     add_node: '添加 Node',
-    delete: '删除'
+    delete: '删除',
+    addValue: '添加值'
   }
 }