Process Instance tab, add separate component for Icons setting

src/store/modules/normalizers.js

@@ -18,6 +18,12 @@ export const parseTuples = (tuples, key) => {
       accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
         return [...acc, { [group.tuple[0]]: { value: group.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
       }, [])
+    } else if (item.tuple[0] === ':icons') {
+      accum[item.tuple[0]] = item.tuple[1].map(icon => {
+        return Object.keys(icon).map(name => {
+          return { key: name, value: icon[name], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }
+        })
+      }, [])
     } else if ((item.tuple[0] === ':sslopts' && item.tuple[1].length === 0) || // should be removed
       (item.tuple[0] === ':tlsopts' && item.tuple[1].length === 0)) {
       accum[item.tuple[0]] = {}

src/views/settings/components/Inputs.vue

@@ -116,24 +116,8 @@
     <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
     <mascots-input v-if="setting.key === ':mascots'" :data="data" :setting-group="settingGroup" :setting="setting"/>
     <editable-keyword-input v-if="editableKeyword(setting.key, setting.type)" :data="data" :setting-group="settingGroup" :setting="setting"/>
+    <icons-input v-if="setting.key === ':icons'" :data="data[':icons']" :setting-group="settingGroup" :setting="setting"/>
     <!-------------------->
-    <div v-if="setting.key === ':icons'">
-      <div v-for="(icon, index) in iconsValue" :key="index" class="mascot-container">
-        <div v-for="([key, value], index) in icon" :key="index" class="setting-input">
-          <el-input :value="key" placeholder="key" class="name-input" @input="parseIcons($event, 'key', index)"/> :
-          <el-input :value="value" placeholder="value" class="value-input" @input="parseIcons($event, 'value', index)"/>
-          <el-button icon="el-icon-minus" circle @click="deleteIcondRow(index)"/>
-        </div>
-        <div class="icons-button-container">
-          <el-button icon="el-icon-plus" circle @click="addValueToIcons"/>
-          <span class="icons-button-desc">Add another `key - value` pair to this icon</span>
-        </div>
-        <div class="icons-button-container">
-          <el-button icon="el-icon-plus" circle @click="addIconToIcons"/>
-          <span class="icons-button-desc">Add another icon configuration</span>
-        </div>
-      </div>
-    </div>
     <p class="expl">{{ setting.description }}</p>
   </el-form-item>
 </template>
@@ -142,7 +126,7 @@
 import AceEditor from 'vue2-ace-editor'
 import 'brace/mode/elixir'
 import 'default-passive-events'
-import { AutoLinkerInput, EditableKeywordInput, MascotsInput } from './inputComponents'
+import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput } from './inputComponents'
 
 export default {
   name: 'Inputs',
@@ -150,6 +134,7 @@ export default {
     editor: AceEditor,
     AutoLinkerInput,
     EditableKeywordInput,
+    IconsInput,
     MascotsInput
   },
   props: {
@@ -201,17 +186,13 @@ export default {
         this.processNestedData([value], this.settingGroup.group, this.settingGroup.key, this.settingParent.key, this.settingParent.type, this.setting.key, this.setting.type)
       }
     },
-    iconsValue() {
-      return this.data[':icons']
-        ? this.data[':icons'].map(icon => Object.keys(icon).map(key => [key, icon[key]]))
-        : null
-    },
     inputValue() {
       if ([':esshd', ':cors_plug', ':quack', ':http_signatures'].includes(this.settingGroup.group) &&
         this.data[this.setting.key]) {
         return this.data[this.setting.key].value
       } else if ((this.settingGroup.group === ':logger' && this.setting.key === ':backends') ||
-        this.setting.key === 'Pleroma.Web.Auth.Authenticator') {
+        this.setting.key === 'Pleroma.Web.Auth.Authenticator' ||
+        this.setting.key === ':admin_token') {
         return this.data.value
       } else if (this.setting.type === 'atom') {
         return this.data[this.setting.key] && this.data[this.setting.key][0] === ':' ? this.data[this.setting.key].substr(1) : this.data[this.setting.key]
@@ -263,16 +244,12 @@ export default {
     }
   },
   methods: {
-    addIconToIcons() {},
-    addValueToIcons() {},
-    deleteIcondRow(index) {},
     editableKeyword(key, type) {
       return key === ':replace' ||
         (Array.isArray(type) && type.includes('keyword') && type.includes('integer')) ||
         type === 'map' ||
         (Array.isArray(type) && type.includes('keyword') && type.findIndex(el => el.includes('list') && el.includes('string')) !== -1)
     },
-    parseIcons(value, inputType, index) {},
     parseRateLimiter(value, input, typeOfInput, typeOfLimit, currentValue) {
       if (typeOfLimit === 'oneLimit') {
         const valueToSend = typeOfInput === 'scale' ? { 'tuple': [value, currentValue[1]] } : { 'tuple': [currentValue[0], value] }
@@ -309,8 +286,6 @@ export default {
         this.setting.key === ':args'
       )
     },
-    toggleAtomTuple(value, tab, input) {
-    },
     toggleLimits(value, input) {
       this.updateSetting(value, this.settingGroup.group, 'rate_limit', input)
     },

src/views/settings/components/inputComponents/IconsInput.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div v-for="(icon, index) in data" :key="index" class="mascot-container">
+      <div class="icons-container">
+        <div class="icon-container">
+          <div v-for="{ key, value, id } in icon" :key="id" class="icon-values-container">
+            <el-input :value="key" placeholder="key" class="icon-key-input" @input="parseIcons($event, 'key', index, id)"/> :
+            <el-input :value="value" placeholder="value" class="icon-value-input" @input="parseIcons($event, 'value', index, id)"/>
+          </div>
+        </div>
+        <el-button icon="el-icon-minus" circle class="icon-minus-button" @click="deleteIcondRow(index)"/>
+      </div>
+      <div class="icons-button-container">
+        <el-button icon="el-icon-plus" circle @click="addValueToIcons(index)"/>
+        <span class="icons-button-desc">Add another `key - value` pair to this icon</span>
+      </div>
+      <div class="line"/>
+    </div>
+    <div class="icons-button-container">
+      <el-button icon="el-icon-plus" circle @click="addIconToIcons"/>
+      <span class="icons-button-desc">Add another icon configuration</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EditableKeywordInput',
+  props: {
+    data: {
+      type: [Object, Array],
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  computed: {
+
+  },
+  methods: {
+    addIconToIcons() {
+      const updatedValue = [...this.data, [{ key: '', value: '', id: this.generateID() }]]
+      this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key)
+    },
+    addValueToIcons(index) {
+      const updatedValue = this.data.map((icon, i) => {
+        if (i === index) {
+          return [...icon, { key: '', value: '', id: this.generateID() }]
+        }
+        return icon
+      })
+      this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key)
+    },
+    deleteIcondRow(index) {
+      const filteredValues = this.data.filter((icon, i) => i !== index)
+      this.updateSetting(filteredValues, this.settingGroup.group, this.settingGroup.key, this.setting.key)
+    },
+    generateID() {
+      return `f${(~~(Math.random() * 1e8)).toString(16)}`
+    },
+    parseIcons(value, inputType, index, id) {
+      const updatedValue = this.data.map((icon, i) => {
+        if (i === index) {
+          return icon.map(setting => {
+            if (setting.id === id) {
+              return inputType === 'key'
+                ? { ...setting, key: value }
+                : { ...setting, value }
+            }
+            return setting
+          })
+        }
+        return icon
+      })
+
+      this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
+    },
+    updateSetting(value, group, key, input, type) {
+      const updatedSettings = value.map(icon => {
+        return icon.reduce((acc, { key, value }) => {
+          return { ...acc, [key]: value }
+        }, {})
+      }, {})
+      this.$store.dispatch('UpdateSettings', { group, key, input, value: updatedSettings, type })
+      this.$store.dispatch('UpdateState', { group, key, input, value })
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>

src/views/settings/components/inputComponents/index.js

@@ -1,3 +1,4 @@
 export { default as AutoLinkerInput } from './AutoLinkerInput'
 export { default as MascotsInput } from './MascotsInput'
 export { default as EditableKeywordInput } from './EditableKeywordInput'
+export { default as IconsInput } from './IconsInput'

src/views/settings/index.vue

@@ -29,16 +29,17 @@
       <el-tab-pane :label="$t('settings.frontend')" lazy>
         <frontend/>
       </el-tab-pane>
-      <!--
       <el-tab-pane :label="$t('settings.gopher')" lazy>
         <gopher/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.http')" lazy>
-        <http/>
-      </el-tab-pane>
       <el-tab-pane :label="$t('settings.instance')" name="instance">
         <instance/>
       </el-tab-pane>
+      <!--
+      <el-tab-pane :label="$t('settings.http')" lazy>
+        <http/>
+      </el-tab-pane>
+
       <el-tab-pane :label="$t('settings.jobQueue')" lazy>
         <job-queue/>
       </el-tab-pane>

src/views/settings/styles/main.scss

@@ -45,7 +45,7 @@
   }
   .icons-button-container {
     width: 100%;
-    margin-bottom: 5px;
+    margin-bottom: 10px;
   }
   .icons-button-desc {
     font-size: 14px;
@@ -53,6 +53,29 @@
     font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
     margin-left: 5px;
   }
+  .icon-container {
+    flex-direction: column;
+    width: 95%;
+  }
+  .icon-values-container {
+    display: flex;
+    margin: 0 10px 10px 0;
+  }
+  .icon-key-input {
+    width: 30%;
+    margin-right: 8px
+  }
+  .icon-minus-button {
+    width: 36px;
+    height: 36px;
+  }
+  .icon-value-input {
+    width: 70%;
+    margin-left: 8px;
+  }
+  .icons-container {
+    display: flex;
+  }
   label {
     white-space: nowrap;
     overflow: hidden;