Improve grid sorting labels to account for date types and provide better labels
This commit is contained in:
parent
a857eb266c
commit
74cab11191
|
@ -51,16 +51,33 @@
|
||||||
$: sortedBy = column.name === $sort.column
|
$: sortedBy = column.name === $sort.column
|
||||||
$: canMoveLeft = orderable && idx > 0
|
$: canMoveLeft = orderable && idx > 0
|
||||||
$: canMoveRight = orderable && idx < $renderedColumns.length - 1
|
$: canMoveRight = orderable && idx < $renderedColumns.length - 1
|
||||||
$: numericType = [FieldType.NUMBER, FieldType.BIGINT].includes(
|
$: sortingLabels = getSortingLabels(column.schema?.type)
|
||||||
column.schema?.type
|
|
||||||
)
|
|
||||||
$: ascendingLabel = numericType ? "low-high" : "A-Z"
|
|
||||||
$: descendingLabel = numericType ? "high-low" : "Z-A"
|
|
||||||
$: searchable = isColumnSearchable(column)
|
$: searchable = isColumnSearchable(column)
|
||||||
$: resetSearchValue(column.name)
|
$: resetSearchValue(column.name)
|
||||||
$: searching = searchValue != null
|
$: searching = searchValue != null
|
||||||
$: debouncedUpdateFilter(searchValue)
|
$: debouncedUpdateFilter(searchValue)
|
||||||
|
|
||||||
|
const getSortingLabels = type => {
|
||||||
|
switch (type) {
|
||||||
|
case FieldType.NUMBER:
|
||||||
|
case FieldType.BIGINT:
|
||||||
|
return {
|
||||||
|
ascending: "low-high",
|
||||||
|
descending: "high-low",
|
||||||
|
}
|
||||||
|
case FieldType.DATETIME:
|
||||||
|
return {
|
||||||
|
ascending: "old-new",
|
||||||
|
descending: "new-old",
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
ascending: "A-Z",
|
||||||
|
descending: "Z-A",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const resetSearchValue = name => {
|
const resetSearchValue = name => {
|
||||||
searchValue = $inlineFilters?.find(x => x.id === `inline-${name}`)?.value
|
searchValue = $inlineFilters?.find(x => x.id === `inline-${name}`)?.value
|
||||||
}
|
}
|
||||||
|
@ -318,14 +335,14 @@
|
||||||
on:click={sortAscending}
|
on:click={sortAscending}
|
||||||
disabled={column.name === $sort.column && $sort.order === "ascending"}
|
disabled={column.name === $sort.column && $sort.order === "ascending"}
|
||||||
>
|
>
|
||||||
Sort {ascendingLabel}
|
Sort {sortingLabels.ascending}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
icon="SortOrderDown"
|
icon="SortOrderDown"
|
||||||
on:click={sortDescending}
|
on:click={sortDescending}
|
||||||
disabled={column.name === $sort.column && $sort.order === "descending"}
|
disabled={column.name === $sort.column && $sort.order === "descending"}
|
||||||
>
|
>
|
||||||
Sort {descendingLabel}
|
Sort {sortingLabels.descending}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
|
<MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
|
||||||
Move left
|
Move left
|
||||||
|
|
Loading…
Reference in a new issue