Add default-folder option (#3209)

* Allow set folder for imported files * Allow passing folder in file/files component; Allow pick folder for file/files/image interfaces. * Added folder system component for picking folders; Move folder picker the field from data to interface (file, files, image). * Add custom folder interface; use props for interfaces file/files/image in upload component * Allow set folder for imported files * Allow passing folder in file/files component; Allow pick folder for file/files/image interfaces. * Added folder system component for picking folders; Move folder picker the field from data to interface (file, files, image). * Add custom folder interface; use props for interfaces file/files/image in upload component * Update after rebase * Add storage_default_folder setting, use folder when deploy file * Fix files options; Add default label option for folder interface. * Fix set folder for file * UX * Add migration for column, undo seed change * Update nomanclature * Make sure file library always submits folder, cleanup setting retrieval * Use indexName on down migrate * Fix import default folder, rename customPresets->folderPreset * Rename interface import * Use undefined as default folder * Remove deprecated lang file * Fix display of folder interface, treat null as value * Move shared composable * Remove unused ref Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
2026-04-25 03:00:53 -04:00 · 2021-07-22 00:29:21 +03:00
parent d487f691a3
commit efe7b076a3
25 changed files with 365 additions and 34 deletions
--- a/app/src/composables/use-folders.ts
+++ b/app/src/composables/use-folders.ts
@@ -0,0 +1,88 @@
+import api from '@/api';
+import { ref, Ref } from 'vue';
+
+type FolderRaw = {
+	id: string;
+	name: string;
+	parent: string | null;
+};
+
+export type Folder = {
+	id: string | null;
+	name: string;
+	parent: string | null;
+	children?: Folder[];
+};
+
+type UsableFolders = {
+	loading: Ref<boolean>;
+	folders: Ref<Folder[] | null>;
+	nestedFolders: Ref<Folder[] | null>;
+	error: Ref<any>;
+	fetchFolders: () => Promise<void>;
+	openFolders: Ref<string[] | null>;
+};
+
+let loading: Ref<boolean> | null = null;
+let folders: Ref<Folder[] | null> | null = null;
+let nestedFolders: Ref<Folder[] | null> | null = null;
+let openFolders: Ref<string[] | null> | null = null;
+
+let error: Ref<any> | null = null;
+
+export default function useFolders(): UsableFolders {
+	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 (openFolders === null) openFolders = ref(['root']);
+
+	if (folders.value === null && loading.value === false) {
+		fetchFolders();
+	}
+
+	return { loading, folders, nestedFolders, error, fetchFolders, openFolders };
+
+	async function fetchFolders() {
+		if (loading === null) return;
+		if (folders === null) return;
+		if (nestedFolders === null) return;
+		if (error === null) return;
+
+		loading.value = true;
+
+		try {
+			const response = await api.get(`/folders`, {
+				params: {
+					limit: -1,
+					sort: 'name',
+				},
+			});
+
+			folders.value = response.data.data;
+			nestedFolders.value = nestFolders(response.data.data);
+		} catch (err) {
+			error.value = err;
+		} finally {
+			loading.value = false;
+		}
+	}
+}
+
+export function nestFolders(rawFolders: FolderRaw[]): FolderRaw[] {
+	return rawFolders.map((rawFolder) => nestChildren(rawFolder, rawFolders)).filter((folder) => folder.parent === null);
+}
+
+export function nestChildren(rawFolder: FolderRaw, rawFolders: FolderRaw[]): FolderRaw & Folder {
+	const folder: FolderRaw & Folder = { ...rawFolder };
+
+	const children = rawFolders
+		.filter((childFolder) => childFolder.parent === rawFolder.id && childFolder.id !== rawFolder.id)
+		.map((childRawFolder) => nestChildren(childRawFolder, rawFolders));
+
+	if (children.length > 0) {
+		folder.children = children;
+	}
+
+	return folder;
+}