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

<script>
    import Icon from "../../common/Icon.svelte";
    import {createEventDispatcher} from "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>

<div class=" ">
    <button
        class="btn btn-sm btn-outline-primary dropdown-toggle d-flex align-items-center"
        type="button"
        data-bs-toggle="dropdown"
        data-bs-auto-close="outside"
        aria-expanded="false"
    >
        {#if sortParam.startsWith("-")}
            <Icon icon="arrow-down-wide-short"/>
        {:else}
            <Icon icon="arrow-up-short-wide"/>
        {/if}
        <span class="ms-1">{sortField.label}</span>
    </button>
    <div class="dropdown-menu" style="width:auto;max-width:800px;">
        <div class="row">
            {#each sortableFields as field}
                <div class="col-4 px-3 py-1 d-flex align-items-center">
                    <div class="btn-group w-100">
                        <button
                            on:click={(e) => sortAsc(e, field)}
                            title="Sort Ascending"
                            class="btn btn-sm {field.name == sortField.name   && !sortParam.startsWith("-")
                                ? 'btn-primary'
                                : 'btn-outline-primary'} "
                        >
                            <Icon icon="arrow-up-short-wide"/>
                        </button>
                        <button
                            on:click={(e) => sortDesc(e, field)}
                            title="Sort Descending"
                            class="btn btn-sm {field.name == sortField.name && sortParam.startsWith("-")
                                ? 'btn-primary'
                                : 'btn-outline-primary'} "
                        >
                            <Icon icon="arrow-down-wide-short"/>
                        </button>
                        <button
                            title="Sort Ascending"
                            on:click={(e) => sortAsc(e, field)}
                            class="btn btn-sm btn-outline-primary w-100 text-nowrap"
                            style="overflow: hidden;"
                        >
                            {field.label}
                        </button>
                    </div>
                </div>
            {/each}
        </div>
        <h6 class="dropdown-header px-0">System</h6>
        <div class="row">
            {#each systemFieldsFiltered as field}
                <div class="col-4 px-3 py-1 d-flex align-items-center">
                    <div class="btn-group w-100">
                        <button
                            on:click={(e) => sortAsc(e, field)}
                            title="Sort Ascending"
                            class="btn btn-sm {field.name == sortParam
                                ? 'btn-primary'
                                : 'btn-outline-primary'} "
                        >
                            <Icon icon="arrow-up-short-wide"/>
                        </button>
                        <button
                            on:click={(e) => sortDesc(e, field)}
                            title="Sort Descending"
                            class="btn btn-sm {'-' + field.name == sortParam
                                ? 'btn-primary'
                                : 'btn-outline-primary'} "
                        >
                            <Icon icon="arrow-down-wide-short"/>
                        </button>
                        <button
                            title="Sort Ascending"
                            on:click={(e) => sortAsc(e, field)}
                            class="btn btn-sm btn-outline-primary w-100 text-nowrap"
                            style="overflow: hidden;"
                        >
                            {field.label}
                        </button>
                    </div>
                </div>
            {/each}
        </div>
    </div>
</div>