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() {

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

@@ -1,6 +1,8 @@
 import { EventEmitter, Injectable, NgZone } from '@angular/core'
 
 import { assign } from 'lodash'
+import { ChartData } from 'src-shared/interfaces/search.interface'
+import { removeStyleTags } from 'src-shared/UtilFunctions'
 
 import { DownloadProgress } from '../../../../src-shared/interfaces/download.interface'
 
@@ -16,7 +18,7 @@ export class DownloadService {
 		window.electron.on.downloadQueueUpdate(download => zone.run(() => {
 			const downloadIndex = this.downloads.findIndex(d => d.md5 === download.md5)
 			if (download.type === 'cancel') {
-				this.downloads = this.downloads.filter(d => d.md5 !== this.downloads[downloadIndex].md5)
+				this.downloads = this.downloads.filter(d => d.md5 !== this.downloads[downloadIndex]?.md5)
 			} else if (downloadIndex === -1) {
 				this.downloads.push(download)
 			} else {
@@ -50,13 +52,16 @@ export class DownloadService {
 		return this.downloads.find(download => download.type === 'error') ? true : false
 	}
 
-	addDownload(md5: string, chartName: string) {
-		if (!this.downloads.find(d => d.md5 === md5)) { // Don't download something twice
+	addDownload(chart: ChartData) {
+		if (!this.downloads.find(d => d.md5 === chart.md5)) { // Don't download something twice
 			if (this.downloads.every(d => d.type === 'done')) { // Reset overall progress bar if it finished
 				this.downloads.forEach(d => d.stale = true)
 			}
+			const chartName = `${removeStyleTags(chart.artist ?? 'Unknown Artist')
+				} - ${removeStyleTags(chart.name ?? 'Unknown Name')
+				} (${removeStyleTags(chart.charter ?? 'Unknown Charter')})`
 			this.downloads.push({
-				md5,
+				md5: chart.md5,
 				chartName,
 				header: 'Waiting for other downloads to finish...',
 				body: '',
@@ -64,7 +69,7 @@ export class DownloadService {
 				type: 'good',
 				isPath: false,
 			})
-			window.electron.emit.download({ action: 'add', md5, chartName })
+			window.electron.emit.download({ action: 'add', md5: chart.md5, chartName })
 		}
 		this.downloadCountChanges.emit(this.downloadCount)
 	}

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

@@ -18,7 +18,8 @@ export class SearchService {
 	public searchLoading = false
 	public songsResponse: Partial<SearchResult>
 	public currentPage = 1
-	public searchUpdated = new EventEmitter<Partial<SearchResult>>()
+	public newSearch = new EventEmitter<Partial<SearchResult>>()
+	public updateSearch = new EventEmitter<Partial<SearchResult>>()
 	public isDefaultSearch = true
 
 	public groupedSongs: ChartData[][]
@@ -115,7 +116,11 @@ export class SearchService {
 						.value()
 				)
 
-				this.searchUpdated.emit(response)
+				if (nextPage) {
+					this.updateSearch.emit(response)
+				} else {
+					this.newSearch.emit(response)
+				}
 			})
 		)
 	}
@@ -154,7 +159,7 @@ export class SearchService {
 						.value()
 				)
 
-				this.searchUpdated.emit(response)
+				this.newSearch.emit(response)
 			})
 		)
 	}

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

@@ -2,34 +2,29 @@ import { EventEmitter, Injectable } from '@angular/core'
 
 import { SearchService } from './search.service'
 
-// Note: this class prevents event cycles by only emitting events if the checkbox changes
-
 @Injectable({
 	providedIn: 'root',
 })
 export class SelectionService {
 
+	private allSelected = false
 	private selectAllChangedEmitter = new EventEmitter<boolean>()
 
 	public selections: { [groupId: number]: boolean | undefined } = {}
 
 	constructor(searchService: SearchService) {
-		searchService.searchUpdated.subscribe(() => {
+		searchService.newSearch.subscribe(() => {
 			this.selections = {}
+			this.deselectAll()
 		})
 	}
 
-	getSelectedResults() {
-		// TODO
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		return [] as any[] // this.searchResults.filter(result => this.selections[result.id] === true)
-	}
-
-	onSelectAllChanged(callback: (selected: boolean) => void) {
-		this.selectAllChangedEmitter.subscribe(callback)
+	isAllSelected() {
+		return this.allSelected
 	}
 
 	deselectAll() {
+		this.allSelected = false
 		for (const groupId in this.selections) {
 			this.selections[groupId] = false
 		}
@@ -37,6 +32,7 @@ export class SelectionService {
 	}
 
 	selectAll() {
+		this.allSelected = true
 		for (const groupId in this.selections) {
 			this.selections[groupId] = true
 		}