drag DirectoryEntry onto directory to move

frontend/components/DirectoryEntry.vue

@@ -10,6 +10,7 @@ import {
     deleteWarrenDirectory,
     deleteWarrenFile,
     fetchFile,
+    moveFile,
 } from '~/lib/api/warrens';
 import type { DirectoryEntry } from '#shared/types';
 
@@ -78,6 +79,38 @@ async function onClick() {
         }
     }
 }
+
+function onDragStart(e: DragEvent) {
+    if (e.dataTransfer == null) {
+        return;
+    }
+
+    e.dataTransfer.setData('application/warren', entry.name);
+    e.dataTransfer.dropEffect = 'move';
+}
+
+async function onDrop(e: DragEvent) {
+    if (e.dataTransfer == null || warrenStore.current == null) {
+        return;
+    }
+
+    if (entry.fileType !== 'directory') {
+        return;
+    }
+
+    const fileName = e.dataTransfer.getData('application/warren');
+
+    if (entry.name === fileName) {
+        return;
+    }
+
+    await moveFile(
+        warrenStore.current.warrenId,
+        warrenStore.current.path,
+        fileName,
+        `${warrenStore.current.path}/${entry.name}`
+    );
+}
 </script>
 
 <template>
@@ -85,7 +118,10 @@ async function onClick() {
         <ContextMenuTrigger>
             <button
                 :disabled="warrenStore.loading || disabled"
-                class="bg-accent/30 border-border select-none, flex w-52 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2"
+                class="bg-accent/30 border-border select-none, flex w-52 translate-0 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2"
+                draggable="true"
+                @dragstart="onDragStart"
+                @drop="onDrop"
                 @click="onClick"
             >
                 <div class="flex flex-row items-center">

frontend/lib/api/warrens.ts

@@ -300,3 +300,49 @@ export async function fetchFile(
         data: data.value,
     };
 }
+
+export async function moveFile(
+    warrenId: string,
+    path: string,
+    fileName: string,
+    targetPath: string
+): Promise<{ success: boolean }> {
+    if (!path.endsWith('/')) {
+        path += '/';
+    }
+    path += fileName;
+
+    if (!targetPath.endsWith('/')) {
+        targetPath += '/';
+    }
+    targetPath += fileName;
+
+    const { status } = await useFetch(getApiUrl(`warrens/files/mv`), {
+        method: 'POST',
+        headers: getApiHeaders(),
+        body: JSON.stringify({
+            warrenId,
+            path,
+            targetPath,
+        }),
+    });
+
+    if (status.value !== 'success') {
+        toast.error('Move', {
+            id: 'MOVE_FILE_TOAST',
+            description: `Failed to move ${fileName}`,
+        });
+        return { success: false };
+    }
+
+    await refreshNuxtData('current-directory');
+
+    toast.success('Rename', {
+        id: 'RENAME_FILE_TOAST',
+        description: `Successfully moved ${fileName} to ${targetPath}`,
+    });
+
+    return {
+        success: true,
+    };
+}

frontend/pages/warrens/files.vue

@@ -81,7 +81,10 @@ function onDrop(files: File[] | null, e: DragEvent) {
         <DirectoryListContextMenu class="w-full grow">
             <DirectoryList
                 v-if="entries != null"
-                :is-over-drop-zone="dropZone.isOverDropZone.value"
+                :is-over-drop-zone="
+                    dropZone.isOverDropZone.value &&
+                    dropZone.files.value != null
+                "
                 :entries="entries"
             />
         </DirectoryListContextMenu>