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..12b802e0 --- /dev/null +++ b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md @@ -0,0 +1,140 @@ +--- +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 +**Task:** Complete full Angular migration for units/tasks/inbox + +--- + +## Component Dependency Chain + +``` +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 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 + +--- + +## 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. + +**Files to change:** + +- Create Angular state in `doubtfire.states.ts` +- Add resolvers for unit and unitRole +- Delete `units/states/index/index.coffee` + +**Why first:** Foundation for everything below it + +--- + +### PR 2: Migrate units/tasks + +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` + +**Why second:** Depends on PR 1 providing unit/unitRole + +--- + +### PR 3: Complete inbox migration + +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` + +**Why last:** Depends on both parent PRs + +--- + +## Visual Flow + +``` +Current State: + AngularJS State → AngularJS State → AngularJS wrapper → Angular Component + (units/index) (units/tasks) (inbox.coffee) (InboxComponent) + +After PR 1: + Angular State → AngularJS State → AngularJS wrapper → Angular Component + ✓ + +After PR 2: + Angular State → Angular State → AngularJS wrapper → Angular Component + ✓ ✓ + +After PR 3: + Angular State → Angular State → Angular Component + ✓ ✓ ✓ (fully migrated) +``` + +--- + +## Testing Strategy + +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 + +--- + +## 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. 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..7f9a9e3b --- /dev/null +++ b/src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_MIGRATION_INVESTIGATION.md @@ -0,0 +1,117 @@ +--- +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 +**Task:** Investigate inbox component migration from AngularJS to 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. + +**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.