Anki/ts/routes/import-page/DetailsTable.svelte
Abdo bf46a5f08c
Update to Svelte 5 (#3292)
* Update to Svelte 5

* Fix `<tr> is invalid inside <table>`

* Update sveltekit-svg to match svelte version

Fixes deck options failing to load, and a bunch of warnings with
./yarn dev

* Fix graph tooltips

* Fix editor loading

* Fix MathJax editor not loading

* Formatting

* Fix new formatting errors

* Merge remote-tracking branch 'origin/main' into svelte5

* Remove slot inside EditorToolbar

I think this is just stray code left over from a refactor, but I'm
not 100% sure.

Fixes
Error: Object literal may only specify known properties, and 'children' does not exist in type '{ size: number; wrap: boolean; api?: Partial<EditorToolbarAPI> | undefined; }'. (ts)
<div class="note-editor">
    <EditorToolbar {size} {wrap} api={toolbar}>
        <slot slot="notetypeButtons" name="notetypeButtons" />

* Fix component typing error

* Comment out svelte/internal exports, so editor loads

* Fix image occlusions in editor

* Revert "Remove slot inside EditorToolbar"

This reverts commit b3095e07ac,
which prevented the Preview button from showing in the browser.

This will break our tests again.

* Update vite

* Disable routes/tmp for now

* Fix references issue in routes/tmp
2024-09-25 18:49:07 +10:00

98 lines
3 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 * as tr from "@generated/ftl";
import Icon from "$lib/components/Icon.svelte";
import IconButton from "$lib/components/IconButton.svelte";
import { magnifyIcon } from "$lib/components/icons";
import VirtualTable from "$lib/components/VirtualTable.svelte";
import { getRows, showInBrowser } from "./lib";
import TableCellWithTooltip from "./TableCellWithTooltip.svelte";
import type { SummarizedLogQueues } from "./types";
export let summaries: SummarizedLogQueues[];
export let bottomOffset: number = 0;
let bottom: HTMLElement;
$: rows = getRows(summaries);
</script>
<div bind:this={bottom}>
{#if bottom}
<VirtualTable
class="details-table"
itemHeight={40}
itemsCount={rows.length}
{bottomOffset}
>
<tr slot="headers">
<th>#</th>
<th>{tr.importingStatus()}</th>
<th>{tr.editingFields()}</th>
<th></th>
</tr>
<svelte:fragment slot="row" let:index>
<tr>
<td class="index-cell">{index + 1}</td>
<TableCellWithTooltip
class="status-cell"
tooltip={rows[index].queue.reason}
>
{rows[index].summary.action}
</TableCellWithTooltip>
<TableCellWithTooltip
class="contents-cell"
tooltip={rows[index].note.fields.join(",")}
>
{rows[index].note.fields.join(",")}
</TableCellWithTooltip>
<td class="search-cell">
<IconButton
class="search-icon"
iconSize={100}
active={false}
disabled={!rows[index].summary.canBrowse}
on:click={() => {
showInBrowser([rows[index].note]);
}}
>
<Icon icon={magnifyIcon} />
</IconButton>
</td>
</tr>
</svelte:fragment>
</VirtualTable>
{/if}
</div>
<style lang="scss">
:global(.details-table) {
margin: 0 auto;
width: 100%;
:global(.search-icon) {
border: none !important;
background: transparent !important;
}
tr {
height: 40px;
text-align: center;
}
.index-cell {
width: 3em;
}
:global(.status-cell) {
width: 5em;
}
:global(.contents-cell) {
text-align: left;
}
:global(.search-cell) {
width: 3em;
}
}
</style>