Result sorting

src/app/components/browse/result-table/result-table.component.html

@@ -1,6 +1,5 @@
-<table id="resultTable" class="ui stackable selectable single fixed line striped compact small table" [class.inverted]="settingsService.theme == 'Dark'">
+<table id="resultTable" class="ui stackable selectable single sortable fixed line striped compact small table" [class.inverted]="settingsService.theme == 'Dark'">
   <!-- TODO: maybe have some of these tags customizable? E.g. small/large/compact/padded -->
-  <!-- TODO: maybe add the sortable class? -->
   <!-- TODO: learn semantic themes in order to change the $mobileBreakpoint global variable (better search table adjustment) -->
   <thead>
     <!-- NOTE: it would be nice to make this header sticky, but Fomantic-UI doesn't currently support that -->
@@ -10,10 +9,10 @@
           <input type="checkbox">
         </div>
       </th>
-      <th class="four wide">Name</th>
-      <th class="four wide">Artist</th>
-      <th class="four wide">Album</th>
-      <th class="four wide">Genre</th>
+      <th class="four wide" [class.sorted]="sortColumn == 'name'" [ngClass]="sortDirection" (click)="onColClicked('name')">Name</th>
+      <th class="four wide" [class.sorted]="sortColumn == 'artist'" [ngClass]="sortDirection" (click)="onColClicked('artist')">Artist</th>
+      <th class="four wide" [class.sorted]="sortColumn == 'album'" [ngClass]="sortDirection" (click)="onColClicked('album')">Album</th>
+      <th class="four wide" [class.sorted]="sortColumn == 'genre'" [ngClass]="sortDirection" (click)="onColClicked('genre')">Genre</th>
     </tr>
   </thead>
   <tbody>

src/app/components/browse/result-table/result-table.component.ts

@@ -5,6 +5,7 @@ import { CheckboxDirective } from '../../../core/directives/checkbox.directive'
 import { SearchService } from '../../../core/services/search.service'
 import { SelectionService } from '../../../core/services/selection.service'
 import { SettingsService } from 'src/app/core/services/settings.service'
+import Comparators from 'comparators'
 
 @Component({
   selector: 'app-result-table',
@@ -20,6 +21,8 @@ export class ResultTableComponent implements OnInit {
 
   results: SongResult[]
   activeRowID: number = null
+  sortDirection: 'ascending' | 'descending' = 'descending'
+  sortColumn: 'name' | 'artist' | 'album' | 'genre' | null = null
 
   constructor(
     private searchService: SearchService,
@@ -35,6 +38,11 @@ export class ResultTableComponent implements OnInit {
     this.searchService.onSearchChanged(results => {
       this.activeRowID = null
       this.results = results
+      this.updateSort()
+    })
+
+    this.searchService.onNewSearch(() => {
+      this.sortColumn = null
     })
   }
 
@@ -43,6 +51,24 @@ export class ResultTableComponent implements OnInit {
     this.rowClicked.emit(result)
   }
 
+  onColClicked(column: 'name' | 'artist' | 'album' | 'genre') {
+    if (this.sortColumn != column) {
+      this.sortColumn = column
+      this.sortDirection = 'descending'
+    } else if (this.sortDirection == 'descending') {
+      this.sortDirection = 'ascending'
+    } else {
+      this.sortDirection = 'descending'
+    }
+    this.updateSort()
+  }
+
+  private updateSort() {
+    if (this.sortColumn != null) {
+      this.results.sort(Comparators.comparing(this.sortColumn, { reversed: this.sortDirection == 'ascending' }))
+    }
+  }
+
   /**
    * Called when the user checks the `checkboxColumn`.
    */

src/app/core/services/search.service.ts

@@ -32,8 +32,8 @@ export class SearchService {
     }
     this.awaitingResults = false
 
-    this.resultsChangedEmitter.emit(this.results)
     this.newResultsEmitter.emit(this.results)
+    this.resultsChangedEmitter.emit(this.results)
   }
 
   isLoading() {
@@ -43,7 +43,7 @@ export class SearchService {
   /**
    * Event emitted when new search results are returned
    * or when more results are added to an existing search.
-   * (emitted before `onNewSearch`)
+   * (emitted after `onNewSearch`)
    */
   onSearchChanged(callback: (results: SongResult[]) => void) {
     this.resultsChangedEmitter.subscribe(callback)
@@ -51,7 +51,7 @@ export class SearchService {
 
   /**
    * Event emitted when a new search query is typed in.
-   * (emitted after `onSearchChanged`)
+   * (emitted before `onSearchChanged`)
    */
   onNewSearch(callback: (results: SongResult[]) => void) {
     this.newResultsEmitter.subscribe(callback)