From 54c29d9f743bb6ac7e063bc35f0c5f5a4a930d20 Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sat, 24 Jan 2026 20:37:48 +1100 Subject: [PATCH 1/8] Add task-dashboard migration investigation and PR plan documentation --- .../Migration/task-dashboard-investigation.md | 166 ++++++++++ .../Migration/task-dashboard-pr-plan.md | 312 ++++++++++++++++++ 2 files changed, 478 insertions(+) create mode 100644 src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-investigation.md create mode 100644 src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-pr-plan.md 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..531e565d --- /dev/null +++ b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-investigation.md @@ -0,0 +1,166 @@ +\# Task-Dashboard Migration Investigation + + + +\*\*Date:\*\* January 19, 2026 + +\*\*Investigator:\*\* Husainuddin Mohammed, 223380186 + +\*\*Branch:\*\* investigate/task-dashboard-migration +\*\*Location:\*\* Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: 'T3 2025: Investigate partial migration - task-dashboard.coffee' + + +--- + + + +\## Summary + + + +The task-dashboard has already been migrated to Angular, but the old AngularJS files are still there and being used in some places. We need to finish the cleanup. + + + +--- + + + +\## What's Done ✅ + + + +\- TaskDashboardComponent (Angular) - fully working + +\- All 7 child card components migrated + +\- Components registered in Angular module + +\- Already being used successfully in `inbox.component.html` + + + +--- + + + +\## What's Left ❌ + + + +\### Old files that need to be deleted: + +\- `task-dashboard.coffee` + +\- `task-dashboard.tpl.html` + +\- `task-dashboard.scss` + +\- `student-task-list.coffee` + +\- `student-task-list.tpl.html` + +\- `student-task-list.scss` + +\- `dashboard.coffee` + +\- `dashboard.tpl.html` + +\- `directives.coffee` + + + +\### Files that need updating: + +\- `dashboard.tpl.html` - still uses `` instead of `` + +\- `doubtfire-angularjs.module.ts` - still imports the old .coffee files + +\- `README.md` - migration checklist needs updating + + + +--- + + + +\## Current Usage + + + +\*\*Old way (AngularJS):\*\* + +```html + + + + + +``` + + + +\*\*New way (Angular - already working):\*\* + +```html + + + + + +``` + + + +--- + + + +\## Key Findings + + + +1\. Migration is mostly done - just cleanup needed + +2\. The Angular components work fine (proven in inbox) + +3\. Main blocker: dashboard.tpl.html still uses old tags + +4\. Low risk - just need to update template and delete old files + + + +--- + + + +\## Next Steps + + + +1\. Create a PR plan for how to complete this + +2\. Update dashboard.tpl.html to use Angular components + +3\. Migrate the dashboard state fully + +4\. Delete old files + +5\. Update README + + + +--- + + + +\## Notes + + + +\- All the hard work is already done + +\- This is just finishing what someone started + +\- Should be straightforward + 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..f3138f7c --- /dev/null +++ b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-pr-plan.md @@ -0,0 +1,312 @@ +\# Task-Dashboard Migration - PR Plan + + + +\*\*Created:\*\* January 19, 2026 +\*\*Created by:\*\* Husainuddin Mohammed, 223380186 + +\*\*Based on:\*\* Investigation findings +\*\*Location:\*\* Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: 'T3 2025: Investigate partial migration - task-dashboard.coffee' + + + +--- + + + +\## Overview + + + +This plan breaks down the task-dashboard migration completion into 5 separate PRs. Each PR is small, testable, and can be reviewed independently. + + + +--- + + + +\## PR 1: Investigation \& Documentation + + + +\*\*Branch:\*\* `investigate/task-dashboard-migration` ✅ (CURRENT) + +\*\*Dependencies:\*\* None + +\*\*Status:\*\* Complete + + + +\*\*What:\*\* + +\- Document current state + +\- Create investigation report + +\- Create this PR plan + + + +\*\*Files:\*\* + +\- `task-dashboard-investigation.md` + +\- `task-dashboard-pr-plan.md` + + + +\*\*Changes:\*\* Documentation only, no code changes + + + +--- + + + +\## PR 2: Update dashboard template to use Angular components + + + +\*\*Branch:\*\* `migrate/dashboard-angular-components` + +\*\*Dependencies:\*\* None (can start after PR 1) + +\*\*Status:\*\* Not Started + + + +\*\*What:\*\* + +Update the AngularJS template to use new Angular component tags + + + +\*\*Changes:\*\* + +\- `dashboard.tpl.html`: + +  - Change `` to `` + +  - Change `` to `` + +  - Change `` to `` + + + +\*\*Testing:\*\* + +\- Load dashboard and verify it works + +\- Select different tasks + +\- Check all cards display correctly + + + +--- + + + +\## PR 3: Migrate dashboard state to Angular + + + +\*\*Branch:\*\* `migrate/dashboard-state` + +\*\*Dependencies:\*\* ⚠️ Requires PR 2 merged + +\*\*Status:\*\* Not Started + + + +\*\*What:\*\* + +Fully migrate the dashboard state from AngularJS to Angular routing + + + +\*\*Changes:\*\* + +\- Update `doubtfire.states.ts` - register Angular dashboard route + +\- Remove old AngularJS state registration + +\- Verify `project-dashboard.component.ts` handles routing + + + +\*\*Testing:\*\* + +\- Navigate to dashboard from different routes + +\- Direct URL navigation + +\- Browser back/forward buttons + +\- Page refresh while on dashboard + + + +--- + + + +\## PR 4: Delete old AngularJS files + + + +\*\*Branch:\*\* `cleanup/remove-old-dashboard-files` + +\*\*Dependencies:\*\* ⚠️ Requires PR 3 merged + +\*\*Status:\*\* Not Started + + + +\*\*What:\*\* + +Remove all old AngularJS files that are no longer needed + + + +\*\*Files to delete:\*\* + +\- `task-dashboard.coffee` + +\- `task-dashboard.tpl.html` + +\- `task-dashboard.scss` + +\- `student-task-list.coffee` + +\- `student-task-list.tpl.html` + +\- `student-task-list.scss` + +\- `dashboard.coffee` + +\- `dashboard.tpl.html` + +\- `directives.coffee` + + + +\*\*Files to update:\*\* + +\- `doubtfire-angularjs.module.ts` - remove imports of deleted files + + + +\*\*Testing:\*\* + +\- Full dashboard regression test + +\- Check console for errors + +\- Verify build succeeds + + + +--- + + + +\## PR 5: Update README + + + +\*\*Branch:\*\* `docs/update-migration-checklist` + +\*\*Dependencies:\*\* ⚠️ Requires PR 4 merged + +\*\*Status:\*\* Not Started + + + +\*\*What:\*\* + +Update README migration progress + + + +\*\*Changes to README.md:\*\* + +\- Change `- \[ ]` to `- \[x]` for: + +  - `dashboard.coffee` + +  - `directives.coffee` + +  - `task-dashboard.coffee` + + + +--- + + + +\## Timeline + +``` + +PR 1 (Docs) → Can merge immediately + +  ↓ + +PR 2 (Template) → Can start after PR 1 + +  ↓ + +PR 3 (State) → Needs PR 2 merged first + +  ↓ + +PR 4 (Cleanup) → Needs PR 3 merged first + +  ↓ + +PR 5 (README) → Needs PR 4 merged first + +``` + + + +--- + + + +\## Testing Checklist (for each PR) + + + +\- \[ ] Dashboard loads without errors + +\- \[ ] Can select tasks + +\- \[ ] All cards display correctly + +\- \[ ] Navigation works + +\- \[ ] Browser console clean + +\- \[ ] Build succeeds + + + +--- + + + +\## Notes + + + +\- Each PR is small and reversible + +\- Low risk approach + +\- Can stop at any point if issues arise + +\- Most work already done by previous developer + From a5b102dc48152bcc0b22069c61e02c84fb03c44d Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sat, 24 Jan 2026 21:36:34 +1100 Subject: [PATCH 2/8] Add inbox migration investigation and full migration plan documentation --- .../Migration/INBOX_FULL_MIGRATION_PLAN.md | 249 ++++++++++++++++++ .../INBOX_MIGRATION_INVESTIGATION.md | 77 ++++++ 2 files changed, 326 insertions(+) create mode 100644 src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md create mode 100644 src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_MIGRATION_INVESTIGATION.md diff --git a/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md new file mode 100644 index 00000000..330ad6e7 --- /dev/null +++ b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md @@ -0,0 +1,249 @@ +# Full Angular Migration Plan: Inbox Component + +**Date:** January 14, 2026 +**By:** Husainuddin Mohammed, 223380186 +**Task:** Complete full Angular migration for units/tasks/inbox +**Approach:** Bottom-up migration (parents first, then child) +**Task Location:** Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: T3 2025: Investigate partial migration - tasks\inbox\inbox.coffee + +--- + +## Parent Dependency Chain +``` +units/index (Parent 1 - AngularJS) + └─> units/tasks (Parent 2 - AngularJS) + └─> units/tasks/inbox (Child - needs migration) +``` + +The inbox component currently receives data through AngularJS scope inheritance from both parents. To migrate fully to Angular, we need to migrate the entire chain. + +--- + +## What Each Component Provides + +### Parent 1: units/index (index.coffee) + +**File:** `src/app/units/states/index/index.coffee` + +**What it does:** +- Loads the Unit object using `newUnitService.get(unitId)` +- Finds the user's role for this unit from `globalStateService.loadedUnitRoles` +- Handles admin/auditor special role logic +- Sets global view state via `globalStateService.setView("UNIT", unitRole)` +- Manages error handling and redirects to home if unit not found or no access +- Loads students for the unit via `newProjectService.loadStudents(unit)` + +**Provides to child states:** +- `$scope.unit` - the Unit object +- `$scope.unitRole` - the user's UnitRole for this unit + +--- + +### Parent 2: units/tasks (tasks.coffee) + +**File:** `src/app/units/states/tasks/tasks.coffee` + +**What it does:** +- Creates and manages the `taskData` object structure +- Parses `taskKey` from URL parameters +- Synchronizes URL when selected task changes +- Prevents unnecessary state reloads when navigating between same states +- Manages task selection callbacks + +**Provides to child states:** +- `$scope.taskData` object containing: + - `taskKey` - parsed task identifier from URL + - `source` - function to fetch tasks (set by child states) + - `selectedTask` - currently selected Task object + - `onSelectedTaskChange` - callback function when task changes + +--- + +### Child: units/tasks/inbox (inbox.coffee) + +**File:** `src/app/units/states/tasks/inbox/inbox.coffee` + +**What it does:** +- Sets `taskData.source = newTaskService.queryTasksForTaskInbox.bind(newTaskService)` +- Sets `taskData.taskDefMode = false` +- Renders the Angular InboxComponent with inherited scope data + +**Current status:** +- Angular component exists and works +- Still uses AngularJS routing and scope inheritance +- Template (`inbox.tpl.html`) is just a wrapper: `` + +--- + +## Migration Strategy: 3 Separate PRs + +### PR 1: Migrate units/index Parent ⭐ START HERE +**Edit on 24th Jan 2026:** +- PR 1 has been started already and PR was raised. However, not merged yet. +- Link: https://github.com/thoth-tech/doubtfire-web/pull/435 + + +**Goal:** Replace AngularJS units/index state with Angular equivalent + +**What to do:** +1. Create Angular state that resolves `unit` and `unitRole` directly +2. Replace controller logic with state resolvers +3. Handle authentication and permissions in resolvers +4. Remove dependency on globalStateService scope inheritance (or adapt it) +5. Ensure child states can still access resolved data + +**Files to create/modify:** +- Possibly create `units-index-state.component.ts` (or similar) +- Update `src/app/doubtfire.states.ts` with new state definition +- Add resolvers for `unit` and `unitRole` + +**Files to remove (after testing):** +- `src/app/units/states/index/index.coffee` +- `src/app/units/states/index/index.tpl.html` (if exists) + +**Testing:** +- Verify unit loads correctly +- Verify role permissions work +- Verify child states (tasks, inbox) still receive data +- Test admin/auditor special cases +- Test error handling (invalid unit, no access) + +**Estimated effort:** Medium (foundation for everything else) + +**Dependencies:** None (can start immediately) + +--- + +### PR 2: Migrate units/tasks Parent + +**Goal:** Replace AngularJS units/tasks state with Angular equivalent + +**What to do:** +1. Create Angular state that manages `taskData` object +2. Replace scope-based callbacks with Angular services or observables +3. Handle URL parameter synchronization properly +4. Implement task selection logic without scope inheritance +5. Manage taskKey parsing and updates + +**Files to create/modify:** +- Create `tasks-state.component.ts` or a dedicated service +- Update `src/app/doubtfire.states.ts` with new state +- Possibly create a `TaskDataService` to replace scope-based taskData + +**Files to remove (after testing):** +- `src/app/units/states/tasks/tasks.coffee` + +**Testing:** +- Verify taskData object is created correctly +- Verify task selection updates URL +- Verify URL params update taskKey +- Verify child states can access taskData +- Test navigation between same states doesn't reload unnecessarily + +**Estimated effort:** Medium-High (taskData callbacks are complex) + +**Dependencies:** ⚠️ Requires PR 1 merged first + +--- + +### PR 3: Migrate units/tasks/inbox Child + +**Goal:** Complete inbox migration by removing remaining AngularJS files + +**What to do:** +1. Update InboxComponent to work with Angular parent states +2. Set `taskData.source` in state configuration or resolver +3. Remove old AngularJS state registration +4. Test thoroughly with real data + +**Files to modify:** +- `src/app/doubtfire.states.ts` - update or verify inbox state +- Possibly `inbox.component.ts` if adjustments needed + +**Files to remove:** +- `src/app/units/states/tasks/inbox/inbox.coffee` +- `src/app/units/states/tasks/inbox/inbox.tpl.html` +- `src/app/units/states/tasks/inbox/inbox.scss` (keep `inbox.component.scss`) + +**Testing:** +- Full end-to-end test of inbox functionality +- Verify task list loads +- Verify task selection works +- Verify PDF viewing works +- Verify all filters and search work +- Test keyboard shortcuts + +**Estimated effort:** Low (most complexity handled by parents) + +**Dependencies:** ⚠️ Requires PR 1 AND PR 2 merged first + +--- + +## Summary + +**Total PRs needed:** 3 + +**Total parents to migrate:** 2 +1. units/index +2. units/tasks + +**Recommended order:** +1. PR 1: units/index (foundation) +2. PR 2: units/tasks (data management) +3. PR 3: inbox (final cleanup) + +**Key principle:** Bottom-up migration +- Start with the root parent +- Work down to child states +- Each PR is independently testable +- Each PR adds value even if later ones are delayed + +--- + +## Questions to Clarify + +1. Should each PR be submitted for review independently, or wait until all 3 are ready? +2. Are there any existing patterns for migrating abstract parent states we should follow? +3. Timeline expectations for completing all 3 PRs? + +Following questions were recommended by AI to ask: +4. Should we create new component files for the parent states, or just routing configs? +- What it means: + +Parent states like units/index don't have visible UI, they just provide data +Do we create a component file like units-index-state.component.ts? +OR: Just add routing config in doubtfire.states.ts without a component? + +- Why it matters: + +Creating components = more files, but follows Angular patterns +Just routing = simpler, but might not fit the framework + +- We need guidance: Look at how UnitRootState was done (it has a component) + +5. How should we handle the `globalStateService` dependency - migrate it too, or adapt? +- What it means: + +units/index uses globalStateService (an AngularJS service) +Do we also migrate globalStateService to Angular? +OR: Keep using it as-is and just call it differently? + +- Why it matters: + +Migrating it = more work, but cleaner +Keeping it = faster, but still has AngularJS dependency + +- We should check: Is globalStateService still AngularJS or already migrated? +--- + +## Next Steps + +**Before starting PR 1:** +1. Review how `UnitRootState` is already implemented (it might replace units/index) +2. Check for similar abstract parent state migrations in recent PRs +3. Clarify questions above with project leads + +**Once ready to start:** +- Begin with PR 1: units/index migration +- Create a new branch: `migrate/units-index-state` +- Follow test-driven approach (ensure nothing breaks) diff --git a/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_MIGRATION_INVESTIGATION.md b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_MIGRATION_INVESTIGATION.md new file mode 100644 index 00000000..46d251e7 --- /dev/null +++ b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_MIGRATION_INVESTIGATION.md @@ -0,0 +1,77 @@ +# Inbox Migration Investigation Report + +**Date:** January 08, 2026 +**By:** Husainuddin Mohammed, 223380186 +**Task:** Complete full Angular migration for units/tasks/inbox +**Approach:** Bottom-up migration (parents first, then child) +**Task Location:** Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: T3 2025: Investigate partial migration - tasks\inbox\inbox.coffee + +## Current Status (as of Jan 8, 2026) + +### What Exists: +- ✅ New Angular component files (`inbox.component.ts`, `.html`, `.scss`, `.spec.ts`) +- ✅ Old AngularJS files (`inbox.coffee`, `inbox.tpl.html`, `inbox.scss`) +- ⚠️ **Both routing systems are present and conflicting** + +### Issue Identified: +The Angular component (`InboxComponent`) was created but **depends on data from AngularJS parent scopes**: +- Expects `@Input() unit: Unit` +- Expects `@Input() unitRole: UnitRole` +- Expects `@Input() taskData: { source, selectedTask, taskKey, onSelectedTaskChange, taskDefMode }` + +These are currently provided by: +- Parent state `units/index` (provides `unit`, `unitRole`) +- Parent state `units/tasks` (provides `taskData` object with callbacks) + +### The Problem: +Creating a standalone Angular route requires either: +1. **Option A:** Keep AngularJS parent states and make inbox a hybrid child +2. **Option B:** Refactor component to fetch its own data (like Portfolios/Rollover do) + +### Current App Behavior: +- The AngularJS route is still active (registered in `inbox.coffee`) +- The app loads `inbox.tpl.html` which renders `` component +- The component receives data from AngularJS parent scope + +### What Was Done Today (08/01/2026): +- Added `InboxState` to `doubtfire.states.ts` (creates routing conflict) +- This new state doesn't provide required inputs → component won't work + +## My Recommendations: + +### Option 1: Complete Hybrid Migration (Simpler) +1. Keep Angular state as child of AngularJS `units/tasks` parent +2. Remove only: `inbox.coffee` registration +3. Keep: AngularJS parent states intact +4. Test thoroughly + +### Option 2: Full Angular Migration (Proper, but more work) +1. Refactor `InboxComponent` to not require parent scope inputs +2. Add resolvers to fetch `unit`, `unitRole`, `taskData` in the state +3. Handle `taskData` callbacks differently (use services instead of scope) +4. Remove all AngularJS files + +## Files to Eventually Remove: +- `src/app/units/states/tasks/inbox/inbox.coffee` +- `src/app/units/states/tasks/inbox/inbox.tpl.html` +- `src/app/units/states/tasks/inbox/inbox.scss` (old one, keep inbox.component.scss) +- Remove `'doubtfire.units.states.tasks.inbox'` from `tasks.coffee` module deps + +## Questions for Project Lead: +1. Should we do hybrid migration (keep AngularJS parents) or full Angular? +2. Is refactoring the component in scope for this task? +3. How much time is allocated for this migration? + +--- + +## Summary of Approaches + +### Hybrid Approach +Keep the AngularJS parent states and only migrate the inbox child route. +The component still gets data through scope inheritance. Less work but not a complete migration - we'd need to +revisit this later when the parents are migrated. + +### Full Angular Approach +Completely remove AngularJS dependencies by refactoring the component to fetch its own data. +This is the proper solution but requires migrating the parent states first (units/index and units/tasks), +which haven't been migrated yet. More work and currently blocked by dependencies. From 38d0975b3d0aae233896ec7455231c46def02c22 Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sun, 25 Jan 2026 12:55:07 +1100 Subject: [PATCH 3/8] Fix: Add frontmatter to task-dashboard files and remove inbox files --- .../Migration/task-dashboard-investigation.md | 175 +++------ .../Migration/task-dashboard-pr-plan.md | 349 +++++------------- 2 files changed, 149 insertions(+), 375 deletions(-) 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 index 531e565d..e832b546 100644 --- 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 @@ -1,166 +1,89 @@ -\# Task-Dashboard Migration Investigation - - - -\*\*Date:\*\* January 19, 2026 - -\*\*Investigator:\*\* Husainuddin Mohammed, 223380186 - -\*\*Branch:\*\* investigate/task-dashboard-migration -\*\*Location:\*\* Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: 'T3 2025: Investigate partial migration - task-dashboard.coffee' - - +--- +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 +**Location:** Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: 'T3 2025: Investigate partial migration - task-dashboard.coffee' -\## Summary - +--- +## Summary The task-dashboard has already been migrated to Angular, but the old AngularJS files are still there and being used in some places. We need to finish the cleanup. - - --- +## What's Done ✅ - -\## What's Done ✅ - - - -\- TaskDashboardComponent (Angular) - fully working - -\- All 7 child card components migrated - -\- Components registered in Angular module - -\- Already being used successfully in `inbox.component.html` - - +- TaskDashboardComponent (Angular) - fully working +- All 7 child card components migrated +- Components registered in Angular module +- Already being used successfully in `inbox.component.html` --- +## What's Left ❌ +### Old files that need to be deleted: +- `task-dashboard.coffee` +- `task-dashboard.tpl.html` +- `task-dashboard.scss` +- `student-task-list.coffee` +- `student-task-list.tpl.html` +- `student-task-list.scss` +- `dashboard.coffee` +- `dashboard.tpl.html` +- `directives.coffee` -\## What's Left ❌ - - - -\### Old files that need to be deleted: - -\- `task-dashboard.coffee` - -\- `task-dashboard.tpl.html` - -\- `task-dashboard.scss` - -\- `student-task-list.coffee` - -\- `student-task-list.tpl.html` - -\- `student-task-list.scss` - -\- `dashboard.coffee` - -\- `dashboard.tpl.html` - -\- `directives.coffee` - - - -\### Files that need updating: - -\- `dashboard.tpl.html` - still uses `` instead of `` - -\- `doubtfire-angularjs.module.ts` - still imports the old .coffee files - -\- `README.md` - migration checklist needs updating - - +### Files that need updating: +- `dashboard.tpl.html` - still uses `` instead of `` +- `doubtfire-angularjs.module.ts` - still imports the old .coffee files +- `README.md` - migration checklist needs updating --- +## Current Usage - -\## Current Usage - - - -\*\*Old way (AngularJS):\*\* - +**Old way (AngularJS):** ```html - - - ``` - - -\*\*New way (Angular - already working):\*\* - +**New way (Angular - already working):** ```html - - - + - ``` - - --- +## Key Findings - -\## Key Findings - - - -1\. Migration is mostly done - just cleanup needed - -2\. The Angular components work fine (proven in inbox) - -3\. Main blocker: dashboard.tpl.html still uses old tags - -4\. Low risk - just need to update template and delete old files - - +1. Migration is mostly done - just cleanup needed +2. The Angular components work fine (proven in inbox) +3. Main blocker: dashboard.tpl.html still uses old tags +4. Low risk - just need to update template and delete old files --- +## Next Steps - -\## Next Steps - - - -1\. Create a PR plan for how to complete this - -2\. Update dashboard.tpl.html to use Angular components - -3\. Migrate the dashboard state fully - -4\. Delete old files - -5\. Update README - - +1. Create a PR plan for how to complete this +2. Update dashboard.tpl.html to use Angular components +3. Migrate the dashboard state fully +4. Delete old files +5. Update README --- +## Notes - -\## Notes - - - -\- All the hard work is already done - -\- This is just finishing what someone started - -\- Should be straightforward - +- All the hard work is already done +- This is just finishing what someone started +- Should be straightforward \ No newline at end of file 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 index f3138f7c..6eebd231 100644 --- 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 @@ -1,312 +1,163 @@ -\# Task-Dashboard Migration - PR Plan - - - -\*\*Created:\*\* January 19, 2026 -\*\*Created by:\*\* Husainuddin Mohammed, 223380186 - -\*\*Based on:\*\* Investigation findings -\*\*Location:\*\* Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: 'T3 2025: Investigate partial migration - task-dashboard.coffee' - - - +--- +title: Task-Dashboard Migration PR Plan +description: Detailed plan for completing the task-dashboard migration in 5 separate PRs --- +# Task-Dashboard Migration - PR Plan +**Created:** January 19, 2026 +**Created by:** Husainuddin Mohammed, 223380186 +**Based on:** Investigation findings +**Location:** Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: 'T3 2025: Investigate partial migration - task-dashboard.coffee' -\## Overview - +--- +## Overview This plan breaks down the task-dashboard migration completion into 5 separate PRs. Each PR is small, testable, and can be reviewed independently. - - --- +## PR 1: Investigation & Documentation +**Branch:** `investigate/task-dashboard-migration` ✅ (CURRENT) +**Dependencies:** None +**Status:** Complete -\## PR 1: Investigation \& Documentation - - - -\*\*Branch:\*\* `investigate/task-dashboard-migration` ✅ (CURRENT) - -\*\*Dependencies:\*\* None - -\*\*Status:\*\* Complete - - - -\*\*What:\*\* - -\- Document current state - -\- Create investigation report - -\- Create this PR plan - - - -\*\*Files:\*\* - -\- `task-dashboard-investigation.md` - -\- `task-dashboard-pr-plan.md` - - - -\*\*Changes:\*\* Documentation only, no code changes +**What:** +- Document current state +- Create investigation report +- Create this PR plan +**Files:** +- `task-dashboard-investigation.md` +- `task-dashboard-pr-plan.md` +**Changes:** Documentation only, no code changes --- +## PR 2: Update dashboard template to use Angular components +**Branch:** `migrate/dashboard-angular-components` +**Dependencies:** None (can start after PR 1) +**Status:** Not Started -\## PR 2: Update dashboard template to use Angular components - - - -\*\*Branch:\*\* `migrate/dashboard-angular-components` - -\*\*Dependencies:\*\* None (can start after PR 1) - -\*\*Status:\*\* Not Started - - - -\*\*What:\*\* - +**What:** Update the AngularJS template to use new Angular component tags +**Changes:** +- `dashboard.tpl.html`: + - Change `` to `` + - Change `` to `` + - Change `` to `` - -\*\*Changes:\*\* - -\- `dashboard.tpl.html`: - -  - Change `` to `` - -  - Change `` to `` - -  - Change `` to `` - - - -\*\*Testing:\*\* - -\- Load dashboard and verify it works - -\- Select different tasks - -\- Check all cards display correctly - - +**Testing:** +- Load dashboard and verify it works +- Select different tasks +- Check all cards display correctly --- +## PR 3: Migrate dashboard state to Angular +**Branch:** `migrate/dashboard-state` +**Dependencies:** ⚠️ Requires PR 2 merged +**Status:** Not Started -\## PR 3: Migrate dashboard state to Angular - - - -\*\*Branch:\*\* `migrate/dashboard-state` - -\*\*Dependencies:\*\* ⚠️ Requires PR 2 merged - -\*\*Status:\*\* Not Started - - - -\*\*What:\*\* - +**What:** Fully migrate the dashboard state from AngularJS to Angular routing +**Changes:** +- Update `doubtfire.states.ts` - register Angular dashboard route +- Remove old AngularJS state registration +- Verify `project-dashboard.component.ts` handles routing - -\*\*Changes:\*\* - -\- Update `doubtfire.states.ts` - register Angular dashboard route - -\- Remove old AngularJS state registration - -\- Verify `project-dashboard.component.ts` handles routing - - - -\*\*Testing:\*\* - -\- Navigate to dashboard from different routes - -\- Direct URL navigation - -\- Browser back/forward buttons - -\- Page refresh while on dashboard - - +**Testing:** +- Navigate to dashboard from different routes +- Direct URL navigation +- Browser back/forward buttons +- Page refresh while on dashboard --- +## PR 4: Delete old AngularJS files +**Branch:** `cleanup/remove-old-dashboard-files` +**Dependencies:** ⚠️ Requires PR 3 merged +**Status:** Not Started -\## PR 4: Delete old AngularJS files - - - -\*\*Branch:\*\* `cleanup/remove-old-dashboard-files` - -\*\*Dependencies:\*\* ⚠️ Requires PR 3 merged - -\*\*Status:\*\* Not Started - - - -\*\*What:\*\* - +**What:** Remove all old AngularJS files that are no longer needed - - -\*\*Files to delete:\*\* - -\- `task-dashboard.coffee` - -\- `task-dashboard.tpl.html` - -\- `task-dashboard.scss` - -\- `student-task-list.coffee` - -\- `student-task-list.tpl.html` - -\- `student-task-list.scss` - -\- `dashboard.coffee` - -\- `dashboard.tpl.html` - -\- `directives.coffee` - - - -\*\*Files to update:\*\* - -\- `doubtfire-angularjs.module.ts` - remove imports of deleted files - - - -\*\*Testing:\*\* - -\- Full dashboard regression test - -\- Check console for errors - -\- Verify build succeeds - - +**Files to delete:** +- `task-dashboard.coffee` +- `task-dashboard.tpl.html` +- `task-dashboard.scss` +- `student-task-list.coffee` +- `student-task-list.tpl.html` +- `student-task-list.scss` +- `dashboard.coffee` +- `dashboard.tpl.html` +- `directives.coffee` + +**Files to update:** +- `doubtfire-angularjs.module.ts` - remove imports of deleted files + +**Testing:** +- Full dashboard regression test +- Check console for errors +- Verify build succeeds --- +## PR 5: Update README +**Branch:** `docs/update-migration-checklist` +**Dependencies:** ⚠️ Requires PR 4 merged +**Status:** Not Started -\## PR 5: Update README - - - -\*\*Branch:\*\* `docs/update-migration-checklist` - -\*\*Dependencies:\*\* ⚠️ Requires PR 4 merged - -\*\*Status:\*\* Not Started - - - -\*\*What:\*\* - +**What:** Update README migration progress - - -\*\*Changes to README.md:\*\* - -\- Change `- \[ ]` to `- \[x]` for: - -  - `dashboard.coffee` - -  - `directives.coffee` - -  - `task-dashboard.coffee` - - +**Changes to README.md:** +- Change `- [ ]` to `- [x]` for: + - `dashboard.coffee` + - `directives.coffee` + - `task-dashboard.coffee` --- - - -\## Timeline +## Timeline ``` - PR 1 (Docs) → Can merge immediately - -  ↓ - + ↓ PR 2 (Template) → Can start after PR 1 - -  ↓ - + ↓ PR 3 (State) → Needs PR 2 merged first - -  ↓ - + ↓ PR 4 (Cleanup) → Needs PR 3 merged first - -  ↓ - + ↓ PR 5 (README) → Needs PR 4 merged first - ``` - - --- +## Testing Checklist (for each PR) - -\## Testing Checklist (for each PR) - - - -\- \[ ] Dashboard loads without errors - -\- \[ ] Can select tasks - -\- \[ ] All cards display correctly - -\- \[ ] Navigation works - -\- \[ ] Browser console clean - -\- \[ ] Build succeeds - - +- [ ] Dashboard loads without errors +- [ ] Can select tasks +- [ ] All cards display correctly +- [ ] Navigation works +- [ ] Browser console clean +- [ ] Build succeeds --- +## Notes - -\## Notes - - - -\- Each PR is small and reversible - -\- Low risk approach - -\- Can stop at any point if issues arise - -\- Most work already done by previous developer - +- Each PR is small and reversible +- Low risk approach +- Can stop at any point if issues arise +- Most work already done by previous developer \ No newline at end of file From ccbbeb73f4446918c7fa354964041ae51e83c5eb Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sun, 25 Jan 2026 13:00:54 +1100 Subject: [PATCH 4/8] Remove inbox files from task-dashboard PR as this is in PR#162 --- .../Migration/INBOX_FULL_MIGRATION_PLAN.md | 249 ------------------ .../INBOX_MIGRATION_INVESTIGATION.md | 77 ------ 2 files changed, 326 deletions(-) delete mode 100644 src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md delete mode 100644 src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_MIGRATION_INVESTIGATION.md diff --git a/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md deleted file mode 100644 index 330ad6e7..00000000 --- a/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md +++ /dev/null @@ -1,249 +0,0 @@ -# Full Angular Migration Plan: Inbox Component - -**Date:** January 14, 2026 -**By:** Husainuddin Mohammed, 223380186 -**Task:** Complete full Angular migration for units/tasks/inbox -**Approach:** Bottom-up migration (parents first, then child) -**Task Location:** Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: T3 2025: Investigate partial migration - tasks\inbox\inbox.coffee - ---- - -## Parent Dependency Chain -``` -units/index (Parent 1 - AngularJS) - └─> units/tasks (Parent 2 - AngularJS) - └─> units/tasks/inbox (Child - needs migration) -``` - -The inbox component currently receives data through AngularJS scope inheritance from both parents. To migrate fully to Angular, we need to migrate the entire chain. - ---- - -## What Each Component Provides - -### Parent 1: units/index (index.coffee) - -**File:** `src/app/units/states/index/index.coffee` - -**What it does:** -- Loads the Unit object using `newUnitService.get(unitId)` -- Finds the user's role for this unit from `globalStateService.loadedUnitRoles` -- Handles admin/auditor special role logic -- Sets global view state via `globalStateService.setView("UNIT", unitRole)` -- Manages error handling and redirects to home if unit not found or no access -- Loads students for the unit via `newProjectService.loadStudents(unit)` - -**Provides to child states:** -- `$scope.unit` - the Unit object -- `$scope.unitRole` - the user's UnitRole for this unit - ---- - -### Parent 2: units/tasks (tasks.coffee) - -**File:** `src/app/units/states/tasks/tasks.coffee` - -**What it does:** -- Creates and manages the `taskData` object structure -- Parses `taskKey` from URL parameters -- Synchronizes URL when selected task changes -- Prevents unnecessary state reloads when navigating between same states -- Manages task selection callbacks - -**Provides to child states:** -- `$scope.taskData` object containing: - - `taskKey` - parsed task identifier from URL - - `source` - function to fetch tasks (set by child states) - - `selectedTask` - currently selected Task object - - `onSelectedTaskChange` - callback function when task changes - ---- - -### Child: units/tasks/inbox (inbox.coffee) - -**File:** `src/app/units/states/tasks/inbox/inbox.coffee` - -**What it does:** -- Sets `taskData.source = newTaskService.queryTasksForTaskInbox.bind(newTaskService)` -- Sets `taskData.taskDefMode = false` -- Renders the Angular InboxComponent with inherited scope data - -**Current status:** -- Angular component exists and works -- Still uses AngularJS routing and scope inheritance -- Template (`inbox.tpl.html`) is just a wrapper: `` - ---- - -## Migration Strategy: 3 Separate PRs - -### PR 1: Migrate units/index Parent ⭐ START HERE -**Edit on 24th Jan 2026:** -- PR 1 has been started already and PR was raised. However, not merged yet. -- Link: https://github.com/thoth-tech/doubtfire-web/pull/435 - - -**Goal:** Replace AngularJS units/index state with Angular equivalent - -**What to do:** -1. Create Angular state that resolves `unit` and `unitRole` directly -2. Replace controller logic with state resolvers -3. Handle authentication and permissions in resolvers -4. Remove dependency on globalStateService scope inheritance (or adapt it) -5. Ensure child states can still access resolved data - -**Files to create/modify:** -- Possibly create `units-index-state.component.ts` (or similar) -- Update `src/app/doubtfire.states.ts` with new state definition -- Add resolvers for `unit` and `unitRole` - -**Files to remove (after testing):** -- `src/app/units/states/index/index.coffee` -- `src/app/units/states/index/index.tpl.html` (if exists) - -**Testing:** -- Verify unit loads correctly -- Verify role permissions work -- Verify child states (tasks, inbox) still receive data -- Test admin/auditor special cases -- Test error handling (invalid unit, no access) - -**Estimated effort:** Medium (foundation for everything else) - -**Dependencies:** None (can start immediately) - ---- - -### PR 2: Migrate units/tasks Parent - -**Goal:** Replace AngularJS units/tasks state with Angular equivalent - -**What to do:** -1. Create Angular state that manages `taskData` object -2. Replace scope-based callbacks with Angular services or observables -3. Handle URL parameter synchronization properly -4. Implement task selection logic without scope inheritance -5. Manage taskKey parsing and updates - -**Files to create/modify:** -- Create `tasks-state.component.ts` or a dedicated service -- Update `src/app/doubtfire.states.ts` with new state -- Possibly create a `TaskDataService` to replace scope-based taskData - -**Files to remove (after testing):** -- `src/app/units/states/tasks/tasks.coffee` - -**Testing:** -- Verify taskData object is created correctly -- Verify task selection updates URL -- Verify URL params update taskKey -- Verify child states can access taskData -- Test navigation between same states doesn't reload unnecessarily - -**Estimated effort:** Medium-High (taskData callbacks are complex) - -**Dependencies:** ⚠️ Requires PR 1 merged first - ---- - -### PR 3: Migrate units/tasks/inbox Child - -**Goal:** Complete inbox migration by removing remaining AngularJS files - -**What to do:** -1. Update InboxComponent to work with Angular parent states -2. Set `taskData.source` in state configuration or resolver -3. Remove old AngularJS state registration -4. Test thoroughly with real data - -**Files to modify:** -- `src/app/doubtfire.states.ts` - update or verify inbox state -- Possibly `inbox.component.ts` if adjustments needed - -**Files to remove:** -- `src/app/units/states/tasks/inbox/inbox.coffee` -- `src/app/units/states/tasks/inbox/inbox.tpl.html` -- `src/app/units/states/tasks/inbox/inbox.scss` (keep `inbox.component.scss`) - -**Testing:** -- Full end-to-end test of inbox functionality -- Verify task list loads -- Verify task selection works -- Verify PDF viewing works -- Verify all filters and search work -- Test keyboard shortcuts - -**Estimated effort:** Low (most complexity handled by parents) - -**Dependencies:** ⚠️ Requires PR 1 AND PR 2 merged first - ---- - -## Summary - -**Total PRs needed:** 3 - -**Total parents to migrate:** 2 -1. units/index -2. units/tasks - -**Recommended order:** -1. PR 1: units/index (foundation) -2. PR 2: units/tasks (data management) -3. PR 3: inbox (final cleanup) - -**Key principle:** Bottom-up migration -- Start with the root parent -- Work down to child states -- Each PR is independently testable -- Each PR adds value even if later ones are delayed - ---- - -## Questions to Clarify - -1. Should each PR be submitted for review independently, or wait until all 3 are ready? -2. Are there any existing patterns for migrating abstract parent states we should follow? -3. Timeline expectations for completing all 3 PRs? - -Following questions were recommended by AI to ask: -4. Should we create new component files for the parent states, or just routing configs? -- What it means: - -Parent states like units/index don't have visible UI, they just provide data -Do we create a component file like units-index-state.component.ts? -OR: Just add routing config in doubtfire.states.ts without a component? - -- Why it matters: - -Creating components = more files, but follows Angular patterns -Just routing = simpler, but might not fit the framework - -- We need guidance: Look at how UnitRootState was done (it has a component) - -5. How should we handle the `globalStateService` dependency - migrate it too, or adapt? -- What it means: - -units/index uses globalStateService (an AngularJS service) -Do we also migrate globalStateService to Angular? -OR: Keep using it as-is and just call it differently? - -- Why it matters: - -Migrating it = more work, but cleaner -Keeping it = faster, but still has AngularJS dependency - -- We should check: Is globalStateService still AngularJS or already migrated? ---- - -## Next Steps - -**Before starting PR 1:** -1. Review how `UnitRootState` is already implemented (it might replace units/index) -2. Check for similar abstract parent state migrations in recent PRs -3. Clarify questions above with project leads - -**Once ready to start:** -- Begin with PR 1: units/index migration -- Create a new branch: `migrate/units-index-state` -- Follow test-driven approach (ensure nothing breaks) diff --git a/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_MIGRATION_INVESTIGATION.md b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_MIGRATION_INVESTIGATION.md deleted file mode 100644 index 46d251e7..00000000 --- a/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_MIGRATION_INVESTIGATION.md +++ /dev/null @@ -1,77 +0,0 @@ -# Inbox Migration Investigation Report - -**Date:** January 08, 2026 -**By:** Husainuddin Mohammed, 223380186 -**Task:** Complete full Angular migration for units/tasks/inbox -**Approach:** Bottom-up migration (parents first, then child) -**Task Location:** Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: T3 2025: Investigate partial migration - tasks\inbox\inbox.coffee - -## Current Status (as of Jan 8, 2026) - -### What Exists: -- ✅ New Angular component files (`inbox.component.ts`, `.html`, `.scss`, `.spec.ts`) -- ✅ Old AngularJS files (`inbox.coffee`, `inbox.tpl.html`, `inbox.scss`) -- ⚠️ **Both routing systems are present and conflicting** - -### Issue Identified: -The Angular component (`InboxComponent`) was created but **depends on data from AngularJS parent scopes**: -- Expects `@Input() unit: Unit` -- Expects `@Input() unitRole: UnitRole` -- Expects `@Input() taskData: { source, selectedTask, taskKey, onSelectedTaskChange, taskDefMode }` - -These are currently provided by: -- Parent state `units/index` (provides `unit`, `unitRole`) -- Parent state `units/tasks` (provides `taskData` object with callbacks) - -### The Problem: -Creating a standalone Angular route requires either: -1. **Option A:** Keep AngularJS parent states and make inbox a hybrid child -2. **Option B:** Refactor component to fetch its own data (like Portfolios/Rollover do) - -### Current App Behavior: -- The AngularJS route is still active (registered in `inbox.coffee`) -- The app loads `inbox.tpl.html` which renders `` component -- The component receives data from AngularJS parent scope - -### What Was Done Today (08/01/2026): -- Added `InboxState` to `doubtfire.states.ts` (creates routing conflict) -- This new state doesn't provide required inputs → component won't work - -## My Recommendations: - -### Option 1: Complete Hybrid Migration (Simpler) -1. Keep Angular state as child of AngularJS `units/tasks` parent -2. Remove only: `inbox.coffee` registration -3. Keep: AngularJS parent states intact -4. Test thoroughly - -### Option 2: Full Angular Migration (Proper, but more work) -1. Refactor `InboxComponent` to not require parent scope inputs -2. Add resolvers to fetch `unit`, `unitRole`, `taskData` in the state -3. Handle `taskData` callbacks differently (use services instead of scope) -4. Remove all AngularJS files - -## Files to Eventually Remove: -- `src/app/units/states/tasks/inbox/inbox.coffee` -- `src/app/units/states/tasks/inbox/inbox.tpl.html` -- `src/app/units/states/tasks/inbox/inbox.scss` (old one, keep inbox.component.scss) -- Remove `'doubtfire.units.states.tasks.inbox'` from `tasks.coffee` module deps - -## Questions for Project Lead: -1. Should we do hybrid migration (keep AngularJS parents) or full Angular? -2. Is refactoring the component in scope for this task? -3. How much time is allocated for this migration? - ---- - -## Summary of Approaches - -### Hybrid Approach -Keep the AngularJS parent states and only migrate the inbox child route. -The component still gets data through scope inheritance. Less work but not a complete migration - we'd need to -revisit this later when the parents are migrated. - -### Full Angular Approach -Completely remove AngularJS dependencies by refactoring the component to fetch its own data. -This is the proper solution but requires migrating the parent states first (units/index and units/tasks), -which haven't been migrated yet. More work and currently blocked by dependencies. From bb9662e45ded5a996e9557fecbf518ae87de465b Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Fri, 30 Jan 2026 20:45:23 +1100 Subject: [PATCH 5/8] Revised task-dashboard investigation and PR plan --- .../Migration/task-dashboard-investigation.md | 149 ++++++++----- .../Migration/task-dashboard-pr-plan.md | 196 ++++++++---------- 2 files changed, 189 insertions(+), 156 deletions(-) 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 index e832b546..e1cc480e 100644 --- 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 @@ -7,83 +7,136 @@ description: Investigation report for completing the task-dashboard migration fr **Date:** January 19, 2026 **Investigator:** Husainuddin Mohammed, 223380186 -**Branch:** investigate/task-dashboard-migration -**Location:** Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: 'T3 2025: Investigate partial migration - task-dashboard.coffee' +**Branch:** `investigate/task-dashboard-migration` --- -## Summary +## What I Found -The task-dashboard has already been migrated to Angular, but the old AngularJS files are still there and being used in some places. We need to finish the cleanup. +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. --- -## What's Done ✅ +## The Actual Components -- TaskDashboardComponent (Angular) - fully working -- All 7 child card components migrated -- Components registered in Angular module -- Already being used successfully in `inbox.component.html` +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's Left ❌ - -### Old files that need to be deleted: -- `task-dashboard.coffee` -- `task-dashboard.tpl.html` -- `task-dashboard.scss` -- `student-task-list.coffee` -- `student-task-list.tpl.html` -- `student-task-list.scss` -- `dashboard.coffee` -- `dashboard.tpl.html` +## 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` -### Files that need updating: -- `dashboard.tpl.html` - still uses `` instead of `` -- `doubtfire-angularjs.module.ts` - still imports the old .coffee files -- `README.md` - migration checklist needs updating +--- + +## 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 Usage +## Current vs Target State -**Old way (AngularJS):** -```html - - +**Right now:** +``` +dashboard.tpl.html → → AngularJS system (old) +inbox.component.html → → Angular system (new) + ↓ + Both render same 7 cards ``` -**New way (Angular - already working):** -```html - - +**After migration:** +``` +dashboard.tpl.html → ↘ + Angular system (unified) +inbox.component.html → ↗ + ↓ + 7 card components + +Old AngularJS files deleted ✓ ``` --- -## Key Findings +## Migration Steps -1. Migration is mostly done - just cleanup needed -2. The Angular components work fine (proven in inbox) -3. Main blocker: dashboard.tpl.html still uses old tags -4. Low risk - just need to update template and delete old files +``` +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 --- -## Next Steps +## 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. -1. Create a PR plan for how to complete this -2. Update dashboard.tpl.html to use Angular components -3. Migrate the dashboard state fully -4. Delete old files -5. Update README +Main risk: making sure no other files reference `` besides the main dashboard template. --- -## Notes +## 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. -- All the hard work is already done -- This is just finishing what someone started -- Should be straightforward \ No newline at end of file +Most of the time will be testing different navigation paths. \ No newline at end of file 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 index 6eebd231..46d59a84 100644 --- 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 @@ -1,163 +1,143 @@ --- title: Task-Dashboard Migration PR Plan -description: Detailed plan for completing the task-dashboard migration in 5 separate PRs +description: Plan for completing the task-dashboard migration --- # Task-Dashboard Migration - PR Plan **Created:** January 19, 2026 -**Created by:** Husainuddin Mohammed, 223380186 -**Based on:** Investigation findings -**Location:** Teams Thoth Tech group → OnTrack in main channels → OnTrack Planner Board (top) → Filter by 'Frontend - Angular/Tailwind/Typescript' tag → Task: 'T3 2025: Investigate partial migration - task-dashboard.coffee' +**Created by:** Husainuddin Mohammed, 223380186 --- -## Overview +## Approach: 2 PRs -This plan breaks down the task-dashboard migration completion into 5 separate PRs. Each PR is small, testable, and can be reviewed independently. +After analyzing the code dependencies, I'm proposing 2 PRs instead of splitting this into many small ones. --- -## PR 1: Investigation & Documentation +## PR 1: Investigation & Documentation -**Branch:** `investigate/task-dashboard-migration` ✅ (CURRENT) -**Dependencies:** None +**Branch:** `investigate/task-dashboard-migration` (CURRENT) **Status:** Complete -**What:** -- Document current state -- Create investigation report -- Create this PR plan +Documents the current state and migration plan for next cohort. **Files:** - `task-dashboard-investigation.md` - `task-dashboard-pr-plan.md` -**Changes:** Documentation only, no code changes - --- -## PR 2: Update dashboard template to use Angular components +## PR 2: Complete Migration -**Branch:** `migrate/dashboard-angular-components` -**Dependencies:** None (can start after PR 1) +**Branch:** `migrate/complete-task-dashboard` **Status:** Not Started -**What:** -Update the AngularJS template to use new Angular component tags - -**Changes:** -- `dashboard.tpl.html`: - - Change `` to `` - - Change `` to `` - - Change `` to `` - -**Testing:** -- Load dashboard and verify it works -- Select different tasks -- Check all cards display correctly - ---- +**Changes needed:** -## PR 3: Migrate dashboard state to Angular +1. **Update template** (`dashboard.tpl.html`): + ```diff + - + + + ``` -**Branch:** `migrate/dashboard-state` -**Dependencies:** ⚠️ Requires PR 2 merged -**Status:** Not Started +2. **Update state** (`doubtfire.states.ts`): + - Register Angular component route + - Remove old AngularJS state -**What:** -Fully migrate the dashboard state from AngularJS to Angular routing +3. **Clean up module** (`doubtfire-angularjs.module.ts`): + - Remove imports for 9 old files -**Changes:** -- Update `doubtfire.states.ts` - register Angular dashboard route -- Remove old AngularJS state registration -- Verify `project-dashboard.component.ts` handles routing +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` -**Testing:** -- Navigate to dashboard from different routes -- Direct URL navigation -- Browser back/forward buttons -- Page refresh while on dashboard +5. **Update docs** (`README.md`): + - Mark completed: dashboard.coffee, directives.coffee, task-dashboard.coffee --- -## PR 4: Delete old AngularJS files +## Why These Changes Must Be Together -**Branch:** `cleanup/remove-old-dashboard-files` -**Dependencies:** ⚠️ Requires PR 3 merged -**Status:** Not Started +``` +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 +``` -**What:** -Remove all old AngularJS files that are no longer needed +**These are interdependent, not independent tasks.** Splitting them creates broken intermediate states that don't work or make sense. -**Files to delete:** -- `task-dashboard.coffee` -- `task-dashboard.tpl.html` -- `task-dashboard.scss` -- `student-task-list.coffee` -- `student-task-list.tpl.html` -- `student-task-list.scss` -- `dashboard.coffee` -- `dashboard.tpl.html` -- `directives.coffee` +--- -**Files to update:** -- `doubtfire-angularjs.module.ts` - remove imports of deleted files +## Dependency Flow -**Testing:** -- Full dashboard regression test -- Check console for errors -- Verify build succeeds +``` +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. --- -## PR 5: Update README +## Testing Plan -**Branch:** `docs/update-migration-checklist` -**Dependencies:** ⚠️ Requires PR 4 merged -**Status:** Not Started +**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 -**What:** -Update README migration progress +**Functionality testing:** +- All 7 card components render +- Task switching works +- Data loads correctly +- Console has no errors -**Changes to README.md:** -- Change `- [ ]` to `- [x]` for: - - `dashboard.coffee` - - `directives.coffee` - - `task-dashboard.coffee` +**Build testing:** +- Build succeeds +- No import errors +- No missing file errors --- -## Timeline - -``` -PR 1 (Docs) → Can merge immediately - ↓ -PR 2 (Template) → Can start after PR 1 - ↓ -PR 3 (State) → Needs PR 2 merged first - ↓ -PR 4 (Cleanup) → Needs PR 3 merged first - ↓ -PR 5 (README) → Needs PR 4 merged first -``` - ---- +## Rollback Strategy -## Testing Checklist (for each PR) +If issues arise, revert the single PR. Old files remain in git history and can be restored quickly. -- [ ] Dashboard loads without errors -- [ ] Can select tasks -- [ ] All cards display correctly -- [ ] Navigation works -- [ ] Browser console clean -- [ ] Build succeeds +**Why atomic changes matter:** One revert fixes everything vs. figuring out which of 5 PRs to revert. --- -## Notes +## Key Insight for Next Cohort -- Each PR is small and reversible -- Low risk approach -- Can stop at any point if issues arise -- Most work already done by previous developer \ No newline at end of file +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. \ No newline at end of file From 6d3a92617ba042ec16f06d3de29c7d09da388dfa Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sun, 1 Feb 2026 10:46:46 +1100 Subject: [PATCH 6/8] Fix: Add newline at end of files to fix lint errors --- .../Migration/task-dashboard-investigation.md | 3 ++- .../Front End Migration/Migration/task-dashboard-pr-plan.md | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) 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 index e1cc480e..b9d2da84 100644 --- 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 @@ -139,4 +139,5 @@ Main risk: making sure no other files reference `` besides the m 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. \ No newline at end of file +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 index 46d59a84..b9534c70 100644 --- 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 @@ -140,4 +140,5 @@ If issues arise, revert the single PR. Old files remain in git history and can b ## 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. \ No newline at end of file +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. + From a61e4b2dafb61355043a562bcc62b95f96e49007 Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sun, 1 Feb 2026 11:55:47 +1100 Subject: [PATCH 7/8] Fix: Ensure files end with exactly one newline --- .../Migration/task-dashboard-investigation.md | 285 +++++++++-------- .../Migration/task-dashboard-pr-plan.md | 287 +++++++++--------- 2 files changed, 285 insertions(+), 287 deletions(-) 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 index b9d2da84..547c054f 100644 --- 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 @@ -1,143 +1,142 @@ ---- -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. - +--- +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 index b9534c70..5828f3d5 100644 --- 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 @@ -1,144 +1,143 @@ ---- -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. - +--- +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. From fd2c6385e82c171cf46a7269289f7cf0396228ee Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sun, 1 Feb 2026 12:25:23 +1100 Subject: [PATCH 8/8] Fix: Run Prettier formatting on task-dashboard files --- .../Migration/task-dashboard-investigation.md | 300 +++++++++--------- .../Migration/task-dashboard-pr-plan.md | 295 ++++++++--------- 2 files changed, 310 insertions(+), 285 deletions(-) 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 index 547c054f..36b0954f 100644 --- 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 @@ -1,142 +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. +--- +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 index 5828f3d5..cf623987 100644 --- 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 @@ -1,143 +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. +--- +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.