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