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>
</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();
}

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

@ -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`]);
}

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

@ -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));
}
}