Move rendering Crontab settings to Editable keywords after updating its type

src/store/modules/normalizers.js

@@ -93,14 +93,16 @@ export const parseTuples = (tuples, key) => {
         return [...acc, { [mascot.tuple[0]]: { ...mascot.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
       }, [])
     } else if (Array.isArray(item.tuple[1]) &&
-      (item.tuple[0] === ':groups' || item.tuple[0] === ':replace' || item.tuple[0] === ':retries' || item.tuple[0] === ':headers' || item.tuple[0] === ':params')) {
+      (item.tuple[0] === ':groups' || item.tuple[0] === ':replace' || item.tuple[0] === ':retries' || item.tuple[0] === ':headers' || item.tuple[0] === ':params' || item.tuple[0] === ':crontab')) {
-      accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
+      if (item.tuple[0] === ':crontab') {
-        return [...acc, { [group.tuple[0]]: { value: group.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
+        accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
-      }, [])
+          return [...acc, { [group.tuple[1]]: { value: group.tuple[0], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
-    } else if (item.tuple[0] === ':crontab') {
+        }, [])
-      accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
+      } else {
-        return { ...acc, [group.tuple[1]]: group.tuple[0] }
+        accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
-      }, {})
+          return [...acc, { [group.tuple[0]]: { value: group.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
+        }, [])
+      }
     } else if (item.tuple[0] === ':match_actor') {
       accum[item.tuple[0]] = Object.keys(item.tuple[1]).reduce((acc, regex) => {
         return [...acc, { [regex]: { value: item.tuple[1][regex], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]

src/views/settings/components/Inputs.vue

@@ -95,7 +95,6 @@
         </el-input>
         <!-- special inputs -->
         <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
-        <crontab-input v-if="setting.key === ':crontab'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
         <editable-keyword-input v-if="editableKeyword(setting.key, setting.type)" :data="keywordData" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
         <icons-input v-if="setting.key === ':icons'" :data="iconsData" :setting-group="settingGroup" :setting="setting"/>
         <mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
@@ -122,7 +121,6 @@
 import i18n from '@/lang'
 import {
   AutoLinkerInput,
-  CrontabInput,
   EditableKeywordInput,
   IconsInput,
   MascotsInput,
@@ -140,7 +138,6 @@ export default {
   name: 'Inputs',
   components: {
     AutoLinkerInput,
-    CrontabInput,
     EditableKeywordInput,
     IconsInput,
     MascotsInput,

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

@@ -1,86 +0,0 @@
-<template>
-  <el-form :label-width="labelWidth" :label-position="isMobile ? 'top' : 'right'" class="crontab">
-    <el-form-item v-for="worker in workers" :key="worker" :label="worker" :data-search="setting.key" class="crontab-container">
-      <el-input
-        :value="data[worker]"
-        :placeholder="getSuggestion(worker) || null"
-        class="input setting-input"
-        @input="update($event, worker)"/>
-    </el-form-item>
-  </el-form>
-</template>
-
-<script>
-export default {
-  name: 'CrontabInput',
-  props: {
-    data: {
-      type: Object,
-      default: function() {
-        return {}
-      }
-    },
-    setting: {
-      type: Object,
-      default: function() {
-        return {}
-      }
-    },
-    settingGroup: {
-      type: Object,
-      default: function() {
-        return {}
-      }
-    }
-  },
-  computed: {
-    isDesktop() {
-      return this.$store.state.app.device === 'desktop'
-    },
-    isMobile() {
-      return this.$store.state.app.device === 'mobile'
-    },
-    isTablet() {
-      return this.$store.state.app.device === 'tablet'
-    },
-    labelWidth() {
-      if (this.isMobile) {
-        return '100%'
-      } else {
-        return '380px'
-      }
-    },
-    workers() {
-      return this.setting.suggestions.map(worker => worker[1])
-    }
-  },
-  methods: {
-    getSuggestion(worker) {
-      return this.setting.suggestions.find(suggestion => suggestion[1] === worker)[0]
-    },
-    update(value, worker) {
-      const currentValue = this.$store.state.settings.settings[this.settingGroup.group][this.settingGroup.key][this.setting.key]
-      const updatedValue = { ...currentValue, [worker]: value }
-      const updatedValueWithType = Object.keys(currentValue).reduce((acc, key) => {
-        if (key === worker) {
-          return { ...acc, [key]: ['reversed_tuple', value] }
-        } else {
-          return { ...acc, [key]: ['reversed_tuple', currentValue[key]] }
-        }
-      }, {})
-
-      this.$store.dispatch('UpdateSettings',
-        { group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValueWithType, type: this.setting.type }
-      )
-      this.$store.dispatch('UpdateState',
-        { group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValue }
-      )
-    }
-  }
-}
-</script>
-
-<style rel='stylesheet/scss' lang='scss'>
-@import '../../styles/main';
-@include settings
-</style>

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

@@ -1,6 +1,15 @@
 <template>
   <div class="editable-keyword-container">
-    <div v-if="editableKeywordWithInteger" :data-search="setting.key || setting.group">
+    <div v-if="setting.key === ':crontab'" :data-search="setting.key" class="crontab">
+      <el-form-item v-for="worker in data" :key="getId(worker)" :label="getCrontabWorkerLabel(worker)" class="crontab-container">
+        <el-input
+          :value="getValue(worker)"
+          :placeholder="getSuggestion(worker) || null"
+          class="input setting-input"
+          @input="updateCrontab($event, 'value', worker)"/>
+      </el-form-item>
+    </div>
+    <div v-else-if="editableKeywordWithInteger" :data-search="setting.key || setting.group">
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-input-number :value="getValue(element)" :min="0" size="large" class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
@@ -64,7 +73,7 @@ export default {
       return Array.isArray(this.setting.type) && this.setting.type.includes('keyword') && this.setting.type.includes('integer')
     },
     editableKeywordWithString() {
-      return Array.isArray(this.setting.type) && (
+      return Array.isArray(this.setting.type) && this.setting.key !== ':crontab' && (
         (this.setting.type.includes('keyword') && this.setting.type.includes('string')) ||
         (this.setting.type.includes('tuple') && this.setting.type.includes('list'))
       )
@@ -98,6 +107,10 @@ export default {
     generateID() {
       return `f${(~~(Math.random() * 1e8)).toString(16)}`
     },
+    getCrontabWorkerLabel(worker) {
+      const workerKey = this.getKey(worker)
+      return workerKey.includes('Pleroma.Workers.Cron.') ? workerKey.replace('Pleroma.Workers.Cron.', '') : workerKey
+    },
     getKey(element) {
       return Object.keys(element)[0]
     },
@@ -105,6 +118,9 @@ export default {
       const { id } = Object.values(element)[0]
       return id
     },
+    getSuggestion(worker) {
+      return this.setting.suggestions.find(suggestion => suggestion[1] === this.getKey(worker))[0]
+    },
     getValue(element) {
       const { value } = Object.values(element)[0]
       return value
@@ -122,6 +138,25 @@ export default {
 
       this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
     },
+    updateCrontab(value, inputType, worker) {
+      const updatedId = this.getId(worker)
+      const updatedValue = this.data.map((worker, index) => {
+        if (Object.values(worker)[0].id === updatedId) {
+          return { [Object.keys(worker)[0]]: { ...Object.values(this.data[index])[0], value }}
+        }
+        return worker
+      })
+      const updatedValueWithType = updatedValue.reduce((acc, worker) => {
+        return { ...acc, [Object.keys(worker)[0]]: ['reversed_tuple', Object.values(worker)[0].value] }
+      }, {})
+
+      this.$store.dispatch('UpdateSettings',
+        { group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValueWithType, type: this.setting.type }
+      )
+      this.$store.dispatch('UpdateState',
+        { group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValue }
+      )
+    },
     updateSetting(value, group, key, input, type) {
       const wrappedSettings = this.wrapUpdatedSettings(value, input, type)
 

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

@@ -1,6 +1,5 @@
 export { default as AutoLinkerInput } from './AutoLinkerInput'
 export { default as EditableKeywordInput } from './EditableKeywordInput'
-export { default as CrontabInput } from './CrontabInput'
 export { default as IconsInput } from './IconsInput'
 export { default as MascotsInput } from './MascotsInput'
 export { default as ProxyUrlInput } from './ProxyUrlInput'