Add sorting by rating #80

src/common/PG2ConfMap.ts

@@ -11,6 +11,8 @@ export const PG2ConfMap = {
     '.order_ascending_name.pg2conf': SortingMethods.ascName,
     '.order_descending_date.pg2conf': SortingMethods.descDate,
     '.order_ascending_date.pg2conf': SortingMethods.ascDate,
+    '.order_descending_rating.pg2conf': SortingMethods.descRating,
+    '.order_ascending_rating.pg2conf': SortingMethods.ascRating,
     '.order_random.pg2conf': SortingMethods.random
   }
 };

src/common/entities/SortingMethods.ts

@@ -1,3 +1,3 @@
 export enum SortingMethods {
-  ascName = 1, descName = 2, ascDate = 3, descDate = 4, random = 5
+  ascName = 1, descName, ascDate, descDate, ascRating, descRating, random
 }

src/frontend/app/pipes/IconizeSortingMethod.ts

@@ -6,6 +6,10 @@ import {SortingMethods} from '../../../common/entities/SortingMethods';
 export class IconizeSortingMethod implements PipeTransform {
   transform(method: SortingMethods): string {
     switch (method) {
+      case SortingMethods.ascRating:
+        return '<span class="oi oi-sort-ascending"></span><span class="oi oi-star text-bold"></span>';
+      case SortingMethods.descRating:
+        return '<span class="oi oi-sort-descending"></span><span class="oi oi-star text-bold"></span>';
       case SortingMethods.ascName:
         return '<span class="oi oi-sort-ascending"></span><strong>A</strong>';
       case SortingMethods.descName:

src/frontend/app/pipes/StringifySortingMethod.ts

@@ -9,6 +9,10 @@ export class StringifySortingMethod implements PipeTransform {
 
   transform(method: SortingMethods): string {
     switch (method) {
+      case SortingMethods.ascRating:
+        return $localize`ascending rating`;
+      case SortingMethods.descRating:
+        return $localize`descending rating`;
       case SortingMethods.ascName:
         return $localize`ascending name`;
       case SortingMethods.descName:

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

@@ -165,6 +165,7 @@ export class GalleryComponent implements OnInit, OnDestroy {
       return;
     }
     switch (this.galleryService.sorting.value) {
+      case SortingMethods.ascRating: // directories does not have rating
       case SortingMethods.ascName:
         this.directories.sort((a: DirectoryDTO, b: DirectoryDTO) => compare()(a.name, b.name));
         break;
@@ -175,6 +176,8 @@ export class GalleryComponent implements OnInit, OnDestroy {
         }
         this.directories.sort((a: DirectoryDTO, b: DirectoryDTO) => compare()(a.name, b.name));
         break;
+
+      case SortingMethods.descRating: // directories does not have rating
       case SortingMethods.descName:
         this.directories.sort((a: DirectoryDTO, b: DirectoryDTO) => compare({order: 'desc'})(a.name, b.name));
         break;

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

@@ -257,6 +257,12 @@ export class GalleryGridComponent implements OnChanges, OnInit, AfterViewInit, O
           return b.metadata.creationDate - a.metadata.creationDate;
         });
         break;
+      case SortingMethods.ascRating:
+        this.media.sort((a: PhotoDTO, b: PhotoDTO) => (a.metadata.rating || 0) - (b.metadata.rating || 0));
+        break;
+      case SortingMethods.descRating:
+        this.media.sort((a: PhotoDTO, b: PhotoDTO) => (b.metadata.rating || 0) - (a.metadata.rating || 0));
+        break;
       case SortingMethods.random:
         this.rndService.setSeed(this.media.length);
         this.media.sort((a: PhotoDTO, b: PhotoDTO): number => {

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css

@@ -30,7 +30,11 @@ ol {
 }
 
 .dropdown-menu {
-  min-width: 10rem;
+  min-width: 13rem;
+}
+
+.dropdown-item{
+  padding: 0.25rem 0.5rem;
 }
 
 .row {

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html

@@ -43,7 +43,9 @@
         <li class="row dropdown-item" role="menuitem"
             *ngFor="let type of sortingMethodsType"
             (click)="setSorting(type.key)">
-          <div class="col-3" [outerHTML]="type.key | iconizeSorting"></div>
+          <div class="col-3">
+            <div [outerHTML]="type.key | iconizeSorting"></div>
+          </div>
           <div class="col-9">{{type.key | stringifySorting}}</div>
         </li>
       </ul>