github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-03 03:00:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add default-folder option (#3209)

Browse Source 
* 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>
This commit is contained in:
Adrian Dimitrov
2021-07-22 00:29:21 +03:00
committed by GitHub
parent d487f691a3
commit efe7b076a3
25 changed files with 365 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/modules/files/components/add-folder.vue
View File

@@ -31,7 +31,7 @@
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, ref } from 'vue';
import useFolders from '../composables/use-folders';
import useFolders from '@/composables/use-folders';
import api from '@/api';
import { useRouter } from 'vue-router';
import { unexpectedError } from '@/utils/unexpected-error';

2
app/src/modules/files/components/navigation-folder.vue
View File

@@ -116,7 +116,7 @@
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, PropType, ref } from 'vue';
import useFolders, { Folder } from '../composables/use-folders';
import useFolders, { Folder } from '@/composables/use-folders';
import api from '@/api';
import FolderPicker from './folder-picker.vue';
import { useRouter } from 'vue-router';

2
app/src/modules/files/components/navigation.vue
View File

@@ -56,7 +56,7 @@
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, watch } from 'vue';
import useFolders, { Folder } from '../composables/use-folders';
import useFolders, { Folder } from '@/composables/use-folders';
import NavigationFolder from './navigation-folder.vue';
import arraysAreEqual from '@/utils/arrays-are-equal';

88
app/src/modules/files/composables/use-folders.ts
View File

@@ -1,88 +0,0 @@
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;
}

10
app/src/modules/files/routes/collection.vue
View File

@@ -165,7 +165,7 @@ import emitter, { Events } from '@/events';
import { useRouter } from 'vue-router';
import { useNotificationsStore, useUserStore, usePermissionsStore } from '@/stores';
import { subDays } from 'date-fns';
import useFolders, { Folder } from '../composables/use-folders';
import useFolders, { Folder } from '@/composables/use-folders';
import useEventListener from '@/composables/use-event-listener';
import { useLayout } from '@/composables/use-layout';
import uploadFiles from '@/utils/upload-files';
@@ -603,11 +603,9 @@ export default defineComponent({
});
await uploadFiles(files, {
preset: props.folder
? {
folder: props.folder,
}
: {},
preset: {
folder: props.folder,
},
onProgressChange: (progress) => {
const percentageDone = progress.reduce((val, cur) => (val += cur)) / progress.length;