Table scrolling and sorting

src-angular/app/components/browse/browse.component.html

@@ -2,7 +2,8 @@
 <div class="flex flex-1 overflow-y-hidden">
 	<!-- TODO: adjust sizing -->
 	<div
-		class="basis-2/3 flex-1 overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
+		class="basis-2/3 flex-1 overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full"
+		(scroll)="resultTable.tableScrolled($event)">
 		<app-result-table #resultTable (rowClicked)="chartSidebar.onRowClicked($event)"></app-result-table>
 	</div>
 	<div class="basis-1/3 min-w-[310px] max-w-[512px]">

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

@@ -1,17 +1,27 @@
-<table id="resultTable" class="table table-zebra table-pin-rows overflow-y-auto">
+<table id="resultTable" class="table table-zebra table-pin-rows">
 	<!-- TODO: maybe have some of these tags customizable? E.g. small/large/compact/padded -->
 	<!-- 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 -->
 		<tr>
 			<th class="collapsing" id="checkboxColumn">
 				<input #checkAllCheckbox type="checkbox" class="checkbox" (change)="checkAll(checkAllCheckbox.checked)" />
 			</th>
-			<th [class.sorted]="sortColumn === 'name'" [ngClass]="sortDirection" (click)="onColClicked('name')">Name</th>
+			<th [ngClass]="sortDirection" (click)="onColClicked('name')">
-			<th [class.sorted]="sortColumn === 'artist'" [ngClass]="sortDirection" (click)="onColClicked('artist')">Artist</th>
+				Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
-			<th [class.sorted]="sortColumn === 'album'" [ngClass]="sortDirection" (click)="onColClicked('album')">Album</th>
+			</th>
-			<th [class.sorted]="sortColumn === 'genre'" [ngClass]="sortDirection" (click)="onColClicked('genre')">Genre</th>
+			<th [ngClass]="sortDirection" (click)="onColClicked('artist')">
-			<th [class.sorted]="sortColumn === 'year'" [ngClass]="sortDirection" (click)="onColClicked('year')">Year</th>
+				Artist
+				<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
+			</th>
+			<th [ngClass]="sortDirection" (click)="onColClicked('album')">
+				Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
+			</th>
+			<th [ngClass]="sortDirection" (click)="onColClicked('genre')">
+				Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
+			</th>
+			<th [ngClass]="sortDirection" (click)="onColClicked('year')">
+				Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
+			</th>
 		</tr>
 	</thead>
 	<tbody>

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

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, HostBinding, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'
 
-import Comparators from 'comparators'
+import { sortBy } from 'lodash'
 import { SettingsService } from 'src-angular/app/core/services/settings.service'
 import { ChartData } from 'src-shared/interfaces/search.interface'
 
@@ -22,7 +22,7 @@ export class ResultTableComponent implements OnInit {
 	@ViewChildren('tableRow') tableRows: QueryList<ResultTableRowComponent>
 
 	activeSong: ChartData[] | null = null
-	sortDirection: 'ascending' | 'descending' = 'descending'
+	sortDirection: 'ascending' | 'descending' = 'ascending'
 	sortColumn: 'name' | 'artist' | 'album' | 'genre' | 'year' | null = null
 
 	constructor(
@@ -53,7 +53,7 @@ export class ResultTableComponent implements OnInit {
 		if (this.songs.length === 0) { return }
 		if (this.sortColumn !== column) {
 			this.sortColumn = column
-			this.sortDirection = 'descending'
+			this.sortDirection = 'ascending'
 		} else if (this.sortDirection === 'descending') {
 			this.sortDirection = 'ascending'
 		} else {
@@ -63,8 +63,11 @@ export class ResultTableComponent implements OnInit {
 	}
 
 	private updateSort() {
-		if (this.sortColumn !== null) {
+		const col = this.sortColumn
-			this.songs.sort(Comparators.comparing(this.sortColumn, { reversed: this.sortDirection === 'ascending' }))
+		if (col !== null) {
+			const groupedSongs = sortBy(this.searchService.groupedSongs, song => song[0][col])
+			if (this.sortDirection === 'descending') { groupedSongs.reverse() }
+			this.searchService.groupedSongs = groupedSongs
 		}
 	}
 
@@ -79,4 +82,15 @@ export class ResultTableComponent implements OnInit {
 			this.selectionService.deselectAll()
 		}
 	}
+
+	tableScrolled(event: Event): void {
+		if (event.target instanceof HTMLElement) {
+			if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) < 100) {
+				// Scrolled near the bottom of the table
+				if (this.searchService.areMorePages && !this.searchService.searchLoading) {
+					this.searchService.search(this.searchService.searchControl.value || '*', true).subscribe()
+				}
+			}
+		}
+	}
 }

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

@@ -8,6 +8,8 @@ import { Difficulty, Instrument } from 'scan-chart'
 import { environment } from 'src-angular/environments/environment'
 import { AdvancedSearch, ChartData, SearchResult } from 'src-shared/interfaces/search.interface'
 
+const resultsPerPage = 25
+
 @Injectable({
 	providedIn: 'root',
 })
@@ -61,7 +63,7 @@ export class SearchService {
 		this.search().subscribe()
 	}
 
-	get areMorePages() { return this.songsResponse.page && this.groupedSongs.length === this.songsResponse.page * 10 }
+	get areMorePages() { return this.songsResponse.page && this.groupedSongs.length === this.songsResponse.page * resultsPerPage }
 
 	/**
 	 * General search, uses the `/search?q=` endpoint.
@@ -83,7 +85,7 @@ export class SearchService {
 		let retries = 10
 		return this.http.post<SearchResult>(`${environment.apiUrl}/search`, {
 			search,
-			per_page: 25,
+			per_page: resultsPerPage,
 			page: this.currentPage,
 			instrument: this.instrument.value,
 			difficulty: this.difficulty.value,