Add JobQueue tab, process Prune setting

src/store/modules/normalizers.js

@@ -26,6 +26,8 @@ export const parseTuples = (tuples, key) => {
           return { key: name, value: icon[name], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }
         })
       }, [])
+    } else if (item.tuple[0] === ':prune') {
+      accum[item.tuple[0]] = item.tuple[1] === ':disabled' ? [item.tuple[1]] : item.tuple[1].tuple
     } else if (item.tuple[0] === ':proxy_url') {
       accum[item.tuple[0]] = parseProxyUrl(item.tuple[1])
     } else if ((item.tuple[0] === ':sslopts' && item.tuple[1].length === 0) || // should be removed

src/views/settings/components/Inputs.vue

@@ -55,31 +55,6 @@
       @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
       <template slot="prepend">:</template>
     </el-input>
-    <div v-if="setting.key === ':prune'">
-      <el-radio-group v-model="prune">
-        <el-radio label=":disabled">Disabled</el-radio>
-        <el-radio label=":maxlen">Limit-based</el-radio>
-        <el-radio label=":maxage">Time-based</el-radio>
-      </el-radio-group>
-      <el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left">
-        <el-input-number
-          :value="data[setting.key][':maxlen']"
-          :min="0"
-          placeholder="1500"
-          size="large"
-          class="top-margin"
-          @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)"/>
-      </el-form-item>
-      <el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left">
-        <el-input-number
-          :value="data[setting.key][':maxage']"
-          :min="0"
-          placeholder="3600"
-          size="large"
-          class="top-margin"
-          @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)"/>
-      </el-form-item>
-    </div>
     <div v-if="settingGroup.key === ':rate_limit'">
       <div v-if="!rateLimitAuthUsers">
         <el-input :value="rateLimitAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, setting.key, 'scale', 'oneLimit', rateLimitAllUsers)"/> :
@@ -112,6 +87,7 @@
     <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
     <ssl-options-input v-if="setting.key === ':ssl_options'" :setting-group="settingGroup" :setting-parent="settingParent" :setting="setting" :data="data" :nested="true" :custom-label-width="'100px'"/>
     <backends-logger-input v-if="setting.key === ':backends'" :data="data" :setting-group="settingGroup" :setting="setting"/>
+    <prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
     <!-------------------->
     <p class="expl">{{ setting.description }}</p>
   </el-form-item>
@@ -121,7 +97,7 @@
 import AceEditor from 'vue2-ace-editor'
 import 'brace/mode/elixir'
 import 'default-passive-events'
-import { AutoLinkerInput, BackendsLoggerInput, EditableKeywordInput, IconsInput, MascotsInput, ProxyUrlInput, SslOptionsInput } from './inputComponents'
+import { AutoLinkerInput, BackendsLoggerInput, EditableKeywordInput, IconsInput, MascotsInput, ProxyUrlInput, PruneInput, SslOptionsInput } from './inputComponents'
 
 export default {
   name: 'Inputs',
@@ -133,6 +109,7 @@ export default {
     IconsInput,
     MascotsInput,
     ProxyUrlInput,
+    PruneInput,
     SslOptionsInput
   },
   props: {
@@ -203,11 +180,6 @@ export default {
     labelWidth() {
       return this.isMobile ? '100px' : '240px'
     },
-    prune() {
-      return this.data[this.setting.key] === ':disabled'
-        ? ':disabled'
-        : Object.keys(this.data[this.setting.key])[0]
-    },
     rateLimitAllUsers() {
       return this.data[this.setting.key] ? Object.entries(this.data[this.setting.key])[0] : [null, null]
     },

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

@@ -16,7 +16,7 @@ export default {
   name: 'AutoLinkerInput',
   props: {
     data: {
-      type: Object || Array,
+      type: [Object, Array],
       default: function() {
         return {}
       }

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

@@ -16,7 +16,7 @@ export default {
   name: 'BackendsLoggerInput',
   props: {
     data: {
-      type: Object || Array,
+      type: [Object, Array],
       default: function() {
         return {}
       }

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

@@ -19,7 +19,7 @@ export default {
   name: 'ProxyUrlInput',
   props: {
     data: {
-      type: Object || Array,
+      type: [Object, Array],
       default: function() {
         return {}
       }

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

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <el-radio-group v-model="prune">
+      <el-radio label=":disabled">Disabled</el-radio>
+      <el-radio label=":maxlen">Limit-based</el-radio>
+      <el-radio label=":maxage">Time-based</el-radio>
+    </el-radio-group>
+    <el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left">
+      <el-input-number
+        :value="data[1]"
+        :min="0"
+        placeholder="1500"
+        size="large"
+        class="top-margin"
+        @change="updateIntInput($event, ':maxlen')"/>
+    </el-form-item>
+    <el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left">
+      <el-input-number
+        :value="data[1]"
+        :min="0"
+        placeholder="3600"
+        size="large"
+        class="top-margin"
+        @change="updateIntInput($event, ':maxage')"/>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PruneInput',
+  props: {
+    data: {
+      type: [Object, Array],
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    prune: {
+      get: function() {
+        return this.data[0]
+      },
+      set: function(value) {
+        this.updateRadioInput(value)
+      }
+    }
+  },
+  methods: {
+    updateIntInput(value, input) {
+      this.updateSetting([input, value], this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
+    },
+    updateSetting(value, group, key, input, type) {
+      const updatedSetting = value.includes(':disabled') ? ':disabled' : value
+      this.$store.dispatch('UpdateSettings', { group, key, input, value: updatedSetting, type })
+      this.$store.dispatch('UpdateState', { group, key, input, value })
+    },
+    updateRadioInput(value) {
+      const processedValue = value === ':disabled' ? [value] : [value, 0]
+      this.updateSetting(processedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>

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

@@ -15,13 +15,8 @@
 </template>
 
 <script>
-import Inputs from '../Inputs'
-
 export default {
   name: 'SslOptionsInput',
-  components: {
-    Inputs
-  },
   props: {
     customLabelWidth: {
       type: String,

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

@@ -4,4 +4,5 @@ export { default as MascotsInput } from './MascotsInput'
 export { default as EditableKeywordInput } from './EditableKeywordInput'
 export { default as IconsInput } from './IconsInput'
 export { default as ProxyUrlInput } from './ProxyUrlInput'
+export { default as PruneInput } from './PruneInput'
 export { default as SslOptionsInput } from './SslOptionsInput'

src/views/settings/index.vue

@@ -38,6 +38,9 @@
       <el-tab-pane :label="$t('settings.instance')" name="instance">
         <instance/>
       </el-tab-pane>
+      <el-tab-pane :label="$t('settings.jobQueue')" lazy>
+        <job-queue/>
+      </el-tab-pane>
       <el-tab-pane :label="$t('settings.logger')" lazy>
         <logger/>
       </el-tab-pane>
@@ -50,14 +53,10 @@
       <el-tab-pane :label="$t('settings.mrf')" lazy>
         <mrf/>
       </el-tab-pane>
-      <!-- <el-tab-pane :label="$t('settings.mediaProxy')" lazy>
-        <media-proxy/>
-      </el-tab-pane> -->
       <!--
-      <el-tab-pane :label="$t('settings.jobQueue')" lazy>
+      <el-tab-pane :label="$t('settings.mediaProxy')" lazy>
-        <job-queue/>
+        <media-proxy/>
       </el-tab-pane>
-
       <el-tab-pane :label="$t('settings.rateLimiters')" lazy>
         <rate-limiters/>
       </el-tab-pane>