Added sorting to user suspicious scores

nise-frontend/src/app/view-user/view-user.component.html

@@ -80,9 +80,28 @@
               </th>
               <th></th>
             </tr>
+            <tr class="filters">
+              <th>
+                <span title="Sort by beatmap star rating (asc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'beatmap_star_rating-asc'" (click)="sortScores('beatmap_star_rating', 'asc')">▲</span>
+                <span title="Sort by beatmap star rating (desc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'beatmap_star_rating-desc'" (click)="sortScores('beatmap_star_rating', 'desc')">▼</span>
+              </th>
+              <th>
+                <span title="Sort by date (asc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'date-asc'" (click)="sortScores('date', 'asc')">▲</span>
+                <span title="Sort by date (desc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'date-desc'" (click)="sortScores('date', 'desc')">▼</span>
+              </th>
+              <th>
+                <span title="Sort by cvUR (asc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'ur-asc'" (click)="sortScores('ur', 'asc')">▲</span>
+                <span title="Sort by cvUR (desc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'ur-desc'" (click)="sortScores('ur', 'desc')">▼</span>
+              </th>
+              <th>
+                <span title="Sort by PP (asc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'pp-asc'" (click)="sortScores('pp', 'asc')">▲️</span>
+                <span title="Sort by PP (desc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'pp-desc'" (click)="sortScores('pp', 'desc')">▼</span>
+              </th>
+              <th></th>
+            </tr>
             </thead>
             <tbody>
-            <tr *ngFor="let score of this.userInfo.suspicious_scores">
+            <tr *ngFor="let score of this.filteredScores">
               <td>
                 <div class="image-container">
                   <a href="https://osu.ppy.sh/beatmaps/{{ score.beatmap_id }}?mode=osu" target="_blank">

nise-frontend/src/app/view-user/view-user.component.ts

@@ -12,6 +12,7 @@ import {RxStompService} from "../../corelib/stomp/stomp.service";
 import {Message} from "@stomp/stompjs/esm6";
 import {CuteLoadingComponent} from "../../corelib/components/cute-loading/cute-loading.component";
 import {differenceInDays, differenceInHours} from "date-fns/fp";
+import {FilterManagerService} from "../filter-manager.service";
 
 interface UserInfo {
   user_details: UserDetails;
@@ -26,6 +27,10 @@ interface UserQueueWebsocketPacket {
   data?: UserQueueDetails;
 }
 
+interface UserScoresFilter {
+  sorting?: string;
+}
+
 @Component({
   selector: 'app-view-user',
   standalone: true,
@@ -50,6 +55,9 @@ export class ViewUserComponent implements OnInit, OnChanges, OnDestroy {
 
   liveUserSub: Subscription | undefined;
 
+  filterManager = new FilterManagerService<UserScoresFilter>("userScoresFilter");
+  filteredScores: SuspiciousScore[] = [];
+
   constructor(
     private httpClient: HttpClient,
     private activatedRoute: ActivatedRoute,
@@ -70,6 +78,8 @@ export class ViewUserComponent implements OnInit, OnChanges, OnDestroy {
     this.isLoading = true;
     this.userInfo = null;
 
+    this.filterManager.setFiltersFromLocal();
+
     this.activatedRoute.params.subscribe(params => {
       this.userId = params['userId'];
       if (this.userId) {
@@ -94,6 +104,14 @@ export class ViewUserComponent implements OnInit, OnChanges, OnDestroy {
       (response: UserInfo) => {
         this.notFound = false;
         this.userInfo = response;
+        // Process the scores filter
+        this.filteredScores = response.suspicious_scores;
+        if(this.filterManager.filters.sorting) {
+          let field = this.filterManager.filters.sorting.split("-")[0];
+          let order = this.filterManager.filters.sorting.split("-")[1];
+          //@ts-ignore
+          this.sortScores(field, order);
+        }
         if(!isScoreUpdate) {
           this.title.setTitle(`${this.userInfo.user_details.username}`);
           this.subscribeToUser();
@@ -162,6 +180,27 @@ export class ViewUserComponent implements OnInit, OnChanges, OnDestroy {
       });
   }
 
+  sortScores(field: 'pp' | 'ur' | 'beatmap_star_rating' | 'date', order: 'asc' | 'desc'): void {
+    if(!this.userInfo) {
+      return;
+    }
+
+    this.filterManager.filters.sorting = `${field}-${order}`
+    this.filterManager.persistToLocalStorage();
+
+    this.filteredScores = this.userInfo.suspicious_scores.sort((a: SuspiciousScore, b: SuspiciousScore): number => {
+      let compareValue = 0;
+
+      if (field === 'pp' || field === 'ur' || field === 'beatmap_star_rating') {
+        compareValue = a[field] - b[field];
+      } else if (field === 'date') {
+        compareValue = a[field] < b[field] ? -1 : a[field] > b[field] ? 1 : 0;
+      }
+
+      return order === 'asc' ? compareValue : -compareValue;
+    });
+  }
+
   protected readonly formatDuration = formatDuration;
   protected readonly countryCodeToFlag = countryCodeToFlag;