refacto task record metadat

src/modules/record/components/TaskRecord.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
-import { formatDiffInMinutes, formatLongDate } from '@/shared/format-date'
+import { formatLongDate } from '@/shared/format-date'
 import { toISODate } from '@/shared/types/date'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { computed } from 'vue'
+import { useTaskRecordMetadata } from '../hooks/useTaskRecordMetadata'
 import { useTaskRecordStore } from '../stores/useTaskRecordStore'
 import StepRecord from './StepRecord.vue'
 
@@ -20,6 +21,7 @@ const task = computed(() => taskStore.getTask(props.taskId))
 const record = computed(() =>
   recordStore.createAndRetrieveTaskRecord(props.taskId, props.recordId)
 )
+const { duration } = useTaskRecordMetadata(record)
 
 const getNextStepId = () => {
   if (!task.value) {
@@ -76,14 +78,6 @@ whenever(n, () => {
   nextStep()
 })
 
-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

src/modules/record/components/TaskRecordLink.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { formatDate } from '@/shared/format-date'
+import { useTaskRecordMetadata } from '../hooks/useTaskRecordMetadata'
+import type { TaskRecord } from '../models/task-record'
+
+const props = defineProps<{
+  record: TaskRecord
+}>()
+
+const { duration } = useTaskRecordMetadata(props.record)
+</script>
+
+<template>
+  <span>
+    <router-link
+      class="task-record-link"
+      :to="{
+        name: 'record-view',
+        params: { taskId: record.taskId, recordId: record.id }
+      }"
+      >{{ formatDate(record.start) }}</router-link
+    >
+    {{ duration }} minutes
+  </span>
+</template>
+
+<style scoped lang="scss">
+.task-record-link {
+}
+</style>

src/modules/record/components/TaskRecordList.vue

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

src/modules/record/hooks/useTaskRecordMetadata.ts

@@ -0,0 +1,18 @@
+import { formatDiffInMinutes } from '@/shared/format-date'
+import { computed, isRef, type Ref } from 'vue'
+import type { TaskRecord } from '../models/task-record'
+
+export const useTaskRecordMetadata = (record: TaskRecord | Ref<TaskRecord>) => {
+  const duration = computed(() => {
+    const recordValue = isRef(record) ? record.value : record
+    if (!recordValue?.end) {
+      return null
+    }
+
+    return formatDiffInMinutes(recordValue.start, recordValue?.end)
+  })
+
+  return {
+    duration
+  }
+}