mirror of
https://github.com/opelly27/WinStudentGoalTracker.git
synced 2026-05-20 00:38:44 +00:00
dead code removal
This commit is contained in:
-7
@@ -95,19 +95,12 @@ export class BenchmarkCardFull implements OnDestroy {
|
||||
this.errorMessage.set(result.message);
|
||||
}
|
||||
} else {
|
||||
const shortNameChanged = this.shortName !== this.savedShortName;
|
||||
const result = await this.studentService.updateBenchmark(this.studentId, this.benchmarkId!, this.benchmarkText, this.shortName || undefined);
|
||||
this.saving.set(false);
|
||||
if (result.success) {
|
||||
this.savedBenchmarkText = this.benchmarkText;
|
||||
this.savedShortName = this.shortName;
|
||||
this.successMessage.set('Changes saved.');
|
||||
if (shortNameChanged) {
|
||||
this.studentService.updateSidebarLabel(
|
||||
['/students', this.studentId, 'goals', this.goalId, 'benchmarks', this.benchmarkId!],
|
||||
this.shortName || this.benchmarkText
|
||||
);
|
||||
}
|
||||
} else {
|
||||
this.errorMessage.set(result.message);
|
||||
}
|
||||
|
||||
-12
@@ -1,12 +0,0 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="goal-badge">{{ benchmark().goalCategory }}</span>
|
||||
@if (benchmark().updatedAt) {
|
||||
<span class="date">Updated: {{ benchmark().updatedAt | date:'M/d/yy' }}</span>
|
||||
} @else {
|
||||
<span class="date">{{ benchmark().createdAt | date:'M/d/yy' }}</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<p class="benchmark-text">{{ benchmark().benchmark }}</p>
|
||||
</div>
|
||||
-51
@@ -1,51 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
padding: 1.25rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.goal-badge {
|
||||
padding: 0.2rem 0.6rem;
|
||||
background: #f0fdf4;
|
||||
color: #16a34a;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 0.8125rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.benchmark-text {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BenchmarkCard } from './benchmark-card';
|
||||
|
||||
describe('BenchmarkCard', () => {
|
||||
let component: BenchmarkCard;
|
||||
let fixture: ComponentFixture<BenchmarkCard>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [BenchmarkCard]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(BenchmarkCard);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,26 +0,0 @@
|
||||
import { Component, input } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
|
||||
|
||||
@Component({
|
||||
selector: 'app-benchmark-card',
|
||||
imports: [DatePipe],
|
||||
templateUrl: './benchmark-card.html',
|
||||
styleUrl: './benchmark-card.scss',
|
||||
})
|
||||
export class BenchmarkCard {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
readonly benchmark = input.required<BenchmarkDto>();
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
}
|
||||
-29
@@ -1,29 +0,0 @@
|
||||
<div class="toolbar">
|
||||
<button class="toolbar-btn back-btn" (click)="onBack()">↑ Goal</button>
|
||||
<span class="spacer"></span>
|
||||
<button class="toolbar-btn" (click)="onAddBenchmark()">+ Add a Benchmark</button>
|
||||
</div>
|
||||
|
||||
@if (goalCategory()) {
|
||||
<h2 class="section-header">Benchmarks for {{ goalCategory() }}</h2>
|
||||
} @else {
|
||||
<h2 class="section-header">Benchmarks</h2>
|
||||
}
|
||||
|
||||
@if (errorMessage()) {
|
||||
<p class="error">{{ errorMessage() }}</p>
|
||||
}
|
||||
|
||||
@if (benchmarks().length === 0 && !errorMessage()) {
|
||||
<div class="empty-state">
|
||||
<p>Benchmarks are milestones on the way to achieving a goal. They are optional in this system.</p>
|
||||
<p>No benchmarks yet.</p>
|
||||
<p>Click <strong>+ Add a Benchmark</strong> in the upper right to get started.</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="card-grid">
|
||||
@for (bm of benchmarks(); track bm.benchmarkId) {
|
||||
<app-benchmark-card [benchmark]="bm" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
-72
@@ -1,72 +0,0 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
height: 40px;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: transparent;
|
||||
color: #4f46e5;
|
||||
border: 1px solid #4f46e5;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #eef2ff;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 0.875rem;
|
||||
color: #dc2626;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1.5rem;
|
||||
color: #555;
|
||||
font-size: 0.9375rem;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BenchmarkList } from './benchmark-list';
|
||||
|
||||
describe('BenchmarkList', () => {
|
||||
let component: BenchmarkList;
|
||||
let fixture: ComponentFixture<BenchmarkList>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [BenchmarkList]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(BenchmarkList);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,94 +0,0 @@
|
||||
import { Component, inject, signal } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
|
||||
import { StudentService } from '../../../shared/services/student.service';
|
||||
import { BenchmarkCard } from '../benchmark-card/benchmark-card';
|
||||
|
||||
@Component({
|
||||
selector: 'app-benchmark-list',
|
||||
imports: [BenchmarkCard],
|
||||
templateUrl: './benchmark-list.html',
|
||||
styleUrl: './benchmark-list.scss',
|
||||
})
|
||||
export class BenchmarkList {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
constructor() {
|
||||
this.studentId = this.route.snapshot.paramMap.get('studentId')!;
|
||||
this.goalId = this.route.snapshot.paramMap.get('goalId') || '';
|
||||
this.loadBenchmarks();
|
||||
this.loadGoalCategory();
|
||||
}
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
private readonly studentService = inject(StudentService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
protected readonly studentId: string;
|
||||
protected readonly goalId: string;
|
||||
protected readonly goalCategory = signal<string | null>(null);
|
||||
protected readonly benchmarks = signal<BenchmarkDto[]>([]);
|
||||
protected readonly errorMessage = signal<string | null>(null);
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
onAddBenchmark() {
|
||||
this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'benchmarks', 'new']);
|
||||
}
|
||||
|
||||
onBack() {
|
||||
if (this.goalId) {
|
||||
this.router.navigate(['/students', this.studentId, 'goals', this.goalId]);
|
||||
} else {
|
||||
this.router.navigate(['/students', this.studentId, 'goals']);
|
||||
}
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
|
||||
// *****************************************************************
|
||||
// Loads benchmarks for the student from the service. Also sets
|
||||
// goalCategory from the first benchmark's data.
|
||||
// *****************************************************************
|
||||
private loadBenchmarks() {
|
||||
this.studentService.getBenchmarksForStudent(this.studentId).then(data => {
|
||||
if (!data.success) {
|
||||
this.errorMessage.set(data.message);
|
||||
} else {
|
||||
const benchmarks = data.payload?.benchmarks ?? [];
|
||||
this.benchmarks.set(benchmarks);
|
||||
|
||||
// Set the goal category from benchmark data if available
|
||||
if (this.goalId && benchmarks.length > 0) {
|
||||
const match = benchmarks.find(b => b.goalId === this.goalId);
|
||||
if (match) this.goalCategory.set(match.goalCategory);
|
||||
}
|
||||
|
||||
// If we still don't have a category, load it from the goals API
|
||||
if (!this.goalCategory()) {
|
||||
this.loadGoalCategory();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Loads the goal category from the goals API as a fallback when
|
||||
// no benchmarks exist yet to extract it from.
|
||||
// *****************************************************************
|
||||
private loadGoalCategory() {
|
||||
if (!this.goalId) return;
|
||||
this.studentService.getGoalsForStudent(this.studentId).then(result => {
|
||||
if (!result.success || !result.payload) return;
|
||||
const goal = result.payload.goals.find(g => g.goalId === this.goalId);
|
||||
this.goalCategory.set(goal?.category ?? null);
|
||||
});
|
||||
}
|
||||
}
|
||||
-81
@@ -1,81 +0,0 @@
|
||||
<div class="toolbar">
|
||||
<button class="toolbar-btn back-btn" (click)="onBack()">↑ Goals</button>
|
||||
<span class="toolbar-title">Goal Detail</span>
|
||||
<span class="spacer"></span>
|
||||
</div>
|
||||
|
||||
@if (loaded()) {
|
||||
<div class="detail-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">Goal: {{ category }}</span>
|
||||
@if (targetCompletionDate) {
|
||||
<span class="card-title">Target: {{ targetCompletionDate | date:'mediumDate' }}</span>
|
||||
} @else {
|
||||
<span class="card-title">No target date</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="field">
|
||||
<label class="field-label" for="category">Category</label>
|
||||
<input id="category" class="field-input" type="text" [(ngModel)]="category" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field-label" for="baseline">Baseline</label>
|
||||
<textarea id="baseline" class="field-input field-textarea" [(ngModel)]="baseline" rows="3"
|
||||
placeholder="Enter baseline..."></textarea>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="field-label" for="description">Goal</label>
|
||||
<textarea id="description" class="field-input field-textarea" [(ngModel)]="description" rows="4"
|
||||
placeholder="Enter goal..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field-label" for="targetCompletionDate">Target Completion Date</label>
|
||||
<input id="targetCompletionDate" class="field-input" type="date" [(ngModel)]="targetCompletionDate" />
|
||||
</div>
|
||||
|
||||
@if (closeDate !== null) {
|
||||
<div class="close-section">
|
||||
<div class="field">
|
||||
<label class="field-label" for="closeDate">Close Date</label>
|
||||
<input id="closeDate" class="field-input" type="date" [(ngModel)]="closeDate" />
|
||||
</div>
|
||||
<div class="field field-row">
|
||||
<label class="field-label" for="achieved">Achieved</label>
|
||||
<input id="achieved" type="checkbox" [ngModel]="achieved ?? false" (ngModelChange)="achieved = $event" />
|
||||
</div>
|
||||
@if (achieved === false) {
|
||||
<div class="field">
|
||||
<label class="field-label" for="closeNotes">Close Notes <span class="required">*</span></label>
|
||||
<textarea id="closeNotes" class="field-input field-textarea" [(ngModel)]="closeNotes" rows="3"
|
||||
placeholder="Explain why the goal was not achieved..." required></textarea>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="actions">
|
||||
<button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
|
||||
<button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
|
||||
{{ saving() ? 'Saving...' : 'Save' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<button class="footer-btn btn-green" (click)="onProgressEvents()">Progress Events</button>
|
||||
<button class="footer-btn btn-blue" (click)="onBenchmarks()">Benchmarks</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (errorMessage()) {
|
||||
<p class="error">{{ errorMessage() }}</p>
|
||||
}
|
||||
|
||||
@if (successMessage()) {
|
||||
<p class="success">{{ successMessage() }}</p>
|
||||
}
|
||||
-208
@@ -1,208 +0,0 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: 0.75rem;
|
||||
height: 40px;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: transparent;
|
||||
color: #4f46e5;
|
||||
border: 1px solid #4f46e5;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #eef2ff;
|
||||
}
|
||||
|
||||
.toolbar-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 0.875rem;
|
||||
color: #dc2626;
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
|
||||
.success {
|
||||
font-size: 0.875rem;
|
||||
color: #16a34a;
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
max-width: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: transparent;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
color: #16a34a;
|
||||
border-color: #16a34a;
|
||||
}
|
||||
|
||||
.btn-green:hover {
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
color: #2563eb;
|
||||
border-color: #2563eb;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.btn-blue:hover {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
font-family: inherit;
|
||||
font-size: 0.9375rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.field-textarea {
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions .toolbar-btn {
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
background: #4338ca;
|
||||
}
|
||||
|
||||
.close-section {
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.field-row input[type="checkbox"] {
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #dc2626;
|
||||
}
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { GoalCardFull } from './goal-card-full';
|
||||
|
||||
describe('GoalCardFull', () => {
|
||||
let component: GoalCardFull;
|
||||
let fixture: ComponentFixture<GoalCardFull>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [GoalCardFull]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(GoalCardFull);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,196 +0,0 @@
|
||||
import { Component, inject, signal, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { StudentService } from '../../../shared/services/student.service';
|
||||
import { StudentGoalItem } from '../../../shared/classes/student-goal';
|
||||
|
||||
@Component({
|
||||
selector: 'app-goal-card-full',
|
||||
imports: [FormsModule, DatePipe],
|
||||
templateUrl: './goal-card-full.html',
|
||||
styleUrl: './goal-card-full.scss',
|
||||
})
|
||||
export class GoalCardFull implements OnDestroy {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
constructor() {
|
||||
this.paramSub = this.route.paramMap.subscribe(params => {
|
||||
this.studentId = params.get('studentId')!;
|
||||
this.goalId = params.get('goalId')!;
|
||||
this.loadGoal();
|
||||
});
|
||||
}
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
private readonly studentService = inject(StudentService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
private readonly paramSub: Subscription;
|
||||
|
||||
private studentId!: string;
|
||||
private goalId!: string;
|
||||
|
||||
protected readonly loaded = signal(false);
|
||||
protected readonly errorMessage = signal<string | null>(null);
|
||||
protected readonly successMessage = signal<string | null>(null);
|
||||
protected readonly saving = signal(false);
|
||||
|
||||
// Form fields
|
||||
protected description = '';
|
||||
protected category = '';
|
||||
protected baseline = '';
|
||||
protected targetCompletionDate: string | null = null;
|
||||
protected closeDate: string | null = null;
|
||||
protected achieved: boolean | null = null;
|
||||
protected closeNotes: string | null = null;
|
||||
|
||||
// Read-only metadata
|
||||
protected progressEventCount = 0;
|
||||
protected benchmarkCount = 0;
|
||||
|
||||
// Snapshot
|
||||
private savedDescription = '';
|
||||
private savedCategory = '';
|
||||
private savedBaseline = '';
|
||||
private savedTargetCompletionDate: string | null = null;
|
||||
private savedCloseDate: string | null = null;
|
||||
private savedAchieved: boolean | null = null;
|
||||
private savedCloseNotes: string | null = null;
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// *****************************************************************
|
||||
// Returns true if form values differ from the saved snapshot.
|
||||
// *****************************************************************
|
||||
hasChanges(): boolean {
|
||||
return this.description !== this.savedDescription
|
||||
|| this.category !== this.savedCategory
|
||||
|| this.baseline !== this.savedBaseline
|
||||
|| this.targetCompletionDate !== this.savedTargetCompletionDate
|
||||
|| this.closeDate !== this.savedCloseDate
|
||||
|| this.achieved !== this.savedAchieved
|
||||
|| this.closeNotes !== this.savedCloseNotes;
|
||||
}
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
// *****************************************************************
|
||||
// Saves changes to the goal via the API.
|
||||
// *****************************************************************
|
||||
async onSave() {
|
||||
this.saving.set(true);
|
||||
this.errorMessage.set(null);
|
||||
this.successMessage.set(null);
|
||||
|
||||
const result = await this.studentService.updateGoal(this.studentId, this.goalId, {
|
||||
description: this.description,
|
||||
category: this.category,
|
||||
baseline: this.baseline,
|
||||
targetCompletionDate: this.targetCompletionDate,
|
||||
closeDate: this.closeDate,
|
||||
achieved: this.achieved,
|
||||
closeNotes: this.closeNotes,
|
||||
});
|
||||
|
||||
this.saving.set(false);
|
||||
|
||||
if (result.success) {
|
||||
this.savedDescription = this.description;
|
||||
this.savedCategory = this.category;
|
||||
this.savedBaseline = this.baseline;
|
||||
this.savedTargetCompletionDate = this.targetCompletionDate;
|
||||
this.savedCloseDate = this.closeDate;
|
||||
this.savedAchieved = this.achieved;
|
||||
this.savedCloseNotes = this.closeNotes;
|
||||
this.successMessage.set('Changes saved.');
|
||||
this.studentService.notifyDataChanged();
|
||||
} else {
|
||||
this.errorMessage.set(result.message);
|
||||
}
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Reverts form fields to the last-saved snapshot.
|
||||
// *****************************************************************
|
||||
onCancel() {
|
||||
this.description = this.savedDescription;
|
||||
this.category = this.savedCategory;
|
||||
this.baseline = this.savedBaseline;
|
||||
this.targetCompletionDate = this.savedTargetCompletionDate;
|
||||
this.closeDate = this.savedCloseDate;
|
||||
this.achieved = this.savedAchieved;
|
||||
this.closeNotes = this.savedCloseNotes;
|
||||
this.errorMessage.set(null);
|
||||
this.successMessage.set(null);
|
||||
}
|
||||
|
||||
onBack() {
|
||||
this.router.navigate(['/students', this.studentId, 'goals']);
|
||||
}
|
||||
|
||||
onProgressEvents() {
|
||||
this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'progress']);
|
||||
}
|
||||
|
||||
onBenchmarks() {
|
||||
this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'benchmarks']);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.paramSub.unsubscribe();
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
|
||||
// *****************************************************************
|
||||
// Normalizes an API date string to YYYY-MM-DD for <input type="date">.
|
||||
// *****************************************************************
|
||||
private toDateInput(value: string | null): string | null {
|
||||
if (!value) return null;
|
||||
return value.substring(0, 10);
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Loads the goal by finding it in the student's goal list.
|
||||
// *****************************************************************
|
||||
private loadGoal() {
|
||||
this.loaded.set(false);
|
||||
this.studentService.getGoalsForStudent(this.studentId).then(result => {
|
||||
if (!result.success || !result.payload) {
|
||||
this.errorMessage.set(result.message);
|
||||
return;
|
||||
}
|
||||
|
||||
const goal = result.payload.goals.find(g => g.goalId === this.goalId);
|
||||
if (!goal) {
|
||||
this.errorMessage.set('Goal not found.');
|
||||
return;
|
||||
}
|
||||
|
||||
this.description = goal.description;
|
||||
this.category = goal.category;
|
||||
this.baseline = goal.baseline;
|
||||
this.targetCompletionDate = this.toDateInput(goal.targetCompletionDate);
|
||||
this.closeDate = this.toDateInput(goal.closeDate);
|
||||
this.achieved = goal.achieved;
|
||||
this.closeNotes = goal.closeNotes;
|
||||
this.progressEventCount = goal.progressEventCount;
|
||||
this.benchmarkCount = goal.benchmarkCount;
|
||||
|
||||
this.savedDescription = goal.description;
|
||||
this.savedCategory = goal.category;
|
||||
this.savedBaseline = goal.baseline;
|
||||
this.savedTargetCompletionDate = this.toDateInput(goal.targetCompletionDate);
|
||||
this.savedCloseDate = this.toDateInput(goal.closeDate);
|
||||
this.savedAchieved = goal.achieved;
|
||||
this.savedCloseNotes = goal.closeNotes;
|
||||
this.loaded.set(true);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
<div class="card" (click)="onCardClick()">
|
||||
<div class="card-header">
|
||||
<span class="card-title">Goal: {{ goal().category }}</span>
|
||||
@if (goal().closeDate !== null) {
|
||||
<span class="closed-badge" [class.achieved]="goal().achieved === true">
|
||||
{{ goal().achieved === true ? 'Closed ✓' : 'Closed ✗' }}
|
||||
</span>
|
||||
}
|
||||
@if (goal().targetCompletionDate) {
|
||||
<span class="event-count">Target: {{ goal().targetCompletionDate | date:'mediumDate' }}</span>
|
||||
} @else {
|
||||
<span class="event-count">No target date</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
@if (goalNumber() > 0) {
|
||||
<p class="description"><strong>Goal {{ goalNumber() }}:</strong> {{ goal().description }}</p>
|
||||
} @else {
|
||||
<p class="description">{{ goal().description }}</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<button class="footer-btn btn-green" (click)="$event.stopPropagation(); onProgressEventsClick()">Progress Events</button>
|
||||
<button class="footer-btn btn-blue" (click)="$event.stopPropagation(); onBenchmarksClick()">Benchmarks</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,105 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ddd;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.event-count {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
line-clamp: 2;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: transparent;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
color: #16a34a;
|
||||
border-color: #16a34a;
|
||||
}
|
||||
|
||||
.btn-green:hover {
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
color: #2563eb;
|
||||
border-color: #2563eb;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.btn-blue:hover {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.closed-badge {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.closed-badge.achieved {
|
||||
background: #f0fdf4;
|
||||
color: #16a34a;
|
||||
border-color: #bbf7d0;
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import { Component, inject, input } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { StudentGoalItem } from '../../../shared/classes/student-goal';
|
||||
|
||||
@Component({
|
||||
selector: 'app-goal-card',
|
||||
imports: [DatePipe],
|
||||
templateUrl: './goal-card.html',
|
||||
styleUrl: './goal-card.scss',
|
||||
})
|
||||
export class GoalCard {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
private readonly router = inject(Router);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
|
||||
readonly goal = input.required<StudentGoalItem>();
|
||||
readonly goalNumber = input<number>(0);
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
// *****************************************************************
|
||||
// Navigates to the goal detail page.
|
||||
// *****************************************************************
|
||||
onCardClick() {
|
||||
const studentId = this.route.snapshot.paramMap.get('studentId')!;
|
||||
this.router.navigate(['/students', studentId, 'goals', this.goal().goalId]);
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Navigates to the benchmarks page for this goal.
|
||||
// *****************************************************************
|
||||
onBenchmarksClick() {
|
||||
const studentId = this.route.snapshot.paramMap.get('studentId')!;
|
||||
this.router.navigate(['/students', studentId, 'goals', this.goal().goalId, 'benchmarks']);
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Navigates to the progress events page for this goal.
|
||||
// *****************************************************************
|
||||
onProgressEventsClick() {
|
||||
const studentId = this.route.snapshot.paramMap.get('studentId')!;
|
||||
this.router.navigate(['/students', studentId, 'goals', this.goal().goalId, 'progress']);
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
<div class="toolbar">
|
||||
<button class="toolbar-btn back-btn" (click)="onBack()">↑ Student</button>
|
||||
<span class="toolbar-title">Goals</span>
|
||||
<span class="spacer"></span>
|
||||
<button class="toolbar-btn" (click)="onAddGoal()">+ Add a Goal</button>
|
||||
</div>
|
||||
|
||||
<!-- <img class="hero-image" src="/hurdlescropped.png" alt="Hurdles" /> -->
|
||||
|
||||
|
||||
@if (studentIdentifier()) {
|
||||
<h2 class="section-header">Student: {{ studentIdentifier() }}</h2>
|
||||
}
|
||||
|
||||
@if (showAddModal()) {
|
||||
<app-add-goal-modal [studentId]="studentId" [existingGoals]="goals()" [nextIepDate]="nextIepDate()" (goalCreated)="onGoalCreated($event)"
|
||||
(cancelled)="onModalCancelled()" />
|
||||
}
|
||||
|
||||
@if (errorMessage()) {
|
||||
<p class="error">{{ errorMessage() }}</p>
|
||||
}
|
||||
|
||||
@if (goals().length === 0 && !errorMessage()) {
|
||||
<div class="empty-state">
|
||||
<p>No goals yet.</p>
|
||||
<p>Click <strong>+ Add a Goal</strong> in the upper right to get started.</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="card-grid">
|
||||
@for (goal of goals(); track goal.goalId; let i = $index) {
|
||||
<app-goal-card [goal]="goal" [goalNumber]="i + 1" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<footer class="goal-footer">
|
||||
<span class="spacer"></span>
|
||||
<button class="toolbar-btn"> ⭐ Generate progress report</button>
|
||||
</footer>
|
||||
@@ -1,96 +0,0 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: 0.75rem;
|
||||
height: 40px;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: transparent;
|
||||
color: #4f46e5;
|
||||
border: 1px solid #4f46e5;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #eef2ff;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 0.875rem;
|
||||
color: #dc2626;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1.5rem;
|
||||
color: #555;
|
||||
font-size: 0.9375rem;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: start;
|
||||
gap: 1rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
height: 48px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
import { Component, inject, signal, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { StudentGoalItem } from '../../../shared/classes/student-goal';
|
||||
import { StudentService } from '../../../shared/services/student.service';
|
||||
import { GoalCard } from '../goal-card/goal-card';
|
||||
import { AddGoalModal } from '../add-goal-modal/add-goal-modal';
|
||||
|
||||
@Component({
|
||||
selector: 'app-goal-list',
|
||||
imports: [GoalCard, AddGoalModal],
|
||||
templateUrl: './goal-list.html',
|
||||
styleUrl: './goal-list.scss',
|
||||
})
|
||||
export class GoalList implements OnDestroy {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
constructor() {
|
||||
this.paramSub = this.route.paramMap.subscribe(params => {
|
||||
this.studentId = params.get('studentId')!;
|
||||
this.loadGoals();
|
||||
});
|
||||
}
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
private readonly studentService = inject(StudentService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
private readonly paramSub: Subscription;
|
||||
|
||||
protected studentId!: string;
|
||||
protected readonly studentIdentifier = signal<string | null>(null);
|
||||
protected readonly nextIepDate = signal<string | null>(null);
|
||||
protected readonly goals = signal<StudentGoalItem[]>([]);
|
||||
protected readonly showAddModal = signal(false);
|
||||
protected readonly errorMessage = signal<string | null>(null);
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
onAddGoal() {
|
||||
this.showAddModal.set(true);
|
||||
}
|
||||
|
||||
onGoalCreated(goal: StudentGoalItem) {
|
||||
this.goals.update(list => [...list, goal]);
|
||||
this.showAddModal.set(false);
|
||||
this.studentService.notifyDataChanged();
|
||||
this.router.navigate(['/students', this.studentId, 'goals', goal.goalId]);
|
||||
}
|
||||
|
||||
onModalCancelled() {
|
||||
this.showAddModal.set(false);
|
||||
}
|
||||
|
||||
onBack() {
|
||||
this.router.navigate(['/students', this.studentId]);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.paramSub.unsubscribe();
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
|
||||
// *****************************************************************
|
||||
// Loads goals for the student from the service.
|
||||
// *****************************************************************
|
||||
private loadGoals() {
|
||||
this.studentService.getStudentById(this.studentId).then(studentResult => {
|
||||
if (studentResult.success && studentResult.payload) {
|
||||
const iep = studentResult.payload.nextIepDate;
|
||||
this.nextIepDate.set(iep ? String(iep).substring(0, 10) : null);
|
||||
}
|
||||
});
|
||||
|
||||
this.studentService.getGoalsForStudent(this.studentId).then(data => {
|
||||
if (!data.success) {
|
||||
this.errorMessage.set(data.message);
|
||||
} else {
|
||||
this.studentIdentifier.set(data.payload?.studentIdentifier ?? null);
|
||||
this.goals.set(data.payload?.goals ?? []);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
<div class="toolbar">
|
||||
<button class="toolbar-btn back-btn" (click)="onBack()">↑ Progress Events</button>
|
||||
<span class="toolbar-title">{{ isNew() ? 'New Progress Event' : 'Edit Progress Event' }}</span>
|
||||
<span class="spacer"></span>
|
||||
</div>
|
||||
|
||||
@if (errorMessage()) {
|
||||
<p class="error">{{ errorMessage() }}</p>
|
||||
}
|
||||
|
||||
@if (loaded()) {
|
||||
<div class="detail-card">
|
||||
<div class="field">
|
||||
<span class="field-label">Goal: {{ goalCategory }}</span>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="field-label" for="content">Notes</label>
|
||||
<textarea id="content" class="field-input field-textarea" [(ngModel)]="content" rows="5"
|
||||
placeholder="Enter progress event notes..."></textarea>
|
||||
</div>
|
||||
|
||||
@if (benchmarkItems().length > 0) {
|
||||
<div class="field">
|
||||
<span class="field-label">Associated Benchmarks</span>
|
||||
<div class="benchmark-checks">
|
||||
@for (bm of benchmarkItems(); track bm.benchmarkId) {
|
||||
<label class="check-item">
|
||||
<input type="checkbox" [checked]="bm.checked" (change)="onToggleBenchmark(bm.benchmarkId)" />
|
||||
{{ bm.label }}
|
||||
</label>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!isNew()) {
|
||||
<div class="metadata">
|
||||
@if (createdByName) {
|
||||
<span class="meta-item">Created by: {{ createdByName }}</span>
|
||||
}
|
||||
@if (createdAt) {
|
||||
<span class="meta-item">Created: {{ createdAt | date:'medium' }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div class="actions">
|
||||
<button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
|
||||
<button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
|
||||
{{ saving() ? 'Saving...' : 'Save' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (successMessage()) {
|
||||
<p class="success">{{ successMessage() }}</p>
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: 0.75rem;
|
||||
height: 40px;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: transparent;
|
||||
color: #4f46e5;
|
||||
border: 1px solid #4f46e5;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #eef2ff;
|
||||
}
|
||||
|
||||
.toolbar-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 0.875rem;
|
||||
color: #dc2626;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.success {
|
||||
font-size: 0.875rem;
|
||||
color: #16a34a;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9375rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.field-textarea {
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
.benchmark-checks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.check-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9375rem;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.check-item input[type="checkbox"] {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
accent-color: #4f46e5;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 0.8125rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions .toolbar-btn {
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
background: #4338ca;
|
||||
}
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProgressEdit } from './progress-edit';
|
||||
|
||||
describe('ProgressEdit', () => {
|
||||
let component: ProgressEdit;
|
||||
let fixture: ComponentFixture<ProgressEdit>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ProgressEdit]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ProgressEdit);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,228 +0,0 @@
|
||||
import { Component, inject, signal, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { StudentService } from '../../../shared/services/student.service';
|
||||
import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
|
||||
|
||||
interface BenchmarkCheckItem {
|
||||
benchmarkId: string;
|
||||
label: string;
|
||||
checked: boolean;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-progress-edit',
|
||||
imports: [FormsModule, DatePipe],
|
||||
templateUrl: './progress-edit.html',
|
||||
styleUrl: './progress-edit.scss',
|
||||
})
|
||||
export class ProgressEdit implements OnDestroy {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
constructor() {
|
||||
this.paramSub = this.route.paramMap.subscribe(params => {
|
||||
this.studentId = params.get('studentId')!;
|
||||
this.goalId = params.get('goalId')!;
|
||||
this.progressEventId = params.get('progressEventId') ?? null;
|
||||
this.loadData();
|
||||
});
|
||||
}
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
private readonly studentService = inject(StudentService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
private readonly paramSub: Subscription;
|
||||
|
||||
private studentId!: string;
|
||||
private goalId!: string;
|
||||
private progressEventId: string | null = null;
|
||||
|
||||
protected readonly loaded = signal(false);
|
||||
protected readonly isNew = signal(false);
|
||||
protected readonly errorMessage = signal<string | null>(null);
|
||||
protected readonly successMessage = signal<string | null>(null);
|
||||
protected readonly saving = signal(false);
|
||||
|
||||
// Form fields
|
||||
protected content = '';
|
||||
private savedContent = '';
|
||||
|
||||
// Benchmark checkboxes
|
||||
protected benchmarkItems = signal<BenchmarkCheckItem[]>([]);
|
||||
private savedBenchmarkSelections: Set<string> = new Set();
|
||||
|
||||
// Read-only metadata
|
||||
protected goalCategory = '';
|
||||
protected createdByName = '';
|
||||
protected createdAt: Date | null = null;
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// *****************************************************************
|
||||
// Returns true if the form has unsaved changes.
|
||||
// *****************************************************************
|
||||
hasChanges(): boolean {
|
||||
if (this.content !== this.savedContent) return true;
|
||||
const current = new Set(this.benchmarkItems().filter(b => b.checked).map(b => b.benchmarkId));
|
||||
if (current.size !== this.savedBenchmarkSelections.size) return true;
|
||||
for (const id of current) {
|
||||
if (!this.savedBenchmarkSelections.has(id)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
// *****************************************************************
|
||||
// Saves the progress event (create or update) and any benchmark
|
||||
// associations based on the checked checkboxes.
|
||||
// *****************************************************************
|
||||
async onSave() {
|
||||
this.saving.set(true);
|
||||
this.errorMessage.set(null);
|
||||
this.successMessage.set(null);
|
||||
|
||||
const checkedIds = this.benchmarkItems()
|
||||
.filter(b => b.checked)
|
||||
.map(b => b.benchmarkId);
|
||||
|
||||
if (this.isNew()) {
|
||||
const result = await this.studentService.addProgressEvent(
|
||||
this.studentId, this.goalId, this.content.trim(),
|
||||
checkedIds.length > 0 ? checkedIds : undefined
|
||||
);
|
||||
this.saving.set(false);
|
||||
if (result.success) {
|
||||
this.successMessage.set('Progress event created.');
|
||||
this.savedContent = this.content;
|
||||
this.savedBenchmarkSelections = new Set(checkedIds);
|
||||
this.studentService.notifyDataChanged();
|
||||
if (result.payload?.progressEventId) {
|
||||
this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'progress', result.payload.progressEventId]);
|
||||
}
|
||||
} else {
|
||||
this.errorMessage.set(result.message);
|
||||
}
|
||||
} else {
|
||||
const result = await this.studentService.updateProgressEvent(
|
||||
this.studentId, this.progressEventId!, this.content.trim(), checkedIds
|
||||
);
|
||||
this.saving.set(false);
|
||||
if (result.success) {
|
||||
this.savedContent = this.content;
|
||||
this.savedBenchmarkSelections = new Set(checkedIds);
|
||||
this.successMessage.set('Changes saved.');
|
||||
} else {
|
||||
this.errorMessage.set(result.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Reverts the form to the last-saved state.
|
||||
// *****************************************************************
|
||||
onCancel() {
|
||||
this.content = this.savedContent;
|
||||
this.benchmarkItems.update(items =>
|
||||
items.map(b => ({ ...b, checked: this.savedBenchmarkSelections.has(b.benchmarkId) }))
|
||||
);
|
||||
this.errorMessage.set(null);
|
||||
this.successMessage.set(null);
|
||||
}
|
||||
|
||||
onBack() {
|
||||
this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'progress']);
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Toggles a benchmark checkbox.
|
||||
// *****************************************************************
|
||||
onToggleBenchmark(benchmarkId: string) {
|
||||
this.benchmarkItems.update(items =>
|
||||
items.map(b => b.benchmarkId === benchmarkId ? { ...b, checked: !b.checked } : b)
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.paramSub.unsubscribe();
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
|
||||
// *****************************************************************
|
||||
// Loads all data needed for the form: goal category, benchmarks,
|
||||
// and (for edit mode) the existing event content + associations.
|
||||
// *****************************************************************
|
||||
private async loadData() {
|
||||
this.loaded.set(false);
|
||||
|
||||
// Load goal category
|
||||
const goalsResult = await this.studentService.getGoalsForStudent(this.studentId);
|
||||
if (goalsResult.success && goalsResult.payload) {
|
||||
const goal = goalsResult.payload.goals.find(g => g.goalId === this.goalId);
|
||||
this.goalCategory = goal?.category ?? '';
|
||||
}
|
||||
|
||||
// Load benchmarks for this goal
|
||||
const bmResult = await this.studentService.getBenchmarksForStudent(this.studentId);
|
||||
const goalBenchmarks = (bmResult.success && bmResult.payload)
|
||||
? bmResult.payload.benchmarks.filter(b => b.goalId === this.goalId)
|
||||
: [];
|
||||
|
||||
if (!this.progressEventId) {
|
||||
// New event mode
|
||||
this.isNew.set(true);
|
||||
this.content = '';
|
||||
this.savedContent = '';
|
||||
this.savedBenchmarkSelections = new Set();
|
||||
this.benchmarkItems.set(goalBenchmarks.map(b => ({
|
||||
benchmarkId: b.benchmarkId,
|
||||
label: b.shortName || b.benchmark,
|
||||
checked: false,
|
||||
})));
|
||||
this.loaded.set(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Edit mode — load existing event
|
||||
this.isNew.set(false);
|
||||
const eventsResult = await this.studentService.getProgressEventsForGoal(this.goalId);
|
||||
if (!eventsResult.success || !eventsResult.payload) {
|
||||
this.errorMessage.set(eventsResult.message);
|
||||
this.loaded.set(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const event = eventsResult.payload.find(e => e.progressEventId === this.progressEventId);
|
||||
if (!event) {
|
||||
this.errorMessage.set('Progress event not found.');
|
||||
this.loaded.set(true);
|
||||
return;
|
||||
}
|
||||
|
||||
this.content = event.content;
|
||||
this.savedContent = event.content;
|
||||
this.createdByName = event.createdByName;
|
||||
this.createdAt = event.createdAt;
|
||||
|
||||
// Load existing benchmark associations
|
||||
const assocResult = await this.studentService.getProgressEventBenchmarks(this.progressEventId!);
|
||||
const associatedIds = new Set(assocResult.success && assocResult.payload ? assocResult.payload : []);
|
||||
this.savedBenchmarkSelections = new Set(associatedIds);
|
||||
|
||||
this.benchmarkItems.set(goalBenchmarks.map(b => ({
|
||||
benchmarkId: b.benchmarkId,
|
||||
label: b.shortName || b.benchmark,
|
||||
checked: associatedIds.has(b.benchmarkId),
|
||||
})));
|
||||
|
||||
this.loaded.set(true);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
<div class="card">
|
||||
<p class="content">{{ event().content }}</p>
|
||||
<div class="action-icons">
|
||||
<button class="edit-btn" (click)="onEdit()">Edit</button>
|
||||
<!-- <button class="icon-btn" title="Delete">🗑</button> -->
|
||||
</div>
|
||||
<span class="author">{{ event().createdByName }}</span>
|
||||
<span class="date">{{ event().createdAt | date:'MMM d, y' }}</span>
|
||||
</div>
|
||||
@@ -1,63 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
padding: 1.25rem 1.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
margin: 0;
|
||||
font-size: 0.9375rem;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.action-icons {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-self: start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.author {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.date {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
font-size: 0.8125rem;
|
||||
color: #888;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
padding: 0.25rem 0.625rem;
|
||||
background: transparent;
|
||||
color: #4f46e5;
|
||||
border: 1px solid #4f46e5;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edit-btn:hover {
|
||||
background: #eef2ff;
|
||||
}
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProgressItem } from './progress-item';
|
||||
|
||||
describe('ProgressItem', () => {
|
||||
let component: ProgressItem;
|
||||
let fixture: ComponentFixture<ProgressItem>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ProgressItem]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ProgressItem);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,33 +0,0 @@
|
||||
import { Component, inject, input } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
|
||||
|
||||
@Component({
|
||||
selector: 'app-progress-item',
|
||||
imports: [DatePipe],
|
||||
templateUrl: './progress-item.html',
|
||||
styleUrl: './progress-item.scss',
|
||||
})
|
||||
export class ProgressItem {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
private readonly router = inject(Router);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
readonly event = input.required<ProgressEventDto>();
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
onEdit() {
|
||||
this.router.navigate([this.event().progressEventId], { relativeTo: this.route });
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
<div class="toolbar">
|
||||
<button class="toolbar-btn back-btn" (click)="onBack()">↑ Goal</button>
|
||||
<span class="toolbar-title">Progress Events</span>
|
||||
<span class="spacer"></span>
|
||||
<button class="toolbar-btn" (click)="onAddProgressEvent()">+ Add Progress Event</button>
|
||||
</div>
|
||||
|
||||
<!-- <img class="hero-image" src="/slalomcropped.png" alt="Slalom" /> -->
|
||||
|
||||
@if (studentIdentifier() && goalCategory()) {
|
||||
<div class="header-row">
|
||||
<h2 class="section-header">
|
||||
Student: {{ studentIdentifier() }} Goal: {{ goalCategory() }}
|
||||
@if (isFiltered()) {
|
||||
<span class="filter-count">(showing {{ filteredEvents().length }} of {{ events().length }})</span>
|
||||
}
|
||||
</h2>
|
||||
<div class="search-box">
|
||||
<input type="text" class="search-input" placeholder="Search..." [value]="rawSearchText()"
|
||||
(input)="onSearchInput($any($event.target).value)" />
|
||||
@if (rawSearchText()) {
|
||||
<button class="clear-btn" (click)="onClearSearch()">×</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (errorMessage()) {
|
||||
<p class="error">{{ errorMessage() }}</p>
|
||||
}
|
||||
|
||||
@if (filteredEvents().length === 0 && !errorMessage()) {
|
||||
<p class="empty-state">No progress events recorded yet. Click <strong>+ Add Progress Event</strong> to get started.</p>
|
||||
} @else {
|
||||
<div class="event-list">
|
||||
@for (evt of filteredEvents(); track evt.progressEventId) {
|
||||
<app-progress-item [event]="evt" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@@ -1,139 +0,0 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
max-width: 50%;
|
||||
max-height: 100px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: 0.75rem;
|
||||
height: 40px;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: transparent;
|
||||
color: #4f46e5;
|
||||
border: 1px solid #4f46e5;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #eef2ff;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
padding-right: calc(0.75rem + 17px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-count {
|
||||
font-weight: 400;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 0.375rem 2rem 0.375rem 0.75rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
width: 200px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 0.375rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1.125rem;
|
||||
color: #888;
|
||||
line-height: 1;
|
||||
padding: 0 0.125rem;
|
||||
}
|
||||
|
||||
.clear-btn:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 0.875rem;
|
||||
color: #dc2626;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: #888;
|
||||
font-size: 0.9375rem;
|
||||
margin: 2rem auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.event-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
overflow-y: auto;
|
||||
scrollbar-gutter: stable;
|
||||
flex: 1;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProgressList } from './progress-list';
|
||||
|
||||
describe('ProgressList', () => {
|
||||
let component: ProgressList;
|
||||
let fixture: ComponentFixture<ProgressList>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ProgressList]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ProgressList);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,131 +0,0 @@
|
||||
import { Component, computed, inject, signal, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { debounceTime } from 'rxjs/operators';
|
||||
import { ProgressItem } from '../progress-item/progress-item';
|
||||
import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
|
||||
import { StudentService } from '../../../shared/services/student.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-progress-list',
|
||||
imports: [ProgressItem],
|
||||
templateUrl: './progress-list.html',
|
||||
styleUrl: './progress-list.scss',
|
||||
})
|
||||
export class ProgressList implements OnDestroy {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
constructor() {
|
||||
this.studentId = this.route.snapshot.paramMap.get('studentId')!;
|
||||
this.goalId = this.route.snapshot.paramMap.get('goalId')!;
|
||||
this.loadEvents();
|
||||
this.loadGoalCategory();
|
||||
|
||||
this.searchInput$.pipe(debounceTime(300)).subscribe(term => {
|
||||
this.searchTerm.set(term);
|
||||
});
|
||||
}
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
private readonly studentService = inject(StudentService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
private readonly studentId: string;
|
||||
private readonly goalId: string;
|
||||
private readonly searchInput$ = new Subject<string>();
|
||||
|
||||
protected readonly studentIdentifier = signal<string | null>(null);
|
||||
protected readonly goalCategory = signal<string | null>(null);
|
||||
protected readonly events = signal<ProgressEventDto[]>([]);
|
||||
protected readonly errorMessage = signal<string | null>(null);
|
||||
protected readonly rawSearchText = signal('');
|
||||
protected readonly searchTerm = signal('');
|
||||
protected readonly showAddModal = signal(false);
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// *****************************************************************
|
||||
// Returns events filtered by the debounced search term. Matches
|
||||
// against the event content (case-insensitive). Only filters when
|
||||
// the term is at least 2 characters.
|
||||
// *****************************************************************
|
||||
protected readonly filteredEvents = computed(() => {
|
||||
const term = this.searchTerm().trim().toLowerCase();
|
||||
if (term.length < 2) return this.events();
|
||||
return this.events().filter(e => e.content.toLowerCase().includes(term));
|
||||
});
|
||||
|
||||
protected readonly isFiltered = computed(() => {
|
||||
return this.searchTerm().trim().length >= 2 && this.filteredEvents().length !== this.events().length;
|
||||
});
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
onAddProgressEvent() {
|
||||
this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'progress', 'new']);
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Navigates back to the parent goal detail.
|
||||
// *****************************************************************
|
||||
onBack() {
|
||||
this.router.navigate(['/students', this.studentId, 'goals', this.goalId]);
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Pushes the raw input value into the debounce stream.
|
||||
// *****************************************************************
|
||||
onSearchInput(value: string) {
|
||||
this.rawSearchText.set(value);
|
||||
this.searchInput$.next(value);
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Clears the search box and resets the filter.
|
||||
// *****************************************************************
|
||||
onClearSearch() {
|
||||
this.rawSearchText.set('');
|
||||
this.searchTerm.set('');
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.searchInput$.complete();
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
|
||||
// *****************************************************************
|
||||
// Loads progress events for the given goal from the API, sorted
|
||||
// newest-first by createdAt.
|
||||
// *****************************************************************
|
||||
private loadEvents() {
|
||||
this.studentService.getProgressEventsForGoal(this.goalId).then(result => {
|
||||
if (!result.success) {
|
||||
this.errorMessage.set(result.message);
|
||||
} else {
|
||||
const sorted = (result.payload ?? [])
|
||||
.slice()
|
||||
.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
this.events.set(sorted);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Loads the goal category from the student's goal list so the heading
|
||||
// can display "Progress for <goal category>".
|
||||
// *****************************************************************
|
||||
private loadGoalCategory() {
|
||||
this.studentService.getGoalsForStudent(this.studentId).then(result => {
|
||||
if (!result.success || !result.payload) return;
|
||||
this.studentIdentifier.set(result.payload.studentIdentifier);
|
||||
const goal = result.payload.goals.find(g => g.goalId === this.goalId);
|
||||
this.goalCategory.set(goal?.category ?? null);
|
||||
});
|
||||
}
|
||||
}
|
||||
-20
@@ -1,20 +0,0 @@
|
||||
@for (node of nodes(); track node.label) {
|
||||
<div class="node-row" [style.padding-left]="indent()">
|
||||
@if (hasToggle(node)) {
|
||||
<span class="toggle-indicator" (click)="onToggle(node, $event)">{{ node.expanded ? '−' : '+' }}</span>
|
||||
} @else {
|
||||
<span class="toggle-placeholder"></span>
|
||||
}
|
||||
@if (node.routerLink) {
|
||||
<a class="node-label" [routerLink]="node.routerLink" routerLinkActive="active"
|
||||
[routerLinkActiveOptions]="{ exact: true }">{{ node.label }}</a>
|
||||
} @else if (hasToggle(node)) {
|
||||
<span class="node-label clickable" (click)="onToggle(node, $event)">{{ node.label }}</span>
|
||||
} @else {
|
||||
<span class="node-label">{{ node.label }}</span>
|
||||
}
|
||||
</div>
|
||||
@if (node.expanded && node.children) {
|
||||
<app-sidebar-tree-node [nodes]="node.children" [depth]="depth() + 1" />
|
||||
}
|
||||
}
|
||||
-60
@@ -1,60 +0,0 @@
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.node-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.5rem 1rem;
|
||||
min-height: 1.75rem;
|
||||
}
|
||||
|
||||
.node-row:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.node-row:has(.node-label.active) {
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
.toggle-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 2px;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-placeholder {
|
||||
width: calc(1rem + 2px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
flex: 1;
|
||||
font-size: 0.8125rem;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.node-label.clickable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.node-label.active {
|
||||
font-weight: 600;
|
||||
color: #4f46e5;
|
||||
}
|
||||
-67
@@ -1,67 +0,0 @@
|
||||
import { Component, input } from '@angular/core';
|
||||
import { RouterLink, RouterLinkActive } from '@angular/router';
|
||||
import { SidebarNode } from '../../../shared/classes/sidebar-node';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar-tree-node',
|
||||
imports: [RouterLink, RouterLinkActive, SidebarTreeNode],
|
||||
templateUrl: './sidebar-tree-node.html',
|
||||
styleUrl: './sidebar-tree-node.scss',
|
||||
})
|
||||
export class SidebarTreeNode {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
readonly nodes = input.required<SidebarNode[]>();
|
||||
readonly depth = input<number>(0);
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// *****************************************************************
|
||||
// Computed indentation in rem based on depth.
|
||||
// *****************************************************************
|
||||
indent(): string {
|
||||
return (1 + this.depth() * 1.5) + 'rem';
|
||||
}
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// *****************************************************************
|
||||
// Returns true if a node should show the +/- toggle.
|
||||
// A node is expandable if it has static children, or has a
|
||||
// loadChildren function with a non-zero childCount.
|
||||
// *****************************************************************
|
||||
hasToggle(node: SidebarNode): boolean {
|
||||
if (node.children && node.children.length > 0) return true;
|
||||
if (node.loadChildren && node.childCount !== 0) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
// *****************************************************************
|
||||
// Toggles a node's expanded state. On first expand of a lazy node,
|
||||
// calls loadChildren and caches the result in node.children.
|
||||
// *****************************************************************
|
||||
async onToggle(node: SidebarNode, event: Event) {
|
||||
if (!this.hasToggle(node)) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (node.expanded) {
|
||||
node.expanded = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.loadChildren && !node.children) {
|
||||
node.children = await node.loadChildren();
|
||||
}
|
||||
|
||||
node.expanded = true;
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
}
|
||||
-45
@@ -1,45 +0,0 @@
|
||||
<div class="toolbar">
|
||||
<button class="toolbar-btn back-btn" (click)="onBack()">↑ Students</button>
|
||||
<span class="toolbar-title">Student Detail</span>
|
||||
<span class="spacer"></span>
|
||||
</div>
|
||||
|
||||
@if (errorMessage()) {
|
||||
<p class="error">{{ errorMessage() }}</p>
|
||||
}
|
||||
|
||||
|
||||
|
||||
@if (loaded()) {
|
||||
<div class="detail-card">
|
||||
<div class="detail-card-header">
|
||||
<span class="detail-card-title">Student</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-card-body">
|
||||
<div class="field">
|
||||
<label class="field-label" for="identifier">Name</label>
|
||||
<input id="identifier" class="field-input" type="text" [(ngModel)]="identifier" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="field-label" for="nextIepDate">Next IEP Date</label>
|
||||
<input id="nextIepDate" class="field-input" type="date" [(ngModel)]="nextIepDate" />
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
|
||||
<button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
|
||||
{{ saving() ? 'Saving...' : 'Save' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<button class="footer-btn btn-dark-green" (click)="onGoals()">Goals</button>
|
||||
<span class="spacer"></span>
|
||||
@if (successMessage()) {
|
||||
<span class="success-label" [class.fade-out]="fading()">{{ successMessage() }}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
-180
@@ -1,180 +0,0 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: 0.75rem;
|
||||
height: 40px;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: transparent;
|
||||
color: #4f46e5;
|
||||
border: 1px solid #4f46e5;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #eef2ff;
|
||||
}
|
||||
|
||||
.toolbar-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 0.875rem;
|
||||
color: #dc2626;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.detail-card {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
max-width: 480px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.detail-card-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.detail-card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
font-size: 0.9375rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9375rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: transparent;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-dark-green {
|
||||
color: #15803d;
|
||||
border-color: #15803d;
|
||||
}
|
||||
|
||||
.btn-dark-green:hover {
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.success-label {
|
||||
font-size: 0.8125rem;
|
||||
color: #16a34a;
|
||||
opacity: 1;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.success-label.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions .toolbar-btn {
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
background: #4338ca;
|
||||
}
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { StudentCardFull } from './student-card-full';
|
||||
|
||||
describe('StudentCardFull', () => {
|
||||
let component: StudentCardFull;
|
||||
let fixture: ComponentFixture<StudentCardFull>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [StudentCardFull]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(StudentCardFull);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
-160
@@ -1,160 +0,0 @@
|
||||
import { Component, inject, signal, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { StudentService } from '../../../shared/services/student.service';
|
||||
import { StudentCardDto } from '../../../shared/classes/student-card.dto';
|
||||
|
||||
@Component({
|
||||
selector: 'app-student-card-full',
|
||||
imports: [FormsModule],
|
||||
templateUrl: './student-card-full.html',
|
||||
styleUrl: './student-card-full.scss',
|
||||
})
|
||||
export class StudentCardFull implements OnDestroy {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
constructor() {
|
||||
this.paramSub = this.route.paramMap.subscribe(params => {
|
||||
this.studentId = params.get('studentId')!;
|
||||
this.loadStudent();
|
||||
});
|
||||
}
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
private readonly studentService = inject(StudentService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
private readonly paramSub: Subscription;
|
||||
|
||||
private studentId!: string;
|
||||
|
||||
protected readonly errorMessage = signal<string | null>(null);
|
||||
protected readonly successMessage = signal<string | null>(null);
|
||||
protected readonly saving = signal(false);
|
||||
protected readonly loaded = signal(false);
|
||||
protected readonly fading = signal(false);
|
||||
private successTimer: any = null;
|
||||
|
||||
// Form fields — always editable
|
||||
protected identifier = '';
|
||||
protected nextIepDate = '';
|
||||
|
||||
// Snapshot of last-saved values for cancel
|
||||
private savedIdentifier = '';
|
||||
private savedNextIepDate = '';
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// *****************************************************************
|
||||
// Returns true if form values differ from the saved snapshot.
|
||||
// *****************************************************************
|
||||
hasChanges(): boolean {
|
||||
return this.identifier !== this.savedIdentifier
|
||||
|| this.nextIepDate !== this.savedNextIepDate;
|
||||
}
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
// *****************************************************************
|
||||
// Saves changes to the student via the API.
|
||||
// *****************************************************************
|
||||
async onSave() {
|
||||
this.saving.set(true);
|
||||
this.errorMessage.set(null);
|
||||
this.successMessage.set(null);
|
||||
|
||||
const result = await this.studentService.updateStudent(this.studentId, {
|
||||
identifier: this.identifier,
|
||||
nextIepDate: this.nextIepDate || null,
|
||||
});
|
||||
|
||||
this.saving.set(false);
|
||||
|
||||
if (result.success) {
|
||||
this.savedIdentifier = this.identifier;
|
||||
this.savedNextIepDate = this.nextIepDate;
|
||||
this.showSuccessTemporarily('Changes saved.');
|
||||
this.studentService.notifyDataChanged();
|
||||
} else {
|
||||
this.errorMessage.set(result.message);
|
||||
}
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Reverts form fields to the last-saved snapshot.
|
||||
// *****************************************************************
|
||||
onCancel() {
|
||||
this.identifier = this.savedIdentifier;
|
||||
this.nextIepDate = this.savedNextIepDate;
|
||||
this.errorMessage.set(null);
|
||||
this.successMessage.set(null);
|
||||
}
|
||||
|
||||
onBack() {
|
||||
this.router.navigate(['/students']);
|
||||
}
|
||||
|
||||
onGoals() {
|
||||
this.router.navigate(['/students', this.studentId, 'goals']);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.paramSub.unsubscribe();
|
||||
if (this.successTimer) clearTimeout(this.successTimer);
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
|
||||
// *****************************************************************
|
||||
// Shows a success message for 4 seconds, then fades it out over 1s.
|
||||
// *****************************************************************
|
||||
private showSuccessTemporarily(message: string) {
|
||||
if (this.successTimer) clearTimeout(this.successTimer);
|
||||
this.fading.set(false);
|
||||
this.successMessage.set(message);
|
||||
|
||||
this.successTimer = setTimeout(() => {
|
||||
this.fading.set(true);
|
||||
this.successTimer = setTimeout(() => {
|
||||
this.successMessage.set(null);
|
||||
this.fading.set(false);
|
||||
}, 1000);
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Loads the student by ID and populates form fields.
|
||||
// *****************************************************************
|
||||
private loadStudent() {
|
||||
if (!this.loaded()) {
|
||||
this.loaded.set(false);
|
||||
}
|
||||
this.studentService.getStudentById(this.studentId).then(result => {
|
||||
if (result.success && result.payload) {
|
||||
const s = result.payload;
|
||||
this.identifier = s.identifier;
|
||||
this.nextIepDate = this.toDateInput(s.nextIepDate);
|
||||
|
||||
this.savedIdentifier = this.identifier;
|
||||
this.savedNextIepDate = this.nextIepDate;
|
||||
this.loaded.set(true);
|
||||
} else {
|
||||
this.errorMessage.set(result.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Converts a Date to a YYYY-MM-DD string for date input binding.
|
||||
// *****************************************************************
|
||||
private toDateInput(date: Date | null): string {
|
||||
if (!date) return '';
|
||||
const d = new Date(date);
|
||||
return d.toISOString().split('T')[0];
|
||||
}
|
||||
}
|
||||
-100
@@ -1,100 +0,0 @@
|
||||
<div class="toolbar">
|
||||
<h1 class="page-title">{{ showAll() ? 'All Students' : 'My Students' }} - <span class="student-count">{{ students().length }}</span></h1>
|
||||
<div class="toolbar-right">
|
||||
<label class="scope-toggle" title="Toggle between My Students and All Students">
|
||||
<span class="scope-label">All Students</span>
|
||||
<span class="toggle-track" [class.active]="showAll()">
|
||||
<span class="toggle-thumb"></span>
|
||||
</span>
|
||||
<input type="checkbox" [checked]="showAll()" (change)="onToggleScope()" hidden>
|
||||
</label>
|
||||
<div class="view-toggle">
|
||||
<button
|
||||
class="toggle-btn"
|
||||
[class.active]="displayMode() === 'card'"
|
||||
(click)="setDisplayMode('card')"
|
||||
title="Card view">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<rect x="3" y="3" width="8" height="8" rx="1"/>
|
||||
<rect x="13" y="3" width="8" height="8" rx="1"/>
|
||||
<rect x="3" y="13" width="8" height="8" rx="1"/>
|
||||
<rect x="13" y="13" width="8" height="8" rx="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="toggle-btn"
|
||||
[class.active]="displayMode() === 'list'"
|
||||
(click)="setDisplayMode('list')"
|
||||
title="List view">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<rect x="3" y="5" width="18" height="2" rx="1"/>
|
||||
<rect x="3" y="11" width="18" height="2" rx="1"/>
|
||||
<rect x="3" y="17" width="18" height="2" rx="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button class="toolbar-btn" (click)="onAddStudent()">+ Add a Student</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (showAddModal()) {
|
||||
<app-add-student-modal
|
||||
(studentCreated)="onStudentCreated($event)"
|
||||
(cancelled)="onModalCancelled()"
|
||||
/>
|
||||
}
|
||||
|
||||
@if (displayMode() === 'card') {
|
||||
@if (loaded() && students().length === 0) {
|
||||
<div class="empty-state">
|
||||
<p>You don't have any students entered yet.</p>
|
||||
<p>Click <strong>+ Add a Student</strong> in the upper right to get started.</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="card-grid">
|
||||
@for (student of students(); track student.studentId) {
|
||||
<app-student-card [student]="student" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
} @else {
|
||||
@if (loaded() && students().length === 0) {
|
||||
<div class="empty-state">
|
||||
<p>You don't have any students entered yet.</p>
|
||||
<p>Click <strong>+ Add a Student</strong> in the upper right to get started.</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="student-list">
|
||||
<div class="list-header">
|
||||
<span class="col-name">Student</span>
|
||||
@if (showAll()) {
|
||||
<span class="col-owner">Owner</span>
|
||||
}
|
||||
<span class="col-iep">IEP Date</span>
|
||||
<span class="col-entry">Last Entry</span>
|
||||
<span class="col-stat">Goals</span>
|
||||
<span class="col-stat">Events</span>
|
||||
<span class="col-stat">Benchmarks</span>
|
||||
</div>
|
||||
@for (student of students(); track student.studentId) {
|
||||
<div class="list-row" [routerLink]="['/students', student.studentId]">
|
||||
<span class="col-name">🎓 {{ student.identifier }}</span>
|
||||
@if (showAll()) {
|
||||
<span class="col-owner">{{ student.ownerName }}</span>
|
||||
}
|
||||
<span class="col-iep">{{ student.nextIepDate | date:'M/d/yy' }}</span>
|
||||
<span class="col-entry">
|
||||
@if (student.lastEntryDate) {
|
||||
{{ student.lastEntryDate | date:'M/d/yy' }}
|
||||
} @else {
|
||||
<span class="no-entry">No entries yet</span>
|
||||
}
|
||||
</span>
|
||||
<span class="col-stat">{{ student.goalCount }}</span>
|
||||
<span class="col-stat">{{ student.progressEventCount }}</span>
|
||||
<span class="col-stat">{{ student.benchmarkCount }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
-210
@@ -1,210 +0,0 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #eef2ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-left: 1px solid #d1d5db;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: transparent;
|
||||
color: #4f46e5;
|
||||
border: 1px solid #4f46e5;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #eef2ff;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 1rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.student-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #f9fafb;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.625rem 1rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f5f3ff;
|
||||
}
|
||||
}
|
||||
|
||||
.col-name {
|
||||
flex: 2;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.col-iep,
|
||||
.col-entry {
|
||||
flex: 1;
|
||||
color: #4b5563;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.col-stat {
|
||||
flex: 0 0 80px;
|
||||
text-align: center;
|
||||
color: #374151;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.no-entry {
|
||||
color: #9ca3af;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1.5rem;
|
||||
color: #555;
|
||||
font-size: 0.9375rem;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.scope-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: #4b5563;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.toggle-track {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background: #d1d5db;
|
||||
border-radius: 10px;
|
||||
padding: 2px;
|
||||
transition: background 0.2s;
|
||||
|
||||
&.active {
|
||||
background: #4f46e5;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s;
|
||||
|
||||
.active > & {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
}
|
||||
|
||||
.col-owner {
|
||||
flex: 1;
|
||||
color: #4b5563;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
-103
@@ -1,103 +0,0 @@
|
||||
import { Component, inject, signal } from '@angular/core';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { StudentCard } from '../student-card/student-card';
|
||||
import { AddStudentModal } from '../add-student-modal/add-student-modal';
|
||||
import { DummyStudentService } from '../../../shared/services/dummy-student.service';
|
||||
import { StudentCardDto } from '../../../shared/classes/student-card.dto';
|
||||
import { StudentService } from '../../../shared/services/student.service';
|
||||
|
||||
export type DisplayMode = 'card' | 'list';
|
||||
|
||||
@Component({
|
||||
selector: 'app-student-card-list',
|
||||
imports: [StudentCard, AddStudentModal, RouterLink, DatePipe],
|
||||
templateUrl: './student-card-list.html',
|
||||
styleUrl: './student-card-list.scss',
|
||||
})
|
||||
export class StudentCardList {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
constructor() {
|
||||
this.loadStudents();
|
||||
}
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
private readonly studentService = inject(StudentService);
|
||||
private readonly router = inject(Router);
|
||||
protected readonly students = signal<StudentCardDto[]>([]);
|
||||
protected readonly displayMode = signal<DisplayMode>('card');
|
||||
protected readonly showAddModal = signal(false);
|
||||
protected readonly loaded = signal(false);
|
||||
protected readonly showAll = signal(false);
|
||||
|
||||
public errorMessage = signal<String | null>(null);
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
setDisplayMode(mode: DisplayMode) {
|
||||
this.displayMode.set(mode);
|
||||
}
|
||||
|
||||
onAddStudent() {
|
||||
this.showAddModal.set(true);
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Toggles between "My Students" and "All Students" scope, then
|
||||
// reloads the student list from the API with the new scope.
|
||||
// *****************************************************************
|
||||
onToggleScope() {
|
||||
this.showAll.update(v => !v);
|
||||
this.loaded.set(false);
|
||||
this.loadStudents();
|
||||
this.studentService.notifyDataChanged();
|
||||
}
|
||||
|
||||
onStudentCreated(student: StudentCardDto) {
|
||||
this.students.update(list => this.sortByIdentifier([...list, student]));
|
||||
this.showAddModal.set(false);
|
||||
this.studentService.notifyDataChanged();
|
||||
this.router.navigate(['/students', student.studentId]);
|
||||
}
|
||||
|
||||
onModalCancelled() {
|
||||
this.showAddModal.set(false);
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
|
||||
// *****************************************************************
|
||||
// Sorts an array of students alphabetically by identifier.
|
||||
// *****************************************************************
|
||||
private sortByIdentifier(students: StudentCardDto[]): StudentCardDto[] {
|
||||
return students.sort((a, b) =>
|
||||
a.identifier.localeCompare(b.identifier, undefined, { sensitivity: 'base' })
|
||||
);
|
||||
}
|
||||
|
||||
// *****************************************************************
|
||||
// Loads students from the service and populates the students signal.
|
||||
// Uses scope 'all' when the toggle is active.
|
||||
// *****************************************************************
|
||||
private loadStudents() {
|
||||
const scope = this.showAll() ? 'all' : undefined;
|
||||
this.studentService.getMyStudents(scope).then(data => {
|
||||
|
||||
if (!data.success) {
|
||||
this.errorMessage.set(data.message);
|
||||
}
|
||||
else {
|
||||
this.students.set(this.sortByIdentifier(data.payload || []))
|
||||
}
|
||||
|
||||
this.loaded.set(true);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
<div class="card" [routerLink]="['/students', student().studentId]">
|
||||
<h2 class="identifier">🎓 {{ student().identifier }}</h2>
|
||||
|
||||
<div class="meta">
|
||||
<span class="last-entry">IEP Date: {{ student().nextIepDate | date:'M/d/yy'}}</span>
|
||||
<span class="last-entry">
|
||||
@if (student().lastEntryDate) {
|
||||
Last entry: {{ student().lastEntryDate | date:'M/d/yy' }}
|
||||
} @else {
|
||||
No entries yet
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<span>Goals: {{ student().goalCount }}</span>
|
||||
<span>Events: {{ student().progressEventCount }}</span>
|
||||
<span>Benchmarks: {{ student().benchmarkCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,49 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.identifier {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { Component, computed, input } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { StudentCardDto } from '../../../shared/classes/student-card.dto';
|
||||
|
||||
@Component({
|
||||
selector: 'app-student-card',
|
||||
imports: [DatePipe, RouterLink],
|
||||
templateUrl: './student-card.html',
|
||||
styleUrl: './student-card.scss',
|
||||
})
|
||||
export class StudentCard {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
readonly student = input.required<StudentCardDto>();
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export interface SidebarNode {
|
||||
label: string;
|
||||
routerLink?: string[];
|
||||
children?: SidebarNode[];
|
||||
expanded?: boolean;
|
||||
loadChildren?: () => Promise<SidebarNode[]>;
|
||||
childCount?: number;
|
||||
}
|
||||
Reference in New Issue
Block a user