mirror of
https://github.com/opelly27/WinStudentGoalTracker.git
synced 2026-05-20 02:57:36 +00:00
first commit
This commit is contained in:
+15
-66
@@ -1,83 +1,32 @@
|
|||||||
<div class="overlay" (click)="onCancel()"></div>
|
<app-modal-shell title="Add Goal" (closed)="cancelled.emit()">
|
||||||
|
|
||||||
<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">
|
<div class="field">
|
||||||
<label for="category">Category<span class="required">*</span></label>
|
<label class="field-label">Category</label>
|
||||||
<input
|
<input class="field-input" type="text" [(ngModel)]="form.category"
|
||||||
id="category"
|
placeholder="e.g. Reading, Math, Behavior…" />
|
||||||
type="text"
|
|
||||||
[(ngModel)]="form.category"
|
|
||||||
name="category"
|
|
||||||
required
|
|
||||||
placeholder="e.g. Academics"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="baseline">Baseline</label>
|
<label class="field-label">Baseline</label>
|
||||||
<textarea
|
<textarea class="field-input field-textarea" [(ngModel)]="form.baseline"
|
||||||
id="baseline"
|
placeholder="Enter baseline..."></textarea>
|
||||||
[(ngModel)]="form.baseline"
|
|
||||||
name="baseline"
|
|
||||||
rows="3"
|
|
||||||
placeholder="Enter baseline..."
|
|
||||||
></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="description">Goal</label>
|
<label class="field-label">Goal</label>
|
||||||
<textarea
|
<textarea class="field-input field-textarea" [(ngModel)]="form.description"
|
||||||
id="description"
|
placeholder="Enter goal..."></textarea>
|
||||||
[(ngModel)]="form.description"
|
|
||||||
name="description"
|
|
||||||
rows="3"
|
|
||||||
placeholder="Enter goal..."
|
|
||||||
></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="targetCompletionDate">Target Completion Date</label>
|
<label class="field-label">Target Completion Date</label>
|
||||||
<input
|
<input class="field-input" type="date" [(ngModel)]="form.targetCompletionDate" />
|
||||||
id="targetCompletionDate"
|
|
||||||
type="date"
|
|
||||||
[(ngModel)]="form.targetCompletionDate"
|
|
||||||
name="targetCompletionDate"
|
|
||||||
/>
|
|
||||||
</div>
|
</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()) {
|
@if (errorMessage()) {
|
||||||
<p class="error">{{ errorMessage() }}</p>
|
<p class="error">{{ errorMessage() }}</p>
|
||||||
}
|
}
|
||||||
|
|
||||||
<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]="goalForm.invalid || isSubmitting()">
|
<button class="btn-primary" (click)="onSubmit()" [disabled]="isSubmitting() || !form.category.trim()">
|
||||||
{{ isSubmitting() ? 'Saving...' : 'Add Goal' }}
|
{{ isSubmitting() ? 'Saving...' : 'Add Goal' }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</app-modal-shell>
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+1
-146
@@ -1,146 +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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|||||||
+4
-27
@@ -1,21 +1,17 @@
|
|||||||
import { Component, computed, inject, input, output, signal } from '@angular/core';
|
import { Component, inject, input, output, signal } from '@angular/core';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { ModalShell } from '../modal-shell/modal-shell';
|
||||||
import { CreateGoalDto } from '../../../shared/classes/create-goal.dto';
|
import { CreateGoalDto } from '../../../shared/classes/create-goal.dto';
|
||||||
import { StudentGoalItem } from '../../../shared/classes/student-goal';
|
import { StudentGoalItem } from '../../../shared/classes/student-goal';
|
||||||
import { StudentService } from '../../../shared/services/student.service';
|
import { StudentService } from '../../../shared/services/student.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-add-goal-modal',
|
selector: 'app-add-goal-modal',
|
||||||
imports: [FormsModule],
|
imports: [FormsModule, ModalShell],
|
||||||
templateUrl: './add-goal-modal.html',
|
templateUrl: './add-goal-modal.html',
|
||||||
styleUrl: './add-goal-modal.scss',
|
styleUrl: './add-goal-modal.scss',
|
||||||
})
|
})
|
||||||
export class AddGoalModal {
|
export class AddGoalModal {
|
||||||
|
|
||||||
// ************************** Constructor **************************
|
|
||||||
|
|
||||||
// ************************** Declarations *************************
|
|
||||||
|
|
||||||
private readonly studentService = inject(StudentService);
|
private readonly studentService = inject(StudentService);
|
||||||
|
|
||||||
readonly studentId = input.required<string>();
|
readonly studentId = input.required<string>();
|
||||||
@@ -27,10 +23,6 @@ export class AddGoalModal {
|
|||||||
protected readonly isSubmitting = signal(false);
|
protected readonly isSubmitting = signal(false);
|
||||||
protected readonly errorMessage = signal<string | null>(null);
|
protected readonly errorMessage = signal<string | null>(null);
|
||||||
|
|
||||||
protected readonly parentGoalOptions = computed(() =>
|
|
||||||
this.existingGoals().filter(g => g.goalParentId === null)
|
|
||||||
);
|
|
||||||
|
|
||||||
protected form: CreateGoalDto = {
|
protected form: CreateGoalDto = {
|
||||||
description: '',
|
description: '',
|
||||||
category: '',
|
category: '',
|
||||||
@@ -39,9 +31,6 @@ export class AddGoalModal {
|
|||||||
targetCompletionDate: null,
|
targetCompletionDate: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
// *****************************************************************
|
|
||||||
// Pre-fills targetCompletionDate from the student's nextIepDate.
|
|
||||||
// *****************************************************************
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
const iepDate = this.nextIepDate?.();
|
const iepDate = this.nextIepDate?.();
|
||||||
if (iepDate) {
|
if (iepDate) {
|
||||||
@@ -49,18 +38,12 @@ export class AddGoalModal {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ************************** Properties ***************************
|
|
||||||
|
|
||||||
// ************************ Public Methods *************************
|
|
||||||
|
|
||||||
// ************************ Event Handlers *************************
|
|
||||||
|
|
||||||
async onSubmit() {
|
async onSubmit() {
|
||||||
|
if (!this.form.category.trim()) return;
|
||||||
this.errorMessage.set(null);
|
this.errorMessage.set(null);
|
||||||
this.isSubmitting.set(true);
|
this.isSubmitting.set(true);
|
||||||
|
|
||||||
const result = await this.studentService.createGoal(this.studentId(), this.form);
|
const result = await this.studentService.createGoal(this.studentId(), this.form);
|
||||||
|
|
||||||
this.isSubmitting.set(false);
|
this.isSubmitting.set(false);
|
||||||
|
|
||||||
if (!result.success) {
|
if (!result.success) {
|
||||||
@@ -70,10 +53,4 @@ export class AddGoalModal {
|
|||||||
|
|
||||||
this.goalCreated.emit(result.payload!);
|
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 ***********************
|
|
||||||
}
|
}
|
||||||
|
|||||||
+42
-68
@@ -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;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #EEF2FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn:hover {
|
&:disabled {
|
||||||
background: #eef2ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-btn: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
-1
@@ -125,7 +125,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() {
|
||||||
|
|||||||
+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 { getCategoryColor } 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 goalCategory = input<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 getCategoryColor(this.goalCategory());
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+29
@@ -0,0 +1,29 @@
|
|||||||
|
<app-modal-shell title="Edit Goal" (closed)="closed.emit()">
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Category</label>
|
||||||
|
<input class="field-input" type="text" [(ngModel)]="category" placeholder="e.g. Reading, Math, Behavior…" />
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Description</label>
|
||||||
|
<textarea class="field-input field-textarea" [(ngModel)]="description"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Baseline</label>
|
||||||
|
<textarea class="field-input field-textarea" [(ngModel)]="baseline" placeholder="Enter baseline..."></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="field-label">Due Date</label>
|
||||||
|
<input class="field-input" type="date" [(ngModel)]="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)="onSave()" [disabled]="saving()">
|
||||||
|
{{ saving() ? 'Saving...' : 'Save' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</app-modal-shell>
|
||||||
+1
@@ -0,0 +1 @@
|
|||||||
|
/* Inherits all styles from modal-shell via ::ng-deep */
|
||||||
+58
@@ -0,0 +1,58 @@
|
|||||||
|
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 { StudentGoalItem } from '../../../shared/classes/student-goal';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-edit-goal-modal',
|
||||||
|
imports: [FormsModule, ModalShell],
|
||||||
|
templateUrl: './edit-goal-modal.html',
|
||||||
|
styleUrl: './edit-goal-modal.scss',
|
||||||
|
})
|
||||||
|
export class EditGoalModal {
|
||||||
|
private readonly studentService = inject(StudentService);
|
||||||
|
|
||||||
|
readonly studentId = input.required<string>();
|
||||||
|
readonly goal = input.required<StudentGoalItem>();
|
||||||
|
readonly saved = output<void>();
|
||||||
|
readonly closed = output<void>();
|
||||||
|
|
||||||
|
protected readonly saving = signal(false);
|
||||||
|
protected readonly errorMessage = signal<string | null>(null);
|
||||||
|
|
||||||
|
protected category = '';
|
||||||
|
protected description = '';
|
||||||
|
protected baseline = '';
|
||||||
|
protected targetCompletionDate: string | null = null;
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
const g = this.goal();
|
||||||
|
this.category = g.category;
|
||||||
|
this.description = g.description;
|
||||||
|
this.baseline = g.baseline;
|
||||||
|
this.targetCompletionDate = g.targetCompletionDate ? g.targetCompletionDate.substring(0, 10) : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async onSave() {
|
||||||
|
if (!this.category.trim() || !this.description.trim()) return;
|
||||||
|
this.saving.set(true);
|
||||||
|
this.errorMessage.set(null);
|
||||||
|
|
||||||
|
const result = await this.studentService.updateGoal(this.studentId(), this.goal().goalId, {
|
||||||
|
category: this.category,
|
||||||
|
description: this.description,
|
||||||
|
baseline: this.baseline,
|
||||||
|
targetCompletionDate: this.targetCompletionDate,
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+45
-62
@@ -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;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #EEF2FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn:hover {
|
&:disabled {
|
||||||
background: #eef2ff;
|
opacity: 0.5;
|
||||||
|
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 {
|
||||||
@@ -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,135 @@
|
|||||||
|
@if (!student()) {
|
||||||
|
<div class="empty-panel">
|
||||||
|
<span class="empty-text">Select a student</span>
|
||||||
|
</div>
|
||||||
|
} @else {
|
||||||
|
<!-- Modals -->
|
||||||
|
@if (showAddGoalModal()) {
|
||||||
|
<app-add-goal-modal [studentId]="studentId()!" [existingGoals]="goals()" [nextIepDate]="nextIepDate()"
|
||||||
|
(goalCreated)="onGoalCreated($event)" (cancelled)="showAddGoalModal.set(false)" />
|
||||||
|
}
|
||||||
|
@if (showEditGoalModal() && selectedGoal()) {
|
||||||
|
<app-edit-goal-modal [studentId]="studentId()!" [goal]="selectedGoal()!" (saved)="onEditGoalSaved()"
|
||||||
|
(closed)="showEditGoalModal.set(false)" />
|
||||||
|
}
|
||||||
|
@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"
|
||||||
|
[goalCategory]="selectedGoal()!.category" [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">
|
||||||
|
@for (g of goals(); track g.goalId) {
|
||||||
|
<button class="goal-tab" [class.active]="selectedGoalId() === g.goalId || (selectedGoal()?.goalId === g.goalId)"
|
||||||
|
[style.border-color]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).border : '#E5E5E0'"
|
||||||
|
[style.background]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).bg : '#FFF'"
|
||||||
|
[style.color]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).text : '#666'"
|
||||||
|
(click)="onSelectGoal(g.goalId)">
|
||||||
|
{{ g.category }}
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
<button class="goal-tab add-goal" (click)="onAddGoal()">+ Goal</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" [style.color]="goalColors().text"
|
||||||
|
[style.background]="goalColors().bg">{{ selectedGoal()!.category }} Goal</span>
|
||||||
|
@if (selectedGoal()!.targetCompletionDate) {
|
||||||
|
<span class="goal-due">Due {{ formatDate(selectedGoal()!.targetCompletionDate) }}</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>
|
||||||
|
</div>
|
||||||
|
<p class="goal-description">{{ selectedGoal()!.description }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sub Tabs -->
|
||||||
|
<div class="sub-tabs">
|
||||||
|
<button class="sub-tab" [class.active]="activeTab() === 'benchmarks'"
|
||||||
|
[style.color]="activeTab() === 'benchmarks' ? goalColors().text : '#888'"
|
||||||
|
[style.border-bottom-color]="activeTab() === 'benchmarks' ? goalColors().accent : 'transparent'"
|
||||||
|
(click)="onTabChange('benchmarks')">
|
||||||
|
Benchmarks ({{ goalBenchmarks().length }})
|
||||||
|
</button>
|
||||||
|
<button class="sub-tab" [class.active]="activeTab() === 'progress'"
|
||||||
|
[style.color]="activeTab() === 'progress' ? goalColors().text : '#888'"
|
||||||
|
[style.border-bottom-color]="activeTab() === 'progress' ? goalColors().accent : 'transparent'"
|
||||||
|
(click)="onTabChange('progress')">
|
||||||
|
Progress Events ({{ sortedProgressEvents().length }})
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Benchmarks Tab -->
|
||||||
|
@if (activeTab() === 'benchmarks') {
|
||||||
|
<div class="tab-content">
|
||||||
|
@for (b of goalBenchmarks(); track b.benchmarkId) {
|
||||||
|
<div class="benchmark-card">
|
||||||
|
<div class="benchmark-header">
|
||||||
|
<span class="benchmark-name" [style.color]="goalColors().text">{{ 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>
|
||||||
|
}
|
||||||
|
<button class="add-btn" (click)="onAddBenchmark()">+ Add Benchmark</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<!-- Progress Tab -->
|
||||||
|
@if (activeTab() === 'progress') {
|
||||||
|
<div class="tab-content timeline">
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
@for (ev of sortedProgressEvents(); track ev.progressEventId) {
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-dot" [style.background]="goalColors().bg"
|
||||||
|
[style.border-color]="goalColors().border"></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>
|
||||||
|
}
|
||||||
|
<button class="add-btn" (click)="onNewEvent()">+ Log Progress Event</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
} @else {
|
||||||
|
<div class="empty-panel">
|
||||||
|
<span class="empty-text">Add a goal to get started</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,276 @@
|
|||||||
|
: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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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,230 @@
|
|||||||
|
import { Component, computed, effect, inject, signal } 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 { getCategoryColor, CategoryColor } from '../../../shared/classes/category-colors';
|
||||||
|
import { EditGoalModal } from '../edit-goal-modal/edit-goal-modal';
|
||||||
|
import { EditBenchmarkModal } from '../edit-benchmark-modal/edit-benchmark-modal';
|
||||||
|
import { EditEventModal } from '../edit-event-modal/edit-event-modal';
|
||||||
|
import { AddGoalModal } from '../add-goal-modal/add-goal-modal';
|
||||||
|
|
||||||
|
type TabView = 'benchmarks' | 'progress';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-workspace',
|
||||||
|
imports: [EditGoalModal, EditBenchmarkModal, EditEventModal, AddGoalModal],
|
||||||
|
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.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
|
||||||
|
let initialized = false;
|
||||||
|
effect(() => {
|
||||||
|
this.studentService.dataVersion();
|
||||||
|
if (initialized && this.studentId()) {
|
||||||
|
this.loadStudentData(this.studentId()!);
|
||||||
|
}
|
||||||
|
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 showAddGoalModal = signal(false);
|
||||||
|
protected readonly showEditGoalModal = signal(false);
|
||||||
|
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 goalColors = computed<CategoryColor>(() => {
|
||||||
|
return getCategoryColor(this.selectedGoal()?.category ?? '');
|
||||||
|
});
|
||||||
|
|
||||||
|
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.showEditGoalModal.set(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditGoalSaved() {
|
||||||
|
this.showEditGoalModal.set(false);
|
||||||
|
this.loadStudentData(this.studentId()!);
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddGoal() {
|
||||||
|
this.showAddGoalModal.set(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
onGoalCreated(goal: StudentGoalItem) {
|
||||||
|
this.showAddGoalModal.set(false);
|
||||||
|
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 **********************
|
||||||
|
|
||||||
|
getCatColor(category: string): CategoryColor {
|
||||||
|
return getCategoryColor(category);
|
||||||
|
}
|
||||||
|
|
||||||
|
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' });
|
||||||
|
}
|
||||||
|
|
||||||
|
truncate(text: string, max: number): string {
|
||||||
|
return text.length > max ? text.slice(0, max) + '…' : text;
|
||||||
|
}
|
||||||
|
|
||||||
|
getRelatedEventCount(benchmarkId: string): number {
|
||||||
|
// We don't have benchmark associations in the event DTO from the list endpoint,
|
||||||
|
// so we return 0. The mockup shows this but we can't derive it without extra API calls.
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ********************** 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,72 @@
|
|||||||
<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>
|
</div>
|
||||||
|
|
||||||
<main class="content">
|
<div class="sidebar-controls">
|
||||||
|
<span class="controls-label">My Students</span>
|
||||||
|
<label class="scope-toggle">
|
||||||
|
<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 (s of 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) }}
|
||||||
|
@if (showAll() && s.ownerName) {
|
||||||
|
<span class="owner-tag">· {{ s.ownerName }}</span>
|
||||||
|
}
|
||||||
|
</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 />
|
<router-outlet />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="footer">
|
|
||||||
<span>© 2026 WinStudentGoalTracker</span>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
@@ -5,120 +5,225 @@
|
|||||||
|
|
||||||
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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, 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,69 @@ 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);
|
||||||
// ************************ Public Methods *************************
|
protected readonly showAll = signal(false);
|
||||||
|
protected readonly showAddStudentModal = signal(false);
|
||||||
|
protected readonly editingStudent = signal<StudentCardDto | null>(null);
|
||||||
|
|
||||||
// ************************ 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,22 @@
|
|||||||
|
export interface CategoryColor {
|
||||||
|
bg: string;
|
||||||
|
border: string;
|
||||||
|
text: string;
|
||||||
|
accent: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CATEGORY_COLORS: Record<string, CategoryColor> = {
|
||||||
|
Reading: { bg: '#EEF2FF', border: '#818CF8', text: '#4338CA', accent: '#6366F1' },
|
||||||
|
Math: { bg: '#FFF7ED', border: '#FB923C', text: '#C2410C', accent: '#F97316' },
|
||||||
|
Writing: { bg: '#F0FDF4', border: '#4ADE80', text: '#15803D', accent: '#22C55E' },
|
||||||
|
Behavior: { bg: '#FDF4FF', border: '#C084FC', text: '#7E22CE', accent: '#A855F7' },
|
||||||
|
Speech: { bg: '#FFF1F2', border: '#FB7185', text: '#BE123C', accent: '#F43F5E' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const DEFAULT_COLOR: CategoryColor = {
|
||||||
|
bg: '#F5F5F0', border: '#A0A090', text: '#444', accent: '#666',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getCategoryColor(category: string): CategoryColor {
|
||||||
|
return CATEGORY_COLORS[category] ?? DEFAULT_COLOR;
|
||||||
|
}
|
||||||
@@ -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