Using edit track page to both create and edit

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

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from '@auth0/auth0-angular';
-import { CreateTrackPageComponent } from './pages/create-track-page/create-track-page.component';
+import { EditTrackPageComponent } from './pages/edit-track-page/edit-track-page.component';
 import { HomePageComponent } from './pages/home-page/home-page.component';
 import { TracksPageComponent } from './pages/tracks-page/tracks-page.component';
 
@@ -16,8 +16,8 @@ const routes: Routes = [
 		canActivate: [AuthGuard],
 	},
 	{
-		path: 'tracks/create',
-		component: CreateTrackPageComponent,
+		path: 'tracks/edit/:oid',
+		component: EditTrackPageComponent,
 		canActivate: [AuthGuard],
 	},
 ];

src/RunnersMeet.Client/src/app/app.component.html

@@ -2,6 +2,6 @@
 <ul>
 	<li><a [routerLink]="['/']">Home</a></li>
 	<li><a [routerLink]="['/tracks']">Tracks</a></li>
-	<li><a [routerLink]="['/tracks/create']">Create Track</a></li>
+	<li><a [routerLink]="['/tracks/edit/new']">Create Track</a></li>
 </ul>
 <router-outlet></router-outlet>

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

@@ -9,7 +9,7 @@ import { HomePageComponent } from './pages/home-page/home-page.component';
 import { TracksPageComponent } from './pages/tracks-page/tracks-page.component';
 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 { EditTrackPageComponent } from './pages/edit-track-page/edit-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';
@@ -21,7 +21,7 @@ import { TrackViewComponent } from './tracks/track-view/track-view.component';
 		AppComponent,
 		HomePageComponent,
 		TracksPageComponent,
-		CreateTrackPageComponent,
+		EditTrackPageComponent,
 		TrackCreateComponent,
 		TrackListItemComponent,
 		TrackEditComponent,

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

@@ -1 +0,0 @@
-<app-track-create></app-track-create>

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

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CreateTrackPageComponent } from './create-track-page.component';
-
-describe('CreateTrackPageComponent', () => {
-	let component: CreateTrackPageComponent;
-	let fixture: ComponentFixture<CreateTrackPageComponent>;
-
-	beforeEach(async () => {
-		await TestBed.configureTestingModule({
-			declarations: [CreateTrackPageComponent]
-		})
-			.compileComponents();
-
-		fixture = TestBed.createComponent(CreateTrackPageComponent);
-		component = fixture.componentInstance;
-		fixture.detectChanges();
-	});
-
-	it('should create', () => {
-		expect(component).toBeTruthy();
-	});
-});

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

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { NgForm } from '@angular/forms';
-import { TracksApiService } from 'src/app/tracks-api.service';
-
-@Component({
-	selector: 'app-create-track-page',
-	templateUrl: './create-track-page.component.html',
-	styleUrls: ['./create-track-page.component.scss']
-})
-export class CreateTrackPageComponent {
-	public constructor() { }
-}

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

@@ -0,0 +1,2 @@
+<app-track-create *ngIf="isCreateMode"></app-track-create>
+<app-track-edit *ngIf="!isCreateMode" [trackId]="trackId"></app-track-edit>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditTrackPageComponent } from './edit-track-page.component';
+
+describe('EditTrackPageComponent', () => {
+	let component: EditTrackPageComponent;
+	let fixture: ComponentFixture<EditTrackPageComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			declarations: [EditTrackPageComponent]
+		})
+			.compileComponents();
+
+		fixture = TestBed.createComponent(EditTrackPageComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+	selector: 'app-edit-track-page',
+	templateUrl: './edit-track-page.component.html',
+	styleUrls: ['./edit-track-page.component.scss']
+})
+export class EditTrackPageComponent {
+	public isCreateMode: boolean = false;
+	public trackId: string = '';
+
+	public constructor(route: ActivatedRoute) {
+		route.params.subscribe(params => {
+			const oid = params['oid'];
+			if (oid === 'new') {
+				this.isCreateMode = true;
+			} else {
+				this.trackId = oid;
+			}
+		})
+	}
+}

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

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