diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts b/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts index b52d1b0..7e4df09 100644 --- a/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts +++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts @@ -4,7 +4,7 @@ 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'; +import { GOAL_COLOR } from '../../../shared/classes/category-colors'; @Component({ selector: 'app-edit-event-modal', @@ -17,7 +17,7 @@ export class EditEventModal { readonly studentId = input.required(); readonly goalId = input.required(); - readonly goalCategory = input(''); + readonly benchmarks = input([]); /** null for new event, populated for edit */ readonly event = input(null); @@ -47,7 +47,7 @@ export class EditEventModal { } get colors() { - return getCategoryColor(this.goalCategory()); + return GOAL_COLOR; } isBenchmarkSelected(id: string): boolean { diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html index 8422702..00d5240 100644 --- a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html +++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html @@ -18,7 +18,7 @@ } @if (showEditEventModal()) { } @@ -32,9 +32,6 @@
@for (g of goals(); track g.goalId) { @@ -49,8 +46,7 @@
- {{ selectedGoal()!.category }} Goal + {{ selectedGoal()!.category }} Goal @if (selectedGoal()!.targetCompletionDate) { Due {{ formatDate(selectedGoal()!.targetCompletionDate) }} } @@ -67,14 +63,10 @@
@@ -83,10 +75,11 @@ @if (activeTab() === 'benchmarks') {
+ @for (b of goalBenchmarks(); track b.benchmarkId) {
- {{ b.shortName || b.benchmark }} + {{ b.shortName || b.benchmark }}
} -
} @if (activeTab() === 'progress') {
+
@for (ev of sortedProgressEvents(); track ev.progressEventId) {
-
+
{{ formatDate(ev.createdAt) }} @@ -123,7 +115,6 @@
} -
}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss index 7446244..3ff03c5 100644 --- a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss +++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss @@ -65,6 +65,9 @@ &.active { font-weight: 600; + border-color: #818CF8; + background: #EEF2FF; + color: #4338CA; } &.add-goal { @@ -104,6 +107,8 @@ letter-spacing: 0.05em; padding: 3px 8px; border-radius: var(--radius-sm); + color: #4338CA; + background: #EEF2FF; } .goal-due { @@ -156,6 +161,8 @@ &.active { font-weight: 600; + color: #4338CA; + border-bottom-color: #6366F1; } } @@ -184,6 +191,7 @@ .benchmark-name { font-weight: 600; font-size: 14px; + color: #4338CA; } .benchmark-events { @@ -227,7 +235,8 @@ width: 12px; height: 12px; border-radius: 50%; - border: 2px solid; + border: 2px solid #818CF8; + background: #EEF2FF; } .event-card { diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts index c75a26a..c00448f 100644 --- a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts +++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts @@ -5,7 +5,6 @@ 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'; @@ -81,9 +80,6 @@ export class Workspace { return this.goals().find(g => g.goalId === id) ?? null; }); - protected readonly goalColors = computed(() => { - return getCategoryColor(this.selectedGoal()?.category ?? ''); - }); protected readonly goalBenchmarks = computed(() => { const goalId = this.selectedGoal()?.goalId; @@ -169,26 +165,12 @@ export class Workspace { // ************************ 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) { diff --git a/ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts b/ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts index 424d42b..fdec58b 100644 --- a/ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts +++ b/ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts @@ -5,18 +5,10 @@ export interface CategoryColor { accent: string; } -const CATEGORY_COLORS: Record = { - Reading: { bg: '#EEF2FF', border: '#818CF8', text: '#4338CA', accent: '#6366F1' }, - Math: { bg: '#FFF7ED', border: '#FB923C', text: '#C2410C', accent: '#F97316' }, - Writing: { bg: '#F0FDF4', border: '#4ADE80', text: '#15803D', accent: '#22C55E' }, - Behavior: { bg: '#FDF4FF', border: '#C084FC', text: '#7E22CE', accent: '#A855F7' }, - Speech: { bg: '#FFF1F2', border: '#FB7185', text: '#BE123C', accent: '#F43F5E' }, +/** Single color used for all goals, regardless of category. */ +export const GOAL_COLOR: CategoryColor = { + bg: '#EEF2FF', + border: '#818CF8', + text: '#4338CA', + accent: '#6366F1', }; - -const DEFAULT_COLOR: CategoryColor = { - bg: '#F5F5F0', border: '#A0A090', text: '#444', accent: '#666', -}; - -export function getCategoryColor(category: string): CategoryColor { - return CATEGORY_COLORS[category] ?? DEFAULT_COLOR; -}