[Library] Add Infinite Scrolling

Add infinite scrolling and fix selecting rows

src-angular/app/components/library/library-table/library-table.component.html

@@ -8,6 +8,7 @@
 </div>
 <div
 	*ngIf="songs.length > 0"
+	(scroll)="onScroll($event)"
 	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 h-[calc(100vh-164px)]">
 	<table id="resultTable" class="table table-zebra table-pin-rows" [class.table-xs]="settingsService.isCompactTable">
 		<thead>
@@ -38,12 +39,7 @@
 		<tbody>
 			<tr *ngFor="let song of songs; trackBy: trackByFn">
 				<td>
-					<input
-						type="checkbox"
-						class="checkbox"
-						#inputBox
-						(change)="onCheckboxChange(song, $event.target!)"
-						[checked]="selectedSongs.includes(song)" />
+					<input type="checkbox" class="checkbox" #inputBox (change)="onCheckboxChange(song, $event.target!)" [checked]="rowIsSelected(song)" />
 				</td>
 				<td>{{ song.name }}</td>
 				<td>{{ song.artist }}</td>
@@ -53,8 +49,16 @@
 			</tr>
 		</tbody>
 	</table>
+	<div *ngIf="isLoading" class="text-center py-4">Loading...</div>
 </div>
 
-<div class="flex align-center justify-center items-center h-[calc(100vh-169.5px)]" *ngIf="songs.length < 1">
+<div class="flex align-center justify-center items-center h-[calc(100vh-169.5px)]" *ngIf="songs.length < 1 && !hasSearched">
 	<p class="text-center" style="font-size: 1.5rem">No songs added!</p>
 </div>
+
+<div
+	class="align-center h-[calc(100vh-169.5px)]"
+	*ngIf="songs.length < 1 && hasSearched"
+	style="display: flex; justify-content: center; align-items: center">
+	<p class="text-center" style="font-size: 1.5rem">No songs found!</p>
+</div>

src-angular/app/components/library/library-table/library-table.component.ts

@@ -1,9 +1,11 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
-import { SelectionService } from 'src-angular/app/core/services/selection.service'
-import { ChartData } from 'src-shared/interfaces/search.interface'
-import { SettingsService } from '../../../core/services/settings.service'
+import { Component, HostListener, OnDestroy, OnInit } from '@angular/core'
+
 import { Subscription } from 'rxjs'
 import { LibraryService } from 'src-angular/app/core/services/library.service'
+import { SelectionService } from 'src-angular/app/core/services/selection.service'
+import { ChartData } from 'src-shared/interfaces/search.interface'
+
+import { SettingsService } from '../../../core/services/settings.service'
 
 type SortColumn = 'name' | 'artist' | 'album' | 'genre' | 'year' | 'charter' | 'length' | 'modifiedTime' | null
 
@@ -20,6 +22,8 @@ export class LibraryTableComponent implements OnInit, OnDestroy {
 	allRowsSelected: boolean = false
 	subscriptions: Subscription[] = []
 	selectedSongs: ChartData[] = []
+	isLoading: boolean = false
+	hasSearched: boolean = false
 
 	constructor(
 		public libraryService: LibraryService,
@@ -56,6 +60,7 @@ export class LibraryTableComponent implements OnInit, OnDestroy {
 	}
 
 	filterSongs(): void {
+		this.hasSearched = true
 		this.libraryService.getChartsBySearchTerm(this.searchTerm)
 	}
 
@@ -97,6 +102,10 @@ export class LibraryTableComponent implements OnInit, OnDestroy {
 		}
 	}
 
+	rowIsSelected(song: ChartData): boolean {
+		return this.selectedSongs.some(selectedSong => selectedSong.md5 === song.md5)
+	}
+
 	trackByFn(index: number): number {
 		return index
 	}
@@ -111,6 +120,22 @@ export class LibraryTableComponent implements OnInit, OnDestroy {
 		}
 	}
 
+	async loadMoreSongs(): Promise<void> {
+		if (this.isLoading) return
+
+		this.isLoading = true
+		await this.libraryService.loadMoreSongs()
+		this.isLoading = false
+	}
+
+	@HostListener('scroll', ['$event'])
+	onScroll(event: Event): void {
+		const target = event.target as HTMLElement
+		if (target.scrollHeight - target.scrollTop - target.clientHeight < 100) {
+			this.loadMoreSongs()
+		}
+	}
+
 	ngOnDestroy(): void {
 		this.subscriptions.forEach(subscription => subscription.unsubscribe())
 	}