Add input for settings with type tuple and boolean, wrapping and parsing these settings

src/store/modules/normalizers.js

@@ -57,10 +57,18 @@ export const parseNonTuples = (key, value) => {
 // REFACTOR
 export const parseTuples = (tuples, key) => {
   return tuples.reduce((accum, item) => {
-    if (key === ':rate_limit') {
-      accum[item.tuple[0]] = Array.isArray(item.tuple[1])
-        ? item.tuple[1].map(el => el.tuple)
-        : item.tuple[1].tuple
+    if (key === ':rate_limit' ||
+      (key === 'Pleroma.Web.Endpoint.MetricsExporter' && item.tuple[0] === ':auth')) {
+      const getValue = () => {
+        if (typeof item.tuple[1] === 'boolean') {
+          return item.tuple[1]
+        } else if (Array.isArray(item.tuple[1])) {
+          return item.tuple[1].map(el => el.tuple)
+        } else {
+          return item.tuple[1].tuple
+        }
+      }
+      accum[item.tuple[0]] = getValue()
     } else if (item.tuple[0] === ':mascots') {
       accum[item.tuple[0]] = item.tuple[1].reduce((acc, mascot) => {
         return [...acc, { [mascot.tuple[0]]: { ...mascot.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
@@ -237,8 +245,9 @@ const wrapValues = (settings, currentState) => {
       return { 'tuple': [setting, wrapValues(value, currentState)] }
     } else if (prependWithСolon(type, value)) {
       return { 'tuple': [setting, `:${value}`] }
-    } else if (type.includes('tuple') && (type.includes('string') || type.includes('atom'))) {
-      return typeof value === 'string'
+    } else if (type.includes('tuple') &&
+      (type.includes('string') || type.includes('atom') || type.includes('boolean'))) {
+      return typeof value === 'string' || typeof value === 'boolean'
         ? { 'tuple': [setting, value] }
         : { 'tuple': [setting, { 'tuple': value }] }
     } else if (type === 'reversed_tuple') {

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

@@ -1,28 +1,39 @@
 <template>
   <div>
     <div v-if="setting.type.includes('string')" :data-search="setting.key || setting.group">
-      <el-switch :value="autoLinkerBooleanValue" @change="processTwoTypeValue($event, setting.key)"/>
+      <el-switch :value="booleanValue" @change="processTwoTypeValue($event, setting.key)"/>
       <el-input
-        v-if="autoLinkerBooleanValue"
-        :value="autoLinkerStringValue"
+        v-if="booleanValue"
+        :value="stringValue"
         @input="processTwoTypeValue($event, setting.key)"/>
     </div>
     <div v-if="setting.type.includes('integer')" :data-search="setting.key || setting.group">
-      <el-switch :value="autoLinkerBooleanValue" @change="processTwoTypeValue($event, setting.key)"/>
+      <el-switch :value="booleanValue" @change="processTwoTypeValue($event, setting.key)"/>
       <el-input-number
-        v-if="autoLinkerBooleanValue"
-        :value="autoLinkerIntegerValue"
+        v-if="booleanValue"
+        :value="integerValue"
         @input="processTwoTypeValue($event, setting.key)"/>
     </div>
     <div v-if="setting.type.includes('atom')" :data-search="setting.key || setting.group">
-      <el-switch :value="autoLinkerBooleanValue" @change="processTwoTypeValue($event, setting.key)"/>
+      <el-switch :value="booleanValue" @change="processTwoTypeValue($event, setting.key)"/>
       <el-input
-        v-if="autoLinkerBooleanValue"
-        :value="autoLinkerAtomValue"
+        v-if="booleanValue"
+        :value="atomValue"
         @input="processTwoTypeValue($event, setting.key)">
         <template slot="prepend">:</template>
       </el-input>
     </div>
+    <div v-if="setting.type.includes('tuple')" :data-search="setting.key || setting.group">
+      <el-switch :value="booleanValue" @change="processTupleTwoTypeValue($event, setting.key)"/>
+      <div v-if="booleanValue" class="tuple-input-container">
+        <el-input
+          v-for="(item, index) in tupleValue"
+          :value="item"
+          :key="index"
+          class="tuple-input"
+          @input="processTupleTwoTypeValue($event, setting.key, index)"/>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -50,24 +61,39 @@ export default {
     }
   },
   computed: {
-    autoLinkerAtomValue() {
+    atomValue() {
       return this.data[this.setting.key] &&
         this.data[this.setting.key][0] === ':' ? this.data[this.setting.key].substr(1) : this.data[this.setting.key]
     },
-    autoLinkerBooleanValue() {
+    booleanValue() {
       const value = this.data[this.setting.key]
-      return typeof value === 'string' || typeof value === 'number'
+      return typeof value !== 'boolean'
     },
-    autoLinkerIntegerValue() {
+    integerValue() {
       const value = this.data[this.setting.key]
       return value || 0
     },
-    autoLinkerStringValue() {
+    stringValue() {
       const value = this.data[this.setting.key]
       return value || ''
+    },
+    tupleValue() {
+      const value = this.data[this.setting.key]
+      return value || ['', '', '']
     }
   },
   methods: {
+    processTupleTwoTypeValue(value, input, _index) {
+      if (value === false) {
+        this.updateSetting(value, this.settingGroup.group, this.settingGroup.key, input, this.setting.type)
+      } else if (value === true) {
+        this.updateSetting(['', '', ''], this.settingGroup.group, this.settingGroup.key, input, this.setting.type)
+      } else {
+        const data = [...this.tupleValue]
+        data[_index] = value
+        this.updateSetting(data, this.settingGroup.group, this.settingGroup.key, input, this.setting.type)
+      }
+    },
     processTwoTypeValue(value, input) {
       if (value === true) {
         const data = input === ':truncate' ? 0 : ''

src/views/settings/styles/main.scss

@@ -352,6 +352,15 @@
     line-height: 20px;
     margin-right: 15px
   }
+  .tuple-input {
+    margin-right: 15px;
+  }
+  .tuple-input:last-child {
+    margin-right: 0;
+  }
+  .tuple-input-container {
+    display: flex;
+  }
   .upload-container {
     display: flex;
     align-items: baseline;