107 lines
3.2 KiB
Vue
107 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import EstimationTimeArrival from '@/components/EstimationTimeArrival.vue'
|
|
import { useTaskStore } from '@/modules/task/stores/useTask.store'
|
|
import { formatLongDate } from '@/shared/format-date'
|
|
import { useLoopyTitle } from '@/shared/useLoopyTitle'
|
|
import { computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useTaskRecordMetadata } from '../hooks/useTaskRecordMetadata'
|
|
import { useTaskRecordStore } from '../stores/useTaskRecordStore'
|
|
import RecordControls from './RecordControls.vue'
|
|
import RecordProgress from './RecordProgress.vue'
|
|
import StepRecord from './StepRecord.vue'
|
|
|
|
const props = defineProps<{
|
|
taskId: string
|
|
}>()
|
|
|
|
const taskStore = useTaskStore()
|
|
const recordStore = useTaskRecordStore()
|
|
const router = useRouter()
|
|
|
|
const task = computed(() => taskStore.getTask(props.taskId))
|
|
|
|
if (task.value) {
|
|
recordStore.syncTaskRecord(task.value)
|
|
}
|
|
recordStore.addRecord(props.taskId)
|
|
|
|
useLoopyTitle(task.value?.title ?? '')
|
|
|
|
const record = computed(() => recordStore.getTaskRecord(props.taskId))
|
|
const recordNotes = computed(() => recordStore.getRecordNotes(props.taskId))
|
|
const { duration } = useTaskRecordMetadata(record)
|
|
|
|
const isSuperiorToEstimation = computed(() => {
|
|
if (!task.value || !record.value || !duration.value) {
|
|
return false
|
|
}
|
|
|
|
return duration.value > task.value.totalEstimation
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<main class="task-record" v-if="task">
|
|
<h1 class="title">
|
|
<button @click="router.go(-1)" class="button is-white">
|
|
<img src="/icons/left.svg" alt="go back" />
|
|
</button>
|
|
{{ task.title }}
|
|
</h1>
|
|
<h2 class="subtitle" v-if="record">
|
|
{{ formatLongDate(record.start) }}
|
|
<estimation-time-arrival :estimation="task.totalEstimation" />
|
|
</h2>
|
|
<record-controls v-if="record" :task-id="taskId" :record="record" />
|
|
<record-progress :task-id="taskId" />
|
|
<table class="table is-striped is-hoverable is-fullwidth">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>status</th>
|
|
<th>task</th>
|
|
<th>estimation</th>
|
|
<th>actual</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<step-record
|
|
v-for="(step, key) in task.steps"
|
|
:task-id="taskId"
|
|
:key="step.id"
|
|
:step-id="step.id"
|
|
:step-number="key + 1"
|
|
/>
|
|
</tbody>
|
|
</table>
|
|
<div v-show="record && record.end" class="content">
|
|
<p
|
|
:class="{
|
|
'has-text-primary-dark': !isSuperiorToEstimation,
|
|
'has-text-warning-dark': isSuperiorToEstimation
|
|
}"
|
|
>
|
|
The task took {{ duration }} minutes instead of
|
|
{{ task.totalEstimation }} minutes.
|
|
</p>
|
|
</div>
|
|
<div class="columns is-centered">
|
|
<div class="column is-half">
|
|
<textarea
|
|
name="record-notes"
|
|
id="record-notes"
|
|
rows="10"
|
|
:value="recordNotes"
|
|
@input="
|
|
//@ts-ignore
|
|
recordStore.updateRecordNotes(taskId, $event.target.value)
|
|
"
|
|
placeholder="Take notes while you're doing the task. It can be helpful at the end to retrieve your thought."
|
|
class="textarea"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|