refactor(units): migrate units index to Angular component

src/app/doubtfire-angular.module.ts

@@ -224,6 +224,8 @@ import {FTaskSheetViewComponent} from './units/states/tasks/viewer/directives/f-
 import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-viewer.component';
 import {UnitCodeComponent} from './common/unit-code/unit-code.component';
 import {GradeService} from './common/services/grade.service';
+import { IndexComponent as UnitsIndexComponent } from './units/states/index/index.component';
+
 
 @NgModule({
   // Components we declare
@@ -325,6 +327,7 @@ import {GradeService} from './common/services/grade.service';
     FUsersComponent,
     FTaskBadgeComponent,
     FUnitsComponent,
+    UnitsIndexComponent,
   ],
   // Services we provide
   providers: [

src/app/doubtfire-angularjs.module.ts

@@ -225,6 +225,8 @@ import {FUnitsComponent} from './admin/states/f-units/f-units.component';
 import {MarkedPipe} from './common/pipes/marked.pipe';
 import {AlertService} from './common/services/alert.service';
 import {GradeService} from './common/services/grade.service';
+import {IndexComponent as UnitsIndexComponent} from './units/states/index/index.component';
+
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
   'doubtfire.sessions',
@@ -237,6 +239,12 @@ export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.visualisations',
 ]);
 
+DoubtfireAngularJSModule.directive(
+  'fUnitsIndex',
+  downgradeComponent({component: UnitsIndexComponent}),
+);
+
+
 // Downgrade angular modules that we need...
 // factory -> service
 DoubtfireAngularJSModule.factory('AboutDoubtfireModal', downgradeInjectable(AboutDoubtfireModal));

src/app/units/states/index/index.component.html

@@ -0,0 +1,10 @@
+<!-- Show loading message while unit or role/project is not ready -->
+<div class="large-notice-block" *ngIf="!(unit && (unitRole || project))">
+  <i class="fa fa-2x fa-spinner fa-pulse"></i>
+  <p>Loading unit details...</p>
+</div>
+
+<!-- Once unit + role/project are available, show the nested views -->
+<div *ngIf="unit && (unitRole || project)">
+  <ui-view></ui-view>
+</div>

src/app/units/states/index/index.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IndexComponent } from './index.component';
+
+describe('IndexComponent', () => {
+  let component: IndexComponent;
+  let fixture: ComponentFixture<IndexComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IndexComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(IndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/units/states/index/index.component.ts

@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {Component, Inject, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'f-units-index',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss'],
+})
+export class IndexComponent implements OnInit {
+  // Variables that replace $scope
+  unitRole: any;
+  unit: any;
+  unitId!: number;
+  project: any;
+
+  constructor(
+    @Inject('$state') private $state: any,
+    @Inject('$stateParams') private $stateParams: any,
+    @Inject('newUnitService') private newUnitService: any,
+    @Inject('newProjectService') private newProjectService: any,
+    @Inject('listenerService') private listenerService: any,
+    @Inject('GlobalStateService') private globalStateService: any,
+    @Inject('newUserService') private newUserService: any,
+    @Inject('alertService') private alertService: any,
+  ) {}
+
+  ngOnInit(): void {
+    // Get unitId from URL params
+    this.unitId = +this.$stateParams.unitId;
+
+    // If no unitId → redirect to home
+    if (!this.unitId) {
+      this.$state.go('home');
+      return;
+    }
+
+    // Wait for global state to load
+    this.globalStateService.onLoad(() => {
+      // Find the role for this unit
+      this.unitRole =
+        this.globalStateService.loadedUnitRoles.currentValues.find(
+          (unitRole: any) => unitRole.unit.id === this.unitId,
+        );
+
+      // Admin / Auditor fallback
+      if (
+        !this.unitRole &&
+        (this.newUserService.currentUser.role === 'Admin' ||
+          this.newUserService.currentUser.role === 'Auditor')
+      ) {
+        this.unitRole = this.newUserService.adminOrAuditorRoleFor(
+          this.newUserService.currentUser.role,
+          this.unitId,
+          this.newUserService.currentUser,
+        );
+      }
+
+      // If still no role, redirect to home
+      if (!this.unitRole) {
+        this.$state.go('home');
+        return;
+      }
+
+      // Set the app to "UNIT view"
+      this.globalStateService.setView('UNIT', this.unitRole);
+
+      // Load the unit and students
+      this.newUnitService.get(this.unitId).subscribe({
+        next: (unit: any) => {
+          this.newProjectService.loadStudents(unit).subscribe({
+            next: (_students: any) => {
+              this.unit = unit;
+            },
+            error: (err: any) => {
+              this.alertService.error(
+                'Error loading students: ' + err,
+                8000,
+              );
+              setTimeout(() => this.$state.go('home'), 5000);
+            },
+          });
+        },
+        error: (err: any) => {
+          this.alertService.error('Error loading unit: ' + err, 8000);
+          setTimeout(() => this.$state.go('home'), 5000);
+        },
+      });
+    });
+  }
+}

src/app/units/states/index/index.tpl.html

@@ -1,7 +1 @@
-<div ng-hide="unit && (unitRole || project)" class="large-notice-block">
-  <i class="fa fa-2x fa-spinner fa-pulse"></i>
-  <p>Loading unit details...</p>
-</div><!--/loading-->
-<div ng-if="unit && (unitRole || project)">
-  <ui-view/>
-</div>
+<f-units-index></f-units-index>