From ed810a80d307225f504c664cee9c89834255c2a8 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 16 Feb 2021 10:04:55 +0900
Subject: [PATCH] Add object field for custom rest request

---
 .../settings/ConfigCreationForm.vue           |  10 +-
 .../containers/settings/ObjectField.vue       | 202 ++++++++++++++++++
 frontend/models/config/config-item-list.ts    |   7 +-
 frontend/models/config/config-template.ts     |   8 +
 4 files changed, 225 insertions(+), 2 deletions(-)
 create mode 100644 frontend/components/containers/settings/ObjectField.vue

diff --git a/frontend/components/containers/settings/ConfigCreationForm.vue b/frontend/components/containers/settings/ConfigCreationForm.vue
index fe922138..f64a151b 100644
--- a/frontend/components/containers/settings/ConfigCreationForm.vue
+++ b/frontend/components/containers/settings/ConfigCreationForm.vue
@@ -64,6 +64,12 @@
               outlined
               :key="item.name"
             />
+            <object-field
+              v-if="item.type === 'objectField'"
+              v-model="item.value"
+              :title="item.name"
+              :key="item.name"
+            />
           </template>
 
           <h4 class="text-h6">Set mapping template</h4>
@@ -147,10 +153,12 @@ import { ConfigTemplateItem } from '@/models/config/config-template'
 import { ConfigItem } from '@/models/config/config-item-list'
 import { StepCounter } from '@/models/stepper'
 import LabelMapping from '@/components/containers/settings/LabelMapping.vue'
+import ObjectField from '@/components/containers/settings/ObjectField.vue'
 
 export default Vue.extend({
   components: {
-    LabelMapping
+    LabelMapping,
+    ObjectField
   },
 
   data() {
diff --git a/frontend/components/containers/settings/ObjectField.vue b/frontend/components/containers/settings/ObjectField.vue
new file mode 100644
index 00000000..3df5d2b2
--- /dev/null
+++ b/frontend/components/containers/settings/ObjectField.vue
@@ -0,0 +1,202 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="value"
+  >
+    <template v-slot:top>
+      <v-toolbar flat>
+        <v-toolbar-title class="text-capitalize">
+          {{ title }}
+        </v-toolbar-title>
+        <v-spacer />
+        <v-dialog
+          v-model="dialog"
+          max-width="800px"
+        >
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              color="primary"
+              dark
+              class="text-none"
+              v-bind="attrs"
+              v-on="on"
+            >
+              Add
+            </v-btn>
+          </template>
+          <v-card>
+            <v-card-title>
+              <span class="headline">Add a new field</span>
+            </v-card-title>
+
+            <v-card-text>
+              <v-container>
+                <v-form
+                  ref="form"
+                  v-model="valid"
+                >
+                  <v-row>
+                    <v-col
+                      cols="12"
+                      sm="12"
+                      class="pa-0"
+                    >
+                      <v-text-field
+                        v-model="editedItem.key"
+                        label="Key"
+                        outlined
+                      />
+                    </v-col>
+                    <v-col
+                      cols="12"
+                      sm="12"
+                      class="pa-0"
+                    >
+                      <v-text-field
+                        v-model="editedItem.value"
+                        label="Value"
+                        outlined
+                      />
+                    </v-col>
+                  </v-row>
+                </v-form>
+              </v-container>
+            </v-card-text>
+
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                color="blue darken-1"
+                class="text-capitalize"
+                text
+                @click="close"
+              >
+                Cancel
+              </v-btn>
+              <v-btn
+                :disabled="!valid"
+                color="blue darken-1"
+                class="text-capitalize"
+                text
+                @click="save"
+              >
+                Save
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-toolbar>
+    </template>
+    <template v-slot:[`item.actions`]="{ item }">
+      <v-icon
+        small
+        class="mr-2"
+        @click="editItem(item)"
+      >
+        mdi-pencil
+      </v-icon>
+      <v-icon
+        small
+        @click="deleteItem(item)"
+      >
+        mdi-delete
+      </v-icon>
+    </template>
+  </v-data-table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data() {
+    return {
+      headers: [
+        {
+          text: 'Key',
+          align: 'left',
+          value: 'key',
+          sortable: false
+        },
+        {
+          text: 'Value',
+          align: 'left',
+          value: 'value',
+          sortable: false
+        },
+        {
+          text: 'Actions',
+          value: 'actions',
+          sortable: false
+        }
+      ],
+      dialog: false,
+      valid: false,
+      editedIndex: -1,
+      editedItem: {
+        'key': '',
+        'value': ''
+      },
+      defaultItem: {
+        'key': '',
+        'value': ''
+      },
+      items: [] as string[],
+    }
+  },
+
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    title: {
+      type: String,
+      default: '',
+      required: true
+    }
+  },
+
+  methods: {
+    editItem(item: {'key': string, 'value': string}) {
+      this.editedIndex = this.value.indexOf(item)
+      this.editedItem = Object.assign({}, item)
+      this.dialog = true
+    },
+
+    deleteItem(item: {'key': string, 'value': string}) {
+      this.editedIndex = this.value.indexOf(item)
+      this.editedItem = Object.assign({}, item)
+      const items = Object.assign([], this.value)
+      items.splice(this.editedIndex, 1)
+      this.$emit('input', items)
+    },
+
+    close() {
+      this.dialog = false
+      this.$nextTick(() => {
+        this.editedItem = Object.assign({}, this.defaultItem)
+        this.editedIndex = -1
+      })
+    },
+
+    save() {
+      const items = Object.assign([], this.value)
+      if (this.editedIndex > -1) {
+        Object.assign(items[this.editedIndex], this.editedItem)
+      } else {
+        items.push(this.editedItem)
+      }
+      this.close()
+      this.$emit('input', items)
+    }
+  }
+})
+</script>
+
+<style scoped>
+/deep/ .v-toolbar__content {
+  padding: 0px !important;
+}
+</style>
diff --git a/frontend/models/config/config-item-list.ts b/frontend/models/config/config-item-list.ts
index 9e2cdaf9..6755a595 100644
--- a/frontend/models/config/config-item-list.ts
+++ b/frontend/models/config/config-item-list.ts
@@ -36,7 +36,12 @@ export class ConfigItem {
     }
   ): ConfigItem {
     const mapping = labelMapping.reduce((a, x) => ({...a, [x.from]: x.to}), {})
-    const attributes = modelAttrs.reduce((a, x) => ({...a, [x.name]: x.value}), {})
+    const attributes: {[key: string]: any} = modelAttrs.reduce((a, x) => ({...a, [x.name]: x.value}), {})
+    for (const [key, value] of Object.entries(attributes)) {
+      if (Array.isArray(value)) {
+        attributes[key] = value.reduce((a, x) => ({...a, [x.key]: x.value}), {})
+      }
+    }
     return new ConfigItem(99999, modelName, attributes, template, mapping)
   }
 
diff --git a/frontend/models/config/config-template.ts b/frontend/models/config/config-template.ts
index 1f18fa5b..7b2afe99 100644
--- a/frontend/models/config/config-template.ts
+++ b/frontend/models/config/config-template.ts
@@ -43,6 +43,14 @@ export class ConfigTemplateItem {
             )
           }
         )
+      } else if ('type' in value && value.type === 'object') {
+        response.push(
+          {
+            name: key,
+            type: 'objectField',
+            value: []
+          }
+        )
       }
     }
     return response