Fix natural sort order

owncloud · Mar 21, 2022 · a43bab6 · a43bab6
1 parent bc67f4b
commit a43bab6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/changelog/unreleased/bugfix-sort-order b/changelog/unreleased/bugfix-sort-order
@@ -0,0 +1,6 @@
+Bugfix: Natural sort order
+
+We've fixed the sort order to respect natural sorting again. Also used the chance to make use of `Intl.Compare` instead of `localeCompare` which is considered to be a performance improvement.
+
+https://github.com/owncloud/web/issues/6532
+https://github.com/owncloud/web/pull/6632
diff --git a/packages/web-app-files/src/composables/sort/useSort.ts b/packages/web-app-files/src/composables/sort/useSort.ts
@@ -125,23 +125,31 @@ const sortHelper = <T extends SortableItem>(
  return items
  }
  const { sortable } = field
+ const collator = new Intl.Collator(navigator.language, { sensitivity: 'base', numeric: true })
 
  if (sortBy === 'name') {
  const folders = [...items.filter((i) => i.type === 'folder')].sort((a, b) =>
- compare(a, b, sortBy, sortDir, sortable)
+ compare(a, b, collator, sortBy, sortDir, sortable)
  )
  const files = [...items.filter((i) => i.type !== 'folder')].sort((a, b) =>
- compare(a, b, sortBy, sortDir, sortable)
+ compare(a, b, collator, sortBy, sortDir, sortable)
  )
  if (sortDir === SortDir.Asc) {
  return folders.concat(files)
  }
  return files.concat(folders)
  }
- return [...items].sort((a, b) => compare(a, b, sortBy, sortDir, sortable))
+ return [...items].sort((a, b) => compare(a, b, collator, sortBy, sortDir, sortable))
 }
 
-const compare = (a: SortableItem, b: SortableItem, sortBy: string, sortDir: SortDir, sortable) => {
+const compare = (
+ a: SortableItem,
+ b: SortableItem,
+ collator: Intl.Collator,
+ sortBy: string,
+ sortDir: SortDir,
+ sortable
+) => {
  let aValue = a[sortBy]
  let bValue = b[sortBy]
  const modifier = sortDir === SortDir.Asc ? 1 : -1
@@ -163,10 +171,7 @@ const compare = (a: SortableItem, b: SortableItem, sortBy: string, sortDir: Sort
  if (!isNaN(aValue) && !isNaN(bValue)) {
  return (aValue - bValue) * modifier
  }
- const userLang = navigator.language // FIXME: ts error: || navigator.userLanguage
- const c = (aValue || '')
- .toString()
- .localeCompare((bValue || '').toString(), userLang, { sensitivity: 'base' })
+ const c = collator.compare((aValue || '').toString(), (bValue || '').toString())
  return c * modifier
 }
 

diff --git a/packages/web-app-files/tests/unit/composables/sort/useSort.spec.ts b/packages/web-app-files/tests/unit/composables/sort/useSort.spec.ts
@@ -47,7 +47,8 @@ describe('useSort', () => {
  { id: '5', name: 'dir2', path: '', webDavPath: '', time: 7, type: 'folder' },
  { id: '6', name: 'b.png', path: '', webDavPath: '', time: 1 },
  { id: '7', name: 'Dir1', path: '', webDavPath: '', time: 5, type: 'folder' },
- { id: '8', name: 'dir3', path: '', webDavPath: '', time: 8, type: 'folder' }
+ { id: '8', name: 'dir11', path: '', webDavPath: '', time: 8, type: 'folder' },
+ { id: '9', name: 'dir3', path: '', webDavPath: '', time: 9, type: 'folder' }
  ]
 
  it('sorts resources by name', () => {
@@ -76,6 +77,7 @@ describe('useSort', () => {
  'dir2',
  'dir3',
  'Dir4',
+ 'dir11',
  'a.png',
  'A.png',
  'b.png',
@@ -88,6 +90,7 @@ describe('useSort', () => {
  'b.png',
  'a.png',
  'A.png',
+ 'dir11',
  'Dir4',
  'dir3',
  'dir2',