lucent-laravel/front/js/svelte/content/Table.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";

    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}
                            <Preview record={record} size={record._file?.width > 0 ? "medium" : "tiny"}/>
                        {/if}
                        <a
                                class="me-2 text-decoration-none text-dark fs-6"
                                href="{channel.lucentUrl}/records/{record.id}"
                                target={inModal ? "_blank" : "_self"}
                        >
                            {previewTitle(channel.schemas, record, graph)}
                        </a>

                    </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>