WIP

src/app/app.routes.ts

@@ -1,4 +1,10 @@
 import { Routes } from '@angular/router';
 import { DashboardComponent } from '@app/views/dashboard/dashboard.component';
 
-export const routes: Routes = [{path: '', component: DashboardComponent, title: 'Home'}];
+import { EmployeeDetailComponent } from './views/employee-detail/employee-detail.component';
+
+export const routes: Routes = [
+    { path: '', component: DashboardComponent, title: 'Home' },
+    { path: 'employee/new', component: EmployeeDetailComponent, title: 'New Employee' },
+    { path: 'employee/:id', component: EmployeeDetailComponent, title: 'Edit Employee' }
+];

src/app/views/dashboard/dashboard.component.html

@@ -1,4 +1,5 @@
 <p>dashboard works!</p>
-
+<a href="/employee/new">New Employee</a>
+<a href="/employee/3">Edit Employee 3</a>
 <button mat-button (click)="testInfo()">Test Info</button>
 <button mat-button (click)="testError()">Test Error</button>

src/app/views/employee-detail/employee-detail.component.html

@@ -0,0 +1,23 @@
+<div class="employee-detail">
+    <div class="employee-detail__info-view">
+        @if (isNewEmployee) {
+        <p>New Employee View Works</p>
+        }
+        @else {
+        <p>Edit Employee View Works</p>
+        @if ($employee|async;as employee) {
+        <code>{{employee|json}}</code>
+        }
+        }
+    </div>
+    <div class="employee-detail_action-row">
+        <button mat-button (click)="onAbort()">Abort</button>
+        @if (isNewEmployee) {
+        <button mat-button (click)="onCreate()">Create</button>
+        }
+        @else {
+        <button mat-button (click)="onSave()">Save</button>
+        }
+    </div>
+
+</div>

src/app/views/employee-detail/employee-detail.component.ts

@@ -0,0 +1,40 @@
+import { AsyncPipe, JsonPipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { ActivatedRoute } from '@angular/router';
+import { Employee, EmployeeService } from '@core/ems';
+import { Observable, of } from 'rxjs';
+
+@Component({
+    selector: 'app-employee-detail',
+    imports: [AsyncPipe, JsonPipe, MatButton],
+    templateUrl: './employee-detail.component.html',
+    styleUrl: './employee-detail.component.scss'
+})
+export class EmployeeDetailComponent {
+    isNewEmployee: boolean;
+    $employee: Observable<Employee | undefined> = of();
+    constructor(private route: ActivatedRoute, private employeeService: EmployeeService) {
+        const idParam = this.route.snapshot.paramMap.get('id');
+        this.isNewEmployee = idParam == null;
+
+        if (this.isNewEmployee) {
+            return;
+        }
+
+        const id = parseInt(idParam as string);
+        this.$employee = this.employeeService.getEmployee({ id });
+    }
+
+    onAbort() {
+
+    }
+
+    onCreate() {
+
+    }
+
+    onSave() {
+
+    }
+}