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

    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="lx-table rounded">
    <table class="">
        <thead class="table-light">
        <tr>
            {#if isWritable}
                <th>
                    <input
                            on:change|preventDefault={eventToggleAll}
                            indeterminate={selected.length > 0 &&
                            selected.length < records.length}
                            checked={selected.length == records.length}
                            class="form-check-input"
                            type="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}
                        data-bs-toggle="tooltip"
                        data-bs-placement="top">{field.label}</th
                >
            {/each}
            {#each systemFields.filter(c => schema.visible.includes(c.name)) as sysField}
                <th>{sysField.label}</th>
            {/each}
        </tr>
        </thead>
        <tbody>
        {#each records as record (record.id)}
            <tr>
                <td class="title-td">
                    <div
                            class="title-td-contents d-inline-flex justify-content-between w-100 align-items-center"
                    >
                        <div class="d-flex align-items-center ">
                            {#if isWritable}
                                <div class="form-check">
                                    <input
                                            on:change={() => select(record)}
                                            class="form-check-input "
                                            type="checkbox"
                                            checked={selected.find(
                                            (r) => r.id === record.id
                                        )}
                                            value={record}
                                    />
                                </div>
                            {/if}

                            <a

                                    class="me-2 text-decoration-none text-dark fs-6"
                                    href="{channel.lucentUrl}/records/{record.id}"
                                    target={inModal ? "_blank" : "_self"}
                                    title={previewTitle(channel.schemas, record, graph)}
                                    data-bs-toggle="tooltip" data-bs-placement="left"

                            >
                                {previewTitle(channel.schemas, record, graph)}
                            </a>
                        </div>
                        <div>
                            <Avatar
                                    name={usernameById(
                                        users,
                                        record._sys.updatedBy
                                    )}
                                    side={24}
                            />
                        </div>
                    </div>
                </td>
                <RecordRow
                        {record}
                        {graph}
                        {schema}
                        {visibleColumns}
                        {sortParam}
                        {sortField}
                        {users}
                />
            </tr>
        {/each}
        </tbody>
    </table>
</div>