143 lines
5.1 KiB
Svelte
143 lines
5.1 KiB
Svelte
<script>
|
|
import RecordRow from "./RecordRow.svelte";
|
|
import {previewTitle} from "../records/Preview";
|
|
import {usernameById} from "../account/users";
|
|
import {getContext} from "svelte";
|
|
import Avatar from "../account/Avatar.svelte";
|
|
import {selectRecord, toggleAll} from "./functions/recordSelect.js";
|
|
import Checkbox from "../common/Checkbox.svelte";
|
|
import Preview from "../files/Preview.svelte";
|
|
import {fileurl} from "../files/imageserver.js";
|
|
|
|
const channel = getContext("channel");
|
|
|
|
export let schema;
|
|
export let users;
|
|
export let records;
|
|
export let graph;
|
|
export let systemFields;
|
|
export let sortParam;
|
|
export let sortField;
|
|
export let inModal;
|
|
export let isWritable;
|
|
export let selected = [];
|
|
|
|
function eventToggleAll(e) {
|
|
selected = toggleAll(e, records, selected)
|
|
}
|
|
|
|
function select(record) {
|
|
selected = selectRecord(record, selected)
|
|
}
|
|
|
|
$: visibleColumns = schema.fields.filter(c => schema.visible?.includes(c.name) ?? [])
|
|
</script>
|
|
|
|
<div class="table mt-5 ">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
{#if isWritable}
|
|
<th>
|
|
<Checkbox
|
|
value=""
|
|
on:change={eventToggleAll}
|
|
indeterminate={selected.length > 0 && selected.length < records.length}
|
|
checked={selected.length === records.length}
|
|
>
|
|
</Checkbox>
|
|
</th>
|
|
{/if}
|
|
|
|
{#each visibleColumns as field}
|
|
<th
|
|
class="field-ui-{field.info.name ?? field.ui}"
|
|
class:is-sort={field.name === sortField.name}
|
|
scope="col"
|
|
title={field.help}
|
|
>{field.label}</th
|
|
>
|
|
{/each}
|
|
{#each systemFields.filter(c => schema.visible?.includes(c.name)) as sysField}
|
|
<th class:is-sort={sysField.name === sortField.name}>{sysField.label}</th>
|
|
{/each}
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each records as record (record.id)}
|
|
<tr>
|
|
<td class="title-td">
|
|
<div
|
|
class="title-td-contents"
|
|
>
|
|
{#if isWritable}
|
|
<Checkbox
|
|
on:change={() => select(record)}
|
|
checked={selected.find((r) => r.id === record.id)}
|
|
value={record}
|
|
>
|
|
</Checkbox>
|
|
|
|
{/if}
|
|
{#if record._file?.path}
|
|
<div class="file-table-row">
|
|
<Preview record={record} size={record._file?.width > 0 ? "medium" : "small"}/>
|
|
<div>
|
|
<a
|
|
href="{channel.lucentUrl}/records/{record.id}"
|
|
target={inModal ? "_blank" : "_self"}
|
|
>
|
|
{previewTitle(channel.schemas, record, graph)}
|
|
</a>
|
|
<span>{(record._file.size / 1024).toFixed(1)}kB</span>
|
|
|
|
{#if record._file.width > 0}
|
|
<span>{record._file.width + "x" + record._file.height}</span>
|
|
{/if}
|
|
<a
|
|
href="{fileurl(channel,record)}"
|
|
target="_blank"
|
|
>
|
|
Download
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
{:else}
|
|
<a
|
|
href="{channel.lucentUrl}/records/{record.id}"
|
|
target={inModal ? "_blank" : "_self"}
|
|
>
|
|
{previewTitle(channel.schemas, record, graph)}
|
|
</a>
|
|
{/if}
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<RecordRow
|
|
{record}
|
|
{graph}
|
|
{schema}
|
|
{visibleColumns}
|
|
{sortParam}
|
|
{sortField}
|
|
{users}
|
|
/>
|
|
<td>
|
|
<Avatar
|
|
name={usernameById(
|
|
users,
|
|
record._sys.updatedBy
|
|
)}
|
|
side={24}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|