From 7319a17837ded625c5213b58696eba7fa8f9a743 Mon Sep 17 00:00:00 2001
From: Gal Podlipnik <itzgal2004@gmail.com>
Date: Tue, 5 Aug 2025 12:54:12 +0200
Subject: [PATCH] more fixes

---
 src/app/app.component.ts          |   9 +-
 src/app/edit-student.component.ts | 135 ++++++++++++++++--------------
 src/app/student.service.ts        |   5 +-
 3 files changed, 83 insertions(+), 66 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 24bce17..30ba670 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -22,8 +22,10 @@ import { LocaleStore } from './translations/locale.service';
 				<span class="app-title">StudentInfo</span>
 			</div>
 			<nav class="navbar-center">
-				<a routerLink="/students" routerLinkActive="active">Overview</a>
-				<a routerLink="/students/add" routerLinkActive="active">Add Student</a>
+				<a [routerLink]="overviewUrl()" routerLinkActive="active">Overview</a>
+				<a [routerLink]="addStudentUrl()" routerLinkActive="active"
+					>Add Student</a
+				>
 			</nav>
 			<div class="navbar-right">
 				<button
@@ -220,6 +222,9 @@ export class App implements OnInit {
 
 	isDarkMode = computed(() => this.theme() === 'dark');
 
+	overviewUrl = computed(() => `/${this.currentLocale()}/students`);
+	addStudentUrl = computed(() => `/${this.currentLocale()}/students/add`);
+
 	ngOnInit() {
 		this.applyTheme();
 	}
diff --git a/src/app/edit-student.component.ts b/src/app/edit-student.component.ts
index fd8db60..c6d4fb5 100644
--- a/src/app/edit-student.component.ts
+++ b/src/app/edit-student.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, computed, inject, OnInit } from '@angular/core';
+import { Component, computed, inject, OnInit, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { queryParam } from '@mmstack/router-core';
@@ -22,70 +22,68 @@ import { LocaleStore } from './translations/locale.service';
 	template: `
 		<div class="card-container">
 			<h2 class="page-title">Edit Student</h2>
-			<div *ngIf="student(); else notFound">
-				<form #f="ngForm">
-					<div class="form-field">
-						<label for="name">Name:</label>
-						<input
-							id="name"
-							pInputText
-							[ngModel]="student()?.name"
-							name="name"
-						/>
-					</div>
-					<div class="form-field">
-						<label for="email">Email:</label>
-						<input
-							id="email"
-							pInputText
-							[ngModel]="student()?.email"
-							name="email"
-						/>
-					</div>
-					<div class="form-field">
-						<label for="courses">Courses:</label>
-						<p-multiselect
-							id="courses"
-							[options]="courseOptions()"
-							[(ngModel)]="student()!.courses"
-							name="courses"
-							placeholder="Select Courses"
-							[showToggleAll]="true"
-						></p-multiselect>
-					</div>
-					<div class="form-actions">
-						<button
-							pButton
-							type="button"
-							label="Cancel"
-							class="p-button-outlined"
-							(click)="cancel()"
-						></button>
-						<button
-							pButton
-							type="button"
-							label="Save Changes"
-							icon="pi pi-save"
-							class="p-button-primary"
-							(click)="save()"
-						></button>
-					</div>
-				</form>
-			</div>
-
-			<ng-template #notFound>
-				<div class="not-found-message">
-					<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-					<p>Student not found. Please return to the overview page.</p>
+			@if (student()) {
+			<form #f="ngForm">
+				<div class="form-field">
+					<label for="name">Name:</label>
+					<input
+						id="name"
+						pInputText
+						[(ngModel)]="editedStudent().name"
+						name="name"
+					/>
+				</div>
+				<div class="form-field">
+					<label for="email">Email:</label>
+					<input
+						id="email"
+						pInputText
+						[(ngModel)]="editedStudent().email"
+						name="email"
+					/>
+				</div>
+				<div class="form-field">
+					<label for="courses">Courses:</label>
+					<p-multiselect
+						id="courses"
+						[options]="courseOptions()"
+						[(ngModel)]="editedStudent().courses"
+						name="courses"
+						placeholder="Select Courses"
+						[showToggleAll]="true"
+					></p-multiselect>
+				</div>
+				<div class="form-actions">
 					<button
 						pButton
 						type="button"
-						label="Back to Overview"
-						icon="pi pi-arrow-left"
+						label="Cancel"
+						class="p-button-outlined"
 						(click)="cancel()"
 					></button>
+					<button
+						pButton
+						type="button"
+						label="Save Changes"
+						icon="pi pi-save"
+						class="p-button-primary"
+						(click)="save()"
+					></button>
 				</div>
-			</ng-template>
+			</form>
+			} @if (!student()) {
+			<div class="not-found-message">
+				<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
+				<p>Student not found. Please return to the overview page.</p>
+				<button
+					pButton
+					type="button"
+					label="Back to Overview"
+					icon="pi pi-arrow-left"
+					(click)="cancel()"
+				></button>
+			</div>
+			}
 		</div>
 	`,
 	styles: [
@@ -155,6 +153,13 @@ export class EditStudentComponent implements OnInit {
 		this.studentService.getStudentById(this.queryId() ?? '')
 	);
 
+	protected editedStudent = signal({
+		id: '',
+		name: '',
+		email: '',
+		courses: [] as string[],
+	});
+
 	protected courseOptions = computed(() => {
 		return [
 			'Mathematics',
@@ -169,13 +174,21 @@ export class EditStudentComponent implements OnInit {
 	});
 
 	ngOnInit() {
-		if (!this.student()) {
+		const currentStudent = this.student();
+		if (currentStudent) {
+			this.editedStudent.set({
+				id: currentStudent.id,
+				name: currentStudent.name,
+				email: currentStudent.email,
+				courses: [...currentStudent.courses],
+			});
+		} else {
 			console.error('Student not found');
 		}
 	}
 
 	save() {
-		this.studentService.updateStudent(this.student()!);
+		this.studentService.updateStudent(this.editedStudent());
 		this.router.navigate([`/${this.localeStore.getCurrentLocale()}/students`]);
 	}
 
diff --git a/src/app/student.service.ts b/src/app/student.service.ts
index 65ff46b..8f6728a 100644
--- a/src/app/student.service.ts
+++ b/src/app/student.service.ts
@@ -35,9 +35,9 @@ export class StudentService {
 		return this.students().find((student) => student.id === id);
 	}
 
-	updateStudent(student: Student) {
+	updateStudent(student: Partial<Student>) {
 		this.students.update((students) =>
-			students.map((s) => (s.id === student.id ? student : s))
+			students.map((s) => (s.id === student.id ? { ...s, ...student } : s))
 		);
 	}
 
@@ -56,4 +56,3 @@ export class StudentService {
 		this.students.update((students) => students.filter((s) => s.id !== id));
 	}
 }
-