basic selection + download multiple files with selection

frontend/pages/warrens/files.vue

@@ -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"