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

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

    import { createEventDispatcher, getContext } from "svelte";
    import Preview from "../../files/Preview.svelte";
    import { previewTitle } from "./../Preview";
    import { fileurl, htmlurl } from "../../files/imageserver.js";
    import Status from "./../Status.svelte";
    import Dropdown from "../../common/Dropdown.svelte";

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

    let schema = channel.schemas.find(
        (aschema) => aschema.name === record.schema,
    );
    let cardTitle = previewTitle(channel.schemas, record);
    let imagePresets = Object.keys(channel.imageFilters);

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

    function insert(e, preset) {
        e.preventDefault();
        let html = htmlurl(channel, record, preset);
        let url = !preset
            ? `/${record._file.path}`
            : `/templates/${preset}/${record._file.path}`;
        dispatch("editor-insert", {
            html: html,
            url: channel.filesUrl + url,
            originalUrl: channel.filesUrl + "/" + record._file.path,
            record: record,
        });
    }
</script>

<div class="preview-file">
    <div style="display: flex;align-items: center;gap: 10px;">
        <div class="image">
            <Preview {record} size="small" />
        </div>
        <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>
    <div
        style="display: flex;gap:4px; align-items: center;  margin-right: 10px;"
    >
        {#if hasInsert}
            <div class="reference-action">
                <Dropdown>
                    <div slot="button">
                        <Icon icon="photo-film" />
                    </div>
                    <button
                        class="dropdown-item button"
                        on:click={(e) => insert(e, null)}>original</button
                    >
                    {#each imagePresets as preset}
                        <button
                            class="dropdown-item button"
                            on:click={(e) => insert(e, preset)}>{preset}</button
                        >
                    {/each}
                </Dropdown>
            </div>
        {/if}
        {#if hasDelete}
            <div class="reference-action">
                <button class="button" on:click={remove}>
                    <Icon icon="trash-can" />
                </button>
            </div>
        {/if}
    </div>
</div>