mirror of
https://github.com/opelly27/WinStudentGoalTracker.git
synced 2026-05-20 08:47:42 +00:00
opelly27
-83
@@ -1,83 +0,0 @@
|
|||||||
<div class="overlay" (click)="onCancel()"></div>
|
|
||||||
|
|
||||||
<div class="modal">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2 class="modal-title">Add Goal</h2>
|
|
||||||
<button class="close-btn" (click)="onCancel()" aria-label="Close">×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form class="modal-body" (ngSubmit)="onSubmit()" #goalForm="ngForm">
|
|
||||||
|
|
||||||
<div class="field">
|
|
||||||
<label for="category">Category<span class="required">*</span></label>
|
|
||||||
<input
|
|
||||||
id="category"
|
|
||||||
type="text"
|
|
||||||
[(ngModel)]="form.category"
|
|
||||||
name="category"
|
|
||||||
required
|
|
||||||
placeholder="e.g. Academics"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field">
|
|
||||||
<label for="baseline">Baseline</label>
|
|
||||||
<textarea
|
|
||||||
id="baseline"
|
|
||||||
[(ngModel)]="form.baseline"
|
|
||||||
name="baseline"
|
|
||||||
rows="3"
|
|
||||||
placeholder="Enter baseline..."
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="field">
|
|
||||||
<label for="description">Goal</label>
|
|
||||||
<textarea
|
|
||||||
id="description"
|
|
||||||
[(ngModel)]="form.description"
|
|
||||||
name="description"
|
|
||||||
rows="3"
|
|
||||||
placeholder="Enter goal..."
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="field">
|
|
||||||
<label for="targetCompletionDate">Target Completion Date</label>
|
|
||||||
<input
|
|
||||||
id="targetCompletionDate"
|
|
||||||
type="date"
|
|
||||||
[(ngModel)]="form.targetCompletionDate"
|
|
||||||
name="targetCompletionDate"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Parent goal dropdown hidden — may not be needed
|
|
||||||
@if (parentGoalOptions().length > 0) {
|
|
||||||
<div class="field">
|
|
||||||
<label for="goalParentId">Parent Goal <span class="optional">(optional)</span></label>
|
|
||||||
<select id="goalParentId" [(ngModel)]="form.goalParentId" name="goalParentId">
|
|
||||||
<option [ngValue]="null">None</option>
|
|
||||||
@for (goal of parentGoalOptions(); track goal.goalId) {
|
|
||||||
<option [ngValue]="goal.goalId">{{ goal.category }}</option>
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
-->
|
|
||||||
|
|
||||||
@if (errorMessage()) {
|
|
||||||
<p class="error">{{ errorMessage() }}</p>
|
|
||||||
}
|
|
||||||
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button type="button" class="btn btn-secondary" (click)="onCancel()">Cancel</button>
|
|
||||||
<button type="submit" class="btn btn-primary" [disabled]="goalForm.invalid || isSubmitting()">
|
|
||||||
{{ isSubmitting() ? 'Saving...' : 'Add Goal' }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
-146
@@ -1,146 +0,0 @@
|
|||||||
:host {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
position: relative;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
|
|
||||||
width: 420px;
|
|
||||||
max-width: 95vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 1.25rem 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #666;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn:hover {
|
|
||||||
color: #111;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
padding: 1.25rem 1.5rem 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field label {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.optional {
|
|
||||||
font-weight: 400;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field input,
|
|
||||||
.field textarea,
|
|
||||||
.field select {
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.9375rem;
|
|
||||||
font-family: inherit;
|
|
||||||
outline: none;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field input:focus,
|
|
||||||
.field textarea:focus,
|
|
||||||
.field select:focus {
|
|
||||||
border-color: #4f46e5;
|
|
||||||
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #dc2626;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 0.75rem;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 0.5rem 1.125rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: transparent;
|
|
||||||
border-color: #ddd;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: #4f46e5;
|
|
||||||
color: #fff;
|
|
||||||
border-color: #4f46e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover:not(:disabled) {
|
|
||||||
background: #4338ca;
|
|
||||||
border-color: #4338ca;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:disabled {
|
|
||||||
opacity: 0.55;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.required {
|
|
||||||
color: red;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
import { Component, computed, inject, input, output, signal } from '@angular/core';
|
|
||||||
import { FormsModule } from '@angular/forms';
|
|
||||||
import { CreateGoalDto } from '../../../shared/classes/create-goal.dto';
|
|
||||||
import { StudentGoalItem } from '../../../shared/classes/student-goal';
|
|
||||||
import { StudentService } from '../../../shared/services/student.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-add-goal-modal',
|
|
||||||
imports: [FormsModule],
|
|
||||||
templateUrl: './add-goal-modal.html',
|
|
||||||
styleUrl: './add-goal-modal.scss',
|
|
||||||
})
|
|
||||||
export class AddGoalModal {
|
|
||||||
|
|
||||||
// ************************** Constructor **************************
|
|
||||||
|
|
||||||
// ************************** Declarations *************************
|
|
||||||
|
|
||||||
private readonly studentService = inject(StudentService);
|
|
||||||
|
|
||||||
readonly studentId = input.required<string>();
|
|
||||||
readonly existingGoals = input.required<StudentGoalItem[]>();
|
|
||||||
readonly nextIepDate = input<string | null>();
|
|
||||||
readonly goalCreated = output<StudentGoalItem>();
|
|
||||||
readonly cancelled = output<void>();
|
|
||||||
|
|
||||||
protected readonly isSubmitting = signal(false);
|
|
||||||
protected readonly errorMessage = signal<string | null>(null);
|
|
||||||
|
|
||||||
protected readonly parentGoalOptions = computed(() =>
|
|
||||||
this.existingGoals().filter(g => g.goalParentId === null)
|
|
||||||
);
|
|
||||||
|
|
||||||
protected form: CreateGoalDto = {
|
|
||||||
description: '',
|
|
||||||
category: '',
|
|
||||||
baseline: '',
|
|
||||||
goalParentId: null,
|
|
||||||
targetCompletionDate: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
// *****************************************************************
|
|
||||||
// Pre-fills targetCompletionDate from the student's nextIepDate.
|
|
||||||
// *****************************************************************
|
|
||||||
ngOnInit() {
|
|
||||||
const iepDate = this.nextIepDate?.();
|
|
||||||
if (iepDate) {
|
|
||||||
this.form.targetCompletionDate = iepDate;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ************************** Properties ***************************
|
|
||||||
|
|
||||||
// ************************ Public Methods *************************
|
|
||||||
|
|
||||||
// ************************ Event Handlers *************************
|
|
||||||
|
|
||||||
async onSubmit() {
|
|
||||||
this.errorMessage.set(null);
|
|
||||||
this.isSubmitting.set(true);
|
|
||||||
|
|
||||||
const result = await this.studentService.createGoal(this.studentId(), this.form);
|
|
||||||
|
|
||||||
this.isSubmitting.set(false);
|
|
||||||
|
|
||||||
if (!result.success) {
|
|
||||||
this.errorMessage.set(result.message);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.goalCreated.emit(result.payload!);
|
|
||||||
}
|
|
||||||
|
|
||||||
onCancel() {
|
|
||||||
this.cancelled.emit();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ********************** Support Procedures ***********************
|
|
||||||
}
|
|
||||||
+9
-53
@@ -1,54 +1,12 @@
|
|||||||
<div class="overlay" (click)="onCancel()"></div>
|
<app-modal-shell title="Add Student" (closed)="cancelled.emit()">
|
||||||
|
|
||||||
<div class="modal">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2 class="modal-title">Add Student</h2>
|
|
||||||
<button class="close-btn" (click)="onCancel()" aria-label="Close">×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form class="modal-body" (ngSubmit)="onSubmit()" #studentForm="ngForm">
|
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="identifier">Student</label>
|
<label class="field-label">Name</label>
|
||||||
<input
|
<input class="field-input" type="text" [(ngModel)]="form.identifier"
|
||||||
id="identifier"
|
placeholder="Initials or other non-personally identifiable label" />
|
||||||
type="text"
|
|
||||||
[(ngModel)]="form.identifier"
|
|
||||||
name="identifier"
|
|
||||||
required
|
|
||||||
placeholder="Initials or other non-personally identifiable label"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="field">
|
|
||||||
<label for="programYear">Program Year</label>
|
|
||||||
<input
|
|
||||||
id="programYear"
|
|
||||||
type="number"
|
|
||||||
[(ngModel)]="form.programYear"
|
|
||||||
name="programYear"
|
|
||||||
placeholder="e.g. 2025"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="enrollmentDate">Enrollment Date</label>
|
<label class="field-label">Next IEP Date</label>
|
||||||
<input
|
<input class="field-input" type="date" [(ngModel)]="form.nextIepDate" />
|
||||||
id="enrollmentDate"
|
|
||||||
type="date"
|
|
||||||
[(ngModel)]="form.enrollmentDate"
|
|
||||||
name="enrollmentDate"
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<div class="field">
|
|
||||||
<label for="nextIepDate">Next IEP Date</label>
|
|
||||||
<input
|
|
||||||
id="nextIepDate"
|
|
||||||
type="date"
|
|
||||||
[(ngModel)]="form.nextIepDate"
|
|
||||||
name="nextIepDate"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (errorMessage()) {
|
@if (errorMessage()) {
|
||||||
@@ -56,11 +14,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
<div class="modal-actions">
|
<div class="modal-actions">
|
||||||
<button type="button" class="btn btn-secondary" (click)="onCancel()">Cancel</button>
|
<button class="btn-secondary" (click)="cancelled.emit()">Cancel</button>
|
||||||
<button type="submit" class="btn btn-primary" [disabled]="studentForm.invalid || isSubmitting()">
|
<button class="btn-primary" (click)="onSubmit()" [disabled]="isSubmitting() || !form.identifier.trim()">
|
||||||
{{ isSubmitting() ? 'Saving...' : 'Add Student' }}
|
{{ isSubmitting() ? 'Saving...' : 'Add Student' }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</app-modal-shell>
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+1
-130
@@ -1,130 +1 @@
|
|||||||
:host {
|
/* Inherits all styles from modal-shell via ::ng-deep */
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
position: relative;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
|
|
||||||
width: 420px;
|
|
||||||
max-width: 95vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 1.25rem 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #666;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn:hover {
|
|
||||||
color: #111;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
padding: 1.25rem 1.5rem 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field label {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field input {
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.9375rem;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field input:focus {
|
|
||||||
border-color: #4f46e5;
|
|
||||||
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #dc2626;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 0.75rem;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 0.5rem 1.125rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: transparent;
|
|
||||||
border-color: #ddd;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: #4f46e5;
|
|
||||||
color: #fff;
|
|
||||||
border-color: #4f46e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover:not(:disabled) {
|
|
||||||
background: #4338ca;
|
|
||||||
border-color: #4338ca;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:disabled {
|
|
||||||
opacity: 0.55;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|||||||
+3
-19
@@ -1,21 +1,17 @@
|
|||||||
import { Component, inject, output, signal } from '@angular/core';
|
import { Component, inject, output, signal } from '@angular/core';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { ModalShell } from '../modal-shell/modal-shell';
|
||||||
import { CreateStudentDto } from '../../../shared/classes/create-student.dto';
|
import { CreateStudentDto } from '../../../shared/classes/create-student.dto';
|
||||||
import { StudentCardDto } from '../../../shared/classes/student-card.dto';
|
import { StudentCardDto } from '../../../shared/classes/student-card.dto';
|
||||||
import { StudentService } from '../../../shared/services/student.service';
|
import { StudentService } from '../../../shared/services/student.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-add-student-modal',
|
selector: 'app-add-student-modal',
|
||||||
imports: [FormsModule],
|
imports: [FormsModule, ModalShell],
|
||||||
templateUrl: './add-student-modal.html',
|
templateUrl: './add-student-modal.html',
|
||||||
styleUrl: './add-student-modal.scss',
|
styleUrl: './add-student-modal.scss',
|
||||||
})
|
})
|
||||||
export class AddStudentModal {
|
export class AddStudentModal {
|
||||||
|
|
||||||
// ************************** Constructor **************************
|
|
||||||
|
|
||||||
// ************************** Declarations *************************
|
|
||||||
|
|
||||||
private readonly studentService = inject(StudentService);
|
private readonly studentService = inject(StudentService);
|
||||||
|
|
||||||
readonly studentCreated = output<StudentCardDto>();
|
readonly studentCreated = output<StudentCardDto>();
|
||||||
@@ -31,18 +27,12 @@ export class AddStudentModal {
|
|||||||
nextIepDate: null,
|
nextIepDate: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
// ************************** Properties ***************************
|
|
||||||
|
|
||||||
// ************************ Public Methods *************************
|
|
||||||
|
|
||||||
// ************************ Event Handlers *************************
|
|
||||||
|
|
||||||
async onSubmit() {
|
async onSubmit() {
|
||||||
|
if (!this.form.identifier.trim()) return;
|
||||||
this.errorMessage.set(null);
|
this.errorMessage.set(null);
|
||||||
this.isSubmitting.set(true);
|
this.isSubmitting.set(true);
|
||||||
|
|
||||||
const result = await this.studentService.createStudent(this.form);
|
const result = await this.studentService.createStudent(this.form);
|
||||||
|
|
||||||
this.isSubmitting.set(false);
|
this.isSubmitting.set(false);
|
||||||
|
|
||||||
if (!result.success) {
|
if (!result.success) {
|
||||||
@@ -52,10 +42,4 @@ export class AddStudentModal {
|
|||||||
|
|
||||||
this.studentCreated.emit(result.payload!);
|
this.studentCreated.emit(result.payload!);
|
||||||
}
|
}
|
||||||
|
|
||||||
onCancel() {
|
|
||||||
this.cancelled.emit();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ********************** Support Procedures ***********************
|
|
||||||
}
|
}
|
||||||
|
|||||||
+43
-69
@@ -2,53 +2,42 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding: 24px 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
height: 40px;
|
margin-bottom: 20px;
|
||||||
padding-right: 0.5rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #fff;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn {
|
.toolbar-btn {
|
||||||
padding: 0.375rem 0.75rem;
|
padding: 6px 14px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #4f46e5;
|
color: var(--accent-indigo);
|
||||||
border: 1px solid #4f46e5;
|
border: 1px solid var(--accent-indigo);
|
||||||
border-radius: 6px;
|
border-radius: var(--radius-md);
|
||||||
font-size: 0.875rem;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
font-family: inherit;
|
||||||
|
|
||||||
.toolbar-btn:hover {
|
&:hover {
|
||||||
background: #eef2ff;
|
background: #EEF2FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn:disabled {
|
&:disabled {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-btn {
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-title {
|
.toolbar-title {
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.25rem;
|
font-size: 18px;
|
||||||
color: #333;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.spacer {
|
.spacer {
|
||||||
@@ -56,91 +45,76 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
font-size: 0.875rem;
|
font-size: 13px;
|
||||||
color: #dc2626;
|
color: #dc2626;
|
||||||
margin: 0 0 1rem;
|
margin: 0 0 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
font-size: 0.875rem;
|
font-size: 13px;
|
||||||
color: #16a34a;
|
color: #16a34a;
|
||||||
margin: 0 0 1rem;
|
margin: 12px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-card {
|
.detail-card {
|
||||||
background: #fff;
|
background: var(--bg-surface);
|
||||||
border: 1px solid #ddd;
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 8px;
|
border-radius: var(--radius-xl);
|
||||||
padding: 1.5rem;
|
padding: 22px;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field {
|
.field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-label {
|
.field-label {
|
||||||
font-size: 0.75rem;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: #666;
|
||||||
text-transform: uppercase;
|
margin-bottom: 4px;
|
||||||
letter-spacing: 0.025em;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-value {
|
|
||||||
font-size: 0.9375rem;
|
|
||||||
color: #333;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input {
|
.field-input {
|
||||||
padding: 0.375rem 0.5rem;
|
padding: 8px 10px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid var(--border-muted);
|
||||||
border-radius: 6px;
|
border-radius: var(--radius-md);
|
||||||
font-size: 0.9375rem;
|
font-size: 13px;
|
||||||
|
font-family: inherit;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input:focus {
|
|
||||||
border-color: #4f46e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-textarea {
|
.field-textarea {
|
||||||
font-family: inherit;
|
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
min-height: 5rem;
|
min-height: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metadata {
|
.metadata {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-item {
|
.meta-item {
|
||||||
font-size: 0.8125rem;
|
font-size: 12px;
|
||||||
color: #888;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 0.5rem;
|
gap: 8px;
|
||||||
margin-top: 0.5rem;
|
margin-top: 8px;
|
||||||
}
|
|
||||||
|
|
||||||
.actions .toolbar-btn {
|
|
||||||
min-width: 6rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.save-btn {
|
.save-btn {
|
||||||
background: #4f46e5;
|
background: var(--accent-indigo) !important;
|
||||||
color: #fff;
|
color: #fff !important;
|
||||||
border-color: #4f46e5;
|
border-color: var(--accent-indigo) !important;
|
||||||
}
|
|
||||||
|
|
||||||
.save-btn:hover {
|
&:hover {
|
||||||
background: #4338ca;
|
background: #3730A3 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
+1
-8
@@ -95,19 +95,12 @@ export class BenchmarkCardFull implements OnDestroy {
|
|||||||
this.errorMessage.set(result.message);
|
this.errorMessage.set(result.message);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const shortNameChanged = this.shortName !== this.savedShortName;
|
|
||||||
const result = await this.studentService.updateBenchmark(this.studentId, this.benchmarkId!, this.benchmarkText, this.shortName || undefined);
|
const result = await this.studentService.updateBenchmark(this.studentId, this.benchmarkId!, this.benchmarkText, this.shortName || undefined);
|
||||||
this.saving.set(false);
|
this.saving.set(false);
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
this.savedBenchmarkText = this.benchmarkText;
|
this.savedBenchmarkText = this.benchmarkText;
|
||||||
this.savedShortName = this.shortName;
|
this.savedShortName = this.shortName;
|
||||||
this.successMessage.set('Changes saved.');
|
this.successMessage.set('Changes saved.');
|
||||||
if (shortNameChanged) {
|
|
||||||
this.studentService.updateSidebarLabel(
|
|
||||||
['/students', this.studentId, 'goals', this.goalId, 'benchmarks', this.benchmarkId!],
|
|
||||||
this.shortName || this.benchmarkText
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
this.errorMessage.set(result.message);
|
this.errorMessage.set(result.message);
|
||||||
}
|
}
|
||||||
@@ -125,7 +118,7 @@ export class BenchmarkCardFull implements OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onBack() {
|
onBack() {
|
||||||
this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'benchmarks']);
|
this.router.navigate(['/students', this.studentId, 'goals', this.goalId]);
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
|
|||||||
-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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+21
@@ -0,0 +1,21 @@
|
|||||||
|
<app-modal-shell title="Edit Benchmark" (closed)="closed.emit()">
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Short Name</label>
|
||||||
|
<input class="field-input" type="text" [(ngModel)]="shortName" />
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Description</label>
|
||||||
|
<textarea class="field-input field-textarea" [(ngModel)]="benchmarkText"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (errorMessage()) {
|
||||||
|
<p class="error">{{ errorMessage() }}</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button class="btn-secondary" (click)="closed.emit()">Cancel</button>
|
||||||
|
<button class="btn-primary" (click)="onSave()" [disabled]="saving()">
|
||||||
|
{{ saving() ? 'Saving...' : 'Save' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</app-modal-shell>
|
||||||
+1
@@ -0,0 +1 @@
|
|||||||
|
/* Inherits all styles from modal-shell via ::ng-deep */
|
||||||
+54
@@ -0,0 +1,54 @@
|
|||||||
|
import { Component, inject, input, output, signal } from '@angular/core';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { ModalShell } from '../modal-shell/modal-shell';
|
||||||
|
import { StudentService } from '../../../shared/services/student.service';
|
||||||
|
import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-edit-benchmark-modal',
|
||||||
|
imports: [FormsModule, ModalShell],
|
||||||
|
templateUrl: './edit-benchmark-modal.html',
|
||||||
|
styleUrl: './edit-benchmark-modal.scss',
|
||||||
|
})
|
||||||
|
export class EditBenchmarkModal {
|
||||||
|
private readonly studentService = inject(StudentService);
|
||||||
|
|
||||||
|
readonly studentId = input.required<string>();
|
||||||
|
readonly benchmark = input.required<BenchmarkDto>();
|
||||||
|
readonly saved = output<void>();
|
||||||
|
readonly closed = output<void>();
|
||||||
|
|
||||||
|
protected readonly saving = signal(false);
|
||||||
|
protected readonly errorMessage = signal<string | null>(null);
|
||||||
|
|
||||||
|
protected shortName = '';
|
||||||
|
protected benchmarkText = '';
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
const b = this.benchmark();
|
||||||
|
this.shortName = b.shortName ?? '';
|
||||||
|
this.benchmarkText = b.benchmark;
|
||||||
|
}
|
||||||
|
|
||||||
|
async onSave() {
|
||||||
|
if (!this.shortName.trim()) return;
|
||||||
|
this.saving.set(true);
|
||||||
|
this.errorMessage.set(null);
|
||||||
|
|
||||||
|
const result = await this.studentService.updateBenchmark(
|
||||||
|
this.studentId(),
|
||||||
|
this.benchmark().benchmarkId,
|
||||||
|
this.benchmarkText,
|
||||||
|
this.shortName,
|
||||||
|
);
|
||||||
|
|
||||||
|
this.saving.set(false);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
this.studentService.notifyDataChanged();
|
||||||
|
this.saved.emit();
|
||||||
|
} else {
|
||||||
|
this.errorMessage.set(result.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+36
@@ -0,0 +1,36 @@
|
|||||||
|
<app-modal-shell [title]="isNew ? 'Log Progress Event' : 'Edit Progress Event'" (closed)="closed.emit()">
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Description</label>
|
||||||
|
<textarea class="field-input field-textarea tall" [(ngModel)]="content"
|
||||||
|
placeholder="Enter progress notes..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (benchmarks().length > 0) {
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Related Benchmarks (optional)</label>
|
||||||
|
<div class="benchmark-chips">
|
||||||
|
@for (b of benchmarks(); track b.benchmarkId) {
|
||||||
|
<button class="chip" [class.selected]="isBenchmarkSelected(b.benchmarkId)"
|
||||||
|
[style.border-color]="isBenchmarkSelected(b.benchmarkId) ? colors.border : '#D5D5D0'"
|
||||||
|
[style.background]="isBenchmarkSelected(b.benchmarkId) ? colors.bg : '#FFF'"
|
||||||
|
[style.color]="isBenchmarkSelected(b.benchmarkId) ? colors.text : '#666'"
|
||||||
|
[style.font-weight]="isBenchmarkSelected(b.benchmarkId) ? '600' : '400'"
|
||||||
|
(click)="toggleBenchmark(b.benchmarkId)">
|
||||||
|
{{ b.shortName || b.benchmark }}
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (errorMessage()) {
|
||||||
|
<p class="error">{{ errorMessage() }}</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button class="btn-secondary" (click)="closed.emit()">Cancel</button>
|
||||||
|
<button class="btn-primary" (click)="onSave()" [disabled]="saving()">
|
||||||
|
{{ saving() ? 'Saving...' : (isNew ? 'Log' : 'Save') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</app-modal-shell>
|
||||||
+21
@@ -0,0 +1,21 @@
|
|||||||
|
.benchmark-chips {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip {
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
border: 1.5px solid #D5D5D0;
|
||||||
|
background: #FFF;
|
||||||
|
color: #666;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tall {
|
||||||
|
min-height: 90px !important;
|
||||||
|
}
|
||||||
+98
@@ -0,0 +1,98 @@
|
|||||||
|
import { Component, inject, input, output, signal } from '@angular/core';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { ModalShell } from '../modal-shell/modal-shell';
|
||||||
|
import { StudentService } from '../../../shared/services/student.service';
|
||||||
|
import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
|
||||||
|
import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
|
||||||
|
import { GOAL_COLOR } from '../../../shared/classes/category-colors';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-edit-event-modal',
|
||||||
|
imports: [FormsModule, ModalShell],
|
||||||
|
templateUrl: './edit-event-modal.html',
|
||||||
|
styleUrl: './edit-event-modal.scss',
|
||||||
|
})
|
||||||
|
export class EditEventModal {
|
||||||
|
private readonly studentService = inject(StudentService);
|
||||||
|
|
||||||
|
readonly studentId = input.required<string>();
|
||||||
|
readonly goalId = input.required<string>();
|
||||||
|
|
||||||
|
readonly benchmarks = input<BenchmarkDto[]>([]);
|
||||||
|
/** null for new event, populated for edit */
|
||||||
|
readonly event = input<ProgressEventDto | null>(null);
|
||||||
|
readonly saved = output<void>();
|
||||||
|
readonly closed = output<void>();
|
||||||
|
|
||||||
|
protected readonly saving = signal(false);
|
||||||
|
protected readonly errorMessage = signal<string | null>(null);
|
||||||
|
protected readonly selectedBenchmarkIds = signal<Set<string>>(new Set());
|
||||||
|
|
||||||
|
protected content = '';
|
||||||
|
|
||||||
|
async ngOnInit() {
|
||||||
|
const ev = this.event();
|
||||||
|
if (ev) {
|
||||||
|
this.content = ev.content;
|
||||||
|
// Load existing benchmark associations
|
||||||
|
const result = await this.studentService.getProgressEventBenchmarks(ev.progressEventId);
|
||||||
|
if (result.success && result.payload) {
|
||||||
|
this.selectedBenchmarkIds.set(new Set(result.payload));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get isNew(): boolean {
|
||||||
|
return this.event() === null;
|
||||||
|
}
|
||||||
|
|
||||||
|
get colors() {
|
||||||
|
return GOAL_COLOR;
|
||||||
|
}
|
||||||
|
|
||||||
|
isBenchmarkSelected(id: string): boolean {
|
||||||
|
return this.selectedBenchmarkIds().has(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleBenchmark(id: string) {
|
||||||
|
this.selectedBenchmarkIds.update(set => {
|
||||||
|
const next = new Set(set);
|
||||||
|
if (next.has(id)) next.delete(id);
|
||||||
|
else next.add(id);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async onSave() {
|
||||||
|
if (!this.content.trim()) return;
|
||||||
|
this.saving.set(true);
|
||||||
|
this.errorMessage.set(null);
|
||||||
|
|
||||||
|
const benchmarkIds = [...this.selectedBenchmarkIds()];
|
||||||
|
|
||||||
|
if (this.isNew) {
|
||||||
|
const result = await this.studentService.addProgressEvent(
|
||||||
|
this.studentId(), this.goalId(), this.content.trim(),
|
||||||
|
benchmarkIds.length > 0 ? benchmarkIds : undefined,
|
||||||
|
);
|
||||||
|
this.saving.set(false);
|
||||||
|
if (result.success) {
|
||||||
|
this.studentService.notifyDataChanged();
|
||||||
|
this.saved.emit();
|
||||||
|
} else {
|
||||||
|
this.errorMessage.set(result.message);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const result = await this.studentService.updateProgressEvent(
|
||||||
|
this.studentId(), this.event()!.progressEventId, this.content.trim(), benchmarkIds,
|
||||||
|
);
|
||||||
|
this.saving.set(false);
|
||||||
|
if (result.success) {
|
||||||
|
this.studentService.notifyDataChanged();
|
||||||
|
this.saved.emit();
|
||||||
|
} else {
|
||||||
|
this.errorMessage.set(result.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+21
@@ -0,0 +1,21 @@
|
|||||||
|
<app-modal-shell title="Edit Student" (closed)="closed.emit()">
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Name</label>
|
||||||
|
<input class="field-input" type="text" [(ngModel)]="identifier" />
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">IEP Date</label>
|
||||||
|
<input class="field-input" type="date" [(ngModel)]="nextIepDate" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (errorMessage()) {
|
||||||
|
<p class="error">{{ errorMessage() }}</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button class="btn-secondary" (click)="closed.emit()">Cancel</button>
|
||||||
|
<button class="btn-primary" (click)="onSave()" [disabled]="saving()">
|
||||||
|
{{ saving() ? 'Saving...' : 'Save' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</app-modal-shell>
|
||||||
+1
@@ -0,0 +1 @@
|
|||||||
|
/* Inherits all styles from modal-shell via ::ng-deep */
|
||||||
+51
@@ -0,0 +1,51 @@
|
|||||||
|
import { Component, inject, input, output, signal } from '@angular/core';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { ModalShell } from '../modal-shell/modal-shell';
|
||||||
|
import { StudentService } from '../../../shared/services/student.service';
|
||||||
|
import { StudentCardDto } from '../../../shared/classes/student-card.dto';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-edit-student-modal',
|
||||||
|
imports: [FormsModule, ModalShell],
|
||||||
|
templateUrl: './edit-student-modal.html',
|
||||||
|
styleUrl: './edit-student-modal.scss',
|
||||||
|
})
|
||||||
|
export class EditStudentModal {
|
||||||
|
private readonly studentService = inject(StudentService);
|
||||||
|
|
||||||
|
readonly student = input.required<StudentCardDto>();
|
||||||
|
readonly saved = output<void>();
|
||||||
|
readonly closed = output<void>();
|
||||||
|
|
||||||
|
protected readonly saving = signal(false);
|
||||||
|
protected readonly errorMessage = signal<string | null>(null);
|
||||||
|
|
||||||
|
protected identifier = '';
|
||||||
|
protected nextIepDate = '';
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
const s = this.student();
|
||||||
|
this.identifier = s.identifier;
|
||||||
|
this.nextIepDate = s.nextIepDate ? new Date(s.nextIepDate).toISOString().split('T')[0] : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
async onSave() {
|
||||||
|
if (!this.identifier.trim()) return;
|
||||||
|
this.saving.set(true);
|
||||||
|
this.errorMessage.set(null);
|
||||||
|
|
||||||
|
const result = await this.studentService.updateStudent(this.student().studentId, {
|
||||||
|
identifier: this.identifier,
|
||||||
|
nextIepDate: this.nextIepDate || null,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.saving.set(false);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
this.studentService.notifyDataChanged();
|
||||||
|
this.saved.emit();
|
||||||
|
} else {
|
||||||
|
this.errorMessage.set(result.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
-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 ?? []);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
<app-modal-shell [title]="modalTitle" (closed)="closed.emit()">
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Category</label>
|
||||||
|
<input class="field-input" type="text" [(ngModel)]="form.category"
|
||||||
|
placeholder="e.g. Reading, Math, Behavior…" />
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Baseline</label>
|
||||||
|
<textarea class="field-input field-textarea" [(ngModel)]="form.baseline"
|
||||||
|
placeholder="Enter baseline..."></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Goal</label>
|
||||||
|
<textarea class="field-input field-textarea" [(ngModel)]="form.description"
|
||||||
|
placeholder="Enter goal..."></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Target Completion Date</label>
|
||||||
|
<input class="field-input" type="date" [(ngModel)]="form.targetCompletionDate" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (errorMessage()) {
|
||||||
|
<p class="error">{{ errorMessage() }}</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button class="btn-secondary" (click)="closed.emit()">Cancel</button>
|
||||||
|
<button class="btn-primary" (click)="onSubmit()" [disabled]="isSubmitting() || !form.category.trim()">
|
||||||
|
{{ isSubmitting() ? 'Saving...' : submitLabel }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</app-modal-shell>
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
/* Inherits all styles from modal-shell via ::ng-deep */
|
||||||
@@ -0,0 +1,113 @@
|
|||||||
|
import { Component, inject, input, output, signal } from '@angular/core';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { ModalShell } from '../modal-shell/modal-shell';
|
||||||
|
import { CreateGoalDto } from '../../../shared/classes/create-goal.dto';
|
||||||
|
import { StudentGoalItem } from '../../../shared/classes/student-goal';
|
||||||
|
import { StudentService } from '../../../shared/services/student.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-goal-modal',
|
||||||
|
imports: [FormsModule, ModalShell],
|
||||||
|
templateUrl: './goal-modal.html',
|
||||||
|
styleUrl: './goal-modal.scss',
|
||||||
|
})
|
||||||
|
export class GoalModal {
|
||||||
|
private readonly studentService = inject(StudentService);
|
||||||
|
|
||||||
|
/** Required: the student this goal belongs to. */
|
||||||
|
readonly studentId = input.required<string>();
|
||||||
|
|
||||||
|
/** Optional: when provided the modal operates in edit mode. */
|
||||||
|
readonly goal = input<StudentGoalItem | null>(null);
|
||||||
|
|
||||||
|
/** Optional: used to pre-fill the target completion date in add mode. */
|
||||||
|
readonly nextIepDate = input<string | null>(null);
|
||||||
|
|
||||||
|
/** Emits the newly created goal (add mode). */
|
||||||
|
readonly goalCreated = output<StudentGoalItem>();
|
||||||
|
|
||||||
|
/** Emits when an existing goal has been saved (edit mode). */
|
||||||
|
readonly saved = output<void>();
|
||||||
|
|
||||||
|
/** Emits when the modal is dismissed without saving. */
|
||||||
|
readonly closed = output<void>();
|
||||||
|
|
||||||
|
protected readonly isSubmitting = signal(false);
|
||||||
|
protected readonly errorMessage = signal<string | null>(null);
|
||||||
|
|
||||||
|
protected form: CreateGoalDto = {
|
||||||
|
description: '',
|
||||||
|
category: '',
|
||||||
|
baseline: '',
|
||||||
|
goalParentId: null,
|
||||||
|
targetCompletionDate: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
protected get isEditMode(): boolean {
|
||||||
|
return !!this.goal();
|
||||||
|
}
|
||||||
|
|
||||||
|
protected get modalTitle(): string {
|
||||||
|
return this.isEditMode ? 'Edit Goal' : 'Add Goal';
|
||||||
|
}
|
||||||
|
|
||||||
|
protected get submitLabel(): string {
|
||||||
|
return this.isEditMode ? 'Save' : 'Add Goal';
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
const existing = this.goal();
|
||||||
|
if (existing) {
|
||||||
|
// Edit mode — populate form from the existing goal
|
||||||
|
this.form.category = existing.category;
|
||||||
|
this.form.description = existing.description;
|
||||||
|
this.form.baseline = existing.baseline;
|
||||||
|
this.form.goalParentId = existing.goalParentId;
|
||||||
|
this.form.targetCompletionDate = existing.targetCompletionDate
|
||||||
|
? existing.targetCompletionDate.substring(0, 10)
|
||||||
|
: null;
|
||||||
|
} else {
|
||||||
|
// Add mode — pre-fill target date from IEP if available
|
||||||
|
const iepDate = this.nextIepDate?.();
|
||||||
|
if (iepDate) {
|
||||||
|
this.form.targetCompletionDate = iepDate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async onSubmit() {
|
||||||
|
if (!this.form.category.trim()) return;
|
||||||
|
this.errorMessage.set(null);
|
||||||
|
this.isSubmitting.set(true);
|
||||||
|
|
||||||
|
if (this.isEditMode) {
|
||||||
|
const result = await this.studentService.updateGoal(
|
||||||
|
this.studentId(),
|
||||||
|
this.goal()!.goalId,
|
||||||
|
{
|
||||||
|
category: this.form.category,
|
||||||
|
description: this.form.description,
|
||||||
|
baseline: this.form.baseline,
|
||||||
|
targetCompletionDate: this.form.targetCompletionDate,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
this.isSubmitting.set(false);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
this.studentService.notifyDataChanged();
|
||||||
|
this.saved.emit();
|
||||||
|
} else {
|
||||||
|
this.errorMessage.set(result.message);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const result = await this.studentService.createGoal(this.studentId(), this.form);
|
||||||
|
this.isSubmitting.set(false);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
this.goalCreated.emit(result.payload!);
|
||||||
|
} else {
|
||||||
|
this.errorMessage.set(result.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
<div class="overlay" (click)="onOverlayClick()"></div>
|
||||||
|
<div class="modal" (click)="$event.stopPropagation()">
|
||||||
|
<div class="modal-header">
|
||||||
|
<span class="modal-title">{{ title() }}</span>
|
||||||
|
<button class="close-btn" (click)="onClose()" aria-label="Close">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<ng-content />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,134 @@
|
|||||||
|
:host {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
position: relative;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border-radius: var(--radius-2xl);
|
||||||
|
width: min(480px, 92vw);
|
||||||
|
max-height: 85vh;
|
||||||
|
overflow: auto;
|
||||||
|
box-shadow: var(--shadow-modal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
padding: 18px 22px 14px;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
margin-left: auto;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
padding: 18px 22px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Shared form styles for modal content ─── */
|
||||||
|
:host ::ng-deep {
|
||||||
|
.field {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid var(--border-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: inherit;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-textarea {
|
||||||
|
min-height: 70px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: none;
|
||||||
|
background: var(--accent-indigo);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: #3730A3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.55;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: none;
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #e5e5e0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #dc2626;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import { Component, input, output } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-modal-shell',
|
||||||
|
templateUrl: './modal-shell.html',
|
||||||
|
styleUrl: './modal-shell.scss',
|
||||||
|
})
|
||||||
|
export class ModalShell {
|
||||||
|
readonly title = input.required<string>();
|
||||||
|
readonly closed = output<void>();
|
||||||
|
|
||||||
|
onOverlayClick() {
|
||||||
|
this.closed.emit();
|
||||||
|
}
|
||||||
|
|
||||||
|
onClose() {
|
||||||
|
this.closed.emit();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -2,50 +2,46 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
padding: 24px 28px;
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
font-size: 24px;
|
font-size: 22px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-left: 0.75rem;
|
margin: 0 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-grid {
|
.card-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-content: flex-start;
|
gap: 12px;
|
||||||
gap: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background: #fff;
|
background: var(--bg-surface);
|
||||||
border-radius: 8px;
|
border: 1px solid var(--border-color);
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
border-radius: var(--radius-xl);
|
||||||
padding: 1.5rem;
|
padding: 20px 24px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: box-shadow 0.15s ease, transform 0.15s ease;
|
width: 280px;
|
||||||
|
transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
|
border-color: var(--accent-indigo-light);
|
||||||
transform: translateY(-2px);
|
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin: 0;
|
margin: 0 0 6px;
|
||||||
font-size: 1.125rem;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
-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 ***********************
|
|
||||||
}
|
|
||||||
+47
-64
@@ -2,48 +2,42 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding: 24px 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
height: 40px;
|
margin-bottom: 20px;
|
||||||
padding-right: 0.5rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #fff;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn {
|
.toolbar-btn {
|
||||||
padding: 0.375rem 0.75rem;
|
padding: 6px 14px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #4f46e5;
|
color: var(--accent-indigo);
|
||||||
border: 1px solid #4f46e5;
|
border: 1px solid var(--accent-indigo);
|
||||||
border-radius: 6px;
|
border-radius: var(--radius-md);
|
||||||
font-size: 0.875rem;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
font-family: inherit;
|
||||||
|
|
||||||
.toolbar-btn:hover {
|
&:hover {
|
||||||
background: #eef2ff;
|
background: #EEF2FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-btn {
|
&:disabled {
|
||||||
margin-left: 0.5rem;
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-title {
|
.toolbar-title {
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.25rem;
|
font-size: 18px;
|
||||||
color: #333;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.spacer {
|
.spacer {
|
||||||
@@ -51,9 +45,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-card {
|
.detail-card {
|
||||||
background: #fff;
|
background: var(--bg-surface);
|
||||||
border: 1px solid #ddd;
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 8px;
|
border-radius: var(--radius-xl);
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -61,50 +55,43 @@
|
|||||||
.card-header {
|
.card-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
padding: 14px 22px;
|
||||||
padding: 0.625rem 1.25rem;
|
background: var(--bg-page);
|
||||||
background: #f8f9fa;
|
border-bottom: 1px solid var(--border-color);
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-size: 0.875rem;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body {
|
.card-body {
|
||||||
padding: 1.5rem;
|
padding: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field {
|
.field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-label {
|
.field-label {
|
||||||
font-size: 0.75rem;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: #666;
|
||||||
text-transform: uppercase;
|
margin-bottom: 4px;
|
||||||
letter-spacing: 0.025em;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input {
|
.field-input {
|
||||||
padding: 0.375rem 0.5rem;
|
padding: 8px 10px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid var(--border-muted);
|
||||||
border-radius: 6px;
|
border-radius: var(--radius-md);
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 0.9375rem;
|
font-size: 13px;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input:focus {
|
|
||||||
border-color: #4f46e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-row {
|
.date-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
@@ -115,8 +102,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.goal-checklist {
|
.goal-checklist {
|
||||||
border: 1px solid #ccc;
|
border: 1px solid var(--border-muted);
|
||||||
border-radius: 6px;
|
border-radius: var(--radius-md);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -124,41 +111,37 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
padding: 0.5rem 0.75rem;
|
padding: 8px 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.9375rem;
|
font-size: 13px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #f5f5f5;
|
background: var(--bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
& + & {
|
& + & {
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
accent-color: var(--accent-indigo-light);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
margin-top: 0.5rem;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.run-btn {
|
.run-btn {
|
||||||
background: #4f46e5;
|
background: var(--accent-indigo) !important;
|
||||||
color: #fff;
|
color: #fff !important;
|
||||||
border-color: #4f46e5;
|
border-color: var(--accent-indigo) !important;
|
||||||
min-width: 6rem;
|
min-width: 6rem;
|
||||||
}
|
|
||||||
|
|
||||||
.run-btn:hover {
|
&:hover {
|
||||||
background: #4338ca;
|
background: #3730A3 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,125 @@
|
|||||||
|
@if (!student()) {
|
||||||
|
<div class="empty-panel">
|
||||||
|
<span class="empty-text">Select a student</span>
|
||||||
|
</div>
|
||||||
|
} @else {
|
||||||
|
<!-- Modals -->
|
||||||
|
@if (showGoalModal()) {
|
||||||
|
<app-goal-modal [studentId]="studentId()!"
|
||||||
|
[goal]="showGoalModal() === 'add' ? null : $any(showGoalModal())"
|
||||||
|
[nextIepDate]="nextIepDate()"
|
||||||
|
(goalCreated)="onGoalCreated($event)" (saved)="onGoalSaved()"
|
||||||
|
(closed)="showGoalModal.set(null)" />
|
||||||
|
}
|
||||||
|
@if (showEditBenchmarkModal()) {
|
||||||
|
<app-edit-benchmark-modal [studentId]="studentId()!" [benchmark]="showEditBenchmarkModal()!"
|
||||||
|
(saved)="onEditBenchmarkSaved()" (closed)="showEditBenchmarkModal.set(null)" />
|
||||||
|
}
|
||||||
|
@if (showEditEventModal()) {
|
||||||
|
<app-edit-event-modal [studentId]="studentId()!" [goalId]="selectedGoal()!.goalId"
|
||||||
|
[benchmarks]="goalBenchmarks()"
|
||||||
|
[event]="showEditEventModal() === 'new' ? null : $any(showEditEventModal())" (saved)="onEventSaved()"
|
||||||
|
(closed)="showEditEventModal.set(null)" />
|
||||||
|
}
|
||||||
|
|
||||||
|
<!-- Student Header -->
|
||||||
|
<div class="student-header">
|
||||||
|
<div class="student-info">
|
||||||
|
<h1 class="student-name">{{ student()!.identifier }}</h1>
|
||||||
|
<span class="student-iep">IEP {{ formatDate(student()!.nextIepDate) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="goal-tabs">
|
||||||
|
<button class="goal-tab add-goal" (click)="onAddGoal()">+ Goal</button>
|
||||||
|
@for (g of goals(); track g.goalId) {
|
||||||
|
<button class="goal-tab" [class.active]="selectedGoalId() === g.goalId || (selectedGoal()?.goalId === g.goalId)"
|
||||||
|
(click)="onSelectGoal(g.goalId)">
|
||||||
|
{{ g.category }}
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Goal Detail -->
|
||||||
|
@if (selectedGoal()) {
|
||||||
|
<div class="workspace-body">
|
||||||
|
<!-- Goal Card -->
|
||||||
|
<div class="goal-card">
|
||||||
|
<div class="goal-card-header">
|
||||||
|
<span class="goal-badge">{{ selectedGoal()!.category }} Goal</span>
|
||||||
|
<button class="edit-icon" (click)="onEditGoal()" aria-label="Edit goal">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
@if (selectedGoal()!.targetCompletionDate) {
|
||||||
|
<span class="goal-due">Due {{ formatDate(selectedGoal()!.targetCompletionDate) }}</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<p class="goal-description">{{ selectedGoal()!.description }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sub Tabs -->
|
||||||
|
<div class="sub-tabs">
|
||||||
|
<button class="sub-tab" [class.active]="activeTab() === 'benchmarks'"
|
||||||
|
(click)="onTabChange('benchmarks')">
|
||||||
|
Benchmarks ({{ goalBenchmarks().length }})
|
||||||
|
</button>
|
||||||
|
<button class="sub-tab" [class.active]="activeTab() === 'progress'"
|
||||||
|
(click)="onTabChange('progress')">
|
||||||
|
Progress Events ({{ sortedProgressEvents().length }})
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Benchmarks Tab -->
|
||||||
|
@if (activeTab() === 'benchmarks') {
|
||||||
|
<div class="tab-content">
|
||||||
|
<button class="add-btn" (click)="onAddBenchmark()">+ Add Benchmark</button>
|
||||||
|
@for (b of goalBenchmarks(); track b.benchmarkId) {
|
||||||
|
<div class="benchmark-card">
|
||||||
|
<div class="benchmark-header">
|
||||||
|
<span class="benchmark-name">{{ b.shortName || b.benchmark }}</span>
|
||||||
|
<button class="edit-icon" (click)="onEditBenchmark(b)" aria-label="Edit benchmark">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="benchmark-desc">{{ b.benchmark }}</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<!-- Progress Tab -->
|
||||||
|
@if (activeTab() === 'progress') {
|
||||||
|
<div class="tab-content timeline">
|
||||||
|
<button class="add-btn" (click)="onNewEvent()">+ Log Progress Event</button>
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
@for (ev of sortedProgressEvents(); track ev.progressEventId) {
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-dot"></div>
|
||||||
|
<div class="event-card">
|
||||||
|
<div class="event-header">
|
||||||
|
<span class="event-date">{{ formatDate(ev.createdAt) }}</span>
|
||||||
|
<button class="edit-icon" (click)="onEditEvent(ev)" aria-label="Edit event">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#bbb" stroke-width="1.5"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="event-content">{{ ev.content }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
} @else {
|
||||||
|
<div class="empty-panel">
|
||||||
|
<span class="empty-text">Add a goal to get started</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,285 @@
|
|||||||
|
:host {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Empty State ─── */
|
||||||
|
.empty-panel {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Student Header ─── */
|
||||||
|
.student-header {
|
||||||
|
padding: 20px 28px 16px;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
background: var(--bg-surface);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-name {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-iep {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.goal-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
margin-top: 14px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goal-tab {
|
||||||
|
padding: 6px 14px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1.5px solid var(--border-color);
|
||||||
|
background: var(--bg-surface);
|
||||||
|
color: #666;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
font-weight: 600;
|
||||||
|
border-color: #818CF8;
|
||||||
|
background: #EEF2FF;
|
||||||
|
color: #4338CA;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.add-goal {
|
||||||
|
border: 1.5px dashed var(--border-muted);
|
||||||
|
background: none;
|
||||||
|
color: var(--text-faint);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Workspace Body ─── */
|
||||||
|
.workspace-body {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 24px 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Goal Card ─── */
|
||||||
|
.goal-card {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 20px 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goal-card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goal-badge {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
padding: 3px 8px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: #4338CA;
|
||||||
|
background: #EEF2FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goal-due {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goal-description {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.55;
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-icon {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:hover svg {
|
||||||
|
stroke: #555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Sub Tabs ─── */
|
||||||
|
.sub-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-bottom: 1.5px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-tab {
|
||||||
|
padding: 8px 18px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--text-muted);
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: -1.5px;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #4338CA;
|
||||||
|
border-bottom-color: #6366F1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Tab Content ─── */
|
||||||
|
.tab-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Benchmark Cards ─── */
|
||||||
|
.benchmark-card {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 16px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benchmark-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benchmark-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #4338CA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benchmark-events {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benchmark-desc {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Progress Timeline ─── */
|
||||||
|
.timeline {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-line {
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
top: 8px;
|
||||||
|
bottom: 8px;
|
||||||
|
width: 2px;
|
||||||
|
background: var(--border-color);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-dot {
|
||||||
|
position: absolute;
|
||||||
|
left: -20px;
|
||||||
|
top: 6px;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid #818CF8;
|
||||||
|
background: #EEF2FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 14px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-date {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-content {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.55;
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Add Buttons ─── */
|
||||||
|
.add-btn {
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
border: 1.5px dashed var(--border-muted);
|
||||||
|
background: none;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: border-color var(--transition-fast);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--text-muted);
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,216 @@
|
|||||||
|
import { Component, computed, effect, inject, signal, untracked } from '@angular/core';
|
||||||
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
import { StudentService } from '../../../shared/services/student.service';
|
||||||
|
import { StudentCardDto } from '../../../shared/classes/student-card.dto';
|
||||||
|
import { StudentGoalItem } from '../../../shared/classes/student-goal';
|
||||||
|
import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
|
||||||
|
import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
|
||||||
|
import { GoalModal } from '../goal-modal/goal-modal';
|
||||||
|
import { EditBenchmarkModal } from '../edit-benchmark-modal/edit-benchmark-modal';
|
||||||
|
import { EditEventModal } from '../edit-event-modal/edit-event-modal';
|
||||||
|
|
||||||
|
type TabView = 'benchmarks' | 'progress';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-workspace',
|
||||||
|
imports: [GoalModal, EditBenchmarkModal, EditEventModal],
|
||||||
|
templateUrl: './workspace.html',
|
||||||
|
styleUrl: './workspace.scss',
|
||||||
|
})
|
||||||
|
export class Workspace {
|
||||||
|
|
||||||
|
// ************************** Constructor **************************
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
// React to route param changes
|
||||||
|
this.route.paramMap.subscribe(params => {
|
||||||
|
const studentId = params.get('studentId');
|
||||||
|
const goalId = params.get('goalId');
|
||||||
|
|
||||||
|
if (studentId && studentId !== this.studentId()) {
|
||||||
|
this.selectedGoalId.set(null);
|
||||||
|
this.studentId.set(studentId);
|
||||||
|
this.loadStudentData(studentId);
|
||||||
|
} else if (!studentId) {
|
||||||
|
this.student.set(null);
|
||||||
|
this.studentId.set(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (goalId) {
|
||||||
|
this.selectedGoalId.set(goalId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// When dataVersion changes and we have a student loaded, refresh.
|
||||||
|
// Use untracked() for studentId so this effect only re-runs on
|
||||||
|
// dataVersion changes — route params already handle studentId changes.
|
||||||
|
let initialized = false;
|
||||||
|
effect(() => {
|
||||||
|
this.studentService.dataVersion();
|
||||||
|
if (initialized) {
|
||||||
|
const id = untracked(() => this.studentId());
|
||||||
|
if (id) {
|
||||||
|
this.loadStudentData(id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
initialized = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ************************** Declarations *************************
|
||||||
|
|
||||||
|
private readonly studentService = inject(StudentService);
|
||||||
|
private readonly route = inject(ActivatedRoute);
|
||||||
|
private readonly router = inject(Router);
|
||||||
|
|
||||||
|
protected readonly studentId = signal<string | null>(null);
|
||||||
|
protected readonly student = signal<StudentCardDto | null>(null);
|
||||||
|
protected readonly goals = signal<StudentGoalItem[]>([]);
|
||||||
|
protected readonly benchmarks = signal<BenchmarkDto[]>([]);
|
||||||
|
protected readonly progressEvents = signal<ProgressEventDto[]>([]);
|
||||||
|
protected readonly selectedGoalId = signal<string | null>(null);
|
||||||
|
protected readonly activeTab = signal<TabView>('benchmarks');
|
||||||
|
|
||||||
|
// Modal states
|
||||||
|
protected readonly showGoalModal = signal<StudentGoalItem | 'add' | null>(null);
|
||||||
|
protected readonly showEditBenchmarkModal = signal<BenchmarkDto | null>(null);
|
||||||
|
protected readonly showEditEventModal = signal<ProgressEventDto | null | 'new'>(null);
|
||||||
|
|
||||||
|
// ************************** Properties ***************************
|
||||||
|
|
||||||
|
protected readonly selectedGoal = computed<StudentGoalItem | null>(() => {
|
||||||
|
const id = this.selectedGoalId();
|
||||||
|
if (!id) return this.goals().length > 0 ? this.goals()[0] : null;
|
||||||
|
return this.goals().find(g => g.goalId === id) ?? null;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
protected readonly goalBenchmarks = computed<BenchmarkDto[]>(() => {
|
||||||
|
const goalId = this.selectedGoal()?.goalId;
|
||||||
|
if (!goalId) return [];
|
||||||
|
return this.benchmarks().filter(b => b.goalId === goalId);
|
||||||
|
});
|
||||||
|
|
||||||
|
protected readonly sortedProgressEvents = computed<ProgressEventDto[]>(() => {
|
||||||
|
return [...this.progressEvents()]
|
||||||
|
.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||||
|
});
|
||||||
|
|
||||||
|
protected readonly nextIepDate = computed<string>(() => {
|
||||||
|
const s = this.student();
|
||||||
|
if (!s?.nextIepDate) return '';
|
||||||
|
return new Date(s.nextIepDate).toISOString().split('T')[0];
|
||||||
|
});
|
||||||
|
|
||||||
|
// ************************ Event Handlers *************************
|
||||||
|
|
||||||
|
onSelectGoal(goalId: string) {
|
||||||
|
this.selectedGoalId.set(goalId);
|
||||||
|
this.activeTab.set('benchmarks');
|
||||||
|
this.loadGoalDetails(goalId);
|
||||||
|
this.router.navigate(['/students', this.studentId(), 'goals', goalId]);
|
||||||
|
}
|
||||||
|
|
||||||
|
onTabChange(tab: TabView) {
|
||||||
|
this.activeTab.set(tab);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modal handlers
|
||||||
|
onEditGoal() {
|
||||||
|
this.showGoalModal.set(this.selectedGoal()!);
|
||||||
|
}
|
||||||
|
|
||||||
|
onGoalSaved() {
|
||||||
|
this.showGoalModal.set(null);
|
||||||
|
this.loadStudentData(this.studentId()!);
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddGoal() {
|
||||||
|
this.showGoalModal.set('add');
|
||||||
|
}
|
||||||
|
|
||||||
|
onGoalCreated(goal: StudentGoalItem) {
|
||||||
|
this.showGoalModal.set(null);
|
||||||
|
this.studentService.notifyDataChanged();
|
||||||
|
this.loadStudentData(this.studentId()!).then(() => {
|
||||||
|
this.selectedGoalId.set(goal.goalId);
|
||||||
|
this.loadGoalDetails(goal.goalId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditBenchmark(b: BenchmarkDto) {
|
||||||
|
this.showEditBenchmarkModal.set(b);
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditBenchmarkSaved() {
|
||||||
|
this.showEditBenchmarkModal.set(null);
|
||||||
|
this.loadStudentData(this.studentId()!);
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddBenchmark() {
|
||||||
|
// Navigate to the new benchmark route (still uses the old page for creation)
|
||||||
|
this.router.navigate(['/students', this.studentId(), 'goals', this.selectedGoal()!.goalId, 'benchmarks', 'new']);
|
||||||
|
}
|
||||||
|
|
||||||
|
onNewEvent() {
|
||||||
|
this.showEditEventModal.set('new');
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditEvent(ev: ProgressEventDto) {
|
||||||
|
this.showEditEventModal.set(ev);
|
||||||
|
}
|
||||||
|
|
||||||
|
onEventSaved() {
|
||||||
|
this.showEditEventModal.set(null);
|
||||||
|
if (this.selectedGoal()) {
|
||||||
|
this.loadGoalDetails(this.selectedGoal()!.goalId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ************************ Formatting Helpers **********************
|
||||||
|
|
||||||
|
formatDate(d: string | Date | null): string {
|
||||||
|
if (!d) return '';
|
||||||
|
const date = new Date(d);
|
||||||
|
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// ********************** Support Procedures ***********************
|
||||||
|
|
||||||
|
private async loadStudentData(studentId: string) {
|
||||||
|
const [studentResult, goalsResult, bmResult] = await Promise.all([
|
||||||
|
this.studentService.getStudentById(studentId),
|
||||||
|
this.studentService.getGoalsForStudent(studentId),
|
||||||
|
this.studentService.getBenchmarksForStudent(studentId),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (studentResult.success && studentResult.payload) {
|
||||||
|
this.student.set(studentResult.payload);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (goalsResult.success && goalsResult.payload) {
|
||||||
|
this.goals.set(goalsResult.payload.goals);
|
||||||
|
// Auto-select first goal if none selected
|
||||||
|
if (!this.selectedGoalId() && goalsResult.payload.goals.length > 0) {
|
||||||
|
this.selectedGoalId.set(goalsResult.payload.goals[0].goalId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bmResult.success && bmResult.payload) {
|
||||||
|
this.benchmarks.set(bmResult.payload.benchmarks);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load progress events for selected goal
|
||||||
|
const goalId = this.selectedGoalId();
|
||||||
|
if (goalId) {
|
||||||
|
this.loadGoalDetails(goalId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async loadGoalDetails(goalId: string) {
|
||||||
|
const result = await this.studentService.getProgressEventsForGoal(goalId);
|
||||||
|
if (result.success) {
|
||||||
|
this.progressEvents.set(result.payload ?? []);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,15 +1,9 @@
|
|||||||
import { Routes } from '@angular/router';
|
import { Routes } from '@angular/router';
|
||||||
import { Home } from './pages/home/home';
|
import { Home } from './pages/home/home';
|
||||||
import { StudentCardList } from './components/student-card-list/student-card-list';
|
import { Workspace } from './components/workspace/workspace';
|
||||||
import { StudentCardFull } from './components/student-card-full/student-card-full';
|
|
||||||
import { GoalList } from './components/goal-list/goal-list';
|
|
||||||
import { GoalCardFull } from './components/goal-card-full/goal-card-full';
|
|
||||||
import { ProgressList } from './components/progress-list/progress-list';
|
|
||||||
import { BenchmarkList } from './components/benchmark-list/benchmark-list';
|
|
||||||
import { BenchmarkCardFull } from './components/benchmark-card-full/benchmark-card-full';
|
|
||||||
import { ProgressEdit } from './components/progress-edit/progress-edit';
|
|
||||||
import { Reports } from './components/reports/reports';
|
import { Reports } from './components/reports/reports';
|
||||||
import { StudentProgressReport } from './components/student-progress-report/student-progress-report';
|
import { StudentProgressReport } from './components/student-progress-report/student-progress-report';
|
||||||
|
import { BenchmarkCardFull } from './components/benchmark-card-full/benchmark-card-full';
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
@@ -17,17 +11,11 @@ export default [
|
|||||||
component: Home,
|
component: Home,
|
||||||
children: [
|
children: [
|
||||||
{ path: '', redirectTo: 'students', pathMatch: 'full' },
|
{ path: '', redirectTo: 'students', pathMatch: 'full' },
|
||||||
{ path: 'students', component: StudentCardList },
|
{ path: 'students', component: Workspace },
|
||||||
{ path: 'students/:studentId', component: StudentCardFull },
|
{ path: 'students/:studentId', component: Workspace },
|
||||||
{ path: 'students/:studentId/goals', component: GoalList },
|
{ path: 'students/:studentId/goals/:goalId', component: Workspace },
|
||||||
{ path: 'students/:studentId/goals/:goalId', component: GoalCardFull },
|
// Benchmark creation still uses the dedicated page (no create-benchmark modal yet)
|
||||||
{ path: 'students/:studentId/goals/:goalId/progress', component: ProgressList },
|
|
||||||
{ path: 'students/:studentId/goals/:goalId/progress/new', component: ProgressEdit },
|
|
||||||
{ path: 'students/:studentId/goals/:goalId/progress/:progressEventId', component: ProgressEdit },
|
|
||||||
{ path: 'students/:studentId/goals/:goalId/benchmarks', component: BenchmarkList },
|
|
||||||
{ path: 'students/:studentId/goals/:goalId/benchmarks/new', component: BenchmarkCardFull },
|
{ path: 'students/:studentId/goals/:goalId/benchmarks/new', component: BenchmarkCardFull },
|
||||||
{ path: 'students/:studentId/goals/:goalId/benchmarks/:benchmarkId', component: BenchmarkCardFull },
|
|
||||||
{ path: 'students/:studentId/benchmarks', component: BenchmarkList },
|
|
||||||
{ path: 'reports', component: Reports },
|
{ path: 'reports', component: Reports },
|
||||||
{ path: 'reports/student-progress', component: StudentProgressReport },
|
{ path: 'reports/student-progress', component: StudentProgressReport },
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -1,25 +1,74 @@
|
|||||||
<div class="shell">
|
<div class="shell">
|
||||||
<!-- Header -->
|
<!-- Modals -->
|
||||||
<header class="header">
|
@if (showAddStudentModal()) {
|
||||||
<button class="menu-toggle" (click)="onToggleSidebar()">☰</button>
|
<app-add-student-modal (studentCreated)="onStudentCreated($event)"
|
||||||
<span class="header-title">{{ auth.schoolDistrictName() }} — {{ auth.programName() }}</span>
|
(cancelled)="showAddStudentModal.set(false)" />
|
||||||
<button class="logout-btn" (click)="onLogout()">Log Out</button>
|
}
|
||||||
</header>
|
@if (editingStudent()) {
|
||||||
|
<app-edit-student-modal [student]="editingStudent()!" (saved)="onEditStudentSaved()"
|
||||||
|
(closed)="editingStudent.set(null)" />
|
||||||
|
}
|
||||||
|
|
||||||
<!-- Body: Sidebar + Main -->
|
<!-- Sidebar -->
|
||||||
<div class="body">
|
<div class="sidebar">
|
||||||
<nav class="sidebar" [class.expanded]="sidebarExpanded()">
|
<div class="sidebar-brand">
|
||||||
<a class="nav-item" routerLink="/students">Home</a>
|
<div class="brand-label">Progress Tracker</div>
|
||||||
<app-sidebar-tree-node [nodes]="sidebarTree()" [depth]="0" />
|
<div class="brand-sub">{{ auth.programName() }}</div>
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main class="content">
|
|
||||||
<router-outlet />
|
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Footer -->
|
<div class="sidebar-controls">
|
||||||
<footer class="footer">
|
<span class="controls-label">My Students</span>
|
||||||
<span>© 2026 WinStudentGoalTracker</span>
|
<label class="scope-toggle">
|
||||||
</footer>
|
<input type="checkbox" [checked]="showAll()" (change)="onToggleScope()" hidden>
|
||||||
|
<span class="toggle-track" [class.active]="showAll()">
|
||||||
|
<span class="toggle-thumb"></span>
|
||||||
|
</span>
|
||||||
|
All
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="student-list">
|
||||||
|
@for (group of groupedStudents(); track group.label) {
|
||||||
|
@if (group.label) {
|
||||||
|
<div class="group-header">{{ group.label }}</div>
|
||||||
|
}
|
||||||
|
@for (s of group.students; track s.studentId) {
|
||||||
|
<div class="student-item" [class.active]="selectedStudentId() === s.studentId"
|
||||||
|
(click)="onSelectStudent(s)">
|
||||||
|
<div class="student-item-info">
|
||||||
|
<div class="student-item-name" [class.bold]="selectedStudentId() === s.studentId">
|
||||||
|
{{ s.identifier }}
|
||||||
|
</div>
|
||||||
|
<div class="student-item-meta">
|
||||||
|
IEP: {{ formatDate(s.nextIepDate) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="edit-pencil" (click)="onEditStudent(s, $event)" aria-label="Edit student">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#bbb" stroke-width="1.5"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar-footer">
|
||||||
|
<button class="add-student-btn" (click)="onAddStudent()">+ Add Student</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar-nav">
|
||||||
|
<a class="nav-link" routerLink="/reports">Reports</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar-bottom">
|
||||||
|
<button class="logout-link" (click)="onLogout()">Log Out</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="main">
|
||||||
|
<router-outlet />
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
@@ -5,120 +5,241 @@
|
|||||||
|
|
||||||
.shell {
|
.shell {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
font-family: var(--font-family);
|
||||||
}
|
background: var(--bg-page);
|
||||||
|
color: var(--text-primary);
|
||||||
/* Header */
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
padding: 0 1rem;
|
|
||||||
height: 48px;
|
|
||||||
background: #fff;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-toggle {
|
|
||||||
background: none;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-toggle:hover {
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-title {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-btn {
|
|
||||||
background: none;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
color: #333;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-btn:hover {
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Body: Sidebar + Content */
|
|
||||||
.body {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ─── Sidebar ─── */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 0;
|
width: 260px;
|
||||||
background: #fff;
|
border-right: 1px solid var(--border-color);
|
||||||
border-right: 1px solid #ddd;
|
background: var(--bg-surface);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
|
||||||
transition: width 0.2s ease;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar.expanded {
|
.sidebar-brand {
|
||||||
width: 260px;
|
padding: 20px 18px 12px;
|
||||||
overflow-y: auto;
|
border-bottom: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item {
|
.brand-label {
|
||||||
display: block;
|
font-size: 13px;
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
color: #333;
|
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item:hover {
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item.active {
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #4f46e5;
|
letter-spacing: 0.04em;
|
||||||
background: #eef2ff;
|
text-transform: uppercase;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main content */
|
.brand-sub {
|
||||||
.content {
|
font-size: 15px;
|
||||||
flex: 1;
|
color: var(--text-secondary);
|
||||||
overflow-y: auto;
|
|
||||||
padding: 1.5rem;
|
|
||||||
background: #f5f5f5;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer */
|
.sidebar-controls {
|
||||||
.footer {
|
padding: 12px 18px 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 1rem;
|
gap: 8px;
|
||||||
height: 32px;
|
}
|
||||||
background: #fff;
|
|
||||||
border-top: 1px solid #ddd;
|
.controls-label {
|
||||||
color: #666;
|
font-size: 12px;
|
||||||
font-size: 0.75rem;
|
color: var(--text-muted);
|
||||||
flex-shrink: 0;
|
}
|
||||||
|
|
||||||
|
.scope-toggle {
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-track {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 30px;
|
||||||
|
height: 16px;
|
||||||
|
background: #d1d5db;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 2px;
|
||||||
|
transition: background var(--transition-normal);
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: var(--accent-indigo-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-thumb {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: transform var(--transition-normal);
|
||||||
|
|
||||||
|
.active > & {
|
||||||
|
transform: translateX(14px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Student List ─── */
|
||||||
|
.student-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0 8px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-header {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--text-faint);
|
||||||
|
padding: 12px 12px 4px;
|
||||||
|
margin-top: 4px;
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-top: none;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-item {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
transition: background var(--transition-fast);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-item-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-item-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
&.bold {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-item-meta {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.owner-tag {
|
||||||
|
margin-left: 6px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-pencil {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity var(--transition-fast);
|
||||||
|
|
||||||
|
.student-item:hover & {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Sidebar Footer ─── */
|
||||||
|
.sidebar-footer {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-student-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1.5px dashed var(--border-muted);
|
||||||
|
background: none;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: border-color var(--transition-fast), color var(--transition-fast);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--text-muted);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
display: block;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background var(--transition-fast);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-bottom {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-link {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-family: inherit;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Main Content ─── */
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--bg-page);
|
||||||
}
|
}
|
||||||
@@ -1,27 +1,25 @@
|
|||||||
import { Component, effect, inject, OnDestroy, signal } from '@angular/core';
|
import { Component, computed, effect, inject, signal } from '@angular/core';
|
||||||
import { NavigationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
|
import { RouterLink, RouterOutlet, Router } from '@angular/router';
|
||||||
import { Subscription } from 'rxjs';
|
|
||||||
import { filter } from 'rxjs/operators';
|
|
||||||
import { Auth } from '../../../shared/services/auth';
|
import { Auth } from '../../../shared/services/auth';
|
||||||
import { StudentService } from '../../../shared/services/student.service';
|
import { StudentService } from '../../../shared/services/student.service';
|
||||||
import { StudentCardDto } from '../../../shared/classes/student-card.dto';
|
import { StudentCardDto } from '../../../shared/classes/student-card.dto';
|
||||||
import { SidebarNode } from '../../../shared/classes/sidebar-node';
|
import { AddStudentModal } from '../../components/add-student-modal/add-student-modal';
|
||||||
import { SidebarTreeNode } from '../../components/sidebar-tree-node/sidebar-tree-node';
|
import { EditStudentModal } from '../../components/edit-student-modal/edit-student-modal';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-home',
|
selector: 'app-home',
|
||||||
imports: [RouterOutlet, RouterLink, SidebarTreeNode],
|
imports: [RouterOutlet, RouterLink, AddStudentModal, EditStudentModal],
|
||||||
templateUrl: './home.html',
|
templateUrl: './home.html',
|
||||||
styleUrl: './home.scss',
|
styleUrl: './home.scss',
|
||||||
})
|
})
|
||||||
export class Home implements OnDestroy {
|
export class Home {
|
||||||
|
|
||||||
// ************************** Constructor **************************
|
// ************************** Constructor **************************
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.loadStudents();
|
this.loadStudents();
|
||||||
|
|
||||||
// Reload the sidebar tree whenever data changes elsewhere.
|
// Reload student list when data changes elsewhere.
|
||||||
let initialized = false;
|
let initialized = false;
|
||||||
effect(() => {
|
effect(() => {
|
||||||
this.studentService.dataVersion();
|
this.studentService.dataVersion();
|
||||||
@@ -30,18 +28,6 @@ export class Home implements OnDestroy {
|
|||||||
}
|
}
|
||||||
initialized = true;
|
initialized = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Auto-expand sidebar nodes to match the current route.
|
|
||||||
this.routeSub = this.router.events.pipe(
|
|
||||||
filter(e => e instanceof NavigationEnd)
|
|
||||||
).subscribe(() => {
|
|
||||||
this.expandToRoute(this.router.url);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Patch individual sidebar node labels without a full rebuild.
|
|
||||||
this.labelSub = this.studentService.sidebarLabelUpdate$.subscribe(update => {
|
|
||||||
this.patchNodeLabel(this.sidebarTree(), update.routerLink, update.label);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ************************** Declarations *************************
|
// ************************** Declarations *************************
|
||||||
@@ -49,226 +35,102 @@ export class Home implements OnDestroy {
|
|||||||
protected readonly auth = inject(Auth);
|
protected readonly auth = inject(Auth);
|
||||||
private readonly router = inject(Router);
|
private readonly router = inject(Router);
|
||||||
private readonly studentService = inject(StudentService);
|
private readonly studentService = inject(StudentService);
|
||||||
private readonly routeSub: Subscription;
|
|
||||||
private readonly labelSub: Subscription;
|
|
||||||
protected readonly sidebarExpanded = signal(true);
|
|
||||||
protected readonly sidebarTree = signal<SidebarNode[]>([]);
|
|
||||||
|
|
||||||
// ************************** Properties ***************************
|
protected readonly students = signal<StudentCardDto[]>([]);
|
||||||
|
protected readonly selectedStudentId = signal<string | null>(null);
|
||||||
|
protected readonly showAll = signal(false);
|
||||||
|
protected readonly showAddStudentModal = signal(false);
|
||||||
|
protected readonly editingStudent = signal<StudentCardDto | null>(null);
|
||||||
|
|
||||||
// ************************ Public Methods *************************
|
// Groups students by owner when "All" is active.
|
||||||
|
protected readonly groupedStudents = computed(() => {
|
||||||
|
const all = this.students();
|
||||||
|
if (!this.showAll()) {
|
||||||
|
return [{ label: null, students: all }];
|
||||||
|
}
|
||||||
|
|
||||||
|
const mine = all.filter(s => s.isMine);
|
||||||
|
const others = all.filter(s => !s.isMine);
|
||||||
|
|
||||||
|
// Group others by ownerName.
|
||||||
|
const byOwner = new Map<string, StudentCardDto[]>();
|
||||||
|
for (const s of others) {
|
||||||
|
const key = s.ownerName || 'Unknown';
|
||||||
|
const list = byOwner.get(key) || [];
|
||||||
|
list.push(s);
|
||||||
|
byOwner.set(key, list);
|
||||||
|
}
|
||||||
|
|
||||||
|
const groups: { label: string | null; students: StudentCardDto[] }[] = [];
|
||||||
|
if (mine.length) {
|
||||||
|
groups.push({ label: 'My Students', students: mine });
|
||||||
|
}
|
||||||
|
// Sort other teachers alphabetically.
|
||||||
|
const sortedKeys = [...byOwner.keys()].sort((a, b) =>
|
||||||
|
a.localeCompare(b, undefined, { sensitivity: 'base' })
|
||||||
|
);
|
||||||
|
for (const key of sortedKeys) {
|
||||||
|
groups.push({ label: key, students: byOwner.get(key)! });
|
||||||
|
}
|
||||||
|
return groups;
|
||||||
|
});
|
||||||
|
|
||||||
// ************************ Event Handlers *************************
|
// ************************ Event Handlers *************************
|
||||||
|
|
||||||
onToggleSidebar() {
|
onSelectStudent(student: StudentCardDto) {
|
||||||
this.sidebarExpanded.update(v => !v);
|
this.selectedStudentId.set(student.studentId);
|
||||||
|
this.router.navigate(['/students', student.studentId]);
|
||||||
|
}
|
||||||
|
|
||||||
|
onToggleScope() {
|
||||||
|
this.showAll.update(v => !v);
|
||||||
|
this.loadStudents();
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddStudent() {
|
||||||
|
this.showAddStudentModal.set(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
onStudentCreated(student: StudentCardDto) {
|
||||||
|
this.showAddStudentModal.set(false);
|
||||||
|
this.studentService.notifyDataChanged();
|
||||||
|
this.selectedStudentId.set(student.studentId);
|
||||||
|
this.router.navigate(['/students', student.studentId]);
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditStudent(student: StudentCardDto, event: Event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
this.editingStudent.set(student);
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditStudentSaved() {
|
||||||
|
this.editingStudent.set(null);
|
||||||
|
this.loadStudents();
|
||||||
}
|
}
|
||||||
|
|
||||||
// *****************************************************************
|
|
||||||
// Logs the user out and sends them back to the login screen.
|
|
||||||
// *****************************************************************
|
|
||||||
onLogout() {
|
onLogout() {
|
||||||
this.auth.logout().subscribe();
|
this.auth.logout().subscribe();
|
||||||
this.auth.forceLogout();
|
this.auth.forceLogout();
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy() {
|
// ************************ Formatting Helpers **********************
|
||||||
this.routeSub.unsubscribe();
|
|
||||||
this.labelSub.unsubscribe();
|
formatDate(d: Date | null): string {
|
||||||
|
if (!d) return '';
|
||||||
|
return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
||||||
}
|
}
|
||||||
|
|
||||||
// ********************** Support Procedures ***********************
|
// ********************** Support Procedures ***********************
|
||||||
|
|
||||||
// *****************************************************************
|
|
||||||
// Recursively walks the sidebar tree to find a node whose
|
|
||||||
// routerLink matches the given link, and updates its label.
|
|
||||||
// *****************************************************************
|
|
||||||
private patchNodeLabel(nodes: SidebarNode[], routerLink: string[], label: string): boolean {
|
|
||||||
for (const node of nodes) {
|
|
||||||
if (node.routerLink && node.routerLink.join('/') === routerLink.join('/')) {
|
|
||||||
node.label = label;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (node.children && this.patchNodeLabel(node.children, routerLink, label)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// *****************************************************************
|
|
||||||
// Loads student list, sorts by identifier, and builds the sidebar
|
|
||||||
// tree with lazy-loading callbacks for goals and benchmarks.
|
|
||||||
// When scope is 'all', groups students by owning user.
|
|
||||||
// *****************************************************************
|
|
||||||
private loadStudents() {
|
private loadStudents() {
|
||||||
// Fetch with 'all' scope so the sidebar can show grouped nodes
|
const scope = this.showAll() ? 'all' : undefined;
|
||||||
// when the StudentCardList toggle is active.
|
this.studentService.getMyStudents(scope).then(data => {
|
||||||
this.studentService.getMyStudents('all').then(data => {
|
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
const sorted = (data.payload || []).sort((a, b) =>
|
const sorted = (data.payload || []).sort((a, b) =>
|
||||||
a.identifier.localeCompare(b.identifier, undefined, { sensitivity: 'base' })
|
a.identifier.localeCompare(b.identifier, undefined, { sensitivity: 'base' })
|
||||||
);
|
);
|
||||||
this.sidebarTree.set(this.buildTree(sorted));
|
this.students.set(sorted);
|
||||||
this.expandToRoute(this.router.url);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// *****************************************************************
|
|
||||||
// Builds the sidebar node tree from a list of students.
|
|
||||||
// Groups students by ownerName — "My Students" first, then other
|
|
||||||
// owners' groups sorted alphabetically.
|
|
||||||
// *****************************************************************
|
|
||||||
private buildTree(students: StudentCardDto[]): SidebarNode[] {
|
|
||||||
// Group students by ownerName. Students with isMine go into "My Students".
|
|
||||||
const myStudents: StudentCardDto[] = [];
|
|
||||||
const otherGroups = new Map<string, StudentCardDto[]>();
|
|
||||||
|
|
||||||
for (const s of students) {
|
|
||||||
if (s.isMine !== false) {
|
|
||||||
myStudents.push(s);
|
|
||||||
} else {
|
|
||||||
const key = s.ownerName ?? 'Unknown';
|
|
||||||
if (!otherGroups.has(key)) otherGroups.set(key, []);
|
|
||||||
otherGroups.get(key)!.push(s);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const nodes: SidebarNode[] = [{
|
|
||||||
label: 'My Students',
|
|
||||||
routerLink: ['/students'],
|
|
||||||
expanded: true,
|
|
||||||
childCount: myStudents.length,
|
|
||||||
children: myStudents.map(s => this.buildStudentNode(s)),
|
|
||||||
}];
|
|
||||||
|
|
||||||
// Add other users' groups sorted by owner name.
|
|
||||||
const sortedOwners = [...otherGroups.keys()].sort((a, b) =>
|
|
||||||
a.localeCompare(b, undefined, { sensitivity: 'base' })
|
|
||||||
);
|
|
||||||
|
|
||||||
for (const ownerName of sortedOwners) {
|
|
||||||
const group = otherGroups.get(ownerName)!;
|
|
||||||
const firstName = ownerName.split(' ')[0];
|
|
||||||
nodes.push({
|
|
||||||
label: `${firstName}'s Students`,
|
|
||||||
routerLink: ['/students'],
|
|
||||||
expanded: false,
|
|
||||||
childCount: group.length,
|
|
||||||
children: group.map(s => this.buildStudentNode(s)),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
nodes.push({
|
|
||||||
label: 'Reports',
|
|
||||||
routerLink: ['/reports'],
|
|
||||||
});
|
|
||||||
|
|
||||||
return nodes;
|
|
||||||
}
|
|
||||||
|
|
||||||
// *****************************************************************
|
|
||||||
// Builds a single student sidebar node with lazy-loaded goal
|
|
||||||
// children.
|
|
||||||
// *****************************************************************
|
|
||||||
private buildStudentNode(s: StudentCardDto): SidebarNode {
|
|
||||||
return {
|
|
||||||
label: s.identifier,
|
|
||||||
routerLink: ['/students', s.studentId],
|
|
||||||
childCount: s.goalCount > 0 ? 1 : 0,
|
|
||||||
children: s.goalCount > 0 ? [{
|
|
||||||
label: 'Goals',
|
|
||||||
routerLink: ['/students', s.studentId, 'goals'],
|
|
||||||
childCount: s.goalCount,
|
|
||||||
loadChildren: () => this.loadGoalNodes(s.studentId),
|
|
||||||
}] : undefined,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// *****************************************************************
|
|
||||||
// Lazy-loads individual goal nodes for a student. Called when
|
|
||||||
// the "Goals" node is expanded for the first time.
|
|
||||||
// *****************************************************************
|
|
||||||
private async loadGoalNodes(studentId: string): Promise<SidebarNode[]> {
|
|
||||||
const result = await this.studentService.getGoalsForStudent(studentId);
|
|
||||||
if (!result.success || !result.payload) return [];
|
|
||||||
|
|
||||||
return result.payload.goals.map(goal => ({
|
|
||||||
label: goal.category,
|
|
||||||
routerLink: ['/students', studentId, 'goals', goal.goalId],
|
|
||||||
childCount: 2,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: goal.progressEventCount > 0 ? `Progress Events (${goal.progressEventCount})` : 'Progress Events',
|
|
||||||
routerLink: ['/students', studentId, 'goals', goal.goalId, 'progress'],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Benchmarks',
|
|
||||||
routerLink: ['/students', studentId, 'goals', goal.goalId, 'benchmarks'],
|
|
||||||
childCount: goal.benchmarkCount,
|
|
||||||
loadChildren: goal.benchmarkCount > 0
|
|
||||||
? () => this.loadBenchmarkNodes(studentId, goal.goalId)
|
|
||||||
: undefined,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
// *****************************************************************
|
|
||||||
// Lazy-loads benchmark leaf nodes for a goal. Called when a
|
|
||||||
// "Benchmarks" node is expanded for the first time.
|
|
||||||
// *****************************************************************
|
|
||||||
private async loadBenchmarkNodes(studentId: string, goalId: string): Promise<SidebarNode[]> {
|
|
||||||
const result = await this.studentService.getBenchmarksForStudent(studentId);
|
|
||||||
if (!result.success || !result.payload) return [];
|
|
||||||
|
|
||||||
return result.payload.benchmarks
|
|
||||||
.filter(b => b.goalId === goalId)
|
|
||||||
.map(b => ({
|
|
||||||
label: b.shortName || b.benchmark,
|
|
||||||
routerLink: ['/students', studentId, 'goals', goalId, 'benchmarks', b.benchmarkId],
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
// *****************************************************************
|
|
||||||
// Walks the sidebar tree and expands any node whose routerLink is
|
|
||||||
// a prefix of the current URL. Triggers lazy loading if needed.
|
|
||||||
// Returns true if the current URL matches or is a descendant of
|
|
||||||
// any node in the given list.
|
|
||||||
// *****************************************************************
|
|
||||||
private async expandToRoute(url: string, nodes?: SidebarNode[]): Promise<boolean> {
|
|
||||||
const tree = nodes || this.sidebarTree();
|
|
||||||
let matched = false;
|
|
||||||
|
|
||||||
for (const node of tree) {
|
|
||||||
const nodePath = node.routerLink ? node.routerLink.join('/') : '';
|
|
||||||
|
|
||||||
// Check if this node is the target or an ancestor of the target.
|
|
||||||
const isMatch = nodePath !== '' && url === nodePath;
|
|
||||||
const isAncestor = nodePath !== '' && url.startsWith(nodePath + '/');
|
|
||||||
|
|
||||||
if (isMatch || isAncestor) {
|
|
||||||
matched = true;
|
|
||||||
|
|
||||||
if (isAncestor) {
|
|
||||||
// Expand this node to reveal children.
|
|
||||||
if (node.loadChildren && !node.children) {
|
|
||||||
node.children = await node.loadChildren();
|
|
||||||
}
|
|
||||||
node.expanded = true;
|
|
||||||
|
|
||||||
// Continue down the tree.
|
|
||||||
if (node.children) {
|
|
||||||
await this.expandToRoute(url, node.children);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return matched;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
export interface CategoryColor {
|
||||||
|
bg: string;
|
||||||
|
border: string;
|
||||||
|
text: string;
|
||||||
|
accent: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Single color used for all goals, regardless of category. */
|
||||||
|
export const GOAL_COLOR: CategoryColor = {
|
||||||
|
bg: '#EEF2FF',
|
||||||
|
border: '#818CF8',
|
||||||
|
text: '#4338CA',
|
||||||
|
accent: '#6366F1',
|
||||||
|
};
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
export interface SidebarNode {
|
|
||||||
label: string;
|
|
||||||
routerLink?: string[];
|
|
||||||
children?: SidebarNode[];
|
|
||||||
expanded?: boolean;
|
|
||||||
loadChildren?: () => Promise<SidebarNode[]>;
|
|
||||||
childCount?: number;
|
|
||||||
}
|
|
||||||
@@ -1,13 +1,78 @@
|
|||||||
/* You can add global styles to this file, and also import other style files */
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
/* ─── Design Tokens ─── */
|
||||||
|
:root {
|
||||||
|
--font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
|
||||||
|
--bg-page: #F8F8F6;
|
||||||
|
--bg-surface: #FFFFFF;
|
||||||
|
--bg-hover: #F0F0EC;
|
||||||
|
--border-color: #E5E5E0;
|
||||||
|
--border-muted: #D5D5D0;
|
||||||
|
--text-primary: #1a1a1a;
|
||||||
|
--text-secondary: #555;
|
||||||
|
--text-muted: #888;
|
||||||
|
--text-faint: #999;
|
||||||
|
--text-dim: #bbb;
|
||||||
|
--accent-indigo: #4338CA;
|
||||||
|
--accent-indigo-light: #6366F1;
|
||||||
|
--radius-sm: 4px;
|
||||||
|
--radius-md: 6px;
|
||||||
|
--radius-lg: 8px;
|
||||||
|
--radius-xl: 10px;
|
||||||
|
--radius-2xl: 12px;
|
||||||
|
--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);
|
||||||
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||||
|
--transition-fast: 0.15s ease;
|
||||||
|
--transition-normal: 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Reset ─── */
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
font-family: var(--font-family);
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: var(--bg-page);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="date"] {
|
input[type="date"] {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ─── Focus Styles ─── */
|
||||||
|
input:focus,
|
||||||
|
textarea:focus,
|
||||||
|
select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent-indigo) !important;
|
||||||
|
box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Scrollbar (subtle) ─── */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #d5d5d0;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #bbb;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user