Files
lucent-laravel/front/js/svelte/content/Table.svelte
T
2026-05-06 18:21:40 +03:00

119 lines
4.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}
<a
href="{channel.lucentUrl}/records/{record.id}"
target={inModal ? "_blank" : "_self"}
>
{#if record.status === "draft"}
<span
style="text-transform: uppercase;font-size:10px"
>{record.status}</span
>
{/if}
{record.data.name}
</a>
</div>
</td>
<RecordRow
{record}
{graph}
{schema}
{visibleColumns}
{sortParam}
{sortField}
{users}
/>
<td>
<Avatar
name={usernameById(users, record.updatedBy)}
side={24}
/>
</td>
</tr>
{/each}
</tbody>
</table>
</div>