Merge pull request #2845 from WISE-Community/issue-2844-upgrade-workgroupNodeStatus-to-angular

Upgraded WorkgroupNodeStatus component to Angular

Author: geoffreykwan

src/main/webapp/site/src/app/classroom-monitor/workgroup-node-status/workgroup-node-status.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: 'workgroup-node-status',
+  template: `<span class="md-body-2 block center {{statusClass}}">{{statusText}}</span>`
+})
+export class WorkgroupNodeStatusComponent {
+
+  @Input()
+  statusClass: string = 'text-secondary';
+
+  @Input()
+  statusText: string;
+}

src/main/webapp/site/src/app/teacher-hybrid-angular.module.ts

@@ -14,6 +14,7 @@ import { TeacherWebSocketService } from '../../../wise5/services/teacherWebSocke
 import { DataService } from './services/data.service';
 import { MilestoneService } from '../../../wise5/services/milestoneService';
 import { WorkgroupNodeScoreComponent } from '../../../wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupNodeScore/workgroup-node-score.component';
+import { WorkgroupNodeStatusComponent } from './classroom-monitor/workgroup-node-status/workgroup-node-status.component';
 import { NavItemScoreComponent } from '../../../wise5/classroomMonitor/classroomMonitorComponents/nodeProgress/navItemScore/nav-item-score.component';
 import { ManageStudentsComponent } from '../../../wise5/classroomMonitor/manageStudents/manage-students-component';
 import { AdvancedProjectAuthoringComponent } from '../../../wise5/authoringTool/advanced/advanced-project-authoring.component';
@@ -59,7 +60,8 @@ import { NavItemProgressComponent } from './classroom-monitor/nav-item-progress/
     WorkgroupInfoComponent,
     WorkgroupNodeScoreComponent,
     NavItemScoreComponent,
-    WiseAuthoringTinymceEditorComponent
+    WiseAuthoringTinymceEditorComponent,
+    WorkgroupNodeStatusComponent
   ],
   imports: [
     AngularJSModule

src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroupItem/workgroupItem.ts

@@ -127,7 +127,7 @@ const WorkgroupItem = {
                             <workgroup-info [has-alert]="$ctrl.hasAlert" [has-new-alert]="$ctrl.hasNewAlert" [has-new-work]="$ctrl.hasNewWork" [usernames]="$ctrl.workgroupData.displayNames" [workgroup-id]="$ctrl.workgroupId"></workgroup-info>
                         </div>
                         <div flex="{{$ctrl.showScore ? 30 : 20}}" layout="row" layout-align="center center">
-                            <workgroup-node-status status-text="{{$ctrl.statusText}}" status-class="{{$ctrl.statusClass}}"></workgroup-node-status>
+                            <workgroup-node-status [status-text]="$ctrl.statusText" [status-class]="$ctrl.statusClass"></workgroup-node-status>
                         </div>
                         <div ng-if="$ctrl.showScore" flex="20" layout="row" layout-align="center center">
                             <workgroup-node-score [score]="$ctrl.score" [max-score]="$ctrl.maxScore"></workgroup-node-score>

src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/shared/shared.ts

@@ -15,7 +15,7 @@ import Toolbar from './toolbar/toolbar';
 import TopBar from './topBar/topBar';
 import WorkgroupComponentRevisions from './workgroupComponentRevisions/workgroupComponentRevisions';
 import WorkgroupNodeGrading from './workgroupNodeGrading/workgroupNodeGrading';
-import WorkgroupNodeStatus from './workgroupNodeStatus/workgroupNodeStatus';
+import { WorkgroupNodeStatusComponent } from '../../../../site/src/app/classroom-monitor/workgroup-node-status/workgroup-node-status.component';
 import WorkgroupSelect from './workgroupSelect/workgroupSelect';
 import * as angular from 'angular';
 import { WorkgroupNodeScoreComponent } from './workgroupNodeScore/workgroup-node-score.component';
@@ -41,8 +41,9 @@ const Shared = angular
   .component('workgroupComponentRevisions', WorkgroupComponentRevisions)
   .component('workgroupNodeGrading', WorkgroupNodeGrading)
   .directive('workgroupNodeScore',
-      downgradeComponent({ component: WorkgroupNodeScoreComponent}) as angular.IDirectiveFactory)
-  .component('workgroupNodeStatus', WorkgroupNodeStatus)
+      downgradeComponent({ component: WorkgroupNodeScoreComponent }) as angular.IDirectiveFactory)
+  .directive('workgroupNodeStatus',
+      downgradeComponent({ component: WorkgroupNodeStatusComponent }) as angular.IDirectiveFactory)
   .component('workgroupSelect', WorkgroupSelect);
 
 export default Shared;

src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupNodeStatus/workgroupNodeStatus.ts

@@ -44,8 +44,6 @@ class StepItemController {
   }
 
   update() {
-    let completion = 0;
-
     switch (this.status) {
       case -1:
         this.statusClass = ' ';
@@ -123,8 +121,8 @@ const StepItem = {
             </div>
             <div flex="{{ $ctrl.showScore ? 30 : 20 }}" layout="row"
                  layout-align="center center">
-              <workgroup-node-status status-text="{{ $ctrl.statusText }}"
-                                     status-class="{{ $ctrl.statusClass }}">
+              <workgroup-node-status [status-text]="$ctrl.statusText"
+                                     [status-class]="$ctrl.statusClass">
               </workgroup-node-status>
             </div>
             <div ng-if="$ctrl.showScore" flex="20" layout="row"