refactor(dashboard): migrate student dashboard components to Angular/TypeScript

README.md

@@ -14,7 +14,7 @@ A modern, lightweight learning management system.
 
 SUMMARY:
 
-74 / 132 components migrated
+80 / 132 components migrated
 
 MIGRATED:
 
@@ -101,9 +101,9 @@ TODO:
 - [ ] ./src/app/visualisations/summary-task-status-scatter.coffee
 - [ ] ./src/app/visualisations/target-grade-pie-chart.coffee
 - [ ] ./src/app/visualisations/achievement-custom-bar-chart.coffee
-- [ ] ./src/app/visualisations/student-task-status-pie-chart.coffee
+- [x] ./src/app/visualisations/student-task-status-pie-chart/student-task-status-pie-chart.component.ts
 - [ ] ./src/app/visualisations/alignment-bullet-chart.coffee
-- [ ] ./src/app/visualisations/progress-burndown-chart.coffee
+- [x] ./src/app/visualisations/progress-burndown-chart/progress-burndown-chart.component.ts
 - [ ] ./src/app/visualisations/task-status-pie-chart.coffee
 - [ ] ./src/app/visualisations/achievement-box-plot.coffee
 - [ ] ./src/app/visualisations/task-completion-box-plot.coffee
@@ -114,7 +114,7 @@ TODO:
 - [ ] ./src/app/tasks/modals/upload-submission-modal/upload-submission-modal.coffee
 - [ ] ./src/app/tasks/modals/grade-task-modal/grade-task-modal.coffee
 - [ ] ./src/app/tasks/task-definition-selector/task-definition-selector.coffee
-- [ ] ./src/app/tasks/project-tasks-list/project-tasks-list.coffee
+- [x] ./src/app/tasks/project-tasks-list/project-tasks-list.coffee (removed - dead code)
 - [ ] ./src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.coffee
 - [ ] ./src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.coffee
 - [ ] ./src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment.coffee
@@ -131,16 +131,16 @@ TODO:
 - [ ] ./src/app/config/analytics/analytics.coffee
 - [ ] ./src/app/config/debug/debug.coffee
 - [ ] ./src/app/projects/projects.coffee
-- [ ] ./src/app/projects/project-progress-dashboard/project-progress-dashboard.coffee
+- [x] ./src/app/projects/project-progress-dashboard/project-progress-dashboard.coffee (removed - dead code)
 - [ ] ./src/app/projects/states/states.coffee
 - [ ] ./src/app/projects/states/all/directives/directives.coffee
 - [ ] ./src/app/projects/states/all/directives/all-projects-list/all-projects-list.coffee
 - [ ] ./src/app/projects/states/all/all.coffee
 - [ ] ./src/app/projects/states/groups/groups.coffee
 - [ ] ./src/app/projects/states/feedback/feedback.coffee
 - [ ] ./src/app/projects/states/dashboard/directives/directives.coffee
-- [ ] ./src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.coffee
-- [ ] ./src/app/projects/states/dashboard/directives/student-task-list/student-task-list.coffee
+- [x] ./src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.ts
+- [x] ./src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.ts
 - [ ] ./src/app/projects/states/dashboard/directives/task-dashboard/directives/directives.coffee
 - [ ] ./src/app/projects/states/dashboard/directives/task-dashboard/directives/task-outcomes-card/task-outcomes-card.coffee
 - [ ] ./src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.coffee

src/app/api/models/project.ts

@@ -53,7 +53,7 @@ export class Project extends Entity {
   }[];
   public orderScale: number;
 
-  public burndownChartData: { key: string; values: number[] }[];
+  public burndownChartData: { key: string; values: number[][]; color?: string; classed?: string }[];
   public readonly taskCache: EntityCache<Task> = new EntityCache<Task>();
   public readonly staffNoteCache: EntityCache<StaffNote> = new EntityCache<StaffNote>();
   public readonly tutorialEnrolmentsCache: EntityCache<Tutorial> = new EntityCache<Tutorial>();
@@ -378,7 +378,7 @@ export class Project extends Entity {
   }
 
   public refreshBurndownChartData(): void {
-    const result: { key: string; values: number[] }[] = [];
+    const result: { key: string; values: number[][]; color?: string; classed?: string }[] = [];
 
     // Setup the dictionaries to contain the keys and values
     // key = series name

src/app/doubtfire-angular.module.ts

@@ -324,6 +324,11 @@ import {TutorNotesModalComponent} from './common/modals/tutor-notes-modal/tutor-
 import {FeedbackAppealModalComponent} from './tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component';
 import {ConfirmModerationModalComponent} from './units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component';
 import {TaskClaimComponent} from './units/states/tasks/inbox/directives/task-claim/task-claim.component';
+import {StudentTaskListComponent} from './projects/states/dashboard/directives/student-task-list/student-task-list.component';
+import {ProgressDashboardComponent} from './projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component';
+import {Nvd3ChartComponent} from './visualisations/nvd3-chart/nvd3-chart.component';
+import {ProgressBurndownChartComponent} from './visualisations/progress-burndown-chart/progress-burndown-chart.component';
+import {StudentTaskStatusPieChartComponent} from './visualisations/student-task-status-pie-chart/student-task-status-pie-chart.component';
 
 // See https://stackoverflow.com/questions/55721254/how-to-change-mat-datepicker-date-format-to-dd-mm-yyyy-in-simplest-way/58189036#58189036
 const MY_DATE_FORMAT = {
@@ -523,6 +528,11 @@ const GANTT_CHART_CONFIG = {
     FeedbackAppealModalComponent,
     ConfirmModerationModalComponent,
     TaskClaimComponent,
+    StudentTaskListComponent,
+    ProgressDashboardComponent,
+    Nvd3ChartComponent,
+    ProgressBurndownChartComponent,
+    StudentTaskStatusPieChartComponent,
   ],
   providers: [
     // Services we provide

src/app/doubtfire-angularjs.module.ts

@@ -29,8 +29,6 @@ import 'angular-md5/angular-md5.js';
 import 'build/templates-app.js';
 import 'build/assets/wav-worker.js';
 import 'build/src/app/visualisations/summary-task-status-scatter.js';
-import 'build/src/app/visualisations/student-task-status-pie-chart.js';
-import 'build/src/app/visualisations/progress-burndown-chart.js';
 import 'build/src/app/visualisations/target-grade-pie-chart.js';
 import 'build/src/app/visualisations/task-status-pie-chart.js';
 import 'build/src/app/visualisations/task-completion-box-plot.js';
@@ -43,7 +41,6 @@ import 'build/src/app/tasks/modals/upload-submission-modal/upload-submission-mod
 import 'build/src/app/tasks/modals/grade-task-modal/grade-task-modal.js';
 import 'build/src/app/tasks/modals/modals.js';
 import 'build/src/app/tasks/tasks.js';
-import 'build/src/app/tasks/project-tasks-list/project-tasks-list.js';
 import 'build/src/app/tasks/task-ilo-alignment/task-ilo-alignment.js';
 import 'build/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.js';
 import 'build/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment.js';
@@ -59,12 +56,9 @@ import 'build/src/app/config/vendor-dependencies/vendor-dependencies.js';
 import 'build/src/app/config/analytics/analytics.js';
 import 'build/src/app/config/debug/debug.js';
 import 'build/src/app/projects/projects.js';
-import 'build/src/app/projects/project-progress-dashboard/project-progress-dashboard.js';
 import 'build/src/app/projects/states/groups/groups.js';
 import 'build/src/app/projects/states/feedback/feedback.js';
 import 'build/src/app/projects/states/states.js';
-import 'build/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.js';
-import 'build/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.js';
 import 'build/src/app/projects/states/dashboard/directives/directives.js';
 import 'build/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.js';
 import 'build/src/app/projects/states/dashboard/dashboard.js';
@@ -241,6 +235,8 @@ import {TaskPlannerComponent} from './projects/states/plan/task-planner/task-pla
 import {TaskPlannerCardComponent} from './projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component';
 import {TaskOverseerReportComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/task-overseer-report.component';
 import {TutorNotesComponent} from './projects/states/tutor-notes/tutor-notes.component';
+import {StudentTaskListComponent} from './projects/states/dashboard/directives/student-task-list/student-task-list.component';
+import {ProgressDashboardComponent} from './projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component';
 
 export const DoubtfireAngularJSModule = angular
   .module('doubtfire', [
@@ -613,3 +609,14 @@ DoubtfireAngularJSModule.directive(
   'fTutorNotes',
   downgradeComponent({component: TutorNotesComponent}),
 );
+
+DoubtfireAngularJSModule.directive(
+  'studentTaskList',
+  downgradeComponent({component: StudentTaskListComponent}),
+);
+
+DoubtfireAngularJSModule.directive(
+  'progressDashboard',
+  downgradeComponent({component: ProgressDashboardComponent}),
+);
+

src/app/projects/projects.coffee

@@ -1,5 +1,4 @@
 angular.module('doubtfire.projects', [
   'doubtfire.projects.states'
   'doubtfire.projects.project-outcome-alignment'
-  'doubtfire.projects.project-progress-dashboard'
 ])

src/app/projects/states/dashboard/dashboard.tpl.html

@@ -1,15 +1,15 @@
 <div class="panel-full-screen">
   <student-task-list
-    task-data="taskData"
-    project="project"
-    refresh-tasks="targetGradeUpdated"
+    [task-data]="taskData"
+    [project]="project"
+    [refresh-tasks]="targetGradeUpdated"
     class="col-xs-12 col-md-3"
     style="padding: 0 8px 0 8px"
     ><!--/panel-1-->
   </student-task-list>
   <progress-dashboard
-    project="project"
-    on-update-target-grade="targetGradeUpdated"
+    [project]="project"
+    [on-update-target-grade]="targetGradeUpdated"
     class="col-xs-12 col-md-9"
     ng-if="!taskData.selectedTask"
     style="padding: 0 8px 0 8px"

src/app/projects/states/dashboard/directives/directives.coffee

@@ -1,5 +1,4 @@
 angular.module('doubtfire.projects.states.dashboard.directives', [
-  'doubtfire.projects.states.dashboard.directives.student-task-list'
-  'doubtfire.projects.states.dashboard.directives.progress-dashboard'
   'doubtfire.projects.states.dashboard.directives.task-dashboard'
 ])
+