132 lines
5.1 KiB
Svelte
132 lines
5.1 KiB
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>
|