Add duration summary of all entries

add setSeconds method to useTimer usable

README.md

@@ -6,6 +6,7 @@ Simple app to tracking work time. It uses [TeamWork API](https://developer.teamw
 - [x] start, pause, complete, delete timers
 - [x] search tasks
 - [x] modify description of timers
+- [x] display total duration of current timers
 - [ ] recent tasks - allows to quick run timer on the recent tasks (e.g. from the last week)
 
 ## Challenges

src/components/EntryTotal.vue

@@ -15,15 +15,13 @@ export default {
     }
   },
   setup(props) {
-    const { seconds, start, pause } = useTimer(
-      getTotalDurationForEntry(props.entry),
-      props.entry.running
-    );
+    const { seconds, start, pause, setSeconds } = useTimer(0);
 
     watch(
-      () => props.entry.running,
-      running => {
-        if (running) start();
+      () => props.entry,
+      entry => {
+        setSeconds(getTotalDurationForEntry(entry));
+        if (entry.running) start();
         else pause();
       }
     );

src/components/TaskSearch.vue

@@ -8,7 +8,6 @@
       @typing="search"
       :loading="isLoading"
       placeholder="Search task"
-      icon="magnify"
       clearable
       ref="autocomplete"
       @select="option => (selected = option)"
@@ -75,7 +74,6 @@ export default {
 <style lang="scss">
 .task-search {
   display: flex;
-  margin-bottom: 0.5 * $gap;
   &__input {
     flex: 1;
   }

src/components/TimeSummary.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>{{ seconds | formatSeconds }}</div>
+</template>
+
+<script>
+import { watch } from "@vue/composition-api";
+import store from "@/store";
+import {
+  getTotalDurationForEntries,
+  isAnyEntryRunning
+} from "@/utils/entriesUtils";
+import useTimer from "@/usables/useTimer";
+export default {
+  setup() {
+    const { seconds, start, pause, setSeconds } = useTimer(0);
+
+    watch(
+      () => store.getters.parsedTimers,
+      updatedTimers => {
+        setSeconds(getTotalDurationForEntries(updatedTimers));
+        if (isAnyEntryRunning(updatedTimers)) start();
+        else pause();
+      }
+    );
+
+    return { seconds };
+  }
+};
+</script>

src/usables/useTimer.js

@@ -20,6 +20,7 @@ export default function(initialSeconds, running) {
   const pause = () => {
     enabled.value = false;
   };
+  const setSeconds = input => (seconds.value = input);
 
-  return { seconds, start, pause };
+  return { seconds, start, pause, setSeconds };
 }

src/utils/entriesUtils.js

@@ -8,3 +8,14 @@ export function getTotalDurationForEntry(entry) {
     differenceInSeconds(new Date(), parseJSON(lastInterval.from))
   );
 }
+
+export function getTotalDurationForEntries(entries) {
+  return entries.reduce(
+    (acc, entry) => acc + getTotalDurationForEntry(entry),
+    0
+  );
+}
+
+export function isAnyEntryRunning(entries) {
+  return entries.some(entry => entry.running);
+}

src/views/Tracker.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="tracker-container" ref="root">
     <div class="tracker">
-      <task-search />
+      <div class="tracker__header">
+        <task-search class="tracker__search" />
+        <time-summary class="tracker__summary" />
+      </div>
 
       <div
         class="has-text-danger has-text-centered"
@@ -39,6 +42,7 @@
 import Options from "@/components/Options";
 import TimeEntry from "@/components/TimeEntry";
 import TaskSearch from "@/components/TaskSearch";
+import TimeSummary from "@/components/TimeSummary";
 import { ModalProgrammatic } from "buefy";
 import { ref, computed } from "@vue/composition-api";
 import store from "@/store";
@@ -47,7 +51,8 @@ export default {
   name: "Tracker",
   components: {
     TimeEntry,
-    TaskSearch
+    TaskSearch,
+    TimeSummary
   },
   setup() {
     const root = ref(null);
@@ -100,11 +105,31 @@ export default {
     min-height: unset;
   }
 
+  &__header {
+    display: flex;
+    margin-bottom: 0.5 * $gap;
+  }
+
+  &__search {
+    flex: 1;
+  }
+
+  &__summary {
+    font-size: $size-4;
+    display: flex;
+    align-items: center;
+
+    @include mobile() {
+      font-size: $size-6;
+    }
+  }
+
   &__entries {
     position: relative;
     min-height: 3 * $gap;
     flex: 1;
   }
+
   &__footer {
     display: flex;
     justify-content: space-between;