fix: related tasks add button and task dates in read only view (#1268)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1268
Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/tasks/partials/createdUpdated.vue

@@ -0,0 +1,47 @@
+<template>
+	<p class="created">
+		<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
+			<i18n-t keypath="task.detail.created">
+				<span>{{ formatDateSince(task.created) }}</span>
+				{{ task.createdBy.getDisplayName() }}
+			</i18n-t>
+		</time>
+		<template v-if="+new Date(task.created) !== +new Date(task.updated)">
+			<br/>
+			<!-- Computed properties to show the actual date every time it gets updated -->
+			<time :datetime="formatISO(task.updated)" v-tooltip="updatedFormatted">
+				<i18n-t keypath="task.detail.updated">
+					<span>{{ updatedSince }}</span>
+				</i18n-t>
+			</time>
+		</template>
+		<template v-if="task.done">
+			<br/>
+			<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
+				<i18n-t keypath="task.detail.doneAt">
+					<span>{{ doneSince }}</span>
+				</i18n-t>
+			</time>
+		</template>
+	</p>
+</template>
+
+<script lang="ts" setup>
+import {computed, toRefs} from 'vue'
+import TaskModel from '@/models/task'
+import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+
+const props = defineProps({
+	task: {
+		type: TaskModel,
+		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>

src/components/tasks/partials/relatedTasks.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="task-relations">
 		<x-button
-			v-if="Object.keys(relatedTasks).length > 0"
+			v-if="editEnabled && Object.keys(relatedTasks).length > 0"
 			@click="showNewRelationForm = !showNewRelationForm"
 			class="is-pulled-right add-task-relation-button"
 			:class="{'is-active': showNewRelationForm}"