136 lines
4.5 KiB
Svelte
136 lines
4.5 KiB
Svelte
<script lang="ts">
|
|
import * as Accordion from '$lib/components/ui/accordion/index';
|
|
import * as Tooltip from '$lib/components/ui/tooltip/index';
|
|
import * as Table from '$lib/components/ui/table/index';
|
|
// import * as AlertDialog from '$lib/components/ui/alert-dialog/index';
|
|
|
|
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';
|
|
|
|
import * as Dialog from '$lib/components/ui/dialog/index.js';
|
|
|
|
import type { Book } from '$lib/schema/index';
|
|
import { Badge } from '$lib/components/ui/badge/index';
|
|
import { formatFileSize, getFileType } from '$lib/utils';
|
|
import { BookOpenText, Download } from '@lucide/svelte';
|
|
|
|
let { book }: { book: Book } = $props();
|
|
|
|
let files = $state(book.files);
|
|
</script>
|
|
|
|
<Accordion.Root type="single" class="mt-4 w-full rounded-lg bg-muted px-4 shadow-lg drop-shadow ">
|
|
<!-- <Separator></Separator> -->
|
|
<Accordion.Item value="item-1">
|
|
<Accordion.Trigger>
|
|
<div class="ml-2 flex gap-4">
|
|
Library Files
|
|
<Badge>{book.files.length}</Badge>
|
|
</div>
|
|
</Accordion.Trigger>
|
|
<Accordion.Content>
|
|
<Table.Root>
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.Head class="w-[300px]">Filename</Table.Head>
|
|
<Table.Head>Size</Table.Head>
|
|
<Table.Head>File type</Table.Head>
|
|
<Table.Head class="text-right">Actions</Table.Head>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{#each book.files as file (file.id)}
|
|
<Table.Row>
|
|
<Table.Cell class="">{file.filename}</Table.Cell>
|
|
<Table.Cell>{formatFileSize(file.size)}</Table.Cell>
|
|
<Table.Cell>{getFileType(file.filename)}</Table.Cell>
|
|
<Table.Cell class="text-right">
|
|
<div class="flex justify-end gap-1">
|
|
<!-- Read button -->
|
|
{#if getFileType(file.filename) == 'EPUB' || getFileType(file.filename) == 'PDF'}
|
|
<Tooltip.Provider>
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger
|
|
class="{buttonVariants({
|
|
variant: 'default',
|
|
size: 'icon'
|
|
})} scale-90"
|
|
onclick={() => handleRead(file)}
|
|
>
|
|
<BookOpenText />
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Content side="bottom">
|
|
<p>Read</p>
|
|
</Tooltip.Content>
|
|
</Tooltip.Root>
|
|
</Tooltip.Provider>
|
|
{/if}
|
|
|
|
<!-- Download button -->
|
|
<Tooltip.Provider>
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger
|
|
class="{buttonVariants({ variant: 'default', size: 'icon' })} scale-90"
|
|
onclick={() => handleDownload(file)}
|
|
>
|
|
<Download />
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Content side="bottom">
|
|
<p>Download</p>
|
|
</Tooltip.Content>
|
|
</Tooltip.Root>
|
|
</Tooltip.Provider>
|
|
|
|
<!-- Delete button -->
|
|
<AlertDialog.Root bind:open={fileDeleteDialogOpen}>
|
|
<AlertDialog.Trigger>
|
|
<Tooltip.Provider>
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger
|
|
class="{buttonVariants({
|
|
variant: 'destructive',
|
|
size: 'icon'
|
|
})} scale-90"
|
|
onclick={() => {
|
|
fileToDelete = file.id;
|
|
}}
|
|
>
|
|
<Trash2 />
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Content side="bottom">
|
|
<p>Delete</p>
|
|
</Tooltip.Content>
|
|
</Tooltip.Root>
|
|
</Tooltip.Provider>
|
|
</AlertDialog.Trigger>
|
|
<AlertDialog.Content>
|
|
<AlertDialog.Header>
|
|
<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
|
|
<AlertDialog.Description>
|
|
This action cannot be undone. This will permanently delete the record from
|
|
the database and the file from the filesystem.
|
|
</AlertDialog.Description>
|
|
</AlertDialog.Header>
|
|
<AlertDialog.Footer>
|
|
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
|
|
<AlertDialog.Action
|
|
onclick={() => {
|
|
handleDeleteFile(fileToDelete);
|
|
fileDeleteDialogOpen = false;
|
|
fileToDelete = undefined;
|
|
}}
|
|
class="text-destructive-foreground bg-destructive hover:bg-destructive/90"
|
|
>Delete</AlertDialog.Action
|
|
>
|
|
</AlertDialog.Footer>
|
|
</AlertDialog.Content>
|
|
</AlertDialog.Root>
|
|
</div>
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</Accordion.Content>
|
|
</Accordion.Item>
|
|
</Accordion.Root>
|