a message when finished and access to old records

src/modules/record/components/StepRecord.vue

@@ -34,7 +34,6 @@ const duration = computed(() => {
     return null
   }
 
-  // TODO: diff in minutes not in seconds
   return formatDiffInMinutes(
     stepRecord.value.start,
     stepRecord.value?.end ?? now.value
@@ -59,11 +58,14 @@ const isSuperiorToEstimation = computed(() => {
       <span v-if="isSuperiorToEstimation">⚠️</span>
       {{ duration }} minutes
     </td>
-    <td v-else>NA</td>
+    <td v-else></td>
   </tr>
 </template>
 
 <style scoped lang="scss">
 .step-record {
+  &.current {
+    background-color: rgb(4, 62, 62);
+  }
 }
 </style>

src/modules/record/components/TaskRecord.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
-import { formatDate } from '@/shared/format-date'
+import { formatDate, formatDiffInMinutes } from '@/shared/format-date'
 import { toISODate } from '@/shared/types/date'
 import { computed } from 'vue'
 import { useTaskRecordStore } from '../stores/useTaskRecordStore'
@@ -68,12 +68,29 @@ const nextStep = () => {
     tick: toISODate(new Date())
   })
 }
+
+const duration = computed(() => {
+  if (!record.value?.end) {
+    return null
+  }
+
+  return formatDiffInMinutes(record.value.start, record.value?.end)
+})
+
+const isSuperiorToEstimation = computed(() => {
+  if (!task.value || !record.value || !duration.value) {
+    return false
+  }
+
+  return duration.value > task.value.totalEstimation
+})
 </script>
 
 <template>
-  <div class="task-record" v-if="task">
+  <main class="task-record" v-if="task">
     <h1>Task: {{ task.title }}</h1>
     <h2>start time: {{ formatDate(record.start) }}</h2>
+    <template v-if="!record.end">
       <button
         v-if="!recordStore.currentStepId && !record.hasStepRecords"
         @click="startRecording"
@@ -81,12 +98,14 @@ const nextStep = () => {
         start
       </button>
       <button v-else @click="nextStep">next</button>
+    </template>
+
     <button @click="recordStore.$reset">reset</button>
     <table>
       <thead>
         <tr>
           <th>#</th>
-          <th>Task</th>
+          <th>task</th>
           <th>estimation</th>
           <th>actual</th>
         </tr>
@@ -102,17 +121,22 @@ const nextStep = () => {
         />
       </tbody>
     </table>
+    <div v-if="record.end">
+      <hr />
+      The task took {{ duration }} minutes instead of
+      {{ task.totalEstimation }} minutes.
+      <span>
+        <span v-if="isSuperiorToEstimation">More</span><span v-else>Less</span>
+        than expected.
+      </span>
     </div>
+  </main>
 </template>
 
 <style scoped lang="scss">
 .task-record {
-  .current {
+  table {
-    background-color: red;
+    width: 100%;
-  }
-
-  .estimation {
-    font-style: italic;
   }
 }
 </style>

src/modules/record/components/TaskRecordList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { createUuid } from '@/shared/create-uuid'
+import { formatDate } from '@/shared/format-date'
 import { useTaskRecordStore } from '../stores/useTaskRecordStore'
 
 const props = defineProps<{
@@ -13,11 +14,17 @@ const newRecordId = createUuid()
 </script>
 
 <template>
-  <ul v-if="records.length" class="task-record-list">
+  <ol v-if="records.length" class="task-record-list">
     <li v-for="record in records" :key="record.id">
-      {{ record }}
+      <router-link
+        :to="{
+          name: 'record-view',
+          params: { taskId, recordId: record.id }
+        }"
+        >{{ formatDate(record.start) }}</router-link
+      >
     </li>
-  </ul>
+  </ol>
   <div v-else>No record yet</div>
   <router-link
     :to="{

src/modules/record/interfaces/recordable.ts

@@ -9,10 +9,6 @@ export interface Recordable {
    * TODO: Compute this data from step records
    */
   start: ISODate
-  /**
-   * @deprecated
-   * TODO: Compute this data from step records
-   */
   end?: ISODate
   stepRecords: Record<string, StepRecordable>
 }

src/modules/record/models/task-record.ts

@@ -1,4 +1,3 @@
-import { formatDiffInMinutes } from '@/shared/format-date'
 import { toISODate, type ISODate } from '@/shared/types/date'
 import type { Recordable } from '../interfaces/recordable'
 import type { StepRecordable } from '../interfaces/step-recordable'
@@ -13,14 +12,6 @@ export class TaskRecord implements Recordable {
     public readonly taskId: string
   ) {}
 
-  public get duration(): number | null {
-    if (!this.end) {
-      return null
-    }
-
-    return formatDiffInMinutes(this.start, this.end)
-  }
-
   public get hasStepRecords() {
     return Object.values(this.stepRecords).length > 0
   }

src/shared/format-date.ts

@@ -5,5 +5,6 @@ export const formatDate = (date: Date | string) =>
 
 export const formatDiffInMinutes = (date1: ISODate, date2: ISODate) => {
   const diffInMs = new Date(date2).getTime() - new Date(date1).getTime()
+  // TODO: diff in minutes not in seconds
   return Math.max(0, Math.round(diffInMs / 1000))
 }

src/views/task/TaskView.vue

@@ -28,6 +28,7 @@ const task = computed(() => taskStore.getTask(props.id))
         <div>{{ step.title }} | {{ step.estimation }}</div>
       </li>
     </ul>
+    <hr />
     <task-record-list :task-id="id" />
   </div>
   <div v-else>Task not found</div>