1
0
Fork 0
mirror of synced 2024-07-07 15:25:52 +12:00

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

View file

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

View file

@ -19,7 +19,7 @@
const handleKeyDown = e => {
// If nothing selected avoid processing further key presses
if (!$focusedCellId) {
if (e.key === "Tab") {
if (e.key === "Tab" || e.key?.startsWith("Arrow")) {
e.preventDefault()
focusFirstCell()
} 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
// which depend on being able to read cell state on an escape keypress
// get a chance to observe the true state before we blur
setTimeout(api?.blur, 10)
if (api?.isActive()) {
setTimeout(api?.blur, 10)
} else {
$focusedCellId = null
}
return
} else if (e.key === "Tab") {
api?.blur?.()