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

<script>
    import {getContext} from "svelte";
    import {selectRecord} from "./functions/recordSelect.js";
    import Preview from "../newPreview/Preview.svelte";

    const channel = getContext("channel");

    export let records;
    export let isWritable;
    export let selected = [];

    function select(record) {
        selected = selectRecord(record, selected)
    }


</script>
<div class="row" style="max-width:1000px">
    {#each records as queryRecord (queryRecord.record.id)}
        <div class="col-6 col-md-4">
            <div
                    class="file-wrapper rounded p-2 mb-4 bg-light"
                    class:selected={selected.includes(queryRecord)}
            >
                {#if isWritable}
                    <div class="form-check">
                        <input
                                on:change={() => select(queryRecord.record)}
                                class="form-check-input "
                                type="checkbox"
                                checked={selected.find(
                                        (r) => r.id === queryRecord.record.id
                                    )}
                                value={queryRecord}
                        />
                    </div>
                {/if}
                <div class="d-flex justify-content-center">
                    <Preview record={queryRecord.record}  />
                </div>

                <a
                        href="{channel.lucentUrl}/records/{queryRecord.record.id}"
                        title={queryRecord.record._file.path}
                        class="d-block text-center overflow-hidden text-nowrap my-2 "
                        style="
                                        text-overflow: ellipsis;
                                        font-size: 13px;
                                        color: #333;
                                    ">{queryRecord.record._file.path}</a
                >
                <span
                        class="lx-small-text text-muted d-block text-center"
                >{queryRecord.record._file.mime}</span
                >
            </div>
        </div>
    {/each}
</div>


<style>
    .form-check {
        display: inline-block;
        margin-bottom: 0;
    }
</style>