-
{source}
-
->
-
+
+ {#each dbFields as dbField}
+ {@const isMandatory = MANDATORY_FIELDS.includes(dbField)}
+ {@const config = mapping[dbField] ?? { source: '', transform: null }}
+ {@const currentSource = config.source ?? ''}
+ {@const hasTransform = Boolean(config.transform)}
+
+
+
+ {dbField}
+ {#if isMandatory}
+ *
+ {/if}
+
+
<-
+
+
+ {#if currentSource}
+ {#if dbField === 'cover_url'}
+
+
+ {$_('data.import.coverUrlHint')}
+
+ {/if}
+
+
+ {#if transformOpen[dbField] || hasTransform}
+
+
+
{@html highlightPython(config.transform ?? '')}
+
+
+
+ {$_('data.import.transformHelp')}
+
+
value {$_('data.import.transformHelpValue')}
+
row {$_('data.import.transformHelpRow')}
+
context {$_('data.import.transformHelpContext')}
+
{$_('data.import.transformHelpReturn')}
+
{$_('data.import.transformHelpImports')}
+
+
+ {/if}
+
+ {/if}
{/each}
+
+
+ * {$_('data.import.requiredField')}
+
+
+
diff --git a/frontend/src/lib/components/ImportMappingEditor.test.ts b/frontend/src/lib/components/ImportMappingEditor.test.ts
index db4de7e..6fae399 100644
--- a/frontend/src/lib/components/ImportMappingEditor.test.ts
+++ b/frontend/src/lib/components/ImportMappingEditor.test.ts
@@ -1,27 +1,41 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import ImportMappingEditor from './ImportMappingEditor.svelte';
describe('ImportMappingEditor', () => {
const onChange = vi.fn();
const sourceFields = ['Author', 'Title', 'ISBN'];
- const dbFields = ['author', 'title', 'isbn', 'publisher'];
+ const dbFields = ['author', 'title', 'isbn', 'publisher', 'page_count'];
- it('renders all source fields', () => {
+ beforeEach(() => {
+ onChange.mockClear();
+ });
+
+ it('renders all db target fields', () => {
+ render(ImportMappingEditor, {
+ props: { sourceFields, dbFields, mapping: {}, onChange }
+ });
+ expect(screen.getByText('author')).toBeInTheDocument();
+ expect(screen.getByText('title')).toBeInTheDocument();
+ expect(screen.getByText('isbn')).toBeInTheDocument();
+ expect(screen.getByText('publisher')).toBeInTheDocument();
+ expect(screen.getByText('page_count')).toBeInTheDocument();
+ });
+
+ it('marks mandatory fields with asterisk', () => {
render(ImportMappingEditor, {
props: { sourceFields, dbFields, mapping: {}, onChange }
});
- expect(screen.getByText('Author')).toBeInTheDocument();
- expect(screen.getByText('Title')).toBeInTheDocument();
- expect(screen.getByText('ISBN')).toBeInTheDocument();
+ const mandatory = screen.getAllByText('*');
+ expect(mandatory.length).toBeGreaterThanOrEqual(3); // title, author, page_count (+ legend)
});
- it('renders skip option for each source field', () => {
+ it('renders a select for each db field with none option', () => {
render(ImportMappingEditor, {
props: { sourceFields, dbFields, mapping: {}, onChange }
});
const selects = screen.getAllByRole('combobox');
- expect(selects).toHaveLength(3);
+ expect(selects).toHaveLength(5); // one per db field
selects.forEach((select) => {
expect(select).toHaveValue('');
});
@@ -32,23 +46,31 @@ describe('ImportMappingEditor', () => {
props: {
sourceFields,
dbFields,
- mapping: { Author: 'author', Title: 'title' },
+ mapping: {
+ author: { source: 'Author', transform: null },
+ title: { source: 'Title', transform: null }
+ },
onChange
}
});
- const selects = screen.getAllByRole('combobox');
- expect(selects[0]).toHaveValue('author');
- expect(selects[1]).toHaveValue('title');
- expect(selects[2]).toHaveValue('');
+ // author row should show "Author" selected
+ const authorSelect = screen.getByRole('combobox', { name: /Map source for author/i });
+ expect(authorSelect).toHaveValue('Author');
+ // title row should show "Title" selected
+ const titleSelect = screen.getByRole('combobox', { name: /Map source for title/i });
+ expect(titleSelect).toHaveValue('Title');
+ // isbn row should show empty
+ const isbnSelect = screen.getByRole('combobox', { name: /Map source for isbn/i });
+ expect(isbnSelect).toHaveValue('');
});
- it('calls onChange when mapping is updated', async () => {
+ it('calls onChange when mapping is created', async () => {
render(ImportMappingEditor, {
props: { sourceFields, dbFields, mapping: {}, onChange }
});
- const selects = screen.getAllByRole('combobox');
- await fireEvent.change(selects[0], { target: { value: 'author' } });
- expect(onChange).toHaveBeenCalledWith({ Author: 'author' });
+ const authorSelect = screen.getByRole('combobox', { name: /Map source for author/i });
+ await fireEvent.change(authorSelect, { target: { value: 'Author' } });
+ expect(onChange).toHaveBeenCalledWith({ author: { source: 'Author', transform: null } });
});
it('calls onChange when mapping is cleared', async () => {
@@ -56,26 +78,72 @@ describe('ImportMappingEditor', () => {
props: {
sourceFields,
dbFields,
- mapping: { Author: 'author' },
+ mapping: { author: { source: 'Author', transform: null } },
onChange
}
});
- const selects = screen.getAllByRole('combobox');
- await fireEvent.change(selects[0], { target: { value: '' } });
- expect(onChange).toHaveBeenCalledWith({});
+ const authorSelect = screen.getByRole('combobox', { name: /Map source for author/i });
+ await fireEvent.change(authorSelect, { target: { value: '' } });
+ expect(onChange).toHaveBeenCalledWith({ author: { source: '', transform: null } });
});
- it('calls onChange when mapping is changed', async () => {
+ it('allows same source field mapped to multiple targets', async () => {
render(ImportMappingEditor, {
props: {
sourceFields,
dbFields,
- mapping: { Author: 'author' },
+ mapping: { author: { source: 'Author', transform: null } },
onChange
}
});
- const selects = screen.getAllByRole('combobox');
- await fireEvent.change(selects[0], { target: { value: 'title' } });
- expect(onChange).toHaveBeenCalledWith({ Author: 'title' });
+ const titleSelect = screen.getByRole('combobox', { name: /Map source for title/i });
+ await fireEvent.change(titleSelect, { target: { value: 'Author' } });
+ // Author should now map to both title and author
+ expect(onChange).toHaveBeenCalledWith({
+ title: { source: 'Author', transform: null },
+ author: { source: 'Author', transform: null }
+ });
+ });
+
+ it('shows transform textarea after clicking expand', async () => {
+ render(ImportMappingEditor, {
+ props: {
+ sourceFields,
+ dbFields,
+ mapping: { author: { source: 'Author', transform: null } },
+ onChange
+ }
+ });
+ await fireEvent.click(screen.getByText('Transform (Python)'));
+ expect(screen.getByLabelText(/Transform for author/i)).toBeInTheDocument();
+ });
+
+ it('calls onChange with transform when typing in transform textarea', async () => {
+ render(ImportMappingEditor, {
+ props: {
+ sourceFields,
+ dbFields,
+ mapping: { author: { source: 'Author', transform: null } },
+ onChange
+ }
+ });
+ await fireEvent.click(screen.getByText('Transform (Python)'));
+ const textarea = screen.getByLabelText(/Transform for author/i);
+ await fireEvent.input(textarea, { target: { value: 'value.upper()' } });
+ expect(onChange).toHaveBeenCalledWith({ author: { source: 'Author', transform: 'value.upper()' } });
+ });
+
+ it('clears transform via onChange when source is cleared', async () => {
+ render(ImportMappingEditor, {
+ props: {
+ sourceFields,
+ dbFields,
+ mapping: { author: { source: 'Author', transform: 'value.upper()' } },
+ onChange
+ }
+ });
+ const authorSelect = screen.getByRole('combobox', { name: /Map source for author/i });
+ await fireEvent.change(authorSelect, { target: { value: '' } });
+ expect(onChange).toHaveBeenCalledWith({ author: { source: '', transform: null } });
});
});
diff --git a/frontend/src/lib/components/ImportSearch.svelte b/frontend/src/lib/components/ImportSearch.svelte
index a92422e..fed2294 100644
--- a/frontend/src/lib/components/ImportSearch.svelte
+++ b/frontend/src/lib/components/ImportSearch.svelte
@@ -4,6 +4,7 @@
import { api } from '$lib/api';
import { _ } from '$lib/i18n';
import { toasts } from '$lib/toasts';
+ import { ScanBarcode } from '@lucide/svelte';
let {
onImport,
@@ -35,6 +36,7 @@
onMount(async () => {
cameraSupported =
typeof navigator !== 'undefined' &&
+ window.isSecureContext &&
!!navigator.mediaDevices &&
typeof navigator.mediaDevices.getUserMedia === 'function';
await refreshImportedLookups();
@@ -136,8 +138,8 @@
async function refreshImportedLookups() {
try {
- const books = await api.books.list();
- updateImportedLookups(books);
+ const response = await api.books.list();
+ updateImportedLookups(response.books);
} catch {
// Best-effort only; search and import still works without markers.
}
@@ -240,44 +242,45 @@
}
-
-
+
+
e.key === 'Enter' && search()}
/>
-
- {#if cameraSupported}
+
+
+
+
+
+ {#if cameraSupported}
+
+
+
+
{$_('import.or')}
+
+
- {/if}
-
-
+
+ {/if}
{#if stages.length > 0}
diff --git a/frontend/src/lib/components/Logo.svelte b/frontend/src/lib/components/Logo.svelte
new file mode 100644
index 0000000..baa61d6
--- /dev/null
+++ b/frontend/src/lib/components/Logo.svelte
@@ -0,0 +1,72 @@
+
+
+
diff --git a/frontend/src/lib/components/SearchBar.svelte b/frontend/src/lib/components/SearchBar.svelte
index fa100d7..8771733 100644
--- a/frontend/src/lib/components/SearchBar.svelte
+++ b/frontend/src/lib/components/SearchBar.svelte
@@ -1,5 +1,6 @@
-
diff --git a/frontend/src/lib/components/SuggestionInput.svelte b/frontend/src/lib/components/SuggestionInput.svelte
index ec9fa4a..54356ff 100644
--- a/frontend/src/lib/components/SuggestionInput.svelte
+++ b/frontend/src/lib/components/SuggestionInput.svelte
@@ -3,12 +3,14 @@
value = $bindable(''),
label = '',
placeholder = '',
+ name = '',
disabled = false,
fetchSuggestions = async (_q: string): Promise => []
}: {
value?: string;
label?: string;
placeholder?: string;
+ name?: string;
disabled?: boolean;
fetchSuggestions?: (query: string) => Promise;
} = $props();
@@ -20,6 +22,24 @@
let isLoading = $state(false);
let debounceTimer: ReturnType | undefined = $state();
let containerEl: HTMLDivElement | undefined = $state();
+ let dropdownStyle = $state('');
+ let inputEl: HTMLInputElement | undefined = $state();
+
+ $effect(() => {
+ inputValue = value;
+ });
+
+ $effect(() => {
+ if (!isOpen || !inputEl) return;
+ const rect = inputEl.getBoundingClientRect();
+ const spaceBelow = window.innerHeight - rect.bottom;
+ const dropdownHeight = Math.min(192, suggestions.length * 36 + 16);
+ if (spaceBelow >= dropdownHeight + 8) {
+ dropdownStyle = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;width:${rect.width}px`;
+ } else {
+ dropdownStyle = `position:fixed;bottom:${window.innerHeight - rect.top + 4}px;left:${rect.left}px;width:${rect.width}px`;
+ }
+ });
function handleInput() {
value = inputValue;
@@ -92,20 +112,22 @@
}
-
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+
+ 
+ 
+