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] 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 }
+      )
     }
   }
 }