Tasks: list task by AppStore

frontend/src/components/TaskRecord.vue

@@ -1,13 +1,7 @@
 <script setup>
 import { computed } from 'vue'
 
-const props = defineProps({
-  title: String,
-  project: String,
-  client: String,
-  timeStart: Date,
-  timeEnd: Date
-})
+const props = defineProps(['task'])
 
 function normalizeTime(time) {
   let d = new Date(Number(time))
@@ -28,45 +22,53 @@ function formatDuration(durationInSeconds) {
   return `${h}:${m}:${s}`
 }
 
-const normalizedTimeStart = computed(() => normalizeTime(props.timeStart))
-const normalizedTimeEnd = computed(() => normalizeTime(props.timeEnd))
+const normalizedTimeStart = computed(() => normalizeTime(props.task.timeStart))
+const normalizedTimeEnd = computed(() => normalizeTime(props.task.timeEnd))
 
-const durationInSeconds = computed(() => Math.floor((props.timeEnd - props.timeStart) / 1000))
+const durationInSeconds = computed(() =>
+  Math.floor((props.task.timeEnd - props.task.timeStart) / 1000)
+)
 const normalizedDuration = computed(() => formatDuration(durationInSeconds.value))
+console.log(props.task.title)
 </script>
 
 <template>
-  <div class="task-wrapper">
-    <div class="task">
-      <span>
-        <input
-          type="text"
-          class="title"
-          placeholder="What are you working on?"
-          value="Making frontend"
-        />
-      </span>
-      <span>
-        <p>{{ project }}</p>
-        <p>{{ client }}</p>
-      </span>
-      <span>
-        <img src="/src/assets/svg/dollar.svg" alt="" />
-      </span>
-      <span>
-        <input type="time" :value="normalizedTimeStart" />
-        <p>-</p>
-        <input type="time" :value="normalizedTimeEnd" />
-      </span>
-      <span>
-        <input type="text" :value="normalizedDuration" :size="normalizedDuration.length + 1" />
-      </span>
-      <span>
-        <img src="/src/assets/svg/play.svg" alt="" />
-      </span>
-      <span>
-        <img src="/src/assets/svg/dots.svg" alt="" />
-      </span>
-    </div>
+  <div class="task">
+    <span>
+      <input
+        type="text"
+        class="title"
+        placeholder="What are you working on?"
+        :value="props.task.title"
+        :size="props.task.title.length + 1"
+      />
+    </span>
+    <span>
+      <p>{{ props.task.project }}</p>
+      <p>{{ props.task.client }}</p>
+    </span>
+    <!--
+    <span>
+      <img src="/src/assets/svg/dollar.svg" alt="" />
+    </span>
+    -->
+    <span>
+      <input type="time" :value="normalizedTimeStart" />
+      <p>-</p>
+      <input type="time" :value="normalizedTimeEnd" />
+    </span>
+    <span>
+      <input type="text" :value="normalizedDuration" />
+    </span>
+    <!--
+    <span>
+      <img src="/src/assets/svg/play.svg" alt="" />
+    </span>
+    <span>
+      <img src="/src/assets/svg/dots.svg" alt="" />
+    </span>
+    -->
   </div>
 </template>
+
+<script></script>

frontend/src/components/TrackerTask.vue

@@ -1,19 +0,0 @@
-<script setup>
-import TaskHeader from '@/components/TaskHeader.vue'
-import TaskRecord from '@/components/TaskRecord.vue'
-
-defineProps({
-  title: String,
-  project: String,
-  client: String,
-  timeStart: Date,
-  timeEnd: Date
-})
-</script>
-
-<template>
-  <div class="task-day-wrapper">
-    <TaskHeader />
-    <TaskRecord v-bind="$props" />
-  </div>
-</template>

frontend/src/stores/AppStore.js

@@ -8,6 +8,7 @@ export default {
     newTask: {},
     fetchedTasks: [
       {
+        _id: 1,
         title: 'frontend',
         project: 'TiM',
         client: 'Filip Rojek',
@@ -15,6 +16,7 @@ export default {
         timeEnd: 1703960141414
       },
       {
+        _id: 2,
         title: 'setting up',
         project: 'l2tp vpn',
         client: 'IS Media',

frontend/src/views/TrackerView.vue

@@ -1,18 +1,30 @@
 <script setup>
 import TrackerTimer from '@/components/TrackerTimer.vue'
-import TrackerTask from '@/components/TrackerTask.vue'
+import TaskHeader from '@/components/TaskHeader.vue'
+import TaskRecord from '@/components/TaskRecord.vue'
 </script>
 
 <template>
   <main>
     <TrackerTimer />
-    <TrackerTask
-      client="Filip Rojek"
-      project="TiM"
-      time-start="1703960133061"
-      time-end="1703960141414"
-    />
+
+    <div class="task-day-wrapper">
+      <TaskHeader />
+      <div class="task-wrapper" v-for="task in tasks" :key="task._id">
+        <TaskRecord :task="task" />
+      </div>
+    </div>
   </main>
 </template>
 
-<script></script>
+<script>
+import AppStore from '@/stores/AppStore'
+
+export default {
+  data() {
+    return {
+      tasks: AppStore.data.fetchedTasks
+    }
+  }
+}
+</script>