Store generated id in mascots state

src/store/modules/normalizers.js

@@ -27,7 +27,7 @@ export const parseTuples = (tuples, key) => {
     } else if (item.tuple[1] && typeof item.tuple[1] === 'object') {
       nonAtomsObjects.includes(item.tuple[0])
         ? accum[item.tuple[0]] = parseNonAtomObject(item.tuple[1])
-        : accum[item.tuple[0]] = parseObject(item.tuple[1])
+        : accum[item.tuple[0]] = parseObject(item.tuple)
     } else {
       accum[item.tuple[0]] = item.tuple[1]
     }
@@ -49,11 +49,16 @@ const parseNonAtomObject = (object) => {
   }, {})
 }
 
-const parseObject = (object) => {
+const parseObject = tuple => {
-  return Object.keys(object).reduce((acc, item) => {
+  return tuple[0] === ':mascots'
-    acc[item] = object[item]
+    ? Object.keys(tuple[1]).reduce((acc, item) => {
-    return acc
+      acc[item] = { ...tuple[1][item], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }
-  }, {})
+      return acc
+    }, {})
+    : Object.keys(tuple[1]).reduce((acc, item) => {
+      acc[item] = tuple[1][item]
+      return acc
+    }, {})
 }
 
 export const valueHasTuples = (key, value) => {

src/views/settings/components/Setting.vue

@@ -40,7 +40,7 @@
               :nested="true"/>
           </div>
           <div v-if="!setting.children">
-            <inputs :setting-group="settingGroup" :setting="setting" :data="data[setting.key]"/>
+            <inputs :setting-group="settingGroup" :setting="setting" :data="data[setting.key]" :nested="true"/>
           </div>
           <div class="line"/>
         </div>

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

@@ -1,17 +1,17 @@
 <template>
   <div>
-    <div v-for="([name, url, mimeType, id], index) in mascotsValue" :key="id" :data-id="id" class="mascot-container">
+    <div v-for="(mascot, name) in data" :key="mascot.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-input :value="name" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot.id)"/>
-          <el-button icon="el-icon-minus" circle @click="deleteMascotsRow(id)"/>
+          <el-button icon="el-icon-minus" circle @click="deleteMascotsRow(mascot.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-input :value="mascot[':url']" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', mascot.id)"/>
       </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-input :value="mascot[':mime_type']" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', mascot.id)"/>
       </el-form-item>
     </div>
     <el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
@@ -42,56 +42,41 @@ export default {
       }
     }
   },
-  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': '' }}
+      const updatedValue = { ...this.data, '': { ':url': '', ':mime_type': '', id: this.generateID() }}
       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 filteredValues = Object.keys(this.data).reduce((acc, mascot) => {
-      const updatedValue = filteredValues.reduce((acc, mascot) => {
+        return this.data[mascot].id !== id
-        return { ...acc, ...{ [mascot[0]]: { ':url': mascot[1], ':mime_type': mascot[2] }}}
+          ? { ...acc, ...{ [mascot]: this.data[mascot] }}
+          : acc
       }, {})
-      this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
+      this.updateSetting(filteredValues, 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) {
+    parseMascots(value, inputType, id, index) {
-      const value = `${event.target.value}${event.data}` // FIXME deletion
+      const updatedValue = Object.keys(this.data).reduce((acc, mascot) => {
-      const updatedValue = this.mascotsValue.map(mascot => {
+        if (this.data[mascot].id === id) {
-        if (mascot[3] === id) {
           if (inputType === 'name') {
-            mascot[0] = value
+            return { ...acc, ...{ [value]: this.data[mascot] }}
           } else if (inputType === 'url') {
-            mascot[1] = value
+            return { ...acc, ...{ [mascot]: { ...this.data[mascot], ':url': value }}}
           } else {
-            mascot[2] = value
+            return { ...acc, ...{ [mascot]: { ...this.data[mascot], ':mime_type': value }}}
           }
         }
-        return mascot
+        return { ...acc, ...{ [mascot]: this.data[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.updateSetting(updatedValue, 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}`
     }
   }
 }