generated from tpl/obsidian-sample-plugin
101 lines
2.2 KiB
Svelte
101 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { STATUS_IN_PROGRESS, STATUS_READ } from "@src/const";
|
|
import type BookTrackerPlugin from "@src/main";
|
|
import { getMetadataContext } from "@ui/stores/metadata.svelte";
|
|
import Rating from "@ui/components/Rating.svelte";
|
|
import type { ShelfSettings } from "@ui/code-blocks/ShelfCodeBlock";
|
|
import OpenFileLink from "./OpenFileLink.svelte";
|
|
import BookCover from "./BookCover.svelte";
|
|
|
|
interface Props {
|
|
plugin: BookTrackerPlugin;
|
|
settings: ShelfSettings;
|
|
}
|
|
|
|
const { plugin, settings }: Props = $props();
|
|
|
|
const metadataStore = getMetadataContext();
|
|
</script>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Cover</th>
|
|
<th>Title</th>
|
|
<th>Authors</th>
|
|
<th>Series</th>
|
|
<th>#</th>
|
|
{#if settings.statusFilter === STATUS_IN_PROGRESS || settings.statusFilter === STATUS_READ}
|
|
<th>Start Date</th>
|
|
{/if}
|
|
{#if settings.statusFilter === STATUS_READ}
|
|
<th>End Date</th>
|
|
<th>Rating</th>
|
|
{/if}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each metadataStore.metadata as meta}
|
|
<tr>
|
|
<td class="cover">
|
|
<BookCover app={plugin.app} book={meta.book} size={50} />
|
|
</td>
|
|
<td>
|
|
<OpenFileLink file={meta.file}>
|
|
{meta.book.title}
|
|
</OpenFileLink>
|
|
</td>
|
|
<td>
|
|
{meta.book.authors.join(", ")}
|
|
</td>
|
|
<td>
|
|
{meta.book.seriesTitle}
|
|
</td>
|
|
<td>
|
|
{meta.book.seriesPosition}
|
|
</td>
|
|
{#if settings.statusFilter === STATUS_IN_PROGRESS || settings.statusFilter === STATUS_READ}
|
|
<td>
|
|
<datetime
|
|
datetime={meta.book.startDate.format("LLLL")}
|
|
title={meta.book.startDate.format("LLLL")}
|
|
>
|
|
{meta.book.startDate.format("ll")}
|
|
</datetime>
|
|
</td>
|
|
{/if}
|
|
{#if settings.statusFilter === STATUS_READ}
|
|
<td>
|
|
<datetime
|
|
datetime={meta.book.endDate.format("LLLL")}
|
|
title={meta.book.endDate.format("LLLL")}
|
|
>
|
|
{meta.book.endDate.format("ll")}
|
|
</datetime>
|
|
</td>
|
|
<td>
|
|
<Rating rating={meta.book.rating} />
|
|
</td>
|
|
{/if}
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
|
|
<style lang="scss">
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
|
|
td {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
|
|
&.cover {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|