refactor: Split Settings into multiple views

Author: johan-bjareholt

src/components/CategoryEditTree.vue

@@ -1,23 +1,23 @@
 <template lang="pug">
 div
-  div.row.py-2.cls
+  div.row.py-2.class
     div.col-8.col-md-4
       span(:style="{ marginLeft: (2 * depth) + 'em'}")
-        //| {{ cls.name.join(" ➤ ")}}
-      | #[span(v-if="depth > 0") ⮡] {{ cls.name.slice(depth).join(" ➤ ")}}
+        //| {{ _class.name.join(" ➤ ")}}
+      | #[span(v-if="depth > 0") ⮡] {{ _class.name.slice(depth).join(" ➤ ")}}
     div.col-4.col-md-8
       //span.d-none.d-sm-inline.d-md-none(:style="{ marginLeft: (2 * depth) + 'em'}")
       span.d-none.d-md-inline
-        span(v-if="cls.rule.type === 'regex'") Rule ({{cls.rule.type}}): #[code {{cls.rule.regex}}]
+        span(v-if="_class.rule.type === 'regex'") Rule ({{_class.rule.type}}): #[code {{_class.rule.regex}}]
         span(v-else, style="color: #888") No rule
       span.float-right
         b-btn.ml-1(size="sm", variant="outline-secondary", @click="showEditModal()" style="border: 0;" pill)
           icon(name="edit")
-        b-btn.ml-1(size="sm", variant="outline-success", @click="addSubclass(cls)" style="border: 0;" pill)
+        b-btn.ml-1(size="sm", variant="outline-success", @click="addSubclass(_class)" style="border: 0;" pill)
           icon(name="plus")
   div
-    div.pa-2(v-for="child in cls.children", style="background: rgba(0, 0, 0, 0);", v-show="expanded")
-      CategoryEditTree(:cls="child", :depth="depth+1")
+    div.pa-2(v-for="child in _class.children", style="background: rgba(0, 0, 0, 0);", v-show="expanded")
+      CategoryEditTree(:_class="child", :depth="depth+1")
 
   b-modal(id="edit" ref="edit" title="Edit category" @show="resetModal" @hidden="resetModal" @ok="handleOk")
     div.my-1
@@ -41,7 +41,7 @@ div
     hr
 
     div.my-1
-      b-btn(variant="danger", @click="removeClass(cls); $refs.edit.hide()")
+      b-btn(variant="danger", @click="removeClass(_class); $refs.edit.hide()")
         icon(name="trash")
         | Remove category
 </template>
@@ -57,7 +57,7 @@ import 'vue-awesome/icons/edit';
 export default {
   name: 'CategoryEditTree',
   props: {
-    cls: Object,
+    _class: Object,
     depth: {
       type: Number,
       default: 0,
@@ -97,11 +97,11 @@ export default {
         rule: { type: 'regex', regex: 'FILL ME' },
       });
     },
-    removeClass: function(cls) {
+    removeClass: function(_class) {
       // TODO: Show a confirmation dialog
       // TODO: Remove children as well?
       // TODO: Move button to edit modal?
-      this.$store.commit('settings/removeClass', cls);
+      this.$store.commit('settings/removeClass', _class);
     },
     showEditModal() {
       this.$refs.edit.show();
@@ -137,10 +137,10 @@ export default {
     },
     resetModal() {
       this.editing = {
-        id: this.cls.id,
-        name: this.cls.subname,
-        rule: _.cloneDeep(this.cls.rule),
-        parent: this.cls.parent ? this.cls.parent : [],
+        id: this._class.id,
+        name: this._class.subname,
+        rule: _.cloneDeep(this._class.rule),
+        parent: this._class.parent ? this._class.parent : [],
       };
       //console.log(this.editing);
     },
@@ -149,7 +149,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.row.cls:hover {
+.row.class:hover {
   background-color: #eee;
   boder-radius: 5px;
 }

src/route.js

@@ -15,7 +15,7 @@ const Bucket = () => import('./views/Bucket.vue');
 const QueryExplorer = () => import('./views/QueryExplorer.vue');
 const Timeline = () => import('./views/Timeline.vue');
 const Log = () => import('./views/Log.vue');
-const Settings = () => import('./views/Settings.vue');
+const Settings = () => import('./views/settings/Settings.vue');
 const Stopwatch = () => import('./views/Stopwatch.vue');
 const Dev = () => import('./views/Dev.vue');
 

src/views/Settings.vue renamed to src/views/settings/CategorizationSettings.vue

@@ -1,38 +1,5 @@
 <template lang="pug">
 div
-  h3 Settings
-
-  b-alert(variant="warning", show) #[b Note:] These settings are only saved in your browser and will not remain if you switch browser. We are working on getting this fixed.
-
-  hr
-
-  div.row
-    div.col-sm-9
-      h5.mb-0 Start of day
-      small
-        | The time at which days "start", since humans don't always go to bed before midnight. Set to 04:00 by default.
-    div.col-sm-3
-      input.form-control(type="time" :value="startOfDay" @change="setStartOfDay($event.target.value)")
-
-  hr
-
-  div.row
-    div.col-sm-9
-      h5.mb-0 Duration default value
-      small
-        | The default duration used for 'show last' in the timeline view
-    div.col-sm-3
-      select(id="durationDefaultValue" :value="durationDefaultValue", @change="setDurationDefault($event.target.value)")
-            option(:value="15*60") 15min
-            option(:value="30*60") 30min
-            option(:value="60*60") 1h
-            option(:value="2*60*60") 2h
-            option(:value="4*60*60") 4h
-            option(:value="6*60*60") 6h
-            option(:value="12*60*60") 12h
-            option(:value="24*60*60") 24h
-  hr
-
   h5.d-inline-block
     div Categorization
   div.float-right
@@ -49,8 +16,8 @@ div
           | Save
         b-btn.ml-2(@click="resetClasses", variant="warning" size="sm")
           | Discard
-    div(v-for="cls in classes_hierarchy")
-      CategoryEditTree(:cls="cls")
+    div(v-for="_class in classes_hierarchy")
+      CategoryEditTree(:_class="_class")
 
   div.row
     div.col-sm-12
@@ -60,34 +27,23 @@ div
       b-btn.float-right(@click="saveClasses", variant="success" :disabled="!classes_unsaved_changes")
         | Save
 </template>
-
 <script>
-import CategoryEditTree from '~/components/CategoryEditTree.vue';
 import { mapState, mapGetters } from 'vuex';
+import CategoryEditTree from '~/components/CategoryEditTree.vue';
 
 export default {
-  name: 'Settings',
+  name: 'CategorizationSettings',
   components: {
     CategoryEditTree,
   },
-  data: () => {
-    return {
-      startOfDay: '',
-      durationDefaultValue: localStorage.durationDefault || 60 * 60,
-    };
-  },
   computed: {
     ...mapGetters('settings', ['classes_hierarchy']),
     ...mapState('settings', ['classes_unsaved_changes']),
   },
   mounted() {
-    this.startOfDay = localStorage.startOfDay;
     this.$store.dispatch('settings/load');
   },
   methods: {
-    setStartOfDay: function(time_minutes) {
-      localStorage.startOfDay = time_minutes;
-    },
     addClass: function() {
       this.$store.commit('settings/addClass', {
         name: ['New class'],
@@ -103,9 +59,6 @@ export default {
     restoreDefaultClasses: async function() {
       await this.$store.commit('settings/restoreDefaultClasses');
     },
-    setDurationDefault: function(duration) {
-      localStorage.durationDefault = duration;
-    },
   },
 };
 </script>

src/views/settings/DaystartSettings.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+div.row
+  div.col-sm-9
+    h5.mb-0 Start of day
+    small
+      | The time at which days "start", since humans don't always go to bed before midnight. Set to 04:00 by default.
+  div.col-sm-3
+    input.form-control(type="time" :value="startOfDay" @change="setStartOfDay($event.target.value)")
+</template>
+<script>
+export default {
+  name: 'DaystartSettings',
+  data: () => {
+    return {
+      startOfDay: '',
+    };
+  },
+  mounted() {
+    this.startOfDay = localStorage.startOfDay;
+  },
+  methods: {
+    setStartOfDay: function(time_minutes) {
+      localStorage.startOfDay = time_minutes;
+      console.log('Set start of day to ' + time_minutes);
+    },
+  },
+};
+</script>

src/views/settings/Settings.vue

@@ -0,0 +1,34 @@
+<template lang="pug">
+div
+  h3 Settings
+
+  b-alert(variant="warning", show) #[b Note:] These settings are only saved in your browser and will not remain if you switch browser. We are working on getting this fixed.
+
+  hr
+
+  DaystartSettings
+
+  hr
+
+  TimelineDurationSettings
+
+  hr
+
+  CategorizationSettings
+
+</template>
+
+<script>
+import DaystartSettings from '~/views/settings/DaystartSettings.vue';
+import TimelineDurationSettings from '~/views/settings/TimelineDurationSettings.vue';
+import CategorizationSettings from '~/views/settings/CategorizationSettings.vue';
+
+export default {
+  name: 'Settings',
+  components: {
+    DaystartSettings,
+    TimelineDurationSettings,
+    CategorizationSettings,
+  },
+};
+</script>

src/views/settings/TimelineDurationSettings.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+div.row
+  div.col-sm-9
+    h5.mb-0 Duration default value
+    small
+      | The default duration used for 'show last' in the timeline view
+  div.col-sm-3
+    select(id="durationDefaultValue" :value="durationDefaultValue", @change="setDurationDefault($event.target.value)")
+          option(:value="15*60") 15min
+          option(:value="30*60") 30min
+          option(:value="60*60") 1h
+          option(:value="2*60*60") 2h
+          option(:value="4*60*60") 4h
+          option(:value="6*60*60") 6h
+          option(:value="12*60*60") 12h
+          option(:value="24*60*60") 24h
+</template>
+<script>
+export default {
+  name: 'TimelineDurationSettings',
+  data: () => {
+    return {
+      durationDefaultValue: localStorage.durationDefault || 60 * 60,
+    };
+  },
+  mounted() {
+    this.startOfDay = localStorage.startOfDay;
+  },
+  methods: {
+    setDurationDefault: function(duration) {
+      localStorage.durationDefault = duration;
+      console.log('Set default timeline duration to ' + duration);
+    },
+  },
+};
+</script>