123 lines
3.9 KiB
Svelte
123 lines
3.9 KiB
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>
|