Merge pull request #342 from antegs/fix-gallery-sorting

Fix gallery sorting #341

Author: bpatrik

package.json

@@ -125,7 +125,6 @@
     "leaflet": "1.7.1",
     "leaflet.markercluster": "1.5.0",
     "mocha": "8.4.0",
-    "natural-orderby": "2.0.3",
     "ngx-bootstrap": "6.2.0",
     "ngx-clipboard": "14.0.1",
     "ngx-cookie-service": "11.0.2",

src/frontend/app/ui/gallery/gallery.component.ts

@@ -17,7 +17,6 @@ import {PhotoDTO} from '../../../../common/entities/PhotoDTO';
 import {QueryParams} from '../../../../common/QueryParams';
 import {SeededRandomService} from '../../model/seededRandom.service';
 import {take} from 'rxjs/operators';
-import {compare} from 'natural-orderby';
 
 @Component({
   selector: 'app-gallery',
@@ -160,33 +159,34 @@ export class GalleryComponent implements OnInit, OnDestroy {
     }
   };
 
+  private collator = new Intl.Collator(undefined, {numeric: true});
+
   private sortDirectories(): void {
     if (!this.directories) {
       return;
     }
     switch (this.galleryService.sorting.value) {
       case SortingMethods.ascRating: // directories does not have rating
       case SortingMethods.ascName:
-        this.directories.sort((a, b) => compare()(a.name, b.name));
+        this.directories.sort((a, b) => this.collator.compare(a.name, b.name));
         break;
       case SortingMethods.ascDate:
         if (Config.Client.Other.enableDirectorySortingByDate === true) {
-          this.directories.sort((a, b) => compare()(a.lastModified, b.lastModified));
+          this.directories.sort((a, b) => a.lastModified - b.lastModified);
           break;
         }
-        this.directories.sort((a, b) => compare()(a.name, b.name));
+        this.directories.sort((a, b) => this.collator.compare(a.name, b.name));
         break;
-
       case SortingMethods.descRating: // directories does not have rating
       case SortingMethods.descName:
-        this.directories.sort((a, b) => compare({order: 'desc'})(a.name, b.name));
+        this.directories.sort((a, b) => this.collator.compare(b.name, a.name));
         break;
       case SortingMethods.descDate:
         if (Config.Client.Other.enableDirectorySortingByDate === true) {
-          this.directories.sort((a, b) => compare({order: 'desc'})(a.lastModified, b.lastModified));
+          this.directories.sort((a, b) => b.lastModified - a.lastModified);
           break;
         }
-        this.directories.sort((a, b) => compare({order: 'desc'})(a.name, b.name));
+        this.directories.sort((a, b) => this.collator.compare(b.name, a.name));
         break;
       case SortingMethods.random:
         this.rndService.setSeed(this.directories.length);
@@ -207,4 +207,3 @@ export class GalleryComponent implements OnInit, OnDestroy {
 
   }
 }
-

src/frontend/app/ui/gallery/grid/grid.gallery.component.ts

@@ -28,7 +28,6 @@ import {SortingMethods} from '../../../../../common/entities/SortingMethods';
 import {MediaDTO, MediaDTOUtils} from '../../../../../common/entities/MediaDTO';
 import {QueryParams} from '../../../../../common/QueryParams';
 import {SeededRandomService} from '../../../model/seededRandom.service';
-import {compare} from 'natural-orderby';
 
 @Component({
   selector: 'app-gallery-grid',
@@ -239,13 +238,15 @@ export class GalleryGridComponent implements OnChanges, OnInit, AfterViewInit, O
     this.changeDetector.detectChanges();
   }
 
+  private collator = new Intl.Collator(undefined, {numeric: true});
+
   private sortPhotos(): void {
     switch (this.galleryService.sorting.value) {
       case SortingMethods.ascName:
-        this.media.sort((a: PhotoDTO, b: PhotoDTO) => compare()(a.name, b.name));
+        this.media.sort((a: PhotoDTO, b: PhotoDTO) => this.collator.compare(a.name, b.name));
         break;
       case SortingMethods.descName:
-        this.media.sort((a: PhotoDTO, b: PhotoDTO) => compare({order: 'desc'})(a.name, b.name));
+        this.media.sort((a: PhotoDTO, b: PhotoDTO) => this.collator.compare(b.name, a.name));
         break;
       case SortingMethods.ascDate:
         this.media.sort((a: PhotoDTO, b: PhotoDTO): number => {
@@ -378,6 +379,3 @@ export class GalleryGridComponent implements OnChanges, OnInit, AfterViewInit, O
 
 
 }
-
-
-