From 12fde2b60ba34a50df4997abaefdafa5c421239d Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 7 Aug 2020 11:47:34 -0400
Subject: [PATCH] Use query param for folder navigation

---
 .../navigation/navigation-folder.vue          |  4 +--
 .../components/navigation/navigation.vue      |  4 +--
 app/src/modules/files/index.ts                |  4 ++-
 .../modules/files/routes/browse/browse.vue    | 36 ++++++++++++-------
 4 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/app/src/modules/files/components/navigation/navigation-folder.vue b/app/src/modules/files/components/navigation/navigation-folder.vue
index 40ea4ab289..aca8606929 100644
--- a/app/src/modules/files/components/navigation/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation/navigation-folder.vue
@@ -1,8 +1,8 @@
 <template>
 	<v-list-item
 		v-if="folder.children === undefined"
-		@click="clickHandler(folder.id)"
-		:active="currentFolder === folder.id"
+		:to="`/files?folder=${folder.id}`"
+		exact
 	>
 		<v-list-item-icon><v-icon name="folder" /></v-list-item-icon>
 		<v-list-item-content>{{ folder.name }}</v-list-item-content>
diff --git a/app/src/modules/files/components/navigation/navigation.vue b/app/src/modules/files/components/navigation/navigation.vue
index 6c349792f7..80e16ae37c 100644
--- a/app/src/modules/files/components/navigation/navigation.vue
+++ b/app/src/modules/files/components/navigation/navigation.vue
@@ -1,6 +1,6 @@
 <template>
 	<v-list nav>
-		<v-list-item @click="$emit('filter', null)" :active="currentFolder === null">
+		<v-list-item to="/files/" exact>
 			<v-list-item-icon><v-icon name="folder_special" /></v-list-item-icon>
 			<v-list-item-content>{{ $t('all_files') }}</v-list-item-content>
 		</v-list-item>
@@ -15,12 +15,10 @@
 
 		<div class="folders">
 			<navigation-folder
-				@click="$emit('filter', $event)"
 				v-for="folder in folders"
 				:key="folder.id"
 				:folder="folder"
 				:current-folder="currentFolder"
-				:click-handler="(id) => $emit('filter', id)"
 			/>
 		</div>
 	</v-list>
diff --git a/app/src/modules/files/index.ts b/app/src/modules/files/index.ts
index 7d30e7e53d..815e522498 100644
--- a/app/src/modules/files/index.ts
+++ b/app/src/modules/files/index.ts
@@ -12,7 +12,9 @@ export default defineModule(({ i18n }) => ({
 			name: 'files-browse',
 			path: '/',
 			component: FilesBrowse,
-			props: true,
+			props: (route) => ({
+				queryFilters: route.query
+			}),
 			children: [
 				{
 					path: '+',
diff --git a/app/src/modules/files/routes/browse/browse.vue b/app/src/modules/files/routes/browse/browse.vue
index 1948f401bf..08370c03d9 100644
--- a/app/src/modules/files/routes/browse/browse.vue
+++ b/app/src/modules/files/routes/browse/browse.vue
@@ -103,7 +103,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from '@vue/composition-api';
+import { defineComponent, computed, ref, PropType } from '@vue/composition-api';
 import FilesNavigation from '../../components/navigation/';
 import { i18n } from '@/lang';
 import api from '@/api';
@@ -123,8 +123,13 @@ type Item = {
 export default defineComponent({
 	name: 'files-browse',
 	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail, AddFolder, SearchInput, FolderPicker },
-	props: {},
-	setup() {
+	props: {
+		queryFilters: {
+			type: Object as PropType<Record<string, string>>,
+			default: null,
+		},
+	},
+	setup(props) {
 		const layout = ref<LayoutComponent | null>(null);
 		const selection = ref<Item[]>([]);
 
@@ -136,15 +141,8 @@ export default defineComponent({
 		const currentFolder = ref(null);
 
 		const filtersWithFolderAndType = computed(() => {
-			if (currentFolder.value !== null) {
-				return [
-					...filters.value,
-					{
-						field: 'folder',
-						operator: 'eq',
-						value: currentFolder.value,
-						locked: true,
-					},
+			if (props.queryFilters !== null) {
+				const urlFilters: any[] = [
 					{
 						locked: true,
 						field: 'type',
@@ -152,6 +150,20 @@ export default defineComponent({
 						value: 1,
 					},
 				];
+
+				for (const [field, value] of Object.entries(props.queryFilters)) {
+					urlFilters.push({
+						locked: true,
+						operator: 'eq',
+						field,
+						value,
+					});
+				}
+
+				return [
+					...urlFilters,
+					...filters.value,
+				];
 			}
 
 			return [