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 "../../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";

    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}
                                        size={record._file?.width > 0
                                            ? "medium"
                                            : "small"}
                                    />

                                    <div>
                                        {#if record.status === "draft"}
                                            <span
                                                style="text-transform: uppercase;font-size:10px"
                                                >{record.status}</span
                                            >
                                        {/if}
                                        <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"}
                                >
                                    {#if record.status === "draft"}
                                        <span
                                            style="text-transform: uppercase;font-size:10px"
                                            >{record.status}</span
                                        >
                                    {/if}
                                    {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>