fix: fix timeline updating before new range is selected (#449 from activitywatch)

Author: billangli

src/components/InputTimeInterval.vue

@@ -1,80 +1,91 @@
 <template lang="pug">
 div
   div
-    table
-      tr
-        th.pr-2
-          label(for="mode") Interval mode:
-        td
-          select(id="mode" v-model="mode")
-            option(value='last_duration') Last duration
-            option(value='range') Date range
-      tr(v-if="mode == 'last_duration'")
-        th.pr-2
-          label(for="duration") Show last:
-        td
-          select(id="duration" :value="duration", @change="valueChanged")
-            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
-      tr(v-if="mode == 'range'")
-        th.pr-2 Range:
-        td
-          input(type="date", v-model="start", @input="valueChanged")
-          input(type="date", v-model="end", @input="valueChanged")
+    div(class="settings-bar")
+      div
+        label(for="mode") Interval mode:
+        select(id="mode" v-model="mode")
+          option(value='last_duration') Last duration
+          option(value='range') Date range
+      div(v-if="mode == 'last_duration'")
+        label(for="duration") Show last:
+        select(id="duration" :value="duration" @change="changeDuration")
+          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
+      div(v-if="mode == 'range'")
+        | Range:
+        input(type="date", v-model="start")
+        input(type="date", v-model="end")
+      div
+        button.btn.btn-outline-dark(
+          type="button", 
+          :disabled="invalidDaterange || emptyDaterange",
+          @click="showTimeline"
+        ) Show Timeline
+    div(:style="{ color: 'red', visibility: invalidDaterange ? 'visible' : 'hidden' }")
+      | The selected date range is invalid.
 
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.settings-bar {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
 
 <script>
 import moment from 'moment';
 
 export default {
   name: 'input-timeinterval',
   props: {
-    duration: {
+    defaultDuration: {
       type: Number,
       default: 60 * 60,
     },
   },
   data: () => {
     return {
-      now: moment(),
       mode: 'last_duration',
+      duration: null,
       start: null,
       end: null,
     };
+  },  
+  mounted: function() {
+    this.duration = this.defaultDuration;
   },
   computed: {
-    value: {
+    daterange: {
       get() {
         if (this.mode == 'range' && this.start && this.end) {
           return [moment(this.start), moment(this.end)];
         } else {
-          return [moment(this.now).subtract(this.duration, 'seconds'), moment(this.now)];
-        }
-      },
-      set(newValue) {
-        if (!isNaN(newValue)) {
-          // Set new now and duration
-          this.now = moment();
-          this.duration = newValue;
-        } else {
-          // Not required for mode='range', start and end set directly through v-model
+          return [moment().subtract(this.duration, 'seconds'), moment()];
         }
       },
     },
+    emptyDaterange() {
+      return this.mode == 'range' && !(this.start && this.end);
+    },
+    invalidDaterange() {
+      return this.mode == 'range' && moment(this.start) >= moment(this.end);
+    },
   },
   methods: {
-    valueChanged(e) {
-      this.value = e.target.value;
-      this.$emit('input', this.value);
+    showTimeline() {
+      this.$emit('update-timeline', this.daterange);
+    },
+    changeDuration(e) {
+      // This is only for last_duration, range mode changes daterange automatically
+      this.duration = e.target.value;
     },
   },
 };

src/views/Bucket.vue

@@ -24,7 +24,7 @@ div
       th Eventcount:
       td {{ eventcount }}
 
-  input-timeinterval(v-model="daterange")
+  input-timeinterval(v-model="daterange", @update-timeline="updateTimeline")
 
   vis-timeline(:buckets="[bucket_with_events]", :showRowLabels="false")
 
@@ -52,11 +52,6 @@ export default {
       return this.$store.getters['buckets/getBucket'](this.id) || {};
     },
   },
-  watch: {
-    daterange: async function() {
-      await this.getEvents(this.id);
-    },
-  },
   mounted: async function() {
     await this.$store.dispatch('buckets/ensureBuckets');
     await this.getEvents(this.id);
@@ -84,6 +79,10 @@ export default {
         console.error(':(');
       }
     },
+    updateTimeline: async function(daterange) {
+      this.daterange = daterange;
+      await this.getEvents(this.id);
+    }
   },
 };
 </script>

src/views/Timeline.vue

@@ -2,7 +2,7 @@
 div
   h2 Timeline
 
-  input-timeinterval(v-model="daterange", v-bind:duration="timeintervalDefaultDuration")
+  input-timeinterval(v-model="daterange", :defaultDuration="timeintervalDefaultDuration", @update-timeline="getBuckets")
 
   div(v-show="buckets !== null")
     div
@@ -25,7 +25,7 @@ export default {
   data: () => {
     return {
       buckets: null,
-      daterange: [moment().subtract(1, 'hour'), moment()],
+      daterange: null,
       timeintervalDefaultDuration: localStorage.durationDefault,
     };
   },
@@ -34,16 +34,13 @@ export default {
       return _.sumBy(this.buckets, 'events.length');
     },
   },
-  watch: {
-    daterange() {
-      this.getBuckets();
-    },
-  },
   mounted: function() {
-    this.getBuckets();
+    this.daterange = [moment().subtract(this.timeintervalDefaultDuration, "seconds"), moment()],
+    this.getBuckets(this.daterange);
   },
   methods: {
-    getBuckets: async function() {
+    getBuckets: async function(daterange) {
+      this.daterange = daterange;
       this.buckets = await this.$store.dispatch('buckets/getBucketsWithEvents', {
         start: this.daterange[0].format(),
         end: this.daterange[1].format(),