lucent-laravel/front/js/svelte/records/elements/ReferenceInlineButtons.svelte

<script>
    import {createEventDispatcher, getContext} from "svelte";
    import Icon from "../../common/Icon.svelte";
    import InlineEdit from "../InlineEdit.svelte";
    import Dialog from "../../dialog/Dialog.svelte";
    import DialogRecord from "../../dialog/DialogRecord.svelte";
    import axios from "axios";
    import Dropdown from "../../common/Dropdown.svelte";

    const dispatch = createEventDispatcher();
    const channel = getContext("channel");
    export let schemas;
    export let recordId;
    let browseModal;
    let dialogRecord;
    let inLineCreateRecord;

    function openBrowseModal(e, schema) {
        e.preventDefault();
        browseModal.open(schema);
    }

    function save(e) {
        e.preventDefault();
        console.log("Save inline");
        inLineCreateRecord = null;
        dialogRecord.close()
        dispatch("save", {
            records: e.detail.records,
            after: recordId,
        });
    }

    function insert(e) {
        e.preventDefault();
        browseModal.close();
        dispatch("insert", {
            records: e.detail.records,
            schema: e.detail.schema,
            after: recordId,
        });
    }

    function createInlineReference(e, schemaUId) {
        e.preventDefault();
        axios
            .get(channel.lucentUrl + "/records/newInline?schema=" + schemaUId)
            .then((response) => {
                inLineCreateRecord = response.data;
                dialogRecord.open()
            })
            .catch((error) => {
                console.log(error);
            });
    }
</script>

{#if schemas.length > 1}
    <div
            style="display: flex;align-items: center;gap:4px"
    >
        {#each schemas as schema}
            <Dropdown>
                <div slot="button" class:is-first={!recordId}>
                    {schema.label}
                </div>
                <button
                        class=" button"
                        on:click={(e) =>
                                createInlineReference(e, schema.name)}
                >Create New Record
                </button>
                <button
                        class="button"
                        on:click={(e) => openBrowseModal(e, schema.name)}
                >
                    <Icon icon="magnifying-glass"/>
                    Search
                </button
                >
            </Dropdown>
        {/each}
    </div>
{:else}
    <div style="display:flex;align-items: center;gap: 4px">
        <button
                class="button"
                on:click={(e) => createInlineReference(e, schemas[0].name)}
        >New
        </button>
        <button
                class="button"
                on:click={(e) => openBrowseModal(e, schemas[0].name)}
        >
            <Icon icon="magnifying-glass"/>
        </button
        >
    </div>
{/if}

<DialogRecord bind:this={dialogRecord}>
    {#if inLineCreateRecord}

        <InlineEdit
                {...inLineCreateRecord}
                on:cancel={(e) => (inLineCreateRecord = null)}
                on:inlinesaved={save}
        />

    {/if}
</DialogRecord>

<Dialog bind:this={browseModal} on:insert={insert}/>