2022-02-06 15:58:52 +00:00
|
|
|
<template>
|
|
|
|
<p class="created">
|
2024-02-07 11:18:19 +00:00
|
|
|
<time
|
|
|
|
v-tooltip="formatDateLong(task.created)"
|
|
|
|
:datetime="formatISO(task.created)"
|
|
|
|
>
|
|
|
|
<i18n-t
|
|
|
|
keypath="task.detail.created"
|
|
|
|
scope="global"
|
|
|
|
>
|
2022-02-06 15:58:52 +00:00
|
|
|
<span>{{ formatDateSince(task.created) }}</span>
|
2022-09-23 14:51:35 +00:00
|
|
|
{{ getDisplayName(task.createdBy) }}
|
2022-02-06 15:58:52 +00:00
|
|
|
</i18n-t>
|
|
|
|
</time>
|
|
|
|
<template v-if="+new Date(task.created) !== +new Date(task.updated)">
|
2024-02-07 11:18:19 +00:00
|
|
|
<br>
|
2022-02-06 15:58:52 +00:00
|
|
|
<!-- Computed properties to show the actual date every time it gets updated -->
|
2024-02-07 11:18:19 +00:00
|
|
|
<time
|
|
|
|
v-tooltip="updatedFormatted"
|
|
|
|
:datetime="formatISO(task.updated)"
|
|
|
|
>
|
|
|
|
<i18n-t
|
|
|
|
keypath="task.detail.updated"
|
|
|
|
scope="global"
|
|
|
|
>
|
2022-02-06 15:58:52 +00:00
|
|
|
<span>{{ updatedSince }}</span>
|
|
|
|
</i18n-t>
|
|
|
|
</time>
|
|
|
|
</template>
|
|
|
|
<template v-if="task.done">
|
2024-02-07 11:18:19 +00:00
|
|
|
<br>
|
|
|
|
<time
|
|
|
|
v-tooltip="doneFormatted"
|
|
|
|
:datetime="formatISO(task.doneAt)"
|
|
|
|
>
|
|
|
|
<i18n-t
|
|
|
|
keypath="task.detail.doneAt"
|
|
|
|
scope="global"
|
|
|
|
>
|
2022-02-06 15:58:52 +00:00
|
|
|
<span>{{ doneSince }}</span>
|
|
|
|
</i18n-t>
|
|
|
|
</time>
|
|
|
|
</template>
|
|
|
|
</p>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
2022-07-20 22:42:36 +00:00
|
|
|
import {computed, toRefs, type PropType} from 'vue'
|
2022-09-06 09:36:01 +00:00
|
|
|
import type {ITask} from '@/modelTypes/ITask'
|
2022-06-23 00:58:00 +00:00
|
|
|
import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
|
2022-09-23 14:51:35 +00:00
|
|
|
import {getDisplayName} from '@/models/user'
|
2022-02-06 15:58:52 +00:00
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
task: {
|
2022-07-20 22:42:36 +00:00
|
|
|
type: Object as PropType<ITask>,
|
2022-02-06 15:58:52 +00:00
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
const {task} = toRefs(props)
|
|
|
|
|
|
|
|
const updatedSince = computed(() => formatDateSince(task.value.updated))
|
|
|
|
const updatedFormatted = computed(() => formatDateLong(task.value.updated))
|
|
|
|
const doneSince = computed(() => formatDateSince(task.value.doneAt))
|
|
|
|
const doneFormatted = computed(() => formatDateLong(task.value.doneAt))
|
|
|
|
</script>
|
2022-11-12 10:50:48 +00:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.created {
|
|
|
|
font-size: .75rem;
|
|
|
|
color: var(--grey-500);
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
</style>
|