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] 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,