fix: related tasks add button and task dates in read only view

src/components/tasks/partials/createdUpdated.vue

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

src/views/tasks/TaskDetailView.vue

@@ -246,8 +246,8 @@
 					<!-- Comments -->
 					<comments :can-write="canWrite" :task-id="taskId"/>
 				</div>
-				<div class="column is-one-third action-buttons">
-					<a @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4" v-if="shouldShowClosePopup">
+				<div class="column is-one-third action-buttons" v-if="canWrite || shouldShowClosePopup">
+					<a @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4">
 						<icon icon="arrow-left"/>
 						{{ $t('task.detail.closePopup') }}
 					</a>
@@ -385,27 +385,11 @@
 					</template>
 
 					<!-- Created / Updated [by] -->
-					<p class="created">
-						<i18n-t keypath="task.detail.created">
-							<span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span>
-							{{ task.createdBy.getDisplayName() }}
-						</i18n-t>
-						<template v-if="+new Date(task.created) !== +new Date(task.updated)">
-							<br/>
-							<!-- Computed properties to show the actual date every time it gets updated -->
-							<i18n-t keypath="task.detail.updated">
-								<span v-tooltip="updatedFormatted">{{ updatedSince }}</span>
-							</i18n-t>
-						</template>
-						<template v-if="task.done">
-							<br/>
-							<i18n-t keypath="task.detail.doneAt">
-								<span v-tooltip="doneFormatted">{{ doneSince }}</span>
-							</i18n-t>
-						</template>
-					</p>
+					<created-updated :task="task"/>
 				</div>
 			</div>
+			<!-- Created / Updated [by] -->
+			<created-updated :task="task" v-if="!canWrite && !shouldShowClosePopup"/>
 		</div>
 
 		<transition name="modal">
@@ -452,10 +436,12 @@ import {CURRENT_LIST} from '@/store/mutation-types'
 
 import {uploadFile} from '@/helpers/attachments'
 import ChecklistSummary from '../../components/tasks/partials/checklist-summary'
+import CreatedUpdated from '@/components/tasks/partials/createdUpdated'
 
 export default {
 	name: 'TaskDetailView',
 	components: {
+		CreatedUpdated,
 		ChecklistSummary,
 		TaskSubscription,
 		Datepicker,
@@ -547,18 +533,6 @@ export default {
 		canWrite() {
 			return typeof this.task !== 'undefined' && typeof this.task.maxRight !== 'undefined' && this.task.maxRight > rights.READ
 		},
-		updatedSince() {
-			return this.formatDateSince(this.task.updated)
-		},
-		updatedFormatted() {
-			return this.formatDate(this.task.updated)
-		},
-		doneSince() {
-			return this.formatDateSince(this.task.doneAt)
-		},
-		doneFormatted() {
-			return this.formatDate(this.task.doneAt)
-		},
 		hasAttachments() {
 			return this.$store.state.attachments.attachments.length > 0
 		},