diff --git a/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-investigation.md b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-investigation.md new file mode 100644 index 00000000..36b0954f --- /dev/null +++ b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-investigation.md @@ -0,0 +1,158 @@ +--- +title: Task-Dashboard Migration Investigation +description: + Investigation report for completing the task-dashboard migration from AngularJS to Angular +--- + +# Task-Dashboard Migration Investigation + +**Date:** January 19, 2026 +**Investigator:** Husainuddin Mohammed, 223380186 +**Branch:** `investigate/task-dashboard-migration` + +--- + +## What I Found + +The task-dashboard migration is about 80% done. The Angular components exist and work (I can see +them running in `inbox.component.html`), but the main dashboard view still loads the old AngularJS +directives. We have two parallel systems running. + +--- + +## The Actual Components + +I went through the code and found these 7 card components that got migrated: + +1. TaskDescriptionCardComponent +2. TaskDueDateCardComponent +3. TaskResourcesCardComponent +4. TaskSubmissionCardComponent +5. TaskCommentsCardComponent +6. TaskStatusCardComponent +7. TaskAssessmentCardComponent + +All work fine - just need to finish switching the main dashboard over to use them. + +--- + +## What Needs to Change + +**Template update:** + +- `dashboard.tpl.html` still uses `` +- Needs to change to `` + +**State registration:** + +- Old AngularJS state in `doubtfire.states.ts` needs updating +- Should register Angular component route instead + +**Module cleanup:** + +- `doubtfire-angularjs.module.ts` still imports 9 old .coffee files +- Can remove these imports and delete the files + +**Files to delete (9 total):** + +- task-dashboard: `.coffee`, `.tpl.html`, `.scss` +- student-task-list: `.coffee`, `.tpl.html`, `.scss` +- dashboard: `.coffee`, `.tpl.html` +- `directives.coffee` + +--- + +## Why It's Tricky + +These changes need to happen together. If I update the template but not the state registration, +routing breaks. If I delete files before updating the template, the dashboard stops loading. Can't +split this into many small PRs - it's one atomic change. + +--- + +## Current vs Target State + +**Right now:** + +``` +dashboard.tpl.html → → AngularJS system (old) +inbox.component.html → → Angular system (new) + ↓ + Both render same 7 cards +``` + +**After migration:** + +``` +dashboard.tpl.html → ↘ + Angular system (unified) +inbox.component.html → ↗ + ↓ + 7 card components + +Old AngularJS files deleted ✓ +``` + +--- + +## Migration Steps + +``` +Step 1: Update template tags + ↓ +Step 2: Update state registration } These 3 steps + ↓ } must happen +Step 3: Remove old file imports } together + ↓ +Step 4: Delete old files +``` + +**Can't do Step 4 before Steps 1-3** → Dashboard won't load +**Can't do Step 2 before Step 1** → Router looks for wrong component + +--- + +## Risk Level: Low + +The Angular components already work. This is just switching which template system renders them. If +something breaks, we can revert quickly since the old files are still in git history. + +Main risk: making sure no other files reference `` besides the main dashboard +template. + +--- + +## Testing Needed + +- Direct URL navigation to dashboard +- Click navigation from project list +- Task selection and switching +- Browser refresh while on dashboard +- Back/forward buttons +- Check all 7 cards render +- Console should be clean + +--- + +## What Could Go Wrong + +**Scenario 1:** Another file uses old tags we missed + +- Fix: Search codebase for `` before starting + +**Scenario 2:** Delete files before updating imports + +- Fix: Remove imports first, then delete files + +**Scenario 3:** Update state before template + +- Fix: Always update template first + +--- + +## Time Estimate + +4-6 hours for someone who knows the codebase. +8-12 hours if you're new to it. + +Most of the time will be testing different navigation paths. diff --git a/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-pr-plan.md b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-pr-plan.md new file mode 100644 index 00000000..cf623987 --- /dev/null +++ b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-pr-plan.md @@ -0,0 +1,152 @@ +--- +title: Task-Dashboard Migration PR Plan +description: Plan for completing the task-dashboard migration +--- + +# Task-Dashboard Migration - PR Plan + +**Created:** January 19, 2026 +**Created by:** Husainuddin Mohammed, 223380186 + +--- + +## Approach: 2 PRs + +After analyzing the code dependencies, I'm proposing 2 PRs instead of splitting this into many small +ones. + +--- + +## PR 1: Investigation & Documentation + +**Branch:** `investigate/task-dashboard-migration` (CURRENT) +**Status:** Complete + +Documents the current state and migration plan for next cohort. + +**Files:** + +- `task-dashboard-investigation.md` +- `task-dashboard-pr-plan.md` + +--- + +## PR 2: Complete Migration + +**Branch:** `migrate/complete-task-dashboard` +**Status:** Not Started + +**Changes needed:** + +1. **Update template** (`dashboard.tpl.html`): + + ```diff + - + + + ``` + +2. **Update state** (`doubtfire.states.ts`): + - Register Angular component route + - Remove old AngularJS state + +3. **Clean up module** (`doubtfire-angularjs.module.ts`): + - Remove imports for 9 old files + +4. **Delete old files** (9 total): + - task-dashboard: `.coffee`, `.tpl.html`, `.scss` + - student-task-list: `.coffee`, `.tpl.html`, `.scss` + - dashboard: `.coffee`, `.tpl.html` + - `directives.coffee` + +5. **Update docs** (`README.md`): + - Mark completed: dashboard.coffee, directives.coffee, task-dashboard.coffee + +--- + +## Why These Changes Must Be Together + +``` +Change 1: Update template to + ↓ + └─→ If we stop here, state registration still points to old directive + Result: Routing fails ✗ + +Change 2: Update state registration + ↓ + └─→ If we stop here, module still imports old files + Result: Build warnings ✗ + +Change 3: Remove old imports + ↓ + └─→ If we stop here, old files still exist but aren't used + Result: Confusing codebase ✗ + +Change 4: Delete old files + ✓ Complete migration +``` + +**These are interdependent, not independent tasks.** Splitting them creates broken intermediate +states that don't work or make sense. + +--- + +## Dependency Flow + +``` +Current State: + dashboard.tpl.html → → AngularJS directive + ↓ + Old .coffee files + ↓ + Works but outdated + +Target State: + dashboard.tpl.html → → Angular component + ↓ + 7 card components + ↓ + Old files deleted ✓ +``` + +**Risk if split:** Each intermediate step leaves the codebase in a half-migrated state. + +--- + +## Testing Plan + +**Navigation testing:** + +- Direct URL: `/projects/123/dashboard` +- From project list → dashboard +- Dashboard → select task → back to dashboard +- Browser refresh while on dashboard +- Back/forward buttons + +**Functionality testing:** + +- All 7 card components render +- Task switching works +- Data loads correctly +- Console has no errors + +**Build testing:** + +- Build succeeds +- No import errors +- No missing file errors + +--- + +## Rollback Strategy + +If issues arise, revert the single PR. Old files remain in git history and can be restored quickly. + +**Why atomic changes matter:** One revert fixes everything vs. figuring out which of 5 PRs to +revert. + +--- + +## Key Insight for Next Cohort + +Search the codebase for `` before starting - make sure dashboard.tpl.html is the +only place using the old tag. Update module imports before deleting files to avoid build failures.