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

<script>
    import { array_move } from "../../edges/sortEdges";
    import Sortable from "../../libs/Sortable.svelte";
    import PreviewFile from "../previews/PreviewFile.svelte";
    import FileDialog from "../../dialog/FileDialog.svelte";
    import Uploader from "../../files/Uploader.svelte";
    import Icon from "../../common/Icon.svelte";

    export let field;
    export let record;
    export let value = [];
    let browseModal;

    function removeFile(e) {
        e.preventDefault();
        value = value.filter((f) => !(f.id === e.detail));
    }

    async function reorder(e) {
        value = await array_move(value, e.detail.source, e.detail.target);
    }

    function insertFiles(e) {
        e.preventDefault();
        browseModal.close();
        value = [...(value ?? []), ...(e.detail.files ?? [])];
    }

    function replaceFiles(e) {
        e.preventDefault();
        browseModal.close();
        value = e.detail ?? [];
    }

    function uploadComplete(e) {
        value = [...value, ...e.detail];
    }

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

<div
    class="mb-0"
    style="display: flex; align-items: start; justify-content: start; gap:6px"
>
    <button class="button" on:click={openBrowseModal}>
        <Icon icon="photo-film"></Icon> Browse
    </button>

    <Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
</div>
{#if value.length > 0}
    <Sortable sortableClass="mt-3" on:update={reorder}>
        {#each value ?? [] as aFile (aFile.id)}
            <!--This div helps the sorting thing-->
            <div>
                <PreviewFile
                    file={aFile}
                    hasDelete={true}
                    on:remove_file={removeFile}
                ></PreviewFile>
            </div>
        {/each}
    </Sortable>
{/if}
<FileDialog
    bind:this={browseModal}
    on:insert_files={insertFiles}
    on:replace_files={replaceFiles}
></FileDialog>