minor changes /j

src/app/pages/project-edit/project-edit.component.css

@@ -0,0 +1,94 @@
+.edit-project {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.card {
+  width: 100%;
+  max-width: 640px;
+  height: fit-content;
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card h1 {
+  margin: 0 0 24px 0;
+  font-size: 28px;
+  color: #2c3e50;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.form-group textarea {
+  resize: vertical;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.btn-primary {
+  padding: 10px 16px;
+  background-color: #10b981;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  padding: 10px 16px;
+  background: none;
+  border: 1px solid #cbd5f0;
+  color: #334155;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.error {
+  margin-bottom: 16px;
+  padding: 12px;
+  border-radius: 8px;
+  background-color: #fee2e2;
+  color: #b91c1c;
+}
+
+.loading {
+  margin: 0;
+  color: #6b7280;
+}

src/app/pages/project-edit/project-edit.component.html

@@ -0,0 +1,54 @@
+<div class="edit-project">
+  <div class="card">
+    <h1>Edit project</h1>
+
+    @if (errorMessage()) {
+      <div class="error">{{ errorMessage() }}</div>
+    }
+
+    @if (isLoading()) {
+      <p class="loading">Loading project...</p>
+    } @else {
+      <form (ngSubmit)="onSubmit()" #projectForm="ngForm">
+        <div class="form-group">
+          <label for="name">Project name</label>
+          <input
+            id="name"
+            type="text"
+            name="name"
+            [(ngModel)]="name"
+            placeholder="Enter a project name"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="description">Description</label>
+          <textarea
+            id="description"
+            name="description"
+            [(ngModel)]="description"
+            rows="4"
+            placeholder="Enter a project description"
+            required
+          ></textarea>
+        </div>
+
+        <div class="actions">
+          <button type="button" class="btn-secondary" (click)="onCancel()">Cancel</button>
+          <button
+            type="submit"
+            class="btn-primary"
+            [disabled]="isSaving() || !projectForm.form.valid"
+          >
+            @if (isSaving()) {
+              <span>Saving...</span>
+            } @else {
+              <span>Save changes</span>
+            }
+          </button>
+        </div>
+      </form>
+    }
+  </div>
+</div>

src/app/pages/project-edit/project-edit.component.ts

@@ -0,0 +1,95 @@
+import { Component, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ApiService } from '../../services/api.service';
+import { Project, UpdateProjectRequest } from '../../models/projects.models';
+
+@Component({
+  selector: 'app-project-edit',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './project-edit.component.html',
+  styleUrl: './project-edit.component.css',
+})
+export class ProjectEditComponent {
+  private apiService = inject(ApiService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
+  name = '';
+  description = '';
+  isSaving = signal(false);
+  isLoading = signal(true);
+  errorMessage = signal('');
+  private projectId: number | null = null;
+
+  constructor() {
+    const idParam = this.route.snapshot.paramMap.get('id');
+    const projectId = idParam ? Number(idParam) : Number.NaN;
+
+    if (!Number.isFinite(projectId)) {
+      this.isLoading.set(false);
+      this.errorMessage.set('Invalid project id.');
+      return;
+    }
+
+    this.projectId = projectId;
+
+    this.apiService.get<Project>(`/projects/${projectId}`).subscribe({
+      next: (project) => {
+        this.name = project.name ?? '';
+        this.description = project.description ?? '';
+        this.isLoading.set(false);
+      },
+      error: (error) => {
+        this.isLoading.set(false);
+        this.errorMessage.set(error?.error?.message || 'Failed to load project.');
+      },
+    });
+  }
+
+  onSubmit() {
+    if (!this.name.trim()) {
+      this.errorMessage.set('Project name is required.');
+      return;
+    }
+
+    if (!this.description.trim()) {
+      this.errorMessage.set('Project description is required.');
+      return;
+    }
+
+    if (this.projectId == null) {
+      this.errorMessage.set('Invalid project id.');
+      return;
+    }
+
+    const payload: UpdateProjectRequest = {
+      name: this.name.trim(),
+      description: this.description.trim(),
+    };
+
+    this.isSaving.set(true);
+    this.errorMessage.set('');
+
+    this.apiService.put<Project>(`/projects/${this.projectId}`, payload).subscribe({
+      next: () => {
+        this.isSaving.set(false);
+        this.router.navigate(['/projects', this.projectId]);
+      },
+      error: (error) => {
+        this.isSaving.set(false);
+        this.errorMessage.set(error?.error?.message || 'Failed to update project.');
+      },
+    });
+  }
+
+  onCancel() {
+    if (this.projectId != null) {
+      this.router.navigate(['/projects', this.projectId]);
+    } else {
+      this.router.navigate(['/']);
+    }
+  }
+}