random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Persist column sorting

This commit is contained in:
Laurent Nguyen 2024-08-23 08:21:40 +02:00
parent 2397283649
commit b1d9570a95
3 changed files with 50 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
View File

@ -12,12 +12,15 @@ export enum SubComponentName {
FilterHistory = "FilterHistory",
MainTabDivider = "MainTabDivider",
ColumnsSelection = "ColumnsSelection",
ColumnSort = "ColumnSort",
}
export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
export type FilterHistory = string[];
export type WidthDefinition = { idealWidth?: number; minWidth?: number };
export type TabDivider = { leftPaneWidthPercent: number };
export type ColumnsSelection = { selectedColumnIds: string[] };
export type ColumnsSelection = string[];
export type ColumnSort = { columnId: string; direction: "ascending" | "descending" };
/**
*

16
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -21,6 +21,8 @@ import Explorer from "Explorer/Explorer";
import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
import {
ColumnsSelection,
FilterHistory,
SubComponentName,
TabDivider,
readSubComponentState,
@ -591,7 +593,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
// State
const [tabStateData, setTabStateData] = useState<TabDivider>(() =>
readSubComponentState(SubComponentName.MainTabDivider, _collection, {
readSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
leftPaneWidthPercent: 35,
}),
);
@ -605,8 +607,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
const [continuationToken, setContinuationToken] = useState<string>(undefined);
// User's filter history
const [lastFilterContents, setLastFilterContents] = useState<string[]>(() =>
readSubComponentState(SubComponentName.FilterHistory, _collection, []),
const [lastFilterContents, setLastFilterContents] = useState<FilterHistory>(() =>
readSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
);
const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
@ -661,7 +663,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
defaultColumnsIds.push(...partitionKeyPropertyHeaders);
}
return readSubComponentState(SubComponentName.ColumnsSelection, _collection, defaultColumnsIds);
return readSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, defaultColumnsIds);
};
const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(getInitialColumnSelection);
@ -1815,7 +1817,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
const limitedLastFilterContents = lastFilterContents.slice(0, MAX_FILTER_HISTORY_COUNT);
setLastFilterContents(limitedLastFilterContents);
saveSubComponentState(SubComponentName.FilterHistory, _collection, lastFilterContents);
saveSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, lastFilterContents);
};
const refreshDocumentsGrid = useCallback(
@ -1856,7 +1858,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
setSelectedColumnIds(newSelectedColumnIds);
saveSubComponentState(SubComponentName.ColumnsSelection, _collection, newSelectedColumnIds);
saveSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, newSelectedColumnIds);
};
const prevSelectedColumnIds = usePrevious({ selectedColumnIds, setSelectedColumnIds });
@ -1974,7 +1976,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
<Allotment
onDragEnd={(sizes: number[]) => {
tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
saveSubComponentState(SubComponentName.MainTabDivider, _collection, tabStateData);
saveSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
setTabStateData(tabStateData);
}}
>

45
src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
View File

@ -7,6 +7,7 @@ import {
MenuPopover,
MenuTrigger,
TableRowData as RowStateBase,
SortDirection,
Table,
TableBody,
TableCell,
@ -39,6 +40,8 @@ import { NormalizedEventKey } from "Common/Constants";
import { TableColumnSelectionPane } from "Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane";
import {
ColumnSizesMap,
ColumnSort,
deleteSubComponentState,
readSubComponentState,
saveSubComponentState,
SubComponentName,
@ -112,7 +115,11 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
};
const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {});
const columnSizesMap: ColumnSizesMap = readSubComponentState<ColumnSizesMap>(
SubComponentName.ColumnSizes,
collection,
{},
);
const columnSizesPx: ColumnSizesMap = {};
selectedColumnIds.forEach((columnId) => {
columnSizesPx[columnId] = (columnSizesMap && columnSizesMap[columnId]) || defaultSize;
@ -123,9 +130,20 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
const [sortState, setSortState] = React.useState<{
sortDirection: "ascending" | "descending";
sortColumn: TableColumnId | undefined;
}>({
sortDirection: undefined,
sortColumn: undefined,
}>(() => {
const sort = readSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, undefined);
if (!sort) {
return {
sortDirection: undefined,
sortColumn: undefined,
};
}
return {
sortDirection: sort.direction,
sortColumn: sort.columnId,
};
});
const onColumnResize = React.useCallback((_, { columnId, width }) => {
@ -138,7 +156,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
},
};
saveSubComponentState(SubComponentName.ColumnSizes, collection, newSizingOptions, true);
saveSubComponentState<ColumnSizesMap>(SubComponentName.ColumnSizes, collection, newSizingOptions, true);
return newSizingOptions;
});
@ -146,6 +164,17 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
// const restoreFocusTargetAttribute = useRestoreFocusTarget();
const onSortClick = (event: React.SyntheticEvent, columnId: string, direction: SortDirection) => {
setColumnSort(event, columnId, direction);
if (columnId === undefined || direction === undefined) {
deleteSubComponentState(SubComponentName.ColumnSort, collection);
return;
}
saveSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, { columnId, direction });
};
// Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes
const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = useMemo(
() =>
@ -184,17 +213,17 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
</MenuItem>
<MenuItem
icon={<TextSortAscendingRegular />}
onClick={(e) => setColumnSort(e, column.id, "ascending")}
onClick={(e) => onSortClick(e, column.id, "ascending")}
>
Sort ascending
</MenuItem>
<MenuItem
icon={<TextSortDescendingRegular />}
onClick={(e) => setColumnSort(e, column.id, "descending")}
onClick={(e) => onSortClick(e, column.id, "descending")}
>
Sort descending
</MenuItem>
<MenuItem icon={<ArrowResetRegular />} onClick={(e) => setColumnSort(e, undefined, undefined)}>
<MenuItem icon={<ArrowResetRegular />} onClick={(e) => onSortClick(e, undefined, undefined)}>
Reset sorting
</MenuItem>
<MenuItem key="editcolumns" icon={<EditRegular />} onClick={openColumnSelectionPane}>