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

<script>
    import { sortByField } from "../../edges/sortEdges";
    import Sortable from "../../libs/Sortable.svelte";
    import PreviewFile from "../previews/PreviewFile.svelte";
    import Dropdown from "../../common/Dropdown.svelte";
    import Dialog from "../../dialog/Dialog.svelte";
    import { insertEdges } from "./reference.js";
    import { getContext } from "svelte";
    import FileDialog from "../../dialog/FileDialog.svelte";
    import Uploader from "../../files/Uploader.svelte";

    const channel = getContext("channel");
    export let field;
    export let record;
    export let graph;
    let browseModal;

    function removeReference(e) {
        e.preventDefault();
        graph.edges = graph.edges.filter(
            (edge) => !(edge.target === e.detail && edge.field === field.name),
        );
    }

    async function reorder(e) {
        graph.edges = await sortByField(
            e.detail.source,
            e.detail.target,
            graph.edges,
            field.name,
            references,
        );
    }

    function insert(e) {
        e.preventDefault();
        browseModal.close();
        graph = insertEdges(
            graph,
            record,
            e.detail.records,
            field.name,
            e.detail.action,
        );
    }

    function uploadComplete(e) {
        records = e.detail;
    }

    function openBrowseModal(e) {
        e.preventDefault();
        browseModal.open(record.id);
    }
</script>

<div class="mb-0">
    <button class="button" on:click={openBrowseModal}> Browse </button>

    <div>
        <Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
    </div>
</div>
<!-- {#if references.length > 0}
    <Sortable sortableClass="mt-3" on:update={reorder}>
        {#each references as reference (reference.id)}
            <!--This div helps the sorting thing-->
<!-- <div>
                <PreviewFile
                    record={reference}
                    hasDelete={true}
                    on:remove={removeReference}
                ></PreviewFile>
            </div>
        {/each}
    </Sortable>
{/if} -->
<FileDialog bind:this={browseModal} on:insert={insert}></FileDialog>