galpodlipnik/student-info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more fixes

Browse Source
This commit is contained in:
Gal Podlipnik 2025-08-05 12:54:12 +02:00
parent 54b779390e
commit 7319a17837
3 changed files with 83 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/app.component.ts
View File

@ -22,8 +22,10 @@ import { LocaleStore } from './translations/locale.service';
<span class="app-title">StudentInfo</span> <span class="app-title">StudentInfo</span>
</div> </div>
<nav class="navbar-center"> <nav class="navbar-center">
<a routerLink="/students" routerLinkActive="active">Overview</a> <a [routerLink]="overviewUrl()" routerLinkActive="active">Overview</a>
<a routerLink="/students/add" routerLinkActive="active">Add Student</a> <a [routerLink]="addStudentUrl()" routerLinkActive="active"
>Add Student</a
>
</nav> </nav>
<div class="navbar-right"> <div class="navbar-right">
<button <button
@ -220,6 +222,9 @@ export class App implements OnInit {
isDarkMode = computed(() => this.theme() === 'dark'); isDarkMode = computed(() => this.theme() === 'dark');
overviewUrl = computed(() => `/${this.currentLocale()}/students`);
addStudentUrl = computed(() => `/${this.currentLocale()}/students/add`);
ngOnInit() { ngOnInit() {
this.applyTheme(); this.applyTheme();
} }

135
src/app/edit-student.component.ts
View File

@ -1,5 +1,5 @@
import { CommonModule } from '@angular/common'; 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 { FormsModule } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { queryParam } from '@mmstack/router-core'; import { queryParam } from '@mmstack/router-core';
@ -22,70 +22,68 @@ import { LocaleStore } from './translations/locale.service';
template: ` template: `
<div class="card-container"> <div class="card-container">
<h2 class="page-title">Edit Student</h2> <h2 class="page-title">Edit Student</h2>
<div *ngIf="student(); else notFound"> @if (student()) {
<form #f="ngForm"> <form #f="ngForm">
<div class="form-field"> <div class="form-field">
<label for="name">Name:</label> <label for="name">Name:</label>
<input <input
id="name" id="name"
pInputText pInputText
[ngModel]="student()?.name" [(ngModel)]="editedStudent().name"
name="name" name="name"
/> />
</div> </div>
<div class="form-field"> <div class="form-field">
<label for="email">Email:</label> <label for="email">Email:</label>
<input <input
id="email" id="email"
pInputText pInputText
[ngModel]="student()?.email" [(ngModel)]="editedStudent().email"
name="email" name="email"
/> />
</div> </div>
<div class="form-field"> <div class="form-field">
<label for="courses">Courses:</label> <label for="courses">Courses:</label>
<p-multiselect <p-multiselect
id="courses" id="courses"
[options]="courseOptions()" [options]="courseOptions()"
[(ngModel)]="student()!.courses" [(ngModel)]="editedStudent().courses"
name="courses" name="courses"
placeholder="Select Courses" placeholder="Select Courses"
[showToggleAll]="true" [showToggleAll]="true"
></p-multiselect> ></p-multiselect>
</div> </div>
<div class="form-actions"> <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>
<button <button
pButton pButton
type="button" type="button"
label="Back to Overview" label="Cancel"
icon="pi pi-arrow-left" class="p-button-outlined"
(click)="cancel()" (click)="cancel()"
></button> ></button>
<button
pButton
type="button"
label="Save Changes"
icon="pi pi-save"
class="p-button-primary"
(click)="save()"
></button>
</div> </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> </div>
`, `,
styles: [ styles: [
@ -155,6 +153,13 @@ export class EditStudentComponent implements OnInit {
this.studentService.getStudentById(this.queryId() ?? '') this.studentService.getStudentById(this.queryId() ?? '')
); );
protected editedStudent = signal({
id: '',
name: '',
email: '',
courses: [] as string[],
});
protected courseOptions = computed(() => { protected courseOptions = computed(() => {
return [ return [
'Mathematics', 'Mathematics',
@ -169,13 +174,21 @@ export class EditStudentComponent implements OnInit {
}); });
ngOnInit() { 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'); console.error('Student not found');
} }
} }
save() { save() {
this.studentService.updateStudent(this.student()!); this.studentService.updateStudent(this.editedStudent());
this.router.navigate([`/${this.localeStore.getCurrentLocale()}/students`]); this.router.navigate([`/${this.localeStore.getCurrentLocale()}/students`]);
} }

5
src/app/student.service.ts
View File

@ -35,9 +35,9 @@ export class StudentService {
return this.students().find((student) => student.id === id); return this.students().find((student) => student.id === id);
} }
updateStudent(student: Student) { updateStudent(student: Partial<Student>) {
this.students.update((students) => 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)); this.students.update((students) => students.filter((s) => s.id !== id));
} }
} }