Add download location settings

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

@@ -24,7 +24,7 @@
 							</button>
 						}
 					</div>
-					<h2 class="card-title">{{ download.chartName }}</h2>
+					<h2 class="card-title">{{ getDownloadName(download) }}</h2>
 					<progress
 						[attr.value]="download.percent"
 						max="100"

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

@@ -1,5 +1,9 @@
 import { Component, HostBinding } from '@angular/core'
 
+import { SettingsService } from 'src-angular/app/core/services/settings.service'
+import { DownloadProgress } from 'src-shared/interfaces/download.interface'
+import { resolveChartFolderName } from 'src-shared/UtilFunctions'
+
 import { DownloadService } from '../../../../core/services/download.service'
 
 @Component({
@@ -9,9 +13,16 @@ import { DownloadService } from '../../../../core/services/download.service'
 export class DownloadsModalComponent {
 	@HostBinding('class.contents') contents = true
 
-	constructor(public downloadService: DownloadService) { }
+	constructor(
+		public downloadService: DownloadService,
+		public settingsService: SettingsService,
+	) { }
 
 	showFile(filepath: string) {
 		window.electron.emit.showFile(filepath)
 	}
+
+	getDownloadName(download: DownloadProgress) {
+		return resolveChartFolderName(this.settingsService.chartFolderName, download.chart)
+	}
 }

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

@@ -17,6 +17,41 @@
 		</div>
 	</label>
 
+	<label class="form-control w-full">
+		<div class="label">
+			<span class="label-text">
+				Chart folder name
+				<button class="btn btn-xs btn-circle btn-ghost" (click)="chartFolderNameModal.showModal()">
+					<i class="bi bi-info-circle text-sm hover:border-b-secondary-focus"></i>
+				</button>
+				<dialog #chartFolderNameModal class="modal whitespace-normal">
+					<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
+						<form method="dialog">
+							<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
+								<i class="bi bi-x-lg text-lg"></i>
+							</button>
+						</form>
+						<div class="flex-1">
+							<span class="font-bold text-lg">Chart Folder Name</span>
+							<ul class="list-disc pl-5">
+								<li>Describes where Bridge will put the chart inside the chart library directory</li>
+								<li>Use "/" to describe subfolders</li>
+								<li>Use "{{ '{tag}' }}" as a placeholder for chart-specific properties</li>
+								<br />
+								Available tags:
+								<div class="text-xs">{{ '{name}, {artist}, {album}, {genre}, {year}, {charter}' }}</div>
+							</ul>
+						</div>
+					</div>
+					<form method="dialog" class="modal-backdrop">
+						<button>close</button>
+					</form>
+				</dialog>
+			</span>
+		</div>
+		<input [formControl]="chartFolderName" class="input input-bordered" type="text" placeholder="{artist} - {name} ({charter})" />
+	</label>
+
 	<div class="form-control w-full max-w-xs">
 		<div class="label">
 			<span class="label-text">Appearance</span>
@@ -76,7 +111,7 @@
 				<button class="btn btn-xs btn-circle btn-ghost" (click)="selectSngModal.showModal()">
 					<i class="bi bi-info-circle text-sm hover:border-b-secondary-focus"></i>
 				</button>
-				<dialog #selectSngModal id="report_modal" class="modal whitespace-normal">
+				<dialog #selectSngModal class="modal whitespace-normal">
 					<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
 						<form method="dialog">
 							<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">

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

@@ -12,6 +12,7 @@ import { themes } from 'src-shared/Settings'
 export class SettingsComponent implements OnInit {
 	@ViewChild('themeDropdown', { static: true }) themeDropdown: ElementRef
 
+	public chartFolderName: FormControl<string>
 	public isSng: FormControl<boolean>
 	public isCompactTable: FormControl<boolean>
 
@@ -37,6 +38,10 @@ export class SettingsComponent implements OnInit {
 		private ref: ChangeDetectorRef
 	) {
 		const ss = settingsService
+
+		this.chartFolderName = new FormControl<string>(ss.chartFolderName, { nonNullable: true })
+		this.chartFolderName.valueChanges.subscribe(value => ss.chartFolderName = value)
+
 		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 })

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

@@ -2,9 +2,10 @@ import { EventEmitter, Injectable, NgZone } from '@angular/core'
 
 import _ from 'lodash'
 import { ChartData } from 'src-shared/interfaces/search.interface'
-import { removeStyleTags } from 'src-shared/UtilFunctions'
+import { resolveChartFolderName } from 'src-shared/UtilFunctions'
 
 import { DownloadProgress } from '../../../../src-shared/interfaces/download.interface'
+import { SettingsService } from './settings.service'
 
 @Injectable({
 	providedIn: 'root',
@@ -14,7 +15,7 @@ export class DownloadService {
 	public downloadCountChanges = new EventEmitter<number>()
 	public downloads: DownloadProgress[] = []
 
-	constructor(zone: NgZone) {
+	constructor(zone: NgZone, private settingsService: SettingsService) {
 		window.electron.on.downloadQueueUpdate(download => zone.run(() => {
 			const downloadIndex = this.downloads.findIndex(d => d.md5 === download.md5)
 			if (download.type === 'cancel') {
@@ -50,7 +51,12 @@ export class DownloadService {
 
 	get currentDownloadText() {
 		const download = this.downloads.find(d => !d.stale && d.type === 'good')
-		return download ? `Downloading: ${_.truncate(download.chartName, { length: 80 })}` : ''
+		if (download) {
+			return 'Downloading: '
+				+ _.truncate(resolveChartFolderName(this.settingsService.chartFolderName, download.chart), { length: 80 })
+		} else {
+			return ''
+		}
 	}
 
 	get anyErrorsExist() {
@@ -62,19 +68,24 @@ export class DownloadService {
 			if (this.downloads.every(d => d.type === 'done')) { // Reset overall progress bar if it finished
 				this.downloads.forEach(d => d.stale = true)
 			}
-			const chartName = `${removeStyleTags(chart.artist ?? 'Unknown Artist')
-				} - ${removeStyleTags(chart.name ?? 'Unknown Name')
-				} (${removeStyleTags(chart.charter ?? 'Unknown Charter')})`
+			const newChart = {
+				name: chart.name ?? 'Unknown Name',
+				artist: chart.artist ?? 'Unknown Artist',
+				album: chart.album ?? 'Unknown Album',
+				genre: chart.genre ?? 'Unknown Genre',
+				year: chart.year ?? 'Unknown Year',
+				charter: chart.charter ?? 'Unknown Charter',
+			}
 			this.downloads.push({
 				md5: chart.md5,
-				chartName,
+				chart: newChart,
 				header: 'Waiting for other downloads to finish...',
 				body: '',
 				percent: 0,
 				type: 'good',
 				isPath: false,
 			})
-			window.electron.emit.download({ action: 'add', md5: chart.md5, chartName })
+			window.electron.emit.download({ action: 'add', md5: chart.md5, chart: newChart })
 		}
 		this.downloadCountChanges.emit(this.downloadCount)
 	}

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

@@ -57,8 +57,15 @@ export class SettingsService {
 	get libraryDirectory() {
 		return this.settings.libraryPath
 	}
-	set libraryDirectory(newValue: string | undefined) {
-		this.settings.libraryPath = newValue
+	set libraryDirectory(value: string | undefined) {
+		this.settings.libraryPath = value
+		this.saveSettings()
+	}
+	get chartFolderName() {
+		return this.settings.chartFolderName
+	}
+	set chartFolderName(value: string) {
+		this.settings.chartFolderName = value
 		this.saveSettings()
 	}