feat(list view): show subtasks nested

Resolves https://kolaente.dev/vikunja/frontend/issues/363

src/components/tasks/partials/singleTaskInProject.vue

@@ -1,4 +1,5 @@
 <template>
+	<div>
 		<div
 			:class="{'is-loading': taskService.loading}"
 			class="task loader-container"
@@ -39,14 +40,6 @@
 			
 				<priority-label :priority="task.priority" :done="task.done"/>
 				
-				<!-- Show any parent tasks to make it clear this task is a sub task of something -->
-				<span class="parent-tasks" v-if="typeof task.relatedTasks?.parenttask !== 'undefined'">
-					<template v-for="(pt, i) in task.relatedTasks.parenttask">
-						{{ pt.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
-					</template>
-					&rsaquo;
-				</span>
-				
 				<router-link
 					:to="taskDetailRoute"
 					class="task-link"
@@ -133,6 +126,22 @@
 			</BaseButton>
 			<slot/>
 		</div>
+		<template v-if="typeof task.relatedTasks?.subtask !== 'undefined'">
+			<template v-for="subtask in task.relatedTasks.subtask">
+				<template v-if="getTaskById(subtask.id)">
+					<single-task-in-project
+						:key="subtask.id"
+						:the-task="getTaskById(subtask.id)"
+						:show-project-color="showProjectColor"
+						:disabled="disabled"
+						:can-mark-as-done="canMarkAsDone"
+						:all-tasks="allTasks"
+						class="ml-5"
+					/>
+				</template>
+			</template>
+		</template>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -173,6 +182,7 @@ const {
 	disabled = false,
 	showProjectColor = false,
 	canMarkAsDone = true,
+	allTasks = [],
 } = defineProps<{
 	theTask: ITask,
 	isArchived?: boolean,
@@ -180,8 +190,17 @@ const {
 	disabled?: boolean,
 	showProjectColor?: boolean,
 	canMarkAsDone?: boolean,
+	allTasks?: ITask[],
 }>()
 
+function getTaskById(taskId: number): ITask | undefined {
+	if (typeof allTasks === 'undefined' || allTasks.length === 0) {
+		return null
+	}
+
+	return allTasks.find(t => t.id === taskId)
+}
+
 const emit = defineEmits(['task-updated'])
 
 const {t} = useI18n({useScope: 'global'})
@@ -289,6 +308,7 @@ function hideDeferDueDatePopup(e) {
 }
 
 const taskLink = ref<HTMLElement | null>(null)
+
 function openTaskDetail() {
 	const isTextSelected = window.getSelection().toString()
 	if (!isTextSelected) {

src/views/project/ProjectList.vue

@@ -95,6 +95,7 @@
 						:can-mark-as-done="canWrite || isSavedFilter(project)"
 						:the-task="t"
 						@taskUpdated="updateTasks"
+						:all-tasks="allTasks"
 					>
 						<template v-if="canWrite">
 							<span class="icon handle">
@@ -120,7 +121,7 @@ export default { name: 'List' }
 </script>
 
 <script setup lang="ts">
-import {ref, computed, nextTick, onMounted} from 'vue'
+import {ref, computed, nextTick, onMounted, watch} from 'vue'
 import draggable from 'zhyswan-vuedraggable'
 import {useRoute, useRouter} from 'vue-router'
 
@@ -160,7 +161,7 @@ const DRAG_OPTIONS = {
 } as const
 
 const {
-	tasks,
+	tasks: allTasks,
 	loading,
 	totalPages,
 	currentPage,
@@ -170,6 +171,13 @@ const {
 	sortByParam,
 } = useTaskList(() => projectId, {position: 'asc' })
 
+const tasks = ref<ITask[]>([])
+watch(
+	allTasks,
+	() => {
+		tasks.value = [...allTasks.value].filter(t => typeof t.relatedTasks?.parenttask === 'undefined')
+	},
+)
 
 const isAlphabeticalSorting = computed(() => {
 	return params.value.sort_by.find(sortBy => sortBy === ALPHABETICAL_SORT) !== undefined