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

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

@@ -142,6 +142,44 @@
 		</div>
 	</div>
 
+	<div class="form-control">
+		<div class="label">
+			<span class="label-text">Table Columns</span>
+		</div>
+		<div class="flex gap-2">
+			<label class="label cursor-pointer" for="artistColumn">
+				<input id="artistColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="artistColumn" />
+				Artist
+			</label>
+			<label class="label cursor-pointer" for="albumColumn">
+				<input id="albumColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="albumColumn" />
+				Album
+			</label>
+			<label class="label cursor-pointer" for="genreColumn">
+				<input id="genreColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="genreColumn" />
+				Genre
+			</label>
+			<label class="label cursor-pointer" for="yearColumn">
+				<input id="yearColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="yearColumn" />
+				Year
+			</label>
+		</div>
+		<div class="flex gap-2">
+			<label class="label cursor-pointer" for="charterColumn">
+				<input id="charterColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="charterColumn" />
+				Charter
+			</label>
+			<label class="label cursor-pointer" for="lengthColumn">
+				<input id="lengthColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="lengthColumn" />
+				Length
+			</label>
+			<label class="label cursor-pointer" for="difficultyColumn">
+				<input id="difficultyColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="difficultyColumn" />
+				Difficulty
+			</label>
+		</div>
+	</div>
+
 	<div class="absolute bottom-8 left-8 flex">
 		<a class="btn btn-link" (click)="openUrl('https://github.com/Geomitron/Bridge')"><i class="bi bi-github text-2xl"></i>Github</a>
 		<a class="btn btn-link" (click)="openUrl('https://discord.gg/cqaUXGm')"><i class="bi bi-discord text-2xl"></i>Discord</a>

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

@@ -15,6 +15,14 @@ export class SettingsComponent implements OnInit {
 	public isSng: FormControl<boolean>
 	public isCompactTable: FormControl<boolean>
 
+	public artistColumn: FormControl<boolean>
+	public albumColumn: FormControl<boolean>
+	public genreColumn: FormControl<boolean>
+	public yearColumn: FormControl<boolean>
+	public charterColumn: FormControl<boolean>
+	public lengthColumn: FormControl<boolean>
+	public difficultyColumn: FormControl<boolean>
+
 	updateAvailable: 'yes' | 'no' | 'error' = 'no'
 	loginClicked = false
 	downloadUpdateText = 'Download Update'
@@ -28,10 +36,28 @@ export class SettingsComponent implements OnInit {
 		public settingsService: SettingsService,
 		private ref: ChangeDetectorRef
 	) {
-		this.isSng = new FormControl<boolean>(settingsService.isSng, { nonNullable: true })
+		const ss = settingsService
+		this.isSng = new FormControl<boolean>(ss.isSng, { nonNullable: true })
 		this.isSng.valueChanges.subscribe(value => settingsService.isSng = value)
 		this.isCompactTable = new FormControl<boolean>(settingsService.isCompactTable, { nonNullable: true })
-		this.isCompactTable.valueChanges.subscribe(value => settingsService.isCompactTable = value)
+		this.isCompactTable.valueChanges.subscribe(value => ss.isCompactTable = value)
+
+		this.artistColumn = new FormControl<boolean>(ss.visibleColumns.includes('artist'), { nonNullable: true })
+		this.albumColumn = new FormControl<boolean>(ss.visibleColumns.includes('album'), { nonNullable: true })
+		this.genreColumn = new FormControl<boolean>(ss.visibleColumns.includes('genre'), { nonNullable: true })
+		this.yearColumn = new FormControl<boolean>(ss.visibleColumns.includes('year'), { nonNullable: true })
+		this.charterColumn = new FormControl<boolean>(ss.visibleColumns.includes('charter'), { nonNullable: true })
+		this.lengthColumn = new FormControl<boolean>(ss.visibleColumns.includes('length'), { nonNullable: true })
+		this.difficultyColumn = new FormControl<boolean>(ss.visibleColumns.includes('difficulty'), { nonNullable: true })
+
+		this.artistColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('artist') : ss.removeVisibleColumn('artist'))
+		this.albumColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('album') : ss.removeVisibleColumn('album'))
+		this.genreColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('genre') : ss.removeVisibleColumn('genre'))
+		this.yearColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('year') : ss.removeVisibleColumn('year'))
+		this.charterColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('charter') : ss.removeVisibleColumn('charter'))
+		this.lengthColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('length') : ss.removeVisibleColumn('length'))
+		this.difficultyColumn.valueChanges
+			.subscribe(value => value ? ss.addVisibleColumn('difficulty') : ss.removeVisibleColumn('difficulty'))
 	}
 
 	async ngOnInit() {

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

@@ -119,6 +119,17 @@ export class SettingsService {
 		this.settings.isCompactTable = value
 		this.saveSettings()
 	}
+	get visibleColumns() {
+		return this.settings.visibleColumns
+	}
+	addVisibleColumn(column: string) {
+		this.settings.visibleColumns.push(column)
+		this.saveSettings()
+	}
+	removeVisibleColumn(column: string) {
+		this.settings.visibleColumns = this.settings.visibleColumns.filter(c => c !== column)
+		this.saveSettings()
+	}
 
 	get zoomFactor() {
 		return this.settings.zoomFactor

src-shared/Settings.ts

@@ -30,6 +30,7 @@ export interface Settings {
 	libraryPath: string | undefined // The path to the user's library
 	isSng: boolean                  // If the chart should be downloaded as a .sng file or as a chart folder
 	isCompactTable: boolean         // If the search result table should have reduced padding
+	visibleColumns: string[]        // The search result columns to include
 	zoomFactor: number              // How much the display should be zoomed
 	instrument: Instrument | null   // The instrument selected by default, or `null` for "Any Instrument"
 	difficulty: Difficulty | null   // The difficulty selected by default, or `null` for "Any Difficulty"
@@ -46,6 +47,7 @@ export const defaultSettings: Settings = {
 	libraryPath: undefined,
 	isSng: false,
 	isCompactTable: false,
+	visibleColumns: ['artist', 'album', 'genre', 'year'],
 	zoomFactor: 1,
 	instrument: 'guitar',
 	difficulty: null,