format duration in minutes (seconds)

src/modules/record/components/StepRecord.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
+import { formatDiffInMinutes } from '@/shared/format-date'
 import { toISODate } from '@/shared/types/date'
 import { computed, onUnmounted, ref } from 'vue'
 import { useTaskRecordStore } from '../stores/useTaskRecordStore'
@@ -18,6 +19,7 @@ const step = computed(() => taskStore.getStep(props.taskId, props.stepId))
 const stepRecord = computed(() =>
   recordStore.getStepRecord(props.recordId, props.stepId)
 )
+const isCurrentStep = computed(() => recordStore.currentStepId === props.stepId)
 
 const now = ref(toISODate(new Date()))
 
@@ -32,12 +34,11 @@ const duration = computed(() => {
     return null
   }
 
-  const diffInMs =
-    new Date(stepRecord.value?.end ?? now.value).getTime() -
-    new Date(stepRecord.value.start).getTime()
-
   // TODO: diff in minutes not in seconds
-  return Math.round(diffInMs / 1000)
+  return formatDiffInMinutes(
+    stepRecord.value.start,
+    stepRecord.value?.end ?? now.value
+  )
 })
 
 const isSuperiorToEstimation = computed(() => {
@@ -50,11 +51,7 @@ const isSuperiorToEstimation = computed(() => {
 </script>
 
 <template>
-  <tr
+  <tr v-if="step" class="step-record" :class="{ current: isCurrentStep }">
-    v-if="step"
-    class="step-record"
-    :class="{ current: recordStore.currentStepId === stepId }"
-  >
     <td>{{ stepNumber }}</td>
     <td>{{ step.title }}</td>
     <td class="estimation">{{ step.estimation }} minutes</td>

src/modules/record/components/TaskRecord.vue

@@ -26,7 +26,8 @@ const getNextStepId = () => {
   }
 
   if (!recordStore.currentStepId) {
-    return task.value.steps[0].id
+    const [firstStep] = task.value.steps
+    return firstStep.id
   }
 
   const currentStepIndex = task.value.steps.findIndex(
@@ -73,7 +74,12 @@ const nextStep = () => {
   <div class="task-record" v-if="task">
     <h1>Task: {{ task.title }}</h1>
     <h2>start time: {{ formatDate(record.start) }}</h2>
-    <button v-if="!record.hasStepRecords" @click="startRecording">start</button>
+    <button
+      v-if="!recordStore.currentStepId && !record.hasStepRecords"
+      @click="startRecording"
+    >
+      start
+    </button>
     <button v-else @click="nextStep">next</button>
     <button @click="recordStore.$reset">reset</button>
     <table>

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

@@ -1,3 +1,4 @@
+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'
@@ -17,10 +18,7 @@ export class TaskRecord implements Recordable {
       return null
     }
 
-    const durationMilliseconds =
+    return formatDiffInMinutes(this.start, this.end)
-      new Date(this.end).getTime() - new Date(this.start).getTime()
-
-    return Math.round(durationMilliseconds / (1000 * 60))
   }
 
   public get hasStepRecords() {

src/shared/format-date.ts

@@ -1,2 +1,9 @@
+import type { ISODate } from './types/date'
+
 export const formatDate = (date: Date | string) =>
   new Date(date).toLocaleString()
+
+export const formatDiffInMinutes = (date1: ISODate, date2: ISODate) => {
+  const diffInMs = new Date(date2).getTime() - new Date(date1).getTime()
+  return Math.max(0, Math.round(diffInMs / 1000))
+}