feat: mount list views as route-views

src/router/index.ts

@@ -2,6 +2,8 @@ import { createRouter, createWebHistory, RouteLocation } from 'vue-router'
 import {saveLastVisited} from '@/helpers/saveLastVisited'
 import {store} from '@/store'
 
+import {getListView} from '@/helpers/saveListView'
+
 import HomeComponent from '../views/Home'
 import NotFoundComponent from '../views/404'
 import About from '../views/About'
@@ -23,12 +25,12 @@ import NewLabelComponent from '../views/labels/NewLabel'
 // Migration
 import MigrationComponent from '../views/migrator/Migrate'
 import MigrateServiceComponent from '../views/migrator/MigrateService'
+
 // List Views
-import ShowListComponent from '../views/list/ShowList'
+import ListList from '../views/list/ListList'
-import Kanban from '../views/list/views/Kanban'
+import ListGantt from '../views/list/ListGantt'
-import List from '../views/list/views/List'
+import ListTable from '../views/list/ListTable'
-import Gantt from '../views/list/views/Gantt'
+import ListKanban from '../views/list/ListKanban'
-import Table from '../views/list/views/Table'
 
 // List Settings
 import ListSettingEdit from '../views/list/settings/edit'
@@ -323,29 +325,37 @@ const router = createRouter({
 		{
 			path: '/lists/:listId',
 			name: 'list.index',
-			component: ShowListComponent,
+			beforeEnter(to) {
-			children: [
+				// Redirect the user to list view by default
+
+				const savedListView = getListView(to.params.listId)
+				console.debug('Replaced list view with', savedListView)
+
+				return {
+					name: savedListView,
+					params: {listId: to.params.listId},
+				}
+			},
+		},
 		{
 			path: '/lists/:listId/list',
 			name: 'list.list',
-					component: List,
+			component: ListList,
 		},
 		{
 			path: '/lists/:listId/gantt',
 			name: 'list.gantt',
-					component: Gantt,
+			component: ListGantt,
 		},
 		{
 			path: '/lists/:listId/table',
 			name: 'list.table',
-					component: Table,
+			component: ListTable,
 		},
 		{
 			path: '/lists/:listId/kanban',
 			name: 'list.kanban',
-					component: Kanban,
+			component: ListKanban,
-				},
-			],
 		},
 		{
 			path: '/teams',

src/views/list/ListGantt.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="gantt-chart-container">
+	<ListWrapper>
-		<card :padding="false" class="has-overflow">
+		<template #header>
 		<div class="gantt-options p-4">
 			<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
 				{{ $t('list.gantt.showTasksWithoutDates') }}
@@ -44,6 +44,12 @@
 				</div>
 			</div>
 		</div>
+		</template>
+		
+		<template #default>
+		<div class="gantt-chart-container">
+		<card :padding="false" class="has-overflow">
+
 		<gantt-chart
 			:date-from="dateFrom"
 			:date-to="dateTo"
@@ -55,6 +61,8 @@
 		</card>
 		</div>
 		</template>
+	</ListWrapper>
+</template>
 
 <script setup>
 import { ref, computed } from 'vue'
@@ -64,6 +72,7 @@ import flatPickr from 'vue-flatpickr-component'
 import { i18n } from '@/i18n'
 import { store } from '@/store'
 
+import ListWrapper from './ListWrapper'
 import GanttChart from '@/components/tasks/gantt-component'
 import Fancycheckbox from '@/components/input/fancycheckbox'
 

src/views/list/ListKanban.vue

@@ -1,5 +1,6 @@
 <template>
-	<div class="kanban-view">
+	<ListWrapper>
+		<template #header>
 			<div class="filter-container" v-if="isSavedFilter">
 			<div class="items">
 				<filter-popup
@@ -8,6 +9,10 @@
 				/>
 			</div>
 			</div>
+		</template>
+
+		<template #default>
+			<div class="kanban-view">
 			<div
 				:class="{ 'is-loading': loading && !oneTaskUpdating}"
 				class="kanban kanban-bucket-container loader-container"
@@ -220,20 +225,23 @@
 		</transition>
 		</div>
 		</template>
+	</ListWrapper>
+</template>
 
 <script>
 import draggable from 'vuedraggable'
 import cloneDeep from 'lodash.clonedeep'
 
-import BucketModel from '../../../models/bucket'
+import BucketModel from '../../models/bucket'
 import {mapState} from 'vuex'
 import {saveListView} from '@/helpers/saveListView'
-import Rights from '../../../models/constants/rights.json'
+import Rights from '../../models/constants/rights.json'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import ListWrapper from './ListWrapper'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
-import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
+import {calculateItemPosition} from '../../helpers/calculateItemPosition'
 import KanbanCard from '@/components/tasks/partials/kanban-card'
 
 const DRAG_OPTIONS = {
@@ -250,6 +258,7 @@ const MIN_SCROLL_HEIGHT_PERCENT = 0.25
 export default {
 	name: 'Kanban',
 	components: {
+		ListWrapper,
 		KanbanCard,
 		Dropdown,
 		FilterPopup,

src/views/list/ListList.vue

@@ -1,8 +1,6 @@
 <template>
-	<div
+	<ListWrapper>
-		:class="{ 'is-loading': loading }"
+		<template #header>
-		class="loader-container is-max-width-desktop list-view"
-	>
 		<div
 			class="filter-container"
 			v-if="list.isSavedFilter && !list.isSavedFilter()"
@@ -47,7 +45,13 @@
 				/>
 			</div>
 		</div>
+		</template>
 
+		<template #default>
+		<div
+			:class="{ 'is-loading': loading }"
+			class="loader-container is-max-width-desktop list-view"
+		>
 		<card :padding="false" :has-content="false" class="has-overflow">
 			<template
 				v-if="!list.isArchived && canWrite && list.id > 0"
@@ -124,17 +128,20 @@
 		</card>
 		</div>
 		</template>
+	</ListWrapper>
+</template>
 
 <script>
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-import EditTask from '../../../components/tasks/edit-task'
+import ListWrapper from './ListWrapper'
-import AddTask from '../../../components/tasks/add-task'
+import EditTask from '@/components/tasks/edit-task'
-import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
+import AddTask from '@/components/tasks/add-task'
+import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
 import { useTaskList } from '@/composables/taskList'
 import {saveListView} from '@/helpers/saveListView'
-import Rights from '../../../models/constants/rights.json'
+import Rights from '../../models/constants/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing.vue'
@@ -142,7 +149,7 @@ import Pagination from '@/components/misc/pagination.vue'
 import {ALPHABETICAL_SORT} from '@/components/list/partials/filters.vue'
 
 import draggable from 'vuedraggable'
-import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
+import {calculateItemPosition} from '../../helpers/calculateItemPosition'
 
 function sortTasks(tasks) {
 	if (tasks === null || tasks === []) {
@@ -177,6 +184,7 @@ export default {
 		}
 	},
 	components: {
+		ListWrapper,
 		Nothing,
 		FilterPopup,
 		SingleTaskInList,

src/views/list/ListTable.vue

@@ -1,5 +1,6 @@
 <template>
-	<div :class="{'is-loading': loading}" class="table-view loader-container">
+	<ListWrapper>
+		<template #header>
 			<div class="filter-container">
 			<div class="items">
 				<popup>
@@ -60,7 +61,10 @@
 				/>
 			</div>
 			</div>
+		</template>
 
+		<template #default>
+			<div :class="{'is-loading': loading}" class="table-view loader-container">
 			<card :padding="false" :has-content="false">
 			<div class="has-horizontal-overflow">
 				<table class="table has-actions is-hoverable is-fullwidth mb-0">
@@ -175,11 +179,14 @@
 			</card>
 			</div>
 		</template>
+	</ListWrapper>
+</template>
 
 <script setup>
 import { ref, reactive, computed, toRaw } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
+import ListWrapper from './ListWrapper'
 import Done from '@/components/misc/Done.vue'
 import User from '@/components/misc/user'
 import PriorityLabel from '@/components/tasks/partials/priorityLabel'
@@ -254,7 +261,6 @@ function beforeLoad(params) {
 const {
 	tasks,
 	loading,
-	showTaskFilter,
 	params,
 	loadTasks,
 	totalPages,

src/views/list/ListWrapper.vue

@@ -34,6 +34,7 @@
 					{{ $t('list.kanban.title') }}
 				</router-link>
 			</div>
+			<slot name="header" />
 		</div>
 		<transition name="fade">
 			<Message variant="warning" v-if="currentList.isArchived" class="mb-4">
@@ -41,13 +42,13 @@
 			</Message>
 		</transition>
 
-		<router-view/>
+		<slot />
 	</div>
 </template>
 
 <script setup>
 import {ref, shallowRef, computed, watchEffect} from 'vue'
-import {useRouter, useRoute} from 'vue-router'
+import {useRoute} from 'vue-router'
 
 import Message from '@/components/misc/message'
 
@@ -57,26 +58,15 @@ import ListService from '@/services/list'
 import {store} from '@/store'
 import {CURRENT_LIST} from '@/store/mutation-types'
 
-import {getListView} from '@/helpers/saveListView'
 import {getListTitle} from '@/helpers/getListTitle'
 import {saveListToHistory} from '@/modules/listHistory'
 import { useTitle } from '@/composables/useTitle'
 
 const route = useRoute()
-const router = useRouter()
 
 const listService = shallowRef(new ListService())
 const loadedListId = ref(0)
 
-// beforeRouteEnter(to) {
-// Redirect the user to list view by default
-if (route.name !== 'list.index') {
-	const savedListView = getListView(route.params.listId)
-	console.debug('Replaced list view with', savedListView)
-	router.replace({name: 'list.list', params: {id: route.params.listId}})
-}
-// },
-
 const currentList = computed(() => {
 	return typeof store.state.currentList === 'undefined' ? {
 		id: 0,