copy record to clipboard as csv

src/modules/record/hooks/useCopyRecord.hook.ts

@@ -0,0 +1,49 @@
+import { useTaskRecordStore } from '@/modules/record/stores/useTaskRecordStore'
+import type { Task } from '@/modules/task/models/task'
+import { formatDiffInMinutes, formatToShortDate } from '@/shared/format-date'
+import { toValue } from '@vueuse/core'
+import { ref, type ComputedRef } from 'vue'
+
+export const useCopyRecord = (task: ComputedRef<Task | null>) => {
+  const recordStore = useTaskRecordStore()
+
+  const canShareTask = !!navigator.clipboard
+  const taskCopied = ref(false)
+
+  const shareTask = async () => {
+    const t = toValue(task)
+
+    if (!t) {
+      return
+    }
+
+    const record = recordStore.getTaskRecord(t.id)
+
+    let clipboardText = `${t.title};${formatToShortDate(t.date)}\n
+    Step;Estimation;Duration\n`
+
+    t.steps.forEach((step) => {
+      const recordStep = record?.stepRecords[step.id]
+      const duration =
+        recordStep && recordStep.end
+          ? formatDiffInMinutes(recordStep.start, recordStep.end)
+          : '-'
+      const analyze = duration <= step.estimation ? '✅' : '⚠️'
+
+      clipboardText += `"${analyze} ${step.title}";${step.estimation};${duration}\n`
+    })
+
+    await navigator.clipboard.writeText(clipboardText)
+    taskCopied.value = true
+
+    setTimeout(() => {
+      taskCopied.value = false
+    }, 2000)
+  }
+
+  return {
+    canShareTask,
+    taskCopied,
+    shareTask
+  }
+}

src/shared/format-date.ts

@@ -18,7 +18,7 @@ export const formatLongDate = (date: Date | ISODate) =>
     minute: 'numeric'
   })
 
-export const formatDiffInMinutes = (date1: ISODate, date2: ISODate) => {
-  const diffInMs = new Date(date2).getTime() - new Date(date1).getTime()
+export const formatDiffInMinutes = (start: ISODate, end: ISODate) => {
+  const diffInMs = new Date(end).getTime() - new Date(start).getTime()
   return Math.max(0, Math.round(diffInMs / (1000 * (isTimeSpeedUp() ? 1 : 60))))
 }

src/views/task/TaskView.vue

@@ -2,6 +2,7 @@
 import EstimationTimeArrival from '@/components/EstimationTimeArrival.vue'
 import TaskRecordPreview from '@/modules/record/components/TaskRecordPreview.vue'
 import TaskNotFound from '@/modules/task/components/TaskNotFound.vue'
+import { useCopyRecord } from '@/modules/record/hooks/useCopyRecord.hook'
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -23,6 +24,8 @@ const deleteTask = () => {
     })
   }
 }
+
+const { canShareTask, taskCopied, shareTask } = useCopyRecord(task)
 </script>
 
 <template>
@@ -39,6 +42,10 @@ const deleteTask = () => {
       >
         <img src="/icons/edit.svg" alt="edit task" />
       </router-link>
+      <button v-if="canShareTask" class="share-task button" @click="shareTask">
+        <img v-if="taskCopied" src="/icons/check.svg" alt="task copied!" />
+        <img v-else src="/icons/share.svg" alt="share task" />
+      </button>
       <router-link
         :to="{
           name: 'duplicate-task',