diff options
Diffstat (limited to 'frontend/src/lib/toolbar/SelectSort.svelte')
| -rw-r--r-- | frontend/src/lib/toolbar/SelectSort.svelte | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/frontend/src/lib/toolbar/SelectSort.svelte b/frontend/src/lib/toolbar/SelectSort.svelte new file mode 100644 index 0000000..fdcb057 --- /dev/null +++ b/frontend/src/lib/toolbar/SelectSort.svelte @@ -0,0 +1,61 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { SortDirection } from '$gql/graphql'; + + import { getSortContext } from '$lib/Sort'; + import { slideXFast } from '$lib/Transitions'; + import { getRandomInt } from '$lib/Utils'; + import { slide } from 'svelte/transition'; + + const sort = getSortContext(); + + function toggle() { + if ($sort.direction === SortDirection.Ascending) { + $sort.direction = SortDirection.Descending; + } else { + $sort.direction = SortDirection.Ascending; + } + + apply(); + } + + function apply() { + if ($sort.on === 'RANDOM' && $sort.seed === undefined) { + $sort.seed = getRandomInt(0, 1000000000); + } + $sort.apply($page.url.searchParams); + } + + function reshuffle() { + $sort.seed = undefined; + apply(); + } +</script> + +<div class="rounded-group flex flex-row"> + <select class="btn-slate" bind:value={$sort.on} on:change={apply} title="Sort on..."> + {#each Object.entries($sort.labels) as [value, label]} + <option {value}>{label}</option> + {/each} + </select> + <button type="button" class="btn-slate" title="Toggle sort direction" on:click={toggle}> + {#if $sort.direction === SortDirection.Ascending} + <span class="icon-base icon-[material-symbols--sort] -scale-y-100" /> + {:else} + <span class="icon-base icon-[material-symbols--sort]" /> + {/if} + </button> + {#if $sort.on === 'RANDOM'} + <button + type="button" + class="btn-slate" + title="Reshuffle" + on:click={reshuffle} + transition:slide={slideXFast} + > + <div class="flex"> + <span class="icon-base icon-[material-symbols--shuffle]" /> + </div> + </button> + {/if} +</div> |