131 lines
4.1 KiB
Svelte
131 lines
4.1 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>
|