Interface conversion, search bar layout

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

@@ -4,9 +4,8 @@
 	</div>
 </td>
 <td>
-	<span id="chartCount" *ngIf="result.chartCount > 1">{{ result.chartCount }}</span
-	>{{ result.name }}
+	<span id="chartCount" *ngIf="song.length > 1">{{ song.length }}</span> {{ song[0].name }}
 </td>
-<td>{{ result.artist }}</td>
-<td>{{ result.album || 'Various' }}</td>
-<td>{{ result.genre || 'Various' }}</td>
+<td>{{ song[0].artist }}</td>
+<td>{{ song[0].album || 'Various' }}</td>
+<td>{{ song[0].genre || 'Various' }}</td>

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

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core'
 
-import { SongResult } from '../../../../../../src-shared/interfaces/search.interface'
+import { ChartData } from '../../../../../../src-shared/interfaces/search.interface'
 import { SelectionService } from '../../../../core/services/selection.service'
 
 @Component({
@@ -9,14 +9,14 @@ import { SelectionService } from '../../../../core/services/selection.service'
 	styleUrls: ['./result-table-row.component.scss'],
 })
 export class ResultTableRowComponent implements AfterViewInit {
-	@Input() result: SongResult
+	@Input() song: ChartData[]
 
 	@ViewChild('checkbox', { static: true }) checkbox: ElementRef
 
 	constructor(private selectionService: SelectionService) { }
 
 	get songID() {
-		return this.result.id
+		return this.song[0].songId ?? this.song[0].chartId
 	}
 
 	ngAfterViewInit() {

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

@@ -19,12 +19,8 @@
 		</tr>
 	</thead>
 	<tbody>
-		<tr
-			app-result-table-row
-			#tableRow
-			*ngFor="let result of results"
-			(click)="onRowClicked(result)"
-			[class.active]="activeRowID === result.id"
-			[result]="result"></tr>
+		@for (song of songs; track song) {
+			<tr app-result-table-row (click)="onRowClicked(song)" [class.active]="activeSong === song" [song]="song"></tr>
+		}
 	</tbody>
 </table>

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

@@ -2,8 +2,8 @@ import { Component, EventEmitter, OnInit, Output, QueryList, ViewChild, ViewChil
 
 import Comparators from 'comparators'
 import { SettingsService } from 'src-angular/app/core/services/settings.service'
+import { ChartData } from 'src-shared/interfaces/search.interface'
 
-import { SongResult } from '../../../../../src-shared/interfaces/search.interface'
 import { CheckboxDirective } from '../../../core/directives/checkbox.directive'
 import { SearchService } from '../../../core/services/search.service'
 import { SelectionService } from '../../../core/services/selection.service'
@@ -16,18 +16,17 @@ import { ResultTableRowComponent } from './result-table-row/result-table-row.com
 })
 export class ResultTableComponent implements OnInit {
 
-	@Output() rowClicked = new EventEmitter<SongResult>()
+	@Output() rowClicked = new EventEmitter<ChartData[]>()
 
 	@ViewChild(CheckboxDirective, { static: true }) checkboxColumn: CheckboxDirective
 	@ViewChildren('tableRow') tableRows: QueryList<ResultTableRowComponent>
 
-	results: SongResult[] = []
-	activeRowID: number | null = null
+	activeSong: ChartData[] | null = null
 	sortDirection: 'ascending' | 'descending' = 'descending'
 	sortColumn: 'name' | 'artist' | 'album' | 'genre' | null = null
 
 	constructor(
-		private searchService: SearchService,
+		public searchService: SearchService,
 		private selectionService: SelectionService,
 		public settingsService: SettingsService
 	) { }
@@ -37,24 +36,25 @@ export class ResultTableComponent implements OnInit {
 			this.checkboxColumn.check(selected)
 		})
 
-		this.searchService.onSearchChanged(results => {
-			this.activeRowID = null
-			this.results = results
+		this.searchService.searchUpdated.subscribe(() => {
+			this.activeSong = null
 			this.updateSort()
 		})
-
-		this.searchService.onNewSearch(() => {
-			this.sortColumn = null
-		})
 	}
 
-	onRowClicked(result: SongResult) {
-		this.activeRowID = result.id
-		this.rowClicked.emit(result)
+	get songs() {
+		return this.searchService.groupedSongs
+	}
+
+	onRowClicked(song: ChartData[]) {
+		if (this.activeSong !== song) {
+			this.activeSong = song
+			this.rowClicked.emit(song)
+		}
 	}
 
 	onColClicked(column: 'name' | 'artist' | 'album' | 'genre') {
-		if (this.results.length === 0) { return }
+		if (this.songs.length === 0) { return }
 		if (this.sortColumn !== column) {
 			this.sortColumn = column
 			this.sortDirection = 'descending'
@@ -68,7 +68,7 @@ export class ResultTableComponent implements OnInit {
 
 	private updateSort() {
 		if (this.sortColumn !== null) {
-			this.results.sort(Comparators.comparing(this.sortColumn, { reversed: this.sortDirection === 'ascending' }))
+			this.songs.sort(Comparators.comparing(this.sortColumn, { reversed: this.sortDirection === 'ascending' }))
 		}
 	}