Change function that parses updated settings, add parsing nested settings

src/store/modules/settings.js

 import { fetchDescription, fetchSettings, migrateToDB, updateSettings, uploadMedia } from '@/api/settings'
-import { parseTuples, parseValue, valueHasTuples } from './normalizers'
+import { parseTuples, valueHasTuples } from './normalizers'
 
 const settings = {
   state: {
@@ -42,14 +42,14 @@ const settings = {
       state.settings = newSettings
     },
     UPDATE_SETTINGS: (state, { group, key, input, value, type }) => {
+      const updatedSetting = state.updatedSettings[group]
+        ? { [key]: { ...state.updatedSettings[group][key], ...{ [input]: [type, value] }}}
+        : { [key]: { [input]: [type, value] }}
+      state.updatedSettings[group] = { ...state.updatedSettings[group], ...updatedSetting }
+    },
+    UPDATE_STATE: (state, { group, key, input, value }) => {
       const updatedState = { [key]: { ...state.settings[group][key], ...{ [input]: value }}}
       state.settings[group] = { ...state.settings[group], ...updatedState }
-
-      const settingKey = `${group}/${key}/${input}`
-      state.updatedSettings = {
-        ...state.updatedSettings,
-        ...{ [settingKey]: { group, key, value: parseValue(input, value, type) }}
-      }
     }
   },
   actions: {
@@ -72,12 +72,19 @@ const settings = {
       commit('REWRITE_CONFIG', { tab, data })
     },
     async SubmitChanges({ getters, commit, state }) {
-      const configs = Object.values(state.updatedSettings)
+      const configs = state.updatedSettings
       const response = await updateSettings(configs, getters.authHost, getters.token)
       commit('SET_SETTINGS', response.data.configs)
     },
     UpdateSettings({ commit }, { group, key, input, value, type }) {
-      commit('UPDATE_SETTINGS', { group, key, input, value, type })
+      key
+        ? commit('UPDATE_SETTINGS', { group, key, input, value, type })
+        : commit('UPDATE_SETTINGS', { group, key: input, input: 'value', value, type })
+    },
+    UpdateState({ commit }, { group, key, input, value }) {
+      key
+        ? commit('UPDATE_STATE', { group, key, input, value })
+        : commit('UPDATE_STATE', { group, key: input, input: 'value', value })
     },
     async UploadMedia({ dispatch, getters, state }, { file, tab, inputName, childName }) {
       const response = await uploadMedia(file, getters.authHost, getters.token)

src/views/settings/components/Inputs.vue

@@ -4,11 +4,11 @@
       v-if="setting.type === 'string'"
       :value="inputValue"
       :placeholder="setting.suggestions ? setting.suggestions[0] : null"
-      @input="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)"/>
+      @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
     <el-switch
       v-if="setting.type === 'boolean'"
       :value="inputValue"
-      @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)"/>
+      @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
     <el-input-number
       v-if="setting.type === 'integer'"
       :value="inputValue"
@@ -16,33 +16,33 @@
       :min="0"
       size="large"
       class="top-margin"
-      @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)"/>
+      @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
     <el-select
       v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes(false))"
       :value="inputValue"
       clearable
-      @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)">
+      @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
       <el-option
         v-for="(option, index) in setting.suggestions"
         :value="option"
         :key="index"/>
     </el-select>
-    <div v-if="setting.type === 'keyword'">
+    <!-- <div v-if="setting.type === 'keyword'">
       <div v-for="subSetting in setting.children" :key="subSetting.key">
         <inputs
           :setting-group="settingGroup"
           :setting="subSetting"
-          :data="data[setting.key]"
+          :data="data"
           :custom-label-width="'100px'"/>
       </div>
-    </div>
+    </div> -->
     <el-select
       v-if="renderMultipleSelect(setting.type)"
       :value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
       multiple
       filterable
       allow-create
-      @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)">
+      @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
       <el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
     </el-select>
     <editor
@@ -62,9 +62,9 @@
       @input="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)"/>
     <el-input
       v-if="setting.type === 'atom'"
-      :value="inputValue ? inputValue.substr(1) : null"
-      :placeholder="setting.suggestions[0]"
-      @input="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)">
+      :value="inputValue"
+      :placeholder="setting.suggestions[0] ? setting.suggestions[0].substr(1) : ''"
+      @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
       <template slot="prepend">:</template>
     </el-input>
     <div v-if="editableKeywordWithInput(setting.key)">
@@ -212,6 +212,12 @@ export default {
         return {}
       }
     },
+    nested: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
     setting: {
       type: Object,
       default: function() {
@@ -247,9 +253,11 @@ export default {
         : null
     },
     inputValue() {
-      if ([':esshd', ':cors_plug', ':quack', ':http_signatures'].includes(this.settingGroup.group) && this.data[this.setting.key]) {
+      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') {
+      } else if ((this.settingGroup.group === ':logger' && this.setting.key === ':backends') ||
+        this.setting.key === 'Pleroma.Web.Auth.Authenticator') {
         return this.data.value
       } else {
         return this.data[this.setting.key]
@@ -399,9 +407,13 @@ export default {
     },
     processAutoLinker(value, tab, inputName, childName) {
     },
-    processNestedData(value, tab, inputName, childName) {
-      const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
-      this.updateSetting(updatedValue, this.settingGroup.group, tab, inputName)
+    processNestedData(value, group, key, parentInput, parentType, childInput, childType) {
+      const updatedValueForState = { ...this.$store.state.settings.settings[group][key][parentInput], ...{ [childInput]: value }}
+      const updatedValue = this.$store.state.settings.updatedSettings[group]
+        ? { ...this.$store.state.settings.updatedSettings[group][key][parentInput][1], ...{ [childInput]: [childType, value] }}
+        : { [childInput]: [childType, value] }
+      this.$store.dispatch('UpdateSettings', { group, key, input: parentInput, value: updatedValue, type: parentType })
+      this.$store.dispatch('UpdateState', { group, key, input: parentInput, value: updatedValueForState })
     },
     renderMultipleSelect(type) {
       return Array.isArray(type) && (
@@ -418,8 +430,14 @@ export default {
     toggleLimits(value, input) {
       this.updateSetting(value, this.settingGroup.group, 'rate_limit', input)
     },
+    update(value, group, key, parent, input, type, nested) {
+      nested
+        ? this.processNestedData(value, group, key, parent.key, parent.type, input, type)
+        : this.updateSetting(value, group, key, input, type)
+    },
     updateSetting(value, group, key, input, type) {
       this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
+      this.$store.dispatch('UpdateState', { group, key, input, value })
     }
   }
 }

src/views/settings/components/Setting.vue

@@ -26,7 +26,8 @@
           <inputs
             :setting-group="settingGroup"
             :setting="setting"
-            :data="data"/>
+            :data="data"
+            :nested="false"/>
         </div>
         <div v-if="compound(setting)">
           <el-form-item :label="`${setting.label}:`"/>
@@ -36,7 +37,7 @@
               :setting-parent="setting"
               :setting="subSetting"
               :data="data[setting.key]"
-            />
+              :nested="true"/>
           </div>
           <div v-if="!setting.children">
             <inputs :setting-group="settingGroup" :setting="setting" :data="data[setting.key]"/>