lucent-laravel/front/js/svelte/content/tools/Tools.svelte

<script>
    import FilterFields from "./FilterFields.svelte";
    import Uploader from "../../files/Uploader.svelte";
    import Icon from "../../common/Icon.svelte";
    import SortFields from "./SortFields.svelte";
    import AppliedFilter from "./AppliedFilter.svelte";
    import {getContext, createEventDispatcher} from "svelte";

    const channel = getContext("channel");

    const dispatch = createEventDispatcher();
    export let sort;
    export let schema;
    export let operators;
    export let filter;
    export let inModal;
    export let modalUrl;
    export let isWritable;
    export let records;
    export let systemFields = [];
    // export let visibleFields = [];

    let url = new URL(window.location.href);

    let csvUrl = url.pathname + "/csv?" + url.searchParams.toString();

    function search(e) {
        e.preventDefault();
        const data = new FormData(e.target);
        let filterKey = data.keys().next().value;
        let filterValue = data.values().next().value;
        const url = new URL(modalUrl ?? window.location.href);
        url.searchParams.set("skip", "0");
        url.searchParams.set(filterKey, filterValue);
        if (inModal) {
            dispatch("refresh", url);
        } else {
            window.location = url;
        }

    }

    function uploadComplete(e) {
        records = e.detail;
    }
</script>

<div class="mb-3 d-flex align-items-center justify-content-between">
    <div class=" d-flex align-items-center">

        <SortFields
                {schema}
                {sort}
                {systemFields}
                {inModal}
                {modalUrl}
                on:refresh
        />


        <FilterFields
                bind:schema
                {systemFields}
                {operators}
                {filter}
                {inModal}
                {modalUrl}
                on:refresh
        />

        <form method="GET" on:submit={search}>
            {#if schema.fields[0]?.name}
                <input type="search" name="filter[data.{schema.fields[0].name }_regex]" placeholder="Search"
                       class="form-control" required>
            {:else}
                <input type="search" name="filter[_file.originalName_regex]" placeholder="Search"
                       class="form-control" required>
            {/if}

        </form>


    </div>

    <div class="d-flex align-items-center ">
        {#if schema.type === "collection"}
            {#if !inModal && isWritable}
                <a
                        href="{channel.lucentUrl}/records/new?schema={schema.name}"
                        class="btn btn-sm btn-primary"
                >
                    New Record
                </a>
            {/if}
        {:else }
            <div class="d-inline-block ms-1">
                <Uploader {schema} on:uploadComplete={uploadComplete}/>
            </div>
        {/if}
        {#if !inModal}
            <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-vertical"/>
                </button>

                <ul class="dropdown-menu">
                    {#if filter["status_in"] === "trashed"}
                        {#if isWritable}
                            <li>
                                <a
                                        class="dropdown-item"
                                        href="{channel.lucentUrl}/content/{schema.name}/emptyTrash"
                                >
                                    Empty trash
                                </a>
                            </li>
                        {/if}
                    {:else}

                        <li>
                            <a
                                    class="dropdown-item"
                                    href={csvUrl}
                            >Export to CSV</a
                            >
                        </li>
                        <li>
                            <a
                                    class="dropdown-item"
                                    href="{channel.lucentUrl}/content/{schema.name}?filter[status_in]=trashed"
                            >View trashed records</a
                            >
                        </li>
                    {/if}

                </ul>
            </div>
        {/if}
    </div>
</div>


{#if Object.entries(filter).length > 0}
    <div class=" d-flex mb-3">
        {#each Object.entries(filter) as [k, v]}
            <AppliedFilter
                    {schema}
                    {operators}
                    key={k}
                    value={v}
                    {inModal}
                    {modalUrl}
                    {systemFields}
                    on:refresh
            />
        {/each}
    </div>
{/if}