From d506a0e956863bb1d4b2f435cd3f92f22c0c44fc Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 15 Apr 2023 23:15:24 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(record)=20one=20task=20is?=
 =?UTF-8?q?=20now=20one=20record?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../record/components/RecordControls.vue      |  9 ++-
 .../record/components/RecordProgress.vue      |  3 +-
 src/modules/record/components/StepRecord.vue  |  3 +-
 src/modules/record/components/TaskRecord.vue  | 12 ++--
 ...kRecordLink.vue => TaskRecordDuration.vue} | 11 +--
 .../record/components/TaskRecordList.vue      | 41 -----------
 .../record/components/TaskRecordPreview.vue   | 31 ++++++++
 src/modules/record/interfaces/recordable.ts   |  1 -
 src/modules/record/models/task-record.ts      |  7 +-
 .../record/stores/useTaskRecordStore.ts       | 71 +++++++++----------
 src/router/index.ts                           |  2 +-
 src/views/record/RecordView.vue               |  3 +-
 src/views/task/TaskView.vue                   |  2 +-
 13 files changed, 80 insertions(+), 116 deletions(-)
 rename src/modules/record/components/{TaskRecordLink.vue => TaskRecordDuration.vue} (57%)
 delete mode 100644 src/modules/record/components/TaskRecordList.vue
 create mode 100644 src/modules/record/components/TaskRecordPreview.vue

diff --git a/src/modules/record/components/RecordControls.vue b/src/modules/record/components/RecordControls.vue
index ca90c5d..e23c2fd 100644
--- a/src/modules/record/components/RecordControls.vue
+++ b/src/modules/record/components/RecordControls.vue
@@ -8,14 +8,13 @@ import { useTaskRecordStore } from '../stores/useTaskRecordStore'
 
 const props = defineProps<{
   taskId: string
-  recordId: string
 }>()
 
 const taskStore = useTaskStore()
 const recordStore = useTaskRecordStore()
 
 const task = computed(() => taskStore.getTask(props.taskId))
-const record = computed(() => recordStore.getTaskRecord(props.recordId))
+const record = computed(() => recordStore.getTaskRecord(props.taskId))
 
 const getNextStepId = () => {
   if (!task.value) {
@@ -53,7 +52,7 @@ const startRecording = () => {
   }
 
   recordStore.startStepRecord({
-    recordId: props.recordId,
+    taskId: props.taskId,
     stepId: task.value.steps[0].id,
     start: toISODate(new Date())
   })
@@ -65,7 +64,7 @@ const nextStep = () => {
   }
 
   recordStore.nextStepRecord({
-    recordId: record.value.id,
+    taskId: record.value.taskId,
     currentStepId: recordStore.currentStepId,
     nextStepId: getNextStepId(),
     tick: toISODate(new Date())
@@ -98,7 +97,7 @@ whenever(logicAnd(notUsingInput, s), () => {
       <button class="button" v-else @click="nextStep">next</button>
     </template>
 
-    <button class="button is-warning" @click="recordStore.reset(recordId)">
+    <button class="button is-warning" @click="recordStore.reset(taskId)">
       reset
     </button>
   </div>
diff --git a/src/modules/record/components/RecordProgress.vue b/src/modules/record/components/RecordProgress.vue
index c57c791..0b0ddf7 100644
--- a/src/modules/record/components/RecordProgress.vue
+++ b/src/modules/record/components/RecordProgress.vue
@@ -5,14 +5,13 @@ import { useTaskRecordStore } from '../stores/useTaskRecordStore'
 
 const props = defineProps<{
   taskId: string
-  recordId: string
 }>()
 
 const taskStore = useTaskStore()
 const taskRecordStore = useTaskRecordStore()
 
 const task = computed(() => taskStore.getTask(props.taskId))
-const record = computed(() => taskRecordStore.getRecord(props.recordId))
+const record = computed(() => taskRecordStore.getRecord(props.taskId))
 
 const numberOfFinishedSteps = computed(
   () =>
diff --git a/src/modules/record/components/StepRecord.vue b/src/modules/record/components/StepRecord.vue
index ac5bbd2..3c49a34 100644
--- a/src/modules/record/components/StepRecord.vue
+++ b/src/modules/record/components/StepRecord.vue
@@ -7,7 +7,6 @@ import { useTaskRecordStore } from '../stores/useTaskRecordStore'
 
 const props = defineProps<{
   taskId: string
-  recordId: string
   stepId: string
   stepNumber: number
 }>()
@@ -17,7 +16,7 @@ const recordStore = useTaskRecordStore()
 
 const step = computed(() => taskStore.getStep(props.taskId, props.stepId))
 const stepRecord = computed(() =>
-  recordStore.getStepRecord(props.recordId, props.stepId)
+  recordStore.getStepRecord(props.taskId, props.stepId)
 )
 const isCurrentStep = computed(() => recordStore.currentStepId === props.stepId)
 
diff --git a/src/modules/record/components/TaskRecord.vue b/src/modules/record/components/TaskRecord.vue
index e211f6b..da66577 100644
--- a/src/modules/record/components/TaskRecord.vue
+++ b/src/modules/record/components/TaskRecord.vue
@@ -11,20 +11,19 @@ import StepRecord from './StepRecord.vue'
 
 const props = defineProps<{
   taskId: string
-  recordId: string
 }>()
 
 const taskStore = useTaskStore()
 const recordStore = useTaskRecordStore()
 
-recordStore.addRecord(props.taskId, props.recordId)
+recordStore.addRecord(props.taskId)
 
 const task = computed(() => taskStore.getTask(props.taskId))
 
 useLoopyTitle(task.value?.title ?? '')
 
-const record = computed(() => recordStore.getTaskRecord(props.recordId))
-const recordNotes = computed(() => recordStore.getRecordNotes(props.recordId))
+const record = computed(() => recordStore.getTaskRecord(props.taskId))
+const recordNotes = computed(() => recordStore.getRecordNotes(props.taskId))
 const { duration } = useTaskRecordMetadata(record)
 
 const isSuperiorToEstimation = computed(() => {
@@ -38,7 +37,7 @@ const isSuperiorToEstimation = computed(() => {
 
 <template>
   <main class="task-record" v-if="task">
-    <record-progress :task-id="taskId" :record-id="recordId" />
+    <record-progress :task-id="taskId" />
     <h1 class="title">
       <router-link
         :to="{ name: 'task-view', params: { id: task.id } }"
@@ -48,7 +47,7 @@ const isSuperiorToEstimation = computed(() => {
       </router-link>
     </h1>
     <h2 class="subtitle" v-if="record">{{ formatLongDate(record.start) }}</h2>
-    <record-controls :task-id="taskId" :record-id="recordId" />
+    <record-controls :task-id="taskId" />
     <table class="table is-striped is-hoverable is-fullwidth">
       <thead>
         <tr>
@@ -63,7 +62,6 @@ const isSuperiorToEstimation = computed(() => {
         <step-record
           v-for="(step, key) in task.steps"
           :task-id="taskId"
-          :record-id="recordId"
           :key="step.id"
           :step-id="step.id"
           :step-number="key + 1"
diff --git a/src/modules/record/components/TaskRecordLink.vue b/src/modules/record/components/TaskRecordDuration.vue
similarity index 57%
rename from src/modules/record/components/TaskRecordLink.vue
rename to src/modules/record/components/TaskRecordDuration.vue
index 65f324e..8fe5433 100644
--- a/src/modules/record/components/TaskRecordLink.vue
+++ b/src/modules/record/components/TaskRecordDuration.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { formatDate } from '@/shared/format-date'
 import { useTaskRecordMetadata } from '../hooks/useTaskRecordMetadata'
 import type { TaskRecord } from '../models/task-record'
 
@@ -12,15 +11,7 @@ const { duration } = useTaskRecordMetadata(props.record)
 
 <template>
   <div class="task-record-link-container content">
-    <router-link
-      class="task-record-link button is-outlined"
-      :to="{
-        name: 'record-view',
-        params: { taskId: record.taskId, recordId: record.id }
-      }"
-      >{{ formatDate(record.start) }}</router-link
-    >
-    <span v-if="duration !== null"> {{ duration }} minutes </span>
+    <span v-if="duration !== null">last time: {{ duration }} minutes </span>
   </div>
 </template>
 
diff --git a/src/modules/record/components/TaskRecordList.vue b/src/modules/record/components/TaskRecordList.vue
deleted file mode 100644
index 0c35adc..0000000
--- a/src/modules/record/components/TaskRecordList.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { createUuid } from '@/shared/create-uuid'
-import { computed } from 'vue'
-import { useTaskRecordStore } from '../stores/useTaskRecordStore'
-import TaskRecordLink from './TaskRecordLink.vue'
-
-const props = defineProps<{
-  taskId: string
-}>()
-
-const recordStore = useTaskRecordStore()
-
-const recordsFromLastToFirst = computed(() =>
-  recordStore
-    .getTaskRecords(props.taskId)
-    .sort((a, b) => (a.start > b.start ? -1 : 1))
-)
-const newRecordId = createUuid()
-</script>
-
-<template>
-  <div>
-    <div class="content">
-      <h3 class="subtitle is-4">Records</h3>
-      <ol v-if="recordsFromLastToFirst.length" class="task-record-list">
-        <li v-for="record in recordsFromLastToFirst" :key="record.id">
-          <task-record-link :record="record" />
-        </li>
-      </ol>
-      <div v-else>No record yet</div>
-    </div>
-    <router-link
-      :to="{
-        name: 'record-view',
-        params: { taskId, recordId: newRecordId }
-      }"
-      class="button is-primary is-light"
-      >start a new record</router-link
-    >
-  </div>
-</template>
diff --git a/src/modules/record/components/TaskRecordPreview.vue b/src/modules/record/components/TaskRecordPreview.vue
new file mode 100644
index 0000000..0a8978c
--- /dev/null
+++ b/src/modules/record/components/TaskRecordPreview.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTaskRecordStore } from '../stores/useTaskRecordStore'
+import TaskRecordDuration from './TaskRecordDuration.vue'
+
+const props = defineProps<{
+  taskId: string
+}>()
+
+const recordStore = useTaskRecordStore()
+
+const taskRecord = computed(() => recordStore.getTaskRecord(props.taskId))
+</script>
+
+<template>
+  <div>
+    <div class="content">
+      <h3 class="subtitle is-4">Record</h3>
+      <task-record-duration v-if="taskRecord" :record="taskRecord" />
+      <div v-else>No record yet</div>
+    </div>
+    <router-link
+      :to="{
+        name: 'record-view',
+        params: { taskId }
+      }"
+      class="button is-primary is-light"
+      >start the record</router-link
+    >
+  </div>
+</template>
diff --git a/src/modules/record/interfaces/recordable.ts b/src/modules/record/interfaces/recordable.ts
index bedb6bd..751f774 100644
--- a/src/modules/record/interfaces/recordable.ts
+++ b/src/modules/record/interfaces/recordable.ts
@@ -2,7 +2,6 @@ import type { ISODate } from '@/shared/types/date'
 import type { StepRecordable } from './step-recordable'
 
 export interface Recordable {
-  id: string
   taskId: string
   /**
    * @deprecated
diff --git a/src/modules/record/models/task-record.ts b/src/modules/record/models/task-record.ts
index b43b84a..10faef3 100644
--- a/src/modules/record/models/task-record.ts
+++ b/src/modules/record/models/task-record.ts
@@ -8,17 +8,14 @@ export class TaskRecord implements Recordable {
   public stepRecords: Record<string, StepRecordable> = {}
   public notes = ''
 
-  public constructor(
-    public readonly id: string,
-    public readonly taskId: string
-  ) {}
+  public constructor(public readonly taskId: string) {}
 
   public get hasStepRecords() {
     return Object.values(this.stepRecords).length > 0
   }
 
   public static fromRecordable(recordable: Recordable) {
-    const taskRecord = new TaskRecord(recordable.id, recordable.taskId)
+    const taskRecord = new TaskRecord(recordable.taskId)
 
     taskRecord.stepRecords = recordable.stepRecords
     taskRecord.start = recordable.start
diff --git a/src/modules/record/stores/useTaskRecordStore.ts b/src/modules/record/stores/useTaskRecordStore.ts
index 87a2775..0b87a1f 100644
--- a/src/modules/record/stores/useTaskRecordStore.ts
+++ b/src/modules/record/stores/useTaskRecordStore.ts
@@ -16,21 +16,22 @@ export const useTaskRecordStore = defineStore('task-record-store', {
     records: {}
   }),
   actions: {
-    addRecord(taskId: string, recordId: string) {
-      if (recordId in this.records) {
+    addRecord(taskId: string) {
+      if (taskId in this.records) {
         return
       }
-      this.records[recordId] = new TaskRecord(recordId, taskId)
+
+      this.records[taskId] = new TaskRecord(taskId)
     },
-    removeRecord(recordId: string) {
-      delete this.records[recordId]
+    removeRecord(taskId: string) {
+      delete this.records[taskId]
     },
     startStepRecord(params: {
-      recordId: string
+      taskId: string
       stepId: string
       start: ISODate
     }) {
-      const record = this.records[params.recordId]
+      const record = this.records[params.taskId]
 
       if (Object.values(record.stepRecords).length === 0) {
         record.start = params.start
@@ -39,7 +40,7 @@ export const useTaskRecordStore = defineStore('task-record-store', {
       this.$patch({
         records: {
           ...this.records,
-          [params.recordId]: {
+          [params.taskId]: {
             ...record,
             stepRecords: {
               ...record.stepRecords,
@@ -52,9 +53,8 @@ export const useTaskRecordStore = defineStore('task-record-store', {
         currentStepId: params.stepId
       })
     },
-    endStepRecord(params: { recordId: string; stepId: string; end: ISODate }) {
-      const stepRecord =
-        this.records[params.recordId]?.stepRecords[params.stepId]
+    endStepRecord(params: { taskId: string; stepId: string; end: ISODate }) {
+      const stepRecord = this.records[params.taskId]?.stepRecords[params.stepId]
 
       if (!stepRecord) {
         return
@@ -63,44 +63,44 @@ export const useTaskRecordStore = defineStore('task-record-store', {
       stepRecord.end = params.end
     },
     nextStepRecord(params: {
-      recordId: string
+      taskId: string
       currentStepId: string
       nextStepId: string | null
       tick: ISODate
     }) {
       this.endStepRecord({
-        recordId: params.recordId,
+        taskId: params.taskId,
         stepId: params.currentStepId,
         end: params.tick
       })
 
       if (!params.nextStepId) {
-        this.endRecord(params.recordId)
+        this.endRecord(params.taskId)
         return
       }
 
       this.startStepRecord({
-        recordId: params.recordId,
+        taskId: params.taskId,
         stepId: params.nextStepId,
         start: params.tick
       })
     },
-    endRecord(recordId: string) {
-      if (!this.records[recordId]) {
+    endRecord(taskId: string) {
+      if (!this.records[taskId]) {
         return
       }
 
-      this.records[recordId].end = toISODate(new Date())
+      this.records[taskId].end = toISODate(new Date())
       this.currentStepId = null
     },
-    updateRecordNotes(recordId: string, notes: string) {
-      const record = this.records[recordId]
+    updateRecordNotes(taskId: string, notes: string) {
+      const record = this.records[taskId]
 
       if (record) {
         this.$patch({
           records: {
             ...this.records,
-            [recordId]: {
+            [taskId]: {
               ...record,
               notes
             }
@@ -108,43 +108,36 @@ export const useTaskRecordStore = defineStore('task-record-store', {
         })
       }
     },
-    reset(recordId: string) {
+    reset(taskId: string) {
       this.currentStepId = null
-      if (!this.records[recordId]) {
+      if (!this.records[taskId]) {
         return
       }
-      this.records[recordId].stepRecords = {}
-      this.records[recordId].end = undefined
+      this.records[taskId].stepRecords = {}
+      this.records[taskId].end = undefined
     }
   },
   getters: {
-    getTaskRecords() {
-      return (taskId: string): TaskRecord[] =>
-        Object.values(this.records)
-          .filter((record) => record.taskId === taskId)
-          .map((record) => TaskRecord.fromRecordable(record))
-    },
     getTaskRecord() {
-      return (recordId: string): TaskRecord | null => {
-        const hasTaskRecord = !!this.records[recordId]
+      return (taskId: string): TaskRecord | null => {
+        const hasTaskRecord = !!this.records[taskId]
 
         if (hasTaskRecord) {
-          return TaskRecord.fromRecordable(this.records[recordId])
+          return TaskRecord.fromRecordable(this.records[taskId])
         }
 
         return null
       }
     },
     getRecord() {
-      return (recordId: string): Recordable | null =>
-        this.records[recordId] ?? null
+      return (taskId: string): Recordable | null => this.records[taskId] ?? null
     },
     getStepRecord() {
-      return (recordId: string, stepId: string): StepRecordable | null =>
-        this.records[recordId]?.stepRecords[stepId] ?? null
+      return (taskId: string, stepId: string): StepRecordable | null =>
+        this.records[taskId]?.stepRecords[stepId] ?? null
     },
     getRecordNotes() {
-      return (recordId: string): string => this.records[recordId]?.notes ?? ''
+      return (taskId: string): string => this.records[taskId]?.notes ?? ''
     }
   }
 })
diff --git a/src/router/index.ts b/src/router/index.ts
index 59a6038..bfc9e07 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -26,7 +26,7 @@ export const router = createRouter({
       component: () => import('../views/task/TaskView.vue')
     },
     {
-      path: '/task/:taskId/records/:recordId',
+      path: '/task/:taskId/record',
       name: 'record-view',
       props: true,
       component: () => import('../views/record/RecordView.vue')
diff --git a/src/views/record/RecordView.vue b/src/views/record/RecordView.vue
index ed3e169..728bbd2 100644
--- a/src/views/record/RecordView.vue
+++ b/src/views/record/RecordView.vue
@@ -3,12 +3,11 @@ import TaskRecord from '@/modules/record/components/TaskRecord.vue'
 
 defineProps<{
   taskId: string
-  recordId: string
 }>()
 </script>
 
 <template>
   <div class="record-view">
-    <TaskRecord :task-id="taskId" :record-id="recordId" />
+    <TaskRecord :task-id="taskId" />
   </div>
 </template>
diff --git a/src/views/task/TaskView.vue b/src/views/task/TaskView.vue
index be21e36..251ae5d 100644
--- a/src/views/task/TaskView.vue
+++ b/src/views/task/TaskView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TaskRecordList from '@/modules/record/components/TaskRecordList.vue'
+import TaskRecordList from '@/modules/record/components/TaskRecordPreview.vue'
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
 import { computed } from 'vue'