init the start of a record

src/modules/record/components/TaskRecord.vue

@@ -1,14 +1,32 @@
 <script setup lang="ts">
+import { useTaskStore } from '@/modules/task/stores/useTask.store'
+import { useTaskRecordStore } from '../stores/useTaskRecordStore'
+
 const props = defineProps<{
   taskId: string
+  recordId: string
 }>()
+
+const taskStore = useTaskStore()
+const recordStore = useTaskRecordStore()
+
+const task = taskStore.getTask(props.taskId)
+
+const record = recordStore.createAndRetriveTaskRecord(
+  props.taskId,
+  props.recordId
+)
 </script>
 
 <template>
-  <div class="task-record"></div>
+  <div class="task-record">
+    <pre>{{ task }}</pre>
+    <pre>{{ record }}</pre>
+  </div>
 </template>
 
 <style scoped lang="scss">
 .task-record {
+  display: flex;
 }
 </style>

src/modules/record/components/TaskRecordList.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { createUuid } from '@/shared/create-uuid'
+import { useTaskRecordStore } from '../stores/useTaskRecordStore'
+
+const props = defineProps<{
+  taskId: string
+}>()
+
+const recordStore = useTaskRecordStore()
+
+const records = recordStore.getTaskRecords(props.taskId)
+const newRecordId = createUuid()
+</script>
+
+<template>
+  <ul v-if="records.length" class="task-record-list">
+    <li v-for="record in records" :key="record.id">
+      {{ record }}
+    </li>
+  </ul>
+  <div v-else>No record yet</div>
+  <router-link
+    :to="{
+      name: 'record-view',
+      params: { taskId, recordId: newRecordId }
+    }"
+    >start a new record</router-link
+  >
+</template>
+
+<style scoped lang="scss">
+.task-record-list {
+}
+</style>

src/modules/record/interfaces/recordable.ts

@@ -4,7 +4,15 @@ import type { StepRecordable } from './step-recordable'
 export interface Recordable {
   id: string
   taskId: string
+  /**
+   * @deprecated
+   * 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/stores/useTaskRecordStore.ts

@@ -7,6 +7,7 @@ import { TaskRecord } from '../models/task-record'
 type RecordId = string
 
 export interface TaskRecordStoreState {
+  currentStepId: string | null
   records: { [recordId: string]: Recordable }
   taskRecordMaps: { [taskId: string]: RecordId[] }
 }
@@ -14,6 +15,7 @@ export interface TaskRecordStoreState {
 export const useTaskRecordStore = defineStore('task-record-store', {
   persist: true,
   state: (): TaskRecordStoreState => ({
+    currentStepId: null,
     records: {},
     taskRecordMaps: {}
   }),
@@ -41,10 +43,17 @@ export const useTaskRecordStore = defineStore('task-record-store', {
       stepId: string
       start: ISODate
     }) {
+      const record = this.records[params.recordId]
+
+      if (Object.values(record.stepRecords).length === 0) {
+        record.start = params.start
+      }
+
       this.records[params.recordId].stepRecords[params.stepId] = {
         problems: [],
         start: params.start
       }
+      this.currentStepId = params.stepId
     },
     endStepRecord(params: { recordId: string; stepId: string; end: ISODate }) {
       const stepRecord =
@@ -73,6 +82,9 @@ export const useTaskRecordStore = defineStore('task-record-store', {
         start: params.tick
       })
     },
+    endRecord() {
+      this.currentStepId = null
+    },
     addProblemToStepRecord(recordId: string, stepId: string, problem: string) {
       const stepRecord = this.getStepRecord(recordId, stepId)
 

src/router/index.ts

@@ -24,6 +24,12 @@ export const router = createRouter({
       name: 'task-view',
       props: true,
       component: () => import('../views/task/TaskView.vue')
+    },
+    {
+      path: '/task/:taskId/records/:recordId',
+      name: 'record-view',
+      props: true,
+      component: () => import('../views/record/RecordView.vue')
     }
   ]
 })

src/views/record/RecordView.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import TaskRecord from '@/modules/record/components/TaskRecord.vue'
+
+const props = defineProps<{
+  taskId: string
+  recordId: string
+}>()
+</script>
+
+<template>
+  <div class="record-view">
+    <TaskRecord :task-id="taskId" :record-id="recordId" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.record-view {
+}
+</style>

src/views/task/TaskView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import TaskRecordList from '@/modules/record/components/TaskRecordList.vue'
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
 import { computed } from 'vue'
 
@@ -27,6 +28,7 @@ const task = computed(() => taskStore.getTask(props.id))
         <div>{{ step.title }} | {{ step.estimation }}</div>
       </li>
     </ul>
+    <task-record-list :task-id="id" />
   </div>
   <div v-else>Task not found</div>
 </template>