7d6523067c
* remove fixture for task and steps * install bulma * convert to scss files * reset and implement first style classes * design task form * design task view * design step record * 💄 (home) new task and reset styling * fix step title height * add a record progress * ♻️ (record) extract record controls * ♿️ (record) add text for progress * 💄 (step record) fix blob size * ♻️ (record) no more getters who do an action too
34 lines
836 B
Vue
34 lines
836 B
Vue
<script setup lang="ts">
|
|
import { formatDate } from '@/shared/format-date'
|
|
import { useTaskRecordMetadata } from '../hooks/useTaskRecordMetadata'
|
|
import type { TaskRecord } from '../models/task-record'
|
|
|
|
const props = defineProps<{
|
|
record: TaskRecord
|
|
}>()
|
|
|
|
const { duration } = useTaskRecordMetadata(props.record)
|
|
</script>
|
|
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.task-record-link-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
</style>
|