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/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()
 

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.

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

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.

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.

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 = '') {

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()
 		},
 	},
 }