feat(views): fetch tasks via view context when accessing them through views

frontend/src/views/project/ProjectGantt.vue

@@ -2,7 +2,7 @@
 	<ProjectWrapper
 		class="project-gantt"
 		:project-id="filters.projectId"
-		view-name="gantt"
+		:view
 	>
 		<template #header>
 			<card :has-content="false">
@@ -92,10 +92,14 @@ import {RIGHTS} from '@/constants/rights'
 
 import type {DateISO} from '@/types/DateISO'
 import type {ITask} from '@/modelTypes/ITask'
+import type {IProjectView} from '@/modelTypes/IProjectView'
 
 type Options = Flatpickr.Options.Options
 
-const props = defineProps<{route: RouteLocationNormalized}>()
+const props = defineProps<{
+	route: RouteLocationNormalized
+	view: IProjectView
+}>()
 
 const GanttChart = createAsyncComponent(() => import('@/components/tasks/GanttChart.vue'))
 
@@ -111,7 +115,7 @@ const {
 	isLoading,
 	addTask,
 	updateTask,
-} = useGanttFilters(route)
+} = useGanttFilters(route, props.view)
 
 const DEFAULT_DATE_RANGE_DAYS = 7
 

frontend/src/views/project/ProjectKanban.vue

@@ -2,7 +2,7 @@
 	<ProjectWrapper
 		class="project-kanban"
 		:project-id="projectId"
-		view-name="kanban"
+		:view
 	>
 		<template #header>
 			<div class="filter-container">
@@ -301,11 +301,14 @@ import {isSavedFilter} from '@/services/savedFilter'
 import {success} from '@/message'
 import {useProjectStore} from '@/stores/projects'
 import type {TaskFilterParams} from '@/services/taskCollection'
+import type {IProjectView} from '@/modelTypes/IProjectView'
 
 const {
 	projectId = undefined,
+	view,
 } = defineProps<{
 	projectId: number,
+	view: IProjectView,
 }>()
 
 const DRAG_OPTIONS = {
@@ -424,6 +427,7 @@ function handleTaskContainerScroll(id: IBucket['id'], projectId: IProject['id'],
 
 	kanbanStore.loadNextTasksForBucket(
 		projectId,
+		view.id,
 		params.value,
 		id,
 	)

frontend/src/views/project/ProjectList.vue

@@ -2,7 +2,7 @@
 	<ProjectWrapper
 		class="project-list"
 		:project-id="projectId"
-		view-name="project"
+		:view
 	>
 		<template #header>
 			<div class="filter-container">
@@ -117,11 +117,14 @@ import {useBaseStore} from '@/stores/base'
 import {useTaskStore} from '@/stores/tasks'
 
 import type {IProject} from '@/modelTypes/IProject'
+import type {IProjectView} from '@/modelTypes/IProjectView'
 
 const {
 	projectId,
+	view,
 } = defineProps<{
 	projectId: IProject['id'],
+	view: IProjectView,
 }>()
 
 const ctaVisible = ref(false)
@@ -140,7 +143,7 @@ const {
 	loadTasks,
 	params,
 	sortByParam,
-} = useTaskList(() => projectId, {position: 'asc'})
+} = useTaskList(() => projectId, () => view.id, {position: 'asc'})
 
 const tasks = ref<ITask[]>([])
 watch(

frontend/src/views/project/ProjectTable.vue

@@ -2,7 +2,7 @@
 	<ProjectWrapper
 		class="project-table"
 		:project-id="projectId"
-		view-name="table"
+		:view
 	>
 		<template #header>
 			<div class="filter-container">
@@ -289,11 +289,14 @@ import {useTaskList} from '@/composables/useTaskList'
 import type {ITask} from '@/modelTypes/ITask'
 import type {IProject} from '@/modelTypes/IProject'
 import AssigneeList from '@/components/tasks/partials/assigneeList.vue'
+import type {IProjectView} from '@/modelTypes/IProjectView'
 
 const {
 	projectId,
+	view,
 } = defineProps<{
 	projectId: IProject['id'],
+	view: IProjectView,
 }>()
 
 const ACTIVE_COLUMNS_DEFAULT = {

frontend/src/views/project/ProjectView.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import {computed} 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'
+
+const {
+	projectId,
+	viewId,
+} = defineProps<{
+	projectId: number,
+	viewId: number,
+}>()
+
+const projectStore = useProjectStore()
+
+const currentView = computed(() => {
+	const project = projectStore.projects[projectId]
+
+	return project?.views.find(v => v.id === viewId)
+})
+
+const route = useRoute()
+</script>
+
+<template>
+	<ProjectList
+		v-if="currentView?.viewKind === 'list'"
+		:project-id="projectId"
+		:view="currentView"
+	/>
+	<ProjectGantt
+		v-if="currentView?.viewKind === 'gantt'"
+		:route
+		:view="currentView"
+	/>
+	<ProjectTable
+		v-if="currentView?.viewKind === 'table'"
+		:project-id="projectId"
+		:view="currentView"
+	/>
+	<ProjectKanban
+		v-if="currentView?.viewKind === 'kanban'"
+		:project-id="projectId"
+		:view="currentView"
+	/>
+</template>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -12,6 +12,7 @@ import type {TaskFilterParams} from '@/services/taskCollection'
 
 import type {DateISO} from '@/types/DateISO'
 import type {DateKebab} from '@/types/DateKebab'
+import type {IProjectView} from '@/modelTypes/IProjectView'
 
 // convenient internal filter object
 export interface GanttFilters {
@@ -88,7 +89,7 @@ export type UseGanttFiltersReturn =
 	ReturnType<typeof useRouteFilters<GanttFilters>> &
 	ReturnType<typeof useGanttTaskList<GanttFilters>>
 
-export function useGanttFilters(route: Ref<RouteLocationNormalized>): UseGanttFiltersReturn {
+export function useGanttFilters(route: Ref<RouteLocationNormalized>, view: IProjectView): UseGanttFiltersReturn {
 	const {
 		filters,
 		hasDefaultFilters,
@@ -108,7 +109,7 @@ export function useGanttFilters(route: Ref<RouteLocationNormalized>): UseGanttFi
 		isLoading,
 		addTask,
 		updateTask,
-	} = useGanttTaskList<GanttFilters>(filters, ganttFiltersToApiParams)
+	} = useGanttTaskList<GanttFilters>(filters, ganttFiltersToApiParams, view)
 
 	return {
 		filters,

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

@@ -1,4 +1,4 @@
-import {computed, ref, shallowReactive, watch, type Ref} from 'vue'
+import {computed, ref, type Ref, shallowReactive, watch} from 'vue'
 import {klona} from 'klona/lite'
 
 import type {Filters} from '@/composables/useRouteFilters'
@@ -10,16 +10,15 @@ import TaskService from '@/services/task'
 import TaskModel from '@/models/task'
 import {error, success} from '@/message'
 import {useAuthStore} from '@/stores/auth'
+import type {IProjectView} from '@/modelTypes/IProjectView'
 
 // FIXME: unify with general `useTaskList`
 export function useGanttTaskList<F extends Filters>(
 	filters: Ref<F>,
 	filterToApiParams: (filters: F) => TaskFilterParams,
-	options: {
-		loadAll?: boolean,
-	} = {
-		loadAll: true,
-	}) {
+	view: IProjectView,
+	loadAll: boolean = true,
+) {
 	const taskCollectionService = shallowReactive(new TaskCollectionService())
 	const taskService = shallowReactive(new TaskService())
 	const authStore = useAuthStore()
@@ -29,13 +28,13 @@ export function useGanttTaskList<F extends Filters>(
 	const tasks = ref<Map<ITask['id'], ITask>>(new Map())
 
 	async function fetchTasks(params: TaskFilterParams, page = 1): Promise<ITask[]> {
-		
-		if(params.filter_timezone === '') {
+
+		if (params.filter_timezone === '') {
 			params.filter_timezone = authStore.settings.timezone
 		}
 		
 		const tasks = await taskCollectionService.getAll({projectId: filters.value.projectId}, params, page) as ITask[]
-		if (options.loadAll && page < taskCollectionService.totalPages) {
+		if (loadAll && page < taskCollectionService.totalPages) {
 			const nextTasks = await fetchTasks(params, page + 1)
 			return tasks.concat(nextTasks)
 		}