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

@@ -1,9 +1,5 @@
-// #
-// # Doubtfire - A lightweight, modern learning management system
-// #
-// # Doubtfire is modularised into many modules, as indicated by the directory
-// # tree inside app/
-// #
+
+import './units/states/index/index.ajs.module';
 
 import * as angular from 'angular';
 import {downgradeInjectable, downgradeComponent} from '@angular/upgrade/static';
@@ -27,7 +23,7 @@ import 'angulartics/dist/angulartics.min.js';
 import 'angulartics-google-analytics/lib/angulartics-google-analytics.js';
 import 'angular-md5/angular-md5.js';
 
-// Ok... here is what we need to convert!
+
 
 import 'build/templates-app.js';
 import 'build/assets/wav-worker.js';
@@ -113,7 +109,6 @@ import 'build/src/app/units/states/edit/edit.js';
 import 'build/src/app/units/states/rollover/directives/unit-dates-selector/unit-dates-selector.js';
 import 'build/src/app/units/states/rollover/directives/directives.js';
 import 'build/src/app/units/states/rollover/rollover.js';
-import 'build/src/app/units/states/index/index.js';
 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';
@@ -225,6 +220,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';
+//
+
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
   'doubtfire.sessions',
@@ -237,7 +234,9 @@ export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.visualisations',
 ]);
 
-// Downgrade angular modules that we need...
+//
+
+
 // factory -> service
 DoubtfireAngularJSModule.factory('AboutDoubtfireModal', downgradeInjectable(AboutDoubtfireModal));
 DoubtfireAngularJSModule.factory(

src/app/doubtfire.states.ts

@@ -1,4 +1,5 @@
 import {NgHybridStateDeclaration} from '@uirouter/angular-hybrid';
+
 import {InstitutionSettingsComponent} from './admin/institution-settings/institution-settings.component';
 import {HomeComponent} from './home/states/home/home.component';
 import {WelcomeComponent} from './welcome/welcome.component';
@@ -9,19 +10,18 @@ import {AcceptEulaComponent} from './eula/accept-eula/accept-eula.component';
 import {FUsersComponent} from './admin/states/f-users/f-users.component';
 import {FUnitsComponent} from './admin/states/f-units/f-units.component';
 
+/*  IMPORT */
+import {unitsIndexState} from './units/states/index/index.state';
+
 /*
  * Use this file to store any states that are sourced by angular components.
  */
 
-/**
- * Define the institution settings state - used to edit campus data.
- */
 const institutionSettingsState: NgHybridStateDeclaration = {
-  name: 'institutionsettings', // This is the name of the state to jump to - so ui-sref="institutionsettings" to jump here
-  url: '/admin/institution-settings', // You get here with this url
+  name: 'institutionsettings',
+  url: '/admin/institution-settings',
   views: {
     main: {
-      // Main body links to angular component
       component: InstitutionSettingsComponent,
     },
   },
@@ -32,11 +32,10 @@ const institutionSettingsState: NgHybridStateDeclaration = {
 };
 
 const usersState: NgHybridStateDeclaration = {
-  name: 'admin/users', // This is the name of the state to jump to - so ui-sref="users" to jump here
-  url: '/admin/users', // You get here with this url
+  name: 'admin/users',
+  url: '/admin/users',
   views: {
     main: {
-      // Main body links to angular component
       component: FUsersComponent,
     },
   },
@@ -46,9 +45,6 @@ const usersState: NgHybridStateDeclaration = {
   },
 };
 
-/**
- * Define the new home state.
- */
 const HomeState: NgHybridStateDeclaration = {
   name: 'home',
   url: '/home',
@@ -63,98 +59,6 @@ const HomeState: NgHybridStateDeclaration = {
   },
 };
 
-// const unitParentState: NgHybridStateDeclaration = {
-//   name: 'units',
-//   url: '/units/:unit_id',
-//   // template for the parent state
-//   views: {
-//     main: {
-//       component: IndexComponent,
-//     },
-//   },
-//   resolve: {
-//     unit: function ($stateParams) {
-//       const unitService = AppInjector.get(UnitService);
-//       const globalState = AppInjector.get(GlobalStateService);
-//       globalState.onLoad(() => {});
-//       console.log($stateParams);
-//       unitService.query({ id: $stateParams.unit_id }).subscribe((unit) => {
-//         console.log($stateParams.unit_id);
-//         console.log(unit);
-//         return unit;
-//       });
-//     },
-//     unitRole: function ($stateParams) {
-//       const globalStateService = AppInjector.get(GlobalStateService);
-
-//       globalStateService.unitRolesSubject.subscribe((unitRoles) => {
-//         return unitRoles.find((unitRole) => unitRole.id === $stateParams.unit_id);
-//       });
-//     },
-//   },
-// };
-
-/**
- * Define the new home state.
- */
-// const InboxState: NgHybridStateDeclaration = {
-//   name: 'inbox',
-//   url: '/units/:unit_id/inbox/:task_key',
-
-//   params: {
-//     // unitRole: UnitRole,
-//     // taskKey: null,
-//     // taskData:
-//     // unit,
-//   },
-//   views: {
-//     main: {
-//       component: InboxComponent,
-//     },
-//   },
-//   data: {
-//     task: 'Task Inbox',
-//     pageTitle: '_Home_',
-//     roleWhitelist: ['Tutor', 'Convenor', 'Admin'],
-//   },
-//   resolve: {
-//     unit$: function ($stateParams) {
-//       const unitService = AppInjector.get(UnitService);
-//       const globalState = AppInjector.get(GlobalStateService);
-//       globalState.onLoad(() => {});
-//       console.log($stateParams);
-//       return unitService.get({ id: $stateParams.unit_id });
-//     },
-//     unitRole$: function ($stateParams) {
-//       const globalStateService = AppInjector.get(GlobalStateService);
-
-//       const result = globalStateService.loadedUnitRoles.values.pipe(
-//         map((unitRoles) => unitRoles.find((unitRole) => unitRole.id == $stateParams.unit_id))
-//       );
-//       return result;
-//     },
-//     taskData$: function () {
-//       const taskService = AppInjector.get(TaskService);
-//       const taskData = {
-//         taskKey: null,
-//         source: null,
-//         selectedTask: null,
-//         onSelectedTaskChange: (task) =>{
-//           const taskKey = task?.taskKey()
-//           $scope.taskData.taskKey = taskKey
-//           setTaskKeyAsUrlParams(task);
-//         }
-//       }
-//       taskData.source = taskService.queryTasksForTaskInbox.bind(taskService);
-//       taskData.taskDefMode = false;
-//       return of(taskData);
-//     },
-//   },
-// };
-
-/**
- * Define the welcome state.
- */
 const WelcomeState: NgHybridStateDeclaration = {
   name: 'welcome',
   url: '/welcome',
@@ -169,9 +73,6 @@ const WelcomeState: NgHybridStateDeclaration = {
   },
 };
 
-/**
- * Define the Sign In state.
- */
 const SignInState: NgHybridStateDeclaration = {
   name: 'sign_in',
   url: '/sign_in?dest&params&authToken&username',
@@ -185,9 +86,6 @@ const SignInState: NgHybridStateDeclaration = {
   },
 };
 
-/**
- * Define the Edit Profile state.
- */
 const EditProfileState: NgHybridStateDeclaration = {
   name: 'edit_profile',
   url: '/edit_profile',
@@ -234,9 +132,7 @@ const ViewAllProjectsState: NgHybridStateDeclaration = {
   name: 'view-all-projects',
   url: '/view-all-projects',
   resolve: {
-    'mode': function () {
-      return 'student';
-    },
+    mode: () => 'student',
   },
   views: {
     main: {
@@ -250,16 +146,13 @@ const ViewAllProjectsState: NgHybridStateDeclaration = {
 };
 
 const AdministerUnits: NgHybridStateDeclaration = {
-  name: 'admin/units', // This is the name of the state to jump to - so ui-sref="users" to jump here
-  url: '/admin/units', // You get here with this url
+  name: 'admin/units',
+  url: '/admin/units',
   resolve: {
-    'mode': function () {
-      return 'admin';
-    },
+    mode: () => 'admin',
   },
   views: {
     main: {
-      // Main body links to angular component
       component: FUnitsComponent,
     },
   },
@@ -269,15 +162,11 @@ const AdministerUnits: NgHybridStateDeclaration = {
   },
 };
 
-
 const ViewAllUnits: NgHybridStateDeclaration = {
   name: 'view-all-units',
   url: '/view-all-units',
-  // passes 'mode' as @Input to the component
   resolve: {
-    'mode': function () {
-      return 'tutor';
-    },
+    mode: () => 'tutor',
   },
   views: {
     main: {
@@ -286,14 +175,11 @@ const ViewAllUnits: NgHybridStateDeclaration = {
   },
   data: {
     pageTitle: 'Teaching Periods',
-    mode: 'tutor',
     roleWhitelist: ['Tutor', 'Convenor', 'Admin'],
   },
 };
 
-/**
- * Export the list of states we have created in angular
- */
+/* FINAL EXPORTED STATE LIST */
 export const doubtfireStates = [
   institutionSettingsState,
   TeachingPeriodsState,
@@ -306,4 +192,7 @@ export const doubtfireStates = [
   ViewAllProjectsState,
   ViewAllUnits,
   AdministerUnits,
+
+  /* STRICT MIGRATION STATE */
+  unitsIndexState,
 ];

src/app/projects/states/index/index.coffee

@@ -10,7 +10,8 @@ angular.module('doubtfire.projects.states.index', [])
     views:
       main:
         controller: "ProjectsIndexStateCtrl"
-        templateUrl: "units/states/index/index.tpl.html" # We can re-use unit's index here
+        template: "<ui-view></ui-view>" # Unit index is now handled by Angular state units/index
+
     data:
       pageTitle: "_Home_"
       roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor']

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

@@ -0,0 +1,9 @@
+import angular from 'angular';
+
+/**
+
+ *
+ * i have kept the module name so AngularJS dependency loading does not crash,
+ * but the actual state is now defined in Angular (see index.state.ts).
+ */
+export const UnitsIndexAjsModule = angular.module('doubtfire.units.states.index', []);

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

@@ -0,0 +1,10 @@
+<!-- Shows 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.scss

@@ -0,0 +1,4 @@
+.large-notice-block {
+  text-align: center;
+  padding: 2rem;
+}