From 5a0c0eff9f0bb822a597164c2b87da7480ce4498 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 3 Oct 2021 15:54:24 +0200
Subject: [PATCH 01/54] feat: implement modals with vue router 4

This is an implementation of the modals with the new possibilities of vue router 3.

See: https://github.com/vuejs/vue-router/issues/703#issuecomment-865066913 for a better explanation
and the linked example implementation: https://github.com/vuejs/vue-router-next/blob/master/e2e/modal/index.ts
---
 src/components/home/contentAuth.vue           |  21 +-
 src/components/list/partials/filter-popup.vue |   3 +-
 .../misc/keyboard-shortcuts/index.vue         |  38 ++--
 .../misc/keyboard-shortcuts/shortcuts.js      |   9 +-
 src/components/tasks/edit-task.vue            |  11 +-
 src/components/tasks/partials/kanban-card.vue |   9 +-
 .../tasks/partials/singleTaskInList.vue       |  13 +-
 src/router/index.ts                           | 184 ------------------
 src/views/Home.vue                            |   7 +
 src/views/list/ShowList.vue                   |  23 ++-
 src/views/list/views/Gantt.vue                |  18 +-
 src/views/list/views/Kanban.vue               |  19 +-
 src/views/list/views/List.vue                 |  23 ++-
 src/views/list/views/Table.vue                |  25 ++-
 src/views/tasks/TaskDetailViewModal.vue       |  33 +---
 15 files changed, 152 insertions(+), 284 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index d3f0dc8a9..3dac25ff4 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -20,8 +20,9 @@
 
 				<quick-actions/>
 
-				<router-view/>
+				<router-view :route="routeWithModal"/>
 
+				<!-- TODO: is this still used? -->
 				<router-view name="popup" v-slot="{ Component }">
 					<transition name="modal">
 						<component :is="Component" />
@@ -50,6 +51,24 @@ import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/muta
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
 
+function useRouteWithModal() {
+	const router = useRouter()
+	const route = useRoute()
+	const historyState = computed(() => route.fullPath && window.history.state)
+
+	const routeWithModal = computed(() => {
+		if (historyState.value.backgroundView) {
+			return router.resolve(historyState.value.backgroundView)
+		} else {
+			return route
+		}
+	})
+
+	return { routeWithModal }
+}
+
+useRouteWithModal()
+
 const store = useStore()
 
 const background = computed(() => store.state.background)
diff --git a/src/components/list/partials/filter-popup.vue b/src/components/list/partials/filter-popup.vue
index efbfcbe3e..d4caf9b42 100644
--- a/src/components/list/partials/filter-popup.vue
+++ b/src/components/list/partials/filter-popup.vue
@@ -29,9 +29,10 @@
 
 <script>
 import Filters from '@/components/list/partials/filters'
-import {getDefaultParams} from '@/components/tasks/mixins/taskList'
 import Popup from '@/components/misc/popup'
 
+import {getDefaultParams} from '@/composables/taskList'
+
 export default {
 	name: 'filter-popup',
 	components: {
diff --git a/src/components/misc/keyboard-shortcuts/index.vue b/src/components/misc/keyboard-shortcuts/index.vue
index 3164dade1..a17ad50ba 100644
--- a/src/components/misc/keyboard-shortcuts/index.vue
+++ b/src/components/misc/keyboard-shortcuts/index.vue
@@ -6,7 +6,9 @@
 
 				<message>
 					{{
-						s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
+						s?.available($route)
+							? $t('keyboardShortcuts.currentPageOnly')
+							: $t('keyboardShortcuts.allPages')
 					}}
 				</message>
 
@@ -17,7 +19,8 @@
 							class="shortcut-keys"
 							is="dd"
 							:keys="sc.keys"
-							:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
+							:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"
+						/>
 					</template>
 				</dl>
 			</template>
@@ -25,28 +28,17 @@
 	</modal>
 </template>
 
-<script>
-import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
-import Shortcut from '@/components/misc/shortcut.vue'
-import Message from '@/components/misc/message'
-import {KEYBOARD_SHORTCUTS} from './shortcuts'
+<script lang="ts" setup>
+import {store} from '@/store'
 
-export default {
-	name: 'keyboard-shortcuts',
-	components: {
-		Message, 
-		Shortcut,
-	},
-	data() {
-		return {
-			shortcuts: KEYBOARD_SHORTCUTS,
-		}
-	},
-	methods: {
-		close() {
-			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
-		},
-	},
+import Shortcut from '@/components/misc/shortcut.vue'
+import Message from '@/components/misc/message.vue'
+
+import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
+import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
+
+function close() {
+	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
 }
 </script>
 
diff --git a/src/components/misc/keyboard-shortcuts/shortcuts.js b/src/components/misc/keyboard-shortcuts/shortcuts.js
index bcc5014b4..06a3426c9 100644
--- a/src/components/misc/keyboard-shortcuts/shortcuts.js
+++ b/src/components/misc/keyboard-shortcuts/shortcuts.js
@@ -5,7 +5,6 @@ const ctrl = isAppleDevice() ? '⌘' : 'ctrl'
 export const KEYBOARD_SHORTCUTS = [
 	{
 		title: 'keyboardShortcuts.general',
-		available: () => null,
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.toggleMenu',
@@ -55,13 +54,7 @@ export const KEYBOARD_SHORTCUTS = [
 	},
 	{
 		title: 'keyboardShortcuts.task.title',
-		available: (route) => [
-			'task.detail',
-			'task.list.detail',
-			'task.gantt.detail',
-			'task.kanban.detail',
-			'task.detail',
-		].includes(route.name),
+		available: (route) => route.name === 'task.detail',
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.task.assign',
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 90f6adb74..6ebe41106 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -67,7 +67,7 @@
 
 		<router-link
 			class="mt-2 has-text-centered is-block"
-			:to="{name: 'task.detail', params: {id: taskEditTask.id}}"
+			:to="taskDetailRoute"
 		>
 			{{ $t('task.openDetail') }}
 		</router-link>
@@ -102,6 +102,15 @@ export default {
 			taskEditTask: TaskModel,
 		}
 	},
+	computed: {
+		taskDetailRoute() {
+			return {
+				name: 'task.detail',
+				params: { id: this.taskEditTask.id },
+				state: { backgroundView: this.$router.currentRoute.value.fullPath },
+			}
+		},
+	},
 	components: {
 		ColorPicker,
 		Reminders,
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 96e73a999..d0edae3e3 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -7,8 +7,8 @@
 			'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
 		}"
 		:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
-		@click.ctrl="() => toggleTaskDone(task)"
 		@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
+		@click.ctrl="() => toggleTaskDone(task)"
 		@click.meta="() => toggleTaskDone(task)"
 	>
 		<span class="task-id">
@@ -112,6 +112,13 @@ export default {
 				this.loadingInternal = false
 			}
 		},
+		openTaskDetail() {
+			this.$router.push({
+				name: 'task.detail',
+				params: { id: this.task.id },
+				state: { backgroundView: this.$router.currentRoute.value.fullPath },
+			})
+		},
 	},
 }
 </script>
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 9e955d5c8..168386e62 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -8,7 +8,7 @@
 		>
 		</span>
 		<router-link
-			:to="{ name: taskDetailRoute, params: { id: task.id } }"
+			:to="taskDetailRoute"
 			:class="{ 'done': task.done}"
 			class="tasktext">
 			<span>
@@ -126,10 +126,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		taskDetailRoute: {
-			type: String,
-			default: 'task.list.detail',
-		},
 		showList: {
 			type: Boolean,
 			default: false,
@@ -167,6 +163,13 @@ export default {
 				title: '',
 			} : this.$store.state.currentList
 		},
+		taskDetailRoute() {
+			return {
+				name: 'task.detail',
+				params: { id: this.task.id },
+				state: { backgroundView: this.$router.currentRoute.value.fullPath },
+			}
+		},
 	},
 	methods: {
 		async markAsDone(checked) {
diff --git a/src/router/index.ts b/src/router/index.ts
index 21e4a96a3..43340e7b0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,7 +13,6 @@ import DataExportDownload from '../views/user/DataExportDownload'
 // Tasks
 import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange'
 import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth'
-import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal'
 import TaskDetailView from '../views/tasks/TaskDetailView'
 import ListNamespaces from '../views/namespaces/ListNamespaces'
 // Team Handling
@@ -315,204 +314,21 @@ const router = createRouter({
 					path: '/lists/:listId/list',
 					name: 'list.list',
 					component: List,
-					children: [
-						{
-							path: '/tasks/:id',
-							name: 'task.list.detail',
-							component: TaskDetailViewModal,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'list.list.settings.edit',
-							component: ListSettingEdit,
-						},
-						{
-							path: '/lists/:listId/settings/background',
-							name: 'list.list.settings.background',
-							component: ListSettingBackground,
-						},
-						{
-							path: '/lists/:listId/settings/duplicate',
-							name: 'list.list.settings.duplicate',
-							component: ListSettingDuplicate,
-						},
-						{
-							path: '/lists/:listId/settings/share',
-							name: 'list.list.settings.share',
-							component: ListSettingShare,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'list.list.settings.delete',
-							component: ListSettingDelete,
-						},
-						{
-							path: '/lists/:listId/settings/archive',
-							name: 'list.list.settings.archive',
-							component: ListSettingArchive,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'filter.list.settings.edit',
-							component: FilterEdit,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'filter.list.settings.delete',
-							component: FilterDelete,
-						},
-					],
 				},
 				{
 					path: '/lists/:listId/gantt',
 					name: 'list.gantt',
 					component: Gantt,
-					children: [
-						{
-							path: '/tasks/:id',
-							name: 'task.gantt.detail',
-							component: TaskDetailViewModal,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'list.gantt.settings.edit',
-							component: ListSettingEdit,
-						},
-						{
-							path: '/lists/:listId/settings/background',
-							name: 'list.gantt.settings.background',
-							component: ListSettingBackground,
-						},
-						{
-							path: '/lists/:listId/settings/duplicate',
-							name: 'list.gantt.settings.duplicate',
-							component: ListSettingDuplicate,
-						},
-						{
-							path: '/lists/:listId/settings/share',
-							name: 'list.gantt.settings.share',
-							component: ListSettingShare,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'list.gantt.settings.delete',
-							component: ListSettingDelete,
-						},
-						{
-							path: '/lists/:listId/settings/archive',
-							name: 'list.gantt.settings.archive',
-							component: ListSettingArchive,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'filter.gantt.settings.edit',
-							component: FilterEdit,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'filter.gantt.settings.delete',
-							component: FilterDelete,
-						},
-					],
 				},
 				{
 					path: '/lists/:listId/table',
 					name: 'list.table',
 					component: Table,
-					children: [
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'list.table.settings.edit',
-							component: ListSettingEdit,
-						},
-						{
-							path: '/lists/:listId/settings/background',
-							name: 'list.table.settings.background',
-							component: ListSettingBackground,
-						},
-						{
-							path: '/lists/:listId/settings/duplicate',
-							name: 'list.table.settings.duplicate',
-							component: ListSettingDuplicate,
-						},
-						{
-							path: '/lists/:listId/settings/share',
-							name: 'list.table.settings.share',
-							component: ListSettingShare,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'list.table.settings.delete',
-							component: ListSettingDelete,
-						},
-						{
-							path: '/lists/:listId/settings/archive',
-							name: 'list.table.settings.archive',
-							component: ListSettingArchive,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'filter.table.settings.edit',
-							component: FilterEdit,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'filter.table.settings.delete',
-							component: FilterDelete,
-						},
-					],
 				},
 				{
 					path: '/lists/:listId/kanban',
 					name: 'list.kanban',
 					component: Kanban,
-					children: [
-						{
-							path: '/tasks/:id',
-							name: 'task.kanban.detail',
-							component: TaskDetailViewModal,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'list.kanban.settings.edit',
-							component: ListSettingEdit,
-						},
-						{
-							path: '/lists/:listId/settings/background',
-							name: 'list.kanban.settings.background',
-							component: ListSettingBackground,
-						},
-						{
-							path: '/lists/:listId/settings/duplicate',
-							name: 'list.kanban.settings.duplicate',
-							component: ListSettingDuplicate,
-						},
-						{
-							path: '/lists/:listId/settings/share',
-							name: 'list.kanban.settings.share',
-							component: ListSettingShare,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'list.kanban.settings.delete',
-							component: ListSettingDelete,
-						},
-						{
-							path: '/lists/:listId/settings/archive',
-							name: 'list.kanban.settings.archive',
-							component: ListSettingArchive,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'filter.kanban.settings.edit',
-							component: FilterEdit,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'filter.kanban.settings.delete',
-							component: FilterDelete,
-						},
-					],
 				},
 			],
 		},
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f3d2b3ecb..d6a63f832 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -51,6 +51,10 @@
 			</div>
 		</div>
 		<ShowTasks class="mt-4" :show-all="true" v-if="hasLists" :key="showTasksKey"/>
+
+		<transition name="modal">
+			<task-detail-view-modal v-if="showTaskDetail" />
+		</transition>
 	</div>
 </template>
 
@@ -67,6 +71,9 @@ import {getHistory} from '@/modules/listHistory'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useDateTimeSalutation} from '@/composables/useDateTimeSalutation'
+import TaskDetailViewModal, { useShowModal } from '@/views/tasks/TaskDetailViewModal.vue'
+
+const showTaskDetail = useShowModal()
 
 const welcome = useDateTimeSalutation()
 
diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue
index d0c1d20fe..c5e41ff9e 100644
--- a/src/views/list/ShowList.vue
+++ b/src/views/list/ShowList.vue
@@ -8,28 +8,28 @@
 				<router-link
 					v-shortcut="'g l'"
 					:title="$t('keyboardShortcuts.list.switchToListView')"
-					:class="{'is-active': $route.name.includes('list.list')}"
+					:class="{'is-active': currentListType === 'list'}"
 					:to="{ name: 'list.list',   params: { listId: listId } }">
 					{{ $t('list.list.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g g'"
 					:title="$t('keyboardShortcuts.list.switchToGanttView')"
-					:class="{'is-active': $route.name.includes('list.gantt')}"
+					:class="{'is-active': currentListType === 'gantt'}"
 					:to="{ name: 'list.gantt',  params: { listId: listId } }">
 					{{ $t('list.gantt.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g t'"
 					:title="$t('keyboardShortcuts.list.switchToTableView')"
-					:class="{'is-active': $route.name.includes('list.table')}"
+					:class="{'is-active': currentListType === 'table'}"
 					:to="{ name: 'list.table',  params: { listId: listId } }">
 					{{ $t('list.table.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g k'"
 					:title="$t('keyboardShortcuts.list.switchToKanbanView')"
-					:class="{'is-active': $route.name.includes('list.kanban')}"
+					:class="{'is-active': currentListType === 'kanban'}"
 					:to="{ name: 'list.kanban', params: { listId: listId } }">
 					{{ $t('list.kanban.title') }}
 				</router-link>
@@ -69,6 +69,11 @@ export default {
 		},
 	},
 	computed: {
+		currentListType() {
+			// default: 'list',
+			return ''
+		},
+
 		// Computed property to let "listId" always have a value
 		listId() {
 			return typeof this.$route.params.listId === 'undefined' ? 0 : this.$route.params.listId
@@ -113,11 +118,11 @@ export default {
 				this.$store.commit('kanban/setListId', 0)
 			}
 
-			// When clicking again on a list in the menu, there would be no list view selected which means no list
-			// at all. Users will then have to click on the list view menu again which is quite confusing.
-			if (this.$route.name === 'list.index') {
-				return this.replaceListView()
-			}
+			// // When clicking again on a list in the menu, there would be no list view selected which means no list
+			// // at all. Users will then have to click on the list view menu again which is quite confusing.
+			// if (this.$route.name === 'list.index') {
+			// 	return this.replaceListView()
+			// }
 
 			// Don't load the list if we either already loaded it or aren't dealing with a list at all currently and
 			// the currently loaded list has the right set.
diff --git a/src/views/list/views/Gantt.vue b/src/views/list/views/Gantt.vue
index b3628238b..4f89fbf70 100644
--- a/src/views/list/views/Gantt.vue
+++ b/src/views/list/views/Gantt.vue
@@ -52,13 +52,9 @@
 			:show-taskswithout-dates="showTaskswithoutDates"
 		/>
 
-		<!-- This router view is used to show the task popup while keeping the gantt chart itself -->
-		<router-view v-slot="{ Component }">
-			<transition name="modal">
-				<component :is="Component" />
-			</transition>
-		</router-view>
-
+		<transition name="modal">
+			<task-detail-view-modal v-if="showTaskDetail" />
+		</transition>
 		</card>
 	</div>
 </template>
@@ -69,12 +65,20 @@ import flatPickr from 'vue-flatpickr-component'
 import Fancycheckbox from '../../../components/input/fancycheckbox'
 import {saveListView} from '@/helpers/saveListView'
 
+import TaskDetailViewModal, { useShowModal } from '@/views/tasks/TaskDetailViewModal.vue'
+
 export default {
 	name: 'Gantt',
 	components: {
 		Fancycheckbox,
 		flatPickr,
 		GanttChart,
+		TaskDetailViewModal,
+	},
+	setup() {
+		return {
+			showTaskDetail: useShowModal(),
+		}
 	},
 	created() {
 		// Save the current list view to local storage
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 298ff48b5..bdb570fed 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -204,18 +204,12 @@
 			</div>
 		</div>
 
-		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
-		<router-view v-slot="{ Component }">
-			<transition name="modal">
-				<component :is="Component"/>
-			</transition>
-		</router-view>
-
 		<transition name="modal">
+			<task-detail-view-modal v-if="showTaskDetail" />
 			<modal
+				v-else-if="showBucketDeleteModal"
 				@close="showBucketDeleteModal = false"
 				@submit="deleteBucket()"
-				v-if="showBucketDeleteModal"
 			>
 				<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
 
@@ -242,6 +236,7 @@ import Dropdown from '@/components/misc/dropdown.vue'
 import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
 import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
 import KanbanCard from '@/components/tasks/partials/kanban-card'
+import TaskDetailViewModal, { useShowModal } from '@/views/tasks/TaskDetailViewModal.vue'
 
 const DRAG_OPTIONS = {
 	// sortable options
@@ -261,6 +256,7 @@ export default {
 		Dropdown,
 		FilterPopup,
 		draggable,
+		TaskDetailViewModal,
 	},
 	data() {
 		return {
@@ -296,6 +292,13 @@ export default {
 			},
 		}
 	},
+
+	setup() {
+		return {
+			showTaskDetail: useShowModal(),
+		}
+	},
+
 	created() {
 		// Save the current list view to local storage
 		// We use local storage and not vuex here to make it persistent across reloads.
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index d61a39e8d..ff59e46e6 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -90,7 +90,6 @@
 								:disabled="!canWrite"
 								:the-task="t"
 								@taskUpdated="updateTasks"
-								task-detail-route="task.detail"
 							>
 								<template v-if="canWrite">
 									<span class="icon handle">
@@ -124,12 +123,9 @@
 			/>
 		</card>
 
-		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
-		<router-view v-slot="{ Component }">
-			<transition name="modal">
-				<component :is="Component"/>
-			</transition>
-		</router-view>
+		<transition name="modal">
+			<task-detail-view-modal v-if="showTaskDetail" />
+		</transition>
 	</div>
 </template>
 
@@ -147,8 +143,8 @@ import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing.vue'
 import Pagination from '@/components/misc/pagination.vue'
-import Popup from '@/components/misc/popup'
-import { ALPHABETICAL_SORT } from '@/components/list/partials/filters'
+import {ALPHABETICAL_SORT} from '@/components/list/partials/filters.vue'
+import TaskDetailViewModal, { useShowModal } from '@/views/tasks/TaskDetailViewModal.vue'
 
 import draggable from 'vuedraggable'
 import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
@@ -192,7 +188,6 @@ export default {
 		taskList,
 	],
 	components: {
-		Popup,
 		Nothing,
 		FilterPopup,
 		SingleTaskInList,
@@ -200,7 +195,15 @@ export default {
 		AddTask,
 		draggable,
 		Pagination,
+		TaskDetailViewModal,
 	},
+
+	setup() {
+		return {
+			showTaskDetail: useShowModal(),
+		}
+	},
+
 	created() {
 		// Save the current list view to local storage
 		// We use local storage and not vuex here to make it persistent across reloads.
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index b15b0a1b8..943dd7734 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -120,7 +120,7 @@
 					<tbody>
 					<tr :key="t.id" v-for="t in tasks">
 						<td v-if="activeColumns.id">
-							<router-link :to="{name: 'task.detail', params: { id: t.id }}">
+							<router-link :to="taskDetailRoutes[t.id]">
 								<template v-if="t.identifier === ''">
 									#{{ t.index }}
 								</template>
@@ -133,7 +133,7 @@
 							<Done :is-done="t.done" variant="small" />
 						</td>
 						<td v-if="activeColumns.title">
-							<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
+							<router-link :to="taskDetailRoutes[t.id]">{{ t.title }}</router-link>
 						</td>
 						<td v-if="activeColumns.priority">
 							<priority-label :priority="t.priority" :done="t.done" :show-all="true"/>
@@ -185,6 +185,8 @@
 </template>
 
 <script>
+import {useRoute} from 'vue-router'
+
 import taskList from '@/components/tasks/mixins/taskList'
 import Done from '@/components/misc/Done.vue'
 import User from '@/components/misc/user'
@@ -237,6 +239,19 @@ export default {
 			},
 		}
 	},
+	computed: {
+		taskDetailRoutes() {
+			const taskDetailRoutes = {}
+			this.tasks.forEach(({id}) => {
+				taskDetailRoutes[id] = {
+					name: 'task.detail',
+					params: { id },
+					state: { backgroundView: this.$router.currentRoute.value.fullPath },
+				}
+			})
+			return taskDetailRoutes
+		},
+	},
 	created() {
 		const savedShowColumns = localStorage.getItem('tableViewColumns')
 		if (savedShowColumns !== null) {
@@ -253,9 +268,13 @@ export default {
 
 		this.initTasks(1)
 
+	},
+	setup() {
 		// Save the current list view to local storage
 		// We use local storage and not vuex here to make it persistent across reloads.
-		saveListView(this.$route.params.listId, this.$route.name)
+		const route = useRoute()
+		console.log(route.value)
+		saveListView(route.value.params.listId, route.value.name)
 	},
 	methods: {
 		initTasks(page, search = '') {
diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index 9b4932464..5f450f437 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@@ -13,37 +13,24 @@
 
 <script>
 import TaskDetailView from './TaskDetailView'
+import {computed} from 'vue'
+import {useRoute} from 'vue-router'
+
+export function useShowModal() {
+	const route = useRoute()
+	const historyState = computed(() => route.fullPath && window.history.state)
+	const show = computed(() => historyState.value.backgroundView)
+	return show
+}
 
 export default {
 	name: 'TaskDetailViewModal',
 	components: {
 		TaskDetailView,
 	},
-	data() {
-		return {
-			lastRoute: null,
-		}
-	},
-	beforeRouteEnter(to, from, next) {
-		next(vm => {
-			vm.lastRoute = from
-		})
-	},
-	beforeRouteLeave(to, from, next) {
-		if (from.name === 'task.kanban.detail' && to.name === 'task.detail') {
-			this.$router.replace({name: 'task.kanban.detail', params: to.params})
-			return
-		}
-
-		next()
-	},
 	methods: {
 		close() {
-			if (this.lastRoute === null) {
-				this.$router.back()
-			} else {
-				this.$router.push(this.lastRoute)
-			}
+			this.$router.back()
 		},
 	},
 }
-- 
2.40.1


From 281c922de1ea931fbbfa4b7db0a5c97aa4498f0d Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 25 Oct 2021 22:17:23 +0200
Subject: [PATCH 02/54] feat: make taskList a composable

---
 src/components/list/partials/filters.vue |   2 +-
 src/components/tasks/mixins/taskList.js  | 101 -----------
 src/composables/taskList.js              | 112 ++++++++++++
 src/views/list/ShowList.vue              |  13 +-
 src/views/list/views/List.vue            |  53 +++---
 src/views/list/views/Table.vue           | 210 ++++++++++++-----------
 6 files changed, 254 insertions(+), 237 deletions(-)
 delete mode 100644 src/components/tasks/mixins/taskList.js
 create mode 100644 src/composables/taskList.js

diff --git a/src/components/list/partials/filters.vue b/src/components/list/partials/filters.vue
index cbbb82f14..42f84f95c 100644
--- a/src/components/list/partials/filters.vue
+++ b/src/components/list/partials/filters.vue
@@ -191,7 +191,7 @@ import NamespaceService from '@/services/namespace'
 import EditLabels from '@/components/tasks/partials/editLabels.vue'
 
 import {objectToSnakeCase} from '@/helpers/case'
-import {getDefaultParams} from '@/components/tasks/mixins/taskList'
+import {getDefaultParams} from '@/composables/taskList'
 
 // FIXME: merge with DEFAULT_PARAMS in taskList.js
 const DEFAULT_PARAMS = {
diff --git a/src/components/tasks/mixins/taskList.js b/src/components/tasks/mixins/taskList.js
deleted file mode 100644
index a9b2e5878..000000000
--- a/src/components/tasks/mixins/taskList.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import TaskCollectionService from '@/services/taskCollection'
-
-// FIXME: merge with DEFAULT_PARAMS in filters.vue
-export const getDefaultParams = () => ({
-	sort_by: ['position', 'id'],
-	order_by: ['asc', 'desc'],
-	filter_by: ['done'],
-	filter_value: ['false'],
-	filter_comparator: ['equals'],
-	filter_concat: 'and',
-})
-
-/**
- * This mixin provides a base set of methods and properties to get tasks on a list.
- */
-export default {
-	data() {
-		return {
-			taskCollectionService: new TaskCollectionService(),
-			tasks: [],
-
-			currentPage: 0,
-
-			loadedList: null,
-
-			searchTerm: '',
-
-			showTaskFilter: false,
-			params: {...getDefaultParams()},
-		}
-	},
-	watch: {
-		// Only listen for query path changes
-		'$route.query': {
-			handler: 'loadTasksForPage',
-			immediate: true,
-		},
-		'$route.path': 'loadTasksOnSavedFilter',
-	},
-	methods: {
-		async loadTasks(
-			page,
-			search = '',
-			params = null,
-			forceLoading = false,
-		) {
-			// Because this function is triggered every time on topNavigation, we're putting a condition here to only load it when we actually want to show tasks
-			// FIXME: This is a bit hacky -> Cleanup.
-			if (
-				this.$route.name !== 'list.list' &&
-				this.$route.name !== 'list.table' &&
-				!forceLoading
-			) {
-				return
-			}
-
-			if (params === null) {
-				params = this.params
-			}
-
-			if (search !== '') {
-				params.s = search
-			}
-
-			const list = {listId: parseInt(this.$route.params.listId)}
-
-			const currentList = {
-				id: list.listId,
-				params,
-				search,
-				page,
-			}
-			if (JSON.stringify(currentList) === JSON.stringify(this.loadedList) && !forceLoading) {
-				return
-			}
-
-			this.tasks = []
-			this.tasks = await this.taskCollectionService.getAll(list, params, page)
-			this.currentPage = page
-			this.loadedList = JSON.parse(JSON.stringify(currentList))
-		},
-
-		loadTasksForPage(e) {
-			// The page parameter can be undefined, in the case where the user loads a new list from the side bar menu
-			let page = Number(e.page)
-			if (typeof e.page === 'undefined') {
-				page = 1
-			}
-			let search = e.search
-			if (typeof e.search === 'undefined') {
-				search = ''
-			}
-			this.initTasks(page, search)
-		},
-		loadTasksOnSavedFilter() {
-			if (typeof this.$route.params.listId !== 'undefined' && parseInt(this.$route.params.listId) < 0) {
-				this.loadTasks(1, '', null, true)
-			}
-		},
-	},
-}
\ No newline at end of file
diff --git a/src/composables/taskList.js b/src/composables/taskList.js
new file mode 100644
index 000000000..85d9cddf9
--- /dev/null
+++ b/src/composables/taskList.js
@@ -0,0 +1,112 @@
+import { ref, watch, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import TaskCollectionService from '@/services/taskCollection'
+
+// FIXME: merge with DEFAULT_PARAMS in filters.vue
+export const getDefaultParams = () => ({
+	sort_by: ['position', 'id'],
+	order_by: ['asc', 'desc'],
+	filter_by: ['done'],
+	filter_value: ['false'],
+	filter_comparator: ['equals'],
+	filter_concat: 'and',
+})
+
+/**
+ * This mixin provides a base set of methods and properties to get tasks on a list.
+ */
+export function createTaskList(initTasks) {
+	const taskCollectionService = ref(new TaskCollectionService())
+	const loading = computed(() => taskCollectionService.value.loading)
+	const totalPages = computed(() => taskCollectionService.value.totalPages)
+
+    const tasks = ref([])
+	const currentPage = ref(0)
+	const loadedList = ref(null)
+	const searchTerm = ref('')
+	const showTaskFilter = ref(false)
+	const params = ref({...getDefaultParams()})
+
+	const route = useRoute()
+
+	async function loadTasks(
+		page = 1,
+		search = '',
+		loadParams = { ...params.value },
+		forceLoading = false,
+	) {
+
+		// Because this function is triggered every time on topNavigation, we're putting a condition here to only load it when we actually want to show tasks
+		// FIXME: This is a bit hacky -> Cleanup.
+		if (
+			route.name !== 'list.list' &&
+			route.name !== 'list.table' &&
+			!forceLoading
+		) {
+			return
+		}
+
+		if (search !== '') {
+			loadParams.s = search
+		}
+
+		const list = {listId: parseInt(route.params.listId)}
+
+		const currentList = {
+			id: list.listId,
+			params: loadParams,
+			search,
+			page,
+		}
+		if (
+			JSON.stringify(currentList) === JSON.stringify(loadedList.value) &&
+			!forceLoading
+		) {
+			return
+		}
+
+		tasks.value = []
+		tasks.value = await taskCollectionService.value.getAll(list, loadParams, page)
+		currentPage.value = page
+		loadedList.value = JSON.parse(JSON.stringify(currentList))
+	}
+
+	async function loadTasksForPage(query) {
+		const { page, search } = query
+		initTasks(params)
+		await loadTasks(
+			// The page parameter can be undefined, in the case where the user loads a new list from the side bar menu
+			typeof page === 'undefined' ? 1 : Number(page),
+			search,
+			params.value,
+		)
+	}
+		
+	async function loadTasksOnSavedFilter() {
+		if (
+			typeof route.params.listId !== 'undefined' &&
+			parseInt(route.params.listId) < 0
+		) {
+			await loadTasks(1, '', null, true)
+		}
+	}
+
+	function initTaskList() {
+		// Only listen for query path changes
+		watch(() => route.query, loadTasksForPage, { immediate: true })
+		watch(() => route.path, loadTasksOnSavedFilter)
+	}
+
+	return {
+		tasks,
+		initTaskList,
+		loading,
+		totalPages,
+		currentPage,
+		showTaskFilter,
+		loadTasks,
+		searchTerm,
+		params,
+	}
+}
\ No newline at end of file
diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue
index c5e41ff9e..e663759dd 100644
--- a/src/views/list/ShowList.vue
+++ b/src/views/list/ShowList.vue
@@ -8,28 +8,28 @@
 				<router-link
 					v-shortcut="'g l'"
 					:title="$t('keyboardShortcuts.list.switchToListView')"
-					:class="{'is-active': currentListType === 'list'}"
+					:class="{'is-active': $route.name === 'list.list'}"
 					:to="{ name: 'list.list',   params: { listId: listId } }">
 					{{ $t('list.list.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g g'"
 					:title="$t('keyboardShortcuts.list.switchToGanttView')"
-					:class="{'is-active': currentListType === 'gantt'}"
+					:class="{'is-active': $route.name === 'list.gantt'}"
 					:to="{ name: 'list.gantt',  params: { listId: listId } }">
 					{{ $t('list.gantt.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g t'"
 					:title="$t('keyboardShortcuts.list.switchToTableView')"
-					:class="{'is-active': currentListType === 'table'}"
+					:class="{'is-active': $route.name === 'list.table'}"
 					:to="{ name: 'list.table',  params: { listId: listId } }">
 					{{ $t('list.table.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g k'"
 					:title="$t('keyboardShortcuts.list.switchToKanbanView')"
-					:class="{'is-active': currentListType === 'kanban'}"
+					:class="{'is-active': $route.name === 'list.kanban'}"
 					:to="{ name: 'list.kanban', params: { listId: listId } }">
 					{{ $t('list.kanban.title') }}
 				</router-link>
@@ -69,11 +69,6 @@ export default {
 		},
 	},
 	computed: {
-		currentListType() {
-			// default: 'list',
-			return ''
-		},
-
 		// Computed property to let "listId" always have a value
 		listId() {
 			return typeof this.$route.params.listId === 'undefined' ? 0 : this.$route.params.listId
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index ff59e46e6..299de6c7d 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		:class="{ 'is-loading': taskCollectionService.loading }"
+		:class="{ 'is-loading': loading }"
 		class="loader-container is-max-width-desktop list-view"
 	>
 		<div
@@ -26,7 +26,7 @@
 						</div>
 						<div class="control">
 							<x-button
-								:loading="taskCollectionService.loading"
+								:loading="loading"
 								@click="searchTasks"
 								:shadow="false"
 							>
@@ -59,7 +59,7 @@
 				/>
 			</template>
 
-			<nothing v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
+			<nothing v-if="ctaVisible && tasks.length === 0 && !loading">
 				{{ $t('list.list.empty') }}
 				<a @click="focusNewTaskInput()">
 					{{ $t('list.list.newTaskCta') }}
@@ -117,8 +117,8 @@
 				/>
 			</div>
 
-			<Pagination
-				:total-pages="taskCollectionService.totalPages"
+			<Pagination 
+				:total-pages="totalPages"
 				:current-page="currentPage"
 			/>
 		</card>
@@ -130,13 +130,16 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
 import TaskService from '../../../services/task'
 import TaskModel from '../../../models/task'
 
 import EditTask from '../../../components/tasks/edit-task'
 import AddTask from '../../../components/tasks/add-task'
 import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
-import taskList from '../../../components/tasks/mixins/taskList'
+import { createTaskList } from '@/composables/taskList'
 import {saveListView} from '@/helpers/saveListView'
 import Rights from '../../../models/constants/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
@@ -172,8 +175,6 @@ export default {
 	data() {
 		return {
 			taskService: new TaskService(),
-			isTaskEdit: false,
-			taskEditTask: TaskModel,
 			ctaVisible: false,
 			showTaskSearch: false,
 
@@ -184,9 +185,6 @@ export default {
 			},
 		}
 	},
-	mixins: [
-		taskList,
-	],
 	components: {
 		Nothing,
 		FilterPopup,
@@ -199,15 +197,28 @@ export default {
 	},
 
 	setup() {
-		return {
-			showTaskDetail: useShowModal(),
-		}
-	},
+		const taskEditTask = ref(TaskModel)
+		const isTaskEdit = ref(false)
+
+		// This function initializes the tasks page and loads the first page of tasks
+		function beforeLoad() {
+			taskEditTask.value = null
+			isTaskEdit.value = false
+		}
+
+		const taskList = createTaskList(beforeLoad)
 
-	created() {
 		// Save the current list view to local storage
 		// We use local storage and not vuex here to make it persistent across reloads.
-		saveListView(this.$route.params.listId, this.$route.name)
+		const route = useRoute()
+		saveListView(route.params.listId, route.name)
+
+		return {
+			taskEditTask,
+			isTaskEdit,
+			showTaskDetail: useShowModal(),
+			...taskList,
+		}
 	},
 	computed: {
 		isAlphabeticalSorting() {
@@ -247,17 +258,11 @@ export default {
 			// When clicking on the search button, @blur from the input is fired. If we
 			// would then directly hide the whole search bar directly, no click event
 			// from the button gets fired. To prevent this, we wait 200ms until we hide
-			// everything so the button has a chance of firering the search event.
+			// everything so the button has a chance of firing the search event.
 			setTimeout(() => {
 				this.showTaskSearch = false
 			}, 200)
 		},
-		// This function initializes the tasks page and loads the first page of tasks
-		initTasks(page, search = '') {
-			this.taskEditTask = null
-			this.isTaskEdit = false
-			this.loadTasks(page, search)
-		},
 		focusNewTaskInput() {
 			this.$refs.newTaskInput.$refs.newTaskInput.focus()
 		},
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index 943dd7734..238aa04ef 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="{'is-loading': taskCollectionService.loading}" class="table-view loader-container">
+	<div :class="{'is-loading': loading}" class="table-view loader-container">
 		<div class="filter-container">
 			<div class="items">
 				<popup>
@@ -169,7 +169,7 @@
 			</div>
 
 			<Pagination 
-				:total-pages="taskCollectionService.totalPages"
+				:total-pages="totalPages"
 				:current-page="currentPage"
 			/>
 		</card>
@@ -185,9 +185,10 @@
 </template>
 
 <script>
-import {useRoute} from 'vue-router'
+import { defineComponent, ref, reactive, computed, toRaw } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 
-import taskList from '@/components/tasks/mixins/taskList'
+import { createTaskList } from '@/composables/taskList'
 import Done from '@/components/misc/Done.vue'
 import User from '@/components/misc/user'
 import PriorityLabel from '@/components/tasks/partials/priorityLabel'
@@ -200,7 +201,39 @@ import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup'
 
-export default {
+const ACTIVE_COLUMNS_DEFAULT = {
+	id: true,
+	done: true,
+	title: true,
+	priority: false,
+	labels: true,
+	assignees: true,
+	dueDate: true,
+	startDate: false,
+	endDate: false,
+	percentDone: false,
+	created: false,
+	updated: false,
+	createdBy: false,
+}
+
+const SORT_BY_DEFAULT = {
+	id: 'desc',
+}
+
+function useSavedView(activeColumns, sortBy) {
+	const savedShowColumns = localStorage.getItem('tableViewColumns')
+	if (savedShowColumns !== null) {
+		Object.assign(activeColumns, JSON.parse(savedShowColumns))
+	}
+
+	const savedSortBy = localStorage.getItem('tableViewSortBy')
+	if (savedSortBy !== null) {
+		sortBy.value = JSON.parse(savedSortBy)
+	}
+}
+
+export default defineComponent({
 	name: 'Table',
 	components: {
 		Popup,
@@ -214,75 +247,18 @@ export default {
 		User,
 		Pagination,
 	},
-	mixins: [
-		taskList,
-	],
-	data() {
-		return {
-			activeColumns: {
-				id: true,
-				done: true,
-				title: true,
-				priority: false,
-				labels: true,
-				assignees: true,
-				dueDate: true,
-				startDate: false,
-				endDate: false,
-				percentDone: false,
-				created: false,
-				updated: false,
-				createdBy: false,
-			},
-			sortBy: {
-				id: 'desc',
-			},
-		}
-	},
-	computed: {
-		taskDetailRoutes() {
-			const taskDetailRoutes = {}
-			this.tasks.forEach(({id}) => {
-				taskDetailRoutes[id] = {
-					name: 'task.detail',
-					params: { id },
-					state: { backgroundView: this.$router.currentRoute.value.fullPath },
-				}
-			})
-			return taskDetailRoutes
-		},
-	},
-	created() {
-		const savedShowColumns = localStorage.getItem('tableViewColumns')
-		if (savedShowColumns !== null) {
-			this.activeColumns = JSON.parse(savedShowColumns)
-		}
-		const savedSortBy = localStorage.getItem('tableViewSortBy')
-		if (savedSortBy !== null) {
-			this.sortBy = JSON.parse(savedSortBy)
-		}
-
-		this.params.filter_by = []
-		this.params.filter_value = []
-		this.params.filter_comparator = []
-
-		this.initTasks(1)
-
-	},
 	setup() {
-		// Save the current list view to local storage
-		// We use local storage and not vuex here to make it persistent across reloads.
-		const route = useRoute()
-		console.log(route.value)
-		saveListView(route.value.params.listId, route.value.name)
-	},
-	methods: {
-		initTasks(page, search = '') {
+		const activeColumns = reactive({ ...ACTIVE_COLUMNS_DEFAULT })
+		const sortBy = ref({ ...SORT_BY_DEFAULT })
+
+		useSavedView(activeColumns, sortBy)
+
+		function beforeLoad(params) {
 			// This makes sure an id sort order is always sorted last.
 			// When tasks would be sorted first by id and then by whatever else was specified, the id sort takes
 			// precedence over everything else, making any other sort columns pretty useless.
-			const sortKeys = Object.keys(this.sortBy)
 			let hasIdFilter = false
+			const sortKeys = Object.keys(sortBy.value)
 			for (const s of sortKeys) {
 				if (s === 'id') {
 					sortKeys.splice(s, 1)
@@ -293,50 +269,80 @@ export default {
 			if (hasIdFilter) {
 				sortKeys.push('id')
 			}
-			
-			const params = this.params
-			params.sort_by = []
-			params.order_by = []
-			sortKeys.map(s => {
-				params.sort_by.push(s)
-				params.order_by.push(this.sortBy[s])
-			})
-			this.loadTasks(page, search, params)
-		},
-		sort(property) {
-			const order = this.sortBy[property]
+			params.value.sort_by = sortKeys
+			params.value.order_by = sortKeys.map(s => sortBy.value[s])
+		}
+
+		const taskList = createTaskList(beforeLoad)
+
+		Object.assign(taskList.params.value, {
+			filter_by: [],
+			filter_value: [],
+			filter_comparator: [],
+		})
+
+		const router = useRouter()
+
+		const taskDetailRoutes = computed(() => Object.fromEntries(
+			taskList.tasks.value.map(({id}) => ([
+				id,
+				{
+					name: 'task.detail',
+					params: { id },
+					state: { backgroundView: router.currentRoute.value.fullPath },
+				},
+			])),
+		))
+
+		// Save the current list view to local storage
+		// We use local storage and not vuex here to make it persistent across reloads.
+		const route = useRoute()
+		saveListView(route.params.listId, route.name)
+
+		function sort(property) {
+			const order = sortBy.value[property]
 			if (typeof order === 'undefined' || order === 'none') {
-				this.sortBy[property] = 'desc'
+				sortBy.value[property] = 'desc'
 			} else if (order === 'desc') {
-				this.sortBy[property] = 'asc'
+				sortBy.value[property] = 'asc'
 			} else {
-				delete this.sortBy[property]
+				delete sortBy.value[property]
 			}
-			this.initTasks(this.currentPage, this.searchTerm)
+			beforeLoad(taskList.currentPage.value, taskList.searchTerm.value)
 			// Save the order to be able to retrieve them later
-			localStorage.setItem('tableViewSortBy', JSON.stringify(this.sortBy))
-		},
-		saveTaskColumns() {
-			localStorage.setItem('tableViewColumns', JSON.stringify(this.activeColumns))
-		},
+			localStorage.setItem('tableViewSortBy', JSON.stringify(sortBy.value))
+		}
+
+		function saveTaskColumns() {
+			localStorage.setItem('tableViewColumns', JSON.stringify(toRaw(activeColumns)))
+		}
+
+		taskList.initTaskList()
+
+		return {
+			...taskList,
+			sortBy,
+			activeColumns,
+			sort,
+			saveTaskColumns,
+			taskDetailRoutes,
+		}
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
-.table-view {
-	.table {
-		background: transparent;
-		overflow-x: auto;
-		overflow-y: hidden;
+.table {
+	background: transparent;
+	overflow-x: auto;
+	overflow-y: hidden;
 
-		th {
-			white-space: nowrap;
-		}
+	th {
+		white-space: nowrap;
+	}
 
-		.user {
-			margin: 0;
-		}
+	.user {
+		margin: 0;
 	}
 }
 
-- 
2.40.1


From c70211ad32e51659c542d5a8f6333a5cd701decd Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 1 Nov 2021 18:19:59 +0100
Subject: [PATCH 03/54] feat: unify modal view

fix: List.vue
---
 src/components/home/contentAuth.vue           |  22 +-
 .../list/list-settings-dropdown.vue           |  38 +---
 src/composables/taskList.js                   |   6 +-
 src/router/index.ts                           | 100 +++++----
 src/store/modules/auth.js                     |  18 +-
 src/store/modules/config.js                   |  12 --
 src/views/Home.vue                            |   7 -
 src/views/list/ShowList.vue                   | 185 +++++++---------
 src/views/list/views/Gantt.vue                |  74 +++----
 src/views/list/views/Kanban.vue               |  11 +-
 src/views/list/views/List.vue                 |  19 +-
 src/views/list/views/Table.vue                | 201 ++++++++----------
 src/views/tasks/TaskDetailViewModal.vue       |  32 +--
 13 files changed, 314 insertions(+), 411 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 3dac25ff4..f85b7ca78 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -22,12 +22,9 @@
 
 				<router-view :route="routeWithModal"/>
 
-				<!-- TODO: is this still used? -->
-				<router-view name="popup" v-slot="{ Component }">
-					<transition name="modal">
-						<component :is="Component" />
-					</transition>
-				</router-view>
+				<transition name="modal">
+					<component v-if="currentModal" :is="currentModal" />
+				</transition>
 
 				<a
 					class="keyboard-shortcuts-button"
@@ -42,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-import {watch, computed} from 'vue'
+import {watch, computed, shallowRef, watchEffect} from 'vue'
 import {useStore} from 'vuex'
 import {useRoute, useRouter} from 'vue-router'
 import {useEventListener} from '@vueuse/core'
@@ -64,7 +61,16 @@ function useRouteWithModal() {
 		}
 	})
 
-	return { routeWithModal }
+	
+
+	const currentModal = shallowRef(null)
+	watchEffect(() => {
+		currentModal.value = historyState.value.backgroundView
+			? route.matched[0]?.components.default
+			: null
+	})
+
+	return { routeWithModal, currentModal }
 }
 
 useRouteWithModal()
diff --git a/src/components/list/list-settings-dropdown.vue b/src/components/list/list-settings-dropdown.vue
index 35fc63567..3219c01de 100644
--- a/src/components/list/list-settings-dropdown.vue
+++ b/src/components/list/list-settings-dropdown.vue
@@ -2,21 +2,22 @@
 	<dropdown>
 		<template v-if="isSavedFilter">
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.edit`, params: { listId: list.id } }"
+				:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.delete`, params: { listId: list.id } }"
+				:to="{ name: 'filter.settings.delete', params: { listId: list.id } }"
 				icon="trash-alt"
 			>
 				{{ $t('misc.delete') }}
 			</dropdown-item>
 		</template>
+
 		<template v-else-if="list.isArchived">
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.archive`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -24,32 +25,32 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.edit`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.edit', params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.background`, params: { listId: list.id } }"
 				v-if="backgroundsEnabled"
+				:to="{ name: 'list.settings.background', params: { listId: list.id } }"
 				icon="image"
 			>
 				{{ $t('menu.setBackground') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.share`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.share', params: { listId: list.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.duplicate`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.duplicate', params: { listId: list.id } }"
 				icon="paste"
 			>
 				{{ $t('menu.duplicate') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.archive`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
@@ -63,7 +64,7 @@
 				@change="sub => subscription = sub"
 			/>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.delete`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.delete', params: { listId: list.id } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
@@ -101,24 +102,7 @@ export default {
 	},
 	computed: {
 		backgroundsEnabled() {
-			return this.$store.state.config.enabledBackgroundProviders !== null && this.$store.state.config.enabledBackgroundProviders.length > 0
-		},
-		listRoutePrefix() {
-			let name = 'list'
-
-
-			if (this.$route.name !== null && this.$route.name.startsWith('list.')) {
-				// HACK: we should implement a better routing for the modals
-				const settingsRoutes = ['edit', 'delete', 'archive', 'background', 'share', 'duplicate']
-				const suffix = settingsRoutes.find((route) => this.$route.name.endsWith(`.settings.${route}`))
-				name = this.$route.name.replace(`.settings.${suffix}`,'')
-			}
-
-			if (this.isSavedFilter) {
-				name = name.replace('list.', 'filter.')
-			}
-
-			return `${name}.settings`
+			return this.$store.state.config.enabledBackgroundProviders?.length > 0
 		},
 		isSavedFilter() {
 			return getSavedFilterIdFromListId(this.list.id) > 0
diff --git a/src/composables/taskList.js b/src/composables/taskList.js
index 85d9cddf9..1855e8cd7 100644
--- a/src/composables/taskList.js
+++ b/src/composables/taskList.js
@@ -16,7 +16,7 @@ export const getDefaultParams = () => ({
 /**
  * This mixin provides a base set of methods and properties to get tasks on a list.
  */
-export function createTaskList(initTasks) {
+export function useTaskList(initTasks) {
 	const taskCollectionService = ref(new TaskCollectionService())
 	const loading = computed(() => taskCollectionService.value.loading)
 	const totalPages = computed(() => taskCollectionService.value.totalPages)
@@ -70,12 +70,14 @@ export function createTaskList(initTasks) {
 		tasks.value = await taskCollectionService.value.getAll(list, loadParams, page)
 		currentPage.value = page
 		loadedList.value = JSON.parse(JSON.stringify(currentList))
+
+		return tasks.value
 	}
 
 	async function loadTasksForPage(query) {
 		const { page, search } = query
 		initTasks(params)
-		await loadTasks(
+		return await loadTasks(
 			// The page parameter can be undefined, in the case where the user loads a new list from the side bar menu
 			typeof page === 'undefined' ? 1 : Number(page),
 			search,
diff --git a/src/router/index.ts b/src/router/index.ts
index 43340e7b0..7995ee174 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,8 +13,8 @@ import DataExportDownload from '../views/user/DataExportDownload'
 // Tasks
 import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange'
 import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth'
-import TaskDetailView from '../views/tasks/TaskDetailView'
 import ListNamespaces from '../views/namespaces/ListNamespaces'
+import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal'
 // Team Handling
 import ListTeamsComponent from '../views/teams/ListTeams'
 // Label Handling
@@ -29,6 +29,7 @@ import Kanban from '../views/list/views/Kanban'
 import List from '../views/list/views/List'
 import Gantt from '../views/list/views/Gantt'
 import Table from '../views/list/views/Table'
+
 // List Settings
 import ListSettingEdit from '../views/list/settings/edit'
 import ListSettingBackground from '../views/list/settings/background'
@@ -200,109 +201,123 @@ const router = createRouter({
 		{
 			path: '/namespaces/new',
 			name: 'namespace.create',
-			components: {
-				popup: NewNamespaceComponent,
-			},
-		},
-		{
-			path: '/namespaces/:id/list',
-			name: 'list.create',
-			components: {
-				popup: NewListComponent,
+			component: NewNamespaceComponent,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/namespaces/:id/settings/edit',
 			name: 'namespace.settings.edit',
-			components: {
-				popup: NamespaceSettingEdit,
+			component: NamespaceSettingEdit,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/namespaces/:id/settings/share',
 			name: 'namespace.settings.share',
-			components: {
-				popup: NamespaceSettingShare,
+			component: NamespaceSettingShare,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/namespaces/:id/settings/archive',
 			name: 'namespace.settings.archive',
-			components: {
-				popup: NamespaceSettingArchive,
+			component: NamespaceSettingArchive,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/namespaces/:id/settings/delete',
 			name: 'namespace.settings.delete',
-			components: {
-				popup: NamespaceSettingDelete,
+			component: NamespaceSettingDelete,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/tasks/:id',
 			name: 'task.detail',
-			component: TaskDetailView,
+			component: TaskDetailViewModal,
 		},
 		{
 			path: '/tasks/by/upcoming',
 			name: 'tasks.range',
 			component: ShowTasksInRangeComponent,
 		},
+		{
+			path: '/lists/:id/new',
+			name: 'list.create',
+			component: NewListComponent,
+			meta: {
+				showAsModal: true,
+			},
+		},
 		{
 			path: '/lists/:listId/settings/edit',
 			name: 'list.settings.edit',
-			components: {
-				popup: ListSettingEdit,
+			component: ListSettingEdit,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/background',
 			name: 'list.settings.background',
-			components: {
-				popup: ListSettingBackground,
+			component: ListSettingBackground,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/duplicate',
 			name: 'list.settings.duplicate',
-			components: {
-				popup: ListSettingDuplicate,
+			component: ListSettingDuplicate,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/share',
 			name: 'list.settings.share',
-			components: {
-				popup: ListSettingShare,
+			component: ListSettingShare,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/delete',
 			name: 'list.settings.delete',
-			components: {
-				popup: ListSettingDelete,
+			component: ListSettingDelete,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/archive',
 			name: 'list.settings.archive',
-			components: {
-				popup: ListSettingArchive,
+			component: ListSettingArchive,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/edit',
 			name: 'filter.settings.edit',
-			components: {
-				popup: FilterEdit,
+			component: FilterEdit,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/delete',
 			name: 'filter.settings.delete',
-			components: {
-				popup: FilterDelete,
+			component: FilterDelete,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
@@ -340,8 +355,9 @@ const router = createRouter({
 		{
 			path: '/teams/new',
 			name: 'teams.create',
-			components: {
-				popup: NewTeamComponent,
+			component: NewTeamComponent,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
@@ -357,8 +373,9 @@ const router = createRouter({
 		{
 			path: '/labels/new',
 			name: 'labels.create',
-			components: {
-				popup: NewLabelComponent,
+			component: NewLabelComponent,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
@@ -374,8 +391,9 @@ const router = createRouter({
 		{
 			path: '/filters/new',
 			name: 'filters.create',
-			components: {
-				popup: FilterNew,
+			component: FilterNew,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
index 420783225..9f59ac86a 100644
--- a/src/store/modules/auth.js
+++ b/src/store/modules/auth.js
@@ -1,12 +1,12 @@
 import {HTTPFactory} from '@/http-common'
-import {getCurrentLanguage, saveLanguage} from '@/i18n'
+import {i18n, getCurrentLanguage, saveLanguage} from '@/i18n'
 import {LOADING} from '../mutation-types'
 import UserModel from '@/models/user'
 import UserSettingsService from '@/services/userSettings'
 import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
 import {setLoading} from '@/store/helper'
-import {i18n} from '@/i18n'
 import {success} from '@/message'
+import {redirectToProvider} from '@/helpers/redirectToProvider'
 
 const AUTH_TYPES = {
 	'UNKNOWN': 0,
@@ -201,7 +201,19 @@ export default {
 			ctx.commit('authenticated', authenticated)
 			if (!authenticated) {
 				ctx.commit('info', null)
-				ctx.dispatch('config/redirectToProviderIfNothingElseIsEnabled', null, {root: true})
+				ctx.dispatch('redirectToProviderIfNothingElseIsEnabled')
+			}
+		},
+
+		redirectToProviderIfNothingElseIsEnabled({rootState}) {
+			const {auth} = rootState.config
+			if (
+				auth.local.enabled === false &&
+				auth.openidConnect.enabled &&
+				auth.openidConnect.providers?.length === 1 &&
+				window.location.pathname.startsWith('/login') // Kinda hacky, but prevents an endless loop.
+			) {
+				redirectToProvider(auth.openidConnect.providers[0], auth.openidConnect.redirectUrl)
 			}
 		},
 
diff --git a/src/store/modules/config.js b/src/store/modules/config.js
index 82c2b20c6..dfe1e01fe 100644
--- a/src/store/modules/config.js
+++ b/src/store/modules/config.js
@@ -1,7 +1,6 @@
 import {CONFIG} from '../mutation-types'
 import {HTTPFactory} from '@/http-common'
 import {objectToCamelCase} from '@/helpers/case'
-import {redirectToProvider} from '../../helpers/redirectToProvider'
 import {parseURL} from 'ufo'
 
 export default {
@@ -75,16 +74,5 @@ export default {
 			ctx.commit(CONFIG, info)
 			return info
 		},
-
-		redirectToProviderIfNothingElseIsEnabled(ctx) {
-			if (ctx.state.auth.local.enabled === false &&
-				ctx.state.auth.openidConnect.enabled &&
-				ctx.state.auth.openidConnect.providers &&
-				ctx.state.auth.openidConnect.providers.length === 1 &&
-				window.location.pathname.startsWith('/login') // Kinda hacky, but prevents an endless loop.
-			) {
-				redirectToProvider(ctx.state.auth.openidConnect.providers[0])
-			}
-		},
 	},
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d6a63f832..f3d2b3ecb 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -51,10 +51,6 @@
 			</div>
 		</div>
 		<ShowTasks class="mt-4" :show-all="true" v-if="hasLists" :key="showTasksKey"/>
-
-		<transition name="modal">
-			<task-detail-view-modal v-if="showTaskDetail" />
-		</transition>
 	</div>
 </template>
 
@@ -71,9 +67,6 @@ import {getHistory} from '@/modules/listHistory'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useDateTimeSalutation} from '@/composables/useDateTimeSalutation'
-import TaskDetailViewModal, { useShowModal } from '@/views/tasks/TaskDetailViewModal.vue'
-
-const showTaskDetail = useShowModal()
 
 const welcome = useDateTimeSalutation()
 
diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue
index e663759dd..382793744 100644
--- a/src/views/list/ShowList.vue
+++ b/src/views/list/ShowList.vue
@@ -9,153 +9,128 @@
 					v-shortcut="'g l'"
 					:title="$t('keyboardShortcuts.list.switchToListView')"
 					:class="{'is-active': $route.name === 'list.list'}"
-					:to="{ name: 'list.list',   params: { listId: listId } }">
+					:to="{ name: 'list.list',   params: { listId } }">
 					{{ $t('list.list.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g g'"
 					:title="$t('keyboardShortcuts.list.switchToGanttView')"
 					:class="{'is-active': $route.name === 'list.gantt'}"
-					:to="{ name: 'list.gantt',  params: { listId: listId } }">
+					:to="{ name: 'list.gantt',  params: { listId } }">
 					{{ $t('list.gantt.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g t'"
 					:title="$t('keyboardShortcuts.list.switchToTableView')"
 					:class="{'is-active': $route.name === 'list.table'}"
-					:to="{ name: 'list.table',  params: { listId: listId } }">
+					:to="{ name: 'list.table',  params: { listId } }">
 					{{ $t('list.table.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g k'"
 					:title="$t('keyboardShortcuts.list.switchToKanbanView')"
 					:class="{'is-active': $route.name === 'list.kanban'}"
-					:to="{ name: 'list.kanban', params: { listId: listId } }">
+					:to="{ name: 'list.kanban', params: { listId } }">
 					{{ $t('list.kanban.title') }}
 				</router-link>
 			</div>
 		</div>
 		<transition name="fade">
-			<message variant="warning" v-if="currentList.isArchived" class="mb-4">
+			<Message variant="warning" v-if="currentList.isArchived" class="mb-4">
 				{{ $t('list.archived') }}
-			</message>
+			</Message>
 		</transition>
 
 		<router-view/>
 	</div>
 </template>
 
-<script>
+<script setup>
+import {ref, shallowRef, computed, watchEffect} from 'vue'
+import {useRouter, useRoute} from 'vue-router'
+
 import Message from '@/components/misc/message'
-import ListModel from '../../models/list'
-import ListService from '../../services/list'
-import {CURRENT_LIST} from '../../store/mutation-types'
-import {getListView} from '../../helpers/saveListView'
-import {saveListToHistory} from '../../modules/listHistory'
 
-export default {
-	components: {Message},
-	data() {
-		return {
-			listService: new ListService(),
-			listLoaded: 0,
-		}
-	},
-	watch: {
-		// call again the method if the route changes
-		'$route.path': {
-			handler: 'loadList',
-			immediate: true,
-		},
-	},
-	computed: {
-		// Computed property to let "listId" always have a value
-		listId() {
-			return typeof this.$route.params.listId === 'undefined' ? 0 : this.$route.params.listId
-		},
-		background() {
-			return this.$store.state.background
-		},
-		currentList() {
-			return typeof this.$store.state.currentList === 'undefined' ? {
-				id: 0,
-				title: '',
-				isArchived: false,
-			} : this.$store.state.currentList
-		},
-	},
-	methods: {
-		replaceListView() {
-			const savedListView = getListView(this.$route.params.listId)
-			this.$router.replace({name: savedListView, params: {id: this.$route.params.listId}})
-			console.debug('Replaced list view with', savedListView)
-		},
+import ListModel from '@/models/list'
+import ListService from '@/services/list'
 
-		async loadList() {
-			if (this.$route.name.includes('.settings.')) {
-				return
-			}
+import {store} from '@/store'
+import {CURRENT_LIST} from '@/store/mutation-types'
 
-			const listData = {id: parseInt(this.$route.params.listId)}
+import {getListView} from '@/helpers/saveListView'
+import {getListTitle} from '@/helpers/getListTitle'
+import {saveListToHistory} from '@/modules/listHistory'
+import { useTitle } from '@/composables/useTitle'
 
-			saveListToHistory(listData)
+const route = useRoute()
+const router = useRouter()
 
-			this.setTitle(this.currentList.id ? this.getListTitle(this.currentList) : '')
+const listService = shallowRef(new ListService())
+const loadedListId = ref(0)
 
-			// This invalidates the loaded list at the kanban board which lets it reload its content when
-			// switched to it. This ensures updates done to tasks in the gantt or list views are consistently
-			// shown in all views while preventing reloads when closing a task popup.
-			// We don't do this for the table view because that does not change tasks.
-			if (
-				this.$route.name === 'list.list' ||
-				this.$route.name === 'list.gantt'
-			) {
-				this.$store.commit('kanban/setListId', 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}})
+}
+// },
 
-			// // When clicking again on a list in the menu, there would be no list view selected which means no list
-			// // at all. Users will then have to click on the list view menu again which is quite confusing.
-			// if (this.$route.name === 'list.index') {
-			// 	return this.replaceListView()
-			// }
+const currentList = computed(() => {
+	return typeof store.state.currentList === 'undefined' ? {
+		id: 0,
+		title: '',
+		isArchived: false,
+	} : store.state.currentList
+})
 
-			// Don't load the list if we either already loaded it or aren't dealing with a list at all currently and
-			// the currently loaded list has the right set.
-			if (
-				(
-					this.$route.params.listId === this.listLoaded ||
-					typeof this.$route.params.listId === 'undefined' ||
-					this.$route.params.listId === this.currentList.id ||
-					parseInt(this.$route.params.listId) === this.currentList.id
-				)
-				&& typeof this.currentList !== 'undefined' && this.currentList.maxRight !== null
-			) {
-				return
-			}
+// Computed property to let "listId" always have a value
+const listId = computed(() => typeof route.params.listId === 'undefined' ? 0 : parseInt(route.params.listId))
+// call again the method if the listId changes
+watchEffect(() => loadList(listId.value))
 
-			// Redirect the user to list view by default
-			if (
-				this.$route.name !== 'list.list' &&
-				this.$route.name !== 'list.gantt' &&
-				this.$route.name !== 'list.table' &&
-				this.$route.name !== 'list.kanban'
-			) {
-				return this.replaceListView()
-			}
+useTitle(() => currentList.value.id ? getListTitle(currentList.value) : '')
 
-			console.debug(`Loading list, $route.name = ${this.$route.name}, $route.params =`, this.$route.params, `, listLoaded = ${this.listLoaded}, currentList = `, this.currentList)
+async function loadList(listId) {
+	const listData = {id: listId}
+	saveListToHistory(listData)
 
-			// We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux.
-			const list = new ListModel(listData)
-			try {
-				const loadedList = await this.listService.get(list)
-				await this.$store.dispatch(CURRENT_LIST, loadedList)
-				this.setTitle(this.getListTitle(loadedList))
-			} finally {
-				this.listLoaded = this.$route.params.listId
-			}
-		},
-	},
+	// This invalidates the loaded list at the kanban board which lets it reload its content when
+	// switched to it. This ensures updates done to tasks in the gantt or list views are consistently
+	// shown in all views while preventing reloads when closing a task popup.
+	// We don't do this for the table view because that does not change tasks.
+	// FIXME: remove this
+	if (
+		route.name === 'list.list' ||
+		route.name === 'list.gantt'
+	) {
+		store.commit('kanban/setListId', 0)
+	}
+
+	// Don't load the list if we either already loaded it or aren't dealing with a list at all currently and
+	// the currently loaded list has the right set.
+	if (
+		(
+			listId.value === loadedListId.value ||
+			typeof listId.value === 'undefined' ||
+			listId.value === currentList.value.id
+		)
+		&& typeof currentList.value !== 'undefined' && currentList.value.maxRight !== null
+	) {
+		return
+	}
+
+	console.debug(`Loading list, $route.name = ${route.name}, $route.params =`, route.params, `, loadedListId = ${loadedListId.value}, currentList = `, currentList.value)
+
+	// We create an extra list object instead of creating it in list.value because that would trigger a ui update which would result in bad ux.
+	const list = new ListModel(listData)
+	try {
+		const loadedList = await listService.value.get(list)
+		await store.dispatch(CURRENT_LIST, loadedList)
+	} finally {
+		loadedListId.value = listId
+	}
 }
 </script>
 
diff --git a/src/views/list/views/Gantt.vue b/src/views/list/views/Gantt.vue
index 4f89fbf70..3c3ee344a 100644
--- a/src/views/list/views/Gantt.vue
+++ b/src/views/list/views/Gantt.vue
@@ -52,61 +52,43 @@
 			:show-taskswithout-dates="showTaskswithoutDates"
 		/>
 
-		<transition name="modal">
-			<task-detail-view-modal v-if="showTaskDetail" />
-		</transition>
 		</card>
 	</div>
 </template>
 
-<script>
-import GanttChart from '../../../components/tasks/gantt-component'
+<script setup>
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
 import flatPickr from 'vue-flatpickr-component'
-import Fancycheckbox from '../../../components/input/fancycheckbox'
+
+import { i18n } from '@/i18n'
+import { store } from '@/store'
+
+import GanttChart from '@/components/tasks/gantt-component'
+import Fancycheckbox from '@/components/input/fancycheckbox'
+
 import {saveListView} from '@/helpers/saveListView'
 
-import TaskDetailViewModal, { useShowModal } from '@/views/tasks/TaskDetailViewModal.vue'
+const route = useRoute()
+// Save the current list view to local storage
+// We use local storage and not vuex here to make it persistent across reloads.
+saveListView(route.params.listId, route.name)
 
-export default {
-	name: 'Gantt',
-	components: {
-		Fancycheckbox,
-		flatPickr,
-		GanttChart,
-		TaskDetailViewModal,
+const showTaskswithoutDates = ref(false)
+const dayWidth = ref(35)
+const dateFrom = ref(new Date((new Date()).setDate((new Date()).getDate() - 15)))
+const dateTo = ref(new Date((new Date()).setDate((new Date()).getDate() + 30)))
+
+
+const flatPickerConfig = computed(() => ({
+	altFormat: i18n.global.t('date.altFormatShort'),
+	altInput: true,
+	dateFormat: 'Y-m-d',
+	enableTime: false,
+	locale: {
+		firstDayOfWeek: store.state.auth.settings.weekStart,
 	},
-	setup() {
-		return {
-			showTaskDetail: useShowModal(),
-		}
-	},
-	created() {
-		// Save the current list view to local storage
-		// We use local storage and not vuex here to make it persistent across reloads.
-		saveListView(this.$route.params.listId, this.$route.name)
-	},
-	data() {
-		return {
-			showTaskswithoutDates: false,
-			dayWidth: 35,
-			dateFrom: new Date((new Date()).setDate((new Date()).getDate() - 15)),
-			dateTo: new Date((new Date()).setDate((new Date()).getDate() + 30)),
-		}
-	},
-	computed: {
-		flatPickerConfig() {
-			return {
-				altFormat: this.$t('date.altFormatShort'),
-				altInput: true,
-				dateFormat: 'Y-m-d',
-				enableTime: false,
-				locale: {
-					firstDayOfWeek: this.$store.state.auth.settings.weekStart,
-				},
-			}
-		},
-	},
-}
+}))
 </script>
 
 <style lang="scss">
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index bdb570fed..59687fb70 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -205,9 +205,8 @@
 		</div>
 
 		<transition name="modal">
-			<task-detail-view-modal v-if="showTaskDetail" />
 			<modal
-				v-else-if="showBucketDeleteModal"
+				v-if="showBucketDeleteModal"
 				@close="showBucketDeleteModal = false"
 				@submit="deleteBucket()"
 			>
@@ -236,7 +235,6 @@ import Dropdown from '@/components/misc/dropdown.vue'
 import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
 import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
 import KanbanCard from '@/components/tasks/partials/kanban-card'
-import TaskDetailViewModal, { useShowModal } from '@/views/tasks/TaskDetailViewModal.vue'
 
 const DRAG_OPTIONS = {
 	// sortable options
@@ -256,7 +254,6 @@ export default {
 		Dropdown,
 		FilterPopup,
 		draggable,
-		TaskDetailViewModal,
 	},
 	data() {
 		return {
@@ -293,12 +290,6 @@ export default {
 		}
 	},
 
-	setup() {
-		return {
-			showTaskDetail: useShowModal(),
-		}
-	},
-
 	created() {
 		// Save the current list view to local storage
 		// We use local storage and not vuex here to make it persistent across reloads.
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 299de6c7d..e2ba821b9 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -122,10 +122,6 @@
 				:current-page="currentPage"
 			/>
 		</card>
-
-		<transition name="modal">
-			<task-detail-view-modal v-if="showTaskDetail" />
-		</transition>
 	</div>
 </template>
 
@@ -133,13 +129,10 @@
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-import TaskService from '../../../services/task'
-import TaskModel from '../../../models/task'
-
 import EditTask from '../../../components/tasks/edit-task'
 import AddTask from '../../../components/tasks/add-task'
 import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
-import { createTaskList } from '@/composables/taskList'
+import { useTaskList } from '@/composables/taskList'
 import {saveListView} from '@/helpers/saveListView'
 import Rights from '../../../models/constants/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
@@ -147,7 +140,6 @@ import {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import {ALPHABETICAL_SORT} from '@/components/list/partials/filters.vue'
-import TaskDetailViewModal, { useShowModal } from '@/views/tasks/TaskDetailViewModal.vue'
 
 import draggable from 'vuedraggable'
 import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
@@ -174,7 +166,6 @@ export default {
 	name: 'List',
 	data() {
 		return {
-			taskService: new TaskService(),
 			ctaVisible: false,
 			showTaskSearch: false,
 
@@ -193,11 +184,10 @@ export default {
 		AddTask,
 		draggable,
 		Pagination,
-		TaskDetailViewModal,
 	},
 
 	setup() {
-		const taskEditTask = ref(TaskModel)
+		const taskEditTask = ref(null)
 		const isTaskEdit = ref(false)
 
 		// This function initializes the tasks page and loads the first page of tasks
@@ -206,17 +196,18 @@ export default {
 			isTaskEdit.value = false
 		}
 
-		const taskList = createTaskList(beforeLoad)
+		const taskList = useTaskList(beforeLoad)
 
 		// Save the current list view to local storage
 		// We use local storage and not vuex here to make it persistent across reloads.
 		const route = useRoute()
 		saveListView(route.params.listId, route.name)
 
+		taskList.initTaskList()
+
 		return {
 			taskEditTask,
 			isTaskEdit,
-			showTaskDetail: useShowModal(),
 			...taskList,
 		}
 	},
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index 238aa04ef..b28bb21a8 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -68,19 +68,19 @@
 					<tr>
 						<th v-if="activeColumns.id">
 							#
-							<sort :order="sortBy.id" @click="sort('id')"/>
+							<Sort :order="sortBy.id" @click="sort('id')"/>
 						</th>
 						<th v-if="activeColumns.done">
 							{{ $t('task.attributes.done') }}
-							<sort :order="sortBy.done" @click="sort('done')"/>
+							<Sort :order="sortBy.done" @click="sort('done')"/>
 						</th>
 						<th v-if="activeColumns.title">
 							{{ $t('task.attributes.title') }}
-							<sort :order="sortBy.title" @click="sort('title')"/>
+							<Sort :order="sortBy.title" @click="sort('title')"/>
 						</th>
 						<th v-if="activeColumns.priority">
 							{{ $t('task.attributes.priority') }}
-							<sort :order="sortBy.priority" @click="sort('priority')"/>
+							<Sort :order="sortBy.priority" @click="sort('priority')"/>
 						</th>
 						<th v-if="activeColumns.labels">
 							{{ $t('task.attributes.labels') }}
@@ -90,27 +90,27 @@
 						</th>
 						<th v-if="activeColumns.dueDate">
 							{{ $t('task.attributes.dueDate') }}
-							<sort :order="sortBy.due_date" @click="sort('due_date')"/>
+							<Sort :order="sortBy.due_date" @click="sort('due_date')"/>
 						</th>
 						<th v-if="activeColumns.startDate">
 							{{ $t('task.attributes.startDate') }}
-							<sort :order="sortBy.start_date" @click="sort('start_date')"/>
+							<Sort :order="sortBy.start_date" @click="sort('start_date')"/>
 						</th>
 						<th v-if="activeColumns.endDate">
 							{{ $t('task.attributes.endDate') }}
-							<sort :order="sortBy.end_date" @click="sort('end_date')"/>
+							<Sort :order="sortBy.end_date" @click="sort('end_date')"/>
 						</th>
 						<th v-if="activeColumns.percentDone">
 							{{ $t('task.attributes.percentDone') }}
-							<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
+							<Sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
 						</th>
 						<th v-if="activeColumns.created">
 							{{ $t('task.attributes.created') }}
-							<sort :order="sortBy.created" @click="sort('created')"/>
+							<Sort :order="sortBy.created" @click="sort('created')"/>
 						</th>
 						<th v-if="activeColumns.updated">
 							{{ $t('task.attributes.updated') }}
-							<sort :order="sortBy.updated" @click="sort('updated')"/>
+							<Sort :order="sortBy.updated" @click="sort('updated')"/>
 						</th>
 						<th v-if="activeColumns.createdBy">
 							{{ $t('task.attributes.createdBy') }}
@@ -173,22 +173,13 @@
 				:current-page="currentPage"
 			/>
 		</card>
-
-		<!-- This router view is used to show the task popup while keeping the table view itself -->
-		<router-view v-slot="{ Component }">
-			<transition name="modal">
-				<component :is="Component" />
-			</transition>
-		</router-view>
-
 	</div>
 </template>
 
-<script>
-import { defineComponent, ref, reactive, computed, toRaw } from 'vue'
+<script setup>
+import { ref, reactive, computed, toRaw } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
-import { createTaskList } from '@/composables/taskList'
 import Done from '@/components/misc/Done.vue'
 import User from '@/components/misc/user'
 import PriorityLabel from '@/components/tasks/partials/priorityLabel'
@@ -196,11 +187,13 @@ import Labels from '@/components/tasks/partials/labels'
 import DateTableCell from '@/components/tasks/partials/date-table-cell'
 import Fancycheckbox from '@/components/input/fancycheckbox'
 import Sort from '@/components/tasks/partials/sort'
-import {saveListView} from '@/helpers/saveListView'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup'
 
+import { useTaskList } from '@/composables/taskList'
+import {saveListView} from '@/helpers/saveListView'
+
 const ACTIVE_COLUMNS_DEFAULT = {
 	id: true,
 	done: true,
@@ -233,102 +226,86 @@ function useSavedView(activeColumns, sortBy) {
 	}
 }
 
-export default defineComponent({
-	name: 'Table',
-	components: {
-		Popup,
-		Done,
-		FilterPopup,
-		Sort,
-		Fancycheckbox,
-		DateTableCell,
-		Labels,
-		PriorityLabel,
-		User,
-		Pagination,
-	},
-	setup() {
-		const activeColumns = reactive({ ...ACTIVE_COLUMNS_DEFAULT })
-		const sortBy = ref({ ...SORT_BY_DEFAULT })
+const activeColumns = reactive({ ...ACTIVE_COLUMNS_DEFAULT })
+const sortBy = ref({ ...SORT_BY_DEFAULT })
 
-		useSavedView(activeColumns, sortBy)
+useSavedView(activeColumns, sortBy)
 
-		function beforeLoad(params) {
-			// This makes sure an id sort order is always sorted last.
-			// When tasks would be sorted first by id and then by whatever else was specified, the id sort takes
-			// precedence over everything else, making any other sort columns pretty useless.
-			let hasIdFilter = false
-			const sortKeys = Object.keys(sortBy.value)
-			for (const s of sortKeys) {
-				if (s === 'id') {
-					sortKeys.splice(s, 1)
-					hasIdFilter = true
-					break
-				}
-			}
-			if (hasIdFilter) {
-				sortKeys.push('id')
-			}
-			params.value.sort_by = sortKeys
-			params.value.order_by = sortKeys.map(s => sortBy.value[s])
+function beforeLoad(params) {
+	// This makes sure an id sort order is always sorted last.
+	// When tasks would be sorted first by id and then by whatever else was specified, the id sort takes
+	// precedence over everything else, making any other sort columns pretty useless.
+	let hasIdFilter = false
+	const sortKeys = Object.keys(sortBy.value)
+	for (const s of sortKeys) {
+		if (s === 'id') {
+			sortKeys.splice(s, 1)
+			hasIdFilter = true
+			break
 		}
+	}
+	if (hasIdFilter) {
+		sortKeys.push('id')
+	}
+	params.value.sort_by = sortKeys
+	params.value.order_by = sortKeys.map(s => sortBy.value[s])
+}
 
-		const taskList = createTaskList(beforeLoad)
+const {
+	tasks,
+	loading,
+	showTaskFilter,
+	params,
+	loadTasks,
+	totalPages,
+	currentPage,
+	searchTerm,
+	initTaskList,
+} = useTaskList(beforeLoad)
 
-		Object.assign(taskList.params.value, {
-			filter_by: [],
-			filter_value: [],
-			filter_comparator: [],
-		})
-
-		const router = useRouter()
-
-		const taskDetailRoutes = computed(() => Object.fromEntries(
-			taskList.tasks.value.map(({id}) => ([
-				id,
-				{
-					name: 'task.detail',
-					params: { id },
-					state: { backgroundView: router.currentRoute.value.fullPath },
-				},
-			])),
-		))
-
-		// Save the current list view to local storage
-		// We use local storage and not vuex here to make it persistent across reloads.
-		const route = useRoute()
-		saveListView(route.params.listId, route.name)
-
-		function sort(property) {
-			const order = sortBy.value[property]
-			if (typeof order === 'undefined' || order === 'none') {
-				sortBy.value[property] = 'desc'
-			} else if (order === 'desc') {
-				sortBy.value[property] = 'asc'
-			} else {
-				delete sortBy.value[property]
-			}
-			beforeLoad(taskList.currentPage.value, taskList.searchTerm.value)
-			// Save the order to be able to retrieve them later
-			localStorage.setItem('tableViewSortBy', JSON.stringify(sortBy.value))
-		}
-
-		function saveTaskColumns() {
-			localStorage.setItem('tableViewColumns', JSON.stringify(toRaw(activeColumns)))
-		}
-
-		taskList.initTaskList()
-
-		return {
-			...taskList,
-			sortBy,
-			activeColumns,
-			sort,
-			saveTaskColumns,
-			taskDetailRoutes,
-		}
-	},
+Object.assign(params.value, {
+	filter_by: [],
+	filter_value: [],
+	filter_comparator: [],
 })
+
+const router = useRouter()
+
+const taskDetailRoutes = computed(() => Object.fromEntries(
+	tasks.value.map(({id}) => ([
+		id,
+		{
+			name: 'task.detail',
+			params: { id },
+			state: { backgroundView: router.currentRoute.value.fullPath },
+		},
+	])),
+))
+
+// Save the current list view to local storage
+// We use local storage and not vuex here to make it persistent across reloads.
+const route = useRoute()
+saveListView(route.params.listId, route.name)
+
+function sort(property) {
+	const order = sortBy.value[property]
+	if (typeof order === 'undefined' || order === 'none') {
+		sortBy.value[property] = 'desc'
+	} else if (order === 'desc') {
+		sortBy.value[property] = 'asc'
+	} else {
+		delete sortBy.value[property]
+	}
+	beforeLoad(currentPage.value, searchTerm.value)
+	// Save the order to be able to retrieve them later
+	localStorage.setItem('tableViewSortBy', JSON.stringify(sortBy.value))
+}
+
+function saveTaskColumns() {
+	localStorage.setItem('tableViewColumns', JSON.stringify(toRaw(activeColumns)))
+}
+
+initTaskList()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index 5f450f437..a240a2b09 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@@ -4,35 +4,19 @@
 		variant="scrolling"
 		class="task-detail-view-modal"
 	>
-				<a @click="close()" class="close">
-					<icon icon="times"/>
-				</a>
-				<task-detail-view/>
+		<a @click="close()" class="close">
+			<icon icon="times"/>
+		</a>
+		<task-detail-view/>
 	</modal>
 </template>
 
-<script>
+<script setup>
 import TaskDetailView from './TaskDetailView'
-import {computed} from 'vue'
-import {useRoute} from 'vue-router'
+import router from '@/router'
 
-export function useShowModal() {
-	const route = useRoute()
-	const historyState = computed(() => route.fullPath && window.history.state)
-	const show = computed(() => historyState.value.backgroundView)
-	return show
-}
-
-export default {
-	name: 'TaskDetailViewModal',
-	components: {
-		TaskDetailView,
-	},
-	methods: {
-		close() {
-			this.$router.back()
-		},
-	},
+function close() {
+	router.back()
 }
 </script>
 
-- 
2.40.1


From 16b0d0360159aed24cae41fabc4a88a37e9d9711 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 8 Nov 2021 15:46:39 +0100
Subject: [PATCH 04/54] fix: readd modal transitions

---
 src/components/home/contentAuth.vue            |  2 ++
 src/components/modal/modal.vue                 | 15 +--------------
 src/components/sharing/linkSharing.vue         |  2 ++
 src/components/sharing/userTeam.vue            |  4 ++++
 src/components/tasks/partials/attachments.vue  |  2 ++
 src/components/tasks/partials/comments.vue     |  2 ++
 src/components/tasks/partials/relatedTasks.vue |  2 ++
 src/styles/common-imports.scss                 |  2 ++
 src/styles/mixins.scss                         | 12 ++++++++++++
 src/views/list/views/Kanban.vue                |  2 ++
 src/views/tasks/TaskDetailView.vue             |  2 ++
 src/views/teams/EditTeam.vue                   |  2 ++
 12 files changed, 35 insertions(+), 14 deletions(-)
 create mode 100644 src/styles/mixins.scss

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index f85b7ca78..bc36bc7ff 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -248,4 +248,6 @@ store.dispatch('labels/loadAllLabels')
 		display: none;
 	}
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index d218b8017..b7bb4083f 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,4 +1,5 @@
 <template>
+	<!-- FIXME: transition should not be included in the modal -->
 	<transition name="modal">
 		<section
 			v-if="enabled"
@@ -196,18 +197,4 @@ export default {
 		}
 	}
 }
-
-
-
-/* Transitions */
-
-.modal-enter,
-.modal-leave-active {
-  opacity: 0;
-}
-
-.modal-enter .modal-container,
-.modal-leave-active .modal-container {
-  transform: scale(0.9);
-}
 </style>
\ No newline at end of file
diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue
index d07577ded..99da29b98 100644
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@@ -264,4 +264,6 @@ export default {
 .sharables-list:not(.card-content) {
   overflow-y: auto
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index 007cfaa68..7b7debddc 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -365,3 +365,7 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+@include modal-transition();
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index a01a62014..db469869a 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -382,4 +382,6 @@ export default {
     transform: translate3d(0, -4px, 0);
   }
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index d5db45c33..6565960cc 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -339,4 +339,6 @@ export default {
 .media-content {
 	width: calc(100% - 48px - 2rem);
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 0b2be060b..c22bfc43a 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -364,4 +364,6 @@ export default {
 :deep(.multiselect .search-results button) {
 	padding: 0.5rem;
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/styles/common-imports.scss b/src/styles/common-imports.scss
index 5ca35fc42..a9e163e3a 100644
--- a/src/styles/common-imports.scss
+++ b/src/styles/common-imports.scss
@@ -16,6 +16,8 @@
 // since $tablet is defined by bulma we can just define it after importing the utilities
 $mobile: math.div($tablet, 2);
 
+@import "mixins";
+
 $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
 $vikunja-font: 'Quicksand', sans-serif;
 
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
new file mode 100644
index 000000000..687355e73
--- /dev/null
+++ b/src/styles/mixins.scss
@@ -0,0 +1,12 @@
+/* Transitions */
+@mixin modal-transition() {
+	.modal-enter,
+	.modal-leave-active {
+		opacity: 0;
+	}
+
+	.modal-enter .modal-container,
+	.modal-leave-active .modal-container {
+		transform: scale(0.9);
+	}
+}
\ No newline at end of file
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 59687fb70..587cb985d 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -740,4 +740,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 .move-card-leave-active {
 	display: none;
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 6336a1a7c..07443d9ec 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -932,4 +932,6 @@ $flash-background-duration: 750ms;
     background: transparent;
   }
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 059530e8e..31c690f90 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -308,4 +308,6 @@ export default {
     padding: 0;
   }
 }
+
+@include modal-transition();
 </style>
\ No newline at end of file
-- 
2.40.1


From 7eed0628d0bd9846950ff025dc647bd7e6dc6523 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 14 Nov 2021 21:33:53 +0100
Subject: [PATCH 05/54] feat: mount list views as route-views

---
 src/router/index.ts                           | 66 +++++++++++--------
 .../list/{views/Gantt.vue => ListGantt.vue}   | 15 ++++-
 .../list/{views/Kanban.vue => ListKanban.vue} | 31 +++++----
 .../list/{views/List.vue => ListList.vue}     | 28 +++++---
 .../list/{views/Table.vue => ListTable.vue}   | 20 ++++--
 .../list/{ShowList.vue => ListWrapper.vue}    | 16 +----
 6 files changed, 104 insertions(+), 72 deletions(-)
 rename src/views/list/{views/Gantt.vue => ListGantt.vue} (94%)
 rename src/views/list/{views/Kanban.vue => ListKanban.vue} (97%)
 rename src/views/list/{views/List.vue => ListList.vue} (93%)
 rename src/views/list/{views/Table.vue => ListTable.vue} (96%)
 rename src/views/list/{ShowList.vue => ListWrapper.vue} (91%)

diff --git a/src/router/index.ts b/src/router/index.ts
index 7995ee174..fd31d79ba 100644
--- a/src/router/index.ts
+++ b/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 Kanban from '../views/list/views/Kanban'
-import List from '../views/list/views/List'
-import Gantt from '../views/list/views/Gantt'
-import Table from '../views/list/views/Table'
+import ListList from '../views/list/ListList'
+import ListGantt from '../views/list/ListGantt'
+import ListTable from '../views/list/ListTable'
+import ListKanban from '../views/list/ListKanban'
 
 // List Settings
 import ListSettingEdit from '../views/list/settings/edit'
@@ -323,29 +325,37 @@ const router = createRouter({
 		{
 			path: '/lists/:listId',
 			name: 'list.index',
-			component: ShowListComponent,
-			children: [
-				{
-					path: '/lists/:listId/list',
-					name: 'list.list',
-					component: List,
-				},
-				{
-					path: '/lists/:listId/gantt',
-					name: 'list.gantt',
-					component: Gantt,
-				},
-				{
-					path: '/lists/:listId/table',
-					name: 'list.table',
-					component: Table,
-				},
-				{
-					path: '/lists/:listId/kanban',
-					name: 'list.kanban',
-					component: Kanban,
-				},
-			],
+			beforeEnter(to) {
+				// 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: ListList,
+		},
+		{
+			path: '/lists/:listId/gantt',
+			name: 'list.gantt',
+			component: ListGantt,
+		},
+		{
+			path: '/lists/:listId/table',
+			name: 'list.table',
+			component: ListTable,
+		},
+		{
+			path: '/lists/:listId/kanban',
+			name: 'list.kanban',
+			component: ListKanban,
 		},
 		{
 			path: '/teams',
diff --git a/src/views/list/views/Gantt.vue b/src/views/list/ListGantt.vue
similarity index 94%
rename from src/views/list/views/Gantt.vue
rename to src/views/list/ListGantt.vue
index 3c3ee344a..224f0539b 100644
--- a/src/views/list/views/Gantt.vue
+++ b/src/views/list/ListGantt.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="gantt-chart-container">
-		<card :padding="false" class="has-overflow">
+	<ListWrapper>
+		<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"
@@ -53,7 +59,9 @@
 		/>
 
 		</card>
-	</div>
+		</div>
+		</template>
+	</ListWrapper>
 </template>
 
 <script setup>
@@ -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'
 
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/ListKanban.vue
similarity index 97%
rename from src/views/list/views/Kanban.vue
rename to src/views/list/ListKanban.vue
index 587cb985d..5def5b15e 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/ListKanban.vue
@@ -1,17 +1,22 @@
 <template>
-	<div class="kanban-view">
-		<div class="filter-container" v-if="isSavedFilter">
+	<ListWrapper>
+		<template #header>
+			<div class="filter-container" v-if="isSavedFilter">
 			<div class="items">
 				<filter-popup
 					v-model="params"
 					@update:modelValue="loadBuckets"
 				/>
 			</div>
-		</div>
-		<div
-			:class="{ 'is-loading': loading && !oneTaskUpdating}"
-			class="kanban kanban-bucket-container loader-container"
-		>
+			</div>
+		</template>
+
+		<template #default>
+			<div class="kanban-view">
+			<div
+				:class="{ 'is-loading': loading && !oneTaskUpdating}"
+				class="kanban kanban-bucket-container loader-container"
+			>
 			<draggable
 				v-bind="dragOptions"
 				:modelValue="buckets"
@@ -218,22 +223,25 @@
 				</template>
 			</modal>
 		</transition>
-	</div>
+		</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,
diff --git a/src/views/list/views/List.vue b/src/views/list/ListList.vue
similarity index 93%
rename from src/views/list/views/List.vue
rename to src/views/list/ListList.vue
index e2ba821b9..d1a84710f 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/ListList.vue
@@ -1,8 +1,6 @@
 <template>
-	<div
-		:class="{ 'is-loading': loading }"
-		class="loader-container is-max-width-desktop list-view"
-	>
+	<ListWrapper>
+		<template #header>
 		<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"
@@ -122,19 +126,22 @@
 				:current-page="currentPage"
 			/>
 		</card>
-	</div>
+		</div>
+		</template>
+	</ListWrapper>
 </template>
 
 <script>
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-import EditTask from '../../../components/tasks/edit-task'
-import AddTask from '../../../components/tasks/add-task'
-import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
+import ListWrapper from './ListWrapper'
+import EditTask from '@/components/tasks/edit-task'
+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,
diff --git a/src/views/list/views/Table.vue b/src/views/list/ListTable.vue
similarity index 96%
rename from src/views/list/views/Table.vue
rename to src/views/list/ListTable.vue
index b28bb21a8..fab090668 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/ListTable.vue
@@ -1,6 +1,7 @@
 <template>
-	<div :class="{'is-loading': loading}" class="table-view loader-container">
-		<div class="filter-container">
+	<ListWrapper>
+		<template #header>
+			<div class="filter-container">
 			<div class="items">
 				<popup>
 					<template #trigger="{toggle}">
@@ -59,9 +60,12 @@
 					@update:modelValue="loadTasks()"
 				/>
 			</div>
-		</div>
+			</div>
+		</template>
 
-		<card :padding="false" :has-content="false">
+		<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">
 					<thead>
@@ -172,14 +176,17 @@
 				:total-pages="totalPages"
 				:current-page="currentPage"
 			/>
-		</card>
-	</div>
+			</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,
diff --git a/src/views/list/ShowList.vue b/src/views/list/ListWrapper.vue
similarity index 91%
rename from src/views/list/ShowList.vue
rename to src/views/list/ListWrapper.vue
index 382793744..04b82d6c2 100644
--- a/src/views/list/ShowList.vue
+++ b/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,
-- 
2.40.1


From 29a93358446dbf293f3c08e2f2857bec4e5fc9d7 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 14 Nov 2021 21:34:34 +0100
Subject: [PATCH 06/54] feat: save current list view just once

---
 src/views/list/ListGantt.vue   | 8 --------
 src/views/list/ListKanban.vue  | 6 ------
 src/views/list/ListList.vue    | 7 -------
 src/views/list/ListTable.vue   | 8 +-------
 src/views/list/ListWrapper.vue | 5 +++++
 5 files changed, 6 insertions(+), 28 deletions(-)

diff --git a/src/views/list/ListGantt.vue b/src/views/list/ListGantt.vue
index 224f0539b..b01855b37 100644
--- a/src/views/list/ListGantt.vue
+++ b/src/views/list/ListGantt.vue
@@ -66,7 +66,6 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { useRoute } from 'vue-router'
 import flatPickr from 'vue-flatpickr-component'
 
 import { i18n } from '@/i18n'
@@ -76,13 +75,6 @@ import ListWrapper from './ListWrapper'
 import GanttChart from '@/components/tasks/gantt-component'
 import Fancycheckbox from '@/components/input/fancycheckbox'
 
-import {saveListView} from '@/helpers/saveListView'
-
-const route = useRoute()
-// Save the current list view to local storage
-// We use local storage and not vuex here to make it persistent across reloads.
-saveListView(route.params.listId, route.name)
-
 const showTaskswithoutDates = ref(false)
 const dayWidth = ref(35)
 const dateFrom = ref(new Date((new Date()).setDate((new Date()).getDate() - 15)))
diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue
index 5def5b15e..1836db35e 100644
--- a/src/views/list/ListKanban.vue
+++ b/src/views/list/ListKanban.vue
@@ -234,7 +234,6 @@ import cloneDeep from 'lodash.clonedeep'
 
 import BucketModel from '../../models/bucket'
 import {mapState} from 'vuex'
-import {saveListView} from '@/helpers/saveListView'
 import Rights from '../../models/constants/rights.json'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import ListWrapper from './ListWrapper'
@@ -299,11 +298,6 @@ export default {
 		}
 	},
 
-	created() {
-		// Save the current list view to local storage
-		// We use local storage and not vuex here to make it persistent across reloads.
-		saveListView(this.$route.params.listId, this.$route.name)
-	},
 	watch: {
 		loadBucketParameter: {
 			handler: 'loadBuckets',
diff --git a/src/views/list/ListList.vue b/src/views/list/ListList.vue
index d1a84710f..063caf577 100644
--- a/src/views/list/ListList.vue
+++ b/src/views/list/ListList.vue
@@ -133,14 +133,12 @@
 
 <script>
 import { ref } from 'vue'
-import { useRoute } from 'vue-router'
 
 import ListWrapper from './ListWrapper'
 import EditTask from '@/components/tasks/edit-task'
 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 FilterPopup from '@/components/list/partials/filter-popup.vue'
 import {HAS_TASKS} from '@/store/mutation-types'
@@ -206,11 +204,6 @@ export default {
 
 		const taskList = useTaskList(beforeLoad)
 
-		// Save the current list view to local storage
-		// We use local storage and not vuex here to make it persistent across reloads.
-		const route = useRoute()
-		saveListView(route.params.listId, route.name)
-
 		taskList.initTaskList()
 
 		return {
diff --git a/src/views/list/ListTable.vue b/src/views/list/ListTable.vue
index fab090668..70cc7d910 100644
--- a/src/views/list/ListTable.vue
+++ b/src/views/list/ListTable.vue
@@ -184,7 +184,7 @@
 
 <script setup>
 import { ref, reactive, computed, toRaw } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
 
 import ListWrapper from './ListWrapper'
 import Done from '@/components/misc/Done.vue'
@@ -199,7 +199,6 @@ import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup'
 
 import { useTaskList } from '@/composables/taskList'
-import {saveListView} from '@/helpers/saveListView'
 
 const ACTIVE_COLUMNS_DEFAULT = {
 	id: true,
@@ -288,11 +287,6 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 	])),
 ))
 
-// Save the current list view to local storage
-// We use local storage and not vuex here to make it persistent across reloads.
-const route = useRoute()
-saveListView(route.params.listId, route.name)
-
 function sort(property) {
 	const order = sortBy.value[property]
 	if (typeof order === 'undefined' || order === 'none') {
diff --git a/src/views/list/ListWrapper.vue b/src/views/list/ListWrapper.vue
index 04b82d6c2..131761907 100644
--- a/src/views/list/ListWrapper.vue
+++ b/src/views/list/ListWrapper.vue
@@ -59,11 +59,16 @@ import {store} from '@/store'
 import {CURRENT_LIST} from '@/store/mutation-types'
 
 import {getListTitle} from '@/helpers/getListTitle'
+import {saveListView} from '@/helpers/saveListView'
 import {saveListToHistory} from '@/modules/listHistory'
 import { useTitle } from '@/composables/useTitle'
 
 const route = useRoute()
 
+// Save the current list view to local storage
+// We use local storage and not vuex here to make it persistent across reloads.
+saveListView(route.params.listId, route.name)
+
 const listService = shallowRef(new ListService())
 const loadedListId = ref(0)
 
-- 
2.40.1


From 5937f01cc57d74f9bc69d58c05406537975189f5 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 17 Nov 2021 18:04:53 +0100
Subject: [PATCH 07/54] fix: list loading

---
 cypress/integration/list/list.spec.js                  |  2 +-
 .../namespace/namespace-settings-dropdown.vue          |  2 +-
 src/router/index.ts                                    |  2 +-
 src/views/Home.vue                                     |  2 +-
 src/views/list/ListWrapper.vue                         | 10 +++++-----
 src/views/list/NewList.vue                             |  2 +-
 src/views/namespaces/ListNamespaces.vue                |  4 ++--
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js
index 43939197b..45773302d 100644
--- a/cypress/integration/list/list.spec.js
+++ b/cypress/integration/list/list.spec.js
@@ -29,7 +29,7 @@ describe('Lists', () => {
 			.contains('New list')
 			.click()
 		cy.url()
-			.should('contain', '/namespaces/1/list')
+			.should('contain', '/lists/new/1')
 		cy.get('.card-header-title')
 			.contains('Create a new list')
 		cy.get('input.input')
diff --git a/src/components/namespace/namespace-settings-dropdown.vue b/src/components/namespace/namespace-settings-dropdown.vue
index c27525789..0ce99c8c9 100644
--- a/src/components/namespace/namespace-settings-dropdown.vue
+++ b/src/components/namespace/namespace-settings-dropdown.vue
@@ -22,7 +22,7 @@
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.create', params: { id: namespace.id } }"
+				:to="{ name: 'list.create', params: { namespaceId: namespace.id } }"
 				icon="plus"
 			>
 				{{ $t('menu.newList') }}
diff --git a/src/router/index.ts b/src/router/index.ts
index fd31d79ba..0557c9a84 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -251,7 +251,7 @@ const router = createRouter({
 			component: ShowTasksInRangeComponent,
 		},
 		{
-			path: '/lists/:id/new',
+			path: '/lists/new/:namespaceId/',
 			name: 'list.create',
 			component: NewListComponent,
 			meta: {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f3d2b3ecb..14c160d45 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -23,7 +23,7 @@
 			<template v-if="defaultNamespaceId > 0">
 				<p class="mt-4">{{ $t('home.list.newText') }}</p>
 				<x-button
-					:to="{ name: 'list.create', params: { id: defaultNamespaceId } }"
+					:to="{ name: 'list.create', params: { namespaceId: defaultNamespaceId } }"
 					:shadow="false"
 					class="ml-2"
 				>
diff --git a/src/views/list/ListWrapper.vue b/src/views/list/ListWrapper.vue
index 131761907..96283b385 100644
--- a/src/views/list/ListWrapper.vue
+++ b/src/views/list/ListWrapper.vue
@@ -87,8 +87,8 @@ watchEffect(() => loadList(listId.value))
 
 useTitle(() => currentList.value.id ? getListTitle(currentList.value) : '')
 
-async function loadList(listId) {
-	const listData = {id: listId}
+async function loadList(listIdToLoad) {
+	const listData = {id: listIdToLoad}
 	saveListToHistory(listData)
 
 	// This invalidates the loaded list at the kanban board which lets it reload its content when
@@ -107,9 +107,9 @@ async function loadList(listId) {
 	// the currently loaded list has the right set.
 	if (
 		(
-			listId.value === loadedListId.value ||
-			typeof listId.value === 'undefined' ||
-			listId.value === currentList.value.id
+			listIdToLoad === loadedListId.value ||
+			typeof listIdToLoad === 'undefined' ||
+			listIdToLoad === currentList.value.id
 		)
 		&& typeof currentList.value !== 'undefined' && currentList.value.maxRight !== null
 	) {
diff --git a/src/views/list/NewList.vue b/src/views/list/NewList.vue
index fb48e42bc..0317a88e0 100644
--- a/src/views/list/NewList.vue
+++ b/src/views/list/NewList.vue
@@ -61,7 +61,7 @@ export default {
 			}
 			this.showError = false
 
-			this.list.namespaceId = parseInt(this.$route.params.id)
+			this.list.namespaceId = parseInt(this.$route.params.namespaceId)
 			const list = await this.$store.dispatch('lists/createList', this.list)
 			this.$message.success({message: this.$t('list.create.createdSuccess') })
 			this.$router.push({
diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue
index c31ee9cc3..ee8c6cb85 100644
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@@ -20,7 +20,7 @@
 
 		<div :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
 			<x-button
-				:to="{name: 'list.create', params: {id:  n.id}}"
+				:to="{name: 'list.create', params: {namespaceId:  n.id}}"
 				class="is-pulled-right"
 				variant="secondary"
 				v-if="n.id > 0 && n.lists.length > 0"
@@ -47,7 +47,7 @@
 
 			<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="n.lists.length === 0">
 				{{ $t('namespace.noLists') }}
-				<router-link :to="{name: 'list.create', params: {id:  n.id}}">
+				<router-link :to="{name: 'list.create', params: {namespaceId:  n.id}}">
 					{{ $t('namespace.createList') }}
 				</router-link>
 			</p>
-- 
2.40.1


From e78d47fdcf93052fdcf5d41abbe2bd63ca51e086 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 17 Nov 2021 18:11:19 +0100
Subject: [PATCH 08/54] fix: list specs

---
 cypress.json                                  |   6 +-
 cypress/integration/list/list-history.spec.js |  33 ++
 .../integration/list/list-view-gantt.spec.js  |  73 +++
 .../integration/list/list-view-kanban.spec.js | 196 ++++++++
 .../integration/list/list-view-list.spec.js   |  97 ++++
 .../integration/list/list-view-table.spec.js  |  52 ++
 cypress/integration/list/list.spec.js         | 445 +-----------------
 cypress/integration/list/prepareLists.js      |  16 +
 src/styles/theme/background.scss              |   2 +-
 src/views/list/ListGantt.vue                  |   2 +-
 src/views/list/ListKanban.vue                 |   2 +-
 src/views/list/ListList.vue                   |   2 +-
 src/views/list/ListTable.vue                  |   4 +-
 13 files changed, 481 insertions(+), 449 deletions(-)
 create mode 100644 cypress/integration/list/list-history.spec.js
 create mode 100644 cypress/integration/list/list-view-gantt.spec.js
 create mode 100644 cypress/integration/list/list-view-kanban.spec.js
 create mode 100644 cypress/integration/list/list-view-list.spec.js
 create mode 100644 cypress/integration/list/list-view-table.spec.js
 create mode 100644 cypress/integration/list/prepareLists.js

diff --git a/cypress.json b/cypress.json
index 27f12495c..fbdc9fcb5 100644
--- a/cypress.json
+++ b/cypress.json
@@ -7,5 +7,9 @@
   "video": false,
   "retries": {
     "runMode": 2
-  }
+  },
+  "testFiles": [
+    "list/list.spec.js",
+    "**/*.spec.js"
+  ]
 }
diff --git a/cypress/integration/list/list-history.spec.js b/cypress/integration/list/list-history.spec.js
new file mode 100644
index 000000000..391668421
--- /dev/null
+++ b/cypress/integration/list/list-history.spec.js
@@ -0,0 +1,33 @@
+import {ListFactory} from '../../factories/list'
+
+import '../../support/authenticateUser'
+
+describe('List History', () => {
+	it('should show a list history on the home page', () => {
+		const lists = ListFactory.create(6)
+
+		cy.visit('/')
+		cy.get('h3')
+			.contains('Last viewed')
+			.should('not.exist')
+
+		cy.visit(`/lists/${lists[0].id}`)
+		cy.visit(`/lists/${lists[1].id}`)
+		cy.visit(`/lists/${lists[2].id}`)
+		cy.visit(`/lists/${lists[3].id}`)
+		cy.visit(`/lists/${lists[4].id}`)
+		cy.visit(`/lists/${lists[5].id}`)
+
+		cy.visit('/')
+		cy.get('h3')
+			.contains('Last viewed')
+			.should('exist')
+		cy.get('.list-cards-wrapper-2-rows')
+			.should('not.contain', lists[0].title)
+			.should('contain', lists[1].title)
+			.should('contain', lists[2].title)
+			.should('contain', lists[3].title)
+			.should('contain', lists[4].title)
+			.should('contain', lists[5].title)
+	})
+})
\ No newline at end of file
diff --git a/cypress/integration/list/list-view-gantt.spec.js b/cypress/integration/list/list-view-gantt.spec.js
new file mode 100644
index 000000000..ddfc5de4f
--- /dev/null
+++ b/cypress/integration/list/list-view-gantt.spec.js
@@ -0,0 +1,73 @@
+import {formatISO, format} from 'date-fns'
+import {TaskFactory} from '../../factories/task'
+
+import '../../support/authenticateUser'
+
+describe('List View Gantt', () => {
+	it('Hides tasks with no dates', () => {
+		const tasks = TaskFactory.create(1)
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .tasks')
+			.should('not.contain', tasks[0].title)
+	})
+
+	it('Shows tasks from the current and next month', () => {
+		const now = new Date()
+		const nextMonth = now
+		nextMonth.setDate(1)
+		nextMonth.setMonth(now.getMonth() + 1)
+
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .months')
+			.should('contain', format(now, 'MMMM'))
+			.should('contain', format(nextMonth, 'MMMM'))
+	})
+
+	it('Shows tasks with dates', () => {
+		const now = new Date()
+		const tasks = TaskFactory.create(1, {
+			start_date: formatISO(now),
+			end_date: formatISO(now.setDate(now.getDate() + 4))
+		})
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .tasks')
+			.should('not.be.empty')
+		cy.get('.gantt-chart .tasks')
+			.should('contain', tasks[0].title)
+	})
+
+	it('Shows tasks with no dates after enabling them', () => {
+		TaskFactory.create(1, {
+			start_date: null,
+			end_date: null,
+		})
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-options .fancycheckbox')
+			.contains('Show tasks which don\'t have dates set')
+			.click()
+
+		cy.get('.gantt-chart .tasks')
+			.should('not.be.empty')
+		cy.get('.gantt-chart .tasks .task.nodate')
+			.should('exist')
+	})
+
+	it('Drags a task around', () => {
+		const now = new Date()
+		TaskFactory.create(1, {
+			start_date: formatISO(now),
+			end_date: formatISO(now.setDate(now.getDate() + 4))
+		})
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .tasks .task')
+			.first()
+			.trigger('mousedown', {which: 1})
+			.trigger('mousemove', {clientX: 500, clientY: 0})
+			.trigger('mouseup', {force: true})
+	})
+})
\ No newline at end of file
diff --git a/cypress/integration/list/list-view-kanban.spec.js b/cypress/integration/list/list-view-kanban.spec.js
new file mode 100644
index 000000000..01219d01b
--- /dev/null
+++ b/cypress/integration/list/list-view-kanban.spec.js
@@ -0,0 +1,196 @@
+import {BucketFactory} from '../../factories/bucket'
+import {ListFactory} from '../../factories/list'
+import {TaskFactory} from '../../factories/task'
+import {prepareLists} from './prepareLists'
+
+import '../../support/authenticateUser'
+
+describe('List View Kanban', () => {
+	let buckets
+	prepareLists()
+
+	beforeEach(() => {
+		buckets = BucketFactory.create(2)
+	})
+
+	it('Shows all buckets with their tasks', () => {
+		const data = TaskFactory.create(10, {
+			list_id: 1,
+			bucket_id: 1,
+		})
+		cy.visit('/lists/1/kanban')
+
+		cy.get('.kanban .bucket .title')
+			.contains(buckets[0].title)
+			.should('exist')
+		cy.get('.kanban .bucket .title')
+			.contains(buckets[1].title)
+			.should('exist')
+		cy.get('.kanban .bucket')
+			.first()
+			.should('contain', data[0].title)
+	})
+
+	it('Can add a new task to a bucket', () => {
+		TaskFactory.create(2, {
+			list_id: 1,
+			bucket_id: 1,
+		})
+		cy.visit('/lists/1/kanban')
+
+		cy.get('.kanban .bucket')
+			.contains(buckets[0].title)
+			.get('.bucket-footer .button')
+			.contains('Add another task')
+			.click()
+		cy.get('.kanban .bucket')
+			.contains(buckets[0].title)
+			.get('.bucket-footer .field .control input.input')
+			.type('New Task{enter}')
+
+		cy.get('.kanban .bucket')
+			.first()
+			.should('contain', 'New Task')
+	})
+
+	it('Can create a new bucket', () => {
+		cy.visit('/lists/1/kanban')
+
+		cy.get('.kanban .bucket.new-bucket .button')
+			.click()
+		cy.get('.kanban .bucket.new-bucket input.input')
+			.type('New Bucket{enter}')
+
+		cy.wait(1000) // Wait for the request to finish
+		cy.get('.kanban .bucket .title')
+			.contains('New Bucket')
+			.should('exist')
+	})
+
+	it('Can set a bucket limit', () => {
+		cy.visit('/lists/1/kanban')
+
+		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+			.first()
+			.click()
+		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
+			.contains('Limit: Not Set')
+			.click()
+		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
+			.first()
+			.type(3)
+		cy.get('[data-cy="setBucketLimit"]')
+			.first()
+			.click()
+
+		cy.get('.kanban .bucket .bucket-header span.limit')
+			.contains('0/3')
+			.should('exist')
+	})
+
+	it('Can rename a bucket', () => {
+		cy.visit('/lists/1/kanban')
+
+		cy.get('.kanban .bucket .bucket-header .title')
+			.first()
+			.type('{selectall}New Bucket Title{enter}')
+		cy.get('.kanban .bucket .bucket-header .title')
+			.first()
+			.should('contain', 'New Bucket Title')
+	})
+
+	it('Can delete a bucket', () => {
+		cy.visit('/lists/1/kanban')
+
+		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+			.first()
+			.click()
+		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
+			.contains('Delete')
+			.click()
+		cy.get('.modal-mask .modal-container .modal-content .header')
+			.should('contain', 'Delete the bucket')
+		cy.get('.modal-mask .modal-container .modal-content .actions .button')
+			.contains('Do it!')
+			.click()
+
+		cy.get('.kanban .bucket .title')
+			.contains(buckets[0].title)
+			.should('not.exist')
+		cy.get('.kanban .bucket .title')
+			.contains(buckets[1].title)
+			.should('exist')
+	})
+
+	it('Can drag tasks around', () => {
+		const tasks = TaskFactory.create(2, {
+			list_id: 1,
+			bucket_id: 1,
+		})
+		cy.visit('/lists/1/kanban')
+
+		cy.get('.kanban .bucket .tasks .task')
+			.contains(tasks[0].title)
+			.first()
+			.drag('.kanban .bucket:nth-child(2) .tasks .dropper')
+		
+		cy.get('.kanban .bucket:nth-child(2) .tasks')
+			.should('contain', tasks[0].title)
+		cy.get('.kanban .bucket:nth-child(1) .tasks')
+			.should('not.contain', tasks[0].title)
+	})
+
+	it('Should navigate to the task when the task card is clicked', () => {
+		const tasks = TaskFactory.create(5, {
+			id: '{increment}',
+			list_id: 1,
+			bucket_id: 1,
+		})
+		cy.visit('/lists/1/kanban')
+
+		cy.getSettled('.kanban .bucket .tasks .task')
+			.contains(tasks[0].title)
+			.should('be.visible')
+			.click()
+
+		cy.url()
+			.should('contain', `/tasks/${tasks[0].id}`, { timeout: 1000 })
+	})
+
+	it('Should remove a task from the kanban board when moving it to another list', () => {
+		const lists = ListFactory.create(2)
+		BucketFactory.create(2, {
+			list_id: '{increment}',
+		})
+		const tasks = TaskFactory.create(5, {
+			id: '{increment}',
+			list_id: 1,
+			bucket_id: 1,
+		})
+		const task = tasks[0]
+		cy.visit('/lists/1/kanban')
+
+		cy.getSettled('.kanban .bucket .tasks .task')
+			.contains(task.title)
+			.should('be.visible')
+			.click()
+
+		cy.get('.task-view .action-buttons .button', { timeout: 3000 })
+			.contains('Move task')
+			.click()
+		cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
+			.type(`${lists[1].title}{enter}`)
+		// The requests happen with a 200ms timeout. Because of that, the results are not yet there when cypress
+		// presses enter and we can't simulate pressing on enter to select the item.
+		cy.get('.task-view .content.details .field .multiselect.control .search-results')
+			.children()
+			.first()
+			.click()
+
+		cy.get('.global-notification', { timeout: 1000 })
+			.should('contain', 'Success')
+		cy.go('back')
+		cy.get('.kanban .bucket')
+			.should('not.contain', task.title)
+	})
+})
\ No newline at end of file
diff --git a/cypress/integration/list/list-view-list.spec.js b/cypress/integration/list/list-view-list.spec.js
new file mode 100644
index 000000000..e1a4a0f69
--- /dev/null
+++ b/cypress/integration/list/list-view-list.spec.js
@@ -0,0 +1,97 @@
+import {UserListFactory} from '../../factories/users_list'
+import {TaskFactory} from '../../factories/task'
+import {UserFactory} from '../../factories/user'
+import {ListFactory} from '../../factories/list'
+import {prepareLists} from './prepareLists'
+
+import '../../support/authenticateUser'
+
+describe('List View List', () => {
+	prepareLists()
+
+	it('Should be an empty list', () => {
+		cy.visit('/lists/1')
+		cy.url()
+			.should('contain', '/lists/1/list')
+		cy.get('.list-title h1')
+			.should('contain', 'First List')
+		cy.get('.list-title .dropdown')
+			.should('exist')
+		cy.get('p')
+			.contains('This list is currently empty.')
+			.should('exist')
+	})
+
+	it('Should navigate to the task when the title is clicked', () => {
+		const tasks = TaskFactory.create(5, {
+			id: '{increment}',
+			list_id: 1,
+		})
+		cy.visit('/lists/1/list')
+
+		cy.get('.tasks .task .tasktext')
+			.contains(tasks[0].title)
+			.first()
+			.click()
+
+		cy.url()
+			.should('contain', `/tasks/${tasks[0].id}`)
+	})
+
+	it('Should not see any elements for a list which is shared read only', () => {
+		UserFactory.create(2)
+		UserListFactory.create(1, {
+			list_id: 2,
+			user_id: 1,
+			right: 0,
+		})
+		const lists = ListFactory.create(2, {
+			owner_id: '{increment}',
+			namespace_id: '{increment}',
+		})
+		cy.visit(`/lists/${lists[1].id}/`)
+
+		cy.get('.list-title a.icon')
+			.should('not.exist')
+		cy.get('input.input[placeholder="Add a new task..."')
+			.should('not.exist')
+	})
+
+	it('Should only show the color of a list in the navigation and not in the list view', () => {
+		const lists = ListFactory.create(1, {
+			hex_color: '00db60',
+		})
+		TaskFactory.create(10, {
+			list_id: lists[0].id,
+		})
+		cy.visit(`/lists/${lists[0].id}/`)
+
+		cy.get('.menu-list li .list-menu-link .color-bubble')
+			.should('have.css', 'background-color', 'rgb(0, 219, 96)')
+		cy.get('.tasks-container .tasks .color-bubble')
+			.should('not.exist')
+	})
+
+	it('Should paginate for > 50 tasks', () => {
+		const tasks = TaskFactory.create(100, {
+			id: '{increment}',
+			title: i => `task${i}`,
+			list_id: 1,
+		})
+		cy.visit('/lists/1/list')
+
+		cy.get('.tasks-container .tasks')
+			.should('contain', tasks[99].title)
+
+		cy.get('.card-content .pagination .pagination-link')
+			.contains('2')
+			.click()
+
+		cy.url()
+			.should('contain', '?page=2')
+		cy.get('.tasks-container .tasks')
+			.should('contain', tasks[1].title)
+		cy.get('.tasks-container .tasks')
+			.should('not.contain', tasks[99].title)
+	})
+})
\ No newline at end of file
diff --git a/cypress/integration/list/list-view-table.spec.js b/cypress/integration/list/list-view-table.spec.js
new file mode 100644
index 000000000..e0336efc5
--- /dev/null
+++ b/cypress/integration/list/list-view-table.spec.js
@@ -0,0 +1,52 @@
+import {TaskFactory} from '../../factories/task'
+
+import '../../support/authenticateUser'
+
+describe('List View Table', () => {
+	it('Should show a table with tasks', () => {
+		const tasks = TaskFactory.create(1)
+		cy.visit('/lists/1/table')
+
+		cy.get('.list-table table.table')
+			.should('exist')
+		cy.get('.list-table table.table')
+			.should('contain', tasks[0].title)
+	})
+
+	it('Should have working column switches', () => {
+		TaskFactory.create(1)
+		cy.visit('/lists/1/table')
+
+		cy.get('.list-table .filter-container .items .button')
+			.contains('Columns')
+			.click()
+		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+			.contains('Priority')
+			.click()
+		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+			.contains('Done')
+			.click()
+
+		cy.get('.list-table table.table th')
+			.contains('Priority')
+			.should('exist')
+		cy.get('.list-table table.table th')
+			.contains('Done')
+			.should('not.exist')
+	})
+
+	it('Should navigate to the task when the title is clicked', () => {
+		const tasks = TaskFactory.create(5, {
+			id: '{increment}',
+			list_id: 1,
+		})
+		cy.visit('/lists/1/table')
+
+		cy.get('.list-table table.table')
+			.contains(tasks[0].title)
+			.click()
+
+		cy.url()
+			.should('contain', `/tasks/${tasks[0].id}`)
+	})
+})
\ No newline at end of file
diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js
index 45773302d..f2a7edc40 100644
--- a/cypress/integration/list/list.spec.js
+++ b/cypress/integration/list/list.spec.js
@@ -1,25 +1,11 @@
-import {formatISO, format} from 'date-fns'
-
 import {TaskFactory} from '../../factories/task'
-import {ListFactory} from '../../factories/list'
-import {UserListFactory} from '../../factories/users_list'
-import {UserFactory} from '../../factories/user'
-import {NamespaceFactory} from '../../factories/namespace'
-import {BucketFactory} from '../../factories/bucket'
+import {prepareLists} from './prepareLists'
 
 import '../../support/authenticateUser'
 
 describe('Lists', () => {
 	let lists
-
-	beforeEach(() => {
-		UserFactory.create(1)
-		NamespaceFactory.create(1)
-		lists = ListFactory.create(1, {
-			title: 'First List'
-		})
-		TaskFactory.truncate()
-	})
+	prepareLists((newLists) => (lists = newLists))
 
 	it('Should create a new list', () => {
 		cy.visit('/')
@@ -56,7 +42,7 @@ describe('Lists', () => {
 	})
 
 	it('Should rename the list in all places', () => {
-		const tasks = TaskFactory.create(5, {
+		TaskFactory.create(5, {
 			id: '{increment}',
 			list_id: 1,
 		})
@@ -112,429 +98,4 @@ describe('Lists', () => {
 		cy.location('pathname')
 			.should('equal', '/')
 	})
-
-	describe('List View', () => {
-		it('Should be an empty list', () => {
-			cy.visit('/lists/1')
-			cy.url()
-				.should('contain', '/lists/1/list')
-			cy.get('.list-title h1')
-				.should('contain', 'First List')
-			cy.get('.list-title .dropdown')
-				.should('exist')
-			cy.get('p')
-				.contains('This list is currently empty.')
-				.should('exist')
-		})
-
-		it('Should navigate to the task when the title is clicked', () => {
-			const tasks = TaskFactory.create(5, {
-				id: '{increment}',
-				list_id: 1,
-			})
-			cy.visit('/lists/1/list')
-
-			cy.get('.tasks .task .tasktext')
-				.contains(tasks[0].title)
-				.first()
-				.click()
-
-			cy.url()
-				.should('contain', `/tasks/${tasks[0].id}`)
-		})
-
-		it('Should not see any elements for a list which is shared read only', () => {
-			UserFactory.create(2)
-			UserListFactory.create(1, {
-				list_id: 2,
-				user_id: 1,
-				right: 0,
-			})
-			const lists = ListFactory.create(2, {
-				owner_id: '{increment}',
-				namespace_id: '{increment}',
-			})
-			cy.visit(`/lists/${lists[1].id}/`)
-
-			cy.get('.list-title a.icon')
-				.should('not.exist')
-			cy.get('input.input[placeholder="Add a new task..."')
-				.should('not.exist')
-		})
-
-		it('Should only show the color of a list in the navigation and not in the list view', () => {
-			const lists = ListFactory.create(1, {
-				hex_color: '00db60',
-			})
-			TaskFactory.create(10, {
-				list_id: lists[0].id,
-			})
-			cy.visit(`/lists/${lists[0].id}/`)
-
-			cy.get('.menu-list li .list-menu-link .color-bubble')
-				.should('have.css', 'background-color', 'rgb(0, 219, 96)')
-			cy.get('.tasks-container .tasks .color-bubble')
-				.should('not.exist')
-		})
-
-		it('Should paginate for > 50 tasks', () => {
-			const tasks = TaskFactory.create(100, {
-				id: '{increment}',
-				title: i => `task${i}`,
-				list_id: 1,
-			})
-			cy.visit('/lists/1/list')
-
-			cy.get('.tasks-container .tasks')
-				.should('contain', tasks[99].title)
-
-			cy.get('.card-content .pagination .pagination-link')
-				.contains('2')
-				.click()
-
-			cy.url()
-				.should('contain', '?page=2')
-			cy.get('.tasks-container .tasks')
-				.should('contain', tasks[1].title)
-			cy.get('.tasks-container .tasks')
-				.should('not.contain', tasks[99].title)
-		})
-	})
-
-	describe('Table View', () => {
-		it('Should show a table with tasks', () => {
-			const tasks = TaskFactory.create(1)
-			cy.visit('/lists/1/table')
-
-			cy.get('.table-view table.table')
-				.should('exist')
-			cy.get('.table-view table.table')
-				.should('contain', tasks[0].title)
-		})
-
-		it('Should have working column switches', () => {
-			TaskFactory.create(1)
-			cy.visit('/lists/1/table')
-
-			cy.get('.table-view .filter-container .items .button')
-				.contains('Columns')
-				.click()
-			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
-				.contains('Priority')
-				.click()
-			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
-				.contains('Done')
-				.click()
-
-			cy.get('.table-view table.table th')
-				.contains('Priority')
-				.should('exist')
-			cy.get('.table-view table.table th')
-				.contains('Done')
-				.should('not.exist')
-		})
-
-		it('Should navigate to the task when the title is clicked', () => {
-			const tasks = TaskFactory.create(5, {
-				id: '{increment}',
-				list_id: 1,
-			})
-			cy.visit('/lists/1/table')
-
-			cy.get('.table-view table.table')
-				.contains(tasks[0].title)
-				.click()
-
-			cy.url()
-				.should('contain', `/tasks/${tasks[0].id}`)
-		})
-	})
-
-	describe('Gantt View', () => {
-		it('Hides tasks with no dates', () => {
-			const tasks = TaskFactory.create(1)
-			cy.visit('/lists/1/gantt')
-
-			cy.get('.gantt-chart-container .gantt-chart .tasks')
-				.should('not.contain', tasks[0].title)
-		})
-
-		it('Shows tasks from the current and next month', () => {
-			const now = new Date()
-			const nextMonth = now
-			nextMonth.setDate(1)
-			nextMonth.setMonth(now.getMonth() + 1)
-
-			cy.visit('/lists/1/gantt')
-
-			cy.get('.gantt-chart-container .gantt-chart .months')
-				.should('contain', format(now, 'MMMM'))
-				.should('contain', format(nextMonth, 'MMMM'))
-		})
-
-		it('Shows tasks with dates', () => {
-			const now = new Date()
-			const tasks = TaskFactory.create(1, {
-				start_date: formatISO(now),
-				end_date: formatISO(now.setDate(now.getDate() + 4))
-			})
-			cy.visit('/lists/1/gantt')
-
-			cy.get('.gantt-chart-container .gantt-chart .tasks')
-				.should('not.be.empty')
-			cy.get('.gantt-chart-container .gantt-chart .tasks')
-				.should('contain', tasks[0].title)
-		})
-
-		it('Shows tasks with no dates after enabling them', () => {
-			TaskFactory.create(1, {
-				start_date: null,
-				end_date: null,
-			})
-			cy.visit('/lists/1/gantt')
-
-			cy.get('.gantt-chart-container .gantt-options .fancycheckbox')
-				.contains('Show tasks which don\'t have dates set')
-				.click()
-
-			cy.get('.gantt-chart-container .gantt-chart .tasks')
-				.should('not.be.empty')
-			cy.get('.gantt-chart-container .gantt-chart .tasks .task.nodate')
-				.should('exist')
-		})
-
-		it('Drags a task around', () => {
-			const now = new Date()
-			TaskFactory.create(1, {
-				start_date: formatISO(now),
-				end_date: formatISO(now.setDate(now.getDate() + 4))
-			})
-			cy.visit('/lists/1/gantt')
-
-			cy.get('.gantt-chart-container .gantt-chart .tasks .task')
-				.first()
-				.trigger('mousedown', {which: 1})
-				.trigger('mousemove', {clientX: 500, clientY: 0})
-				.trigger('mouseup', {force: true})
-		})
-	})
-
-	describe('Kanban', () => {
-		let buckets
-
-		beforeEach(() => {
-			buckets = BucketFactory.create(2)
-		})
-
-		it('Shows all buckets with their tasks', () => {
-			const data = TaskFactory.create(10, {
-				list_id: 1,
-				bucket_id: 1,
-			})
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket .title')
-				.contains(buckets[0].title)
-				.should('exist')
-			cy.get('.kanban .bucket .title')
-				.contains(buckets[1].title)
-				.should('exist')
-			cy.get('.kanban .bucket')
-				.first()
-				.should('contain', data[0].title)
-		})
-
-		it('Can add a new task to a bucket', () => {
-			const data = TaskFactory.create(2, {
-				list_id: 1,
-				bucket_id: 1,
-			})
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket')
-				.contains(buckets[0].title)
-				.get('.bucket-footer .button')
-				.contains('Add another task')
-				.click()
-			cy.get('.kanban .bucket')
-				.contains(buckets[0].title)
-				.get('.bucket-footer .field .control input.input')
-				.type('New Task{enter}')
-
-			cy.get('.kanban .bucket')
-				.first()
-				.should('contain', 'New Task')
-		})
-
-		it('Can create a new bucket', () => {
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket.new-bucket .button')
-				.click()
-			cy.get('.kanban .bucket.new-bucket input.input')
-				.type('New Bucket{enter}')
-
-			cy.wait(1000) // Wait for the request to finish
-			cy.get('.kanban .bucket .title')
-				.contains('New Bucket')
-				.should('exist')
-		})
-
-		it('Can set a bucket limit', () => {
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
-				.first()
-				.click()
-			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
-				.contains('Limit: Not Set')
-				.click()
-			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
-				.first()
-				.type(3)
-			cy.get('[data-cy="setBucketLimit"]')
-				.first()
-				.click()
-
-			cy.get('.kanban .bucket .bucket-header span.limit')
-				.contains('0/3')
-				.should('exist')
-		})
-
-		it('Can rename a bucket', () => {
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket .bucket-header .title')
-				.first()
-				.type('{selectall}New Bucket Title{enter}')
-			cy.get('.kanban .bucket .bucket-header .title')
-				.first()
-				.should('contain', 'New Bucket Title')
-		})
-
-		it('Can delete a bucket', () => {
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
-				.first()
-				.click()
-			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
-				.contains('Delete')
-				.click()
-			cy.get('.modal-mask .modal-container .modal-content .header')
-				.should('contain', 'Delete the bucket')
-			cy.get('.modal-mask .modal-container .modal-content .actions .button')
-				.contains('Do it!')
-				.click()
-
-			cy.get('.kanban .bucket .title')
-				.contains(buckets[0].title)
-				.should('not.exist')
-			cy.get('.kanban .bucket .title')
-				.contains(buckets[1].title)
-				.should('exist')
-		})
-
-		it('Can drag tasks around', () => {
-			const tasks = TaskFactory.create(2, {
-				list_id: 1,
-				bucket_id: 1,
-			})
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket .tasks .task')
-				.contains(tasks[0].title)
-				.first()
-				.drag('.kanban .bucket:nth-child(2) .tasks .dropper')
-			
-			cy.get('.kanban .bucket:nth-child(2) .tasks')
-				.should('contain', tasks[0].title)
-			cy.get('.kanban .bucket:nth-child(1) .tasks')
-				.should('not.contain', tasks[0].title)
-		})
-
-		it('Should navigate to the task when the task card is clicked', () => {
-			const tasks = TaskFactory.create(5, {
-				id: '{increment}',
-				list_id: 1,
-				bucket_id: 1,
-			})
-			cy.visit('/lists/1/kanban')
-
-			cy.getSettled('.kanban .bucket .tasks .task')
-				.contains(tasks[0].title)
-				.should('be.visible')
-				.click()
-
-			cy.url()
-				.should('contain', `/tasks/${tasks[0].id}`)
-		})
-
-		it('Should remove a task from the kanban board when moving it to another list', () => {
-			const lists = ListFactory.create(2)
-			BucketFactory.create(2, {
-				list_id: '{increment}',
-			})
-			const tasks = TaskFactory.create(5, {
-				id: '{increment}',
-				list_id: 1,
-				bucket_id: 1,
-			})
-			const task = tasks[0]
-			cy.visit('/lists/1/kanban')
-
-			cy.getSettled('.kanban .bucket .tasks .task')
-				.contains(task.title)
-				.should('be.visible')
-				.click()
-
-			cy.get('.task-view .action-buttons .button')
-				.contains('Move task')
-				.click()
-			cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
-				.type(`${lists[1].title}{enter}`)
-			// The requests happen with a 200ms timeout. Because of that, the results are not yet there when cypress
-			// presses enter and we can't simulate pressing on enter to select the item.
-			cy.get('.task-view .content.details .field .multiselect.control .search-results')
-				.children()
-				.first()
-				.click()
-
-			cy.get('.global-notification', { timeout: 1000 })
-				.should('contain', 'Success')
-			cy.go('back')
-			cy.get('.kanban .bucket')
-				.should('not.contain', task.title)
-		})
-	})
-
-	describe('List history', () => {
-		it('should show a list history on the home page', () => {
-			const lists = ListFactory.create(6)
-
-			cy.visit('/')
-			cy.get('h3')
-				.contains('Last viewed')
-				.should('not.exist')
-
-			cy.visit(`/lists/${lists[0].id}`)
-			cy.visit(`/lists/${lists[1].id}`)
-			cy.visit(`/lists/${lists[2].id}`)
-			cy.visit(`/lists/${lists[3].id}`)
-			cy.visit(`/lists/${lists[4].id}`)
-			cy.visit(`/lists/${lists[5].id}`)
-
-			cy.visit('/')
-			cy.get('h3')
-				.contains('Last viewed')
-				.should('exist')
-			cy.get('.list-cards-wrapper-2-rows')
-				.should('not.contain', lists[0].title)
-				.should('contain', lists[1].title)
-				.should('contain', lists[2].title)
-				.should('contain', lists[3].title)
-				.should('contain', lists[4].title)
-				.should('contain', lists[5].title)
-		})
-	})
 })
diff --git a/cypress/integration/list/prepareLists.js b/cypress/integration/list/prepareLists.js
new file mode 100644
index 000000000..afef6ba4f
--- /dev/null
+++ b/cypress/integration/list/prepareLists.js
@@ -0,0 +1,16 @@
+import {ListFactory} from '../../factories/list'
+import {UserFactory} from '../../factories/user'
+import {NamespaceFactory} from '../../factories/namespace'
+import {TaskFactory} from '../../factories/task'
+
+export function prepareLists(setLists = () => {}) {
+	beforeEach(() => {
+		UserFactory.create(1)
+		NamespaceFactory.create(1)
+		const lists = ListFactory.create(1, {
+			title: 'First List'
+		})
+		setLists(lists)
+		TaskFactory.truncate()
+	})
+}
\ No newline at end of file
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index b03b04f46..d478aac49 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -14,7 +14,7 @@
   .box,
   .card,
   .switch-view,
-  .table-view .button,
+  .list-table .button,
   .filter-container .button,
   .search .button {
     box-shadow: none;
diff --git a/src/views/list/ListGantt.vue b/src/views/list/ListGantt.vue
index b01855b37..f5278a344 100644
--- a/src/views/list/ListGantt.vue
+++ b/src/views/list/ListGantt.vue
@@ -1,5 +1,5 @@
 <template>
-	<ListWrapper>
+	<ListWrapper class="list-gantt">
 		<template #header>
 		<div class="gantt-options p-4">
 			<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue
index 1836db35e..4104e1cba 100644
--- a/src/views/list/ListKanban.vue
+++ b/src/views/list/ListKanban.vue
@@ -1,5 +1,5 @@
 <template>
-	<ListWrapper>
+	<ListWrapper class="list-kanban">
 		<template #header>
 			<div class="filter-container" v-if="isSavedFilter">
 			<div class="items">
diff --git a/src/views/list/ListList.vue b/src/views/list/ListList.vue
index 063caf577..7af3ddeb8 100644
--- a/src/views/list/ListList.vue
+++ b/src/views/list/ListList.vue
@@ -1,5 +1,5 @@
 <template>
-	<ListWrapper>
+	<ListWrapper class="list-list">
 		<template #header>
 		<div
 			class="filter-container"
diff --git a/src/views/list/ListTable.vue b/src/views/list/ListTable.vue
index 70cc7d910..d86770064 100644
--- a/src/views/list/ListTable.vue
+++ b/src/views/list/ListTable.vue
@@ -1,5 +1,5 @@
 <template>
-	<ListWrapper>
+	<ListWrapper class="list-table">
 		<template #header>
 			<div class="filter-container">
 			<div class="items">
@@ -64,7 +64,7 @@
 		</template>
 
 		<template #default>
-			<div :class="{'is-loading': loading}" class="table-view loader-container">
+			<div :class="{'is-loading': loading}" class="loader-container">
 			<card :padding="false" :has-content="false">
 			<div class="has-horizontal-overflow">
 				<table class="table has-actions is-hoverable is-fullwidth mb-0">
-- 
2.40.1


From da8cf13619e269a0fc02b3b733d9eeb0b5d9c860 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Thu, 18 Nov 2021 11:12:57 +0100
Subject: [PATCH 09/54] fix: task done label test

---
 cypress/integration/task/task.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cypress/integration/task/task.spec.js b/cypress/integration/task/task.spec.js
index 63df56512..a6be81856 100644
--- a/cypress/integration/task/task.spec.js
+++ b/cypress/integration/task/task.spec.js
@@ -116,6 +116,7 @@ describe('Task', () => {
 				.should('be.visible')
 				.should('contain', 'Done')
 			cy.get('.task-view .action-buttons p.created')
+				.scrollIntoView()
 				.should('be.visible')
 				.should('contain', 'Done')
 		})
-- 
2.40.1


From 58207db6c3a3133fd928fc77675dbe8778a01988 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 17 Nov 2021 23:26:49 +0100
Subject: [PATCH 10/54] fix: kanban tests

---
 cypress/integration/list/list-view-kanban.spec.js | 10 +++++-----
 src/components/tasks/partials/kanban-card.vue     |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/cypress/integration/list/list-view-kanban.spec.js b/cypress/integration/list/list-view-kanban.spec.js
index 01219d01b..52d672829 100644
--- a/cypress/integration/list/list-view-kanban.spec.js
+++ b/cypress/integration/list/list-view-kanban.spec.js
@@ -38,7 +38,7 @@ describe('List View Kanban', () => {
 		})
 		cy.visit('/lists/1/kanban')
 
-		cy.get('.kanban .bucket')
+		cy.getSettled('.kanban .bucket')
 			.contains(buckets[0].title)
 			.get('.bucket-footer .button')
 			.contains('Add another task')
@@ -70,7 +70,7 @@ describe('List View Kanban', () => {
 	it('Can set a bucket limit', () => {
 		cy.visit('/lists/1/kanban')
 
-		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+		cy.getSettled('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
 			.first()
 			.click()
 		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
@@ -91,7 +91,7 @@ describe('List View Kanban', () => {
 	it('Can rename a bucket', () => {
 		cy.visit('/lists/1/kanban')
 
-		cy.get('.kanban .bucket .bucket-header .title')
+		cy.getSettled('.kanban .bucket .bucket-header .title')
 			.first()
 			.type('{selectall}New Bucket Title{enter}')
 		cy.get('.kanban .bucket .bucket-header .title')
@@ -102,7 +102,7 @@ describe('List View Kanban', () => {
 	it('Can delete a bucket', () => {
 		cy.visit('/lists/1/kanban')
 
-		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+		cy.getSettled('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
 			.first()
 			.click()
 		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
@@ -129,7 +129,7 @@ describe('List View Kanban', () => {
 		})
 		cy.visit('/lists/1/kanban')
 
-		cy.get('.kanban .bucket .tasks .task')
+		cy.getSettled('.kanban .bucket .tasks .task')
 			.contains(tasks[0].title)
 			.first()
 			.drag('.kanban .bucket:nth-child(2) .tasks .dropper')
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index d0edae3e3..2bd2f33f6 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -7,7 +7,7 @@
 			'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
 		}"
 		:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
-		@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
+		@click.exact="openTaskDetail()"
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.meta="() => toggleTaskDone(task)"
 	>
-- 
2.40.1


From 700fce3c2cf6fb6d7dea69771786ae5f4da9a1ad Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 30 Nov 2021 16:58:15 +0100
Subject: [PATCH 11/54] fix: sharing components

---
 .../namespace/namespace-settings-dropdown.vue |   2 +-
 src/router/index.ts                           |   2 +-
 src/views/list/settings/share.vue             | 103 ++++++++--------
 src/views/namespaces/settings/share.vue       | 112 +++++++++---------
 4 files changed, 109 insertions(+), 110 deletions(-)

diff --git a/src/components/namespace/namespace-settings-dropdown.vue b/src/components/namespace/namespace-settings-dropdown.vue
index 0ce99c8c9..9651c5b2c 100644
--- a/src/components/namespace/namespace-settings-dropdown.vue
+++ b/src/components/namespace/namespace-settings-dropdown.vue
@@ -16,7 +16,7 @@
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.share', params: { id: namespace.id } }"
+				:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
diff --git a/src/router/index.ts b/src/router/index.ts
index 0557c9a84..56fa2fee4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -217,7 +217,7 @@ const router = createRouter({
 			},
 		},
 		{
-			path: '/namespaces/:id/settings/share',
+			path: '/namespaces/:namespaceId/settings/share',
 			name: 'namespace.settings.share',
 			component: NamespaceSettingShare,
 			meta: {
diff --git a/src/views/list/settings/share.vue b/src/views/list/settings/share.vue
index 4a9967f86..ca11b4e56 100644
--- a/src/views/list/settings/share.vue
+++ b/src/views/list/settings/share.vue
@@ -3,24 +3,38 @@
 		:title="$t('list.share.header')"
 		primary-label=""
 	>
-		<component
-			:id="list.id"
-			:is="manageUsersComponent"
-			:userIsAdmin="userIsAdmin"
-			shareType="user"
-			type="list"/>
-		<component
-			:id="list.id"
-			:is="manageTeamsComponent"
-			:userIsAdmin="userIsAdmin"
-			shareType="team"
-			type="list"/>
+		<template v-if="list">
+			<userTeam
+				:id="list.id"
+				:userIsAdmin="userIsAdmin"
+				shareType="user"
+				type="list"
+			/>
+			<userTeam
+				:id="list.id"
+				:userIsAdmin="userIsAdmin"
+				shareType="team"
+				type="list"
+			/>
+		</template>
 
-		<link-sharing :list-id="$route.params.listId" v-if="linkSharingEnabled" class="mt-4"/>
+		<link-sharing :list-id="listId" v-if="linkSharingEnabled" class="mt-4"/>
 	</create-edit>
 </template>
 
-<script>
+<script lang="ts">
+export default {
+	name: 'list-setting-share',
+}
+</script>
+
+<script lang="ts" setup>
+import {ref, computed, watchEffect} from 'vue'
+import {useStore} from 'vuex'
+import {useRoute} from 'vue-router'
+import {useI18n} from 'vue-i18n'
+import {useTitle} from '@vueuse/core'
+
 import ListService from '@/services/list'
 import ListModel from '@/models/list'
 import {CURRENT_LIST} from '@/store/mutation-types'
@@ -29,43 +43,30 @@ import CreateEdit from '@/components/misc/create-edit.vue'
 import LinkSharing from '@/components/sharing/linkSharing.vue'
 import userTeam from '@/components/sharing/userTeam.vue'
 
-export default {
-	name: 'list-setting-share',
-	data() {
-		return {
-			list: ListModel,
-			listService: new ListService(),
-			manageUsersComponent: '',
-			manageTeamsComponent: '',
-		}
-	},
-	components: {
-		CreateEdit,
-		LinkSharing,
-		userTeam,
-	},
-	computed: {
-		linkSharingEnabled() {
-			return this.$store.state.config.linkSharingEnabled
-		},
-		userIsAdmin() {
-			return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
-		},
-	},
-	created() {
-		this.loadList()
-	},
-	methods: {
-		async loadList() {
-			const list = new ListModel({id: this.$route.params.listId})
+const {t} = useI18n()
 
-			this.list = await this.listService.get(list)
-			await this.$store.dispatch(CURRENT_LIST, this.list)
-			// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-			this.manageTeamsComponent = 'userTeam'
-			this.manageUsersComponent = 'userTeam'
-			this.setTitle(this.$t('list.share.title', {list: this.list.title}))
-		},
-	},
+const list = ref()
+const title = computed(() => list.value?.title
+	? t('list.share.title', {list: list.value.title})
+	: '',
+)
+useTitle(title)
+
+const store = useStore()
+const linkSharingEnabled = computed(() => store.state.config.linkSharingEnabled)
+const userIsAdmin = computed(() => 'owner' in list.value && list.value.owner.id === store.state.auth.info.id)
+
+async function loadList(listId: number) {
+	const listService = new ListService()
+	const newList = await listService.get(new ListModel({id: listId}))
+	await store.dispatch(CURRENT_LIST, newList)
+	list.value = newList
 }
+
+const route = useRoute()
+const listId = computed(() => route.params.listId !== undefined
+	? parseInt(route.params.listId as string)
+	: undefined,
+)
+watchEffect(() => listId.value !== undefined && loadList(listId.value))
 </script>
diff --git a/src/views/namespaces/settings/share.vue b/src/views/namespaces/settings/share.vue
index 8f70cbd55..f3e4a20ca 100644
--- a/src/views/namespaces/settings/share.vue
+++ b/src/views/namespaces/settings/share.vue
@@ -3,69 +3,67 @@
 		:title="title"
 		primary-label=""
 	>
-		<component
-			:id="namespace.id"
-			:is="manageUsersComponent"
-			:userIsAdmin="userIsAdmin"
-			shareType="user"
-			type="namespace"/>
-		<component
-			:id="namespace.id"
-			:is="manageTeamsComponent"
-			:userIsAdmin="userIsAdmin"
-			shareType="team"
-			type="namespace"/>
+		<template v-if="namespace">
+			<manageSharing
+				:id="namespace.id"
+				:userIsAdmin="userIsAdmin"
+				shareType="user"
+				type="namespace"
+			/>
+			<manageSharing
+				:id="namespace.id"
+				:userIsAdmin="userIsAdmin"
+				shareType="team"
+				type="namespace"
+			/>
+		</template>
 	</create-edit>
 </template>
 
-<script>
-import manageSharing from '@/components/sharing/userTeam.vue'
-import CreateEdit from '@/components/misc/create-edit.vue'
+<script lang="ts">
+export default {
+	name: 'namespace-setting-share',
+}
+</script>
+
+<script lang="ts" setup>
+import {ref, computed, watchEffect} from 'vue'
+import {useStore} from 'vuex'
+import {useRoute} from 'vue-router'
+import {useI18n} from 'vue-i18n'
+import {useTitle} from '@vueuse/core'
 
 import NamespaceService from '@/services/namespace'
 import NamespaceModel from '@/models/namespace'
 
-export default {
-	name: 'namespace-setting-share',
-	data() {
-		return {
-			namespaceService: new NamespaceService(),
-			namespace: new NamespaceModel(),
-			manageUsersComponent: '',
-			manageTeamsComponent: '',
-			title: '',
-		}
-	},
-	components: {
-		CreateEdit,
-		manageSharing,
-	},
-	beforeMount() {
-		this.namespace.id = this.$route.params.id
-	},
-	watch: {
-		// call again the method if the route changes
-		'$route': {
-			handler: 'loadNamespace',
-			deep: true,
-			immediate: true,
-		},
-	},
-	computed: {
-		userIsAdmin() {
-			return this.namespace.owner && this.namespace.owner.id === this.$store.state.auth.info.id
-		},
-	},
-	methods: {
-		async loadNamespace() {
-			const namespace = new NamespaceModel({id: this.$route.params.id})
-			this.namespace = await this.namespaceService.get(namespace)
-			// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-			this.manageTeamsComponent = 'manageSharing'
-			this.manageUsersComponent = 'manageSharing'
-			this.title = this.$t('namespace.share.title', { namespace: this.namespace.title })
-			this.setTitle(this.title)
-		},
-	},
+import CreateEdit from '@/components/misc/create-edit.vue'
+import manageSharing from '@/components/sharing/userTeam.vue'
+
+const {t} = useI18n()
+
+const namespace = ref()
+
+const title = computed(() => namespace.value?.title
+	? t('namespace.share.title', { namespace: namespace.value.title })
+	: '',
+)
+useTitle(title)
+
+const store = useStore()
+const userIsAdmin = computed(() => 'owner' in namespace.value && namespace.value.owner.id === store.state.auth.info.id)
+
+async function loadNamespace(namespaceId: number) {
+	if (!namespaceId) return
+	const namespaceService = new NamespaceService()
+	namespace.value = await namespaceService.get(new NamespaceModel({id: namespaceId}))
+
+	// TODO: set namespace in store
 }
+
+const route = useRoute()
+const namespaceId = computed(() => route.params.namespaceId !== undefined
+	? parseInt(route.params.namespaceId as string)
+	: undefined,
+)
+watchEffect(() => namespaceId.value !== undefined && loadNamespace(namespaceId.value))
 </script>
\ No newline at end of file
-- 
2.40.1


From f3358269e5346ec53652a7d9f3643f739ea21809 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 30 Nov 2021 20:48:48 +0100
Subject: [PATCH 12/54] fix task remove label test

---
 cypress/integration/task/task.spec.js         |  6 ++---
 src/components/tasks/partials/comments.vue    |  4 +--
 src/components/tasks/partials/description.vue |  4 +--
 src/components/tasks/partials/editLabels.vue  | 26 +++++++------------
 src/views/tasks/TaskDetailView.vue            |  2 ++
 5 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/cypress/integration/task/task.spec.js b/cypress/integration/task/task.spec.js
index a6be81856..048455bcc 100644
--- a/cypress/integration/task/task.spec.js
+++ b/cypress/integration/task/task.spec.js
@@ -373,13 +373,13 @@ describe('Task', () => {
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
+			cy.getSettled('.task-view .details.labels-list .multiselect .input-wrapper')
 				.should('be.visible')
 				.should('contain', labels[0].title)
-			cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
+			cy.getSettled('.task-view .details.labels-list .multiselect .input-wrapper')
 				.children()
 				.first()
-				.get('a.delete')
+				.get('[data-cy="taskDetail.removeLabel"]')
 				.click()
 
 			cy.get('.global-notification')
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index 6565960cc..4aab00988 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -152,7 +152,7 @@
 </template>
 
 <script>
-import AsyncEditor from '@/components/input/AsyncEditor'
+import Editor from '@/components/input/editor.vue'
 
 import TaskCommentService from '../../../services/taskComment'
 import TaskCommentModel from '../../../models/taskComment'
@@ -162,7 +162,7 @@ import {mapState} from 'vuex'
 export default {
 	name: 'comments',
 	components: {
-		editor: AsyncEditor,
+		Editor,
 	},
 	props: {
 		taskId: {
diff --git a/src/components/tasks/partials/description.vue b/src/components/tasks/partials/description.vue
index 28fd5a88e..e3e8fe71b 100644
--- a/src/components/tasks/partials/description.vue
+++ b/src/components/tasks/partials/description.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import AsyncEditor from '@/components/input/AsyncEditor'
+import Editor from '@/components/input/editor.vue'
 
 import {LOADING} from '@/store/mutation-types'
 import {mapState} from 'vuex'
@@ -38,7 +38,7 @@ import {mapState} from 'vuex'
 export default {
 	name: 'description',
 	components: {
-		editor: AsyncEditor,
+		Editor,
 	},
 	data() {
 		return {
diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue
index ddc10dc3b..63ff0cb13 100644
--- a/src/components/tasks/partials/editLabels.vue
+++ b/src/components/tasks/partials/editLabels.vue
@@ -19,7 +19,7 @@
 				:style="{'background': props.item.hexColor, 'color': props.item.textColor}"
 				class="tag">
 				<span>{{ props.item.title }}</span>
-				<a @click="removeLabel(props.item)" class="delete is-small"></a>
+				<button type="button" v-cy="'taskDetail.removeLabel'" @click="removeLabel(props.item)" class="delete is-small" />
 			</span>
 		</template>
 		<template #searchResult="props">
@@ -114,23 +114,17 @@ export default {
 		},
 
 		async removeLabel(label) {
-			const removeFromState = () => {
-				for (const l in this.labels) {
-					if (this.labels[l].id === label.id) {
-						this.labels.splice(l, 1)
-					}
+			if (!this.taskId === 0) {
+				await this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
+			}
+
+			for (const l in this.labels) {
+				if (this.labels[l].id === label.id) {
+					this.labels.splice(l, 1)
 				}
-				this.$emit('update:modelValue', this.labels)
-				this.$emit('change', this.labels)
 			}
-
-			if (this.taskId === 0) {
-				removeFromState()
-				return
-			}
-
-			await this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
-			removeFromState()
+			this.$emit('update:modelValue', this.labels)
+			this.$emit('change', this.labels)
 			this.$message.success({message: this.$t('task.label.removeSuccess')})
 		},
 
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 07443d9ec..6beca73ce 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -453,8 +453,10 @@ import {CURRENT_LIST} from '@/store/mutation-types'
 import {uploadFile} from '@/helpers/attachments'
 import ChecklistSummary from '../../components/tasks/partials/checklist-summary'
 
+
 export default {
 	name: 'TaskDetailView',
+	compatConfig: { ATTR_FALSE_VALUE: false },
 	components: {
 		ChecklistSummary,
 		TaskSubscription,
-- 
2.40.1


From 2db820d926fbfd00ba5ff0c68fec243020db2620 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sat, 4 Dec 2021 17:04:28 +0100
Subject: [PATCH 13/54] feat: review changes

---
 cypress.json                                       | 6 +-----
 src/components/home/contentAuth.vue                | 6 +++---
 src/components/tasks/edit-task.vue                 | 2 +-
 src/components/tasks/partials/kanban-card.vue      | 2 +-
 src/components/tasks/partials/singleTaskInList.vue | 2 +-
 src/composables/taskList.js                        | 2 +-
 src/views/list/ListTable.vue                       | 2 +-
 src/views/list/ListWrapper.vue                     | 2 +-
 8 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/cypress.json b/cypress.json
index fbdc9fcb5..27f12495c 100644
--- a/cypress.json
+++ b/cypress.json
@@ -7,9 +7,5 @@
   "video": false,
   "retries": {
     "runMode": 2
-  },
-  "testFiles": [
-    "list/list.spec.js",
-    "**/*.spec.js"
-  ]
+  }
 }
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index bc36bc7ff..d19d04878 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -54,8 +54,8 @@ function useRouteWithModal() {
 	const historyState = computed(() => route.fullPath && window.history.state)
 
 	const routeWithModal = computed(() => {
-		if (historyState.value.backgroundView) {
-			return router.resolve(historyState.value.backgroundView)
+		if (historyState.value.backdropView) {
+			return router.resolve(historyState.value.backdropView)
 		} else {
 			return route
 		}
@@ -65,7 +65,7 @@ function useRouteWithModal() {
 
 	const currentModal = shallowRef(null)
 	watchEffect(() => {
-		currentModal.value = historyState.value.backgroundView
+		currentModal.value = historyState.value.backdropView
 			? route.matched[0]?.components.default
 			: null
 	})
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 6ebe41106..cb57c3d18 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -107,7 +107,7 @@ export default {
 			return {
 				name: 'task.detail',
 				params: { id: this.taskEditTask.id },
-				state: { backgroundView: this.$router.currentRoute.value.fullPath },
+				state: { backdropView: this.$router.currentRoute.value.fullPath },
 			}
 		},
 	},
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 2bd2f33f6..4a65e5c2b 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -116,7 +116,7 @@ export default {
 			this.$router.push({
 				name: 'task.detail',
 				params: { id: this.task.id },
-				state: { backgroundView: this.$router.currentRoute.value.fullPath },
+				state: { backdropView: this.$router.currentRoute.value.fullPath },
 			})
 		},
 	},
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 168386e62..93a35b275 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -167,7 +167,7 @@ export default {
 			return {
 				name: 'task.detail',
 				params: { id: this.task.id },
-				state: { backgroundView: this.$router.currentRoute.value.fullPath },
+				state: { backdropView: this.$router.currentRoute.value.fullPath },
 			}
 		},
 	},
diff --git a/src/composables/taskList.js b/src/composables/taskList.js
index 1855e8cd7..4ba35d8b4 100644
--- a/src/composables/taskList.js
+++ b/src/composables/taskList.js
@@ -21,7 +21,7 @@ export function useTaskList(initTasks) {
 	const loading = computed(() => taskCollectionService.value.loading)
 	const totalPages = computed(() => taskCollectionService.value.totalPages)
 
-    const tasks = ref([])
+	const tasks = ref([])
 	const currentPage = ref(0)
 	const loadedList = ref(null)
 	const searchTerm = ref('')
diff --git a/src/views/list/ListTable.vue b/src/views/list/ListTable.vue
index d86770064..954d49df3 100644
--- a/src/views/list/ListTable.vue
+++ b/src/views/list/ListTable.vue
@@ -282,7 +282,7 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 		{
 			name: 'task.detail',
 			params: { id },
-			state: { backgroundView: router.currentRoute.value.fullPath },
+			state: { backdropView: router.currentRoute.value.fullPath },
 		},
 	])),
 ))
diff --git a/src/views/list/ListWrapper.vue b/src/views/list/ListWrapper.vue
index 96283b385..3d75952dd 100644
--- a/src/views/list/ListWrapper.vue
+++ b/src/views/list/ListWrapper.vue
@@ -124,7 +124,7 @@ async function loadList(listIdToLoad) {
 		const loadedList = await listService.value.get(list)
 		await store.dispatch(CURRENT_LIST, loadedList)
 	} finally {
-		loadedListId.value = listId
+		loadedListId.value = listId.value
 	}
 }
 </script>
-- 
2.40.1


From e837621ef8e7770acbc7f0af1f13e5610328c27d Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sat, 4 Dec 2021 18:15:21 +0100
Subject: [PATCH 14/54] Try to cache list views

---
 src/components/home/contentAuth.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index d19d04878..ba69adacb 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -20,7 +20,12 @@
 
 				<quick-actions/>
 
-				<router-view :route="routeWithModal"/>
+
+				<router-view :route="routeWithModal" v-slot="{ Component }">
+					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
+						<component :is="Component" />
+					</keep-alive>
+				</router-view>
 
 				<transition name="modal">
 					<component v-if="currentModal" :is="currentModal" />
-- 
2.40.1


From e54d95802bb961d7a9b507ca08fa952dde1e20cd Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 7 Dec 2021 19:23:27 +0100
Subject: [PATCH 15/54] fix: closing modal

---
 src/views/tasks/TaskDetailViewModal.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index a240a2b09..913ed6593 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@@ -12,11 +12,22 @@
 </template>
 
 <script setup>
-import TaskDetailView from './TaskDetailView'
-import router from '@/router'
+import {computed} from 'vue'
+import {useRouter, useRoute} from 'vue-router'
 
+import TaskDetailView from './TaskDetailView'
+
+const route = useRoute()
+const historyState = computed(() => route.fullPath && window.history.state)
+
+const router = useRouter()
 function close() {
-	router.back()
+	if (historyState.value) {
+		router.back()
+	} else {
+		const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
+		router.push(backdropRoute)
+	}
 }
 </script>
 
-- 
2.40.1


From 6d62ca1adaf4be5f94dac1a3840834e881b30aa3 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 7 Dec 2021 19:40:50 +0100
Subject: [PATCH 16/54] fix: check now just once

---
 src/views/list/ListGantt.vue  | 17 +++++++++++------
 src/views/tasks/ShowTasks.vue | 16 +++++++++-------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/views/list/ListGantt.vue b/src/views/list/ListGantt.vue
index f5278a344..15b11747f 100644
--- a/src/views/list/ListGantt.vue
+++ b/src/views/list/ListGantt.vue
@@ -68,21 +68,26 @@
 import { ref, computed } from 'vue'
 import flatPickr from 'vue-flatpickr-component'
 
-import { i18n } from '@/i18n'
-import { store } from '@/store'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import ListWrapper from './ListWrapper'
 import GanttChart from '@/components/tasks/gantt-component'
 import Fancycheckbox from '@/components/input/fancycheckbox'
 
+const DEFAULT_DAY_COUNT = 35 
+
 const showTaskswithoutDates = ref(false)
-const dayWidth = ref(35)
-const dateFrom = ref(new Date((new Date()).setDate((new Date()).getDate() - 15)))
-const dateTo = ref(new Date((new Date()).setDate((new Date()).getDate() + 30)))
+const dayWidth = ref(DEFAULT_DAY_COUNT)
 
+const now = ref(new Date())
+const dateFrom = ref(new Date((new Date()).setDate(now.value.getDate() - 15)))
+const dateTo = ref(new Date((new Date()).setDate(now.value.getDate() + 30)))
 
+const {t} = useI18n()
+const {store} = useStore()
 const flatPickerConfig = computed(() => ({
-	altFormat: i18n.global.t('date.altFormatShort'),
+	altFormat: t('date.altFormatShort'),
 	altInput: true,
 	dateFormat: 'Y-m-d',
 	enableTime: false,
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index d4f06ba33..9b1399840 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -231,23 +231,25 @@ export default {
 		},
 
 		setDatesToNextWeek() {
-			this.cStartDate = new Date()
-			this.cEndDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
+			const now = new Date()
+			this.cStartDate = now
+			this.cEndDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)
 			this.showOverdue = false
 			this.setDate()
 		},
 
 		setDatesToNextMonth() {
-			this.cStartDate = new Date()
-			this.cEndDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
+			const now = new Date()
+			this.cStartDate = now
+			this.cEndDate = new Date((new Date()).setMonth(now.getMonth() + 1))
 			this.showOverdue = false
 			this.setDate()
 		},
 
 		showTodaysTasks() {
-			const d = new Date()
-			this.cStartDate = new Date()
-			this.cEndDate = new Date(d.setDate(d.getDate() + 1))
+			const now = new Date()
+			this.cStartDate = now
+			this.cEndDate = new Date((new Date()).setDate(now.getDate() + 1))
 			this.showOverdue = true
 			this.setDate()
 		},
-- 
2.40.1


From 5916a44724ca237daf13e6ac396f27451bfb5887 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 10 Dec 2021 15:29:28 +0100
Subject: [PATCH 17/54] feat: provide listId prop via router

---
 src/components/home/contentAuth.vue     |  29 +++-
 src/composables/taskList.js             | 168 ++++++++++++------------
 src/router/index.ts                     |  15 +++
 src/views/list/ListGantt.vue            |  21 ++-
 src/views/list/ListKanban.vue           |  29 ++--
 src/views/list/ListList.vue             |  32 +++--
 src/views/list/ListTable.vue            | 138 +++++++------------
 src/views/list/ListWrapper.vue          |  39 +++---
 src/views/tasks/TaskDetailView.vue      |  12 +-
 src/views/tasks/TaskDetailViewModal.vue |  13 +-
 10 files changed, 263 insertions(+), 233 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index ba69adacb..48f6a3e84 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import {watch, computed, shallowRef, watchEffect} from 'vue'
+import {watch, computed, shallowRef, watchEffect, h} from 'vue'
 import {useStore} from 'vuex'
 import {useRoute, useRouter} from 'vue-router'
 import {useEventListener} from '@vueuse/core'
@@ -66,19 +66,36 @@ function useRouteWithModal() {
 		}
 	})
 
-	
-
 	const currentModal = shallowRef(null)
 	watchEffect(() => {
-		currentModal.value = historyState.value.backdropView
-			? route.matched[0]?.components.default
+		const hasBackdropView = historyState.value.backdropView
+
+		if (!hasBackdropView) {
+			currentModal.value = null
+			return
+		}
+
+		// logic 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
 			: null
+
+		currentModal.value = h(
+			route.matched[0]?.components.default,
+			routeProps,
+		)
 	})
 
 	return { routeWithModal, currentModal }
 }
 
-useRouteWithModal()
+const { routeWithModal, currentModal } = useRouteWithModal()
 
 const store = useStore()
 
diff --git a/src/composables/taskList.js b/src/composables/taskList.js
index 4ba35d8b4..bffc576e4 100644
--- a/src/composables/taskList.js
+++ b/src/composables/taskList.js
@@ -1,5 +1,5 @@
-import { ref, watch, computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref, shallowReactive, watch, computed } from 'vue'
+import {useRoute} from 'vue-router'
 
 import TaskCollectionService from '@/services/taskCollection'
 
@@ -13,102 +13,104 @@ export const getDefaultParams = () => ({
 	filter_concat: 'and',
 })
 
+
+const filters = {
+	done: {
+		value: false,
+		comparator: 'equals',
+		concat: 'and',
+	},
+}
+
+const SORT_BY_DEFAULT = {
+	id: 'desc',
+}
+
 /**
  * This mixin provides a base set of methods and properties to get tasks on a list.
  */
-export function useTaskList(initTasks) {
-	const taskCollectionService = ref(new TaskCollectionService())
-	const loading = computed(() => taskCollectionService.value.loading)
-	const totalPages = computed(() => taskCollectionService.value.totalPages)
+export function useTaskList(listId) {
+	const params = ref({...getDefaultParams()})
+	
+	const search = ref('')
+	const page = ref(1)
+
+	const sortBy = ref({ ...SORT_BY_DEFAULT })
+
+
+	// This makes sure an id sort order is always sorted last.
+	// When tasks would be sorted first by id and then by whatever else was specified, the id sort takes
+	// precedence over everything else, making any other sort columns pretty useless.
+	function formatSortOrder(params) {
+		let hasIdFilter = false
+		const sortKeys = Object.keys(sortBy.value)
+		for (const s of sortKeys) {
+			if (s === 'id') {
+				sortKeys.splice(s, 1)
+				hasIdFilter = true
+				break
+			}
+		}
+		if (hasIdFilter) {
+			sortKeys.push('id')
+		}
+		params.sort_by = sortKeys
+		params.order_by = sortKeys.map(s => sortBy.value[s])
+
+		return params
+	}
+
+	const getAllTasksParams = computed(() => {
+		let loadParams = {...params.value}
+
+		if (search.value !== '') {
+			loadParams.s = search.value
+		}
+
+		loadParams = formatSortOrder(loadParams)
+
+		return [
+			{listId: listId.value},
+			loadParams,
+			page.value || 1,
+		]
+	})
+
+	const taskCollectionService = shallowReactive(new TaskCollectionService())
+	const loading = computed(() => taskCollectionService.loading)
+	const totalPages = computed(() => taskCollectionService.totalPages)
 
 	const tasks = ref([])
-	const currentPage = ref(0)
-	const loadedList = ref(null)
-	const searchTerm = ref('')
-	const showTaskFilter = ref(false)
-	const params = ref({...getDefaultParams()})
-
-	const route = useRoute()
-
-	async function loadTasks(
-		page = 1,
-		search = '',
-		loadParams = { ...params.value },
-		forceLoading = false,
-	) {
-
-		// Because this function is triggered every time on topNavigation, we're putting a condition here to only load it when we actually want to show tasks
-		// FIXME: This is a bit hacky -> Cleanup.
-		if (
-			route.name !== 'list.list' &&
-			route.name !== 'list.table' &&
-			!forceLoading
-		) {
-			return
-		}
-
-		if (search !== '') {
-			loadParams.s = search
-		}
-
-		const list = {listId: parseInt(route.params.listId)}
-
-		const currentList = {
-			id: list.listId,
-			params: loadParams,
-			search,
-			page,
-		}
-		if (
-			JSON.stringify(currentList) === JSON.stringify(loadedList.value) &&
-			!forceLoading
-		) {
-			return
-		}
-
-		tasks.value = []
-		tasks.value = await taskCollectionService.value.getAll(list, loadParams, page)
-		currentPage.value = page
-		loadedList.value = JSON.parse(JSON.stringify(currentList))
-
+	async function loadTasks() {
+		tasks.value = await taskCollectionService.getAll(...getAllTasksParams.value)
 		return tasks.value
 	}
 
-	async function loadTasksForPage(query) {
-		const { page, search } = query
-		initTasks(params)
-		return await loadTasks(
-			// The page parameter can be undefined, in the case where the user loads a new list from the side bar menu
-			typeof page === 'undefined' ? 1 : Number(page),
-			search,
-			params.value,
-		)
-	}
-		
-	async function loadTasksOnSavedFilter() {
-		if (
-			typeof route.params.listId !== 'undefined' &&
-			parseInt(route.params.listId) < 0
-		) {
-			await loadTasks(1, '', null, true)
-		}
-	}
+	const route = useRoute()
+	watch(() => route.query, (query) => {
+		const { page: pageQuery, search: searchQuery } = query
+		search.value = searchQuery
+		page.value = pageQuery
 
-	function initTaskList() {
-		// Only listen for query path changes
-		watch(() => route.query, loadTasksForPage, { immediate: true })
-		watch(() => route.path, loadTasksOnSavedFilter)
-	}
+	}, { immediate: true })
+
+
+	// Only listen for query path changes
+	watch(() => JSON.stringify(getAllTasksParams.value), (newParams, oldParams) => {
+		if (oldParams === newParams) {
+			return
+		}
+
+		loadTasks()
+	}, { immediate: true })
 
 	return {
 		tasks,
-		initTaskList,
 		loading,
 		totalPages,
-		currentPage,
-		showTaskFilter,
+		currentPage: page,
 		loadTasks,
-		searchTerm,
+		searchTerm: search,
 		params,
 	}
 }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 56fa2fee4..9c5fec038 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -244,6 +244,9 @@ const router = createRouter({
 			path: '/tasks/:id',
 			name: 'task.detail',
 			component: TaskDetailViewModal,
+			props: route => ({
+				taskId: parseInt(route.params.id),
+			}),
 		},
 		{
 			path: '/tasks/by/upcoming',
@@ -341,21 +344,33 @@ const router = createRouter({
 			path: '/lists/:listId/list',
 			name: 'list.list',
 			component: ListList,
+			props: route => ({
+				listId: parseInt(route.params.listId),
+			}),
 		},
 		{
 			path: '/lists/:listId/gantt',
 			name: 'list.gantt',
 			component: ListGantt,
+			props: route => ({
+				listId: parseInt(route.params.listId),
+			}),
 		},
 		{
 			path: '/lists/:listId/table',
 			name: 'list.table',
 			component: ListTable,
+			props: route => ({
+				listId: parseInt(route.params.listId),
+			}),
 		},
 		{
 			path: '/lists/:listId/kanban',
 			name: 'list.kanban',
 			component: ListKanban,
+			props: route => ({
+				listId: parseInt(route.params.listId),
+			}),
 		},
 		{
 			path: '/teams',
diff --git a/src/views/list/ListGantt.vue b/src/views/list/ListGantt.vue
index 15b11747f..82b765dd8 100644
--- a/src/views/list/ListGantt.vue
+++ b/src/views/list/ListGantt.vue
@@ -1,5 +1,5 @@
 <template>
-	<ListWrapper class="list-gantt">
+	<ListWrapper class="list-gantt" :list-id="props.listId" viewName="gantt">
 		<template #header>
 		<div class="gantt-options p-4">
 			<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
@@ -54,7 +54,7 @@
 			:date-from="dateFrom"
 			:date-to="dateTo"
 			:day-width="dayWidth"
-			:list-id="Number($route.params.listId)"
+			:list-id="props.listId"
 			:show-taskswithout-dates="showTaskswithoutDates"
 		/>
 
@@ -64,16 +64,23 @@
 	</ListWrapper>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed } from 'vue'
 import flatPickr from 'vue-flatpickr-component'
 
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
-import ListWrapper from './ListWrapper'
-import GanttChart from '@/components/tasks/gantt-component'
-import Fancycheckbox from '@/components/input/fancycheckbox'
+import ListWrapper from './ListWrapper.vue'
+import GanttChart from '@/components/tasks/gantt-component.vue'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+
+const props = defineProps({
+	listId: {
+		type: Number,
+		required: true,
+	},
+})
 
 const DEFAULT_DAY_COUNT = 35 
 
@@ -85,7 +92,7 @@ const dateFrom = ref(new Date((new Date()).setDate(now.value.getDate() - 15)))
 const dateTo = ref(new Date((new Date()).setDate(now.value.getDate() + 30)))
 
 const {t} = useI18n()
-const {store} = useStore()
+const store = useStore()
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatShort'),
 	altInput: true,
diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue
index 4104e1cba..4c880be18 100644
--- a/src/views/list/ListKanban.vue
+++ b/src/views/list/ListKanban.vue
@@ -1,5 +1,5 @@
 <template>
-	<ListWrapper class="list-kanban">
+	<ListWrapper class="list-kanban" :list-id="listId" viewName="kanban">
 		<template #header>
 			<div class="filter-container" v-if="isSavedFilter">
 			<div class="items">
@@ -263,6 +263,14 @@ export default {
 		FilterPopup,
 		draggable,
 	},
+
+	props: {
+		listId: {
+			type: Number,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
 			taskContainerRefs: {},
@@ -310,7 +318,7 @@ export default {
 		},
 		loadBucketParameter() {
 			return {
-				listId: this.$route.params.listId,
+				listId: this.listId,
 				params: this.params,
 			}
 		},
@@ -350,16 +358,11 @@ export default {
 
 	methods: {
 		loadBuckets() {
-			// Prevent trying to load buckets if the task popup view is active
-			if (this.$route.name !== 'list.kanban') {
-				return
-			}
-
 			const {listId, params} = this.loadBucketParameter
 
 			this.collapsedBuckets = getCollapsedBucketState(listId)
 
-			console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $route.params =`, this.$route.params)
+			console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $attrs = ${this.$attrs} $route.params =`, this.$route.params)
 
 			this.$store.dispatch('kanban/loadBucketsForList', {listId, params})
 		},
@@ -434,7 +437,7 @@ export default {
 			const task = await this.$store.dispatch('tasks/createNewTask', {
 				title: this.newTaskText,
 				bucketId,
-				listId: this.$route.params.listId,
+				listId: this.listId,
 			})
 			this.newTaskText = ''
 			this.$store.commit('kanban/addTaskToBucket', task)
@@ -456,7 +459,7 @@ export default {
 
 			const newBucket = new BucketModel({
 				title: this.newBucketTitle,
-				listId: parseInt(this.$route.params.listId),
+				listId: this.listId,
 			})
 
 			await this.$store.dispatch('kanban/createBucket', newBucket)
@@ -476,7 +479,7 @@ export default {
 		async deleteBucket() {
 			const bucket = new BucketModel({
 				id: this.bucketToDelete,
-				listId: parseInt(this.$route.params.listId),
+				listId: this.listId,
 			})
 
 			try {
@@ -564,7 +567,7 @@ export default {
 
 		collapseBucket(bucket) {
 			this.collapsedBuckets[bucket.id] = true
-			saveCollapsedBucketState(this.$route.params.listId, this.collapsedBuckets)
+			saveCollapsedBucketState(this.listId, this.collapsedBuckets)
 		},
 		unCollapseBucket(bucket) {
 			if (!this.collapsedBuckets[bucket.id]) {
@@ -572,7 +575,7 @@ export default {
 			}
 
 			this.collapsedBuckets[bucket.id] = false
-			saveCollapsedBucketState(this.$route.params.listId, this.collapsedBuckets)
+			saveCollapsedBucketState(this.listId, this.collapsedBuckets)
 		},
 	},
 }
diff --git a/src/views/list/ListList.vue b/src/views/list/ListList.vue
index 7af3ddeb8..bb9e9478b 100644
--- a/src/views/list/ListList.vue
+++ b/src/views/list/ListList.vue
@@ -1,5 +1,5 @@
 <template>
-	<ListWrapper class="list-list">
+	<ListWrapper class="list-list" :list-id="listId" viewName="list">
 		<template #header>
 		<div
 			class="filter-container"
@@ -132,9 +132,9 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref, toRef, defineComponent } from 'vue'
 
-import ListWrapper from './ListWrapper'
+import ListWrapper from './ListWrapper.vue'
 import EditTask from '@/components/tasks/edit-task'
 import AddTask from '@/components/tasks/add-task'
 import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
@@ -167,8 +167,16 @@ function sortTasks(tasks) {
 	})
 }
 
-export default {
+export default defineComponent({
 	name: 'List',
+	
+	props: {
+		listId: {
+			type: Number,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
 			ctaVisible: false,
@@ -192,19 +200,17 @@ export default {
 		Pagination,
 	},
 
-	setup() {
+	setup(props) {
 		const taskEditTask = ref(null)
 		const isTaskEdit = ref(false)
 
 		// This function initializes the tasks page and loads the first page of tasks
-		function beforeLoad() {
-			taskEditTask.value = null
-			isTaskEdit.value = false
-		}
+		// function beforeLoad() {
+		// 	taskEditTask.value = null
+		// 	isTaskEdit.value = false
+		// }
 
-		const taskList = useTaskList(beforeLoad)
-
-		taskList.initTaskList()
+		const taskList = useTaskList(toRef(props, 'listId'))
 
 		return {
 			taskEditTask,
@@ -312,7 +318,7 @@ export default {
 			this.tasks[e.newIndex] = updatedTask
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/list/ListTable.vue b/src/views/list/ListTable.vue
index 954d49df3..e23ede692 100644
--- a/src/views/list/ListTable.vue
+++ b/src/views/list/ListTable.vue
@@ -1,5 +1,5 @@
 <template>
-	<ListWrapper class="list-table">
+	<ListWrapper class="list-table" :list-id="listId" viewName="table">
 		<template #header>
 			<div class="filter-container">
 			<div class="items">
@@ -15,50 +15,47 @@
 					</template>
 					<template #content="{isOpen}">
 						<card class="columns-filter" :class="{'is-open': isOpen}">
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">
+							<fancycheckbox v-model="activeColumns.id">#</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.done">
 								{{ $t('task.attributes.done') }}
 							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">
+							<fancycheckbox v-model="activeColumns.title">
 								{{ $t('task.attributes.title') }}
 							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">
+							<fancycheckbox v-model="activeColumns.priority">
 								{{ $t('task.attributes.priority') }}
 							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">
+							<fancycheckbox v-model="activeColumns.labels">
 								{{ $t('task.attributes.labels') }}
 							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">
+							<fancycheckbox v-model="activeColumns.assignees">
 								{{ $t('task.attributes.assignees') }}
 							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">
+							<fancycheckbox v-model="activeColumns.dueDate">
 								{{ $t('task.attributes.dueDate') }}
 							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">
+							<fancycheckbox v-model="activeColumns.startDate">
 								{{ $t('task.attributes.startDate') }}
 							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">
+							<fancycheckbox v-model="activeColumns.endDate">
 								{{ $t('task.attributes.endDate') }}
 							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">
+							<fancycheckbox v-model="activeColumns.percentDone">
 								{{ $t('task.attributes.percentDone') }}
 							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">
+							<fancycheckbox v-model="activeColumns.created">
 								{{ $t('task.attributes.created') }}
 							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">
+							<fancycheckbox v-model="activeColumns.updated">
 								{{ $t('task.attributes.updated') }}
 							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">
+							<fancycheckbox v-model="activeColumns.createdBy">
 								{{ $t('task.attributes.createdBy') }}
 							</fancycheckbox>
 						</card>
 					</template>
 				</popup>
-				<filter-popup
-					v-model="params"
-					@update:modelValue="loadTasks()"
-				/>
+				<filter-popup v-model="params" />
 			</div>
 			</div>
 		</template>
@@ -182,21 +179,23 @@
 	</ListWrapper>
 </template>
 
-<script setup>
-import { ref, reactive, computed, toRaw } from 'vue'
+<script setup lang="ts">
+import { toRef, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
-import ListWrapper from './ListWrapper'
+import { useStorage } from '@vueuse/core'
+
+import ListWrapper from './ListWrapper.vue'
 import Done from '@/components/misc/Done.vue'
-import User from '@/components/misc/user'
-import PriorityLabel from '@/components/tasks/partials/priorityLabel'
-import Labels from '@/components/tasks/partials/labels'
-import DateTableCell from '@/components/tasks/partials/date-table-cell'
-import Fancycheckbox from '@/components/input/fancycheckbox'
-import Sort from '@/components/tasks/partials/sort'
+import User from '@/components/misc/user.vue'
+import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
+import Labels from '@/components/tasks/partials/labels.vue'
+import DateTableCell from '@/components/tasks/partials/date-table-cell.vue'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import Sort from '@/components/tasks/partials/sort.vue'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Pagination from '@/components/misc/pagination.vue'
-import Popup from '@/components/misc/popup'
+import Popup from '@/components/misc/popup.vue'
 
 import { useTaskList } from '@/composables/taskList'
 
@@ -216,57 +215,27 @@ const ACTIVE_COLUMNS_DEFAULT = {
 	createdBy: false,
 }
 
+const props = defineProps({
+	listId: {
+		type: Number,
+		required: true,
+	},
+})
+
 const SORT_BY_DEFAULT = {
 	id: 'desc',
 }
 
-function useSavedView(activeColumns, sortBy) {
-	const savedShowColumns = localStorage.getItem('tableViewColumns')
-	if (savedShowColumns !== null) {
-		Object.assign(activeColumns, JSON.parse(savedShowColumns))
-	}
-
-	const savedSortBy = localStorage.getItem('tableViewSortBy')
-	if (savedSortBy !== null) {
-		sortBy.value = JSON.parse(savedSortBy)
-	}
-}
-
-const activeColumns = reactive({ ...ACTIVE_COLUMNS_DEFAULT })
-const sortBy = ref({ ...SORT_BY_DEFAULT })
-
-useSavedView(activeColumns, sortBy)
-
-function beforeLoad(params) {
-	// This makes sure an id sort order is always sorted last.
-	// When tasks would be sorted first by id and then by whatever else was specified, the id sort takes
-	// precedence over everything else, making any other sort columns pretty useless.
-	let hasIdFilter = false
-	const sortKeys = Object.keys(sortBy.value)
-	for (const s of sortKeys) {
-		if (s === 'id') {
-			sortKeys.splice(s, 1)
-			hasIdFilter = true
-			break
-		}
-	}
-	if (hasIdFilter) {
-		sortKeys.push('id')
-	}
-	params.value.sort_by = sortKeys
-	params.value.order_by = sortKeys.map(s => sortBy.value[s])
-}
+const activeColumns = useStorage('tableViewColumns', { ...ACTIVE_COLUMNS_DEFAULT })
+const sortBy = useStorage('tableViewSortBy', { ...SORT_BY_DEFAULT })
 
 const {
 	tasks,
 	loading,
 	params,
-	loadTasks,
 	totalPages,
 	currentPage,
-	searchTerm,
-	initTaskList,
-} = useTaskList(beforeLoad)
+} = useTaskList(toRef(props, 'listId'))
 
 Object.assign(params.value, {
 	filter_by: [],
@@ -274,8 +243,19 @@ Object.assign(params.value, {
 	filter_comparator: [],
 })
 
-const router = useRouter()
+// FIXME: by doing this we can have multiple sort orders
+function sort(property) {
+	const order = sortBy.value[property]
+	if (typeof order === 'undefined' || order === 'none') {
+		sortBy.value[property] = 'desc'
+	} else if (order === 'desc') {
+		sortBy.value[property] = 'asc'
+	} else {
+		delete sortBy.value[property]
+	}
+}
 
+const router = useRouter()
 const taskDetailRoutes = computed(() => Object.fromEntries(
 	tasks.value.map(({id}) => ([
 		id,
@@ -286,26 +266,6 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 		},
 	])),
 ))
-
-function sort(property) {
-	const order = sortBy.value[property]
-	if (typeof order === 'undefined' || order === 'none') {
-		sortBy.value[property] = 'desc'
-	} else if (order === 'desc') {
-		sortBy.value[property] = 'asc'
-	} else {
-		delete sortBy.value[property]
-	}
-	beforeLoad(currentPage.value, searchTerm.value)
-	// Save the order to be able to retrieve them later
-	localStorage.setItem('tableViewSortBy', JSON.stringify(sortBy.value))
-}
-
-function saveTaskColumns() {
-	localStorage.setItem('tableViewColumns', JSON.stringify(toRaw(activeColumns)))
-}
-
-initTaskList()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/list/ListWrapper.vue b/src/views/list/ListWrapper.vue
index 3d75952dd..7543d991f 100644
--- a/src/views/list/ListWrapper.vue
+++ b/src/views/list/ListWrapper.vue
@@ -8,28 +8,28 @@
 				<router-link
 					v-shortcut="'g l'"
 					:title="$t('keyboardShortcuts.list.switchToListView')"
-					:class="{'is-active': $route.name === 'list.list'}"
+					:class="{'is-active': viewName === 'list'}"
 					:to="{ name: 'list.list',   params: { listId } }">
 					{{ $t('list.list.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g g'"
 					:title="$t('keyboardShortcuts.list.switchToGanttView')"
-					:class="{'is-active': $route.name === 'list.gantt'}"
+					:class="{'is-active': viewName === 'gantt'}"
 					:to="{ name: 'list.gantt',  params: { listId } }">
 					{{ $t('list.gantt.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g t'"
 					:title="$t('keyboardShortcuts.list.switchToTableView')"
-					:class="{'is-active': $route.name === 'list.table'}"
+					:class="{'is-active': viewName === 'table'}"
 					:to="{ name: 'list.table',  params: { listId } }">
 					{{ $t('list.table.title') }}
 				</router-link>
 				<router-link
 					v-shortcut="'g k'"
 					:title="$t('keyboardShortcuts.list.switchToKanbanView')"
-					:class="{'is-active': $route.name === 'list.kanban'}"
+					:class="{'is-active': viewName === 'kanban'}"
 					:to="{ name: 'list.kanban', params: { listId } }">
 					{{ $t('list.kanban.title') }}
 				</router-link>
@@ -46,11 +46,11 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {ref, shallowRef, computed, watchEffect} from 'vue'
 import {useRoute} from 'vue-router'
 
-import Message from '@/components/misc/message'
+import Message from '@/components/misc/message.vue'
 
 import ListModel from '@/models/list'
 import ListService from '@/services/list'
@@ -63,11 +63,22 @@ import {saveListView} from '@/helpers/saveListView'
 import {saveListToHistory} from '@/modules/listHistory'
 import { useTitle } from '@/composables/useTitle'
 
+const props = defineProps({
+	listId: {
+		type: Number,
+		required: true,
+	},
+	viewName: {
+		type: String,
+		required: true,
+	},
+})
+
 const route = useRoute()
 
 // Save the current list view to local storage
 // We use local storage and not vuex here to make it persistent across reloads.
-saveListView(route.params.listId, route.name)
+saveListView(props.listId, props.viewName)
 
 const listService = shallowRef(new ListService())
 const loadedListId = ref(0)
@@ -80,14 +91,12 @@ const currentList = computed(() => {
 	} : store.state.currentList
 })
 
-// Computed property to let "listId" always have a value
-const listId = computed(() => typeof route.params.listId === 'undefined' ? 0 : parseInt(route.params.listId))
 // call again the method if the listId changes
-watchEffect(() => loadList(listId.value))
+watchEffect(() => loadList(props.listId))
 
 useTitle(() => currentList.value.id ? getListTitle(currentList.value) : '')
 
-async function loadList(listIdToLoad) {
+async function loadList(listIdToLoad: number) {
 	const listData = {id: listIdToLoad}
 	saveListToHistory(listData)
 
@@ -97,8 +106,8 @@ async function loadList(listIdToLoad) {
 	// We don't do this for the table view because that does not change tasks.
 	// FIXME: remove this
 	if (
-		route.name === 'list.list' ||
-		route.name === 'list.gantt'
+		props.viewName === 'list.list' ||
+		props.viewName === 'list.gantt'
 	) {
 		store.commit('kanban/setListId', 0)
 	}
@@ -116,7 +125,7 @@ async function loadList(listIdToLoad) {
 		return
 	}
 
-	console.debug(`Loading list, $route.name = ${route.name}, $route.params =`, route.params, `, loadedListId = ${loadedListId.value}, currentList = `, currentList.value)
+	console.debug(`Loading list, props.viewName = ${props.viewName}, $route.params =`, route.params, `, loadedListId = ${loadedListId.value}, currentList = `, currentList.value)
 
 	// We create an extra list object instead of creating it in list.value because that would trigger a ui update which would result in bad ux.
 	const list = new ListModel(listData)
@@ -124,7 +133,7 @@ async function loadList(listIdToLoad) {
 		const loadedList = await listService.value.get(list)
 		await store.dispatch(CURRENT_LIST, loadedList)
 	} finally {
-		loadedListId.value = listId.value
+		loadedListId.value = props.listId
 	}
 }
 </script>
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 6beca73ce..517d006dd 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -475,6 +475,14 @@ export default {
 		description,
 		heading,
 	},
+
+	props: {
+		taskId: {
+			type: Number,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
 			taskService: new TaskService(),
@@ -525,10 +533,6 @@ export default {
 		},
 	},
 	computed: {
-		taskId() {
-			const {id} = this.$route.params
-			return id === undefined ? id : Number(id)
-		},
 		currentList() {
 			return this.$store.state[CURRENT_LIST]
 		},
diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index 913ed6593..9c5d05e4d 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@@ -7,15 +7,22 @@
 		<a @click="close()" class="close">
 			<icon icon="times"/>
 		</a>
-		<task-detail-view/>
+		<task-detail-view :task-id="props.taskId"/>
 	</modal>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {computed} from 'vue'
 import {useRouter, useRoute} from 'vue-router'
 
-import TaskDetailView from './TaskDetailView'
+import TaskDetailView from './TaskDetailView.vue'
+
+const props = defineProps({
+	taskId: {
+		type: Number,
+		required: true,
+	},
+})
 
 const route = useRoute()
 const historyState = computed(() => route.fullPath && window.history.state)
-- 
2.40.1


From 76f4cca5fe25c19be04493911f814b1e6a7c0f17 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 10 Dec 2021 18:04:07 +0100
Subject: [PATCH 18/54] fix: move local storage list view to router

---
 src/helpers/saveListView.js    |  2 ++
 src/router/index.ts            | 32 ++++++++++++++------------------
 src/views/list/ListWrapper.vue |  5 -----
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/helpers/saveListView.js b/src/helpers/saveListView.js
index b7f735e1e..96be63420 100644
--- a/src/helpers/saveListView.js
+++ b/src/helpers/saveListView.js
@@ -1,3 +1,5 @@
+// Save the current list view to local storage
+// We use local storage and not vuex here to make it persistent across reloads.
 export const saveListView = (listId, routeName) => {
 	if (routeName.includes('settings.')) {
 		return
diff --git a/src/router/index.ts b/src/router/index.ts
index 9c5fec038..d49b80278 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,7 +2,7 @@ import { createRouter, createWebHistory, RouteLocation } from 'vue-router'
 import {saveLastVisited} from '@/helpers/saveLastVisited'
 import {store} from '@/store'
 
-import {getListView} from '@/helpers/saveListView'
+import {saveListView, getListView} from '@/helpers/saveListView'
 
 import HomeComponent from '../views/Home'
 import NotFoundComponent from '../views/404'
@@ -244,9 +244,7 @@ const router = createRouter({
 			path: '/tasks/:id',
 			name: 'task.detail',
 			component: TaskDetailViewModal,
-			props: route => ({
-				taskId: parseInt(route.params.id),
-			}),
+			props: route => ({ taskId: parseInt(route.params.id) }),
 		},
 		{
 			path: '/tasks/by/upcoming',
@@ -328,14 +326,16 @@ const router = createRouter({
 		{
 			path: '/lists/:listId',
 			name: 'list.index',
-			beforeEnter(to) {
+			redirect(to) {
 				// Redirect the user to list view by default
 
 				const savedListView = getListView(to.params.listId)
 				console.debug('Replaced list view with', savedListView)
 
 				return {
-					name: savedListView,
+					name:  router.hasRoute(savedListView)
+						? savedListView
+						: 'list.list',
 					params: {listId: to.params.listId},
 				}
 			},
@@ -344,33 +344,29 @@ const router = createRouter({
 			path: '/lists/:listId/list',
 			name: 'list.list',
 			component: ListList,
-			props: route => ({
-				listId: parseInt(route.params.listId),
-			}),
+			beforeEnter: (to) => saveListView(to.params.listId, to.name),
+			props: route => ({ listId: parseInt(route.params.listId) }),
 		},
 		{
 			path: '/lists/:listId/gantt',
 			name: 'list.gantt',
 			component: ListGantt,
-			props: route => ({
-				listId: parseInt(route.params.listId),
-			}),
+			beforeEnter: (to) => saveListView(to.params.listId, to.name),
+			props: route => ({ listId: parseInt(route.params.listId) }),
 		},
 		{
 			path: '/lists/:listId/table',
 			name: 'list.table',
 			component: ListTable,
-			props: route => ({
-				listId: parseInt(route.params.listId),
-			}),
+			beforeEnter: (to) => saveListView(to.params.listId, to.name),
+			props: route => ({ listId: parseInt(route.params.listId) }),
 		},
 		{
 			path: '/lists/:listId/kanban',
 			name: 'list.kanban',
 			component: ListKanban,
-			props: route => ({
-				listId: parseInt(route.params.listId),
-			}),
+			beforeEnter: (to) => saveListView(to.params.listId, to.name),
+			props: route => ({ listId: parseInt(route.params.listId) }),
 		},
 		{
 			path: '/teams',
diff --git a/src/views/list/ListWrapper.vue b/src/views/list/ListWrapper.vue
index 7543d991f..826d59519 100644
--- a/src/views/list/ListWrapper.vue
+++ b/src/views/list/ListWrapper.vue
@@ -59,7 +59,6 @@ import {store} from '@/store'
 import {CURRENT_LIST} from '@/store/mutation-types'
 
 import {getListTitle} from '@/helpers/getListTitle'
-import {saveListView} from '@/helpers/saveListView'
 import {saveListToHistory} from '@/modules/listHistory'
 import { useTitle } from '@/composables/useTitle'
 
@@ -76,10 +75,6 @@ const props = defineProps({
 
 const route = useRoute()
 
-// Save the current list view to local storage
-// We use local storage and not vuex here to make it persistent across reloads.
-saveListView(props.listId, props.viewName)
-
 const listService = shallowRef(new ListService())
 const loadedListId = ref(0)
 
-- 
2.40.1


From e6e8a9851446fb3523b4e31799a9d44c76f14d7a Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sat, 11 Dec 2021 14:51:39 +0100
Subject: [PATCH 19/54] fix: don't set defined values for search and page

---
 src/composables/taskList.js | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/composables/taskList.js b/src/composables/taskList.js
index bffc576e4..e80c5cbe1 100644
--- a/src/composables/taskList.js
+++ b/src/composables/taskList.js
@@ -13,15 +13,6 @@ export const getDefaultParams = () => ({
 	filter_concat: 'and',
 })
 
-
-const filters = {
-	done: {
-		value: false,
-		comparator: 'equals',
-		concat: 'and',
-	},
-}
-
 const SORT_BY_DEFAULT = {
 	id: 'desc',
 }
@@ -88,9 +79,13 @@ export function useTaskList(listId) {
 
 	const route = useRoute()
 	watch(() => route.query, (query) => {
-		const { page: pageQuery, search: searchQuery } = query
-		search.value = searchQuery
-		page.value = pageQuery
+		const { page: pageQueryValue, search: searchQuery } = query
+		if (searchQuery !== undefined) {
+			search.value = searchQuery
+		}
+		if (pageQueryValue !== undefined) {
+			page.value = parseInt(pageQueryValue)
+		}
 
 	}, { immediate: true })
 
-- 
2.40.1


From 55826bb8c9cdc2dffb409e51a3fc1eed967da99b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 8 Jan 2022 15:44:33 +0100
Subject: [PATCH 20/54] fix: make sure the app is fully ready before trying to
 redirect to the login page

---
 src/components/misc/ready.vue | 13 ++++++++++++-
 src/router/index.ts           |  6 +-----
 src/store/index.js            |  3 +--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/misc/ready.vue b/src/components/misc/ready.vue
index 07ee0ffa4..fd5fe92d8 100644
--- a/src/components/misc/ready.vue
+++ b/src/components/misc/ready.vue
@@ -52,6 +52,12 @@ import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
 import {useOnline} from '@/composables/useOnline'
 
+import {useRouter, useRoute} from 'vue-router'
+import {checkAuth} from '@/router'
+
+const router = useRouter()
+const route = useRoute()
+
 const store = useStore()
 
 const ready = computed(() => store.state.vikunjaReady)
@@ -63,7 +69,12 @@ const showLoading = computed(() => !ready.value && error.value === '')
 async function load() {
 	try {
 		await store.dispatch('loadApp')
-	} catch(e: any) {
+		const redirectTo = checkAuth(route)
+		if (typeof redirectTo !== 'undefined') {
+			await router.push(redirectTo)
+		}
+		store.commit('vikunjaReady', true)
+	} catch (e: any) {
 		error.value = e
 	}
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 7b28a509c..3f999c700 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -575,11 +575,7 @@ const router = createRouter({
 	],
 })
 
-router.beforeEach((to) => {
-	return checkAuth(to)
-})
-
-function checkAuth(route: RouteLocation) {
+export function checkAuth(route: RouteLocation) {
 	const authUser = store.getters['auth/authUser']
 	const authLinkShare = store.getters['auth/authLinkShare']
 
diff --git a/src/store/index.js b/src/store/index.js
index 37c74ae8e..2b4663bff 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -136,10 +136,9 @@ export const store = createStore({
 
 			commit(CURRENT_LIST, currentList)
 		},
-		async loadApp({commit, dispatch}) {
+		async loadApp({dispatch}) {
 			await checkAndSetApiUrl(window.API_URL)
 			await dispatch('auth/checkAuth')
-			commit('vikunjaReady', true)
 		},
 	},
 })
-- 
2.40.1


From 8233c8c9539869b27faf8a28272ab9629550fb51 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 18 Jan 2022 21:51:24 +0100
Subject: [PATCH 21/54] fix: check if a shortcut has an available function
 before trying to invoke it

---
 src/components/misc/keyboard-shortcuts/index.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/misc/keyboard-shortcuts/index.vue b/src/components/misc/keyboard-shortcuts/index.vue
index 7ee08dc76..ab64740dc 100644
--- a/src/components/misc/keyboard-shortcuts/index.vue
+++ b/src/components/misc/keyboard-shortcuts/index.vue
@@ -4,9 +4,9 @@
 			<template v-for="(s, i) in shortcuts" :key="i">
 				<h3>{{ $t(s.title) }}</h3>
 
-				<message class="mb-4">
+				<message class="mb-4" v-if="s.available">
 					{{
-						s?.available($route)
+						s.available($route)
 							? $t('keyboardShortcuts.currentPageOnly')
 							: $t('keyboardShortcuts.allPages')
 					}}
@@ -37,6 +37,8 @@ import Message from '@/components/misc/message.vue'
 import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
 import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
 
+console.log('s', shortcuts)
+
 function close() {
 	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
 }
-- 
2.40.1


From c896ad58836a28e3123e7992f6112ab9d9f28f54 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 19 Jan 2022 23:07:02 +0100
Subject: [PATCH 22/54] fix: subscription prop validation linting

---
 src/components/misc/subscription.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/misc/subscription.vue b/src/components/misc/subscription.vue
index 85da59418..a07853da2 100644
--- a/src/components/misc/subscription.vue
+++ b/src/components/misc/subscription.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, PropType, shallowRef} from 'vue'
+import {computed, shallowRef} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import SubscriptionService from '@/services/subscription'
@@ -38,9 +38,10 @@ const props = defineProps({
 	},
 	subscription: {
 		required: true,
+		type: Object,
 		validator(value) {
 			return value instanceof SubscriptionModel || value === null
-		}
+		},
 	},
 	entityId: {
 		required: true,
-- 
2.40.1


From 959b53b3a670d57fbfe4b049b38b3925f1eb1b56 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 19 Jan 2022 23:16:44 +0100
Subject: [PATCH 23/54] chore: remove console.log

---
 src/components/misc/keyboard-shortcuts/index.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/misc/keyboard-shortcuts/index.vue b/src/components/misc/keyboard-shortcuts/index.vue
index ab64740dc..7b52ca8c0 100644
--- a/src/components/misc/keyboard-shortcuts/index.vue
+++ b/src/components/misc/keyboard-shortcuts/index.vue
@@ -37,8 +37,6 @@ import Message from '@/components/misc/message.vue'
 import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
 import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
 
-console.log('s', shortcuts)
-
 function close() {
 	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
 }
-- 
2.40.1


From 5867f79735d06ad8d4596c82dd59e469799124b0 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 19 Jan 2022 23:26:34 +0100
Subject: [PATCH 24/54] fix: use AsyncEditor again in comments and description

---
 src/components/tasks/partials/comments.vue    | 4 ++--
 src/components/tasks/partials/description.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index 4aab00988..23105771b 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -152,7 +152,7 @@
 </template>
 
 <script>
-import Editor from '@/components/input/editor.vue'
+import AsyncEditor from '@/components/input/AsyncEditor'
 
 import TaskCommentService from '../../../services/taskComment'
 import TaskCommentModel from '../../../models/taskComment'
@@ -162,7 +162,7 @@ import {mapState} from 'vuex'
 export default {
 	name: 'comments',
 	components: {
-		Editor,
+		Editor: AsyncEditor,
 	},
 	props: {
 		taskId: {
diff --git a/src/components/tasks/partials/description.vue b/src/components/tasks/partials/description.vue
index e3e8fe71b..07d136fde 100644
--- a/src/components/tasks/partials/description.vue
+++ b/src/components/tasks/partials/description.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import Editor from '@/components/input/editor.vue'
+import AsyncEditor from '@/components/input/AsyncEditor'
 
 import {LOADING} from '@/store/mutation-types'
 import {mapState} from 'vuex'
@@ -38,7 +38,7 @@ import {mapState} from 'vuex'
 export default {
 	name: 'description',
 	components: {
-		Editor,
+		Editor: AsyncEditor,
 	},
 	data() {
 		return {
-- 
2.40.1


From e6eb48b5afe1e4a663f1c78a113014549732d42d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 13:07:08 +0100
Subject: [PATCH 25/54] fix(tests): wait until namespaces are loaded before
 checking if the history is present

---
 cypress/integration/list/list-history.spec.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/cypress/integration/list/list-history.spec.js b/cypress/integration/list/list-history.spec.js
index 391668421..975de17dc 100644
--- a/cypress/integration/list/list-history.spec.js
+++ b/cypress/integration/list/list-history.spec.js
@@ -4,6 +4,8 @@ import '../../support/authenticateUser'
 
 describe('List History', () => {
 	it('should show a list history on the home page', () => {
+		cy.intercept(Cypress.env('API_URL') + '/namespaces*').as('loadNamespaces')
+		
 		const lists = ListFactory.create(6)
 
 		cy.visit('/')
@@ -12,13 +14,21 @@ describe('List History', () => {
 			.should('not.exist')
 
 		cy.visit(`/lists/${lists[0].id}`)
+		cy.wait('@loadNamespaces')
 		cy.visit(`/lists/${lists[1].id}`)
+		cy.wait('@loadNamespaces')
 		cy.visit(`/lists/${lists[2].id}`)
+		cy.wait('@loadNamespaces')
 		cy.visit(`/lists/${lists[3].id}`)
+		cy.wait('@loadNamespaces')
 		cy.visit(`/lists/${lists[4].id}`)
+		cy.wait('@loadNamespaces')
 		cy.visit(`/lists/${lists[5].id}`)
+		cy.wait('@loadNamespaces')
 
 		cy.visit('/')
+		cy.wait('@loadNamespaces')
+		
 		cy.get('h3')
 			.contains('Last viewed')
 			.should('exist')
-- 
2.40.1


From 3212bc8e8684a65fe1308b7777426347bde0d8f7 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 14:00:14 +0100
Subject: [PATCH 26/54] fix(tests): add more waits for namespaces loaded

---
 cypress/integration/list/list-history.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cypress/integration/list/list-history.spec.js b/cypress/integration/list/list-history.spec.js
index 975de17dc..57e802148 100644
--- a/cypress/integration/list/list-history.spec.js
+++ b/cypress/integration/list/list-history.spec.js
@@ -9,6 +9,7 @@ describe('List History', () => {
 		const lists = ListFactory.create(6)
 
 		cy.visit('/')
+		cy.wait('@loadNamespaces')
 		cy.get('h3')
 			.contains('Last viewed')
 			.should('not.exist')
-- 
2.40.1


From 6c1857b133aa5d9702b47ed64ee506eccf3bfd9b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 14:03:50 +0100
Subject: [PATCH 27/54] fix(tests): assert absence of last viewed headline more
 precisely

---
 cypress/integration/list/list-history.spec.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/list/list-history.spec.js b/cypress/integration/list/list-history.spec.js
index 57e802148..27a2a8c18 100644
--- a/cypress/integration/list/list-history.spec.js
+++ b/cypress/integration/list/list-history.spec.js
@@ -10,9 +10,8 @@ describe('List History', () => {
 
 		cy.visit('/')
 		cy.wait('@loadNamespaces')
-		cy.get('h3')
-			.contains('Last viewed')
-			.should('not.exist')
+		cy.get('body')
+			.should('not.contain', 'Last viewed')
 
 		cy.visit(`/lists/${lists[0].id}`)
 		cy.wait('@loadNamespaces')
-- 
2.40.1


From 6ab7aac5ce832788f02d8ecac58814e0f31d55b4 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 14:10:46 +0100
Subject: [PATCH 28/54] fix(tests): wait until lists are loaded

---
 cypress/integration/list/list-history.spec.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/cypress/integration/list/list-history.spec.js b/cypress/integration/list/list-history.spec.js
index 27a2a8c18..3a488e64c 100644
--- a/cypress/integration/list/list-history.spec.js
+++ b/cypress/integration/list/list-history.spec.js
@@ -5,6 +5,7 @@ import '../../support/authenticateUser'
 describe('List History', () => {
 	it('should show a list history on the home page', () => {
 		cy.intercept(Cypress.env('API_URL') + '/namespaces*').as('loadNamespaces')
+		cy.intercept(Cypress.env('API_URL') + '/lists/*').as('loadList')
 		
 		const lists = ListFactory.create(6)
 
@@ -15,16 +16,22 @@ describe('List History', () => {
 
 		cy.visit(`/lists/${lists[0].id}`)
 		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
 		cy.visit(`/lists/${lists[1].id}`)
 		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
 		cy.visit(`/lists/${lists[2].id}`)
 		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
 		cy.visit(`/lists/${lists[3].id}`)
 		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
 		cy.visit(`/lists/${lists[4].id}`)
 		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
 		cy.visit(`/lists/${lists[5].id}`)
 		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
 
 		cy.visit('/')
 		cy.wait('@loadNamespaces')
-- 
2.40.1


From 05350affad3ba0165a6e6518d5c6fd62bedc776f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 14:37:41 +0100
Subject: [PATCH 29/54] fix(tests): don't assert for h3 anymore

---
 cypress/integration/list/list-history.spec.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/list/list-history.spec.js b/cypress/integration/list/list-history.spec.js
index 3a488e64c..36b74ad4f 100644
--- a/cypress/integration/list/list-history.spec.js
+++ b/cypress/integration/list/list-history.spec.js
@@ -36,9 +36,8 @@ describe('List History', () => {
 		cy.visit('/')
 		cy.wait('@loadNamespaces')
 		
-		cy.get('h3')
-			.contains('Last viewed')
-			.should('exist')
+		cy.get('body')
+			.should('contain', 'Last viewed')
 		cy.get('.list-cards-wrapper-2-rows')
 			.should('not.contain', lists[0].title)
 			.should('contain', lists[1].title)
-- 
2.40.1


From 3f893fb16d6c2afd786daced70f3eb9fb47c273d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 15:25:34 +0100
Subject: [PATCH 30/54] fix(tests): don't visit / directly but use navigation
 instead

---
 cypress/integration/list/list-history.spec.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/list/list-history.spec.js b/cypress/integration/list/list-history.spec.js
index 36b74ad4f..ba8d69e06 100644
--- a/cypress/integration/list/list-history.spec.js
+++ b/cypress/integration/list/list-history.spec.js
@@ -33,8 +33,12 @@ describe('List History', () => {
 		cy.wait('@loadNamespaces')
 		cy.wait('@loadList')
 
-		cy.visit('/')
-		cy.wait('@loadNamespaces')
+		// cy.visit('/')
+		// cy.wait('@loadNamespaces')
+		// Not using cy.visit here to work around the redirect issue fixed in #1337
+		cy.get('nav.menu.top-menu a')
+			.contains('Overview')
+			.click()
 		
 		cy.get('body')
 			.should('contain', 'Last viewed')
-- 
2.40.1


From 24b7821c5027b1f22cc23b7535c0c5ee992db571 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 30 Jan 2022 13:40:14 +0100
Subject: [PATCH 31/54] fix: ts errors in subscription

---
 .../list/list-settings-dropdown.vue           | 52 ++++++++-----------
 src/components/misc/subscription.vue          | 33 ++++--------
 .../namespace/namespace-settings-dropdown.vue |  1 +
 src/views/tasks/TaskDetailView.vue            |  1 +
 4 files changed, 36 insertions(+), 51 deletions(-)

diff --git a/src/components/list/list-settings-dropdown.vue b/src/components/list/list-settings-dropdown.vue
index 3219c01de..b8a9082b9 100644
--- a/src/components/list/list-settings-dropdown.vue
+++ b/src/components/list/list-settings-dropdown.vue
@@ -56,6 +56,7 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
+				v-if="subscription"
 				class="dropdown-item has-no-shadow"
 				:is-button="false"
 				entity="list"
@@ -74,39 +75,32 @@
 	</dropdown>
 </template>
 
-<script>
+<script setup lang="ts">
+import {ref, computed, watchEffect} from 'vue'
+import {useStore} from 'vuex'
+
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
+import ListModel from '@/models/list'
+import SubscriptionModel from '@/models/subscription'
 
-export default {
-	name: 'list-settings-dropdown',
-	data() {
-		return {
-			subscription: null,
-		}
+const props = defineProps({
+	list: {
+		type: ListModel,
+		required: true,
 	},
-	components: {
-		TaskSubscription,
-		DropdownItem,
-		Dropdown,
-	},
-	props: {
-		list: {
-			required: true,
-		},
-	},
-	mounted() {
-		this.subscription = this.list.subscription
-	},
-	computed: {
-		backgroundsEnabled() {
-			return this.$store.state.config.enabledBackgroundProviders?.length > 0
-		},
-		isSavedFilter() {
-			return getSavedFilterIdFromListId(this.list.id) > 0
-		},
-	},
-}
+})
+
+const subscription = ref<SubscriptionModel>()
+watchEffect(() => {
+	if (props.list.subscription) {
+		subscription.value = props.list.subscription
+	}
+})
+
+const store = useStore()
+const backgroundsEnabled = computed(() => store.state.config.enabledBackgroundProviders?.length > 0)
+const isSavedFilter = computed(() => getSavedFilterIdFromListId(props.list.id) > 0)
 </script>
diff --git a/src/components/misc/subscription.vue b/src/components/misc/subscription.vue
index a141d44b2..c00d6271c 100644
--- a/src/components/misc/subscription.vue
+++ b/src/components/misc/subscription.vue
@@ -1,19 +1,19 @@
 <template>
 	<x-button
+		v-if="isButton"
 		variant="secondary"
 		:icon="iconName"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:disabled="disabled || null"
-		v-if="isButton"
 	>
 		{{ buttonText }}
 	</x-button>
 	<a
+		v-else
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:class="{'is-disabled': disabled}"
-		v-else
 	>
 		<span class="icon">
 			<icon :icon="iconName"/>
@@ -31,26 +31,15 @@ import SubscriptionModel from '@/models/subscription'
 
 import {success} from '@/message'
 
-const props = defineProps({
-	entity: {
-		required: true,
-		type: String,
-	},
-	subscription: {
-		required: true,
-		type: Object,
-		validator(value) {
-			return value instanceof SubscriptionModel || value === null
-		},
-	},
-	entityId: {
-		required: true,
-		type: Number,
-	},
-	isButton: {
-		type: Boolean,
-		default: true,
-	},
+interface Props {
+  entity: string
+  entityId: number
+  subscription: SubscriptionModel
+  isButton: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	isButton: true,
 })
 
 const subscriptionEntity = computed<string>(() => props.subscription.entity)
diff --git a/src/components/namespace/namespace-settings-dropdown.vue b/src/components/namespace/namespace-settings-dropdown.vue
index 9651c5b2c..3359fed95 100644
--- a/src/components/namespace/namespace-settings-dropdown.vue
+++ b/src/components/namespace/namespace-settings-dropdown.vue
@@ -34,6 +34,7 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
+				v-if="subscription"
 				class="dropdown-item has-no-shadow"
 				:is-button="false"
 				entity="namespace"
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 104632e6e..96ee95d9f 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -263,6 +263,7 @@
 							{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
 						</x-button>
 						<task-subscription
+							v-if="subscription"
 							entity="task"
 							:entity-id="task.id"
 							:subscription="task.subscription"
-- 
2.40.1


From 187e62a7ec504257af03eee732eb63b6ba6a7d5c Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 30 Jan 2022 13:40:34 +0100
Subject: [PATCH 32/54] feat: make subscription a BaseButton

---
 src/components/misc/subscription.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/misc/subscription.vue b/src/components/misc/subscription.vue
index c00d6271c..8288bd038 100644
--- a/src/components/misc/subscription.vue
+++ b/src/components/misc/subscription.vue
@@ -9,7 +9,7 @@
 	>
 		{{ buttonText }}
 	</x-button>
-	<a
+	<BaseButton
 		v-else
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
@@ -19,13 +19,15 @@
 			<icon :icon="iconName"/>
 		</span>
 		{{ buttonText }}
-	</a>
+	</BaseButton>
 </template>
 
 <script lang="ts" setup>
 import {computed, shallowRef} from 'vue'
 import {useI18n} from 'vue-i18n'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 import SubscriptionService from '@/services/subscription'
 import SubscriptionModel from '@/models/subscription'
 
-- 
2.40.1


From 57965b1ea3869f9735db13e5715560793eadde9b Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 30 Jan 2022 14:05:26 +0100
Subject: [PATCH 33/54] fix: keyboard-shortcuts typing

---
 .../misc/keyboard-shortcuts/index.vue          |  5 +++--
 .../{shortcuts.js => shortcuts.ts}             | 18 ++++++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)
 rename src/components/misc/keyboard-shortcuts/{shortcuts.js => shortcuts.ts} (81%)

diff --git a/src/components/misc/keyboard-shortcuts/index.vue b/src/components/misc/keyboard-shortcuts/index.vue
index 7b52ca8c0..eb293029f 100644
--- a/src/components/misc/keyboard-shortcuts/index.vue
+++ b/src/components/misc/keyboard-shortcuts/index.vue
@@ -19,7 +19,7 @@
 							class="shortcut-keys"
 							is="dd"
 							:keys="sc.keys"
-							:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"
+							:combination="sc.combination && $t(`keyboardShortcuts.${sc.combination}`)"
 						/>
 					</template>
 				</dl>
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import {store} from '@/store'
+import {useStore} from 'vuex'
 
 import Shortcut from '@/components/misc/shortcut.vue'
 import Message from '@/components/misc/message.vue'
@@ -37,6 +37,7 @@ import Message from '@/components/misc/message.vue'
 import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
 import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
 
+const store = useStore()
 function close() {
 	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
 }
diff --git a/src/components/misc/keyboard-shortcuts/shortcuts.js b/src/components/misc/keyboard-shortcuts/shortcuts.ts
similarity index 81%
rename from src/components/misc/keyboard-shortcuts/shortcuts.js
rename to src/components/misc/keyboard-shortcuts/shortcuts.ts
index 06a3426c9..f68b7c354 100644
--- a/src/components/misc/keyboard-shortcuts/shortcuts.js
+++ b/src/components/misc/keyboard-shortcuts/shortcuts.ts
@@ -1,8 +1,22 @@
+import {RouteLocation} from 'vue-router'
+
 import {isAppleDevice} from '@/helpers/isAppleDevice'
 
 const ctrl = isAppleDevice() ? '⌘' : 'ctrl'
 
-export const KEYBOARD_SHORTCUTS = [
+interface Shortcut {
+	title: string
+	keys: string[]
+	combination?: 'then'
+}
+
+interface ShortcutGroup {
+	title: string
+	available?: (route: RouteLocation) => boolean
+	shortcuts: Shortcut[]
+}
+
+export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 	{
 		title: 'keyboardShortcuts.general',
 		shortcuts: [
@@ -28,7 +42,7 @@ export const KEYBOARD_SHORTCUTS = [
 	},
 	{
 		title: 'keyboardShortcuts.list.title',
-		available: (route) => route.name.startsWith('list.'),
+		available: (route) => (route.name as string)?.startsWith('list.'),
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.list.switchToListView',
-- 
2.40.1


From a9fb24aa35239be38f255f7eae019519a496b345 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 30 Jan 2022 14:05:39 +0100
Subject: [PATCH 34/54] fix: currentList typing

---
 src/store/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/store/index.js b/src/store/index.js
index 37c74ae8e..9eb532983 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -37,7 +37,10 @@ export const store = createStore({
 		loading: false,
 		loadingModule: null,
 		// This is used to highlight the current list in menu for all list related views
-		currentList: {id: 0},
+		currentList: {
+			id: 0,
+			isArchived: false,
+		},
 		background: '',
 		hasTasks: false,
 		menuActive: true,
-- 
2.40.1


From 98b41a22c6824b069f4b1d7e7609e128ba13d240 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 30 Jan 2022 14:05:52 +0100
Subject: [PATCH 35/54] fix: improve ListModel typing

---
 src/models/list.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/models/list.js b/src/models/list.js
index b5a08e814..3f6b08734 100644
--- a/src/models/list.js
+++ b/src/models/list.js
@@ -5,6 +5,22 @@ import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import SubscriptionModel from '@/models/subscription'
 
 export default class ListModel extends AbstractModel {
+	id = 0
+	title = ''
+	description = ''
+	owner = UserModel
+	tasks = []
+	namespaceId = 0
+	isArchived = false
+	hexColor = ''
+	identifier = ''
+	backgroundInformation = null
+	isFavorite = false
+	subscription = null
+	position = 0
+
+	created = null
+	updated = null
 
 	constructor(data) {
 		super(data)
-- 
2.40.1


From de3c47dc69fa0c80f83004eab1f6bd455cb4ea9e Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 30 Jan 2022 16:47:23 +0100
Subject: [PATCH 36/54] fix ts errors in various files

---
 src/components/home/contentAuth.vue      |  6 ++---
 src/composables/useTitle.ts              |  4 ++--
 src/helpers/{setTitle.js => setTitle.ts} |  2 +-
 src/models/attachment.js                 |  6 +++++
 src/models/subscription.js               |  6 +++++
 src/models/task.js                       |  6 ++++-
 src/router/index.ts                      | 10 ++++----
 src/store/index.js                       |  6 +++--
 src/types/vue-flatpickr-component.d.ts   |  1 +
 src/views/list/ListTable.vue             | 30 +++++++++++++++++++-----
 src/views/list/ListWrapper.vue           |  1 +
 11 files changed, 58 insertions(+), 20 deletions(-)
 rename src/helpers/{setTitle.js => setTitle.ts} (65%)
 create mode 100644 src/types/vue-flatpickr-component.d.ts

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 3136b09b6..276ddb6f0 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import {watch, computed, shallowRef, watchEffect, h} from 'vue'
+import {watch, computed, shallowRef, watchEffect, VNode, h} from 'vue'
 import {useStore} from 'vuex'
 import {useRoute, useRouter} from 'vue-router'
 import {useEventListener} from '@vueuse/core'
@@ -66,12 +66,12 @@ function useRouteWithModal() {
 		}
 	})
 
-	const currentModal = shallowRef(null)
+	const currentModal = shallowRef<VNode>()
 	watchEffect(() => {
 		const hasBackdropView = historyState.value.backdropView
 
 		if (!hasBackdropView) {
-			currentModal.value = null
+			currentModal.value = undefined
 			return
 		}
 
diff --git a/src/composables/useTitle.ts b/src/composables/useTitle.ts
index e35448290..84aaa177f 100644
--- a/src/composables/useTitle.ts
+++ b/src/composables/useTitle.ts
@@ -1,9 +1,9 @@
 import { computed, watchEffect } from 'vue'
 import { setTitle } from '@/helpers/setTitle'
 
-import { ComputedGetter, ComputedRef } from '@vue/reactivity'
+import { ComputedGetter } from '@vue/reactivity'
 
-export function useTitle<T>(titleGetter: ComputedGetter<T>) : ComputedRef<T> {
+export function useTitle(titleGetter: ComputedGetter<string>) {
 	const titleRef = computed(titleGetter)
 
 	watchEffect(() => setTitle(titleRef.value))
diff --git a/src/helpers/setTitle.js b/src/helpers/setTitle.ts
similarity index 65%
rename from src/helpers/setTitle.js
rename to src/helpers/setTitle.ts
index a2f31a452..d7e6b5dd0 100644
--- a/src/helpers/setTitle.js
+++ b/src/helpers/setTitle.ts
@@ -1,4 +1,4 @@
-export function setTitle(title) {
+export function setTitle(title : undefined | string) {
 	document.title = (typeof title === 'undefined' || title === '')
 		? 'Vikunja'
 		: `${title} | Vikunja`
diff --git a/src/models/attachment.js b/src/models/attachment.js
index e1ee9aa83..655ed3a30 100644
--- a/src/models/attachment.js
+++ b/src/models/attachment.js
@@ -3,6 +3,12 @@ import UserModel from './user'
 import FileModel from './file'
 
 export default class AttachmentModel extends AbstractModel {
+	id = 0
+	taskId = 0
+	file = FileModel
+	createdBy = UserModel
+	created = null
+
 	constructor(data) {
 		super(data)
 		this.createdBy = new UserModel(this.createdBy)
diff --git a/src/models/subscription.js b/src/models/subscription.js
index 68d0be855..e580545e4 100644
--- a/src/models/subscription.js
+++ b/src/models/subscription.js
@@ -2,6 +2,12 @@ import AbstractModel from '@/models/abstractModel'
 import UserModel from '@/models/user'
 
 export default class SubscriptionModel extends AbstractModel {
+	id = 0
+	entity = ''
+	entityId = 0
+	created = null
+	user = UserModel
+
 	constructor(data) {
 		super(data)
 		this.user = new UserModel(this.user)
diff --git a/src/models/task.js b/src/models/task.js
index c03342370..1f2e4b130 100644
--- a/src/models/task.js
+++ b/src/models/task.js
@@ -10,7 +10,11 @@ import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 const SUPPORTS_TRIGGERED_NOTIFICATION = 'Notification' in window && 'showTrigger' in Notification.prototype
 
 export default class TaskModel extends AbstractModel {
-
+	index = 0
+	done = false
+	priority = 0
+	percentDone = 0
+	
 	defaultColor = '198CFF'
 
 	constructor(data) {
diff --git a/src/router/index.ts b/src/router/index.ts
index 7631e171d..abeed38b3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -243,7 +243,7 @@ const router = createRouter({
 			path: '/tasks/:id',
 			name: 'task.detail',
 			component: TaskDetailViewModal,
-			props: route => ({ taskId: parseInt(route.params.id) }),
+			props: route => ({ taskId: parseInt(route.params.id as string) }),
 		},
 		{
 			path: '/tasks/by/upcoming',
@@ -344,28 +344,28 @@ const router = createRouter({
 			name: 'list.list',
 			component: ListList,
 			beforeEnter: (to) => saveListView(to.params.listId, to.name),
-			props: route => ({ listId: parseInt(route.params.listId) }),
+			props: route => ({ listId: parseInt(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/gantt',
 			name: 'list.gantt',
 			component: ListGantt,
 			beforeEnter: (to) => saveListView(to.params.listId, to.name),
-			props: route => ({ listId: parseInt(route.params.listId) }),
+			props: route => ({ listId: parseInt(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/table',
 			name: 'list.table',
 			component: ListTable,
 			beforeEnter: (to) => saveListView(to.params.listId, to.name),
-			props: route => ({ listId: parseInt(route.params.listId) }),
+			props: route => ({ listId: parseInt(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/kanban',
 			name: 'list.kanban',
 			component: ListKanban,
 			beforeEnter: (to) => saveListView(to.params.listId, to.name),
-			props: route => ({ listId: parseInt(route.params.listId) }),
+			props: route => ({ listId: parseInt(route.params.listId as string) }),
 		},
 		{
 			path: '/teams',
diff --git a/src/store/index.js b/src/store/index.js
index 9eb532983..01891b2c6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -18,6 +18,8 @@ import lists from './modules/lists'
 import attachments from './modules/attachments'
 import labels from './modules/labels'
 
+import ListModel from '@/models/list'
+
 import ListService from '../services/list'
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
@@ -37,10 +39,10 @@ export const store = createStore({
 		loading: false,
 		loadingModule: null,
 		// This is used to highlight the current list in menu for all list related views
-		currentList: {
+		currentList: new ListModel({
 			id: 0,
 			isArchived: false,
-		},
+		}),
 		background: '',
 		hasTasks: false,
 		menuActive: true,
diff --git a/src/types/vue-flatpickr-component.d.ts b/src/types/vue-flatpickr-component.d.ts
new file mode 100644
index 000000000..2ac9cc87f
--- /dev/null
+++ b/src/types/vue-flatpickr-component.d.ts
@@ -0,0 +1 @@
+declare module 'vue-flatpickr-component';
\ No newline at end of file
diff --git a/src/views/list/ListTable.vue b/src/views/list/ListTable.vue
index e23ede692..6f07a4976 100644
--- a/src/views/list/ListTable.vue
+++ b/src/views/list/ListTable.vue
@@ -180,7 +180,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRef, computed } from 'vue'
+import { toRef, computed, Ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useStorage } from '@vueuse/core'
@@ -198,6 +198,7 @@ import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup.vue'
 
 import { useTaskList } from '@/composables/taskList'
+import TaskModel from '@/models/task'
 
 const ACTIVE_COLUMNS_DEFAULT = {
 	id: true,
@@ -222,20 +223,37 @@ const props = defineProps({
 	},
 })
 
-const SORT_BY_DEFAULT = {
+type Order = 'asc' | 'desc' | 'none'
+
+interface SortBy {
+	id : Order
+	done? : Order 
+	title? : Order 
+	priority? : Order 
+	due_date? : Order 
+	start_date? : Order 
+	end_date? : Order 
+	percent_done? : Order 
+	created? : Order 
+	updated? : Order 
+}
+
+const SORT_BY_DEFAULT : SortBy = {
 	id: 'desc',
 }
 
 const activeColumns = useStorage('tableViewColumns', { ...ACTIVE_COLUMNS_DEFAULT })
-const sortBy = useStorage('tableViewSortBy', { ...SORT_BY_DEFAULT })
+const sortBy = useStorage<SortBy>('tableViewSortBy', { ...SORT_BY_DEFAULT })
+
+const taskList = useTaskList(toRef(props, 'listId'))
 
 const {
-	tasks,
 	loading,
 	params,
 	totalPages,
 	currentPage,
-} = useTaskList(toRef(props, 'listId'))
+} = taskList
+const tasks : Ref<TaskModel[]> = taskList.tasks
 
 Object.assign(params.value, {
 	filter_by: [],
@@ -244,7 +262,7 @@ Object.assign(params.value, {
 })
 
 // FIXME: by doing this we can have multiple sort orders
-function sort(property) {
+function sort(property : keyof SortBy) {
 	const order = sortBy.value[property]
 	if (typeof order === 'undefined' || order === 'none') {
 		sortBy.value[property] = 'desc'
diff --git a/src/views/list/ListWrapper.vue b/src/views/list/ListWrapper.vue
index 826d59519..d816b90e8 100644
--- a/src/views/list/ListWrapper.vue
+++ b/src/views/list/ListWrapper.vue
@@ -83,6 +83,7 @@ const currentList = computed(() => {
 		id: 0,
 		title: '',
 		isArchived: false,
+		maxRight: null,
 	} : store.state.currentList
 })
 
-- 
2.40.1


From 6894024ad43931cad49efbdf006b7c66d585e32c Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 30 Jan 2022 16:48:02 +0100
Subject: [PATCH 37/54] fix: use to.hash for returned element

---
 src/router/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index abeed38b3..fee8fdfa0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -81,7 +81,7 @@ const router = createRouter({
 
 		// Scroll to anchor should still work
 		if (to.hash) {
-			return {el: document.getElementById(to.hash.slice(1))}
+			return {el: to.hash}
 		}
 
 		// Otherwise just scroll to the top
-- 
2.40.1


From 8937b423219bc450775b752ccec7e9957f2690c0 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 30 Jan 2022 16:48:36 +0100
Subject: [PATCH 38/54] feat: improve Sort component

---
 src/components/tasks/partials/sort.vue | 27 +++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/tasks/partials/sort.vue b/src/components/tasks/partials/sort.vue
index c3581ba59..4eeb5e9f6 100644
--- a/src/components/tasks/partials/sort.vue
+++ b/src/components/tasks/partials/sort.vue
@@ -1,20 +1,21 @@
 <template>
-	<a @click="$emit('click')">
+	<BaseButton>
 		<icon icon="sort-up" v-if="order === 'asc'"/>
-		<icon icon="sort-up" rotation="180" v-else-if="order === 'desc'"/>
+		<icon icon="sort-up" v-else-if="order === 'desc'" rotation="180"/>
 		<icon icon="sort" v-else/>
-	</a>
+	</BaseButton>
 </template>
 
-<script>
-export default {
-	name: 'sort',
-	props: {
-		order: {
-			type: String,
-			default: 'none',
-		},
+<script setup lang="ts">
+import {PropType} from 'vue'
+import BaseButton from '@/components/base/BaseButton.vue'
+
+type Order = 'asc' | 'desc' | 'none'
+
+defineProps({
+	order: {
+		type: String as PropType<Order>,
+		default: 'none',
 	},
-	emits: ['click'],
-}
+})
 </script>
-- 
2.40.1


From 6ff621ada174bdf0ce52272714e08283ef366230 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 30 Jan 2022 16:58:59 +0100
Subject: [PATCH 39/54] chore: ignore wrong second argument argument for cause

see: https://github.com/tc39/proposal-error-cause
---
 src/helpers/auth.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/helpers/auth.ts b/src/helpers/auth.ts
index b073a8caf..81cd55806 100644
--- a/src/helpers/auth.ts
+++ b/src/helpers/auth.ts
@@ -53,6 +53,7 @@ export async function refreshToken(persist: boolean): Promise<AxiosResponse> {
 		return response
 
 	} catch(e) {
+		// @ts-ignore
 		throw new Error('Error renewing token: ', { cause: e })
 	}
 }
-- 
2.40.1


From a325e4b721ddee156ae6c7ca9dca414b36f3fdaa Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 30 Jan 2022 16:35:03 +0100
Subject: [PATCH 40/54] feat: use es2022 for @typescript-eslint/parser

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5afb88de8..06143399c 100644
--- a/package.json
+++ b/package.json
@@ -130,7 +130,7 @@
     "parser": "vue-eslint-parser",
     "parserOptions": {
       "parser": "@typescript-eslint/parser",
-      "ecmaVersion": 2021
+      "ecmaVersion": 2022
     },
     "ignorePatterns": [
       "*.test.*",
-- 
2.40.1


From 0bd235cea37678aba52eb1d74d43d23d1f266dc2 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 30 Jan 2022 17:24:38 +0100
Subject: [PATCH 41/54] fix: expose configureCompat types

see: https://github.com/vuejs/docs/pull/1475
---
 src/types/shims-vue.d.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/types/shims-vue.d.ts b/src/types/shims-vue.d.ts
index 4f0571df7..c04ff091d 100644
--- a/src/types/shims-vue.d.ts
+++ b/src/types/shims-vue.d.ts
@@ -1,8 +1,11 @@
 declare module 'vue' {
 	import { CompatVue } from '@vue/runtime-dom'
 	const Vue: CompatVue
-  export default Vue
-  export * from '@vue/runtime-dom'
+	export default Vue
+	export * from '@vue/runtime-dom'
+
+	const { configureCompat } = Vue
+	export { configureCompat }
 }
 
 // https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#typescript-support
-- 
2.40.1


From 8f04b10e089bd73bc2b98569fe3d353fb43f1851 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 20:15:53 +0100
Subject: [PATCH 42/54] Revert "fix: improve ListModel typing"

This reverts commit 98b41a22c6824b069f4b1d7e7609e128ba13d240.
---
 src/models/list.js | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/models/list.js b/src/models/list.js
index 3f6b08734..b5a08e814 100644
--- a/src/models/list.js
+++ b/src/models/list.js
@@ -5,22 +5,6 @@ import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import SubscriptionModel from '@/models/subscription'
 
 export default class ListModel extends AbstractModel {
-	id = 0
-	title = ''
-	description = ''
-	owner = UserModel
-	tasks = []
-	namespaceId = 0
-	isArchived = false
-	hexColor = ''
-	identifier = ''
-	backgroundInformation = null
-	isFavorite = false
-	subscription = null
-	position = 0
-
-	created = null
-	updated = null
 
 	constructor(data) {
 		super(data)
-- 
2.40.1


From 2a819eccb48cc41bece2d9cadec31b8f56e72399 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 20:18:34 +0100
Subject: [PATCH 43/54] revert: model properties

partially reverts de3c47dc69fa0c80f83004eab1f6bd455cb4ea9e
---
 src/models/attachment.js   | 6 ------
 src/models/subscription.js | 6 ------
 src/models/task.js         | 7 -------
 3 files changed, 19 deletions(-)

diff --git a/src/models/attachment.js b/src/models/attachment.js
index 655ed3a30..e1ee9aa83 100644
--- a/src/models/attachment.js
+++ b/src/models/attachment.js
@@ -3,12 +3,6 @@ import UserModel from './user'
 import FileModel from './file'
 
 export default class AttachmentModel extends AbstractModel {
-	id = 0
-	taskId = 0
-	file = FileModel
-	createdBy = UserModel
-	created = null
-
 	constructor(data) {
 		super(data)
 		this.createdBy = new UserModel(this.createdBy)
diff --git a/src/models/subscription.js b/src/models/subscription.js
index e580545e4..68d0be855 100644
--- a/src/models/subscription.js
+++ b/src/models/subscription.js
@@ -2,12 +2,6 @@ import AbstractModel from '@/models/abstractModel'
 import UserModel from '@/models/user'
 
 export default class SubscriptionModel extends AbstractModel {
-	id = 0
-	entity = ''
-	entityId = 0
-	created = null
-	user = UserModel
-
 	constructor(data) {
 		super(data)
 		this.user = new UserModel(this.user)
diff --git a/src/models/task.js b/src/models/task.js
index 1f2e4b130..638396898 100644
--- a/src/models/task.js
+++ b/src/models/task.js
@@ -10,13 +10,6 @@ import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 const SUPPORTS_TRIGGERED_NOTIFICATION = 'Notification' in window && 'showTrigger' in Notification.prototype
 
 export default class TaskModel extends AbstractModel {
-	index = 0
-	done = false
-	priority = 0
-	percentDone = 0
-	
-	defaultColor = '198CFF'
-
 	constructor(data) {
 		super(data)
 
-- 
2.40.1


From 9995abf64cc5c69496d55308435c143d00356c1e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 22:11:21 +0100
Subject: [PATCH 45/54] fix: mark broken test as skipped

---
 cypress/integration/list/list-history.spec.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/list/list-history.spec.js b/cypress/integration/list/list-history.spec.js
index ba8d69e06..f6ff5b034 100644
--- a/cypress/integration/list/list-history.spec.js
+++ b/cypress/integration/list/list-history.spec.js
@@ -2,7 +2,10 @@ import {ListFactory} from '../../factories/list'
 
 import '../../support/authenticateUser'
 
-describe('List History', () => {
+// Skipped, because there is some kind of race condition which makes this test fail, but only in CI.
+// We have tried to debug and fix it but with no luck. Since we have a unit test for this functionality
+// anyway, it should be fine to mark this as skipped for now and fix it at some later point.
+describe.skip('List History', () => {
 	it('should show a list history on the home page', () => {
 		cy.intercept(Cypress.env('API_URL') + '/namespaces*').as('loadNamespaces')
 		cy.intercept(Cypress.env('API_URL') + '/lists/*').as('loadList')
-- 
2.40.1


From b7c8138ad54382be2a35ba21bf94abfa9425b02b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 22:47:59 +0100
Subject: [PATCH 46/54] fix(tests): make sure to create all lists before doing
 anything

---
 cypress/integration/list/list-view-gantt.spec.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/cypress/integration/list/list-view-gantt.spec.js b/cypress/integration/list/list-view-gantt.spec.js
index ddfc5de4f..69805a30d 100644
--- a/cypress/integration/list/list-view-gantt.spec.js
+++ b/cypress/integration/list/list-view-gantt.spec.js
@@ -1,9 +1,12 @@
 import {formatISO, format} from 'date-fns'
 import {TaskFactory} from '../../factories/task'
+import {prepareLists} from './prepareLists'
 
 import '../../support/authenticateUser'
 
 describe('List View Gantt', () => {
+	prepareLists()
+	
 	it('Hides tasks with no dates', () => {
 		const tasks = TaskFactory.create(1)
 		cy.visit('/lists/1/gantt')
-- 
2.40.1


From a5b0a834bc01147a5cd4ed3c04e799c833ef6a62 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 22:51:29 +0100
Subject: [PATCH 47/54] fix(tests): make sure the namespace exists before
 trying to run the history tests

If there's no namespace, there is no lists in state to show in the view. The CI runs all tests from a blank state which isn't the case when running the tests locally. Therefore, if the test doesn't create a new namespace, there won't be any to test for.
---
 cypress/integration/list/list-history.spec.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/cypress/integration/list/list-history.spec.js b/cypress/integration/list/list-history.spec.js
index f6ff5b034..b7633cbda 100644
--- a/cypress/integration/list/list-history.spec.js
+++ b/cypress/integration/list/list-history.spec.js
@@ -1,11 +1,11 @@
 import {ListFactory} from '../../factories/list'
 
 import '../../support/authenticateUser'
+import {prepareLists} from './prepareLists'
 
-// Skipped, because there is some kind of race condition which makes this test fail, but only in CI.
-// We have tried to debug and fix it but with no luck. Since we have a unit test for this functionality
-// anyway, it should be fine to mark this as skipped for now and fix it at some later point.
-describe.skip('List History', () => {
+describe('List History', () => {
+	prepareLists()
+	
 	it('should show a list history on the home page', () => {
 		cy.intercept(Cypress.env('API_URL') + '/namespaces*').as('loadNamespaces')
 		cy.intercept(Cypress.env('API_URL') + '/lists/*').as('loadList')
-- 
2.40.1


From 00ffe17eb838981bdca013a7731e9f8e2056f705 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 23:07:31 +0100
Subject: [PATCH 48/54] fix: related task with the same namespace

---
 src/components/tasks/partials/relatedTasks.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index c22bfc43a..80c04e044 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -274,10 +274,11 @@ export default {
 			return tasks
 				.map(task => {
 					// by doing this here once we can save a lot of duplicate calls in the template
+					const listAndNamespace = this.$store.getters['namespaces/getListAndNamespaceById'](task.listId, true)
 					const {
 						list,
 						namespace,
-					} = this.$store.getters['namespaces/getListAndNamespaceById'](task.listId, true)
+					} = listAndNamespace === null ? {list: null, namespace: null} : listAndNamespace
 
 					return {
 						...task,
-- 
2.40.1


From 3e311e07cdd603d970b834fa5de6b8c926c474dd Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 23:18:13 +0100
Subject: [PATCH 49/54] fix: undefined prop subscription

---
 src/views/tasks/TaskDetailView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 96ee95d9f..ed1c0eb28 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -263,7 +263,7 @@
 							{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
 						</x-button>
 						<task-subscription
-							v-if="subscription"
+							v-if="task.subscription"
 							entity="task"
 							:entity-id="task.id"
 							:subscription="task.subscription"
-- 
2.40.1


From 3d420c37708ae3568200ccf8214dd2d120a0af37 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 Jan 2022 23:27:22 +0100
Subject: [PATCH 50/54] fix: make isButton prop optional

---
 src/components/misc/subscription.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/misc/subscription.vue b/src/components/misc/subscription.vue
index 8288bd038..dbda373ea 100644
--- a/src/components/misc/subscription.vue
+++ b/src/components/misc/subscription.vue
@@ -37,7 +37,7 @@ interface Props {
   entity: string
   entityId: number
   subscription: SubscriptionModel
-  isButton: boolean
+  isButton?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-- 
2.40.1


From de626eab31e092ad9364876996575071260e705d Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 19 Jan 2022 23:58:54 +0100
Subject: [PATCH 51/54] feat: don't open task detail in modal for list and
 table view

---
 src/components/home/contentAuth.vue           | 34 ++++++++++++-------
 .../tasks/partials/singleTaskInList.vue       |  3 +-
 src/router/index.ts                           |  4 +--
 src/views/list/ListTable.vue                  |  6 ++--
 src/views/tasks/TaskDetailViewModal.vue       | 15 +++-----
 5 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 276ddb6f0..d98b0fa97 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -1,8 +1,12 @@
 <template>
 	<div>
-		<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
+		<BaseButton
+			v-if="menuActive"
+			@click="$store.commit('menuActive', false)"
+			class="menu-hide-button" 
+		>
 			<icon icon="times" />
-		</a>
+		</BaseButton>
 		<div
 			:class="{'has-background': background}"
 			:style="{'background-image': background && `url(${background})`}"
@@ -16,7 +20,11 @@
 				]"
 				class="app-content"
 			>
-				<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
+				<BaseButton
+					v-if="menuActive"
+					@click="$store.commit('menuActive', false)"
+					class="mobile-overlay"
+				/>
 
 				<quick-actions/>
 
@@ -28,7 +36,9 @@
 				</router-view>
 
 				<transition name="modal">
-					<component v-if="currentModal" :is="currentModal" />
+					<TaskDetailViewModal v-if="currentModal" >
+						<component :is="currentModal" />
+					</TaskDetailViewModal>
 				</transition>
 
 				<a
@@ -52,25 +62,23 @@ import {useEventListener} from '@vueuse/core'
 import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
+import TaskDetailViewModal from '@/views/tasks/TaskDetailViewModal.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 function useRouteWithModal() {
 	const router = useRouter()
 	const route = useRoute()
-	const historyState = computed(() => route.fullPath && window.history.state)
+	const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
 
 	const routeWithModal = computed(() => {
-		if (historyState.value.backdropView) {
-			return router.resolve(historyState.value.backdropView)
-		} else {
-			return route
-		}
+		return backdropView.value
+			? router.resolve(backdropView.value)
+			: route
 	})
 
 	const currentModal = shallowRef<VNode>()
 	watchEffect(() => {
-		const hasBackdropView = historyState.value.backdropView
-
-		if (!hasBackdropView) {
+		if (!backdropView.value) {
 			currentModal.value = undefined
 			return
 		}
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 1182c2962..85293deca 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -170,7 +170,8 @@ export default {
 			return {
 				name: 'task.detail',
 				params: { id: this.task.id },
-				state: { backdropView: this.$router.currentRoute.value.fullPath },
+				// TODO: re-enable opening task detail in modal
+				// state: { backdropView: this.$router.currentRoute.value.fullPath },
 			}
 		},
 	},
diff --git a/src/router/index.ts b/src/router/index.ts
index f3536d6d9..a38e80db7 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,7 +16,7 @@ import DataExportDownload from '../views/user/DataExportDownload.vue'
 import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange.vue'
 import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth.vue'
 import ListNamespaces from '../views/namespaces/ListNamespaces.vue'
-import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal.vue'
+import TaskDetailView from '../views/tasks/TaskDetailView.vue'
 // Team Handling
 import ListTeamsComponent from '../views/teams/ListTeams.vue'
 // Label Handling
@@ -242,7 +242,7 @@ const router = createRouter({
 		{
 			path: '/tasks/:id',
 			name: 'task.detail',
-			component: TaskDetailViewModal,
+			component: TaskDetailView,
 			props: route => ({ taskId: parseInt(route.params.id as string) }),
 		},
 		{
diff --git a/src/views/list/ListTable.vue b/src/views/list/ListTable.vue
index 6f07a4976..4fc9dd591 100644
--- a/src/views/list/ListTable.vue
+++ b/src/views/list/ListTable.vue
@@ -181,7 +181,6 @@
 
 <script setup lang="ts">
 import { toRef, computed, Ref } from 'vue'
-import { useRouter } from 'vue-router'
 
 import { useStorage } from '@vueuse/core'
 
@@ -273,14 +272,15 @@ function sort(property : keyof SortBy) {
 	}
 }
 
-const router = useRouter()
+// TODO: re-enable opening task detail in modal
+// const router = useRouter()
 const taskDetailRoutes = computed(() => Object.fromEntries(
 	tasks.value.map(({id}) => ([
 		id,
 		{
 			name: 'task.detail',
 			params: { id },
-			state: { backdropView: router.currentRoute.value.fullPath },
+			// state: { backdropView: router.currentRoute.value.fullPath },
 		},
 	])),
 ))
diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index 9c5d05e4d..f068d9305 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@@ -4,10 +4,10 @@
 		variant="scrolling"
 		class="task-detail-view-modal"
 	>
-		<a @click="close()" class="close">
+		<BaseButton @click="close()" class="close">
 			<icon icon="times"/>
-		</a>
-		<task-detail-view :task-id="props.taskId"/>
+		</BaseButton>
+		<slot />
 	</modal>
 </template>
 
@@ -15,14 +15,7 @@
 import {computed} from 'vue'
 import {useRouter, useRoute} from 'vue-router'
 
-import TaskDetailView from './TaskDetailView.vue'
-
-const props = defineProps({
-	taskId: {
-		type: Number,
-		required: true,
-	},
-})
+import BaseButton from '@/components/base/BaseButton.vue'
 
 const route = useRoute()
 const historyState = computed(() => route.fullPath && window.history.state)
-- 
2.40.1


From dfa30258aa3ee725c94af584e22d39c046cd5d10 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 1 Feb 2022 21:25:42 +0100
Subject: [PATCH 52/54] chore: rename function

---
 src/components/misc/ready.vue | 4 ++--
 src/router/index.ts           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/misc/ready.vue b/src/components/misc/ready.vue
index fd5fe92d8..f94a413e8 100644
--- a/src/components/misc/ready.vue
+++ b/src/components/misc/ready.vue
@@ -53,7 +53,7 @@ import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
 import {useOnline} from '@/composables/useOnline'
 
 import {useRouter, useRoute} from 'vue-router'
-import {checkAuth} from '@/router'
+import {getAuthForRoute} from '@/router'
 
 const router = useRouter()
 const route = useRoute()
@@ -69,7 +69,7 @@ const showLoading = computed(() => !ready.value && error.value === '')
 async function load() {
 	try {
 		await store.dispatch('loadApp')
-		const redirectTo = checkAuth(route)
+		const redirectTo = getAuthForRoute(route)
 		if (typeof redirectTo !== 'undefined') {
 			await router.push(redirectTo)
 		}
diff --git a/src/router/index.ts b/src/router/index.ts
index 3f999c700..17d66ba5f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -575,7 +575,7 @@ const router = createRouter({
 	],
 })
 
-export function checkAuth(route: RouteLocation) {
+export function getAuthForRoute(route: RouteLocation) {
 	const authUser = store.getters['auth/authUser']
 	const authLinkShare = store.getters['auth/authLinkShare']
 
-- 
2.40.1


From 24a154422d8d0112e64eef5da70bf92cf0c44abf Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 1 Feb 2022 23:09:41 +0100
Subject: [PATCH 53/54] chore: remove vikunjaReady from store

---
 src/components/misc/ready.vue | 4 ++--
 src/store/index.js            | 4 ----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/misc/ready.vue b/src/components/misc/ready.vue
index f94a413e8..8fd3f4fd3 100644
--- a/src/components/misc/ready.vue
+++ b/src/components/misc/ready.vue
@@ -60,7 +60,7 @@ const route = useRoute()
 
 const store = useStore()
 
-const ready = computed(() => store.state.vikunjaReady)
+const ready = ref(false)
 const online = useOnline()
 
 const error = ref('')
@@ -73,7 +73,7 @@ async function load() {
 		if (typeof redirectTo !== 'undefined') {
 			await router.push(redirectTo)
 		}
-		store.commit('vikunjaReady', true)
+		ready.value = true
 	} catch (e: any) {
 		error.value = e
 	}
diff --git a/src/store/index.js b/src/store/index.js
index 2b4663bff..f0d250c13 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -43,7 +43,6 @@ export const store = createStore({
 		menuActive: true,
 		keyboardShortcutsActive: false,
 		quickActionsActive: false,
-		vikunjaReady: false,
 	},
 	mutations: {
 		[LOADING](state, loading) {
@@ -79,9 +78,6 @@ export const store = createStore({
 		[BACKGROUND](state, background) {
 			state.background = background
 		},
-		vikunjaReady(state, ready) {
-			state.vikunjaReady = ready
-		},
 	},
 	actions: {
 		async [CURRENT_LIST]({state, commit}, currentList) {
-- 
2.40.1


From 6827390b77ae6e186e7b0163651c19ca9a247d2f Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sat, 5 Feb 2022 17:29:15 +0100
Subject: [PATCH 54/54] feat: merge TaskDetailViewModal with modal

---
 src/components/home/contentAuth.vue     | 26 +++++++++---
 src/components/modal/modal.vue          | 33 +++++++++++++++
 src/views/tasks/TaskDetailViewModal.vue | 53 -------------------------
 3 files changed, 54 insertions(+), 58 deletions(-)
 delete mode 100644 src/views/tasks/TaskDetailViewModal.vue

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index d98b0fa97..25fd01e73 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -36,9 +36,14 @@
 				</router-view>
 
 				<transition name="modal">
-					<TaskDetailViewModal v-if="currentModal" >
+					<modal
+						v-if="currentModal" 
+						@close="closeModal()"
+						variant="scrolling"
+						class="task-detail-view-modal"
+					>
 						<component :is="currentModal" />
-					</TaskDetailViewModal>
+					</modal>
 				</transition>
 
 				<a
@@ -62,7 +67,6 @@ import {useEventListener} from '@vueuse/core'
 import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
-import TaskDetailViewModal from '@/views/tasks/TaskDetailViewModal.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 function useRouteWithModal() {
@@ -100,10 +104,22 @@ function useRouteWithModal() {
 		)
 	})
 
-	return { routeWithModal, currentModal }
+	function closeModal() {
+		const historyState = computed(() => route.fullPath && window.history.state)
+
+		if (historyState.value) {
+			router.back()
+		} else {
+			const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
+			router.push(backdropRoute)
+		}
+	}
+
+	return { routeWithModal, currentModal, closeModal }
 }
 
-const { routeWithModal, currentModal } = useRouteWithModal()
+const { routeWithModal, currentModal, closeModal } = useRouteWithModal()
+
 
 const store = useStore()
 
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index b7bb4083f..c231df67d 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -22,6 +22,13 @@
 						'is-wide': wide
 					}"
 				>
+					<BaseButton
+						@click="emit('close')"
+						class="close"
+					>
+						<icon icon="times"/>
+					</BaseButton>
+
 					<slot>
 						<div class="header">
 							<slot name="header"></slot>
@@ -54,6 +61,8 @@
 </template>
 
 <script>
+import BaseButton from '@/components/base/BaseButton.vue'
+
 export const TRANSITION_NAMES = {
 	MODAL: 'modal',
 	FADE: 'fade',
@@ -71,6 +80,11 @@ function validValue(values) {
 
 export default {
 	name: 'modal',
+
+	components: {
+		BaseButton,
+	},
+
 	mounted() {
 		document.addEventListener('keydown', (e) => {
 			// Close the model when escape is pressed
@@ -197,4 +211,23 @@ export default {
 		}
 	}
 }
+
+.close {
+	position: fixed;
+	top: 5px;
+	right: 26px;
+	color: var(--white);
+	font-size: 2rem;
+
+	@media screen and (max-width: $desktop) {
+		color: var(--dark);
+	}
+}
+</style>
+
+<style lang="scss">
+// Close icon SVG uses currentColor, change the color to keep it visible
+.dark .task-detail-view-modal .close {
+	color: var(--grey-900);
+}
 </style>
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
deleted file mode 100644
index f068d9305..000000000
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-	<modal
-		@close="close()"
-		variant="scrolling"
-		class="task-detail-view-modal"
-	>
-		<BaseButton @click="close()" class="close">
-			<icon icon="times"/>
-		</BaseButton>
-		<slot />
-	</modal>
-</template>
-
-<script setup lang="ts">
-import {computed} from 'vue'
-import {useRouter, useRoute} from 'vue-router'
-
-import BaseButton from '@/components/base/BaseButton.vue'
-
-const route = useRoute()
-const historyState = computed(() => route.fullPath && window.history.state)
-
-const router = useRouter()
-function close() {
-	if (historyState.value) {
-		router.back()
-	} else {
-		const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
-		router.push(backdropRoute)
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.close {
-	position: fixed;
-	top: 5px;
-	right: 26px;
-	color: var(--white);
-	font-size: 2rem;
-
-	@media screen and (max-width: $desktop) {
-		color: var(--dark);
-	}
-}
-</style>
-
-<style lang="scss">
-// Close icon SVG uses currentColor, change the color to keep it visible
-.dark .task-detail-view-modal .close {
-	color: var(--grey-900);
-}
-</style>
\ No newline at end of file
-- 
2.40.1