From f5d33f16987ba4b80e2e0d45f158c40d9c122bde Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 6 Mar 2020 21:30:11 +0300
Subject: [PATCH 1/4] Change inputs for configuring Crontab

---
 src/store/modules/normalizers.js              | 10 ++--
 src/views/settings/components/Inputs.vue      | 17 +++---
 .../inputComponents/CrontabInput.vue          | 52 +++++++++++++++++++
 .../inputComponents/EditableKeywordInput.vue  | 20 ++-----
 .../components/inputComponents/index.js       |  1 +
 src/views/settings/styles/main.scss           | 10 ----
 6 files changed, 68 insertions(+), 42 deletions(-)
 create mode 100644 src/views/settings/components/inputComponents/CrontabInput.vue

diff --git a/src/store/modules/normalizers.js b/src/store/modules/normalizers.js
index 8be6220d..7e843710 100644
--- a/src/store/modules/normalizers.js
+++ b/src/store/modules/normalizers.js
@@ -81,14 +81,14 @@ export const parseTuples = (tuples, key) => {
         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' ||
-      item.tuple[0] === ':crontab'
-    ) {
+      item.tuple[0] === ':groups' || item.tuple[0] === ':replace' || item.tuple[0] === ':retries') {
       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] === ':crontab') {
+      accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
+        return [...acc, { [group.tuple[1]]: group.tuple[0] }]
+      }, [])
     } 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)}` }}]
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index d99871b2..300f09c7 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -84,11 +84,12 @@
         </el-input>
         <!-- special inputs -->
         <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
-        <mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :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"/>
         <icons-input v-if="setting.key === ':icons'" :data="iconsData" :setting-group="settingGroup" :setting="setting"/>
-        <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
+        <mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
         <multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/>
+        <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
         <prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
         <rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
         <!-------------------->
@@ -106,7 +107,7 @@
 
 <script>
 import i18n from '@/lang'
-import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput, MultipleSelect, ProxyUrlInput, PruneInput, RateLimitInput } from './inputComponents'
+import { AutoLinkerInput, CrontabInput, EditableKeywordInput, IconsInput, MascotsInput, MultipleSelect, ProxyUrlInput, PruneInput, RateLimitInput } from './inputComponents'
 import { processNested } from '@/store/modules/normalizers'
 import _ from 'lodash'
 import marked from 'marked'
@@ -115,6 +116,7 @@ export default {
   name: 'Inputs',
   components: {
     AutoLinkerInput,
+    CrontabInput,
     EditableKeywordInput,
     IconsInput,
     MascotsInput,
@@ -223,11 +225,7 @@ export default {
       }
     },
     keywordData() {
-      if (this.setting.key === ':crontab') {
-        return this.data[this.setting.key] || []
-      } else {
-        return Array.isArray(this.data) ? this.data : []
-      }
+      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]
@@ -244,8 +242,7 @@ export default {
       return key === ':replace' ||
         type === 'map' ||
         (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'))
+        (Array.isArray(type) && type.includes('keyword') && type.findIndex(el => el.includes('list') && el.includes('string')) !== -1)
     },
     getFormattedDescription(desc) {
       return marked(desc)
diff --git a/src/views/settings/components/inputComponents/CrontabInput.vue b/src/views/settings/components/inputComponents/CrontabInput.vue
new file mode 100644
index 00000000..a38340ad
--- /dev/null
+++ b/src/views/settings/components/inputComponents/CrontabInput.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <el-form-item v-for="worker in workers" :label="worker" :key="worker" label-width="380px">
+      <el-input
+        :value="data[worker]"
+        :placeholder="getSuggestion(worker) || null"
+        class="input"
+        @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CrontabInput',
+  props: {
+    data: {
+      type: Array,
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    workers() {
+      return this.setting.suggestions.map(worker => worker[1])
+    }
+  },
+  methods: {
+    getSuggestion(worker) {
+      return this.setting.suggestions.find(suggestion => suggestion[1] === worker)[0]
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>
diff --git a/src/views/settings/components/inputComponents/EditableKeywordInput.vue b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
index a6ecde4d..fe5b9c7b 100644
--- a/src/views/settings/components/inputComponents/EditableKeywordInput.vue
+++ b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
@@ -8,14 +8,6 @@
       </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)"/> :
@@ -109,19 +101,13 @@ export default {
       this.$store.dispatch('UpdateState', { group, key, input, value })
     },
     wrapUpdatedSettings(value, input, type) {
-      if (type === 'map') {
-        return value.reduce((acc, element) => {
+      return type === 'map'
+        ? 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) => {
+        : value.reduce((acc, element) => {
           return { ...acc, [Object.keys(element)[0]]: ['list', Object.values(element)[0].value] }
         }, {})
-      }
     }
   }
 }
diff --git a/src/views/settings/components/inputComponents/index.js b/src/views/settings/components/inputComponents/index.js
index 389b304e..788d1f99 100644
--- a/src/views/settings/components/inputComponents/index.js
+++ b/src/views/settings/components/inputComponents/index.js
@@ -1,5 +1,6 @@
 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 MultipleSelect } from './MultipleSelect'
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index fd8e69d2..5b68e0c6 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -14,15 +14,6 @@
     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;
   }
@@ -334,7 +325,6 @@
     margin-right: 10px
   }
 
-
   @media only screen and (min-width: 1824px) {
     .submit-button-container {
       max-width: 1637px;

From 7aae515678cc7be7fc507f5a076e8f6aa547d89b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 6 Mar 2020 23:11:49 +0300
Subject: [PATCH 2/4] Add input processor for crontab inputs

---
 src/store/modules/normalizers.js              |  4 +-
 .../inputComponents/CrontabInput.vue          | 41 ++++++++++++++++---
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/store/modules/normalizers.js b/src/store/modules/normalizers.js
index 7e843710..ba4bea81 100644
--- a/src/store/modules/normalizers.js
+++ b/src/store/modules/normalizers.js
@@ -87,8 +87,8 @@ export const parseTuples = (tuples, key) => {
       }, [])
     } else if (item.tuple[0] === ':crontab') {
       accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
-        return [...acc, { [group.tuple[1]]: group.tuple[0] }]
-      }, [])
+        return { ...acc, [group.tuple[1]]: group.tuple[0] }
+      }, {})
     } 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)}` }}]
diff --git a/src/views/settings/components/inputComponents/CrontabInput.vue b/src/views/settings/components/inputComponents/CrontabInput.vue
index a38340ad..9bf3f5ec 100644
--- a/src/views/settings/components/inputComponents/CrontabInput.vue
+++ b/src/views/settings/components/inputComponents/CrontabInput.vue
@@ -1,11 +1,14 @@
 <template>
-  <div>
-    <el-form-item v-for="worker in workers" :label="worker" :key="worker" label-width="380px">
+  <div class="crontab">
+    <el-form-item v-for="worker in workers" :key="worker" :label="worker" :label-width="labelWidth" class="crontab-container">
+      <span slot="label" class="crontab-label">
+        {{ worker }}
+      </span>
       <el-input
         :value="data[worker]"
         :placeholder="getSuggestion(worker) || null"
-        class="input"
-        @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
+        class="input setting-input crontab-input"
+        @input="update($event, worker)"/>
     </el-form-item>
   </div>
 </template>
@@ -15,7 +18,7 @@ export default {
   name: 'CrontabInput',
   props: {
     data: {
-      type: Array,
+      type: Object,
       default: function() {
         return {}
       }
@@ -34,6 +37,22 @@ export default {
     }
   },
   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 '120px'
+      } else {
+        return '380px'
+      }
+    },
     workers() {
       return this.setting.suggestions.map(worker => worker[1])
     }
@@ -41,6 +60,18 @@ export default {
   methods: {
     getSuggestion(worker) {
       return this.setting.suggestions.find(suggestion => suggestion[1] === worker)[0]
+    },
+    update(value, worker) {
+      const updatedValue = {
+        ...this.$store.state.settings.settings[this.settingGroup.group][this.settingGroup.key][this.setting.key],
+        [worker]: value
+      }
+      this.$store.dispatch('UpdateSettings',
+        { group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValue, type: 'reversed_tuple' }
+      )
+      this.$store.dispatch('UpdateState',
+        { group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValue }
+      )
     }
   }
 }

From 1ad4cc277cd168975e294feed52f3b1b8534d328 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 7 Mar 2020 01:08:48 +0300
Subject: [PATCH 3/4] Fix styles for desktop, tablet and mobile versions

---
 .../components/inputComponents/CrontabInput.vue     | 13 +++++--------
 src/views/settings/styles/main.scss                 | 10 ++++++++++
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/views/settings/components/inputComponents/CrontabInput.vue b/src/views/settings/components/inputComponents/CrontabInput.vue
index 9bf3f5ec..1f6f3af1 100644
--- a/src/views/settings/components/inputComponents/CrontabInput.vue
+++ b/src/views/settings/components/inputComponents/CrontabInput.vue
@@ -1,16 +1,13 @@
 <template>
-  <div class="crontab">
-    <el-form-item v-for="worker in workers" :key="worker" :label="worker" :label-width="labelWidth" class="crontab-container">
-      <span slot="label" class="crontab-label">
-        {{ worker }}
-      </span>
+  <el-form :label-width="labelWidth" :label-position="isMobile ? 'top' : 'right'" class="crontab">
+    <el-form-item v-for="worker in workers" :key="worker" :label="worker" class="crontab-container">
       <el-input
         :value="data[worker]"
         :placeholder="getSuggestion(worker) || null"
-        class="input setting-input crontab-input"
+        class="input setting-input"
         @input="update($event, worker)"/>
     </el-form-item>
-  </div>
+  </el-form>
 </template>
 
 <script>
@@ -48,7 +45,7 @@ export default {
     },
     labelWidth() {
       if (this.isMobile) {
-        return '120px'
+        return '100%'
       } else {
         return '380px'
       }
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 5b68e0c6..562308b5 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -335,6 +335,12 @@
   }
 
   @media only screen and (max-width:480px) {
+    .crontab {
+      width: 100%;
+      label {
+        width: 100%;
+      }
+    }
     .delete-setting-button {
       margin: 4px 0 0 5px;
       height: 28px;
@@ -378,6 +384,10 @@
         margin: 0;
         padding: 0 15px 10px 0;
       }
+      .el-form-item.crontab-container:first-child {
+        margin: 0;
+        padding: 0 ;
+      }
       .el-form-item:first-child .mascot-form-item {
         padding: 0;
       }

From 15df9577f4bc1427873eb6277fa21769caded5da Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 7 Mar 2020 16:02:13 +0300
Subject: [PATCH 4/4] Fix wrapping cron tab settings before sending them to BE

---
 .../components/inputComponents/CrontabInput.vue  | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/views/settings/components/inputComponents/CrontabInput.vue b/src/views/settings/components/inputComponents/CrontabInput.vue
index 1f6f3af1..f3f16d26 100644
--- a/src/views/settings/components/inputComponents/CrontabInput.vue
+++ b/src/views/settings/components/inputComponents/CrontabInput.vue
@@ -59,12 +59,18 @@ export default {
       return this.setting.suggestions.find(suggestion => suggestion[1] === worker)[0]
     },
     update(value, worker) {
-      const updatedValue = {
-        ...this.$store.state.settings.settings[this.settingGroup.group][this.settingGroup.key][this.setting.key],
-        [worker]: value
-      }
+      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: updatedValue, type: 'reversed_tuple' }
+        { 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 }