850043b49b
* Make enum selector generic
* Refactor ImportCsvPage to support tooltips
* Improve csv import defaults
* Unify import pages
* Improve import page styling
* Fix life cycle issue with import properties
* Remove size constraints to fix scrollbar styling
* Add help strings and urls to csv import page
* Show ErrorPage on ImportPage error
* Fix escaping of import path
* Unify ImportPage and ImportLogPage
* Apply suggestions from code review (dae)
* Fix import progress
* Fix preview overflowing container
* Don't include <br> in FileIoErrors (dae)
e.g. 500: Failed to read '/home/dae/foo2.csv':<br>stream did not contain valid UTF-8
I thought about using {@html ...} here, but that's a potential security issue,
as the filename is not something we control.
68 lines
1.9 KiB
Svelte
68 lines
1.9 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script context="module" lang="ts">
|
|
export interface Importer {
|
|
doImport: () => Promise<ImportResponse>;
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { ImportResponse } from "@tslib/anki/import_export_pb";
|
|
import { importDone } from "@tslib/backend";
|
|
|
|
import BackendProgressIndicator from "../components/BackendProgressIndicator.svelte";
|
|
import Container from "../components/Container.svelte";
|
|
import ErrorPage from "../components/ErrorPage.svelte";
|
|
import StickyHeader from "../components/StickyHeader.svelte";
|
|
import ImportLogPage from "./ImportLogPage.svelte";
|
|
|
|
export let path: string;
|
|
export let importer: Importer;
|
|
export const noOptions: boolean = false;
|
|
|
|
let importResponse: ImportResponse | undefined = undefined;
|
|
let error: Error | undefined = undefined;
|
|
let importing = noOptions;
|
|
|
|
async function onImport(): Promise<ImportResponse> {
|
|
const result = await importer.doImport();
|
|
await importDone({});
|
|
importing = false;
|
|
return result;
|
|
}
|
|
</script>
|
|
|
|
{#if error}
|
|
<ErrorPage {error} />
|
|
{:else if importResponse}
|
|
<ImportLogPage response={importResponse} />
|
|
{:else if importing}
|
|
<BackendProgressIndicator task={onImport} bind:result={importResponse} bind:error />
|
|
{:else}
|
|
<div class="pre-import-page">
|
|
<StickyHeader {path} onImport={() => (importing = true)} />
|
|
<Container
|
|
breakpoint="sm"
|
|
--gutter-inline="0.25rem"
|
|
--gutter-block="0.75rem"
|
|
class="container-columns"
|
|
>
|
|
<slot />
|
|
</Container>
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
:global(.row) {
|
|
// rows have negative margins by default
|
|
--bs-gutter-x: 0;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.pre-import-page {
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|