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

<script>
    import Icon from "../../../common/Icon.svelte";
    import { createEventDispatcher } from "svelte";
    import Dropdown from "../../common/Dropdown.svelte";

    const dispatch = createEventDispatcher();
    export let schema;
    export let sortParam;
    export let sortField;
    export let inModal;
    export let modalUrl;
    export let systemFields = [];

    $: sortableFields = schema.fields.filter(
        (f) =>
            ![
                "reference",
                "file",
                "json",
                "id",
                "rich",
                "markdown",
                "block",
            ].includes(f.info.name),
    );
    $: systemFieldsFiltered = systemFields;
    $: if (schema.type === "collection") {
        systemFieldsFiltered = systemFields.filter((f) => f.files === false);
    }

    function triggerSortField(fieldSort) {
        const url = new URL(modalUrl ?? window.location.href);
        url.searchParams.set("sort", fieldSort);
        if (inModal) {
            dispatch("refresh", url);
        } else {
            window.location = url;
        }
    }

    function sortAsc(e, field) {
        e.preventDefault();
        let prefix = systemFields.map((el) => el.name).includes(field.name)
            ? ""
            : "data.";
        return triggerSortField(prefix + field.name);
    }

    function sortDesc(e, field) {
        e.preventDefault();
        let prefix = systemFields.map((el) => el.name).includes(field.name)
            ? ""
            : "data.";
        return triggerSortField("-" + prefix + field.name);
    }
</script>

<Dropdown>
    <div slot="button">
        {#if sortParam.startsWith("-")}
            <Icon icon="arrow-down-wide-short" />
        {:else}
            <Icon icon="arrow-up-short-wide" />
        {/if}
        <span class="ms-1">{sortField.label}</span>
    </div>
    <div>
        {#each sortableFields as field}
            <div class="dropdown-item">
                <button
                    on:click={(e) => sortAsc(e, field)}
                    title="Sort Ascending"
                    class="button button-icon {field.name == sortField.name &&
                    !sortParam.startsWith('-')
                        ? 'active'
                        : ''} "
                >
                    <Icon icon="arrow-up-short-wide" />
                </button>
                <button
                    on:click={(e) => sortDesc(e, field)}
                    title="Sort Descending"
                    class="button button-icon {field.name == sortField.name &&
                    sortParam.startsWith('-')
                        ? 'active'
                        : ''} "
                >
                    <Icon icon="arrow-down-wide-short" />
                </button>
                <button
                    title="Sort Ascending"
                    on:click={(e) => sortAsc(e, field)}
                    class="button"
                >
                    {field.label}
                </button>
            </div>
        {/each}
        <h6 class="dropdown-header">System</h6>
        {#each systemFieldsFiltered as field}
            <div class="dropdown-item">
                <button
                    on:click={(e) => sortAsc(e, field)}
                    title="Sort Ascending"
                    class="button button-icon {field.name == sortParam
                        ? 'active'
                        : ''} "
                >
                    <Icon icon="arrow-up-short-wide" />
                </button>
                <button
                    on:click={(e) => sortDesc(e, field)}
                    title="Sort Descending"
                    class="button button-icon {'-' + field.name == sortParam
                        ? 'active'
                        : ''} "
                >
                    <Icon icon="arrow-down-wide-short" />
                </button>
                <button
                    title="Sort Ascending"
                    on:click={(e) => sortAsc(e, field)}
                    class="button"
                >
                    {field.label}
                </button>
            </div>
        {/each}
    </div>
</Dropdown>