lucent-laravel/front/js/svelte/records/previews/PreviewReference.svelte

<script>
    import Icon from "../../common/Icon.svelte";

    import {createEventDispatcher, getContext} from "svelte";
    import {previewTitle} from "./../Preview";
    import Status from "./../Status.svelte";
    import Preview from "../../files/Preview.svelte";

    const dispatch = createEventDispatcher();
    const channel = getContext("channel");
    export let graph;
    export let record;
    export let hasDelete = false;

    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
    let cardTitle = previewTitle(channel.schemas, record, graph);
    const cardImageEdge = graph.edges.find(e => e.source === record.id  && e.field === schema.cardImage);
    let cardImageRecord = graph.records.find(r => r.id === cardImageEdge?.target);

    function remove(e) {
        e.preventDefault();
        dispatch("remove", record.id);
    }
</script>


<div class="preview-reference">
    <div style="display: flex;align-items: center;gap: 10px;">

        {#if cardImageRecord}
            <div class="image">
                <Preview record={cardImageRecord} size="small"/>
            </div>
        {/if}
        <div class="title">
            <div>
                <a
                        class="record-title"
                        href="{channel.lucentUrl}/records/{record.id}"
                >
                    {cardTitle}
                </a>
                <small class="d-block">
                    from {schema.label}
                    {#if record.status === "draft"}
                        <Status status={record.status}/>
                    {/if}
                </small>

            </div>

        </div>
    </div>
    {#if hasDelete}
        <div class="reference-action">
            <button
                    class="button"
                    on:click={remove}
            >
                <Icon icon="trash-can"/>
            </button>
        </div>
    {/if}
</div>