diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json index 2c61aa4abf..9b8e6587b0 100644 --- a/packages/components/package-lock.json +++ b/packages/components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@labkey/components", - "version": "7.16.0", + "version": "7.16.1-fb-sort-plus-442.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@labkey/components", - "version": "7.16.0", + "version": "7.16.1-fb-sort-plus-442.1", "license": "SEE LICENSE IN LICENSE.txt", "dependencies": { "@hello-pangea/dnd": "18.0.1", diff --git a/packages/components/package.json b/packages/components/package.json index 5cbd32fb2e..a8b868da97 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@labkey/components", - "version": "7.16.0", + "version": "7.16.1-fb-sort-plus-442.1", "description": "Components, models, actions, and utility functions for LabKey applications and pages", "sideEffects": false, "files": [ diff --git a/packages/components/src/internal/renderers.tsx b/packages/components/src/internal/renderers.tsx index 091713a66c..2aa40d0064 100644 --- a/packages/components/src/internal/renderers.tsx +++ b/packages/components/src/internal/renderers.tsx @@ -47,6 +47,7 @@ import { usePortalRef } from './hooks'; import { MenuDivider, MenuItem } from './dropdowns'; import { LabelOverlay } from './components/forms/LabelOverlay'; import { DOMAIN_FIELD } from './components/forms/DomainFieldHelpTipContents'; +import { SORT_ASC, SORT_DESC } from '../public/QuerySort'; export function isFilterColumnNameMatch(filter: Filter.IFilter, col: QueryColumn): boolean { return filter.getColumnName() === col.name || filter.getColumnName() === col.resolveFieldKey(); @@ -108,11 +109,11 @@ export const EditableColumnTitle: FC = memo(props => { return ( ); } @@ -318,8 +319,8 @@ const HeaderCellDropdownMenu: FC = memo(props => { )} Hide Column @@ -397,18 +398,19 @@ export const HeaderCellDropdown: FC = memo(props => { const colQuerySortDir = model?.sorts?.find(sort => sort.fieldKey === queryColumn.resolveFieldKey())?.dir ?? view?.sorts?.find(sort => sort.fieldKey === queryColumn.resolveFieldKey())?.dir; - const isSortAsc = queryColumn.sorts === '+' || colQuerySortDir === '+' || colQuerySortDir === ''; - const isSortDesc = queryColumn.sorts === '-' || colQuerySortDir === '-'; + const sortDir = queryColumn.sorts || colQuerySortDir; + const isSortAsc = sortDir === SORT_ASC; + const isSortDesc = sortDir === SORT_DESC; return (
{!editingTitle && colFilters?.length > 0 && ( @@ -426,10 +428,10 @@ export const HeaderCellDropdown: FC = memo(props => { {!editingTitle && column.helpTipRenderer && ( - + )}
@@ -445,8 +447,8 @@ export const HeaderCellDropdown: FC = memo(props => { isSortAsc={isSortAsc} isSortDesc={isSortDesc} model={model} - open={open} onEditTitleClicked={editTitle} + open={open} queryColumn={queryColumn} setOpen={setOpen} /> @@ -476,8 +478,8 @@ export const HeaderSelectionCell: FC = memo(props => { return ( extends PureComponent, State> { this.setState({ showFilterModalFieldKey: undefined }); }; - sortColumn = (column: QueryColumn, direction?: string): void => { + sortColumn = (column: QueryColumn, direction?: SortDirection): void => { const fieldKey = column.resolveFieldKey(); // resolveFieldKey because of Issue 34627 if (direction) { - const dir = direction === '+' ? '' : '-'; // Sort Action only uses '-' and '' - const sort = new QuerySort({ fieldKey, dir }); + const sort = new QuerySort({ dir: direction, fieldKey }); this.handleSortChange({ type: ChangeType.add }, sort); } else { const actionIndex = this.state.actionValues.findIndex( diff --git a/packages/components/src/public/QueryModel/QueryModel.test.ts b/packages/components/src/public/QueryModel/QueryModel.test.ts index e6c827646b..996246116e 100644 --- a/packages/components/src/public/QueryModel/QueryModel.test.ts +++ b/packages/components/src/public/QueryModel/QueryModel.test.ts @@ -140,7 +140,7 @@ describe('QueryModel', () => { let model = new QueryModel({ schemaQuery: SCHEMA_QUERY, sorts }); expect(() => model.sortString).toThrow('Cannot construct sort string, no QueryInfo available'); model = model.mutate({ queryInfo: QUERY_INFO }); - expect(model.sortString).toEqual('-RowId,Data'); + expect(model.sortString).toEqual('-RowId,+Data'); }); test('Columns', () => { diff --git a/packages/components/src/public/QueryModel/QueryModel.ts b/packages/components/src/public/QueryModel/QueryModel.ts index b9afb8b221..a8e6808a71 100644 --- a/packages/components/src/public/QueryModel/QueryModel.ts +++ b/packages/components/src/public/QueryModel/QueryModel.ts @@ -59,16 +59,8 @@ function offsetFromString(rowsPerPage: number, pageStr: string): number { return offset >= 0 ? offset : 0; } -export function querySortFromString(sortStr: string): QuerySort { - if (sortStr.startsWith('-')) { - return new QuerySort({ dir: '-', fieldKey: sortStr.slice(1) }); - } else { - return new QuerySort({ fieldKey: sortStr }); - } -} - function querySortsFromString(sortsStr: string): QuerySort[] { - return sortsStr?.split(',').map(querySortFromString); + return sortsStr?.split(',').map(QuerySort.fromString); } function searchFiltersFromString(searchStr: string): Filter.IFilter[] { @@ -1281,7 +1273,7 @@ export function getSettingsFromLocalStorage(id: string, containerPath: string): const filterArray = savedSettings.filterArray?.map(f => Filter.create(f.columnName, f.value, Filter.getFilterTypeForURLSuffix(f.type)) ); - const sorts = savedSettings.sorts?.map(s => querySortFromString(s)); + const sorts = savedSettings.sorts?.map(QuerySort.fromString); return { filterArray: filterArray ?? [], diff --git a/packages/components/src/public/QuerySort.ts b/packages/components/src/public/QuerySort.ts index 2ad0e1150b..897a38bdc9 100644 --- a/packages/components/src/public/QuerySort.ts +++ b/packages/components/src/public/QuerySort.ts @@ -1,18 +1,33 @@ +export const SORT_ASC = '+'; +export const SORT_DESC = '-'; + +export type SortDirection = typeof SORT_ASC | typeof SORT_DESC; + export interface QuerySortJson { - dir: string; + dir?: SortDirection; fieldKey: string; } export class QuerySort implements QuerySortJson { - declare dir: string; - declare fieldKey: string; + public dir?: SortDirection; + public fieldKey: string; + + static fromString(sortStr: string): QuerySort { + if (sortStr.startsWith(SORT_DESC)) { + return new QuerySort({ dir: SORT_DESC, fieldKey: sortStr.slice(1) }); + } else if (sortStr.startsWith(SORT_ASC)) { + return new QuerySort({ dir: SORT_ASC, fieldKey: sortStr.slice(1) }); + } + + return new QuerySort({ fieldKey: sortStr }); + } constructor(props: Partial) { - Object.assign(this, { dir: '' }, props); + this.dir = props.dir === SORT_DESC ? SORT_DESC : SORT_ASC; + this.fieldKey = props.fieldKey; } toRequestString(): string { - const { dir, fieldKey } = this; - return dir === '-' ? '-' + fieldKey : fieldKey; + return `${this.dir}${this.fieldKey}`; } }