MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Udpate sort button to be a detail popover

This commit is contained in:
Andrew Kingston 2024-10-28 14:05:02 +00:00
parent 18130729b2
commit 4979cce132
No known key found for this signature in database
1 changed files with 32 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/builder/src/components/backend/DataTable/buttons/grid/GridSortButton.svelte
View File

@ -1,12 +1,12 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import { ActionButton, Popover, Select } from "@budibase/bbui" import { ActionButton, Select } from "@budibase/bbui"
import { canBeSortColumn } from "@budibase/frontend-core" import { canBeSortColumn } from "@budibase/frontend-core"
import DetailPopover from "components/common/DetailPopover.svelte"
const { sort, columns } = getContext("grid") const { sort, columns } = getContext("grid")
let open = false let popover
let anchor
$: columnOptions = $columns $: columnOptions = $columns
.filter(col => canBeSortColumn(col.schema)) .filter(col => canBeSortColumn(col.schema))
@ -45,50 +45,35 @@
} }
</script> </script>
<div bind:this={anchor}> <DetailPopover bind:this={popover} title="Sorting parameters">
<ActionButton <svelte:fragment slot="anchor" let:open>
icon="SortOrderDown" <ActionButton
quiet icon="SortOrderDown"
size="M" quiet
on:click={() => (open = !open)} size="M"
selected={open} on:click={popover?.open}
disabled={!columnOptions.length} selected={open}
> disabled={!columnOptions.length}
Sort >
</ActionButton> Sort
</div> </ActionButton>
</svelte:fragment>
<Popover bind:open {anchor} align="left"> <Select
<div class="content"> placeholder="Default"
value={$sort.column}
options={columnOptions}
autoWidth
on:change={updateSortColumn}
label="Column"
/>
{#if $sort.column}
<Select <Select
placeholder="Default" placeholder={null}
value={$sort.column} value={$sort.order || "ascending"}
options={columnOptions} options={orderOptions}
autoWidth autoWidth
on:change={updateSortColumn} on:change={updateSortOrder}
label="Column" label="Order"
/> />
{#if $sort.column} {/if}
<Select </DetailPopover>
placeholder={null}
value={$sort.order || "ascending"}
options={orderOptions}
autoWidth
on:change={updateSortOrder}
label="Order"
/>
{/if}
</div>
</Popover>
<style>
.content {
padding: 6px 12px 12px 12px;
display: flex;
align-items: center;
gap: 8px;
}
.content :global(.spectrum-Picker) {
width: 140px;
}
</style>