opelly/WinStudentGoalTracker
1
0
Fork 0
mirror of https://github.com/opelly27/WinStudentGoalTracker.git synced 2026-05-20 13:27:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added Goals fields

Browse Source
This commit is contained in:
ivan-pelly
2026-03-15 09:35:58 -07:00
parent 242b1bce27
commit 53d0539d28
66 changed files with 1322 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html
+12
View File
@@ -42,6 +42,17 @@
></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>
@@ -53,6 +64,7 @@
</select>
</div>
}
-->
@if (errorMessage()) {
<p class="error">{{ errorMessage() }}</p>
ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.ts
+12
View File
@@ -20,6 +20,7 @@ export class AddGoalModal {
readonly studentId = input.required<string>();
readonly existingGoals = input.required<StudentGoalItem[]>();
readonly nextIepDate = input<string | null>();
readonly goalCreated = output<StudentGoalItem>();
readonly cancelled = output<void>();
@@ -35,8 +36,19 @@ export class AddGoalModal {
category: '',
baseline: '',
goalParentId: null,
targetCompletionDate: null,
};
// *****************************************************************
// Pre-fills targetCompletionDate from the student's nextIepDate.
// *****************************************************************
ngOnInit() {
const iepDate = this.nextIepDate?.();
if (iepDate) {
this.form.targetCompletionDate = iepDate;
}
}
// ************************** Properties ***************************
// ************************ Public Methods *************************
ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.html
+4 -4
View File
@@ -8,10 +8,6 @@
<p class="error">{{ errorMessage() }}</p>
}
@if (successMessage()) {
<p class="success">{{ successMessage() }}</p>
}
@if (loaded()) {
<div class="detail-card">
<div class="field">
@@ -45,4 +41,8 @@
</button>
</div>
</div>
}
@if (successMessage()) {
<p class="success">{{ successMessage() }}</p>
}
ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.html
+66 -30
View File
@@ -4,40 +4,76 @@
<span class="spacer"></span>
</div>
@if (loaded()) {
<div class="detail-card">
<div class="card-header">
<span class="card-title">Goal: {{ category }}</span>
@if (targetCompletionDate) {
<span class="card-title">Target: {{ targetCompletionDate | date:'mediumDate' }}</span>
} @else {
<span class="card-title">No target date</span>
}
</div>
<div class="card-body">
<div class="field">
<label class="field-label" for="category">Category</label>
<input id="category" class="field-input" type="text" [(ngModel)]="category" />
</div>
<div class="field">
<label class="field-label" for="description">Description</label>
<textarea id="description" class="field-input field-textarea" [(ngModel)]="description" rows="4"
placeholder="Enter description..."></textarea>
</div>
<div class="field">
<label class="field-label" for="baseline">Baseline</label>
<textarea id="baseline" class="field-input field-textarea" [(ngModel)]="baseline" rows="3"
placeholder="Enter baseline..."></textarea>
</div>
<div class="field">
<label class="field-label" for="targetCompletionDate">Target Completion Date</label>
<input id="targetCompletionDate" class="field-input" type="date" [(ngModel)]="targetCompletionDate" />
</div>
@if (closeDate !== null) {
<div class="close-section">
<div class="field">
<label class="field-label" for="closeDate">Close Date</label>
<input id="closeDate" class="field-input" type="date" [(ngModel)]="closeDate" />
</div>
<div class="field field-row">
<label class="field-label" for="achieved">Achieved</label>
<input id="achieved" type="checkbox" [ngModel]="achieved ?? false" (ngModelChange)="achieved = $event" />
</div>
@if (achieved === false) {
<div class="field">
<label class="field-label" for="closeNotes">Close Notes <span class="required">*</span></label>
<textarea id="closeNotes" class="field-input field-textarea" [(ngModel)]="closeNotes" rows="3"
placeholder="Explain why the goal was not achieved..." required></textarea>
</div>
}
</div>
}
<div class="actions">
<button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
<button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
{{ saving() ? 'Saving...' : 'Save' }}
</button>
</div>
</div>
<div class="card-footer">
<button class="footer-btn btn-green" (click)="onProgressEvents()">Progress Events</button>
<button class="footer-btn btn-blue" (click)="onBenchmarks()">Benchmarks</button>
</div>
</div>
}
@if (errorMessage()) {
<p class="error">{{ errorMessage() }}</p>
}
@if (successMessage()) {
<p class="success">{{ successMessage() }}</p>
}
@if (loaded()) {
<div class="detail-card">
<div class="field">
<label class="field-label" for="category">Category</label>
<input id="category" class="field-input" type="text" [(ngModel)]="category" />
</div>
<div class="field">
<label class="field-label" for="description">Description</label>
<textarea id="description" class="field-input field-textarea" [(ngModel)]="description" rows="4"
placeholder="Enter description..."></textarea>
</div>
<div class="field">
<label class="field-label" for="baseline">Baseline</label>
<textarea id="baseline" class="field-input field-textarea" [(ngModel)]="baseline" rows="3"
placeholder="Enter baseline..."></textarea>
</div>
<div class="actions">
<button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
<button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
{{ saving() ? 'Saving...' : 'Save' }}
</button>
</div>
<div class="card-footer">
<a class="detail-link" (click)="onProgressEvents()">Progress Events</a>
<a class="detail-link" (click)="onBenchmarks()">Benchmarks</a>
</div>
</div>
}
ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.scss
+70 -11
View File
@@ -58,40 +58,77 @@
.error {
font-size: 0.875rem;
color: #dc2626;
margin: 0 0 1rem;
margin: 1rem 0 0;
}
.success {
font-size: 0.875rem;
color: #16a34a;
margin: 0 0 1rem;
margin: 1rem 0 0;
}
.detail-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1.5rem;
max-width: 600px;
overflow: hidden;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 1.25rem;
background: #f8f9fa;
border-bottom: 1px solid #ddd;
}
.card-title {
font-size: 0.875rem;
font-weight: 600;
color: #333;
}
.card-body {
padding: 1.5rem;
}
.card-footer {
display: flex;
align-items: center;
gap: 1.5rem;
margin-top: 1rem;
padding-top: 1rem;
padding: 0.5rem 1.5rem;
border-top: 1px solid #eee;
}
.detail-link {
font-size: 0.875rem;
color: #4f46e5;
.footer-btn {
padding: 0.375rem 0.75rem;
background: transparent;
border: 1px solid;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
text-decoration: underline;
}
.detail-link:hover {
color: #4338ca;
.btn-green {
color: #16a34a;
border-color: #16a34a;
}
.btn-green:hover {
background: #f0fdf4;
}
.btn-blue {
color: #2563eb;
border-color: #2563eb;
margin-left: auto;
}
.btn-blue:hover {
background: #eff6ff;
}
.field {
@@ -113,6 +150,7 @@
padding: 0.375rem 0.5rem;
border: 1px solid #ccc;
border-radius: 6px;
font-family: inherit;
font-size: 0.9375rem;
outline: none;
}
@@ -146,4 +184,25 @@
.save-btn:hover {
background: #4338ca;
}
.close-section {
border-top: 1px solid #eee;
padding-top: 1rem;
margin-top: 0.5rem;
}
.field-row {
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
.field-row input[type="checkbox"] {
width: 1.125rem;
height: 1.125rem;
}
.required {
color: #dc2626;
}
ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.ts
+44 -2
View File
@@ -1,13 +1,14 @@
import { Component, inject, signal, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { DatePipe } from '@angular/common';
import { Subscription } from 'rxjs';
import { StudentService } from '../../../shared/services/student.service';
import { StudentGoalItem } from '../../../shared/classes/student-goal';
@Component({
selector: 'app-goal-card-full',
imports: [FormsModule],
imports: [FormsModule, DatePipe],
templateUrl: './goal-card-full.html',
styleUrl: './goal-card-full.scss',
})
@@ -42,6 +43,10 @@ export class GoalCardFull implements OnDestroy {
protected description = '';
protected category = '';
protected baseline = '';
protected targetCompletionDate: string | null = null;
protected closeDate: string | null = null;
protected achieved: boolean | null = null;
protected closeNotes: string | null = null;
// Read-only metadata
protected progressEventCount = 0;
@@ -51,6 +56,10 @@ export class GoalCardFull implements OnDestroy {
private savedDescription = '';
private savedCategory = '';
private savedBaseline = '';
private savedTargetCompletionDate: string | null = null;
private savedCloseDate: string | null = null;
private savedAchieved: boolean | null = null;
private savedCloseNotes: string | null = null;
// ************************** Properties ***************************
@@ -60,7 +69,11 @@ export class GoalCardFull implements OnDestroy {
hasChanges(): boolean {
return this.description !== this.savedDescription
|| this.category !== this.savedCategory
|| this.baseline !== this.savedBaseline;
|| this.baseline !== this.savedBaseline
|| this.targetCompletionDate !== this.savedTargetCompletionDate
|| this.closeDate !== this.savedCloseDate
|| this.achieved !== this.savedAchieved
|| this.closeNotes !== this.savedCloseNotes;
}
// ************************ Public Methods *************************
@@ -79,6 +92,10 @@ export class GoalCardFull implements OnDestroy {
description: this.description,
category: this.category,
baseline: this.baseline,
targetCompletionDate: this.targetCompletionDate,
closeDate: this.closeDate,
achieved: this.achieved,
closeNotes: this.closeNotes,
});
this.saving.set(false);
@@ -87,7 +104,12 @@ export class GoalCardFull implements OnDestroy {
this.savedDescription = this.description;
this.savedCategory = this.category;
this.savedBaseline = this.baseline;
this.savedTargetCompletionDate = this.targetCompletionDate;
this.savedCloseDate = this.closeDate;
this.savedAchieved = this.achieved;
this.savedCloseNotes = this.closeNotes;
this.successMessage.set('Changes saved.');
this.studentService.notifyDataChanged();
} else {
this.errorMessage.set(result.message);
}
@@ -100,6 +122,10 @@ export class GoalCardFull implements OnDestroy {
this.description = this.savedDescription;
this.category = this.savedCategory;
this.baseline = this.savedBaseline;
this.targetCompletionDate = this.savedTargetCompletionDate;
this.closeDate = this.savedCloseDate;
this.achieved = this.savedAchieved;
this.closeNotes = this.savedCloseNotes;
this.errorMessage.set(null);
this.successMessage.set(null);
}
@@ -122,6 +148,14 @@ export class GoalCardFull implements OnDestroy {
// ********************** Support Procedures ***********************
// *****************************************************************
// Normalizes an API date string to YYYY-MM-DD for <input type="date">.
// *****************************************************************
private toDateInput(value: string | null): string | null {
if (!value) return null;
return value.substring(0, 10);
}
// *****************************************************************
// Loads the goal by finding it in the student's goal list.
// *****************************************************************
@@ -142,12 +176,20 @@ export class GoalCardFull implements OnDestroy {
this.description = goal.description;
this.category = goal.category;
this.baseline = goal.baseline;
this.targetCompletionDate = this.toDateInput(goal.targetCompletionDate);
this.closeDate = this.toDateInput(goal.closeDate);
this.achieved = goal.achieved;
this.closeNotes = goal.closeNotes;
this.progressEventCount = goal.progressEventCount;
this.benchmarkCount = goal.benchmarkCount;
this.savedDescription = goal.description;
this.savedCategory = goal.category;
this.savedBaseline = goal.baseline;
this.savedTargetCompletionDate = this.toDateInput(goal.targetCompletionDate);
this.savedCloseDate = this.toDateInput(goal.closeDate);
this.savedAchieved = goal.achieved;
this.savedCloseNotes = goal.closeNotes;
this.loaded.set(true);
});
}
ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html
+16 -6
View File
@@ -1,14 +1,24 @@
<div class="card" (click)="onCardClick()">
<div class="card-header">
<span class="category-badge">{{ goal().category }}</span>
<span class="event-count">{{ goal().progressEventCount }} events</span>
<span class="card-title">Goal: {{ goal().category }}</span>
@if (goal().closeDate !== null) {
<span class="closed-badge" [class.achieved]="goal().achieved === true">
{{ goal().achieved === true ? 'Closed ✓' : 'Closed ✗' }}
</span>
}
@if (goal().targetCompletionDate) {
<span class="event-count">Target: {{ goal().targetCompletionDate | date:'mediumDate' }}</span>
} @else {
<span class="event-count">No target date</span>
}
</div>
<h3 class="title">{{ goal().category }}</h3>
<p class="description">{{ goal().description }}</p>
<div class="card-body">
<p class="description">{{ goal().description }}</p>
</div>
<div class="card-footer">
<a class="footer-link" (click)="$event.stopPropagation(); onBenchmarksClick()">Benchmarks</a>
<a class="footer-link" (click)="$event.stopPropagation(); onProgressEventsClick()">Progress Events</a>
<button class="footer-btn btn-green" (click)="$event.stopPropagation(); onProgressEventsClick()">Progress Events</button>
<button class="footer-btn btn-blue" (click)="$event.stopPropagation(); onBenchmarksClick()">Benchmarks</button>
</div>
</div>
ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.scss
+67 -40
View File
@@ -6,64 +6,37 @@
.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
padding: 1.25rem 1.5rem;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
gap: 0.625rem;
cursor: pointer;
min-width: 0;
}
.card-footer {
display: flex;
align-items: center;
gap: 1.5rem;
margin: 0 -1.5rem -1rem;
padding: 0.5rem 1.5rem 0.5rem;
border-top: 1px solid #eee;
}
.footer-link {
font-size: 0.875rem;
color: #4f46e5;
cursor: pointer;
text-decoration: underline;
}
.footer-link:hover {
color: #4338ca;
overflow: hidden;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 1.25rem;
background: #f8f9fa;
border-bottom: 1px solid #ddd;
}
.category-badge {
padding: 0.2rem 0.6rem;
background: #eef2ff;
color: #4f46e5;
border-radius: 999px;
font-size: 0.75rem;
.card-title {
font-size: 0.875rem;
font-weight: 600;
color: #333;
}
.event-count {
font-size: 0.8125rem;
color: #888;
font-size: 0.875rem;
font-weight: 600;
color: #333;
}
.title {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: #111;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.card-body {
padding: 1.25rem 1.5rem;
}
.description {
@@ -72,7 +45,61 @@
color: #555;
line-height: 1.5;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-footer {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.5rem 1.5rem;
border-top: 1px solid #eee;
}
.footer-btn {
padding: 0.375rem 0.75rem;
background: transparent;
border: 1px solid;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
}
.btn-green {
color: #16a34a;
border-color: #16a34a;
}
.btn-green:hover {
background: #f0fdf4;
}
.btn-blue {
color: #2563eb;
border-color: #2563eb;
margin-left: auto;
}
.btn-blue:hover {
background: #eff6ff;
}
.closed-badge {
font-size: 0.75rem;
font-weight: 600;
padding: 0.125rem 0.5rem;
border-radius: 4px;
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
}
.closed-badge.achieved {
background: #f0fdf4;
color: #16a34a;
border-color: #bbf7d0;
}
ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts
+2 -1
View File
@@ -1,10 +1,11 @@
import { Component, inject, input } from '@angular/core';
import { DatePipe } from '@angular/common';
import { ActivatedRoute, Router } from '@angular/router';
import { StudentGoalItem } from '../../../shared/classes/student-goal';
@Component({
selector: 'app-goal-card',
imports: [],
imports: [DatePipe],
templateUrl: './goal-card.html',
styleUrl: './goal-card.scss',
})
ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html
+1 -1
View File
@@ -13,7 +13,7 @@
}
@if (showAddModal()) {
<app-add-goal-modal [studentId]="studentId" [existingGoals]="goals()" (goalCreated)="onGoalCreated($event)"
<app-add-goal-modal [studentId]="studentId" [existingGoals]="goals()" [nextIepDate]="nextIepDate()" (goalCreated)="onGoalCreated($event)"
(cancelled)="onModalCancelled()" />
}
ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.scss
+2 -1
View File
@@ -52,7 +52,7 @@
font-size: 1.125rem;
font-weight: 600;
color: #333;
margin: 0 0 0.5rem;
margin: 0 0 1.25rem;
}
.spacer {
@@ -78,6 +78,7 @@
.card-grid {
display: flex;
flex-wrap: wrap;
align-content: start;
gap: 1rem;
overflow-y: auto;
flex: 1;
ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.ts
+8
View File
@@ -32,6 +32,7 @@ export class GoalList implements OnDestroy {
protected studentId!: string;
protected readonly studentIdentifier = signal<string | null>(null);
protected readonly nextIepDate = signal<string | null>(null);
protected readonly goals = signal<StudentGoalItem[]>([]);
protected readonly showAddModal = signal(false);
protected readonly errorMessage = signal<string | null>(null);
@@ -71,6 +72,13 @@ export class GoalList implements OnDestroy {
// Loads goals for the student from the service.
// *****************************************************************
private loadGoals() {
this.studentService.getStudentById(this.studentId).then(studentResult => {
if (studentResult.success && studentResult.payload) {
const iep = studentResult.payload.nextIepDate;
this.nextIepDate.set(iep ? String(iep).substring(0, 10) : null);
}
});
this.studentService.getGoalsForStudent(this.studentId).then(data => {
if (!data.success) {
this.errorMessage.set(data.message);
ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.html
+57 -1
View File
@@ -1 +1,57 @@
<p>progress-edit works!</p>
<div class="toolbar">
<button class="toolbar-btn back-btn" (click)="onBack()">&#8593; Progress Events</button>
<span class="toolbar-title">{{ isNew() ? 'New Progress Event' : 'Edit Progress Event' }}</span>
<span class="spacer"></span>
</div>
@if (errorMessage()) {
<p class="error">{{ errorMessage() }}</p>
}
@if (loaded()) {
<div class="detail-card">
<div class="field">
<span class="field-label">Goal: {{ goalCategory }}</span>
</div>
<div class="field">
<label class="field-label" for="content">Notes</label>
<textarea id="content" class="field-input field-textarea" [(ngModel)]="content" rows="5"
placeholder="Enter progress event notes..."></textarea>
</div>
@if (benchmarkItems().length > 0) {
<div class="field">
<span class="field-label">Associated Benchmarks</span>
<div class="benchmark-checks">
@for (bm of benchmarkItems(); track bm.benchmarkId) {
<label class="check-item">
<input type="checkbox" [checked]="bm.checked" (change)="onToggleBenchmark(bm.benchmarkId)" />
{{ bm.label }}
</label>
}
</div>
</div>
}
@if (!isNew()) {
<div class="metadata">
@if (createdByName) {
<span class="meta-item">Created by: {{ createdByName }}</span>
}
@if (createdAt) {
<span class="meta-item">Created: {{ createdAt | date:'medium' }}</span>
}
</div>
}
<div class="actions">
<button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
<button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
{{ saving() ? 'Saving...' : 'Save' }}
</button>
</div>
</div>
}
@if (successMessage()) {
<p class="success">{{ successMessage() }}</p>
}
ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.scss
+163
View File
@@ -0,0 +1,163 @@
:host {
display: flex;
flex-direction: column;
height: 100%;
}
.toolbar {
display: flex;
align-items: center;
position: relative;
gap: 0.75rem;
height: 40px;
padding-right: 0.5rem;
border-radius: 8px;
background: #fff;
border-bottom: 1px solid #ddd;
margin-bottom: 1rem;
flex-shrink: 0;
}
.toolbar-btn {
padding: 0.375rem 0.75rem;
background: transparent;
color: #4f46e5;
border: 1px solid #4f46e5;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
}
.toolbar-btn:hover {
background: #eef2ff;
}
.toolbar-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.back-btn {
margin-left: 0.5rem;
}
.toolbar-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-weight: 600;
font-size: 1.25rem;
color: #333;
}
.spacer {
flex: 1;
}
.error {
font-size: 0.875rem;
color: #dc2626;
margin: 0 0 1rem;
}
.success {
font-size: 0.875rem;
color: #16a34a;
margin: 0 0 1rem;
}
.detail-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1.5rem;
max-width: 600px;
}
.field {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.field-label {
font-size: 0.75rem;
font-weight: 600;
color: #666;
text-transform: uppercase;
letter-spacing: 0.025em;
margin-bottom: 0.25rem;
}
.field-input {
padding: 0.375rem 0.5rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 0.9375rem;
outline: none;
}
.field-input:focus {
border-color: #4f46e5;
}
.field-textarea {
font-family: inherit;
resize: vertical;
min-height: 5rem;
}
.benchmark-checks {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.25rem;
}
.check-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
color: #333;
cursor: pointer;
}
.check-item input[type="checkbox"] {
width: 1rem;
height: 1rem;
accent-color: #4f46e5;
}
.metadata {
display: flex;
gap: 1.5rem;
margin-bottom: 1rem;
}
.meta-item {
font-size: 0.8125rem;
color: #888;
}
.actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 0.5rem;
}
.actions .toolbar-btn {
min-width: 6rem;
}
.save-btn {
background: #4f46e5;
color: #fff;
border-color: #4f46e5;
}
.save-btn:hover {
background: #4338ca;
}
ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.ts
+220 -3
View File
@@ -1,11 +1,228 @@
import { Component } from '@angular/core';
import { Component, inject, signal, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { DatePipe } from '@angular/common';
import { Subscription } from 'rxjs';
import { StudentService } from '../../../shared/services/student.service';
import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
interface BenchmarkCheckItem {
benchmarkId: string;
label: string;
checked: boolean;
}
@Component({
selector: 'app-progress-edit',
imports: [],
imports: [FormsModule, DatePipe],
templateUrl: './progress-edit.html',
styleUrl: './progress-edit.scss',
})
export class ProgressEdit {
export class ProgressEdit implements OnDestroy {
// ************************** Constructor **************************
constructor() {
this.paramSub = this.route.paramMap.subscribe(params => {
this.studentId = params.get('studentId')!;
this.goalId = params.get('goalId')!;
this.progressEventId = params.get('progressEventId') ?? null;
this.loadData();
});
}
// ************************** Declarations *************************
private readonly studentService = inject(StudentService);
private readonly route = inject(ActivatedRoute);
private readonly router = inject(Router);
private readonly paramSub: Subscription;
private studentId!: string;
private goalId!: string;
private progressEventId: string | null = null;
protected readonly loaded = signal(false);
protected readonly isNew = signal(false);
protected readonly errorMessage = signal<string | null>(null);
protected readonly successMessage = signal<string | null>(null);
protected readonly saving = signal(false);
// Form fields
protected content = '';
private savedContent = '';
// Benchmark checkboxes
protected benchmarkItems = signal<BenchmarkCheckItem[]>([]);
private savedBenchmarkSelections: Set<string> = new Set();
// Read-only metadata
protected goalCategory = '';
protected createdByName = '';
protected createdAt: Date | null = null;
// ************************** Properties ***************************
// *****************************************************************
// Returns true if the form has unsaved changes.
// *****************************************************************
hasChanges(): boolean {
if (this.content !== this.savedContent) return true;
const current = new Set(this.benchmarkItems().filter(b => b.checked).map(b => b.benchmarkId));
if (current.size !== this.savedBenchmarkSelections.size) return true;
for (const id of current) {
if (!this.savedBenchmarkSelections.has(id)) return true;
}
return false;
}
// ************************ Public Methods *************************
// ************************ Event Handlers *************************
// *****************************************************************
// Saves the progress event (create or update) and any benchmark
// associations based on the checked checkboxes.
// *****************************************************************
async onSave() {
this.saving.set(true);
this.errorMessage.set(null);
this.successMessage.set(null);
const checkedIds = this.benchmarkItems()
.filter(b => b.checked)
.map(b => b.benchmarkId);
if (this.isNew()) {
const result = await this.studentService.addProgressEvent(
this.studentId, this.goalId, this.content.trim(),
checkedIds.length > 0 ? checkedIds : undefined
);
this.saving.set(false);
if (result.success) {
this.successMessage.set('Progress event created.');
this.savedContent = this.content;
this.savedBenchmarkSelections = new Set(checkedIds);
this.studentService.notifyDataChanged();
if (result.payload?.progressEventId) {
this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'progress', result.payload.progressEventId]);
}
} else {
this.errorMessage.set(result.message);
}
} else {
const result = await this.studentService.updateProgressEvent(
this.studentId, this.progressEventId!, this.content.trim(), checkedIds
);
this.saving.set(false);
if (result.success) {
this.savedContent = this.content;
this.savedBenchmarkSelections = new Set(checkedIds);
this.successMessage.set('Changes saved.');
} else {
this.errorMessage.set(result.message);
}
}
}
// *****************************************************************
// Reverts the form to the last-saved state.
// *****************************************************************
onCancel() {
this.content = this.savedContent;
this.benchmarkItems.update(items =>
items.map(b => ({ ...b, checked: this.savedBenchmarkSelections.has(b.benchmarkId) }))
);
this.errorMessage.set(null);
this.successMessage.set(null);
}
onBack() {
this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'progress']);
}
// *****************************************************************
// Toggles a benchmark checkbox.
// *****************************************************************
onToggleBenchmark(benchmarkId: string) {
this.benchmarkItems.update(items =>
items.map(b => b.benchmarkId === benchmarkId ? { ...b, checked: !b.checked } : b)
);
}
ngOnDestroy() {
this.paramSub.unsubscribe();
}
// ********************** Support Procedures ***********************
// *****************************************************************
// Loads all data needed for the form: goal category, benchmarks,
// and (for edit mode) the existing event content + associations.
// *****************************************************************
private async loadData() {
this.loaded.set(false);
// Load goal category
const goalsResult = await this.studentService.getGoalsForStudent(this.studentId);
if (goalsResult.success && goalsResult.payload) {
const goal = goalsResult.payload.goals.find(g => g.goalId === this.goalId);
this.goalCategory = goal?.category ?? '';
}
// Load benchmarks for this goal
const bmResult = await this.studentService.getBenchmarksForStudent(this.studentId);
const goalBenchmarks = (bmResult.success && bmResult.payload)
? bmResult.payload.benchmarks.filter(b => b.goalId === this.goalId)
: [];
if (!this.progressEventId) {
// New event mode
this.isNew.set(true);
this.content = '';
this.savedContent = '';
this.savedBenchmarkSelections = new Set();
this.benchmarkItems.set(goalBenchmarks.map(b => ({
benchmarkId: b.benchmarkId,
label: b.shortName || b.benchmark,
checked: false,
})));
this.loaded.set(true);
return;
}
// Edit mode — load existing event
this.isNew.set(false);
const eventsResult = await this.studentService.getProgressEventsForGoal(this.goalId);
if (!eventsResult.success || !eventsResult.payload) {
this.errorMessage.set(eventsResult.message);
this.loaded.set(true);
return;
}
const event = eventsResult.payload.find(e => e.progressEventId === this.progressEventId);
if (!event) {
this.errorMessage.set('Progress event not found.');
this.loaded.set(true);
return;
}
this.content = event.content;
this.savedContent = event.content;
this.createdByName = event.createdByName;
this.createdAt = event.createdAt;
// Load existing benchmark associations
const assocResult = await this.studentService.getProgressEventBenchmarks(this.progressEventId!);
const associatedIds = new Set(assocResult.success && assocResult.payload ? assocResult.payload : []);
this.savedBenchmarkSelections = new Set(associatedIds);
this.benchmarkItems.set(goalBenchmarks.map(b => ({
benchmarkId: b.benchmarkId,
label: b.shortName || b.benchmark,
checked: associatedIds.has(b.benchmarkId),
})));
this.loaded.set(true);
}
}
ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.html
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="card">
<p class="content">{{ event().content }}</p>
<div class="action-icons">
<button class="icon-btn" title="Edit">&#9998;</button>
<button class="edit-btn" (click)="onEdit()">Edit</button>
<!-- <button class="icon-btn" title="Delete">&#128465;</button> -->
</div>
<span class="author">{{ event().createdByName }}</span>
ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.scss
+12 -10
View File
@@ -47,15 +47,17 @@
text-align: right;
}
// .icon-btn {
// background: none;
// border: none;
// cursor: pointer;
// font-size: 1rem;
// color: #888;
// padding: 0.125rem;
// }
.icon-btn:hover {
.edit-btn {
padding: 0.25rem 0.625rem;
background: transparent;
color: #4f46e5;
border: 1px solid #4f46e5;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
}
.edit-btn:hover {
background: #eef2ff;
}
ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.ts
+8 -1
View File
@@ -1,5 +1,6 @@
import { Component, input } from '@angular/core';
import { Component, inject, input } from '@angular/core';
import { DatePipe } from '@angular/common';
import { ActivatedRoute, Router } from '@angular/router';
import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
@Component({
@@ -14,6 +15,8 @@ export class ProgressItem {
// ************************** Declarations *************************
private readonly router = inject(Router);
private readonly route = inject(ActivatedRoute);
readonly event = input.required<ProgressEventDto>();
// ************************** Properties ***************************
@@ -22,5 +25,9 @@ export class ProgressItem {
// ************************ Event Handlers *************************
onEdit() {
this.router.navigate([this.event().progressEventId], { relativeTo: this.route });
}
// ********************** Support Procedures ***********************
}
ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.ts
+1 -2
View File
@@ -67,8 +67,7 @@ export class ProgressList implements OnDestroy {
// ************************ Event Handlers *************************
onAddProgressEvent() {
this.showAddModal.set(true);
// TODO: Wire up add-progress-event modal component
this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'progress', 'new']);
}
// *****************************************************************
ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.html
+2
View File
@@ -2,6 +2,8 @@
<div class="node-row" [style.padding-left]="indent()">
@if (hasToggle(node)) {
<span class="toggle-indicator" (click)="onToggle(node, $event)">{{ node.expanded ? '−' : '+' }}</span>
} @else {
<span class="toggle-placeholder"></span>
}
@if (node.routerLink) {
<a class="node-label" [routerLink]="node.routerLink" routerLinkActive="active"
ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.scss
+5
View File
@@ -34,6 +34,11 @@
flex-shrink: 0;
}
.toggle-placeholder {
width: calc(1rem + 2px);
flex-shrink: 0;
}
.node-label {
flex: 1;
font-size: 0.8125rem;
ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.html
+19 -13
View File
@@ -12,24 +12,30 @@
@if (loaded()) {
<div class="detail-card">
<div class="field">
<label class="field-label" for="identifier">Name</label>
<input id="identifier" class="field-input" type="text" [(ngModel)]="identifier" />
</div>
<div class="field">
<label class="field-label" for="nextIepDate">Next IEP Date</label>
<input id="nextIepDate" class="field-input" type="date" [(ngModel)]="nextIepDate" />
<div class="detail-card-header">
<span class="detail-card-title">Student</span>
</div>
<div class="actions">
<button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
<button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
{{ saving() ? 'Saving...' : 'Save' }}
</button>
<div class="detail-card-body">
<div class="field">
<label class="field-label" for="identifier">Name</label>
<input id="identifier" class="field-input" type="text" [(ngModel)]="identifier" />
</div>
<div class="field">
<label class="field-label" for="nextIepDate">Next IEP Date</label>
<input id="nextIepDate" class="field-input" type="date" [(ngModel)]="nextIepDate" />
</div>
<div class="actions">
<button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
<button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
{{ saving() ? 'Saving...' : 'Save' }}
</button>
</div>
</div>
<div class="card-footer">
<a class="detail-link" (click)="onGoals()">Goals</a>
<button class="footer-btn btn-dark-green" (click)="onGoals()">Goals</button>
<span class="spacer"></span>
@if (successMessage()) {
<span class="success-label" [class.fade-out]="fading()">{{ successMessage() }}</span>
ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.scss
+34 -9
View File
@@ -67,8 +67,26 @@
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1.5rem;
max-width: 480px;
overflow: hidden;
}
.detail-card-header {
display: flex;
align-items: center;
padding: 0.625rem 1.25rem;
background: #f8f9fa;
border-bottom: 1px solid #ddd;
}
.detail-card-title {
font-size: 0.875rem;
font-weight: 600;
color: #333;
}
.detail-card-body {
padding: 1.5rem;
}
.field {
@@ -106,20 +124,27 @@
.card-footer {
display: flex;
align-items: center;
margin: 1rem -1.5rem -1rem;
padding: 0.5rem 1.5rem 0.5rem;
padding: 0.5rem 1.5rem;
border-top: 1px solid #eee;
}
.detail-link {
font-size: 0.875rem;
color: #4f46e5;
.footer-btn {
padding: 0.375rem 0.75rem;
background: transparent;
border: 1px solid;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
text-decoration: underline;
}
.detail-link:hover {
color: #4338ca;
.btn-dark-green {
color: #15803d;
border-color: #15803d;
}
.btn-dark-green:hover {
background: #f0fdf4;
}
.success-label {
ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.html
+1
View File
@@ -15,5 +15,6 @@
<div class="stats">
<span>Goals: {{ student().goalCount }}</span>
<span>Events: {{ student().progressEventCount }}</span>
<span>Benchmarks: {{ student().benchmarkCount }}</span>
</div>
</div>