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.
95 lines
2.8 KiB
Svelte
95 lines
2.8 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 "@tslib/ftl";
|
|
|
|
import IconButton from "../components/IconButton.svelte";
|
|
import VirtualTable from "../components/VirtualTable.svelte";
|
|
import { magnifyIcon } from "./icons";
|
|
import { getRows, showInBrowser } from "./lib";
|
|
import TableCellWithTooltip from "./TableCellWithTooltip.svelte";
|
|
import type { SummarizedLogQueues } from "./types";
|
|
|
|
export let summaries: SummarizedLogQueues[];
|
|
export let bottomOffset: number = 0;
|
|
|
|
$: rows = getRows(summaries);
|
|
</script>
|
|
|
|
<details>
|
|
<summary>{tr.importingDetails()}</summary>
|
|
<VirtualTable
|
|
class="details-table"
|
|
itemHeight={50}
|
|
itemsCount={rows.length}
|
|
bind:bottomOffset
|
|
>
|
|
<tr slot="headers">
|
|
<th>#</th>
|
|
<th>{tr.importingStatus()}</th>
|
|
<th>{tr.editingFields()}</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]);
|
|
}}
|
|
>
|
|
{@html magnifyIcon}
|
|
</IconButton>
|
|
</td>
|
|
</tr>
|
|
</svelte:fragment>
|
|
</VirtualTable>
|
|
</details>
|
|
|
|
<style lang="scss">
|
|
:global(.details-table) {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
|
|
:global(.search-icon) {
|
|
border: none !important;
|
|
background: transparent !important;
|
|
}
|
|
tr {
|
|
height: 50px;
|
|
text-align: center;
|
|
}
|
|
.index-cell {
|
|
width: 6em;
|
|
}
|
|
:global(.status-cell) {
|
|
width: 5em;
|
|
}
|
|
:global(.contents-cell) {
|
|
text-align: left;
|
|
}
|
|
:global(.search-cell) {
|
|
width: 4em;
|
|
}
|
|
}
|
|
</style>
|