Files
warren/frontend/components/DirectoryEntry.vue

115 lines
3.3 KiB
Vue

<script setup lang="ts">
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
} from '@/components/ui/context-menu';
import { deleteWarrenDirectory, deleteWarrenFile } from '~/lib/api/warrens';
import type { DirectoryEntry } from '~/types';
const warrenStore = useWarrenStore();
const renameDialog = useRenameDirectoryDialog();
const { entry, disabled } = defineProps<{
entry: DirectoryEntry;
disabled: boolean;
}>();
const deleting = ref(false);
async function submitDelete(force: boolean = false) {
if (warrenStore.current == null) {
return;
}
deleting.value = true;
if (entry.fileType === 'directory') {
await deleteWarrenDirectory(
warrenStore.current.warrenId,
warrenStore.current.path,
entry.name,
force
);
} else {
await deleteWarrenFile(
warrenStore.current.warrenId,
warrenStore.current.path,
entry.name
);
}
deleting.value = false;
}
async function openRenameDialog() {
renameDialog.openDialog(entry);
}
async function onClick() {
if (warrenStore.loading) {
return;
}
warrenStore.addToCurrentWarrenPath(entry.name);
}
</script>
<template>
<ContextMenu>
<ContextMenuTrigger>
<button
:disabled="warrenStore.loading || disabled"
:class="[
'bg-accent/30 border-border flex w-52 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2 select-none',
{
'pointer-events-none': entry.fileType === 'file',
},
]"
@click="onClick"
>
<div class="flex flex-row items-center">
<Icon class="size-6" :name="getFileIcon(entry.mimeType)" />
</div>
<div
class="flex w-full flex-col items-start justify-stretch gap-0 overflow-hidden text-left leading-6"
>
<span class="w-full truncate">{{ entry.name }}</span>
<NuxtTime
v-if="entry.createdAt != null"
:datetime="entry.createdAt * 1000"
class="text-muted-foreground w-full truncate text-sm"
relative
></NuxtTime>
</div>
</button>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem @select="openRenameDialog">
<Icon name="lucide:pencil" />
Rename
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem @select="() => submitDelete(false)">
<Icon name="lucide:trash-2" />
Delete
</ContextMenuItem>
<ContextMenuItem
v-if="entry.fileType === 'directory'"
@select="() => submitDelete(true)"
>
<Icon
class="text-destructive-foreground"
name="lucide:trash-2"
/>
Force delete
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</template>