lucent-laravel/front/js/svelte/records/PreviewCard.svelte

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

    import {getContext, createEventDispatcher} from "svelte";
    import {previewEdgeTitle, previewTitle} from "./Preview";
    import Status from "./Status.svelte";
    import Preview from "../newPreview/Preview.svelte";
    import EdgeData from "./form/references/EdgeData.svelte";

    const dispatch = createEventDispatcher();
    const channel = getContext("channel");
    export let record;
    export let field;
    export let edge = null;
    export let editable = false;
    export let classes = "";
    export let hasDelete = false;

    let edgeData;

    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
    let cardTitle = previewTitle(record);

    function remove(e) {
        e.preventDefault();
        dispatch("remove", record.id);
    }

    function edit(e) {
        e.preventDefault();
        edgeData.openEdit();

    }
</script>
<div class="d-flex gap-2">
    {#if editable}
        <div
                class="card mb-2 bg-light w-50 "
                style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
        >
            <div class="card-body">
                <span class="text-muted d-block">Relation Data</span>
                {previewEdgeTitle(edge)}
                <div class="position-absolute d-flex end-0" style="top:5px">
                    <button
                            class="trash-button  text-dark btn btn-sm btn-link"
                            on:click={edit}
                    >
                        <Icon icon="pencil"/>
                    </button>
                </div>
            </div>
        </div>

        <EdgeData bind:this={edgeData} {record} {field} bind:edge/>
    {/if}

    <div
            class="card mb-2 bg-light  w-100 {classes}"
            style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
    >
        <div class="card-body">
            <Preview {record} type="card"/>
        </div>

        {#if hasDelete}
            <div class="position-absolute d-flex end-0" style="top:5px">

                <button
                        class="trash-button  text-dark btn btn-sm btn-link"
                        on:click={remove}
                >
                    <Icon icon="trash-can"/>
                </button>

            </div>
        {/if}
    </div>
</div>

<style>

    .card .trash-button {
        display: none;
    }

    .card:hover .trash-button {
        display: block;
    }

    .title-link {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>