127 lines
4.8 KiB
Svelte
127 lines
4.8 KiB
Svelte
<script>
|
|
// import RecordRow from "./RecordRow.svelte";
|
|
// import { previewTitle } from "../records/Preview";
|
|
// import { usernameById } from "../account/users";
|
|
// import Avatar from "../../common/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";
|
|
import { getApp } from "../../app";
|
|
|
|
let { channel, records = [], fields = [], inModal = false } = $props();
|
|
let params = new URLSearchParams(document.location.search);
|
|
let columns = $state(params.get("columns")?.split(",") || []);
|
|
let visibleFields = $derived(fields.filter((f) => columns.includes(f.id)));
|
|
// 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 = [];
|
|
const app = getApp();
|
|
|
|
// 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>
|
|
<!-- <th>
|
|
<Checkbox
|
|
value=""
|
|
on:change={eventToggleAll}
|
|
indeterminate={selected.length > 0 &&
|
|
selected.length < records.length}
|
|
checked={selected.length === records.length}
|
|
></Checkbox>
|
|
</th> -->
|
|
<th>Title</th>
|
|
|
|
{#each visibleFields as field}
|
|
<th scope="col" title={field.help}>{field.name}</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 qRecord (qRecord.record.id)}
|
|
<tr>
|
|
<td class="title-td">
|
|
<div class="title-td-contents">
|
|
<!-- <Checkbox
|
|
on:change={() => select(record)}
|
|
checked={selected.find(
|
|
(r) => r.id === record.id,
|
|
)}
|
|
value={record}
|
|
></Checkbox> -->
|
|
|
|
<a
|
|
href="{app.url('records/')}{qRecord.record.id}"
|
|
target={inModal ? "_blank" : "_self"}
|
|
>
|
|
<!-- {#if record.status === "draft"}
|
|
<span
|
|
style="text-transform: uppercase;font-size:10px"
|
|
>{record.status}</span
|
|
>
|
|
{/if} -->
|
|
<!-- {previewTitle(channel.schemas, record, graph)} -->
|
|
{qRecord.recordPreview.title}
|
|
</a>
|
|
</div>
|
|
</td>
|
|
{#each visibleFields as field}
|
|
<td>
|
|
{qRecord.data.find((f) => f.fieldId === field.id)
|
|
?.value}
|
|
|
|
<ul>
|
|
{#each qRecord.children.filter((e) => e.edge.fieldId === field.id) as child}
|
|
<li>{child.recordPreview.title}</li>
|
|
{/each}
|
|
</ul>
|
|
</td>
|
|
{/each}
|
|
<!-- <RecordRow
|
|
{record}
|
|
{graph}
|
|
{schema}
|
|
{visibleColumns}
|
|
{sortParam}
|
|
{sortField}
|
|
{users}
|
|
/> -->
|
|
<!-- <td>
|
|
<Avatar
|
|
name={usernameById(users, record._sys.updatedBy)}
|
|
side={24}
|
|
/>
|
|
</td> -->
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|