fix: reset the edit dialog when switching books
This commit is contained in:
@@ -9,8 +9,17 @@
|
|||||||
let { book, open = $bindable() }: { book?: Book; open: boolean } = $props();
|
let { book, open = $bindable() }: { book?: Book; open: boolean } = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
This dialog is mounted once, in (root)/(library)/+layout.svelte, and `book`
|
||||||
|
changes underneath it as different books are edited. bookToEdit is never
|
||||||
|
cleared, so {#if book} stays true and the tab forms never unmount — they seed
|
||||||
|
local state from `book` on mount, so without this key you would open Edit on a
|
||||||
|
second book and see the first book's authors, tags and cover, then save them
|
||||||
|
onto the wrong record. Keying on the id remounts the forms per book.
|
||||||
|
-->
|
||||||
<Dialog.Root bind:open>
|
<Dialog.Root bind:open>
|
||||||
{#if book}
|
{#if book}
|
||||||
|
{#key book.id}
|
||||||
<Dialog.Content class="sm:max-w-xl">
|
<Dialog.Content class="sm:max-w-xl">
|
||||||
<Tabs.Root value="metadata" class="h-[500px] max-w-xl py-4 md:h-[700px]">
|
<Tabs.Root value="metadata" class="h-[500px] max-w-xl py-4 md:h-[700px]">
|
||||||
<Tabs.List class="grid w-full grid-cols-3">
|
<Tabs.List class="grid w-full grid-cols-3">
|
||||||
@@ -35,5 +44,6 @@
|
|||||||
</Tabs.Content>
|
</Tabs.Content>
|
||||||
</Tabs.Root>
|
</Tabs.Root>
|
||||||
</Dialog.Content>
|
</Dialog.Content>
|
||||||
|
{/key}
|
||||||
{/if}
|
{/if}
|
||||||
</Dialog.Root>
|
</Dialog.Root>
|
||||||
|
|||||||
@@ -18,7 +18,8 @@
|
|||||||
let { book, open = $bindable() }: { book: Book; open: boolean } = $props();
|
let { book, open = $bindable() }: { book: Book; open: boolean } = $props();
|
||||||
|
|
||||||
let formEl = $state<HTMLFormElement>();
|
let formEl = $state<HTMLFormElement>();
|
||||||
let coverImagePreview = $state(`/api/${book.cover_image}`);
|
// Seeded once per mount — see the key in edit-book.svelte
|
||||||
|
let coverImagePreview = $state(untrack(() => `/api/${book.cover_image}`));
|
||||||
let autoUploadOnDrop = $state(true);
|
let autoUploadOnDrop = $state(true);
|
||||||
|
|
||||||
const onUpload: FileDropZoneProps['onUpload'] = async (uploadedFiles) => {
|
const onUpload: FileDropZoneProps['onUpload'] = async (uploadedFiles) => {
|
||||||
|
|||||||
@@ -14,10 +14,12 @@
|
|||||||
|
|
||||||
let { book, open = $bindable() }: { book: Book; open: boolean } = $props();
|
let { book, open = $bindable() }: { book: Book; open: boolean } = $props();
|
||||||
|
|
||||||
let authors = $state(book.authors.map((author) => author.name) || []);
|
// Seeded once per mount; edit-book.svelte keys this form on book.id so a
|
||||||
let tags = $state(book.tags.map((tag) => tag.name) || []);
|
// different book gets a fresh form rather than the previous book's values.
|
||||||
let identifierKeys = $state(Object.keys(book.identifiers));
|
let authors = $state(untrack(() => book.authors.map((author) => author.name) || []));
|
||||||
let identifierValues = $state(Object.values(book.identifiers));
|
let tags = $state(untrack(() => book.tags.map((tag) => tag.name) || []));
|
||||||
|
let identifierKeys = $state(untrack(() => Object.keys(book.identifiers)));
|
||||||
|
let identifierValues = $state(untrack(() => Object.values(book.identifiers)));
|
||||||
|
|
||||||
function handleAddIdentifier() {
|
function handleAddIdentifier() {
|
||||||
// Add empty strings to both arrays
|
// Add empty strings to both arrays
|
||||||
|
|||||||
Reference in New Issue
Block a user