Fix status bar

src-angular/app/app.module.ts

@@ -17,7 +17,6 @@ import { StatusBarComponent } from './components/browse/status-bar/status-bar.co
 import { SettingsComponent } from './components/settings/settings.component'
 import { ToolbarComponent } from './components/toolbar/toolbar.component'
 import { CheckboxDirective } from './core/directives/checkbox.directive'
-import { ProgressBarDirective } from './core/directives/progress-bar.directive'
 import { RemoveStyleTagsPipe } from './core/pipes/remove-style-tags.pipe'
 
 @NgModule({
@@ -33,7 +32,6 @@ import { RemoveStyleTagsPipe } from './core/pipes/remove-style-tags.pipe'
 		ChartSidebarMenutComponent,
 		ResultTableRowComponent,
 		DownloadsModalComponent,
-		ProgressBarDirective,
 		CheckboxDirective,
 		RemoveStyleTagsPipe,
 		SettingsComponent,

src-angular/app/components/browse/search-bar/search-bar.component.html

@@ -7,7 +7,11 @@
 			<div class="form-control w-full">
 				<input type="text" [formControl]="searchControl" placeholder="Search..." class="input input-bordered pr-14" />
 			</div>
+			@if (searchLoading) {
+				<span class="loading loading-spinner loading-sm self-center -ml-9"></span>
+			} @else {
 				<i class="bi bi-search -ml-9"></i>
+			}
 		</div>
 		<div class="flex">
 			<!-- Instrument Dropdown -->

src-angular/app/components/browse/search-bar/search-bar.component.ts

@@ -67,6 +67,9 @@ export class SearchBarComponent implements OnInit, AfterViewInit {
 	get instrument() {
 		return this.searchService.instrument.value
 	}
+	get searchLoading() {
+		return this.searchService.searchLoading
+	}
 	setInstrument(instrument: Instrument | null, event: MouseEvent) {
 		this.searchService.instrument.setValue(instrument)
 		if (event.target instanceof HTMLElement) {

src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.html

@@ -14,11 +14,7 @@
 		</div>
 
 		<div id="downloadProgressDiv">
-			<div id="downloadProgressBar" appProgressBar [percent]="download.percent" class="ui small progress">
+			<progress [value]="download.percent" max="100" class="progress w-96" [class.progress-error]="download.type === 'error'"></progress>
-				<div class="bar" [style.height]="download.type === 'error' ? '-webkit-fill-available' : undefined">
-					<div class="progress"></div>
-				</div>
-			</div>
 			<button *ngIf="download.type === 'error'" class="ui right attached labeled compact icon button" (click)="retryDownload(download.versionID)">
 				<i class="redo icon"></i>
 				Retry

src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.scss

@@ -1,26 +0,0 @@
-#downloadTitle,
-#downloadText {
-  display: flex;
-  margin-bottom: 0.3rem;
-}
-
-#downloadText {
-  flex-wrap: wrap;
-}
-
-#downloadProgressDiv {
-  display: flex;
-}
-
-#downloadProgressBar {
-  flex-grow: 1;
-  margin: 0;
-  .bar {
-    transform: translateY(-50%);
-    top: 50%;
-  }
-}
-
-i.close.icon, a {
-  cursor: pointer;
-}

src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.ts

@@ -6,7 +6,6 @@ import { DownloadService } from '../../../../core/services/download.service'
 @Component({
 	selector: 'app-downloads-modal',
 	templateUrl: './downloads-modal.component.html',
-	styleUrls: ['./downloads-modal.component.scss'],
 })
 export class DownloadsModalComponent {
 

src-angular/app/components/browse/status-bar/status-bar.component.html

@@ -1,37 +1,15 @@
-<div id="bottomMenu" class="ui bottom borderless menu border-t border-t-neutral">
+<div class="border-t border-t-neutral p-2 flex gap-2 items-center">
-	<div *ngIf="(searchService.groupedSongs?.length ?? 0) > 0" class="item">
+	<div *ngIf="searchService.songsResponse">
-		{{ searchService.groupedSongs.length }}{{ allResultsVisible ? '' : '+' }} Result{{ searchService.groupedSongs.length === 1 ? '' : 's' }}
+		{{ searchService.songsResponse.found }} Result{{ searchService.songsResponse.found === 1 ? '' : 's' }}
 	</div>
-	<div class="item">
+	<div class="flex-1">
-		<button *ngIf="selectedResults.length > 1" (click)="downloadSelected()" class="ui positive button">
+		<button *ngIf="selectedGroupIds.length > 1" (click)="downloadSelected()" class="btn btn-sm btn-primary">
-			Download {{ selectedResults.length }} Results
+			Download {{ selectedGroupIds.length }} Results
 		</button>
 	</div>
-	<a *ngIf="downloading" class="item right" (click)="showDownloads()">
+	<button *ngIf="downloading" (click)="showDownloads()" class="btn btn-sm btn-ghost w-[30vw]">
-		<div #progressBar appProgressBar [percent]="percent" class="ui progress" [style.background-color]="error ? 'indianred' : undefined">
+		<progress [value]="percent" max="100" class="progress h-3 rounded-md" [class.progress-error]="error"></progress>
-			<div class="bar">
+	</button>
-				<div class="progress"></div>
-			</div>
-		</div>
-	</a>
-
-	<div id="selectedModal" class="ui modal">
-		<div class="header">Some selected songs have more than one chart!</div>
-		<div class="scrolling content">
-			<div class="ui segments">
-				<div class="ui segment" *ngFor="let chartGroup of chartGroups">
-					<p *ngFor="let chart of chartGroup">
-						{{ chart.chartName }} <b>[{{ chart.charters }}]</b>
-					</p>
-				</div>
-			</div>
-		</div>
-		<div class="actions">
-			<div class="ui approve button" (click)="downloadAllCharts()">Download all charts for each song</div>
-			<div class="ui cancel button" (click)="deselectSongsWithMultipleCharts()">Deselect these songs</div>
-			<div class="ui cancel button">Cancel</div>
-		</div>
-	</div>
 
 	<div id="downloadsModal" class="ui modal">
 		<i class="inside close icon"></i>

src-angular/app/components/browse/status-bar/status-bar.component.scss

@@ -1,18 +0,0 @@
-.ui.progress {
-  margin: 0;
-  min-width: 200px;
-}
-
-#downloadsModal {
-  .header {
-    display: flex;
-
-    span {
-      flex-grow: 1;
-    }
-
-    .ui.positive.button {
-      margin-right: 30px;
-    }
-  }
-}

src-angular/app/components/browse/status-bar/status-bar.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectorRef, Component } from '@angular/core'
 
-import { groupBy } from '../../../../../src-shared/UtilFunctions'
+import { keys, pickBy } from 'lodash'
+
 import { DownloadService } from '../../../core/services/download.service'
 import { SearchService } from '../../../core/services/search.service'
 import { SelectionService } from '../../../core/services/selection.service'
@@ -8,7 +9,6 @@ import { SelectionService } from '../../../core/services/selection.service'
 @Component({
 	selector: 'app-status-bar',
 	templateUrl: './status-bar.component.html',
-	styleUrls: ['./status-bar.component.scss'],
 })
 export class StatusBarComponent {
 
@@ -39,12 +39,8 @@ export class StatusBarComponent {
 		})
 	}
 
-	get allResultsVisible() {
+	get selectedGroupIds() {
-		return false // this.searchService.allResultsVisible
+		return keys(pickBy(this.selectionService.selections)).map(k => Number(k))
-	}
-
-	get selectedResults() {
-		return this.selectionService.getSelectedResults()
 	}
 
 	showDownloads() {
@@ -53,52 +49,52 @@ export class StatusBarComponent {
 	}
 
 	async downloadSelected() {
-		this.chartGroups = []
+		// this.chartGroups = []
-		// TODO
+		// // TODO
-		// this.batchResults = await window.electron.invoke.getBatchSongDetails(this.selectedResults.map(result => result.id))
+		// // this.batchResults = await window.electron.invoke.getBatchSongDetails(this.selectedResults.map(result => result.id))
-		const versionGroups = groupBy(this.batchResults, 'songID')
+		// const versionGroups = groupBy(this.batchResults, 'songID')
-		for (const versionGroup of versionGroups) {
+		// for (const versionGroup of versionGroups) {
-			if (versionGroup.findIndex(version => version.chartID !== versionGroup[0].chartID) !== -1) {
+		// 	if (versionGroup.findIndex(version => version.chartID !== versionGroup[0].chartID) !== -1) {
-				// Must have multiple charts of this song
+		// 		// Must have multiple charts of this song
-				this.chartGroups.push(versionGroup.filter(version => version.versionID === version.latestVersionID))
+		// 		this.chartGroups.push(versionGroup.filter(version => version.versionID === version.latestVersionID))
-			}
+		// 	}
-		}
+		// }
 
-		if (this.chartGroups.length === 0) {
+		// if (this.chartGroups.length === 0) {
-			for (const versions of versionGroups) {
+		// 	for (const versions of versionGroups) {
-				// this.searchService.sortChart(versions)
+		// 		// this.searchService.sortChart(versions)
-				const downloadVersion = versions[0]
+		// 		const downloadVersion = versions[0]
-				const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
+		// 		const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
-				this.downloadService.addDownload(
+		// 		this.downloadService.addDownload(
-					downloadVersion.versionID, {
+		// 			downloadVersion.versionID, {
-					chartName: downloadVersion.chartName,
+		// 			chartName: downloadVersion.chartName,
-					artist: downloadSong.artist,
+		// 			artist: downloadSong.artist,
-					charter: downloadVersion.charters,
+		// 			charter: downloadVersion.charters,
-					driveData: downloadVersion.driveData,
+		// 			driveData: downloadVersion.driveData,
-				})
+		// 		})
-			}
+		// 	}
-		} else {
+		// } else {
-			// TODO
+		// 	// TODO
-			// $('#selectedModal').modal('show')
+		// 	// $('#selectedModal').modal('show')
-			// [download all charts for each song] [deselect these songs] [X]
+		// 	// [download all charts for each song] [deselect these songs] [X]
-		}
+		// }
 	}
 
 	downloadAllCharts() {
-		const songChartGroups = groupBy(this.batchResults, 'songID', 'chartID')
+		// const songChartGroups = groupBy(this.batchResults, 'songID', 'chartID')
-		for (const chart of songChartGroups) {
+		// for (const chart of songChartGroups) {
-			// this.searchService.sortChart(chart)
+		// 	// this.searchService.sortChart(chart)
-			const downloadVersion = chart[0]
+		// 	const downloadVersion = chart[0]
-			const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
+		// 	const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
-			this.downloadService.addDownload(
+		// 	this.downloadService.addDownload(
-				downloadVersion.versionID, {
+		// 		downloadVersion.versionID, {
-				chartName: downloadVersion.chartName,
+		// 		chartName: downloadVersion.chartName,
-				artist: downloadSong.artist,
+		// 		artist: downloadSong.artist,
-				charter: downloadVersion.charters,
+		// 		charter: downloadVersion.charters,
-				driveData: downloadVersion.driveData,
+		// 		driveData: downloadVersion.driveData,
-			}
+		// 	}
-			)
+		// 	)
-		}
+		// }
 	}
 
 	deselectSongsWithMultipleCharts() {

src-angular/app/core/directives/progress-bar.directive.ts

@@ -1,28 +0,0 @@
-import { Directive, ElementRef, Input } from '@angular/core'
-
-@Directive({
-	selector: '[appProgressBar]',
-})
-export class ProgressBarDirective {
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	private _$progressBar: any
-
-	progress: (percent: number) => void
-
-	@Input() set percent(percent: number) {
-		this.progress(percent)
-	}
-
-	constructor(private element: ElementRef) {
-		// TODO
-		// this.progress = throttle((percent: number) => this.$progressBar.progress('set').percent(percent), 100)
-	}
-
-	// private get $progressBar() {
-	// 	if (!this._$progressBar) {
-	// 		this._$progressBar = $(this.element.nativeElement)
-	// 	}
-	// 	return this._$progressBar
-	// }
-}