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

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

    import {getContext, createEventDispatcher} from "svelte";
    import {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;
    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="card mb-2 bg-light  {classes}"
        style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
>
    <div class="card-body">
        <Preview {record} type="card"/>
        {#if editable}
            <EdgeData bind:this={edgeData} {field} {edge}/>
        {/if}
        <!--        <div class="overflow-hidden">-->
        <!--            <a-->
        <!--                class="title-link m-0 fs-5 text-decoration-none text-dark d-block"-->
        <!--                href="{channel.lucentUrl}/records/{record.id}"-->
        <!--                title={cardTitle}-->
        <!--            >-->
        <!--                {cardTitle}-->
        <!--            </a>-->
        <!--            <small class="text-muted">-->
        <!--                {schema.label}-->
        <!--            </small>-->
        <!--            <small class="text-muted">-->
        <!--                {#if record.status === "draft"}-->
        <!--                    <Status status={record.status} />-->
        <!--                {/if}-->
        <!--            </small>-->
        <!--        </div>-->
    </div>

    {#if hasDelete}
        <div class="position-absolute d-flex end-0" style="top:5px">
            {#if editable}
                <button
                        class="trash-button  text-dark btn btn-sm btn-link"
                        on:click={edit}
                >
                    <Icon icon="pencil"/>
                </button>
            {/if}
            <button
                    class="trash-button  text-dark btn btn-sm btn-link"
                    on:click={remove}
            >
                <Icon icon="trash-can"/>
            </button>

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

<style>

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

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

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