Fix result table layout

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

@@ -5,6 +5,7 @@ import { FormControl } from '@angular/forms'
 import { chain, xorBy } from 'lodash'
 import { catchError, mergeMap, tap, throwError, timer } from 'rxjs'
 import { Difficulty, Instrument } from 'scan-chart'
+import { environment } from 'src-angular/environments/environment'
 import { AdvancedSearch, ChartData, SearchResult } from 'src-shared/interfaces/search.interface'
 
 @Injectable({
@@ -60,7 +61,7 @@ export class SearchService {
 		this.search().subscribe()
 	}
 
-	get areMorePages() { return this.songsResponse.page && this.groupedSongs.length === this.songsResponse.page * 20 }
+	get areMorePages() { return this.songsResponse.page && this.groupedSongs.length === this.songsResponse.page * 10 }
 
 	/**
 	 * General search, uses the `/search?q=` endpoint.
@@ -80,8 +81,9 @@ export class SearchService {
 		}
 
 		let retries = 10
-		return this.http.post<SearchResult>(`/api/search`, {
+		return this.http.post<SearchResult>(`${environment.apiUrl}/search`, {
 			search,
+			per_page: 25,
 			page: this.currentPage,
 			instrument: this.instrument.value,
 			difficulty: this.difficulty.value,
@@ -125,7 +127,7 @@ export class SearchService {
 		this.isDefaultSearch = false
 
 		let retries = 10
-		return this.http.post<{ data: SearchResult['data'] }>(`/api/search/advanced`, search).pipe(
+		return this.http.post<{ data: SearchResult['data'] }>(`${environment.apiUrl}/search/advanced`, search).pipe(
 			catchError((err, caught) => {
 				if (err.status === 400 || retries-- <= 0) {
 					this.searchLoading = false

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

@@ -1,6 +1,5 @@
 import { EventEmitter, Injectable } from '@angular/core'
 
-import { SearchResult } from '../../../../src-shared/interfaces/search.interface'
 import { SearchService } from './search.service'
 
 // Note: this class prevents event cycles by only emitting events if the checkbox changes
@@ -10,27 +9,13 @@ import { SearchService } from './search.service'
 })
 export class SelectionService {
 
-	private searchResults: Partial<SearchResult>
-
 	private selectAllChangedEmitter = new EventEmitter<boolean>()
-	private selectionChangedCallbacks: { [songID: number]: (selection: boolean) => void } = {}
 
-	private allSelected = false
-	private selections: { [songID: number]: boolean | undefined } = {}
+	public selections: { [groupId: number]: boolean | undefined } = {}
 
 	constructor(searchService: SearchService) {
-		searchService.searchUpdated.subscribe(results => {
-			this.searchResults = results
-			if (this.allSelected) {
-				this.selectAll() // Select newly added rows if allSelected
-			}
-		})
-
-		searchService.searchUpdated.subscribe(results => {
-			this.searchResults = results
-			this.selectionChangedCallbacks = {}
+		searchService.searchUpdated.subscribe(() => {
 			this.selections = {}
-			this.selectAllChangedEmitter.emit(false)
 		})
 	}
 
@@ -44,46 +29,17 @@ export class SelectionService {
 		this.selectAllChangedEmitter.subscribe(callback)
 	}
 
-	/**
-	 * Emits an event when the selection for `songID` needs to change.
-	 * (note: only one emitter can be registered per `songID`)
-	 */
-	onSelectionChanged(songID: number, callback: (selection: boolean) => void) {
-		this.selectionChangedCallbacks[songID] = callback
-	}
-
-
 	deselectAll() {
-		if (this.allSelected) {
-			this.allSelected = false
-			this.selectAllChangedEmitter.emit(false)
+		for (const groupId in this.selections) {
+			this.selections[groupId] = false
 		}
-
-		// TODO
-		// setTimeout(() => this.searchResults.forEach(result => this.deselectSong(result.id)), 0)
+		this.selectAllChangedEmitter.emit(false)
 	}
 
 	selectAll() {
-		if (!this.allSelected) {
-			this.allSelected = true
-			this.selectAllChangedEmitter.emit(true)
-		}
-
-		// TODO
-		// setTimeout(() => this.searchResults.forEach(result => this.selectSong(result.id)), 0)
-	}
-
-	deselectSong(songID: number) {
-		if (this.selections[songID]) {
-			this.selections[songID] = false
-			this.selectionChangedCallbacks[songID](false)
-		}
-	}
-
-	selectSong(songID: number) {
-		if (!this.selections[songID]) {
-			this.selections[songID] = true
-			this.selectionChangedCallbacks[songID](true)
+		for (const groupId in this.selections) {
+			this.selections[groupId] = true
 		}
+		this.selectAllChangedEmitter.emit(true)
 	}
 }