add tags to ETA

src/modules/record/components/TaskRecord.vue

@@ -37,17 +37,19 @@ const isSuperiorToEstimation = computed(() => {
 
 <template>
   <main class="task-record" v-if="task">
-    <record-progress :task-id="taskId" />
     <h1 class="title">
-      <router-link
-        :to="{ name: 'task-view', params: { id: task.id } }"
-        class="button is-link is-light"
-      >
-        {{ task.title }}
-      </router-link>
+      <button @click="$router.go(-1)" class="button is-white">⬅️</button>
+      {{ task.title }}
     </h1>
-    <h2 class="subtitle" v-if="record">{{ formatLongDate(record.start) }}</h2>
+    <h2 class="subtitle" v-if="record">
+      {{ formatLongDate(record.start) }}
+      <div class="tags has-addons">
+        <div class="tag">ETA</div>
+        <div class="tag is-primary">{{ task.totalEstimation }} minutes</div>
+      </div>
+    </h2>
     <record-controls :task-id="taskId" />
+    <record-progress :task-id="taskId" />
     <table class="table is-striped is-hoverable is-fullwidth">
       <thead>
         <tr>

src/tests/utils.ts

@@ -1,15 +1,37 @@
+import type { TaskRecordStoreState } from '@/modules/record/stores/useTaskRecordStore'
 import { createTaskFixture } from '@/modules/task/models/task.fixture'
 import type { TaskStoreState } from '@/modules/task/stores/useTask.store'
 import { router } from '@/router'
+import { toISODate } from '@/shared/types/date'
 import { createTestingPinia } from '@pinia/testing'
 import { vi } from 'vitest'
 
 export interface InitialState {
   'task-store': TaskStoreState
+  'task-record-store': TaskRecordStoreState
 }
 
-const initialState = {
-  'task-store': { tasks: [createTaskFixture(), createTaskFixture()] }
+const tasks = [createTaskFixture(), createTaskFixture()]
+
+const initialState: InitialState = {
+  'task-store': { tasks },
+  'task-record-store': {
+    currentStepId: null,
+    records: {
+      [tasks[0].id]: {
+        taskId: tasks[0].id,
+        stepRecords: {},
+        start: toISODate(new Date()),
+        notes: ''
+      },
+      [tasks[1].id]: {
+        taskId: tasks[1].id,
+        stepRecords: {},
+        start: toISODate(new Date()),
+        notes: ''
+      }
+    }
+  }
 }
 
 export const withPlugins = (partialState?: TaskStoreState) => ({

src/views/task/TaskView.vue

@@ -15,7 +15,12 @@ const task = computed(() => taskStore.getTask(props.id))
 <template>
   <div class="task-view" v-if="task">
     <h1 class="title">{{ task.title }}</h1>
-    <h2 class="subtitle">{{ task.totalEstimation }} minutes</h2>
+    <h2 class="subtitle">
+      <div class="tags has-addons">
+        <div class="tag">ETA</div>
+        <div class="tag is-primary">{{ task.totalEstimation }} minutes</div>
+      </div>
+    </h2>
     <a
       v-if="task.link"
       :href="task.link"
@@ -24,20 +29,18 @@ const task = computed(() => taskStore.getTask(props.id))
       class="button is-link"
       >user story link</a
     >
-    <div class="columns">
-      <div class="column content is-large">
-        <h3 class="subtitle is-4">Tasks</h3>
-        <ol>
-          <li v-for="step in task.steps" :key="step.id">
-            <div class="step-item">
-              <span>{{ step.title }}</span>
-              <span class="tag">{{ step.estimation }} minutes</span>
-            </div>
-          </li>
-        </ol>
-      </div>
-      <task-record-list class="column" :task-id="id" />
+    <div class="content">
+      <h3 class="subtitle is-4">Tasks</h3>
+      <ol>
+        <li v-for="step in task.steps" :key="step.id">
+          <div class="step-item">
+            <span>{{ step.title }}</span>
+            <span class="tag">{{ step.estimation }} minutes</span>
+          </div>
+        </li>
+      </ol>
     </div>
+    <task-record-list :task-id="id" />
   </div>
   <div v-else>Task not found</div>
 </template>
@@ -48,6 +51,6 @@ const task = computed(() => taskStore.getTask(props.id))
   align-items: center;
   gap: 1rem;
   justify-content: space-between;
-  max-width: 400px;
+  max-width: 600px;
 }
 </style>