chore(views): use view id instead of passing whole view object

frontend/src/components/project/ProjectWrapper.vue

@@ -12,7 +12,7 @@
 				<BaseButton
 					v-for="v in views"
 					class="switch-view-button"
-					:class="{'is-active': v.id === view.id}"
+					:class="{'is-active': v.id === viewId}"
 					:to="{ name: 'project.view', params: { projectId, viewId: v.id } }"
 				>
 					{{ getViewTitle(v) }}
@@ -57,10 +57,10 @@ import {useI18n} from 'vue-i18n'
 
 const {
 	projectId,
-	view,
+	viewId,
 } = defineProps<{
-	projectId: number,
-	view: IProjectView,
+	projectId: IProject['id'],
+	viewId: IProjectView['id'],
 }>()
 
 const route = useRoute()
@@ -109,7 +109,7 @@ watch(
 			return
 		}
 
-		console.debug(`Loading project, props.view = ${view}, $route.params =`, route.params, `, loadedProjectId = ${loadedProjectId.value}, currentProject = `, currentProject.value)
+		console.debug(`Loading project, $route.params =`, route.params, `, loadedProjectId = ${loadedProjectId.value}, currentProject = `, currentProject.value)
 
 		// Set the current project to the one we're about to load so that the title is already shown at the top
 		loadedProjectId.value = 0

frontend/src/views/project/ProjectGantt.vue

@@ -98,7 +98,7 @@ type Options = Flatpickr.Options.Options
 
 const props = defineProps<{
 	route: RouteLocationNormalized
-	view: IProjectView
+	viewId: IProjectView['id']
 }>()
 
 const GanttChart = createAsyncComponent(() => import('@/components/tasks/GanttChart.vue'))
@@ -115,7 +115,7 @@ const {
 	isLoading,
 	addTask,
 	updateTask,
-} = useGanttFilters(route, props.view)
+} = useGanttFilters(route, props.viewId)
 
 const DEFAULT_DATE_RANGE_DAYS = 7
 

frontend/src/views/project/ProjectKanban.vue

@@ -2,7 +2,7 @@
 	<ProjectWrapper
 		class="project-kanban"
 		:project-id="projectId"
-		:view
+		:viewId
 	>
 		<template #header>
 			<div class="filter-container">
@@ -307,10 +307,10 @@ import TaskPositionModel from '@/models/taskPosition'
 
 const {
 	projectId,
-	view,
+	viewId,
 } = defineProps<{
 	projectId: number,
-	view: IProjectView,
+	viewId: IProjectView['id'],
 }>()
 
 const DRAG_OPTIONS = {
@@ -399,14 +399,14 @@ watch(
 	() => ({
 		params: params.value,
 		projectId,
-		viewId: view.id,
+		viewId,
 	}),
 	({params}) => {
 		if (projectId === undefined || Number(projectId) === 0) {
 			return
 		}
 		collapsedBuckets.value = getCollapsedBucketState(projectId)
-		kanbanStore.loadBucketsForProject(projectId, view.id, params)
+		kanbanStore.loadBucketsForProject(projectId, viewId, params)
 	},
 	{
 		immediate: true,
@@ -431,7 +431,7 @@ function handleTaskContainerScroll(id: IBucket['id'], projectId: IProject['id'],
 
 	kanbanStore.loadNextTasksForBucket(
 		projectId,
-		view.id,
+		viewId,
 		params.value,
 		id,
 	)
@@ -511,7 +511,7 @@ async function updateTaskPosition(e) {
 	try {
 		const newPosition = new TaskPositionModel({
 			position,
-			projectViewId: view.id,
+			projectViewId: viewId,
 			taskId: newTask.id,
 		})
 		await taskPositionService.value.update(newPosition)

frontend/src/views/project/ProjectList.vue

@@ -2,7 +2,7 @@
 	<ProjectWrapper
 		class="project-list"
 		:project-id="projectId"
-		:view
+		:viewId
 	>
 		<template #header>
 			<div class="filter-container">
@@ -123,10 +123,10 @@ import TaskPositionModel from '@/models/taskPosition'
 
 const {
 	projectId,
-	view,
+	viewId,
 } = defineProps<{
 	projectId: IProject['id'],
-	view: IProjectView,
+	viewId: IProjectView['id'],
 }>()
 
 const ctaVisible = ref(false)
@@ -145,7 +145,7 @@ const {
 	loadTasks,
 	params,
 	sortByParam,
-} = useTaskList(() => projectId, () => view.id, {position: 'asc'})
+} = useTaskList(() => projectId, () => viewId, {position: 'asc'})
 
 const taskPositionService = ref(new TaskPositionService())
 
@@ -242,7 +242,7 @@ async function saveTaskPosition(e) {
 
 	await taskPositionService.value.update(new TaskPositionModel({
 		position,
-		projectViewId: view.id,
+		projectViewId: viewId,
 		taskId: task.id,
 	}))
 	tasks.value[e.newIndex] = {

frontend/src/views/project/ProjectTable.vue

@@ -2,7 +2,7 @@
 	<ProjectWrapper
 		class="project-table"
 		:project-id="projectId"
-		:view
+		:viewId
 	>
 		<template #header>
 			<div class="filter-container">
@@ -293,10 +293,10 @@ import type {IProjectView} from '@/modelTypes/IProjectView'
 
 const {
 	projectId,
-	view,
+	viewId,
 } = defineProps<{
 	projectId: IProject['id'],
-	view: IProjectView,
+	viewId: IProjectView['id'],
 }>()
 
 const ACTIVE_COLUMNS_DEFAULT = {
@@ -323,7 +323,7 @@ const SORT_BY_DEFAULT: SortBy = {
 const activeColumns = useStorage('tableViewColumns', {...ACTIVE_COLUMNS_DEFAULT})
 const sortBy = useStorage<SortBy>('tableViewSortBy', {...SORT_BY_DEFAULT})
 
-const taskList = useTaskList(() => projectId, () => view.id, sortBy.value)
+const taskList = useTaskList(() => projectId, () => viewId, sortBy.value)
 
 const {
 	loading,

frontend/src/views/project/ProjectView.vue

@@ -51,22 +51,22 @@ const route = useRoute()
 	<ProjectList
 		v-if="currentView?.viewKind === 'list'"
 		:project-id="projectId"
-		:view="currentView"
+		:viewId
 	/>
 	<ProjectGantt
 		v-if="currentView?.viewKind === 'gantt'"
 		:route
-		:view="currentView"
+		:viewId
 	/>
 	<ProjectTable
 		v-if="currentView?.viewKind === 'table'"
 		:project-id="projectId"
-		:view="currentView"
+		:viewId
 	/>
 	<ProjectKanban
 		v-if="currentView?.viewKind === 'kanban'"
 		:project-id="projectId"
-		:view="currentView"
+		:viewId
 	/>
 </template>
 

frontend/src/views/project/helpers/useGanttFilters.ts

@@ -94,7 +94,7 @@ export type UseGanttFiltersReturn =
 	ReturnType<typeof useRouteFilters<GanttFilters>> &
 	ReturnType<typeof useGanttTaskList<GanttFilters>>
 
-export function useGanttFilters(route: Ref<RouteLocationNormalized>, view: IProjectView): UseGanttFiltersReturn {
+export function useGanttFilters(route: Ref<RouteLocationNormalized>, viewId: IProjectView['id']): UseGanttFiltersReturn {
 	const {
 		filters,
 		hasDefaultFilters,
@@ -114,7 +114,7 @@ export function useGanttFilters(route: Ref<RouteLocationNormalized>, view: IProj
 		isLoading,
 		addTask,
 		updateTask,
-	} = useGanttTaskList<GanttFilters>(filters, ganttFiltersToApiParams, view)
+	} = useGanttTaskList<GanttFilters>(filters, ganttFiltersToApiParams, viewId)
 
 	return {
 		filters,

frontend/src/views/project/helpers/useGanttTaskList.ts

@@ -16,7 +16,7 @@ import type {IProjectView} from '@/modelTypes/IProjectView'
 export function useGanttTaskList<F extends Filters>(
 	filters: Ref<F>,
 	filterToApiParams: (filters: F) => TaskFilterParams,
-	view: IProjectView,
+	viewId: IProjectView['id'],
 	loadAll: boolean = true,
 ) {
 	const taskCollectionService = shallowReactive(new TaskCollectionService())
@@ -33,7 +33,7 @@ export function useGanttTaskList<F extends Filters>(
 			params.filter_timezone = authStore.settings.timezone
 		}
 		
-		const tasks = await taskCollectionService.getAll({projectId: filters.value.projectId, viewId: view.id}, params, page) as ITask[]
+		const tasks = await taskCollectionService.getAll({projectId: filters.value.projectId, viewId}, params, page) as ITask[]
 		if (loadAll && page < taskCollectionService.totalPages) {
 			const nextTasks = await fetchTasks(params, page + 1)
 			return tasks.concat(nextTasks)