feat(task): cover image for tasks (#2460)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2460
Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/tasks/partials/attachments.vue

@@ -9,7 +9,7 @@
 
 		<input
 			v-if="editEnabled"
-			:disabled="attachmentService.loading || undefined"
+			:disabled="loading || undefined"
 			@change="uploadNewAttachment()"
 			id="files"
 			multiple
@@ -35,7 +35,15 @@
 				:key="a.id"
 				@click="viewOrDownload(a)"
 			>
-				<div class="filename">{{ a.file.name }}</div>
+				<div class="filename">
+					{{ a.file.name }}
+					<span 
+						v-if="task.coverImageAttachmentId === a.id" 
+						class="is-task-cover"
+					>
+						{{ $t('task.attachment.usedAsCover') }}
+					</span>
+				</div>
 				<div class="info">
 					<p class="attachment-info-meta">
 						<i18n-t keypath="task.attachment.createdBy" scope="global">
@@ -78,6 +86,17 @@
 						>
 							{{ $t('misc.delete') }}
 						</BaseButton>
+						<BaseButton
+							v-if="editEnabled"
+							class="attachment-info-meta-button"
+							@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
+						>
+							{{
+								task.coverImageAttachmentId === a.id
+									? $t('task.attachment.unsetAsCover')
+									: $t('task.attachment.setAsCover')
+							}}
+						</BaseButton>
 					</p>
 				</div>
 			</a>
@@ -85,7 +104,7 @@
 
 		<x-button
 			v-if="editEnabled"
-			:disabled="attachmentService.loading"
+			:disabled="loading"
 			@click="filesRef?.click()"
 			class="mb-4"
 			icon="cloud-upload-alt"
@@ -138,13 +157,14 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, type PropType} from 'vue'
+import {ref, shallowReactive, computed} from 'vue'
 import {useDropZone} from '@vueuse/core'
 
 import User from '@/components/misc/user.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import AttachmentService from '@/services/attachment'
+import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
 import type AttachmentModel from '@/models/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 import type {ITask} from '@/modelTypes/ITask'
@@ -155,25 +175,30 @@ import {uploadFiles, generateAttachmentUrl} from '@/helpers/attachments'
 import {getHumanSize} from '@/helpers/getHumanSize'
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {error, success} from '@/message'
+import {useTaskStore} from '@/stores/tasks'
+import {useI18n} from 'vue-i18n'
 
-const props = defineProps({
+const taskStore = useTaskStore()
-	taskId: {
+const {t} = useI18n({useScope: 'global'})
-		type: Number as PropType<ITask['id']>,
+
-		required: true,
+const props = withDefaults(defineProps<{
-	},
+	task: ITask,
-	initialAttachments: {
+	initialAttachments?: IAttachment[],
-		type: Array,
+	editEnabled: boolean,
-	},
+}>(), {
-	editEnabled: {
+	editEnabled: true,
-		default: true,
-	},
 })
 
+// FIXME: this should go through the store
+const emit = defineEmits(['task-changed'])
+
 const attachmentService = shallowReactive(new AttachmentService())
 
 const attachmentStore = useAttachmentStore()
 const attachments = computed(() => attachmentStore.attachments)
 
+const loading = computed(() => attachmentService.loading || taskStore.isLoading)
+
 function onDrop(files: File[] | null) {
 	if (files && files.length !== 0) {
 		uploadFilesToTask(files)
@@ -187,6 +212,7 @@ function downloadAttachment(attachment: IAttachment) {
 }
 
 const filesRef = ref<HTMLInputElement | null>(null)
+
 function uploadNewAttachment() {
 	const files = filesRef.value?.files
 
@@ -198,7 +224,7 @@ function uploadNewAttachment() {
 }
 
 function uploadFilesToTask(files: File[] | FileList) {
-	uploadFiles(attachmentService, props.taskId, files)
+	uploadFiles(attachmentService, props.task.id, files)
 }
 
 const attachmentToDelete = ref<AttachmentModel | null>(null)
@@ -223,10 +249,9 @@ async function deleteAttachment() {
 }
 
 const attachmentImageBlobUrl = ref<string | null>(null)
-const SUPPORTED_SUFFIX = ['.jpg', '.png', '.bmp', '.gif']
 
 async function viewOrDownload(attachment: AttachmentModel) {
-	if (SUPPORTED_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))	) {
+	if (SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
 		attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
 	} else {
 		downloadAttachment(attachment)
@@ -234,8 +259,15 @@ async function viewOrDownload(attachment: AttachmentModel) {
 }
 
 const copy = useCopyToClipboard()
+
 function copyUrl(attachment: IAttachment) {
-	copy(generateAttachmentUrl(props.taskId, attachment.id))
+	copy(generateAttachmentUrl(props.task.id, attachment.id))
+}
+
+async function setCoverImage(attachment: IAttachment | null) {
+	const task = await taskStore.setCoverImage(props.task, attachment)
+	emit('task-changed', task)
+	success({message: t('task.attachment.successfullyChangedCoverImage')})
 }
 </script>
 
@@ -394,5 +426,13 @@ function copyUrl(attachment: IAttachment) {
 	}
 }
 
+.is-task-cover {
+	background: var(--primary);
+	color: var(--white);
+	padding: .25rem .35rem;
+	border-radius: 4px;
+	font-size: .75rem;
+}
+
 @include modal-transition();
 </style>

src/components/tasks/partials/kanban-card.vue

@@ -11,6 +11,13 @@
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.meta="() => toggleTaskDone(task)"
 	>
+		<img
+			v-if="coverImageBlobUrl"
+			:src="coverImageBlobUrl"
+			alt=""
+			class="cover-image"
+		/>
+		<div class="p-2">
 			<span class="task-id">
 				<Done class="kanban-card__done" :is-done="task.done" variant="small"/>
 				<template v-if="task.identifier === ''">
@@ -63,10 +70,11 @@
 				</span>
 			</div>
 		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import {ref, computed} from 'vue'
+import {ref, computed, watch} from 'vue'
 import {useRouter} from 'vue-router'
 
 import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
@@ -77,6 +85,8 @@ import ChecklistSummary from './checklist-summary.vue'
 
 import {TASK_DEFAULT_COLOR, getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
+import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
+import AttachmentService from '@/services/attachment'
 
 import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
@@ -114,6 +124,29 @@ function openTaskDetail() {
 		state: {backdropView: router.currentRoute.value.fullPath},
 	})
 }
+
+const coverImageBlobUrl = ref<string | null>(null)
+
+async function maybeDownloadCoverImage() {
+	if (!props.task.coverImageAttachmentId) {
+		coverImageBlobUrl.value = null
+		return
+	}
+
+	const attachment = props.task.attachments.find(a => a.id === props.task.coverImageAttachmentId)
+	if (!attachment || !SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
+		return
+	}
+
+	const attachmentService = new AttachmentService()
+	coverImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
+}
+
+watch(
+	() => props.task.coverImageAttachmentId,
+	maybeDownloadCoverImage,
+	{immediate: true},
+)
 </script>
 
 <style lang="scss" scoped>
@@ -125,12 +158,11 @@ $task-background: var(--white);
 	cursor: pointer;
 	box-shadow: var(--shadow-xs);
 	display: block;
-	border: 3px solid transparent;
 
 	font-size: .9rem;
-	padding: .4rem;
 	border-radius: $radius;
 	background: $task-background;
+	overflow: hidden;
 
 	&.loader-container.is-loading::after {
 		width: 1.5rem;

src/i18n/lang/en.json

@@ -693,7 +693,11 @@
       "deleteTooltip": "Delete this attachment",
       "deleteText1": "Are you sure you want to delete the attachment {filename}?",
       "copyUrl": "Copy URL",
-      "copyUrlTooltip": "Copy the url of this attachment for usage in text"
+      "copyUrlTooltip": "Copy the url of this attachment for usage in text",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Comments",

src/modelTypes/ITask.ts

@@ -11,6 +11,7 @@ import type {IBucket} from './IBucket'
 import type {IRelationKind} from '@/types/IRelationKind'
 import type {IRepeatAfter} from '@/types/IRepeatAfter'
 import type {IRepeatMode} from '@/types/IRepeatMode'
+
 export interface ITask extends IAbstract {
 	id: number
 	title: string
@@ -31,8 +32,9 @@ export interface ITask extends IAbstract {
 	parentTaskId: ITask['id']
 	hexColor: string
 	percentDone: number
-	relatedTasks: Partial<Record<IRelationKind, ITask[]>>,
+	relatedTasks: Partial<Record<IRelationKind, ITask[]>>
 	attachments: IAttachment[]
+	coverImageAttachmentId: IAttachment['id']
 	identifier: string
 	index: number
 	isFavorite: boolean

src/models/attachment.ts

@@ -5,6 +5,8 @@ import type { IUser } from '@/modelTypes/IUser'
 import type { IFile } from '@/modelTypes/IFile'
 import type { IAttachment } from '@/modelTypes/IAttachment'
 
+export const SUPPORTED_IMAGE_SUFFIX = ['.jpg', '.png', '.bmp', '.gif']
+
 export default class AttachmentModel extends AbstractModel<IAttachment> implements IAttachment {
 	id = 0
 	taskId = 0

src/stores/tasks.ts

@@ -409,6 +409,13 @@ export const useTaskStore = defineStore('task', {
 				cancel()
 			}
 		},
+		
+		async setCoverImage(task: ITask, attachment: IAttachment | null) {
+			return this.update({
+				...task,
+				coverImageAttachmentId: attachment ? attachment.id : 0,
+			})
+		},
 	},
 })
 

src/views/tasks/TaskDetailView.vue

@@ -218,7 +218,8 @@
 					<div class="content attachments" v-if="activeFields.attachments || hasAttachments">
 						<attachments
 							:edit-enabled="canWrite"
-							:task-id="taskId"
+							:task="task"
+							@task-changed="({coverImageAttachmentId}) => task.coverImageAttachmentId = coverImageAttachmentId"
 							ref="attachments"
 						/>
 					</div>
@@ -500,7 +501,7 @@ const attachmentStore = useAttachmentStore()
 const taskStore = useTaskStore()
 const kanbanStore = useKanbanStore()
 
-const task = reactive(new TaskModel())
+const task = reactive<ITask>(new TaskModel())
 useTitle(toRef(task, 'title'))
 
 // We doubled the task color property here because verte does not have a real change property, leading