From 80c074edcc843b4cc9246d14970c03d73d2f6b18 Mon Sep 17 00:00:00 2001 From: Jacob Wang Date: Sun, 28 Apr 2024 23:47:09 -0700 Subject: [PATCH 1/7] Add naturalSort utility function for list view sorting --- .../content/list-view/utils/naturalSort.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 app/editor/src/features/content/list-view/utils/naturalSort.ts diff --git a/app/editor/src/features/content/list-view/utils/naturalSort.ts b/app/editor/src/features/content/list-view/utils/naturalSort.ts new file mode 100644 index 0000000000..ddf822f6e8 --- /dev/null +++ b/app/editor/src/features/content/list-view/utils/naturalSort.ts @@ -0,0 +1,19 @@ +import { IContentSearchResult } from 'store/slices'; + +function getPageSectionValue(row: IContentSearchResult) { + // gnerate page:section string, keep it in the lowercase + const value = `${row.original.page ? row.original.page : ''}:${ + row.original.section ? row.original.section : '' + }`.toLowerCase(); + return value; +} + +export function naturalSortValue(row: IContentSearchResult) { + const pageSectionValue = getPageSectionValue(row); + // Replace each segment of digits and non-digits with formatted strings + // Digits are padded with zeros to the left to ensure correct natural sorting + // Non-digits are left as is + return pageSectionValue.replace(/(\d+)|(\D+)/g, (_, $1, $2) => + $1 ? Number($1).toString().padStart(10, '0') : $2, + ); +} From 7f825bcd98f845a05fe3ada7c51f2c8f53aadc16 Mon Sep 17 00:00:00 2001 From: Jacob Wang Date: Tue, 30 Apr 2024 13:59:05 -0700 Subject: [PATCH 2/7] added source for sorting as well --- .../features/content/list-view/utils/naturalSort.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/editor/src/features/content/list-view/utils/naturalSort.ts b/app/editor/src/features/content/list-view/utils/naturalSort.ts index ddf822f6e8..32a291fe5e 100644 --- a/app/editor/src/features/content/list-view/utils/naturalSort.ts +++ b/app/editor/src/features/content/list-view/utils/naturalSort.ts @@ -7,13 +7,23 @@ function getPageSectionValue(row: IContentSearchResult) { }`.toLowerCase(); return value; } +function getSourceValue(row: IContentSearchResult): string { + // get source code for sorting + return row.original.source ? row.original.source.code.toLowerCase() : ''; +} export function naturalSortValue(row: IContentSearchResult) { const pageSectionValue = getPageSectionValue(row); + const source = getSourceValue(row); + // Replace each segment of digits and non-digits with formatted strings // Digits are padded with zeros to the left to ensure correct natural sorting // Non-digits are left as is - return pageSectionValue.replace(/(\d+)|(\D+)/g, (_, $1, $2) => + // eq. 'A2:sport' -> 'A0000000002:sport' + // eq. 'A02:sport' -> 'A0000000002:sport' + const formattedPageSectionValue = pageSectionValue.replace(/(\d+)|(\D+)/g, (_, $1, $2) => $1 ? Number($1).toString().padStart(10, '0') : $2, ); + // we do consider source as the primary key for sorting + return `${source}:${formattedPageSectionValue}`; } From cb5be40980bf70040878fea852e67274ceb30524 Mon Sep 17 00:00:00 2001 From: Jacob Wang Date: Tue, 30 Apr 2024 13:59:28 -0700 Subject: [PATCH 3/7] use naturalSort --- .../src/features/content/list-view/hooks/useColumns.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/app/editor/src/features/content/list-view/hooks/useColumns.tsx b/app/editor/src/features/content/list-view/hooks/useColumns.tsx index 512e0f82a9..294fee93e2 100644 --- a/app/editor/src/features/content/list-view/hooks/useColumns.tsx +++ b/app/editor/src/features/content/list-view/hooks/useColumns.tsx @@ -20,6 +20,8 @@ import { WorkOrderStatusName, } from 'tno-core'; +import { naturalSortValue } from '../utils/naturalSort'; + export interface IColumnProps { fetch: ( filter: IContentListFilter & Partial, @@ -67,11 +69,7 @@ export const useColumns = ({ fetch }: IColumnProps): ITableHookColumn { - return `${row.original.page ? row.original.page : ''}:${ - row.original.section ? row.original.section : '' - }`; - }, + sort: (row) => naturalSortValue(row.original), label: ( Page:Section From d92ed910c16df739ec2e386c781c97b545691b64 Mon Sep 17 00:00:00 2001 From: Jacob Wang Date: Tue, 30 Apr 2024 14:00:06 -0700 Subject: [PATCH 4/7] Refactor sorting logic in FlexboxTable component --- .../core/src/components/table/FlexboxTable.tsx | 7 ++----- .../src/components/table/utils/determineSort.ts | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 libs/npm/core/src/components/table/utils/determineSort.ts diff --git a/libs/npm/core/src/components/table/FlexboxTable.tsx b/libs/npm/core/src/components/table/FlexboxTable.tsx index e0a0a449a2..36f49f6214 100644 --- a/libs/npm/core/src/components/table/FlexboxTable.tsx +++ b/libs/npm/core/src/components/table/FlexboxTable.tsx @@ -4,7 +4,7 @@ import { Container } from '../container'; import { Text } from '../form'; import { getSortId, ITableProps, SortFlag, TablePager, useTable } from '.'; import * as styled from './styled'; - +import { determineSortValue } from './utils/determineSort'; export const FlexboxTable = ({ rowId, columns, @@ -109,10 +109,7 @@ export const FlexboxTable = ({ { id: getSortId(col, index), index: index, - sort: - col.sort ?? typeof col.accessor === 'function' - ? undefined - : col.accessor, + sort: determineSortValue(col), isSorted: !col.isSorted ? true : col.isSortedDesc ? false : true, isSortedDesc: col.isSorted ? !col.isSortedDesc : col.isSortedDesc, }, diff --git a/libs/npm/core/src/components/table/utils/determineSort.ts b/libs/npm/core/src/components/table/utils/determineSort.ts new file mode 100644 index 0000000000..ce7af9c874 --- /dev/null +++ b/libs/npm/core/src/components/table/utils/determineSort.ts @@ -0,0 +1,16 @@ +import { ITableInternalHeaderColumn } from '../interfaces/ITableInternalHeaderColumn'; + +export const determineSortValue = (col: ITableInternalHeaderColumn) => { + // If 'col.sort' is defined and not null, use it directly for sorting + if (col.sort !== undefined && col.sort !== null) { + return col.sort; + } + // If 'col.sort' is undefined or null and 'accessor' is a function, + // it indicates that 'accessor' cannot be used for sorting directly (e.g., dynamic values) + if (typeof col.accessor === 'function') { + return undefined; + } + // If 'col.sort' is undefined or null, and 'accessor' is not a function, + // use 'accessor' as the field name for sorting + return col.accessor; +}; From 96790f540a745c8fad2755b47814a829b3d56c5c Mon Sep 17 00:00:00 2001 From: Jacob Wang Date: Tue, 30 Apr 2024 14:15:41 -0700 Subject: [PATCH 5/7] new sor in paper useColumns.tsx --- .../src/features/content/papers/hooks/useColumns.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/app/editor/src/features/content/papers/hooks/useColumns.tsx b/app/editor/src/features/content/papers/hooks/useColumns.tsx index f92d5d7b46..7345f349e5 100644 --- a/app/editor/src/features/content/papers/hooks/useColumns.tsx +++ b/app/editor/src/features/content/papers/hooks/useColumns.tsx @@ -2,6 +2,7 @@ import { Status } from 'components/status'; import { TabControl } from 'components/tab-control'; import { AdvancedSearchKeys } from 'features/content/constants'; import { IContentListAdvancedFilter, IContentListFilter } from 'features/content/interfaces'; +import { naturalSortValue } from 'features/content/list-view/utils/naturalSort'; import { useContent } from 'store/hooks'; import { IContentSearchResult } from 'store/slices'; import { CellEllipsis, Checkbox, ITableHookColumn, LogicalOperator, Page, Row } from 'tno-core'; @@ -45,11 +46,7 @@ export const useColumns = ({ }, { accessor: 'section', - sort: (row) => { - return `${row.original.page ? row.original.page : ''}:${ - row.original.section ? row.original.section : '' - }`; - }, + sort: (row) => naturalSortValue(row.original), label: ( Page:Section From b86e162ad6bbc549ad01dd514ecb60a41c0059c0 Mon Sep 17 00:00:00 2001 From: Jacob Wang Date: Wed, 1 May 2024 11:12:00 -0700 Subject: [PATCH 6/7] not sort by source --- .../src/features/content/list-view/utils/naturalSort.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/editor/src/features/content/list-view/utils/naturalSort.ts b/app/editor/src/features/content/list-view/utils/naturalSort.ts index 32a291fe5e..f5e19ce405 100644 --- a/app/editor/src/features/content/list-view/utils/naturalSort.ts +++ b/app/editor/src/features/content/list-view/utils/naturalSort.ts @@ -14,8 +14,6 @@ function getSourceValue(row: IContentSearchResult): string { export function naturalSortValue(row: IContentSearchResult) { const pageSectionValue = getPageSectionValue(row); - const source = getSourceValue(row); - // Replace each segment of digits and non-digits with formatted strings // Digits are padded with zeros to the left to ensure correct natural sorting // Non-digits are left as is @@ -25,5 +23,5 @@ export function naturalSortValue(row: IContentSearchResult) { $1 ? Number($1).toString().padStart(10, '0') : $2, ); // we do consider source as the primary key for sorting - return `${source}:${formattedPageSectionValue}`; + return formattedPageSectionValue; } From cc98a07309f11c055c81d3590a4bb05e59737907 Mon Sep 17 00:00:00 2001 From: Jacob Wang Date: Wed, 1 May 2024 12:56:42 -0700 Subject: [PATCH 7/7] remove unused method --- .../src/features/content/list-view/utils/naturalSort.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/editor/src/features/content/list-view/utils/naturalSort.ts b/app/editor/src/features/content/list-view/utils/naturalSort.ts index f5e19ce405..ed4430937c 100644 --- a/app/editor/src/features/content/list-view/utils/naturalSort.ts +++ b/app/editor/src/features/content/list-view/utils/naturalSort.ts @@ -7,10 +7,6 @@ function getPageSectionValue(row: IContentSearchResult) { }`.toLowerCase(); return value; } -function getSourceValue(row: IContentSearchResult): string { - // get source code for sorting - return row.original.source ? row.original.source.code.toLowerCase() : ''; -} export function naturalSortValue(row: IContentSearchResult) { const pageSectionValue = getPageSectionValue(row);