Restructuring of track functionality into dedicated components

src/RunnersMeet.Client/src/app/app.module.ts

@@ -11,13 +11,21 @@ import { TracksApiService } from './tracks-api.service';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { CreateTrackPageComponent } from './pages/create-track-page/create-track-page.component';
 import { FormsModule } from '@angular/forms';
+import { TrackCreateComponent } from './tracks/track-create/track-create.component';
+import { TrackListItemComponent } from './tracks/track-list-item/track-list-item.component';
+import { TrackEditComponent } from './tracks/track-edit/track-edit.component';
+import { TrackViewComponent } from './tracks/track-view/track-view.component';
 
 @NgModule({
 	declarations: [
 		AppComponent,
 		HomePageComponent,
 		TracksPageComponent,
-  CreateTrackPageComponent,
+		CreateTrackPageComponent,
+		TrackCreateComponent,
+		TrackListItemComponent,
+		TrackEditComponent,
+		TrackViewComponent,
 	],
 	imports: [
 		BrowserModule,

src/RunnersMeet.Client/src/app/pages/create-track-page/create-track-page.component.html

@@ -1,11 +1 @@
-<form #uploadForm="ngForm" (ngSubmit)="uploadFile($event, uploadForm)">
-	<div>
-	  <input type="file" name="trackFile" (change)="onFileChange($event)" ngModel />
-	</div>
-	<div>
-	  <input type="text" name="fileName" [(ngModel)]="fileName" />
-	</div>
-	<div>
-	  <button type="submit">Upload</button>
-	</div>
-  </form>
+<app-track-create></app-track-create>

src/RunnersMeet.Client/src/app/pages/create-track-page/create-track-page.component.ts

@@ -8,35 +8,5 @@ import { TracksApiService } from 'src/app/tracks-api.service';
 	styleUrls: ['./create-track-page.component.scss']
 })
 export class CreateTrackPageComponent {
-	public fileName: string = '';
-
-	public constructor(
-		private readonly tracksApi: TracksApiService
-	) { }
-
-	public onFileChange(event: Event): void {
-		const element = event.currentTarget as HTMLInputElement;
-		let fileList: FileList | null = element.files;
-		if (fileList) {
-			this.fileName = fileList.item(0)?.name || '';
-			const extIndex = this.fileName.lastIndexOf('.');
-			if (extIndex > 0) {
-				this.fileName = this.fileName.substring(0, extIndex);
-			}
-		}
-	}
-
-	public uploadFile(event: SubmitEvent, form: NgForm): void {
-
-		const file: File | undefined = ((event.target as HTMLFormElement).elements.namedItem('trackFile') as HTMLInputElement).files?.[0];
-
-		if (file) {
-			const formData = new FormData();
-			formData.append("file", file);
-			formData.append("name", form.value.fileName);
-
-			this.tracksApi.createTrack(formData).then(track => console.log('created track', track));
-			form.resetForm();
-		}
-	}
+	public constructor() { }
 }

src/RunnersMeet.Client/src/app/pages/tracks-page/tracks-page.component.html

@@ -1,4 +1,4 @@
 Tracks:
 <ul>
-	<li *ngFor="let track of tracks | async">{{ track.trackId }} - {{ track.displayName }}</li>
+	<li *ngFor="let track of tracks | async"><app-track-list-item [track]="track"></app-track-list-item></li>
 </ul>

src/RunnersMeet.Client/src/app/pages/tracks-page/tracks-page.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Track } from 'src/app/track';
+import { Track } from 'src/app/tracks/track';
 import { TracksApiService } from 'src/app/tracks-api.service';
 
 @Component({

src/RunnersMeet.Client/src/app/tracks-api.service.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
 import { environment } from 'src/env/environment';
-import { Track } from './track';
+import { Track } from './tracks/track';
 
 @Injectable({
 	providedIn: 'root'

src/RunnersMeet.Client/src/app/tracks/track-create/track-create.component.html

@@ -0,0 +1,11 @@
+<form #uploadForm="ngForm" (ngSubmit)="uploadFile($event, uploadForm)">
+	<div>
+	  <input type="file" name="trackFile" (change)="onFileChange($event)" ngModel />
+	</div>
+	<div>
+	  <input type="text" name="fileName" [(ngModel)]="fileName" />
+	</div>
+	<div>
+	  <button type="submit">Upload</button>
+	</div>
+</form>

src/RunnersMeet.Client/src/app/tracks/track-create/track-create.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { TracksApiService } from 'src/app/tracks-api.service';
+
+@Component({
+  selector: 'app-track-create',
+  templateUrl: './track-create.component.html',
+  styleUrls: ['./track-create.component.scss']
+})
+export class TrackCreateComponent {
+	public fileName: string = '';
+
+	public constructor(
+		private readonly tracksApi: TracksApiService
+	) { }
+
+	public onFileChange(event: Event): void {
+		const element = event.currentTarget as HTMLInputElement;
+		let fileList: FileList | null = element.files;
+		if (fileList) {
+			this.fileName = fileList.item(0)?.name || '';
+			const extIndex = this.fileName.lastIndexOf('.');
+			if (extIndex > 0) {
+				this.fileName = this.fileName.substring(0, extIndex);
+			}
+		}
+	}
+
+	public uploadFile(event: SubmitEvent, form: NgForm): void {
+
+		const file: File | undefined = ((event.target as HTMLFormElement).elements.namedItem('trackFile') as HTMLInputElement).files?.[0];
+
+		if (file) {
+			const formData = new FormData();
+			formData.append("file", file);
+			formData.append("name", form.value.fileName);
+
+			this.tracksApi.createTrack(formData).then(track => console.log('created track', track));
+			form.resetForm();
+		}
+	}
+}

src/RunnersMeet.Client/src/app/tracks/track-edit/track-edit.component.html

@@ -0,0 +1 @@
+<p>track-edit works!</p>

src/RunnersMeet.Client/src/app/tracks/track-edit/track-edit.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-track-edit',
+  templateUrl: './track-edit.component.html',
+  styleUrls: ['./track-edit.component.scss']
+})
+export class TrackEditComponent {
+
+}

src/RunnersMeet.Client/src/app/tracks/track-list-item/track-list-item.component.html

@@ -0,0 +1 @@
+{{ track?.trackId }} - {{ track?.displayName }}

src/RunnersMeet.Client/src/app/tracks/track-list-item/track-list-item.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { Track } from '../track';
+
+@Component({
+  selector: 'app-track-list-item',
+  templateUrl: './track-list-item.component.html',
+  styleUrls: ['./track-list-item.component.scss']
+})
+export class TrackListItemComponent {
+	@Input()
+	public track?: Track;
+}

src/RunnersMeet.Client/src/app/tracks/track-view/track-view.component.html

@@ -0,0 +1 @@
+<p>track-view works!</p>

src/RunnersMeet.Client/src/app/tracks/track-view/track-view.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-track-view',
+  templateUrl: './track-view.component.html',
+  styleUrls: ['./track-view.component.scss']
+})
+export class TrackViewComponent {
+
+}