Open current folder in library / detail

app/src/modules/files/components/navigation/navigation-folder.vue

@@ -17,10 +17,11 @@
 			:active="currentFolder === folder.id"
 			exact
 			@contextmenu.native.prevent="$refs.contextMenu.activate"
+			:open="isOpen"
 		>
-			<template #activator="{ active }">
+			<template #activator>
 				<v-list-item-icon>
-					<v-icon :name="active ? 'folder_open' : 'folder'" />
+					<v-icon name="folder" />
 				</v-list-item-icon>
 				<v-list-item-content>{{ folder.name }}</v-list-item-content>
 			</template>
@@ -30,6 +31,7 @@
 				:folder="childFolder"
 				:current-folder="currentFolder"
 				:click-handler="clickHandler"
+				:start-open-folders="startOpenFolders"
 			/>
 		</v-list-group>
 
@@ -106,7 +108,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from '@vue/composition-api';
+import { defineComponent, PropType, ref, watch, computed } from '@vue/composition-api';
 import useFolders, { Folder } from '../../composables/use-folders';
 import notify from '@/utils/notify';
 import api from '@/api';
@@ -129,6 +131,10 @@ export default defineComponent({
 			type: Function,
 			default: () => undefined,
 		},
+		startOpenFolders: {
+			type: Array as PropType<string[]>,
+			default: () => [],
+		},
 	},
 	setup(props) {
 		const { renameActive, renameValue, renameSave, renameSaving } = useRenameFolder();
@@ -137,6 +143,10 @@ export default defineComponent({
 
 		const { fetchFolders } = useFolders();
 
+		const isOpen = computed(() => {
+			return props.startOpenFolders.includes(props.folder.id);
+		});
+
 		return {
 			renameActive,
 			renameValue,
@@ -149,6 +159,7 @@ export default defineComponent({
 			deleteActive,
 			deleteSave,
 			deleteSaving,
+			isOpen,
 		};
 
 		function useRenameFolder() {

app/src/modules/files/components/navigation/navigation.vue

@@ -5,9 +5,9 @@
 			<v-list-item-content>{{ $t('all_files') }}</v-list-item-content>
 		</v-list-item>
 
-		<v-divider v-if="loading || folders.length > 0" />
+		<v-divider v-if="loading || nestedFolders.length > 0" />
 
-		<template v-if="loading && (folders === null || folders.length === 0)">
+		<template v-if="loading && (nestedFolders === null || nestedFolders.length === 0)">
 			<v-list-item v-for="n in 4" :key="n">
 				<v-skeleton-loader type="list-item-icon" />
 			</v-list-item>
@@ -15,17 +15,18 @@
 
 		<div class="folders">
 			<navigation-folder
-				v-for="folder in folders"
+				v-for="folder in nestedFolders"
 				:key="folder.id"
 				:folder="folder"
 				:current-folder="currentFolder"
+				:start-open-folders="startOpenFolders"
 			/>
 		</div>
 	</v-list>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import useFolders from '../../composables/use-folders';
 import NavigationFolder from './navigation-folder.vue';
 
@@ -41,10 +42,31 @@ export default defineComponent({
 			default: null,
 		},
 	},
-	setup() {
-		const { folders, error, loading } = useFolders();
+	setup(props) {
+		const { nestedFolders, folders, error, loading } = useFolders();
 
-		return { folders, error, loading };
+		const startOpenFolders = computed(() => {
+			if (!folders.value) return [];
+
+			const openFolders: string[] = [];
+
+			parseFolder(props.currentFolder);
+
+			return openFolders;
+
+			function parseFolder(id: string) {
+				if (!folders.value) return;
+				openFolders.push(id);
+
+				const folder = folders.value.find((folder) => folder.id === id);
+
+				if (folder && folder.parent_folder) {
+					parseFolder(folder.parent_folder);
+				}
+			}
+		});
+
+		return { folders, nestedFolders, error, loading, startOpenFolders };
 	},
 });
 </script>

app/src/modules/files/composables/use-folders.ts

@@ -16,23 +16,26 @@ export type Folder = {
 
 let loading: Ref<boolean> | null = null;
 let folders: Ref<Folder[] | null> | null = null;
+let nestedFolders: Ref<Folder[] | null> | null = null;
 
 let error: Ref<any> | null = null;
 
 export default function useFolders() {
 	if (loading === null) loading = ref(false);
 	if (folders === null) folders = ref<Folder[] | null>(null);
+	if (nestedFolders === null) nestedFolders = ref<Folder[] | null>(null);
 	if (error === null) error = ref(null);
 
 	if (folders.value === null && loading.value === false) {
 		fetchFolders();
 	}
 
-	return { loading, folders, error, fetchFolders };
+	return { loading, folders, nestedFolders, error, fetchFolders };
 
 	async function fetchFolders() {
 		if (loading === null) return;
 		if (folders === null) return;
+		if (nestedFolders === null) return;
 		if (error === null) return;
 
 		loading.value = true;
@@ -45,7 +48,8 @@ export default function useFolders() {
 				},
 			});
 
-			folders.value = nestFolders(response.data.data);
+			folders.value = response.data.data;
+			nestedFolders.value = nestFolders(response.data.data);
 		} catch (err) {
 			error.value = err;
 		} finally {

app/src/modules/files/routes/browse/browse.vue

@@ -84,7 +84,7 @@
 		</template>
 
 		<template #navigation>
-			<files-navigation />
+			<files-navigation :current-folder="queryFilters && queryFilters.folder" />
 		</template>
 
 		<component
@@ -130,6 +130,7 @@ import marked from 'marked';
 import FolderPicker from '../../components/folder-picker';
 import emitter, { Events } from '@/events';
 import router from '@/router';
+import Vue from 'vue';
 
 type Item = {
 	[field: string]: any;
@@ -287,11 +288,13 @@ export default defineComponent({
 					});
 
 					selection.value = [];
-					await layout.value?.refresh();
 
 					if (selectedFolder.value) {
 						router.push(`/files?folder=${selectedFolder.value}`);
 					}
+
+					await Vue.nextTick();
+					await refresh();
 				} catch (err) {
 					console.error(err);
 				} finally {