migration of units/states/index/index.coffee

src/app/doubtfire-angularjs.module.ts

@@ -74,13 +74,13 @@ import 'build/src/app/units/states/tasks/inbox/inbox.js';
 import 'build/src/app/units/states/tasks/tasks.js';
 import 'build/src/app/units/states/tasks/definition/definition.js';
 import 'build/src/app/units/states/groups/groups.js';
-import 'build/src/app/units/states/states.js';
+import './units/states/states';
 import 'build/src/app/units/states/edit/directives/unit-group-set-editor/unit-group-set-editor.js';
 import 'build/src/app/units/states/edit/directives/unit-details-editor/unit-details-editor.js';
 import 'build/src/app/units/states/edit/directives/unit-ilo-editor/unit-ilo-editor.js';
 import 'build/src/app/units/states/edit/directives/directives.js';
 import 'build/src/app/units/states/edit/edit.js';
-import 'build/src/app/units/states/index/index.js';
+import './units/states/index/index.module';
 import 'build/src/app/units/states/students-list/students-list.js';
 import 'build/src/app/units/states/analytics/analytics.js';
 import 'build/src/app/common/filters/filters.js';

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

@@ -0,0 +1,7 @@
+<div class="units-index-container">
+  <!-- Content for units index state -->
+  <div *ngIf="unit">
+    <h1>{{ unit.name }}</h1>
+    <!-- Unit content will go here -->
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+/*
+!! REQUIRED for index.component.html - dont delete !!
+
+.units-index-container {
+  future teams can extend styling
+}
+
+*/

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

@@ -0,0 +1,125 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+
+import { UnitService } from '../../../api/services/unit.service';
+import { ProjectService } from '../../../api/services/project.service';
+import { GlobalStateService } from '../../../projects/states/index/global-state.service';
+import { UserService } from '../../../api/services/user.service';
+import { AlertService } from '../../../common/services/alert.service';
+
+
+@Component({
+  selector: 'app-units-index-state',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss'],
+})
+export class UnitsIndexStateComponent implements OnInit, OnDestroy {
+  unit: any;
+  unitRole: any;
+  private destroy$ = new Subject<void>();
+
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private UnitService: UnitService,
+    private newProjectService: ProjectService,
+    private globalStateService: GlobalStateService,
+    private newUserService: UserService,
+    private alertService: AlertService
+  ) {}
+
+
+  ngOnInit(): void {
+    // Get unitId from route parameters
+    this.route.params.pipe(takeUntil(this.destroy$)).subscribe((params) => {
+      const unitId = +params['unitId'];
+
+
+      if (!unitId) {
+        this.router.navigate(['/home']);
+        return;
+      }
+
+
+      this.loadUnit(unitId);
+    });
+  }
+
+
+  private loadUnit(unitId: number): void {
+    this.globalStateService.onLoad(() => {
+      // Load assessing unit role
+      this.unitRole = this.globalStateService.loadedUnitRoles.currentValues.find(
+        (unitRole: any) => unitRole.unit.id === unitId
+      );
+
+
+      // Check for Admin or Auditor roles
+      if (
+        !this.unitRole &&
+        (this.newUserService.currentUser.role === 'Admin' ||
+          this.newUserService.currentUser.role === 'Auditor')
+      ) {
+        this.unitRole = this.newUserService.adminOrAuditorRoleFor(
+          this.newUserService.currentUser.role,
+          unitId,
+          this.newUserService.currentUser
+        );
+      }
+
+
+      // Go home if no unit role was found
+      if (!this.unitRole) {
+        this.router.navigate(['/home']);
+        return;
+      }
+
+
+      this.globalStateService.setView(this.unit, this.unitRole);
+
+
+      // Load unit and students
+      this.UnitService
+        .get(unitId)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (unit) => {
+            this.newProjectService
+              .loadStudents(unit)
+              .pipe(takeUntil(this.destroy$))
+              .subscribe({
+                next: () => {
+                  this.unit = unit;
+                },
+                error: (err) => {
+                  this.alertService.error(
+                    'Error loading students: ' + err,
+                    8000
+                  );
+                  setTimeout(() => this.router.navigate(['/home']), 5000);
+                },
+              });
+          },
+          error: (err) => {
+            this.alertService.error('Error loading unit: ' + err, 8000);
+            setTimeout(() => this.router.navigate(['/home']), 5000);
+          },
+        });
+    });
+  }
+
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
+
+
+
+
+

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UIRouterModule } from '@uirouter/angular';
+
+import { UnitsIndexStateComponent } from './index.component';
+import { unitsIndexState } from './index.state';
+
+@NgModule({
+  declarations: [UnitsIndexStateComponent],
+  imports: [
+    CommonModule,
+    UIRouterModule.forChild({ states: [unitsIndexState] }),
+  ],
+})
+export class UnitsIndexStateModule {}

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

@@ -0,0 +1,13 @@
+import { StateDeclaration } from '@uirouter/core';
+import { UnitsIndexStateComponent } from './index.component';
+
+export const unitsIndexState: StateDeclaration = {
+  name: 'units.index',
+  url: '/units/:unitId',
+  abstract: true,
+  component: UnitsIndexStateComponent,
+  data: {
+    pageTitle: '_Home_',
+    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'],
+  },
+} as any;

src/app/units/states/states.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+
+
+// Import all state modules
+import { UnitsIndexStateModule } from './index/index.module';
+
+
+// working on child components, will need to create components for the following to complete this migration
+/*
+import { UnitsEditStateModule } from './edit/edit.module';
+import { UnitsTasksStateModule } from './tasks/tasks.module';
+import { UnitsGroupsStateModule } from './groups/groups.module';
+import { UnitsStudentsStateModule } from './students/students.module';
+import { UnitsAnalyticsStateModule } from './analytics/analytics.module';
+import { UnitsPortfoliosStateModule } from './portfolios/portfolios.module';
+import { UnitsRolloverStateModule } from './rollover/rollover.module';
+*/
+
+
+@NgModule({
+  imports: [
+    UnitsIndexStateModule
+    /*,
+    UnitsEditStateModule,
+    UnitsTasksStateModule,
+    UnitsGroupsStateModule,
+    UnitsStudentsStateModule,
+    UnitsAnalyticsStateModule,
+    UnitsPortfoliosStateModule,
+    UnitsRolloverStateModule,
+    */
+  ],
+})
+export class UnitsStatesModule {}
+
+
+