basic selection + download multiple files with selection

This commit is contained in:
2025-09-02 18:08:13 +02:00
parent be46f92ddf
commit e2085c1baa
22 changed files with 516 additions and 156 deletions

View File

@@ -10,11 +10,23 @@ definePageMeta({
const warrenStore = useWarrenStore();
const route = useRoute();
const entries = computed(() =>
warrenStore.current != null && warrenStore.current.dir != null
? warrenStore.current.dir.entries
: null
);
const parent = computed(() =>
warrenStore.current != null && warrenStore.current.dir != null
? warrenStore.current.dir.parent
: null
);
const share = await getShareFromQuery();
const entries = ref<DirectoryEntry[] | null>(null);
const parent = ref<DirectoryEntry | null>(null);
const password = ref<string>('');
const loading = ref<boolean>(false);
const passwordValid = ref<boolean>(
share == null ? false : !share.data.password
);
if (share != null) {
warrenStore.setCurrentWarren(share.data.warrenId, '/');
@@ -65,6 +77,7 @@ async function loadFiles() {
);
if (result.success) {
passwordValid.value = true;
let cookie = `X-Share-Password=${password.value}; Path=/; SameSite=Lax; Secure;`;
if (share.data.expiresAt != null) {
@@ -76,18 +89,22 @@ async function loadFiles() {
document.cookie = cookie;
entries.value = result.files;
parent.value = result.parent;
warrenStore.setCurrentWarrenEntries(result.files, result.parent);
}
loading.value = false;
}
async function onEntryClicked(entry: DirectoryEntry) {
async function onEntryClicked(entry: DirectoryEntry, event: MouseEvent) {
if (warrenStore.current == null) {
return;
}
if (event.ctrlKey) {
warrenStore.toggleSelection(entry);
return;
}
const entryPath = joinPaths(warrenStore.current.path, entry.name);
if (entry.fileType === 'directory') {
@@ -130,7 +147,7 @@ function onDowloadClicked() {
? `${share.file.name}.zip`
: share.file.name;
const downloadApiUrl = getApiUrl(
`warrens/files/cat_share?shareId=${share.data.id}&path=/`
`warrens/files/cat_share?shareId=${share.data.id}&paths=/`
);
downloadFile(downloadName, downloadApiUrl);
@@ -141,11 +158,27 @@ function onEntryDownload(entry: DirectoryEntry) {
return;
}
const downloadName =
entry.fileType === 'directory' ? `${entry.name}.zip` : entry.name;
const downloadApiUrl = getApiUrl(
`warrens/files/cat_share?shareId=${share.data.id}&path=${joinPaths(warrenStore.current.path, entry.name)}`
);
let downloadName: string;
let downloadApiUrl: string;
const selectionSize = warrenStore.selection.size;
if (selectionSize === 0 || !warrenStore.isSelected(entry)) {
downloadName =
entry.fileType === 'directory' ? `${entry.name}.zip` : entry.name;
downloadApiUrl = getApiUrl(
`warrens/files/cat_share?shareId=${share.data.id}&paths=${joinPaths(warrenStore.current.path, entry.name)}`
);
} else {
downloadName = 'download.zip';
const paths = Array.from(warrenStore.selection).map((entry) =>
joinPaths(warrenStore.current!.path, entry.name)
);
downloadApiUrl = getApiUrl(
`warrens/files/cat_share?shareId=${share.data.id}&paths=${paths.join(':')}`
);
}
downloadFile(downloadName, downloadApiUrl);
}
@@ -158,8 +191,8 @@ function onEntryDownload(entry: DirectoryEntry) {
>
<div
:class="[
'w-full rounded-lg border transition-all',
entries == null ? 'max-w-lg' : 'max-w-screen-xl',
'h-[min(98vh,600px)] w-full max-w-screen-xl rounded-lg border transition-all',
passwordValid ? 'max-w-screen-xl' : 'max-w-lg',
]"
>
<div
@@ -205,6 +238,7 @@ function onEntryDownload(entry: DirectoryEntry) {
:entries
:parent
:disable-entries="loading"
:entries-draggable="false"
@entry-click="onEntryClicked"
@entry-download="onEntryDownload"
@back="onBack"

View File

@@ -28,7 +28,7 @@ if (warrenStore.current == null) {
});
}
const dirData = useAsyncData(
useAsyncData(
'current-directory',
async () => {
if (warrenStore.current == null) {
@@ -49,10 +49,10 @@ const dirData = useAsyncData(
warrenStore.loading = false;
loadingIndicator.finish();
return { files, parent };
warrenStore.setCurrentWarrenEntries(files, parent);
},
{ watch: [warrenPath] }
).data;
);
function onDrop(files: File[] | null, e: DragEvent) {
if (files == null) {
@@ -79,11 +79,16 @@ function onDrop(files: File[] | null, e: DragEvent) {
}
}
async function onEntryClicked(entry: DirectoryEntry) {
async function onEntryClicked(entry: DirectoryEntry, event: MouseEvent) {
if (warrenStore.loading || warrenStore.current == null) {
return;
}
if (event.ctrlKey) {
warrenStore.toggleSelection(entry);
return;
}
if (entry.fileType === 'directory') {
warrenStore.addToCurrentWarrenPath(entry.name);
return;
@@ -111,11 +116,27 @@ function onEntryDownload(entry: DirectoryEntry) {
return;
}
const downloadName =
entry.fileType === 'directory' ? `${entry.name}.zip` : entry.name;
const downloadApiUrl = getApiUrl(
`warrens/files/cat?warrenId=${warrenStore.current.warrenId}&path=${joinPaths(warrenStore.current.path, entry.name)}`
);
let downloadName: string;
let downloadApiUrl: string;
const selectionSize = warrenStore.selection.size;
if (selectionSize === 0 || !warrenStore.isSelected(entry)) {
downloadName =
entry.fileType === 'directory' ? `${entry.name}.zip` : entry.name;
downloadApiUrl = getApiUrl(
`warrens/files/cat?warrenId=${warrenStore.current.warrenId}&paths=${joinPaths(warrenStore.current.path, entry.name)}`
);
} else {
downloadName = 'download.zip';
const paths = Array.from(warrenStore.selection).map((entry) =>
joinPaths(warrenStore.current!.path, entry.name)
);
downloadApiUrl = getApiUrl(
`warrens/files/cat?warrenId=${warrenStore.current.warrenId}&paths=${paths.join(':')}`
);
}
downloadFile(downloadName, downloadApiUrl);
}
@@ -129,13 +150,16 @@ function onBack() {
<div ref="dropZoneRef" class="grow">
<DirectoryListContextMenu class="w-full grow">
<DirectoryList
v-if="dirData != null"
v-if="
warrenStore.current != null &&
warrenStore.current.dir != null
"
:is-over-drop-zone="
dropZone.isOverDropZone.value &&
dropZone.files.value != null
"
:entries="dirData.files"
:parent="dirData.parent"
:entries="warrenStore.current.dir.entries"
:parent="warrenStore.current.dir.parent"
@entry-click="onEntryClicked"
@entry-download="onEntryDownload"
@back="onBack"