From fd7b02767fd448d3fed6fe24b9c709169c16e219 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 3 Nov 2019 20:37:56 +0300
Subject: [PATCH] Extract Inputs into separate component

---
 src/views/settings/components/Inputs.vue  | 122 ++++++++++++++++++++++
 src/views/settings/components/Setting.vue |  64 ++++--------
 2 files changed, 144 insertions(+), 42 deletions(-)
 create mode 100644 src/views/settings/components/Inputs.vue

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
new file mode 100644
index 00000000..c59d3fda
--- /dev/null
+++ b/src/views/settings/components/Inputs.vue
@@ -0,0 +1,122 @@
+<template>
+  <el-form-item :label="setting.key">
+    <el-input
+      v-if="setting.type === 'string'"
+      :value="data[setting.key]"
+      :placeholder="setting.suggestions[0]"
+      @input="updateSetting($event, settingsGroup.key, setting.key)"/>
+    <el-switch
+      v-if="setting.type === 'boolean'"
+      :value="data[setting.key]"
+      @change="updateSetting($event, settingsGroup.key, setting.key)"/>
+    <el-input-number
+      v-if="setting.type === 'integer'"
+      :value="data[setting.key]"
+      :placeholder="setting.suggestions[0].toString()"
+      :step="100"
+      :min="0"
+      size="large"
+      class="top-margin"
+      @change="updateSetting($event, settingsGroup.key, setting.key)"/>
+    <el-select
+      v-if="setting.type === 'module'"
+      :value="data.value"
+      clearable
+      @change="updateSetting($event, settingsGroup.key, 'value')">
+      <el-option
+        v-for="option in setting.suggestions"
+        :value="option"
+        :key="option"/>
+    </el-select>
+    <el-select
+      v-if="Array.isArray(setting.type) && setting.type.includes('list') && setting.type.includes('module')"
+      :value="data[setting.key]"
+      multiple
+      filterable
+      allow-create
+      @change="updateSetting($event, settingsGroup.key, setting.key)">
+      <el-option v-for="option in setting.suggestions[0]" :key="option" :value="option"/>
+    </el-select>
+    <el-select
+      v-if="Array.isArray(setting.type) && setting.type.includes('list') && setting.type.includes('string')"
+      :value="data[setting.key]"
+      multiple
+      filterable
+      allow-create
+      @change="updateSetting($event, settingsGroup.key, setting.key)">
+      <el-option v-for="option in setting.suggestions" :key="option" :value="option"/>
+    </el-select>
+    <editor
+      v-if="Array.isArray(setting.type)
+        && setting.type.includes('list')
+        && (setting.type.includes('tuple')
+      )"
+      v-model="editorContentHttp"
+      height="150"
+      width="100%"
+      lang="elixir"
+      theme="chrome"/>
+    <p class="expl">{{ setting.description }}</p>
+  </el-form-item>
+</template>
+
+<script>
+import AceEditor from 'vue2-ace-editor'
+import 'brace/mode/elixir'
+import 'default-passive-events'
+
+export default {
+  name: 'Inputs',
+  components: {
+    editor: AceEditor
+  },
+  props: {
+    settingsGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    // editorContentHttp: {
+    //   get: function() {
+    //     return this.endpoint.http.dispatch ? this.endpoint.http.dispatch[0] : ''
+    //   },
+    //   set: function(value) {
+    //     this.processNestedData([value], 'Pleroma.Web.Endpoint', 'http', 'dispatch')
+    //   }
+    // },
+    // editorContentHttps: {
+    //   get: function() {
+    //     return this.endpoint.https.dispatch ? this.endpoint.https.dispatch[0] : ''
+    //   },
+    //   set: function(value) {
+    //     this.processNestedData([value], 'Pleroma.Web.Endpoint', 'https', 'dispatch')
+    //   }
+    // }
+  },
+  methods: {
+    updateSetting(value, tab, input) {
+      this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../styles/main';
+@include settings
+</style>
diff --git a/src/views/settings/components/Setting.vue b/src/views/settings/components/Setting.vue
index cbcb1cd5..ad35b3ec 100644
--- a/src/views/settings/components/Setting.vue
+++ b/src/views/settings/components/Setting.vue
@@ -4,55 +4,32 @@
       <p class="options-paragraph">{{ settingsGroup.description }}</p>
     </el-form-item>
     <div v-for="setting in settingsGroup.children" :key="setting.key">
-      <el-form-item :label="setting.key">
-        <el-input
-          v-if="setting.type === 'string'"
-          :value="data[setting.key]"
-          :placeholder="setting.suggestions[0]"
-          @input="updateSetting($event, settingsGroup.key, setting.key)"/>
-        <el-switch
-          v-if="setting.type === 'boolean'"
-          :value="data[setting.key]"
-          @change="updateSetting($event, settingsGroup.key, setting.key)"/>
-        <el-input-number
-          v-if="setting.type === 'integer'"
-          :value="data[setting.key]"
-          :placeholder="setting.suggestions[0].toString()"
-          :step="100"
-          :min="0"
-          size="large"
-          class="top-margin"
-          @change="updateSetting($event, settingsGroup.key, setting.key)"/>
-        <el-select
-          v-if="setting.type === 'module'"
-          :value="data.value"
-          clearable
-          @change="updateSetting($event, settingsGroup.children[0].key, 'value')">
-          <el-option
-            v-for="option in settingsGroup.children[0].suggestions"
-            :value="option"
-            :key="option"/>
-        </el-select>
-        <el-select
-          v-if="Array.isArray(setting.type)
-            && setting.type.includes('list')
-          && (setting.type.includes('module') || setting.type.includes('string'))"
-          :value="data[setting.key]"
-          multiple
-          filterable
-          allow-create
-          @change="updateSetting($event, settingsGroup.key, setting.key)">
-          <el-option v-for="option in setting.suggestions[0]" :key="option" :value="option"/>
-        </el-select>
-        <p class="expl">{{ setting.description }}</p>
-      </el-form-item>
+      <div v-if="!compound(setting.type)">
+        <inputs :settings-group="settingsGroup" :setting="setting" :data="data"/>
+      </div>
+      <div v-if="compound(setting.type)">
+        <el-form-item :label="`${setting.key}:`"/>
+        <div v-for="subSetting in setting.children" :key="subSetting.key">
+          <inputs :settings-group="setting" :setting="subSetting" :data="data[setting]"/>
+        </div>
+        <div class="line"/>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import AceEditor from 'vue2-ace-editor'
+import Inputs from './Inputs'
+import 'brace/mode/elixir'
+import 'default-passive-events'
+
 export default {
   name: 'Setting',
+  components: {
+    editor: AceEditor,
+    Inputs
+  },
   props: {
     settingsGroup: {
       type: Object,
@@ -73,6 +50,9 @@ export default {
     }
   },
   methods: {
+    compound(type) {
+      return ['map'].includes(type)
+    },
     updateSetting(value, tab, input) {
       this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
     }