Fix checkboxes and bulk download

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

@@ -1,12 +1,13 @@
-<app-search-bar></app-search-bar>
+<app-search-bar />
 <div class="flex flex-1 overflow-hidden">
 	<div
+		#resultTableDiv
 		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>
+		<app-result-table #resultTable (rowClicked)="chartSidebar.onRowClicked($event)" />
 	</div>
 	<div class="basis-1/3 min-w-[310px] max-w-[512px]">
-		<app-chart-sidebar #chartSidebar></app-chart-sidebar>
+		<app-chart-sidebar #chartSidebar />
 	</div>
 </div>
-<app-status-bar #statusBar></app-status-bar>
+<app-status-bar />

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

@@ -1,36 +1,21 @@
-import { Component, HostBinding, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, HostBinding, ViewChild } from '@angular/core'
 
 import { SearchService } from 'src-angular/app/core/services/search.service'
 
-import { ChartSidebarComponent } from './chart-sidebar/chart-sidebar.component'
-import { ResultTableComponent } from './result-table/result-table.component'
-import { StatusBarComponent } from './status-bar/status-bar.component'
-
 @Component({
 	selector: 'app-browse',
 	templateUrl: './browse.component.html',
 })
-export class BrowseComponent {
+export class BrowseComponent implements AfterViewInit {
 	@HostBinding('class.contents') contents = true
-	@ViewChild('resultTable', { static: true }) resultTable: ResultTableComponent
-	@ViewChild('chartSidebar', { static: true }) chartSidebar: ChartSidebarComponent
-	@ViewChild('statusBar', { static: true }) statusBar: StatusBarComponent
+
+	@ViewChild('resultTableDiv', { static: true }) resultTableDiv: ElementRef
 
 	constructor(private searchService: SearchService) { }
 
-	// TODO
-	// ngAfterViewInit() {
-	// 	const $tableColumn = $('#table-column')
-	// 	$tableColumn.on('scroll', () => {
-	// 		const pos = $tableColumn[0].scrollTop + $tableColumn[0].offsetHeight
-	// 		const max = $tableColumn[0].scrollHeight
-	// 		if (pos >= max - 5) {
-	// 			this.searchService.updateScroll()
-	// 		}
-	// 	})
-
-	// 	this.searchService.onNewSearch(() => {
-	// 		$tableColumn.scrollTop(0)
-	// 	})
-	// }
+	ngAfterViewInit() {
+		this.searchService.newSearch.subscribe(() => {
+			this.resultTableDiv.nativeElement.scrollTop = 0
+		})
+	}
 }

src-angular/app/components/browse/chart-sidebar/chart-sidebar.component.ts

@@ -44,7 +44,7 @@ export class ChartSidebarComponent implements OnInit {
 	) { }
 
 	ngOnInit() {
-		this.searchService.searchUpdated.subscribe(() => {
+		this.searchService.newSearch.subscribe(() => {
 			this.charts = null
 			this.selectedChart = null
 		})
@@ -280,8 +280,7 @@ export class ChartSidebarComponent implements OnInit {
 	 * Adds the selected chart to the download queue.
 	 */
 	onDownloadClicked() {
-		this.downloadService.addDownload(this.selectedChart!.md5, `${this.selectedChart!.artist ?? 'Unknown Artist'
-			} - ${this.selectedChart!.name ?? 'Unknown Name'} (${this.selectedChart!.charter ?? 'Unknown Charter'})`)
+		this.downloadService.addDownload(this.selectedChart!)
 	}
 
 	public showMenu() {

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

@@ -1,5 +1,5 @@
 <td>
-	<input #checkAllCheckbox type="checkbox" class="checkbox" (click)="$event.stopPropagation()" [(ngModel)]="selected" />
+	<input type="checkbox" class="checkbox" (click)="$event.stopPropagation()" [(ngModel)]="selected" />
 </td>
 <td>
 	<span *ngIf="song.length > 1" class="rounded-sm bg-accent text-accent-content px-1 mr-1 font-bold">{{ song.length }}</span> {{ song[0].name }}

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

@@ -13,7 +13,7 @@ export class ResultTableRowComponent implements OnInit {
 	constructor(private selectionService: SelectionService) { }
 
 	ngOnInit() {
-		this.selectionService.selections[this.groupId] = false
+		this.selectionService.selections[this.groupId] = this.selectionService.isAllSelected()
 	}
 
 	get groupId() {

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

@@ -2,7 +2,7 @@
 	<thead>
 		<tr>
 			<th class="collapsing" id="checkboxColumn">
-				<input #checkAllCheckbox type="checkbox" class="checkbox" (change)="checkAll(checkAllCheckbox.checked)" />
+				<input type="checkbox" class="checkbox" [(ngModel)]="allSelected" />
 			</th>
 			<th [ngClass]="sortDirection" (click)="onColClicked('name')">
 				Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>

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

@@ -32,8 +32,13 @@ export class ResultTableComponent implements OnInit {
 	) { }
 
 	ngOnInit() {
-		this.searchService.searchUpdated.subscribe(() => {
+		this.searchService.newSearch.subscribe(() => {
 			this.activeSong = null
+			this.sortDirection = 'ascending'
+			this.sortColumn = null
+			this.updateSort()
+		})
+		this.searchService.updateSearch.subscribe(() => {
 			this.updateSort()
 		})
 	}
@@ -65,18 +70,17 @@ export class ResultTableComponent implements OnInit {
 	private updateSort() {
 		const col = this.sortColumn
 		if (col !== null) {
-			const groupedSongs = sortBy(this.searchService.groupedSongs, song => song[0][col])
+			const groupedSongs = sortBy(this.searchService.groupedSongs, song => song[0][col]?.toLowerCase())
 			if (this.sortDirection === 'descending') { groupedSongs.reverse() }
 			this.searchService.groupedSongs = groupedSongs
 		}
 	}
 
-	/**
-	 * Called when the user checks the `checkboxColumn`.
-	 */
-	checkAll(isChecked: boolean) {
-		console.log(isChecked)
-		if (isChecked) {
+	get allSelected() {
+		return this.selectionService.isAllSelected()
+	}
+	set allSelected(value: boolean) {
+		if (value) {
 			this.selectionService.selectAll()
 		} else {
 			this.selectionService.deselectAll()

src-angular/app/components/browse/status-bar/status-bar.component.ts

@@ -14,16 +14,6 @@ export class StatusBarComponent {
 
 	@ViewChild('downloadsModal', { static: false }) downloadsModalComponent: ElementRef
 
-	multipleCompleted = false
-	downloading = false
-	error = false
-	percent = 0
-	// TODO
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	batchResults: any[]
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	chartGroups: any[][]
-
 	constructor(
 		public downloadService: DownloadService,
 		public searchService: SearchService,
@@ -41,59 +31,10 @@ export class StatusBarComponent {
 	}
 
 	async downloadSelected() {
-		// this.chartGroups = []
-		// // TODO
-		// // this.batchResults = await window.electron.invoke.getBatchSongDetails(this.selectedResults.map(result => result.id))
-		// const versionGroups = groupBy(this.batchResults, 'songID')
-		// for (const versionGroup of versionGroups) {
-		// 	if (versionGroup.findIndex(version => version.chartID !== versionGroup[0].chartID) !== -1) {
-		// 		// Must have multiple charts of this song
-		// 		this.chartGroups.push(versionGroup.filter(version => version.versionID === version.latestVersionID))
-		// 	}
-		// }
-
-		// if (this.chartGroups.length === 0) {
-		// 	for (const versions of versionGroups) {
-		// 		// this.searchService.sortChart(versions)
-		// 		const downloadVersion = versions[0]
-		// 		const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
-		// 		this.downloadService.addDownload(
-		// 			downloadVersion.versionID, {
-		// 			chartName: downloadVersion.chartName,
-		// 			artist: downloadSong.artist,
-		// 			charter: downloadVersion.charters,
-		// 			driveData: downloadVersion.driveData,
-		// 		})
-		// 	}
-		// } else {
-		// 	// TODO
-		// 	// $('#selectedModal').modal('show')
-		// 	// [download all charts for each song] [deselect these songs] [X]
-		// }
-	}
-
-	downloadAllCharts() {
-		// const songChartGroups = groupBy(this.batchResults, 'songID', 'chartID')
-		// for (const chart of songChartGroups) {
-		// 	// this.searchService.sortChart(chart)
-		// 	const downloadVersion = chart[0]
-		// 	const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
-		// 	this.downloadService.addDownload(
-		// 		downloadVersion.versionID, {
-		// 		chartName: downloadVersion.chartName,
-		// 		artist: downloadSong.artist,
-		// 		charter: downloadVersion.charters,
-		// 		driveData: downloadVersion.driveData,
-		// 	}
-		// 	)
-		// }
-	}
-
-	deselectSongsWithMultipleCharts() {
-		// TODO
-		// for (const chartGroup of this.chartGroups) {
-		// this.selectionService.deselectSong(chartGroup[0].songID)
-		// }
+		const selectedGroupIds = this.selectedGroupIds
+		for (const chart of this.searchService.groupedSongs.filter(gs => selectedGroupIds.includes(gs[0].groupId))) {
+			this.downloadService.addDownload(chart[0])
+		}
 	}
 
 	clearCompleted() {