lucent-laravel/front/js/svelte/content/ActionsOnSelected.svelte

<script>
    import {getContext} from "svelte";
    import axios from "axios";

    const channel = getContext("channel");
    export let selected;
    export let schema;
    export let filter;

    function deleteRecords(e) {
        e.preventDefault();
        axios
            .post(channel.lucentUrl + "/records/delete", {
                ids: selected.map((s) => s.id),
            })
            .then((response) => {
                window.location.reload();
            })
            .catch((error) => {
                console.error(error);
            });
    }

    function changeStatus(e, status) {
        axios
            .post(channel.lucentUrl + "/records/status/" + status, {
                schemaName: schema.name,
                records:  selected.map((s) => s.id),
            })
            .then((response) => {
                window.location.reload();
            })
            .catch((error) => {
                console.error(error);
            });
    }
</script>

<div style="display: flex;align-items: center; gap: 8px">
    <span class="me-2">{selected.length} records selected</span>
    <button
            on:click|preventDefault={(e) => changeStatus(e, "published")}
            type="button"
            class="button">Publish
    </button
    >
    <button
            on:click|preventDefault={(e) => changeStatus(e, "draft")}
            type="button"
            class="button">Make Draft
    </button
    >
    {#if filter["status_in"] === "trashed"}
        <button
                on:click|preventDefault={deleteRecords}
                type="button"
                class="button">Delete forever
        </button
        >
    {:else}
        <button
                type="button"
                on:click|preventDefault={(e) => changeStatus(e, "trashed")}
                class="button">Move to trash
        </button
        >
    {/if}
</div>