Allow to quick run new entry based on recent tasks

fix tracker entries for loop - set correct key

README.md

@@ -7,7 +7,7 @@ Simple app to tracking work time. It uses [TeamWork API](https://developer.teamw
 - [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)
+- [x] recent tasks - allows to quick run timer on the recent tasks (e.g. from the last week)
 
 ## Challenges
 CORS - if you want to use this application directly in your browser, you must enable cross-origin requests. The easiest way to do this is to build your proxy server. I used [CORS Anywhere](https://github.com/Rob--W/cors-anywhere) project. My proxy server is on heroku and is available [here](https://time-tracker-cors-anywhere.herokuapp.com/).

package.json

@@ -15,6 +15,7 @@
     "core-js": "^3.6.4",
     "date-fns": "^2.12.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.uniqby": "^4.7.0",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5",

src/components/RecentTasks.vue

@@ -0,0 +1,70 @@
+<template>
+  <section class="section has-background-white">
+    <h3 class="has-text-centered is-size-5">Recent tasks</h3>
+    <div v-for="task in recentTasks" :key="task.id" class="task">
+      <div class="task__info">
+        <div class="is-size-7">{{ task.project.name }}</div>
+        <div class="is-size-6">{{ task.task.name }}</div>
+      </div>
+      <div>
+        <b-button class="is-white" @click="createEntry(task)">
+          <b-icon pack="fas" icon="stopwatch"></b-icon>
+        </b-button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { ref } from "@vue/composition-api";
+import { allTimeEntries } from "@/services/timeTracking";
+import store from "@/store";
+import uniqBy from "lodash.uniqby";
+export default {
+  setup(props, context) {
+    const recentTasks = ref([]);
+
+    const removeDuplicatedEntries = entries => {
+      return uniqBy(entries, "taskId");
+    };
+
+    const updateEntryWithIncluded = (entry, included) => {
+      const project = included.projects[entry.projectId];
+      const task = included.tasks[entry.taskId];
+      entry.project = project;
+      entry.task = task;
+      return entry;
+    };
+
+    allTimeEntries().then(response => {
+      const entriesWithoutDuplicates = removeDuplicatedEntries(
+        response.timelogs
+      );
+      recentTasks.value = entriesWithoutDuplicates.map(entry =>
+        updateEntryWithIncluded(entry, response.included)
+      );
+    });
+
+    const createEntry = entry => {
+      store.dispatch("createEntry", {
+        id: entry.taskId,
+        projectId: entry.projectId
+      });
+
+      context.parent.close();
+    };
+
+    return { recentTasks, createEntry };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.task {
+  display: flex;
+  margin: 0.5 * $gap 0;
+  &__info {
+    flex: 1;
+  }
+}
+</style>

src/services/timeTracking.js

@@ -53,3 +53,15 @@ export function remove({ id }) {
     method: METHODS.DELETE
   });
 }
+
+export function allTimeEntries() {
+  return request({
+    url: `/projects/api/v3/time.json`,
+    method: METHODS.GET,
+    params: {
+      include: "projects,tasks,tasks.tasklists,tasks.parentTasks",
+      pageSize: 1000,
+      orderMode: "desc"
+    }
+  });
+}

src/styles/main.scss

@@ -34,4 +34,12 @@ $dropdown-content-max-height: 75vh;
 
 // Import Bulma and Buefy styles
 @import "~bulma";
-@import "~buefy/src/scss/buefy";
+@import "~buefy/src/scss/buefy";
+
+.fullscreen-modal {
+    .modal-close {
+        &:before, &:after{
+            background: $black;
+        }
+    }
+}

src/views/Tracker.vue

@@ -15,16 +15,22 @@
 
       <div class="tracker__entries" ref="trackerEntries">
         <time-entry
-          v-for="(entry, index) in parsedTimers"
-          :key="index"
+          v-for="entry in parsedTimers"
+          :key="entry.id"
           :entry="entry"
         />
       </div>
 
       <div class="tracker__footer">
-        <b-button class="is-white" @click="openOptionsModal">
-          <b-icon pack="fas" icon="cogs"></b-icon>
-        </b-button>
+        <div>
+          <b-button class="is-white" @click="openOptionsModal">
+            <b-icon pack="fas" icon="cogs"></b-icon>
+          </b-button>
+          <b-button class="is-white" @click="openRecentTasksModal">
+            recent tasks
+          </b-button>
+        </div>
+
         <b-button
           tag="a"
           target="_blank"
@@ -40,6 +46,7 @@
 
 <script>
 import Options from "@/components/Options";
+import RecentTasks from "@/components/RecentTasks";
 import TimeEntry from "@/components/TimeEntry";
 import TaskSearch from "@/components/TaskSearch";
 import TimeSummary from "@/components/TimeSummary";
@@ -65,6 +72,14 @@ export default {
       });
     };
 
+    const openRecentTasksModal = () => {
+      ModalProgrammatic.open({
+        component: RecentTasks,
+        fullScreen: true,
+        customClass: "fullscreen-modal"
+      });
+    };
+
     const parsedTimers = computed(() => store.getters.parsedTimers);
     const isRequiredOptionsProvided = computed(
       () => store.getters.isRequiredOptionsProvided
@@ -73,6 +88,7 @@ export default {
     return {
       root,
       openOptionsModal,
+      openRecentTasksModal,
       parsedTimers,
       isRequiredOptionsProvided
     };

yarn.lock

@@ -6428,6 +6428,11 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
+lodash.uniqby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
+  integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
+
 lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4, lodash@~4.17.12:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"