From 2dfb3a6379e0f2326c4a15f6110dc950aa7b2ec1 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 16 Mar 2024 12:55:13 +0100
Subject: [PATCH] fix(views): make no initial view work in the frontend

---
 frontend/src/components/home/contentAuth.vue  |  2 +-
 .../tasks/partials/singleTaskInProject.vue    |  4 ++--
 frontend/src/router/index.ts                  | 18 ++++++++-------
 frontend/src/views/project/ProjectView.vue    | 23 +++++++++++++++++--
 4 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/home/contentAuth.vue b/frontend/src/components/home/contentAuth.vue
index 51248f140f..8cda2911c9 100644
--- a/frontend/src/components/home/contentAuth.vue
+++ b/frontend/src/components/home/contentAuth.vue
@@ -37,7 +37,7 @@
 					v-slot="{ Component }"
 					:route="routeWithModal"
 				>
-					<keep-alive :include="['project.list', 'project.gantt', 'project.table', 'project.kanban']">
+					<keep-alive :include="['project.view', 'project.gantt', 'project.table', 'project.kanban']">
 						<component :is="Component" />
 					</keep-alive>
 				</router-view>
diff --git a/frontend/src/components/tasks/partials/singleTaskInProject.vue b/frontend/src/components/tasks/partials/singleTaskInProject.vue
index 95d9f88884..2951c39cd5 100644
--- a/frontend/src/components/tasks/partials/singleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/singleTaskInProject.vue
@@ -30,7 +30,7 @@
 					<router-link
 						v-if="showProject && typeof project !== 'undefined'"
 						v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
-						:to="{ name: 'project.list', params: { projectId: task.projectId } }"
+						:to="{ name: 'project.index', params: { projectId: task.projectId } }"
 						class="task-project mr-1"
 						:class="{'mr-2': task.hexColor !== ''}"
 					>
@@ -136,7 +136,7 @@
 			<router-link
 				v-if="showProjectSeparately"
 				v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
-				:to="{ name: 'project.list', params: { projectId: task.projectId } }"
+				:to="{ name: 'project.index', params: { projectId: task.projectId } }"
 				class="task-project"
 			>
 				{{ project.title }}
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 2a145b8f81..c2b9943922 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -347,16 +347,18 @@ const router = createRouter({
 			path: '/projects/:projectId',
 			name: 'project.index',
 			redirect(to) {
-				// Redirect the user to list view by default
-				const savedProjectView = getProjectView(Number(to.params.projectId as string))
+				const viewId = getProjectView(Number(to.params.projectId as string))
 
-				if (savedProjectView) {
-					console.log('Replaced list view with', savedProjectView)
+				if (viewId) {
+					console.debug('Replaced list view with', viewId)
 				}
 
 				return {
-					name: savedProjectView || 'project.list',
-					params: {projectId: to.params.projectId},
+					name: 'project.view',
+					params: {
+						projectId: parseInt(to.params.projectId as string),
+						viewId: viewId ?? 0,
+					},
 				}
 			},
 		},
@@ -366,8 +368,8 @@ const router = createRouter({
 			component: ProjectView,
 			beforeEnter: (to) => saveProjectView(parseInt(to.params.projectId as string), parseInt(to.params.viewId as string)),
 			props: route => ({ 
-				projectId: Number(route.params.projectId as string),
-				viewId: Number(route.params.viewId as string),
+				projectId: parseInt(route.params.projectId as string),
+				viewId: route.params.viewId ? parseInt(route.params.viewId as string): undefined,
 			}),
 		},
 		{
diff --git a/frontend/src/views/project/ProjectView.vue b/frontend/src/views/project/ProjectView.vue
index adb479fedd..f7918d1ff5 100644
--- a/frontend/src/views/project/ProjectView.vue
+++ b/frontend/src/views/project/ProjectView.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, watch} from 'vue'
 import {useProjectStore} from '@/stores/projects'
 
 import ProjectList from '@/views/project/ProjectList.vue'
 import ProjectGantt from '@/views/project/ProjectGantt.vue'
 import ProjectTable from '@/views/project/ProjectTable.vue'
 import ProjectKanban from '@/views/project/ProjectKanban.vue'
-import {useRoute} from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
 
 const {
 	projectId,
@@ -16,6 +16,7 @@ const {
 	viewId: number,
 }>()
 
+const router = useRouter()
 const projectStore = useProjectStore()
 
 const currentView = computed(() => {
@@ -24,6 +25,24 @@ const currentView = computed(() => {
 	return project?.views.find(v => v.id === viewId)
 })
 
+watch(
+	() => viewId,
+	() => {
+		if (viewId === 0) {
+			// Ideally, we would do that in the router redirect, but we can't access the project store there.
+			const viewId = projectStore.projects[projectId].views[0].id
+			router.replace({
+				name: 'project.view',
+				params: {
+					projectId,
+					viewId,
+				},
+			})
+		}
+	},
+	{immediate: true},
+)
+
 const route = useRoute()
 </script>