patrick/chitai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: reset the edit dialog when switching books

Browse Source
This commit is contained in:
patrick
2026-08-11 20:23:31 -04:00
parent d8f8a0ab95
commit d2892353cb
3 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/forms/edit-book/edit-book.svelte
+10
View File
@@ -9,8 +9,17 @@
let { book, open = $bindable() }: { book?: Book; open: boolean } = $props();
</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>
{#if book}
{#key book.id}
<Dialog.Content class="sm:max-w-xl">
<Tabs.Root value="metadata" class="h-[500px] max-w-xl py-4 md:h-[700px]">
<Tabs.List class="grid w-full grid-cols-3">
@@ -35,5 +44,6 @@
</Tabs.Content>
</Tabs.Root>
</Dialog.Content>
{/key}
{/if}
</Dialog.Root>
frontend/src/lib/components/forms/edit-book/edit-cover.svelte
+2 -1
View File
@@ -18,7 +18,8 @@
let { book, open = $bindable() }: { book: Book; open: boolean } = $props();
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);
const onUpload: FileDropZoneProps['onUpload'] = async (uploadedFiles) => {
frontend/src/lib/components/forms/edit-book/edit-metadata.svelte
+6 -4
View File
@@ -14,10 +14,12 @@
let { book, open = $bindable() }: { book: Book; open: boolean } = $props();
let authors = $state(book.authors.map((author) => author.name) || []);
let tags = $state(book.tags.map((tag) => tag.name) || []);
let identifierKeys = $state(Object.keys(book.identifiers));
let identifierValues = $state(Object.values(book.identifiers));
// Seeded once per mount; edit-book.svelte keys this form on book.id so a
// different book gets a fresh form rather than the previous book's values.
let authors = $state(untrack(() => book.authors.map((author) => author.name) || []));
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() {
// Add empty strings to both arrays