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

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

    const channel = getContext("channel");

    const dispatch = createEventDispatcher();
    export let sortParam;
    export let sortField;
    export let schema;
    export let operators;
    export let filter;
    export let inModal;
    export let modalUrl;
    export let isWritable;
    export let records;
    export let graph;
    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;
        }
    }
</script>

<div class="toolbar">
    <div class="toolbar-filters">
        <SortFields
            {schema}
            {sortParam}
            {sortField}
            {systemFields}
            {inModal}
            {modalUrl}
            on:refresh
        />

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

        <form method="GET" on:submit={search}>
            <input
                type="search"
                name="filter[search_regex]"
                placeholder="Search"
                class="search"
                required
            />
        </form>
    </div>

    <div style="display:flex;align-items: center;gap:4px">
        {#if !inModal && isWritable}
            <a
                href="{channel.lucentUrl}/records/new?schema={schema.name}"
                class="button"
            >
                New Record
            </a>
        {/if}

        {#if !inModal}
            <Dropdown orientation="right">
                <div slot="button">
                    <Icon icon="ellipsis-vertical" />
                </div>
                {#if filter["status_in"] === "trashed"}
                    {#if isWritable}
                        <a
                            class="dropdown-item"
                            href="{channel.lucentUrl}/content/{schema.name}/emptyTrash"
                        >
                            Empty trash
                        </a>
                    {/if}
                {:else}
                    <a class="dropdown-item" href={csvUrl}>Export to CSV</a>
                    <a
                        class="dropdown-item"
                        href="{channel.lucentUrl}/content/{schema.name}?filter[status_in]=trashed"
                        >View trashed records</a
                    >
                    <a
                        class="dropdown-item"
                        href="{channel.lucentUrl}/content/{schema.name}?notlinked=*"
                        >View unlinked records</a
                    >
                {/if}
            </Dropdown>
        {/if}
    </div>
</div>

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