Add Oban.Cron setting

src/store/modules/normalizers.js

@@ -80,7 +80,12 @@ export const parseTuples = (tuples, key) => {
       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)}` }}]
       }, [])
-    } else if (item.tuple[0] === ':groups' || item.tuple[0] === ':replace' || item.tuple[0] === ':retries') {
+    } else if (
+      item.tuple[0] === ':groups' ||
+      item.tuple[0] === ':replace' ||
+      item.tuple[0] === ':retries' ||
+      item.tuple[0] === ':crontab'
+    ) {
       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)}` }}]
       }, [])
@@ -218,7 +223,12 @@ export const wrapUpdatedSettings = (group, settings, currentState) => {
 const wrapValues = (settings, currentState) => {
   return Object.keys(settings).map(setting => {
     const [type, value] = settings[setting]
-    if (type === 'keyword' || type.includes('keyword') || setting === ':replace') {
+    if (
+      type === 'keyword' ||
+      type.includes('keyword') ||
+      type.includes('tuple') && type.includes('list') ||
+      setting === ':replace'
+    ) {
       return { 'tuple': [setting, wrapValues(value, currentState)] }
     } else if (type === 'atom' && value.length > 0) {
       return { 'tuple': [setting, `:${value}`] }
@@ -226,8 +236,8 @@ const wrapValues = (settings, currentState) => {
       return typeof value === 'string'
         ? { 'tuple': [setting, value] }
         : { 'tuple': [setting, { 'tuple': value }] }
-    } else if (type.includes('tuple') && type.includes('list')) {
-      return { 'tuple': [setting, value] }
+    } else if (type === 'reversed_tuple') {
+      return { 'tuple': [value, setting] }
     } else if (type === 'map') {
       const mapValue = Object.keys(value).reduce((acc, key) => {
         acc[key] = setting === ':match_actor' ? value[key] : value[key][1]

src/views/settings/components/Inputs.vue

@@ -223,7 +223,11 @@ export default {
       }
     },
     keywordData() {
+      if (this.setting.key === ':crontab') {
+        return this.data[this.setting.key] || []
+      } else {
         return Array.isArray(this.data) ? this.data : []
+      }
     },
     rewritePolicyValue() {
       return typeof this.data[this.setting.key] === 'string' ? [this.data[this.setting.key]] : this.data[this.setting.key]
@@ -238,9 +242,10 @@ export default {
   methods: {
     editableKeyword(key, type) {
       return key === ':replace' ||
-        (Array.isArray(type) && type.includes('keyword') && type.includes('integer')) ||
         type === 'map' ||
-        (Array.isArray(type) && type.includes('keyword') && type.findIndex(el => el.includes('list') && el.includes('string')) !== -1)
+        (Array.isArray(type) && type.includes('keyword') && type.includes('integer')) ||
+        (Array.isArray(type) && type.includes('keyword') && type.findIndex(el => el.includes('list') && el.includes('string')) !== -1) ||
+        (Array.isArray(type) && type.includes('list') && type.includes('tuple'))
     },
     getFormattedDescription(desc) {
       return marked(desc)

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

@@ -8,6 +8,14 @@
       </div>
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
+    <div v-if="setting.key === ':crontab'">
+      <div v-for="element in data" :key="getId(element)" class="setting-input">
+        <el-input :value="getValue(element)" placeholder="worker" class="crontab-value-input" @input="parseEditableKeyword($event, 'value', element)"/> :
+        <el-input :value="getKey(element)" placeholder="crontab format" class="crontab-name-input" @input="parseEditableKeyword($event, 'key', element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+      </div>
+      <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
+    </div>
     <div v-else-if="editableKeywordWithInteger">
       <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)"/> :
@@ -96,15 +104,24 @@ export default {
       this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
     },
     updateSetting(value, group, key, input, type) {
-      const updatedSettings = type !== 'map'
-        ? value.reduce((acc, element) => {
-          return { ...acc, [Object.keys(element)[0]]: ['list', Object.values(element)[0].value] }
-        }, {})
-        : value.reduce((acc, element) => {
-          return { ...acc, [Object.keys(element)[0]]: Object.values(element)[0].value }
-        }, {})
+      const updatedSettings = this.wrapUpdatedSettings(value, group, key, input, type)
       this.$store.dispatch('UpdateSettings', { group, key, input, value: updatedSettings, type })
       this.$store.dispatch('UpdateState', { group, key, input, value })
+    },
+    wrapUpdatedSettings(value, input, type) {
+      if (type === 'map') {
+        return value.reduce((acc, element) => {
+          return { ...acc, [Object.keys(element)[0]]: Object.values(element)[0].value }
+        }, {})
+      } else if (input === ':crontab') {
+        return value.reduce((acc, element) => {
+          return { ...acc, [Object.values(element)[0].value]: ['reversed_tuple', Object.keys(element)[0]] }
+        }, {})
+      } else {
+        return value.reduce((acc, element) => {
+          return { ...acc, [Object.keys(element)[0]]: ['list', Object.values(element)[0].value] }
+        }, {})
+      }
     }
   }
 }

src/views/settings/styles/main.scss

@@ -14,6 +14,15 @@
     font-family: monospace;
     padding: 0 3px 0 3px;
   }
+  .crontab-name-input {
+    width: 30%;
+    margin-left: 8px;
+    margin-right: 10px
+  }
+  .crontab-value-input {
+    width: 70%;
+    margin-right: 8px
+  }
   .delete-setting-button {
     margin-left: 5px;
   }
@@ -325,6 +334,7 @@
     margin-right: 10px
   }
 
+
   @media only screen and (min-width: 1824px) {
     .submit-button-container {
       max-width: 1637px;