From 75262b716fcae16920a75ade4c2cd3bc1c2e88da Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 15 Nov 2023 23:43:31 +0100
Subject: [PATCH] fix(kanban): opening a task from the kanban board and then
 reloading the page should not crash everything when then navigating back

Before this fix, the following would not work:

1. Open the kanban view of a project
2. Click on a task to open it in a modal
3. Reload the page
4. Using your browser's back button, navigate back

Instead of showing the kanban board with the task modal closed, it would
navigate to `/projects/0/kanban` and crash.
---
 src/components/home/contentAuth.vue  |  2 +-
 src/composables/useRouteWithModal.ts | 19 ++++++++++++-------
 src/router/index.ts                  |  6 +++++-
 src/views/project/ProjectKanban.vue  | 24 ++++++++++++++----------
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 31750963c..540892e2c 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -39,7 +39,7 @@
 				</router-view>
 
 				<modal
-					:enabled="Boolean(currentModal)"
+					:enabled="typeof currentModal !== 'undefined'"
 					@close="closeModal()"
 					variant="scrolling"
 					class="task-detail-view-modal"
diff --git a/src/composables/useRouteWithModal.ts b/src/composables/useRouteWithModal.ts
index 9f6fdb72a..94d048f9c 100644
--- a/src/composables/useRouteWithModal.ts
+++ b/src/composables/useRouteWithModal.ts
@@ -24,13 +24,18 @@ export function useRouteWithModal() {
 		// this is adapted from vue-router
 		// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
 		const routePropsOption = route.matched[0]?.props.default
-		const routeProps = routePropsOption
-			? routePropsOption === true
-				? route.params
-				: typeof routePropsOption === 'function'
-					? routePropsOption(route)
-					: routePropsOption
-			: {}
+		let routeProps = undefined
+		if (routePropsOption) {
+			if (routePropsOption === true) {
+				routeProps = route.params
+			} else {
+				if(typeof routePropsOption === 'function') {
+					routeProps = routePropsOption(route)
+				} else {
+					routeProps = routePropsOption
+				}
+			}
+		}
 
 		if (typeof routeProps === 'undefined') {
 			currentModal.value = undefined
diff --git a/src/router/index.ts b/src/router/index.ts
index ccc0d36e4..775a6f562 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -37,7 +37,11 @@ const MigrationHandlerComponent = () => import('@/views/migrate/MigrationHandler
 const ProjectList = () => import('@/views/project/ProjectList.vue')
 const ProjectGantt = () => import('@/views/project/ProjectGantt.vue')
 const ProjectTable = () => import('@/views/project/ProjectTable.vue')
-const ProjectKanban = () => import('@/views/project/ProjectKanban.vue')
+// If we load the component async, using it as a backdrop view will not work. Instead, everything explodes
+// with an error from the core saying "Cannot read properties of undefined (reading 'parentNode')"
+// Of course, with no clear indicator of where the problem comes from.
+// const ProjectKanban = () => import('@/views/project/ProjectKanban.vue')
+import ProjectKanban from '@/views/project/ProjectKanban.vue'
 const ProjectInfo = () => import('@/views/project/ProjectInfo.vue')
 
 // Project Settings
diff --git a/src/views/project/ProjectKanban.vue b/src/views/project/ProjectKanban.vue
index 0af6e9c55..832b017ab 100644
--- a/src/views/project/ProjectKanban.vue
+++ b/src/views/project/ProjectKanban.vue
@@ -1,7 +1,7 @@
 <template>
 	<ProjectWrapper
 		class="project-kanban"
-		:project-id="project.id"
+		:project-id="projectId"
 		viewName="kanban"
 	>
 		<template #header>
@@ -330,9 +330,14 @@ const bucketDraggableComponentData = computed(() => ({
 		{'dragging-disabled': !canWrite.value},
 	],
 }))
+const {
+	projectId = undefined,
+} = defineProps<{
+	projectId: number,
+}>()
 
 const canWrite = computed(() => baseStore.currentProject?.maxRight > Rights.READ)
-const project = computed(() => baseStore.currentProject)
+const project = computed(() => projectId ? projectStore.projects[projectId]: null)
 
 const buckets = computed(() => kanbanStore.buckets)
 const loading = computed(() => kanbanStore.isLoading)
@@ -342,10 +347,9 @@ const taskLoading = computed(() => taskStore.isLoading)
 watch(
 	() => ({
 		params: params.value,
-		project: project.value,
+		projectId,
 	}),
-	({params, project}) => {
-		const projectId = project.id
+	({params}) => {
 		if (projectId === undefined || Number(projectId) === 0) {
 			return
 		}
@@ -396,7 +400,7 @@ function updateTasks(bucketId: IBucket['id'], tasks: IBucket['tasks']) {
 async function updateTaskPosition(e) {
 	drag.value = false
 
-	// While we could just pass the bucket index in through the function call, this would not give us the 
+	// While we could just pass the bucket index in through the function call, this would not give us the
 	// new bucket id when a task has been moved between buckets, only the new bucket. Using the data-bucket-id
 	// of the drop target works all the time.
 	const bucketIndex = parseInt(e.to.dataset.bucketIndex)
@@ -450,7 +454,7 @@ async function updateTaskPosition(e) {
 
 	try {
 		await taskStore.update(newTask)
-		
+
 		// Make sure the first and second task don't both get position 0 assigned
 		if(newTaskIndex === 0 && taskAfter !== null && taskAfter.kanbanPosition === 0) {
 			const taskAfterAfter = newBucket.tasks[newTaskIndex + 2] ?? null
@@ -480,7 +484,7 @@ async function addTaskToBucket(bucketId: IBucket['id']) {
 		return
 	}
 	newTaskError.value[bucketId] = false
-	
+
 	const task = await taskStore.createNewTask({
 		title: newTaskText.value,
 		bucketId,
@@ -619,7 +623,7 @@ async function toggleDoneBucket(bucket: IBucket) {
 	const doneBucketId = project.value.doneBucketId === bucket.id
 		? 0
 		: bucket.id
-	
+
 	await projectStore.updateProject({
 		...project.value,
 		doneBucketId,
@@ -722,7 +726,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			}
 			&:last-of-type {
 				padding-bottom: .5rem;
-			}	
+			}
 		}
 
 		.no-move {