From 54c29d9f743bb6ac7e063bc35f0c5f5a4a930d20 Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sat, 24 Jan 2026 20:37:48 +1100 Subject: [PATCH 1/7] 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 50b9f05960160abedb3c950a58522a373d876297 Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sat, 24 Jan 2026 21:41:36 +1100 Subject: [PATCH 2/7] 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 4b7a1b91a789325fd45ff779ef54b12e253975f5 Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sun, 25 Jan 2026 11:29:11 +1100 Subject: [PATCH 3/7] Fix: Add frontmatter to inbox migration documentation files --- .../Migration/INBOX_FULL_MIGRATION_PLAN.md | 11 ++++++++--- .../Migration/INBOX_MIGRATION_INVESTIGATION.md | 11 ++++++++--- 2 files changed, 16 insertions(+), 6 deletions(-) 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 index 330ad6e7..3b797848 100644 --- 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 @@ -1,9 +1,14 @@ +--- +title: Full Angular Migration Plan - Inbox Component +description: Complete migration plan for inbox component including parent dependency chain +--- + # Full Angular Migration Plan: Inbox Component **Date:** January 14, 2026 -**By:** Husainuddin Mohammed, 223380186 +**By:** Husainuddin Mohammed, 223380186 **Task:** Complete full Angular migration for units/tasks/inbox -**Approach:** Bottom-up migration (parents first, then child) +**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 --- @@ -246,4 +251,4 @@ Keeping it = faster, but still has AngularJS dependency **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) +- Follow test-driven approach (ensure nothing breaks) \ No newline at end of file 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 index 46d251e7..ef0cc137 100644 --- 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 @@ -1,9 +1,14 @@ +--- +title: Inbox Migration Investigation Report +description: Investigation report for the inbox component migration from AngularJS to Angular +--- + # Inbox Migration Investigation Report **Date:** January 08, 2026 -**By:** Husainuddin Mohammed, 223380186 +**By:** Husainuddin Mohammed, 223380186 **Task:** Complete full Angular migration for units/tasks/inbox -**Approach:** Bottom-up migration (parents first, then child) +**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) @@ -74,4 +79,4 @@ 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. +which haven't been migrated yet. More work and currently blocked by dependencies. \ No newline at end of file From c96ac8db69ac76563350a28dd54b4e88204c5ea9 Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sun, 25 Jan 2026 12:44:02 +1100 Subject: [PATCH 4/7] Remove task-dashboard files (belong to different PR) --- .../Migration/task-dashboard-investigation.md | 166 ---------- .../Migration/task-dashboard-pr-plan.md | 312 ------------------ 2 files changed, 478 deletions(-) delete mode 100644 src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-investigation.md delete 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 deleted file mode 100644 index 531e565d..00000000 --- a/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-investigation.md +++ /dev/null @@ -1,166 +0,0 @@ -\# 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 deleted file mode 100644 index f3138f7c..00000000 --- a/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/task-dashboard-pr-plan.md +++ /dev/null @@ -1,312 +0,0 @@ -\# 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 76c02fb843e1062d085fb7cfe98e9e7a44cea3e3 Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Fri, 30 Jan 2026 21:02:00 +1100 Subject: [PATCH 5/7] Revise inbox investigation and migration plan - add diagrams and condense to 1 page each --- .../Migration/INBOX_FULL_MIGRATION_PLAN.md | 273 +++++------------- .../INBOX_MIGRATION_INVESTIGATION.md | 161 ++++++----- 2 files changed, 167 insertions(+), 267 deletions(-) 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 index 3b797848..344aa9db 100644 --- 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 @@ -7,248 +7,123 @@ description: Complete migration plan for inbox component including parent depend **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 +**Task:** Complete full Angular migration for units/tasks/inbox --- -## Parent Dependency Chain +## Component Dependency Chain + ``` -units/index (Parent 1 - AngularJS) - └─> units/tasks (Parent 2 - AngularJS) - └─> units/tasks/inbox (Child - needs migration) +units/index.coffee (Parent 1) + ↓ + Provides: unit, unitRole + ↓ +units/tasks/tasks.coffee (Parent 2) + ↓ + Provides: taskData object + ↓ +units/tasks/inbox/inbox.coffee (Child) + ↓ + Uses: unit, unitRole, taskData ``` -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. +**The problem:** Inbox component needs data from two AngularJS parent states. Can't fully migrate inbox until parents are migrated. --- -## What Each Component Provides - -### Parent 1: units/index (index.coffee) +## What Each Parent Provides -**File:** `src/app/units/states/index/index.coffee` +**Parent 1 (units/index.coffee):** +- Loads unit object from API +- Resolves user's role for this unit +- Handles permissions and redirects -**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)` +**Parent 2 (units/tasks/tasks.coffee):** +- Creates taskData object structure +- Manages task selection logic +- Syncs URL with selected task -**Provides to child states:** -- `$scope.unit` - the Unit object -- `$scope.unitRole` - the user's UnitRole for this unit +**Child (inbox.coffee):** +- Sets task source function +- Renders Angular InboxComponent +- Already migrated to Angular - just needs parent cleanup --- -### 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 +## Migration Order: 3 PRs ---- - -### Child: units/tasks/inbox (inbox.coffee) +### PR 1: Migrate units/index (START HERE) +**Status:** Already started - https://github.com/thoth-tech/doubtfire-web/pull/435 -**File:** `src/app/units/states/tasks/inbox/inbox.coffee` +Migrate the root parent first. Replace AngularJS state with Angular resolvers that provide unit and unitRole data. -**What it does:** -- Sets `taskData.source = newTaskService.queryTasksForTaskInbox.bind(newTaskService)` -- Sets `taskData.taskDefMode = false` -- Renders the Angular InboxComponent with inherited scope data +**Files to change:** +- Create Angular state in `doubtfire.states.ts` +- Add resolvers for unit and unitRole +- Delete `units/states/index/index.coffee` -**Current status:** -- Angular component exists and works -- Still uses AngularJS routing and scope inheritance -- Template (`inbox.tpl.html`) is just a wrapper: `` +**Why first:** Foundation for everything below it --- -## 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 +### PR 2: Migrate units/tasks -**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 +Replace AngularJS state with Angular equivalent that manages taskData object. -**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 change:** +- Create state or service for taskData management +- Update `doubtfire.states.ts` +- Delete `units/states/tasks/tasks.coffee` -**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) +**Why second:** Depends on PR 1 providing unit/unitRole --- -### 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 +### PR 3: Complete inbox migration -**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 +Remove remaining AngularJS files now that parents provide data through Angular. -**Files to remove (after testing):** -- `src/app/units/states/tasks/tasks.coffee` +**Files to delete:** +- `units/states/tasks/inbox/inbox.coffee` +- `units/states/tasks/inbox/inbox.tpl.html` -**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 +**Why last:** Depends on both parent PRs --- -### 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 +## Visual Flow -**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`) +``` +Current State: + AngularJS State → AngularJS State → AngularJS wrapper → Angular Component + (units/index) (units/tasks) (inbox.coffee) (InboxComponent) -**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 +After PR 1: + Angular State → AngularJS State → AngularJS wrapper → Angular Component + ✓ -**Estimated effort:** Low (most complexity handled by parents) +After PR 2: + Angular State → Angular State → AngularJS wrapper → Angular Component + ✓ ✓ -**Dependencies:** ⚠️ Requires PR 1 AND PR 2 merged first +After PR 3: + Angular State → Angular State → Angular Component + ✓ ✓ ✓ (fully migrated) +``` --- -## 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) +## Testing Strategy -**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 +Each PR needs to verify: +- Unit loads correctly with proper permissions +- Task selection and navigation works +- URL syncing functions properly +- Inbox displays tasks and allows interaction +- No console errors --- -## 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 +## Key Principle -**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) \ No newline at end of file +**Bottom-up migration:** Start at the root (units/index), work down to the child (inbox). Each PR is independently testable and valuable even if later ones are delayed. \ No newline at end of file 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 index ef0cc137..c9a3bbc7 100644 --- 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 @@ -7,76 +7,101 @@ description: Investigation report for the inbox component migration from Angular **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? +**Task:** Investigate inbox component migration from AngularJS to Angular --- -## Summary of Approaches +## What I Found -### 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. +The inbox component has already been migrated to Angular (`InboxComponent`), but it can't work standalone because it depends on data from two AngularJS parent states. -### 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. \ No newline at end of file +**Component dependency diagram:** +``` +units/index (AngularJS parent) + ↓ provides: unit, unitRole +units/tasks (AngularJS parent) + ↓ provides: taskData +inbox (Angular component - already exists) + ↓ needs all the above data +``` + +The Angular component exists, but the parents feeding it data are still AngularJS. + +--- + +## Current State + +**What works:** +- Angular InboxComponent exists (`.component.ts`, `.html`, `.scss`) +- Old AngularJS files still present (`.coffee`, `.tpl.html`) +- App loads via AngularJS route → renders Angular component with scope data + +**What doesn't work:** +- Can't create standalone Angular route +- Component expects `@Input()` data that comes from AngularJS parent scopes +- Creating Angular state without parents causes component to break + +--- + +## The Problem + +InboxComponent requires these inputs: +- `unit: Unit` (from units/index parent) +- `unitRole: UnitRole` (from units/index parent) +- `taskData` object (from units/tasks parent) + +Without the parent data, the component has nothing to display. + +--- + +## Two Approaches + +### Approach 1: Keep Parents (Partial Migration) +**What:** Keep AngularJS parents, only migrate inbox routing +**Pros:** Quick, minimal changes +**Cons:** Still dependent on AngularJS, need to revisit later +**Files to remove:** Just `inbox.coffee` and `.tpl.html` + +### Approach 2: Migrate Everything (Complete Migration) +**What:** Migrate both parent states first, then inbox +**Pros:** Clean, fully Angular, no AngularJS dependencies +**Cons:** More work, needs parent migration first +**Files to remove:** All inbox AngularJS files after parents done + +--- + +## Recommended Path + +**Approach 2** is the right solution. Here's why: + +Both parent states (`units/index` and `units/tasks`) need migration anyway. If we do partial migration now, we'll have to come back and redo work later when parents are migrated. + +**Migration order:** +1. Migrate units/index parent +2. Migrate units/tasks parent +3. Clean up inbox (just delete old files) + +This is detailed in the full migration plan document. + +--- + +## Current Files + +**Angular (keep):** +- `inbox.component.ts` +- `inbox.component.html` +- `inbox.component.scss` +- `inbox.component.spec.ts` + +**AngularJS (delete after parent migration):** +- `inbox.coffee` +- `inbox.tpl.html` +- `inbox.scss` (old version) + +--- + +## Key Insight + +The inbox isn't really blocked by its own complexity - it's blocked by parent dependencies. Once parents are migrated to Angular, finishing inbox is just cleanup (delete old files). + +The real work is in the parent migrations, which is covered in the full migration plan. \ No newline at end of file From 91647883e5c3f54d6ae30bfa05f5111a10f021f6 Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sun, 1 Feb 2026 10:49:53 +1100 Subject: [PATCH 6/7] Fix: Add newline at end of files to fix lint errors --- .../Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md | 3 ++- .../Migration/INBOX_MIGRATION_INVESTIGATION.md | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) 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 index 344aa9db..2398638d 100644 --- 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 @@ -126,4 +126,5 @@ Each PR needs to verify: ## Key Principle -**Bottom-up migration:** Start at the root (units/index), work down to the child (inbox). Each PR is independently testable and valuable even if later ones are delayed. \ No newline at end of file +**Bottom-up migration:** Start at the root (units/index), work down to the child (inbox). Each PR is independently testable and valuable even if later ones are delayed. + 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 index c9a3bbc7..da7ff07c 100644 --- 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 @@ -104,4 +104,5 @@ This is detailed in the full migration plan document. The inbox isn't really blocked by its own complexity - it's blocked by parent dependencies. Once parents are migrated to Angular, finishing inbox is just cleanup (delete old files). -The real work is in the parent migrations, which is covered in the full migration plan. \ No newline at end of file +The real work is in the parent migrations, which is covered in the full migration plan. + From 2cf3b8dd73357453ea8f2b53aa06ddd23edde698 Mon Sep 17 00:00:00 2001 From: Mohammed Husainuddin Date: Sun, 1 Feb 2026 12:31:52 +1100 Subject: [PATCH 7/7] Fix: Ensure files end with exactly one newline and run Prettier --- .../Migration/INBOX_FULL_MIGRATION_PLAN.md | 18 +++++++--- .../INBOX_MIGRATION_INVESTIGATION.md | 35 ++++++++++++------- 2 files changed, 36 insertions(+), 17 deletions(-) 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 index 2398638d..12b802e0 100644 --- 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 @@ -27,23 +27,27 @@ units/tasks/inbox/inbox.coffee (Child) Uses: unit, unitRole, taskData ``` -**The problem:** Inbox component needs data from two AngularJS parent states. Can't fully migrate inbox until parents are migrated. +**The problem:** Inbox component needs data from two AngularJS parent states. Can't fully migrate +inbox until parents are migrated. --- ## What Each Parent Provides **Parent 1 (units/index.coffee):** + - Loads unit object from API - Resolves user's role for this unit - Handles permissions and redirects **Parent 2 (units/tasks/tasks.coffee):** + - Creates taskData object structure - Manages task selection logic - Syncs URL with selected task **Child (inbox.coffee):** + - Sets task source function - Renders Angular InboxComponent - Already migrated to Angular - just needs parent cleanup @@ -53,11 +57,14 @@ units/tasks/inbox/inbox.coffee (Child) ## Migration Order: 3 PRs ### PR 1: Migrate units/index (START HERE) + **Status:** Already started - https://github.com/thoth-tech/doubtfire-web/pull/435 -Migrate the root parent first. Replace AngularJS state with Angular resolvers that provide unit and unitRole data. +Migrate the root parent first. Replace AngularJS state with Angular resolvers that provide unit and +unitRole data. **Files to change:** + - Create Angular state in `doubtfire.states.ts` - Add resolvers for unit and unitRole - Delete `units/states/index/index.coffee` @@ -71,6 +78,7 @@ Migrate the root parent first. Replace AngularJS state with Angular resolvers th Replace AngularJS state with Angular equivalent that manages taskData object. **Files to change:** + - Create state or service for taskData management - Update `doubtfire.states.ts` - Delete `units/states/tasks/tasks.coffee` @@ -84,6 +92,7 @@ Replace AngularJS state with Angular equivalent that manages taskData object. Remove remaining AngularJS files now that parents provide data through Angular. **Files to delete:** + - `units/states/tasks/inbox/inbox.coffee` - `units/states/tasks/inbox/inbox.tpl.html` @@ -116,6 +125,7 @@ After PR 3: ## Testing Strategy Each PR needs to verify: + - Unit loads correctly with proper permissions - Task selection and navigation works - URL syncing functions properly @@ -126,5 +136,5 @@ Each PR needs to verify: ## Key Principle -**Bottom-up migration:** Start at the root (units/index), work down to the child (inbox). Each PR is independently testable and valuable even if later ones are delayed. - +**Bottom-up migration:** Start at the root (units/index), work down to the child (inbox). Each PR is +independently testable and valuable even if later ones are delayed. 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 index da7ff07c..7f9a9e3b 100644 --- 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 @@ -13,9 +13,11 @@ description: Investigation report for the inbox component migration from Angular ## What I Found -The inbox component has already been migrated to Angular (`InboxComponent`), but it can't work standalone because it depends on data from two AngularJS parent states. +The inbox component has already been migrated to Angular (`InboxComponent`), but it can't work +standalone because it depends on data from two AngularJS parent states. **Component dependency diagram:** + ``` units/index (AngularJS parent) ↓ provides: unit, unitRole @@ -32,11 +34,13 @@ The Angular component exists, but the parents feeding it data are still AngularJ ## Current State **What works:** + - Angular InboxComponent exists (`.component.ts`, `.html`, `.scss`) - Old AngularJS files still present (`.coffee`, `.tpl.html`) - App loads via AngularJS route → renders Angular component with scope data **What doesn't work:** + - Can't create standalone Angular route - Component expects `@Input()` data that comes from AngularJS parent scopes - Creating Angular state without parents causes component to break @@ -46,6 +50,7 @@ The Angular component exists, but the parents feeding it data are still AngularJ ## The Problem InboxComponent requires these inputs: + - `unit: Unit` (from units/index parent) - `unitRole: UnitRole` (from units/index parent) - `taskData` object (from units/tasks parent) @@ -57,16 +62,16 @@ Without the parent data, the component has nothing to display. ## Two Approaches ### Approach 1: Keep Parents (Partial Migration) -**What:** Keep AngularJS parents, only migrate inbox routing -**Pros:** Quick, minimal changes -**Cons:** Still dependent on AngularJS, need to revisit later -**Files to remove:** Just `inbox.coffee` and `.tpl.html` + +**What:** Keep AngularJS parents, only migrate inbox routing **Pros:** Quick, minimal changes +**Cons:** Still dependent on AngularJS, need to revisit later **Files to remove:** Just +`inbox.coffee` and `.tpl.html` ### Approach 2: Migrate Everything (Complete Migration) -**What:** Migrate both parent states first, then inbox -**Pros:** Clean, fully Angular, no AngularJS dependencies -**Cons:** More work, needs parent migration first -**Files to remove:** All inbox AngularJS files after parents done + +**What:** Migrate both parent states first, then inbox **Pros:** Clean, fully Angular, no AngularJS +dependencies **Cons:** More work, needs parent migration first **Files to remove:** All inbox +AngularJS files after parents done --- @@ -74,11 +79,13 @@ Without the parent data, the component has nothing to display. **Approach 2** is the right solution. Here's why: -Both parent states (`units/index` and `units/tasks`) need migration anyway. If we do partial migration now, we'll have to come back and redo work later when parents are migrated. +Both parent states (`units/index` and `units/tasks`) need migration anyway. If we do partial +migration now, we'll have to come back and redo work later when parents are migrated. **Migration order:** + 1. Migrate units/index parent -2. Migrate units/tasks parent +2. Migrate units/tasks parent 3. Clean up inbox (just delete old files) This is detailed in the full migration plan document. @@ -88,12 +95,14 @@ This is detailed in the full migration plan document. ## Current Files **Angular (keep):** + - `inbox.component.ts` - `inbox.component.html` - `inbox.component.scss` - `inbox.component.spec.ts` **AngularJS (delete after parent migration):** + - `inbox.coffee` - `inbox.tpl.html` - `inbox.scss` (old version) @@ -102,7 +111,7 @@ This is detailed in the full migration plan document. ## Key Insight -The inbox isn't really blocked by its own complexity - it's blocked by parent dependencies. Once parents are migrated to Angular, finishing inbox is just cleanup (delete old files). +The inbox isn't really blocked by its own complexity - it's blocked by parent dependencies. Once +parents are migrated to Angular, finishing inbox is just cleanup (delete old files). The real work is in the parent migrations, which is covered in the full migration plan. -