lucent-laravel/front/js/svelte/content/RecordRow.svelte

<script>
    import RenderField from "./RenderField.svelte";
    import Avatar from "../account/Avatar.svelte";
    import Status from "../records/Status.svelte";
    import {usernameById} from "../account/users";
    import {friendlyDate} from "../../helpers";

    export let schema;
    export let users;
    export let queryRecord;
    export let sortParam;
    export let sortField;
    export let visibleColumns;

</script>

{#each visibleColumns as field, index}
    <td
        class="field-ui-{field.info.name}"
        class:is-sort={field.name === sortField.name}
    >
        <RenderField {queryRecord}   {field}/>
    </td>
{/each}
{#if schema.visible.includes("status")}
    <td
        class="text-center"
        class:is-sort={"-status" == sortParam || "status" == sortParam}
    >
        <Status status={queryRecord.record.status}/>
    </td>
{/if}
{#if schema.visible.includes("_sys.createdBy")}
    <td
        class="text-center"
        class:is-sort={"-_sys.createdBy" == sortParam || "_sys.createdBy" == sortParam}
    >
        <Avatar name={usernameById(users, queryRecord.record._sys.createdBy)} side={24}/>
    </td>
{/if}
{#if schema.visible.includes("_sys.updatedBy")}
    <td
        class="text-center"
        class:is-sort={"-_sys.updatedBy" == sortParam || "_sys.updatedBy" == sortParam}
    >
        <Avatar name={usernameById(users, queryRecord.record._sys.updatedBy)} side={24}/>
    </td>
{/if}
{#if schema.visible.includes("_sys.createdAt")}
    <td class:is-sort={"-_sys.createdAt" == sortParam || "_sys.createdAt" == sortParam}>
        {friendlyDate(queryRecord.record._sys.createdAt)}
    </td>
{/if}
{#if schema.visible.includes("_sys.updatedAt")}
    <td class:is-sort={"-_sys.updatedAt" == sortParam || "_sys.updatedAt" == sortParam}>
        {friendlyDate(queryRecord.record._sys.updatedAt)}
    </td>
{/if}