Extract mascots input into separate component

src/store/modules/normalizers.js

@@ -70,6 +70,7 @@ export const valueHasTuples = (key, value) => {
 }
 
 export const wrapUpdatedSettings = (group, settings) => {
+  console.log(group, settings)
   return Object.keys(settings).map((key) => {
     const value = groupWithoutKey(settings[key]) || wrapValues(settings[key])
     return { group, key, value }
@@ -78,7 +79,8 @@ export const wrapUpdatedSettings = (group, settings) => {
 
 const wrapValues = settings => {
   return Object.keys(settings).map(setting => {
-    const [type, value] = settings[setting]
+    console.log(settings[setting])
+    const [type, value] = Array.isArray(settings[setting]) ? settings[setting] : ['', settings[setting]]
     if (type === 'keyword' || type.includes('keyword')) {
       return { 'tuple': [setting, wrapValues(value)] }
     } else if (type === 'atom') {

src/views/settings/components/Inputs.vue

@@ -148,20 +148,10 @@
         class="value-input"
         @input="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)"/>
     </div>
-    <div v-if="settingGroup.group === ':auto_linker'">
-      <auto-linker-input :setting-group="settingGroup" :setting="setting" :data="data"/>
-    </div>
-    <div v-if="setting.key === ':mascots'">
-      <div v-for="([name, url, mimeType], index) in mascotsValue" :key="index" class="mascot-container">
-        <div class="mascot-name-container">
-          <el-input :value="name" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', index)"/>
-          <el-button icon="el-icon-minus" circle @click="deleteMascotsRow(index, 'emoji', 'groups')"/>
-        </div>
-        <el-input :value="url" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', index)"/>
-        <el-input :value="mimeType" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', index)"/>
-      </div>
-      <el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
-    </div>
+    <!-- special inputs -->
+    <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :setting-group="settingGroup" :setting="setting" :data="data"/>
+    <mascots-input v-if="setting.key === ':mascots'" :setting-group="settingGroup" :setting="setting" :data="data"/>
+    <!-------------------->
     <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">
@@ -187,13 +177,14 @@
 import AceEditor from 'vue2-ace-editor'
 import 'brace/mode/elixir'
 import 'default-passive-events'
-import { AutoLinkerInput } from './inputComponents'
+import { AutoLinkerInput, MascotsInput } from './inputComponents'
 
 export default {
   name: 'Inputs',
   components: {
     editor: AceEditor,
-    AutoLinkerInput
+    AutoLinkerInput,
+    MascotsInput
   },
   props: {
     customLabelWidth: {
@@ -265,11 +256,6 @@ export default {
     labelWidth() {
       return this.isMobile ? '100px' : '240px'
     },
-    mascotsValue() {
-      return Object.keys(this.data)
-        .map(mascotName =>
-          [mascotName, this.data[mascotName][':url'], this.data[mascotName][':mime_type']])
-    },
     proxyUrlData() {
       if (!this.data[this.setting.key]) {
         return null
@@ -319,12 +305,6 @@ export default {
       }, {})
       this.updateSetting({ ...updatedValue, '': [] }, this.settingGroup.group, this.settingGroup.key, this.setting.key)
     },
-    addRowToMascots() {
-      const updatedValue = this.data[':mascots'].reduce((acc, el, i) => {
-        return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
-      }, {})
-      this.updateSetting({ ...updatedValue, '': { url: '', mime_type: '' }}, this.settingGroup.group, 'assets', 'mascots')
-    },
     deleteEditableKeywordRow(index) {
       const filteredValues = this.editableKeywordData(this.data).filter((el, i) => index !== i)
       const updatedValue = filteredValues.reduce((acc, el, i) => {
@@ -334,13 +314,6 @@ export default {
       this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key)
     },
     deleteIcondRow(index) {},
-    deleteMascotsRow(index) {
-      const filteredValues = this.data[':mascots'].filter((el, i) => index !== i)
-      const updatedValue = filteredValues.reduce((acc, el, i) => {
-        return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
-      }, {})
-      this.updateSetting(updatedValue, this.settingGroup.group, 'assets', 'mascots')
-    },
     editableKeywordWithInput(key) {
       return key === ':replace'
     },
@@ -367,21 +340,6 @@ export default {
       this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key)
     },
     parseIcons(value, inputType, index) {},
-    parseMascots(value, inputType, index) {
-      const updatedValue = this.data[':mascots'].reduce((acc, el, i) => {
-        if (index === i) {
-          if (inputType === 'name') {
-            return { ...acc, [value]: { url: el[1], mime_type: el[2] }}
-          } else if (inputType === 'url') {
-            return { ...acc, [el[0]]: { url: value, mime_type: el[2] }}
-          } else {
-            return { ...acc, [el[0]]: { url: el[1], mime_type: value }}
-          }
-        }
-        return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
-      }, {})
-      this.updateSetting(updatedValue, this.settingGroup.group, 'assets', 'mascots')
-    },
     parseRateLimiter(value, input, typeOfInput, typeOfLimit, currentValue) {
       if (typeOfLimit === 'oneLimit') {
         const valueToSend = typeOfInput === 'scale' ? { 'tuple': [value, currentValue[1]] } : { 'tuple': [currentValue[0], value] }

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

@@ -34,7 +34,6 @@ export default {
       }
     }
   },
-  computed: {},
   methods: {
     autoLinkerBooleanValue(key) {
       const value = this.data[this.setting.key]

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

+<template>
+  <div>
+    <div v-for="([name, url, mimeType, id], index) in mascotsValue" :key="id" :data-id="id" class="mascot-container">
+      <el-form-item label="Name" label-width="100px">
+        <div class="mascot-name-container">
+          <el-input :value="name" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', id)"/>
+          <el-button icon="el-icon-minus" circle @click="deleteMascotsRow(id)"/>
+        </div>
+      </el-form-item>
+      <el-form-item label="URL" label-width="100px">
+        <el-input :value="url" :ref="generateRef('url', index)" placeholder="URL" class="mascot-input" @input.native="parseMascots($event, 'url', id, index)"/>
+      </el-form-item>
+      <el-form-item label="Mime type" label-width="100px">
+        <el-input :value="mimeType" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', id)"/>
+      </el-form-item>
+    </div>
+    <el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'MascotsInput',
+  props: {
+    data: {
+      type: Object || Array,
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    mascotsValue() {
+      return Object.keys(this.data).map(mascotName =>
+        [mascotName, this.data[mascotName][':url'], this.data[mascotName][':mime_type'], this.generateID()]
+      )
+    }
+  },
+  methods: {
+    addRowToMascots() {
+      const updatedValue = { ...this.data, '': { ':url': '', ':mime_type': '' }}
+      this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
+    },
+    deleteMascotsRow(id) {
+      const filteredValues = this.mascotsValue.filter(mascot => mascot[3] !== id)
+      const updatedValue = filteredValues.reduce((acc, mascot) => {
+        return { ...acc, ...{ [mascot[0]]: { ':url': mascot[1], ':mime_type': mascot[2] }}}
+      }, {})
+      this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
+    },
+    generateID() {
+      return `f${(~~(Math.random() * 1e8)).toString(16)}`
+    },
+    parseMascots(event, inputType, id, index) {
+      const value = `${event.target.value}${event.data}` // FIXME deletion
+      const updatedValue = this.mascotsValue.map(mascot => {
+        if (mascot[3] === id) {
+          if (inputType === 'name') {
+            mascot[0] = value
+          } else if (inputType === 'url') {
+            mascot[1] = value
+          } else {
+            mascot[2] = value
+          }
+        }
+        return mascot
+      })
+      const parsedMascots = updatedValue.reduce((acc, mascot) => {
+        return { ...acc, ...{ [mascot[0]]: { ':url': mascot[1], ':mime_type': mascot[2] }}}
+      }, {})
+
+      this.updateSetting(parsedMascots, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
+
+      this.$nextTick(() => this.$refs[`${inputType}${index}`][0].focus())
+    },
+    updateSetting(value, group, key, input, type) {
+      this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
+      this.$store.dispatch('UpdateState', { group, key, input, value })
+    },
+    generateRef(field, index) {
+      return `${field}${index}`
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>

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

 export { default as AutoLinkerInput } from './AutoLinkerInput'
+export { default as MascotsInput } from './MascotsInput'