anki/ts/import-csv/Preview.svelte
RumovZ 6da5e5b042
CSV import/export fixes and features (#1898)
* Fix footer moving upwards

* Fix column detection

Was broken because escaped line breaks were not considered.
Also removes delimiter detection on `#columns:` line. User must use tabs
or set delimiter beforehand.

* Add CSV preview

* Parse `#tags column:`

* Optionally export deck and notetype with CSV

* Avoid clones in CSV export

* Prevent bottom of page appearing under footer (dae)

* Increase padding to 1em (dae)

With 0.5em, when a vertical scrollbar is shown, it sits right next to
the right edge of the content, making it look like there's no right
margin.

* Experimental changes to make table fit+scroll (dae)

- limit individual cells to 15em, and show ellipses when truncated
- limit total table width to body width, so that inner table is shown
with scrollbar
- use class rather than id - ids are bad practice in Svelte components,
as more than one may be displayed on a single page

* Skip importing foreign notes with filtered decks

Were implicitly imported into the default deck before.
Also some refactoring to fetch deck ids and names beforehand.

* Hide spacer below hidden field mapping

* Fix guid being replaced when updating note

* Fix dupe identity check

Canonify tags before checking if dupe is identical, but only add update
tags later if appropriate.

* Fix deck export for notes with missing card 1

* Fix note lines starting with `#`

csv crate doesn't support escaping a leading comment char. :(

* Support import/export of guids

* Strip HTML from preview rows

* Fix initially set deck if current is filtered

* Make isHtml toggle reactive

* Fix `html_to_text_line()` stripping sound names

* Tweak export option labels

* Switch to patched rust-csv fork

Fixes writing lines starting with `#`, so revert 5ece10ad05f331.

* List column options with first column field

* Fix flag for exports with HTML stripped
2022-06-09 10:28:01 +10:00

66 lines
1.5 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import type { Generic } from "../lib/proto";
import type { ColumnOption } from "./lib";
export let columnOptions: ColumnOption[];
export let preview: Generic.StringList[];
</script>
<div class="outer">
<table class="preview">
{#each columnOptions.slice(1) as { label, shortLabel }}
<th>
{shortLabel || label}
</th>
{/each}
{#each preview as row}
<tr>
{#each row.vals as cell}
<td>{cell}</td>
{/each}
</tr>
{/each}
</table>
</div>
<style lang="scss">
.outer {
// approximate size based on body max width + margins
width: min(90vw, 65em);
overflow: auto;
}
.preview {
border-collapse: collapse;
white-space: nowrap;
th,
td {
text-overflow: ellipsis;
overflow: hidden;
border: 1px solid var(--faint-border);
padding: 0.25rem 0.5rem;
max-width: 15em;
}
th {
background: var(--medium-border);
text-align: center;
}
tr {
&:nth-child(even) {
background: var(--frame-bg);
}
}
td {
text-align: start;
}
}
</style>