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

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


    import {createEventDispatcher, onMount, getContext} from "svelte";
    import Preview from "../files/Preview.svelte";
    import InlineEdit from "./InlineEdit.svelte";
    import Reference from "../content/elements/Reference.svelte";
    import File from "../content/elements/File.svelte";

    const channel = getContext("channel");
    const dispatch = createEventDispatcher();
    export let isFirst;
    export let isLast;
    export let toDelete = false;
    export let record;
    let editRecord;
    let editGraph;
    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
    $: editMode = false;
    $: expanded = false;

    function editInline(e) {
        e.preventDefault();
        axios
            .get(channel.lucentUrl + "/records/editInline/" + record.id)
            .then((response) => {
                record = response.data;
                editRecord = response.data.record;
                editGraph = response.data.graph;
                editMode = true;
            })
            .catch((error) => {
                console.log(error);
            });
    }

    function moveup(e) {
        e.preventDefault();
        dispatch("moveup");
    }

    function movedn(e) {
        e.preventDefault();
        dispatch("movedn");
    }

    function handleInlinesaved(e) {
        e.preventDefault();
        dispatch("inlinesaved", e.detail);
        editMode = false;
    }

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

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

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

    function cancel(e) {
        e.preventDefault();
        editMode = false;
    }

    onMount(() => {
        editMode = false;
    });

    function deleteFromChannel(e) {
        e.preventDefault();
        axios
            .post(channel.lucentUrl +"/records/status/trashed", [record])
            .then((response) => {
                dispatch("remove", record.id);
            })
            .catch((error) => {
                console.log(error);
            });
    }
</script>

<div>
    {#if toDelete}
        <div class="lx-card  bg-danger bg-opacity-10 text-center">
            <p>Item was removed from the current record.</p>
            <p>
                <button
                        class="btn btn-sm  btn-outline border border-1 border-dark"
                        on:click={undo}>Undo
                </button
                >
                <button
                        class="btn btn-sm  btn-danger "
                        on:click={deleteFromChannel}
                >Delete completely from channel
                </button
                >
            </p>
            <button class="btn btn-sm  btn-link" on:click={remove}
            >Dismiss Message
            </button
            >
        </div>
    {:else if editMode === true}
        <InlineEdit
                {schema}
                record={editRecord}
                graph={editGraph}
                isCreateMode={false}
                on:cancel={cancel}
                on:inlinesaved={handleInlinesaved}
        />
    {:else}
        <div class="lx-card  mt-4 bg-primary bg-opacity-10">
            <div class="actions">
                <small class="text-muted">{schema.label}</small>
                <button
                        class="btn btn-sm btn-link"
                        on:click|preventDefault={editInline}
                >
                    <Icon icon="pencil" width={12} height={12}/>
                </button>
                <button
                        class="btn btn-sm btn-link"
                        on:click={(e) => (expanded = !expanded)}
                >
                    {#if expanded}
                        <Icon icon="compress" width={12} height={12}/>
                    {:else}
                        <Icon icon="expand" width={12} height={12}/>
                    {/if}
                </button>
                <div class="dropdown d-inline-block">
                    <button
                            class="btn btn-link btn-sm"
                            type="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                    >
                        <Icon icon="ellipsis"/>
                    </button>

                    <div class="dropdown-menu">
                        <a
                                class="dropdown-item"
                                href="/records/{record.id}"
                                target="_blank"
                        >Edit in new tab
                        </a>
                        <button class="dropdown-item" on:click={trash}>
                            Remove
                        </button>
                        <div class="text-center mt-3">
                            <!-- <a class="dropdown-item" href="#">Clone</a> -->

                            {#if !isFirst}
                                <button
                                        class="btn btn-sm btn-outline-primary border-0"
                                        on:click|preventDefault={moveup}
                                >
                                    <Icon icon="circle-chevron-up"/>
                                </button>
                            {/if}
                            {#if !isLast}
                                <button
                                        class="btn btn-sm btn-outline-primary border-0"
                                        on:click|preventDefault={movedn}
                                >
                                    <Icon icon="circle-chevron-down"/>
                                </button>
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
            <div class="inline-preview" class:expanded>
                {#if schema.type === "files"}
                    <Preview {record} size="small"/>
                {/if}
                {#each schema.fields.filter((f) => !(f.trashed || ["tab"].includes(f.ui) || ["id"].includes(f.name))) as field}
                    <span class="text-muted d-block mt-2" style="font-size:13px"
                    >{field.label}</span
                    >
                    {#if field.ui === "reference"}
                        <Reference {record} {field}/>
                    {:else if field.ui === "file"}
                        <File {record} {field}/>
                    {:else}
                        {@html record.data[field.name]}
                    {/if}
                {/each}
            </div>
        </div>
    {/if}
</div>

<style>
    .lx-card {
        position: relative;
    }

    .lx-card .inline-preview {
        max-height: 120px;
        overflow: hidden;
    }

    .lx-card .inline-preview.expanded {
        max-height: none;
    }

    .lx-card .actions {
        top: 10px;
        right: 44px;
        position: absolute;
        /* visibility: hidden; */
    }

    /* .lx-card:hover .actions {
        visibility: visible;
    } */
</style>