Add configurable columns

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

@@ -4,8 +4,11 @@
 <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 }}
 </td>
-<td>{{ song[0].artist }}</td>
-<td>{{ song[0].album || 'Various' }}</td>
-<td>{{ song[0].genre || 'Various' }}</td>
-<td>{{ song[0].year || 'Various' }}</td>
+<td *ngIf="hasColumn('artist')">{{ song[0].artist }}</td>
+<td *ngIf="hasColumn('album')">{{ song[0].album || 'Various' }}</td>
+<td *ngIf="hasColumn('genre')">{{ song[0].genre || 'Various' }}</td>
+<td *ngIf="hasColumn('year')">{{ song[0].year || 'Various' }}</td>
+<td *ngIf="hasColumn('charter')">{{ song[0].charter || 'Various' }}</td>
+<td *ngIf="hasColumn('length')">{{ songLength }}</td>
+<td *ngIf="hasColumn('difficulty')">{{ songDifficulty }}</td>
 <!-- TODO: "Various" will never display -->

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

@@ -1,7 +1,11 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 
-import { ChartData } from '../../../../../../src-shared/interfaces/search.interface'
-import { SelectionService } from '../../../../core/services/selection.service'
+import { SearchService } from 'src-angular/app/core/services/search.service.js'
+import { SettingsService } from 'src-angular/app/core/services/settings.service.js'
+
+import { ChartData } from '../../../../../../src-shared/interfaces/search.interface.js'
+import { msToRoughTime } from '../../../../../../src-shared/UtilFunctions.js'
+import { SelectionService } from '../../../../core/services/selection.service.js'
 
 @Component({
 	selector: 'tr[app-result-table-row]',
@@ -12,7 +16,11 @@ export class ResultTableRowComponent implements OnInit {
 
 	@Output() rowFocused: EventEmitter<string> = new EventEmitter()
 
-	constructor(private selectionService: SelectionService) { }
+	constructor(
+		private selectionService: SelectionService,
+		private searchService: SearchService,
+		private settingsService: SettingsService,
+	) { }
 
 	ngOnInit() {
 		this.selectionService.selections[this.groupId] = this.selectionService.isAllSelected()
@@ -22,6 +30,30 @@ export class ResultTableRowComponent implements OnInit {
 		return this.song[0].groupId
 	}
 
+	hasColumn(column: string) {
+		return this.settingsService.visibleColumns.includes(column)
+	}
+
+	get songLength() {
+		return msToRoughTime(this.song[0].notesData.effectiveLength)
+	}
+
+	get songDifficulty() {
+		switch (this.searchService.instrument.value) {
+			case 'guitar': return this.song[0].diff_guitar ?? '?'
+			case 'guitarcoop': return this.song[0].diff_guitar_coop ?? '?'
+			case 'rhythm': return this.song[0].diff_rhythm ?? '?'
+			case 'bass': return this.song[0].diff_bass ?? '?'
+			case 'drums': return this.song[0].diff_drums ?? '?'
+			case 'keys': return this.song[0].diff_keys ?? '?'
+			case 'guitarghl': return this.song[0].diff_guitarghl ?? '?'
+			case 'guitarcoopghl': return this.song[0].diff_guitar_coop_ghl ?? '?'
+			case 'rhythmghl': return this.song[0].diff_rhythm_ghl ?? '?'
+			case 'bassghl': return this.song[0].diff_bassghl ?? '?'
+			default: ''
+		}
+	}
+
 	get selected() {
 		return this.selectionService.selections[this.groupId] ?? false
 	}

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

@@ -9,20 +9,29 @@
 					<input type="checkbox" class="checkbox" [(ngModel)]="allSelected" />
 				</th>
 				<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('name')">
-					Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
+					Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
 				</th>
-				<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('artist')">
+				<th *ngIf="hasColumn('artist')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('artist')">
 					Artist
-					<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
+					<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
 				</th>
-				<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('album')">
-					Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
+				<th *ngIf="hasColumn('album')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('album')">
+					Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
 				</th>
-				<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('genre')">
-					Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
+				<th *ngIf="hasColumn('genre')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('genre')">
+					Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
 				</th>
-				<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('year')">
-					Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
+				<th *ngIf="hasColumn('year')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('year')">
+					Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
+				</th>
+				<th *ngIf="hasColumn('charter')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('charter')">
+					Charter <i *ngIf="sortColumn === 'charter'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
+				</th>
+				<th *ngIf="hasColumn('length')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('length')">
+					Length (min) <i *ngIf="sortColumn === 'length'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
+				</th>
+				<th *ngIf="hasColumn('difficulty')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('difficulty')">
+					Difficulty <i *ngIf="sortColumn === 'difficulty'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
 				</th>
 			</tr>
 		</thead>

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

@@ -22,8 +22,8 @@ export class ResultTableComponent implements OnInit {
 	@ViewChildren('tableRow') tableRows: QueryList<ResultTableRowComponent>
 
 	activeSong: ChartData[] | null = null
-	sortDirection: 'ascending' | 'descending' = 'ascending'
-	sortColumn: 'name' | 'artist' | 'album' | 'genre' | 'year' | null = null
+	sortDirection: 'asc' | 'desc' = 'asc'
+	sortColumn: 'name' | 'artist' | 'album' | 'genre' | 'year' | 'charter' | 'length' | 'difficulty' | null = null
 
 	constructor(
 		public searchService: SearchService,
@@ -36,7 +36,7 @@ export class ResultTableComponent implements OnInit {
 		this.searchService.newSearch.subscribe(() => {
 			this.resultTableDiv.nativeElement.scrollTop = 0
 			this.activeSong = null
-			this.sortDirection = 'ascending'
+			this.sortDirection = 'asc'
 			this.sortColumn = null
 			this.updateSort()
 			setTimeout(() => this.tableScrolled(), 0)
@@ -51,6 +51,10 @@ export class ResultTableComponent implements OnInit {
 		return this.searchService.groupedSongs
 	}
 
+	hasColumn(column: string) {
+		return this.settingsService.visibleColumns.includes(column)
+	}
+
 	onRowClicked(song: ChartData[]) {
 		if (this.activeSong !== song) {
 			this.activeSong = song
@@ -58,15 +62,15 @@ export class ResultTableComponent implements OnInit {
 		}
 	}
 
-	onColClicked(column: 'name' | 'artist' | 'album' | 'genre' | 'year') {
+	onColClicked(column: 'name' | 'artist' | 'album' | 'genre' | 'year' | 'charter' | 'length' | 'difficulty') {
 		if (this.songs.length === 0) { return }
 		if (this.sortColumn !== column) {
 			this.sortColumn = column
-			this.sortDirection = 'ascending'
-		} else if (this.sortDirection === 'descending') {
-			this.sortDirection = 'ascending'
+			this.sortDirection = 'asc'
+		} else if (this.sortDirection === 'desc') {
+			this.sortDirection = 'asc'
 		} else {
-			this.sortDirection = 'descending'
+			this.sortDirection = 'desc'
 		}
 		this.updateSort()
 	}
@@ -74,11 +78,32 @@ export class ResultTableComponent implements OnInit {
 	private updateSort() {
 		const col = this.sortColumn
 		if (col !== null) {
-			const groupedSongs = _.sortBy(this.searchService.groupedSongs, song => song[0][col]?.toLowerCase())
-			if (this.sortDirection === 'descending') { groupedSongs.reverse() }
+			console.log(this.getSortColumn())
+			const groupedSongs = _.orderBy(this.searchService.groupedSongs, s => _.get(s[0], this.getSortColumn()), this.sortDirection)
 			this.searchService.groupedSongs = groupedSongs
 		}
 	}
+	private getSortColumn(): keyof ChartData {
+		if (this.sortColumn === 'length') {
+			return 'notesData.effectiveLength' as keyof ChartData
+		} else if (this.sortColumn === 'difficulty') {
+			switch (this.searchService.instrument.value) {
+				case 'guitar': return 'diff_guitar'
+				case 'guitarcoop': return 'diff_guitar_coop'
+				case 'rhythm': return 'diff_rhythm'
+				case 'bass': return 'diff_bass'
+				case 'drums': return 'diff_drums'
+				case 'keys': return 'diff_keys'
+				case 'guitarghl': return 'diff_guitarghl'
+				case 'guitarcoopghl': return 'diff_guitar_coop_ghl'
+				case 'rhythmghl': return 'diff_rhythm_ghl'
+				case 'bassghl': return 'diff_bassghl'
+				default: throw 'Invalid instrument'
+			}
+		} else {
+			return this.sortColumn!
+		}
+	}
 
 	get allSelected() {
 		return this.selectionService.isAllSelected()