(null);
@@ -136,6 +138,7 @@ export class Workspace {
onGoalSaved() {
this.showGoalModal.set(null);
this.refetchProfile();
+ this.toast.show('Goal updated');
}
onAddGoal() {
@@ -162,6 +165,7 @@ export class Workspace {
this.selectedGoalId.set(null);
this.studentService.notifyDataChanged();
await this.refetchProfile();
+ this.toast.show('Goal deleted');
}
onGoalCreated(goal: StudentGoalItem) {
@@ -170,6 +174,7 @@ export class Workspace {
this.refetchProfile().then(() => {
this.selectedGoalId.set(goal.goalId);
});
+ this.toast.show('Goal added');
}
onEditBenchmark(b: BenchmarkDto) {
@@ -179,6 +184,7 @@ export class Workspace {
onEditBenchmarkSaved() {
this.showEditBenchmarkModal.set(null);
this.refetchProfile();
+ this.toast.show('Benchmark saved');
}
onAddBenchmark() {
@@ -204,6 +210,7 @@ export class Workspace {
if (!result.success) return;
await this.refetchProfile();
+ this.toast.show('Benchmark deleted');
}
onNewEvent() {
@@ -217,6 +224,7 @@ export class Workspace {
onEventSaved() {
this.showEditEventModal.set(null);
this.refetchProfile();
+ this.toast.show('Progress event saved');
}
onDeleteEvent(ev: ProgressEventWithGoalDto) {
@@ -238,6 +246,7 @@ export class Workspace {
if (!result.success) return;
await this.refetchProfile();
+ this.toast.show('Progress event deleted');
}
// *****************************************************************
@@ -274,6 +283,7 @@ export class Workspace {
if (!result.success) return;
this.studentService.notifyDataChanged();
+ this.toast.show('Student deleted');
this.router.navigate(['/']);
}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html
index 3264b52..d8f6bd0 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html
@@ -1,3 +1,4 @@
+
@if (showStudentModal()) {
diff --git a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss
index efd0f84..7a2c9ce 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss
+++ b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss
@@ -68,7 +68,7 @@
align-items: center;
width: 30px;
height: 16px;
- background: #d1d5db;
+ background: var(--toggle-inactive);
border-radius: 8px;
padding: 2px;
transition: background var(--transition-normal);
@@ -102,11 +102,11 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
- color: #4338CA;
- background: #EEF2FF;
+ color: var(--accent-indigo);
+ background: var(--accent-indigo-bg);
padding: 6px 12px;
margin-top: 6px;
- border-left: 3px solid #818CF8;
+ border-left: 3px solid var(--accent-indigo-border);
}
.student-item {
diff --git a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts
index cdd8fef..c3de319 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts
@@ -5,11 +5,13 @@ import { StudentService } from '../../../shared/services/student.service';
import { StudentCardDto } from '../../../shared/classes/student-card.dto';
import { StudentModal } from '../../components/student-modal/student-modal';
import { EditIcon } from '../../components/edit-icon/edit-icon';
+import { ToastHost } from '../../components/toast-host/toast-host';
+import { ToastService } from '../../../shared/services/toast.service';
import { formatDate } from '../../../shared/utils/format-date';
@Component({
selector: 'app-home',
- imports: [RouterOutlet, RouterLink, StudentModal, EditIcon],
+ imports: [RouterOutlet, RouterLink, StudentModal, EditIcon, ToastHost],
templateUrl: './home.html',
styleUrl: './home.scss',
})
@@ -36,6 +38,7 @@ export class Home {
protected readonly auth = inject(Auth);
private readonly router = inject(Router);
private readonly studentService = inject(StudentService);
+ private readonly toast = inject(ToastService);
protected readonly students = signal([]);
protected readonly selectedStudentId = signal(null);
@@ -96,6 +99,7 @@ export class Home {
this.studentService.notifyDataChanged();
this.selectedStudentId.set(student.studentId);
this.router.navigate(['/students', student.studentId]);
+ this.toast.show('Student added');
}
onEditStudent(student: StudentCardDto, event: Event) {
@@ -106,6 +110,7 @@ export class Home {
onStudentSaved() {
this.showStudentModal.set(null);
this.loadStudents();
+ this.toast.show('Student updated');
}
onLogout() {
diff --git a/ui/winstudentgoaltracker/src/app/desktop/styles/_detail-page.scss b/ui/winstudentgoaltracker/src/app/desktop/styles/_detail-page.scss
index a03d54a..74bbce6 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/styles/_detail-page.scss
+++ b/ui/winstudentgoaltracker/src/app/desktop/styles/_detail-page.scss
@@ -25,7 +25,7 @@
font-family: inherit;
&:hover {
- background: #EEF2FF;
+ background: var(--accent-indigo-bg);
}
&:disabled {
@@ -60,7 +60,7 @@
.field-label {
font-size: 12px;
font-weight: 600;
- color: #666;
+ color: var(--text-secondary);
margin-bottom: 4px;
}
@@ -80,7 +80,7 @@
.error {
font-size: 13px;
- color: #dc2626;
+ color: var(--danger);
margin: 0 0 12px;
}
diff --git a/ui/winstudentgoaltracker/src/app/shared/services/toast.service.ts b/ui/winstudentgoaltracker/src/app/shared/services/toast.service.ts
new file mode 100644
index 0000000..6092ed6
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/shared/services/toast.service.ts
@@ -0,0 +1,25 @@
+import { Injectable, signal } from '@angular/core';
+
+export type ToastType = 'success' | 'error' | 'info';
+
+export interface Toast {
+ id: number;
+ message: string;
+ type: ToastType;
+}
+
+@Injectable({ providedIn: 'root' })
+export class ToastService {
+ private nextId = 0;
+ readonly toasts = signal([]);
+
+ show(message: string, type: ToastType = 'success') {
+ const id = ++this.nextId;
+ this.toasts.update(list => [...list, { id, message, type }]);
+ setTimeout(() => this.dismiss(id), 3000);
+ }
+
+ dismiss(id: number) {
+ this.toasts.update(list => list.filter(t => t.id !== id));
+ }
+}
diff --git a/ui/winstudentgoaltracker/src/styles.scss b/ui/winstudentgoaltracker/src/styles.scss
index 967d081..bb39a90 100644
--- a/ui/winstudentgoaltracker/src/styles.scss
+++ b/ui/winstudentgoaltracker/src/styles.scss
@@ -15,6 +15,19 @@
--text-dim: #bbb;
--accent-indigo: #4338CA;
--accent-indigo-light: #6366F1;
+ --accent-indigo-dark: #3730A3;
+ --accent-indigo-bg: #EEF2FF;
+ --accent-indigo-border: #818CF8;
+ --accent-indigo-border-light: #C7D2FE;
+ --accent-purple: #6d28d9;
+ --accent-purple-bg: #f5f3ff;
+ --accent-purple-border: #c4b5fd;
+ --accent-purple-hover: #ede9fe;
+ --danger: #DC2626;
+ --danger-dark: #B91C1C;
+ --danger-bg: #FEE2E2;
+ --danger-bg-light: #FEF2F2;
+ --toggle-inactive: #d1d5db;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;