Restructure file library, add all/my/recent

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

@@ -13,9 +13,9 @@
 
 		<v-list-group
 			v-else
-			:to="root ? `/files?folder=root` : `/files?folder=${folder.id}`"
-			:active="root ? currentFolder === 'root' : currentFolder === folder.id"
-			:value="root ? '$root' : folder.id"
+			:to="`/files?folder=${folder.id}`"
+			:active="currentFolder === folder.id"
+			:value="folder.id"
 			scope="files-navigation"
 			exact
 			disable-groupable-parent
@@ -133,10 +133,6 @@ export default defineComponent({
 			type: Function,
 			default: () => undefined,
 		},
-		root: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	setup(props) {
 		const { renameActive, renameValue, renameSave, renameSaving } = useRenameFolder();

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

@@ -1,12 +1,5 @@
 <template>
 	<v-list nav>
-		<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>
-
-		<v-divider v-if="loading || nestedFolders.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" />
@@ -15,16 +8,40 @@
 
 		<div class="folders">
 			<v-item-group scope="files-navigation" multiple v-model="openFolders">
-				<navigation-folder
-					v-for="folder in nestedFolders"
-					:key="folder.id"
-					:folder="folder"
-					:current-folder="currentFolder"
-					root
-				/>
+				<v-list-group to="/files" value="root" scope="files-navigation" exact disable-groupable-parent>
+					<template #activator>
+						<v-list-item-icon>
+							<v-icon name="folder" />
+						</v-list-item-icon>
+						<v-list-item-content>{{ $t('file_library') }}</v-list-item-content>
+					</template>
+
+					<navigation-folder
+						v-for="folder in nestedFolders"
+						:key="folder.id"
+						:folder="folder"
+						:current-folder="currentFolder"
+					/>
+				</v-list-group>
 			</v-item-group>
 		</div>
 
+		<v-divider />
+
+		<v-list-item to="/files/all" 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>
+
+		<v-list-item to="/files/mine" exact>
+			<v-list-item-icon><v-icon name="folder_special" /></v-list-item-icon>
+			<v-list-item-content>{{ $t('my_files') }}</v-list-item-content>
+		</v-list-item>
+
+		<v-list-item to="/files/recent" exact>
+			<v-list-item-icon><v-icon name="folder_special" /></v-list-item-icon>
+			<v-list-item-content>{{ $t('recent_files') }}</v-list-item-content>
+		</v-list-item>
 	</v-list>
 </template>
 

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

@@ -28,7 +28,7 @@ export default function useFolders() {
 	if (folders === null) folders = ref<Folder[] | null>(null);
 	if (nestedFolders === null) nestedFolders = ref<Folder[] | null>(null);
 	if (error === null) error = ref(null);
-	if (openFolders === null) openFolders = ref(['$root']);
+	if (openFolders === null) openFolders = ref(['root']);
 
 	if (folders.value === null && loading.value === false) {
 		fetchFolders();
@@ -53,14 +53,7 @@ export default function useFolders() {
 			});
 
 			folders.value = response.data.data;
-			nestedFolders.value = [
-				{
-					id: null,
-					name: i18n.t('file_library'),
-					children: nestFolders(response.data.data),
-					parent_folder: null,
-				},
-			];
+			nestedFolders.value = nestFolders(response.data.data);
 		} catch (err) {
 			error.value = err;
 		} finally {

app/src/modules/files/index.ts

@@ -13,17 +13,38 @@ export default defineModule(({ i18n }) => ({
 			path: '/',
 			component: FilesBrowse,
 			props: (route) => ({
-				queryFilters: route.query
+				queryFilters: route.query,
 			}),
 			children: [
 				{
 					path: '+',
 					name: 'add-file',
 					components: {
-						addNew: FilesAddNew
+						addNew: FilesAddNew,
 					},
-				}
-			]
+				},
+			],
+		},
+		{
+			path: '/all',
+			component: FilesBrowse,
+			props: () => ({
+				special: 'all',
+			}),
+		},
+		{
+			path: '/mine',
+			component: FilesBrowse,
+			props: () => ({
+				special: 'mine',
+			}),
+		},
+		{
+			path: '/recent',
+			component: FilesBrowse,
+			props: () => ({
+				special: 'recent',
+			}),
 		},
 		{
 			name: 'files-detail',

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

@@ -151,6 +151,8 @@ import FolderPicker from '../../components/folder-picker';
 import emitter, { Events } from '@/events';
 import router from '@/router';
 import Vue from 'vue';
+import { useUserStore } from '@/stores';
+import { subDays } from 'date-fns';
 
 type Item = {
 	[field: string]: any;
@@ -164,49 +166,24 @@ export default defineComponent({
 			type: Object as PropType<Record<string, string>>,
 			default: null,
 		},
+		special: {
+			type: String as PropType<'all' | 'recent' | 'mine'>,
+			default: null,
+		},
 	},
 	setup(props) {
 		const layout = ref<LayoutComponent | null>(null);
 		const selection = ref<Item[]>([]);
 
+		const userStore = useUserStore();
+
 		const { viewType, viewOptions, viewQuery, filters, searchQuery } = usePreset(ref('directus_files'));
 		const { batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb } = useBreadcrumb();
 
 		const filtersWithFolderAndType = computed(() => {
-			if (props.queryFilters !== null) {
-				const urlFilters: any[] = [
-					{
-						locked: true,
-						field: 'type',
-						operator: 'nnull',
-						value: 1,
-					},
-				];
-
-				for (const [field, value] of Object.entries(props.queryFilters)) {
-					if (value === 'root') {
-						urlFilters.push({
-							locked: true,
-							operator: 'null',
-							field,
-							value: true,
-						});
-					} else {
-						urlFilters.push({
-							locked: true,
-							operator: 'eq',
-							field,
-							value,
-						});
-					}
-				}
-
-				return [...urlFilters, ...filters.value];
-			}
-
-			return [
+			const filtersParsed: any[] = [
 				...filters.value,
 				{
 					locked: true,
@@ -215,6 +192,46 @@ export default defineComponent({
 					value: 1,
 				},
 			];
+
+			if (props.special === null) {
+				if (Object.keys(props.queryFilters).length > 0) {
+					for (const [field, value] of Object.entries(props.queryFilters)) {
+						filtersParsed.push({
+							locked: true,
+							operator: 'eq',
+							field,
+							value,
+						});
+					}
+				} else {
+					filtersParsed.push({
+						locked: true,
+						operator: 'null',
+						field: 'folder',
+						value: true,
+					});
+				}
+			}
+
+			if (props.special === 'mine' && userStore.state.currentUser) {
+				filtersParsed.push({
+					locked: true,
+					operator: 'eq',
+					field: 'uploaded_by',
+					value: userStore.state.currentUser.id,
+				});
+			}
+
+			if (props.special === 'recent') {
+				filtersParsed.push({
+					locked: true,
+					operator: 'gt',
+					field: 'uploaded_on',
+					value: subDays(new Date(), 5).toISOString(),
+				});
+			}
+
+			return filtersParsed;
 		});
 
 		const { moveToDialogActive, moveToFolder, moving, selectedFolder } = useMovetoFolder();