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

Improve grid keyboard shortcuts and allow sorting by any visible field to fix issues with refreshing data when hiding columns

This commit is contained in:
Andrew Kingston 2023-04-23 13:02:17 +01:00
parent 2972af6711
commit 1edfd3b887
2 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend-core/src/components/grid/controls/SortButton.svelte
View File

@ -2,7 +2,7 @@
import { getContext } from "svelte" import { getContext } from "svelte"
import { ActionButton, Popover, Select } from "@budibase/bbui" import { ActionButton, Popover, Select } from "@budibase/bbui"
const { sort, visibleColumns, stickyColumn } = getContext("grid") const { sort, columns, stickyColumn } = getContext("grid")
const orderOptions = [ const orderOptions = [
{ label: "A-Z", value: "ascending" }, { label: "A-Z", value: "ascending" },
{ label: "Z-A", value: "descending" }, { label: "Z-A", value: "descending" },
@ -11,8 +11,8 @@
let open = false let open = false
let anchor let anchor
$: columnOptions = getColumnOptions($stickyColumn, $visibleColumns) $: columnOptions = getColumnOptions($stickyColumn, $columns)
$: checkValidSortColumn($sort.column, $stickyColumn, $visibleColumns) $: checkValidSortColumn($sort.column, $stickyColumn, $columns)
const getColumnOptions = (stickyColumn, columns) => { const getColumnOptions = (stickyColumn, columns) => {
let options = [] let options = []
@ -46,13 +46,13 @@
} }
// Ensure we never have a sort column selected that is not visible // Ensure we never have a sort column selected that is not visible
const checkValidSortColumn = (sortColumn, stickyColumn, visibleColumns) => { const checkValidSortColumn = (sortColumn, stickyColumn, columns) => {
if (!sortColumn) { if (!sortColumn) {
return return
} }
if ( if (
sortColumn !== stickyColumn?.name && sortColumn !== stickyColumn?.name &&
!visibleColumns.some(col => col.name === sortColumn) !columns.some(col => col.name === sortColumn)
) { ) {
if (stickyColumn) { if (stickyColumn) {
sort.update(state => ({ sort.update(state => ({
@ -62,7 +62,7 @@
} else { } else {
sort.update(state => ({ sort.update(state => ({
...state, ...state,
column: visibleColumns[0]?.name, column: columns[0]?.name,
})) }))
} }
} }

6
packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
View File

@ -19,7 +19,7 @@
const handleKeyDown = e => { const handleKeyDown = e => {
// If nothing selected avoid processing further key presses // If nothing selected avoid processing further key presses
if (!$focusedCellId) { if (!$focusedCellId) {
if (e.key === "Tab") { if (e.key === "Tab" || e.key?.startsWith("Arrow")) {
e.preventDefault() e.preventDefault()
focusFirstCell() focusFirstCell()
} else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) { } else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
@ -35,7 +35,11 @@
// By setting a tiny timeout here we can ensure that other listeners // By setting a tiny timeout here we can ensure that other listeners
// which depend on being able to read cell state on an escape keypress // which depend on being able to read cell state on an escape keypress
// get a chance to observe the true state before we blur // get a chance to observe the true state before we blur
if (api?.isActive()) {
setTimeout(api?.blur, 10) setTimeout(api?.blur, 10)
} else {
$focusedCellId = null
}
return return
} else if (e.key === "Tab") { } else if (e.key === "Tab") {
api?.blur?.() api?.blur?.()