mirror of
https://github.com/opelly27/WinStudentGoalTracker.git
synced 2026-05-20 14:37:34 +00:00
first commit
This commit is contained in:
+29
-80
@@ -1,83 +1,32 @@
|
||||
<div class="overlay" (click)="onCancel()"></div>
|
||||
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Add Goal</h2>
|
||||
<button class="close-btn" (click)="onCancel()" aria-label="Close">×</button>
|
||||
<app-modal-shell title="Add Goal" (closed)="cancelled.emit()">
|
||||
<div class="field">
|
||||
<label class="field-label">Category</label>
|
||||
<input class="field-input" type="text" [(ngModel)]="form.category"
|
||||
placeholder="e.g. Reading, Math, Behavior…" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="field-label">Baseline</label>
|
||||
<textarea class="field-input field-textarea" [(ngModel)]="form.baseline"
|
||||
placeholder="Enter baseline..."></textarea>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="field-label">Goal</label>
|
||||
<textarea class="field-input field-textarea" [(ngModel)]="form.description"
|
||||
placeholder="Enter goal..."></textarea>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="field-label">Target Completion Date</label>
|
||||
<input class="field-input" type="date" [(ngModel)]="form.targetCompletionDate" />
|
||||
</div>
|
||||
|
||||
<form class="modal-body" (ngSubmit)="onSubmit()" #goalForm="ngForm">
|
||||
@if (errorMessage()) {
|
||||
<p class="error">{{ errorMessage() }}</p>
|
||||
}
|
||||
|
||||
<div class="field">
|
||||
<label for="category">Category<span class="required">*</span></label>
|
||||
<input
|
||||
id="category"
|
||||
type="text"
|
||||
[(ngModel)]="form.category"
|
||||
name="category"
|
||||
required
|
||||
placeholder="e.g. Academics"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="baseline">Baseline</label>
|
||||
<textarea
|
||||
id="baseline"
|
||||
[(ngModel)]="form.baseline"
|
||||
name="baseline"
|
||||
rows="3"
|
||||
placeholder="Enter baseline..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="field">
|
||||
<label for="description">Goal</label>
|
||||
<textarea
|
||||
id="description"
|
||||
[(ngModel)]="form.description"
|
||||
name="description"
|
||||
rows="3"
|
||||
placeholder="Enter goal..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="field">
|
||||
<label for="targetCompletionDate">Target Completion Date</label>
|
||||
<input
|
||||
id="targetCompletionDate"
|
||||
type="date"
|
||||
[(ngModel)]="form.targetCompletionDate"
|
||||
name="targetCompletionDate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Parent goal dropdown hidden — may not be needed
|
||||
@if (parentGoalOptions().length > 0) {
|
||||
<div class="field">
|
||||
<label for="goalParentId">Parent Goal <span class="optional">(optional)</span></label>
|
||||
<select id="goalParentId" [(ngModel)]="form.goalParentId" name="goalParentId">
|
||||
<option [ngValue]="null">None</option>
|
||||
@for (goal of parentGoalOptions(); track goal.goalId) {
|
||||
<option [ngValue]="goal.goalId">{{ goal.category }}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
-->
|
||||
|
||||
@if (errorMessage()) {
|
||||
<p class="error">{{ errorMessage() }}</p>
|
||||
}
|
||||
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-secondary" (click)="onCancel()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" [disabled]="goalForm.invalid || isSubmitting()">
|
||||
{{ isSubmitting() ? 'Saving...' : 'Add Goal' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn-secondary" (click)="cancelled.emit()">Cancel</button>
|
||||
<button class="btn-primary" (click)="onSubmit()" [disabled]="isSubmitting() || !form.category.trim()">
|
||||
{{ isSubmitting() ? 'Saving...' : 'Add Goal' }}
|
||||
</button>
|
||||
</div>
|
||||
</app-modal-shell>
|
||||
|
||||
+1
-146
@@ -1,146 +1 @@
|
||||
:host {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
|
||||
width: 420px;
|
||||
max-width: 95vw;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 1.5rem 0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.25rem 1.5rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.field label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.optional {
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field textarea,
|
||||
.field select {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9375rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.field input:focus,
|
||||
.field textarea:focus,
|
||||
.field select:focus {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 0.875rem;
|
||||
color: #dc2626;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1.125rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
border-color: #ddd;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #4338ca;
|
||||
border-color: #4338ca;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
margin-left: 4px;
|
||||
}
|
||||
/* Inherits all styles from modal-shell via ::ng-deep */
|
||||
|
||||
+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 { ModalShell } from '../modal-shell/modal-shell';
|
||||
import { CreateGoalDto } from '../../../shared/classes/create-goal.dto';
|
||||
import { StudentGoalItem } from '../../../shared/classes/student-goal';
|
||||
import { StudentService } from '../../../shared/services/student.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-goal-modal',
|
||||
imports: [FormsModule],
|
||||
imports: [FormsModule, ModalShell],
|
||||
templateUrl: './add-goal-modal.html',
|
||||
styleUrl: './add-goal-modal.scss',
|
||||
})
|
||||
export class AddGoalModal {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
private readonly studentService = inject(StudentService);
|
||||
|
||||
readonly studentId = input.required<string>();
|
||||
@@ -27,10 +23,6 @@ export class AddGoalModal {
|
||||
protected readonly isSubmitting = signal(false);
|
||||
protected readonly errorMessage = signal<string | null>(null);
|
||||
|
||||
protected readonly parentGoalOptions = computed(() =>
|
||||
this.existingGoals().filter(g => g.goalParentId === null)
|
||||
);
|
||||
|
||||
protected form: CreateGoalDto = {
|
||||
description: '',
|
||||
category: '',
|
||||
@@ -39,9 +31,6 @@ export class AddGoalModal {
|
||||
targetCompletionDate: null,
|
||||
};
|
||||
|
||||
// *****************************************************************
|
||||
// Pre-fills targetCompletionDate from the student's nextIepDate.
|
||||
// *****************************************************************
|
||||
ngOnInit() {
|
||||
const iepDate = this.nextIepDate?.();
|
||||
if (iepDate) {
|
||||
@@ -49,18 +38,12 @@ export class AddGoalModal {
|
||||
}
|
||||
}
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
async onSubmit() {
|
||||
if (!this.form.category.trim()) return;
|
||||
this.errorMessage.set(null);
|
||||
this.isSubmitting.set(true);
|
||||
|
||||
const result = await this.studentService.createGoal(this.studentId(), this.form);
|
||||
|
||||
this.isSubmitting.set(false);
|
||||
|
||||
if (!result.success) {
|
||||
@@ -70,10 +53,4 @@ export class AddGoalModal {
|
||||
|
||||
this.goalCreated.emit(result.payload!);
|
||||
}
|
||||
|
||||
onCancel() {
|
||||
this.cancelled.emit();
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
}
|
||||
|
||||
+19
-63
@@ -1,66 +1,22 @@
|
||||
<div class="overlay" (click)="onCancel()"></div>
|
||||
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Add Student</h2>
|
||||
<button class="close-btn" (click)="onCancel()" aria-label="Close">×</button>
|
||||
<app-modal-shell title="Add Student" (closed)="cancelled.emit()">
|
||||
<div class="field">
|
||||
<label class="field-label">Name</label>
|
||||
<input class="field-input" type="text" [(ngModel)]="form.identifier"
|
||||
placeholder="Initials or other non-personally identifiable label" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="field-label">Next IEP Date</label>
|
||||
<input class="field-input" type="date" [(ngModel)]="form.nextIepDate" />
|
||||
</div>
|
||||
|
||||
<form class="modal-body" (ngSubmit)="onSubmit()" #studentForm="ngForm">
|
||||
@if (errorMessage()) {
|
||||
<p class="error">{{ errorMessage() }}</p>
|
||||
}
|
||||
|
||||
<div class="field">
|
||||
<label for="identifier">Student</label>
|
||||
<input
|
||||
id="identifier"
|
||||
type="text"
|
||||
[(ngModel)]="form.identifier"
|
||||
name="identifier"
|
||||
required
|
||||
placeholder="Initials or other non-personally identifiable label"
|
||||
/>
|
||||
</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">
|
||||
<label for="enrollmentDate">Enrollment Date</label>
|
||||
<input
|
||||
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>
|
||||
|
||||
@if (errorMessage()) {
|
||||
<p class="error">{{ errorMessage() }}</p>
|
||||
}
|
||||
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-secondary" (click)="onCancel()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" [disabled]="studentForm.invalid || isSubmitting()">
|
||||
{{ isSubmitting() ? 'Saving...' : 'Add Student' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn-secondary" (click)="cancelled.emit()">Cancel</button>
|
||||
<button class="btn-primary" (click)="onSubmit()" [disabled]="isSubmitting() || !form.identifier.trim()">
|
||||
{{ isSubmitting() ? 'Saving...' : 'Add Student' }}
|
||||
</button>
|
||||
</div>
|
||||
</app-modal-shell>
|
||||
|
||||
+1
-130
@@ -1,130 +1 @@
|
||||
:host {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
|
||||
width: 420px;
|
||||
max-width: 95vw;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 1.5rem 0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.25rem 1.5rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.field label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
/* Inherits all styles from modal-shell via ::ng-deep */
|
||||
|
||||
+3
-19
@@ -1,21 +1,17 @@
|
||||
import { Component, inject, output, signal } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ModalShell } from '../modal-shell/modal-shell';
|
||||
import { CreateStudentDto } from '../../../shared/classes/create-student.dto';
|
||||
import { StudentCardDto } from '../../../shared/classes/student-card.dto';
|
||||
import { StudentService } from '../../../shared/services/student.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-student-modal',
|
||||
imports: [FormsModule],
|
||||
imports: [FormsModule, ModalShell],
|
||||
templateUrl: './add-student-modal.html',
|
||||
styleUrl: './add-student-modal.scss',
|
||||
})
|
||||
export class AddStudentModal {
|
||||
|
||||
// ************************** Constructor **************************
|
||||
|
||||
// ************************** Declarations *************************
|
||||
|
||||
private readonly studentService = inject(StudentService);
|
||||
|
||||
readonly studentCreated = output<StudentCardDto>();
|
||||
@@ -31,18 +27,12 @@ export class AddStudentModal {
|
||||
nextIepDate: null,
|
||||
};
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
// ************************ Public Methods *************************
|
||||
|
||||
// ************************ Event Handlers *************************
|
||||
|
||||
async onSubmit() {
|
||||
if (!this.form.identifier.trim()) return;
|
||||
this.errorMessage.set(null);
|
||||
this.isSubmitting.set(true);
|
||||
|
||||
const result = await this.studentService.createStudent(this.form);
|
||||
|
||||
this.isSubmitting.set(false);
|
||||
|
||||
if (!result.success) {
|
||||
@@ -52,10 +42,4 @@ export class AddStudentModal {
|
||||
|
||||
this.studentCreated.emit(result.payload!);
|
||||
}
|
||||
|
||||
onCancel() {
|
||||
this.cancelled.emit();
|
||||
}
|
||||
|
||||
// ********************** Support Procedures ***********************
|
||||
}
|
||||
|
||||
+45
-71
@@ -2,53 +2,42 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: 0.75rem;
|
||||
height: 40px;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
padding: 6px 14px;
|
||||
background: transparent;
|
||||
color: #4f46e5;
|
||||
border: 1px solid #4f46e5;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--accent-indigo);
|
||||
border: 1px solid var(--accent-indigo);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
font-family: inherit;
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #eef2ff;
|
||||
}
|
||||
&:hover {
|
||||
background: #EEF2FF;
|
||||
}
|
||||
|
||||
.toolbar-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
margin-left: 0.5rem;
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.spacer {
|
||||
@@ -56,91 +45,76 @@
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 0.875rem;
|
||||
font-size: 13px;
|
||||
color: #dc2626;
|
||||
margin: 0 0 1rem;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.success {
|
||||
font-size: 0.875rem;
|
||||
font-size: 13px;
|
||||
color: #16a34a;
|
||||
margin: 0 0 1rem;
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 22px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
font-size: 0.9375rem;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9375rem;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--border-muted);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.field-textarea {
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
min-height: 5rem;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 0.8125rem;
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions .toolbar-btn {
|
||||
min-width: 6rem;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
background: var(--accent-indigo) !important;
|
||||
color: #fff !important;
|
||||
border-color: var(--accent-indigo) !important;
|
||||
|
||||
.save-btn:hover {
|
||||
background: #4338ca;
|
||||
&:hover {
|
||||
background: #3730A3 !important;
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -125,7 +125,7 @@ export class BenchmarkCardFull implements OnDestroy {
|
||||
}
|
||||
|
||||
onBack() {
|
||||
this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'benchmarks']);
|
||||
this.router.navigate(['/students', this.studentId, 'goals', this.goalId]);
|
||||
}
|
||||
|
||||
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;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
margin-left: 0.75rem;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 1rem;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 20px 24px;
|
||||
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 {
|
||||
box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--accent-indigo-light);
|
||||
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
margin: 0 0 6px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
+47
-64
@@ -2,48 +2,42 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: 0.75rem;
|
||||
height: 40px;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
padding: 6px 14px;
|
||||
background: transparent;
|
||||
color: #4f46e5;
|
||||
border: 1px solid #4f46e5;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--accent-indigo);
|
||||
border: 1px solid var(--accent-indigo);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
font-family: inherit;
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #eef2ff;
|
||||
}
|
||||
&:hover {
|
||||
background: #EEF2FF;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
margin-left: 0.5rem;
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.spacer {
|
||||
@@ -51,9 +45,9 @@
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-xl);
|
||||
max-width: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -61,50 +55,43 @@
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 14px 22px;
|
||||
background: var(--bg-page);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--border-muted);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: inherit;
|
||||
font-size: 0.9375rem;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.date-row {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
@@ -115,8 +102,8 @@
|
||||
}
|
||||
|
||||
.goal-checklist {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-muted);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -124,41 +111,37 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9375rem;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid #eee;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
pointer-events: none;
|
||||
accent-color: var(--accent-indigo-light);
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.run-btn {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
border-color: #4f46e5;
|
||||
background: var(--accent-indigo) !important;
|
||||
color: #fff !important;
|
||||
border-color: var(--accent-indigo) !important;
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.run-btn:hover {
|
||||
background: #4338ca;
|
||||
}
|
||||
|
||||
.toolbar-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
background: #3730A3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 ?? []);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user