Merge pull request #2853 from WISE-Community/issue-2532-upgrade-stepInfo-to-angular

Upgraded StepInfo to Angular component

Author: geoffreykwan

src/main/webapp/site/src/app/classroom-monitor/step-info/step-info.component.html

@@ -0,0 +1,18 @@
+<div fxLayout="row" fxLayoutAlign="start center">
+  <node-icon [nodeId]="nodeId" size="18" fxHide.xs></node-icon>
+  <span fxHide.xs>&nbsp;&nbsp;</span>
+  <div class="heavy">
+    {{ stepTitle }}
+    <status-icon *ngIf="hasAlert"
+        [iconClass]="alertIconClass"
+        [iconName]="alertIconName"
+        [iconLabel]="alertIconLabel"
+        [iconTooltip]="alertIconLabel"></status-icon>
+    <status-icon *ngIf="hasRubrics"
+        iconClass="info"
+        iconName="info"
+        [iconLabel]="rubricIconLabel"
+        [iconTooltip]="rubricIconLabel"></status-icon>
+    <span *ngIf="hasNewWork" class="badge badge--info animate-fade" i18n>New</span>
+  </div>
+</div>

src/main/webapp/site/src/app/classroom-monitor/step-info/step-info.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core';
+import { TeacherProjectService } from '../../../../../wise5/services/teacherProjectService';
+
+@Component({
+  selector: 'step-info',
+  templateUrl: 'step-info.component.html'
+})
+export class StepInfoComponent {
+  $translate: any;
+  alertIconClass: string;
+  alertIconLabel: string;
+  alertIconName: string;
+  @Input()
+  hasAlert: boolean;
+  @Input()
+  hasNewAlert: boolean;
+  @Input()
+  hasNewWork: boolean;
+  hasRubrics: boolean;
+  @Input()
+  nodeId: string;
+  rubricIconLabel: string;
+  stepTitle: string;
+
+  constructor(private ProjectService: TeacherProjectService) {
+  }
+
+  ngOnInit() {
+    this.stepTitle = this.ProjectService.getNodePositionAndTitleByNodeId(this.nodeId);
+    if (this.hasAlert) {
+      this.alertIconClass = this.hasNewAlert ? 'warn' : 'text-disabled';
+      this.alertIconName = 'notifications';
+      this.alertIconLabel = this.hasNewAlert ? $localize`Has new alert(s)`:
+          $localize`Has dismissed alert(s)`;
+    }
+    this.hasRubrics = this.ProjectService.getNumberOfRubricsByNodeId(this.nodeId) > 0;
+    this.rubricIconLabel = $localize`Step has rubrics/teaching tips`;
+  }
+}

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

@@ -26,6 +26,7 @@ import { ChooseImportStepLocationComponent } from './authoring-tool/import-step/
 import { ComponentNewWorkBadgeComponent } from './classroom-monitor/component-new-work-badge/component-new-work-badge.component';
 import { ComponentSelectComponent } from './classroom-monitor/component-select/component-select.component';
 import { StatusIconComponent } from './classroom-monitor/status-icon/status-icon.component';
+import { StepInfoComponent } from './classroom-monitor/step-info/step-info.component';
 import { AngularJSModule } from './common-hybrid-angular.module';
 import { NodeAdvancedJsonAuthoringComponent } from '../../../wise5/authoringTool/node/advanced/json/node-advanced-json-authoring.component';
 import { WorkgroupInfoComponent } from '../../../wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroupInfo/workgroup-info.component';
@@ -61,6 +62,7 @@ import { NavItemProgressComponent } from './classroom-monitor/nav-item-progress/
     NodeAdvancedJsonAuthoringComponent,
     RubricAuthoringComponent,
     StatusIconComponent,
+    StepInfoComponent,
     WorkgroupInfoComponent,
     WorkgroupNodeScoreComponent,
     NavItemScoreComponent,

src/main/webapp/site/src/messages.xlf

@@ -5313,6 +5313,10 @@
           <context context-type="sourcefile">app/classroom-monitor/component-new-work-badge/component-new-work-badge.component.ts</context>
           <context context-type="linenumber">1</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/classroom-monitor/step-info/step-info.component.html</context>
+          <context context-type="linenumber">16</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../../wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroupInfo/workgroup-info.component.html</context>
           <context context-type="linenumber">10</context>

src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/stepInfo/stepInfo.ts

@@ -27,10 +27,9 @@ class StepItemController {
 
   $onChanges(changesObj) {
     if (changesObj.maxScore) {
-      this.maxScore =
-        typeof changesObj.maxScore.currentValue === 'number' ? changesObj.maxScore.currentValue : 0;
+      this.maxScore = typeof changesObj.maxScore.currentValue === 'number' ?
+          changesObj.maxScore.currentValue : 0;
     }
-
     if (changesObj.stepData) {
       let stepData = angular.copy(changesObj.stepData.currentValue);
       this.title = stepData.title;
@@ -39,7 +38,6 @@ class StepItemController {
       this.status = stepData.completionStatus;
       this.score = stepData.score >= 0 ? stepData.score : '-';
     }
-
     this.update();
   }
 
@@ -51,7 +49,6 @@ class StepItemController {
         break;
       case 2:
         this.statusClass = 'success';
-
         if (this.showScore) {
           this.statusText = this.$translate('completed');
         } else {
@@ -60,23 +57,19 @@ class StepItemController {
         break;
       case 1:
         this.statusClass = 'text';
-
         this.statusText = this.$translate('partiallyCompleted');
         break;
       default:
         this.statusClass = 'text-secondary';
-
         if (this.showScore) {
           this.statusText = this.$translate('noWork');
         } else {
           this.statusText = this.$translate('notVisited');
         }
     }
-
     if (this.hasNewAlert) {
       this.statusClass = 'warn';
     }
-
     this.disabled = this.status === -1;
   }
 
@@ -100,42 +93,31 @@ const StepItem = {
   },
   controller: StepItemController,
   template: `<div class="md-whiteframe-1dp"
-          ng-class="{ 'list-item--warn': $ctrl.statusClass === 'warn',
-            'list-item--info': $ctrl.statusClass === 'info' }">
+          ng-class="{ 'list-item--warn': $ctrl.statusClass === 'warn', 'list-item--info': $ctrl.statusClass === 'info' }">
       <md-subheader class="list-item md-whiteframe-1dp">
         <button class="md-button md-ink-ripple list-item__subheader-button"
                 aria-label="{{ ::toggleTeamWorkDisplay | translate }}"
-                ng-class="{ 'list-item--noclick': !$ctrl.showScore ||
-                  $ctrl.disabled }"
+                ng-class="{ 'list-item--noclick': !$ctrl.showScore || $ctrl.disabled }"
                 ng-click="$ctrl.toggleExpand()"
                 ng-disabled="$ctrl.disabled"
                 layout-wrap>
           <div layout="row" flex>
             <div flex layout="row" layout-align="start center">
-              <step-info has-alert="$ctrl.hasAlert"
-                         has-new-alert="$ctrl.hasNewAlert"
-                         has-new-work="$ctrl.hasNewWork"
-                         node-id="::$ctrl.nodeId"
-                         node-title="{{ ::$ctrl.title }}"
-                         show-position="true"></step-info>
+              <step-info [has-alert]="$ctrl.hasAlert"
+                         [has-new-alert]="$ctrl.hasNewAlert"
+                         [has-new-work]="$ctrl.hasNewWork"
+                         [node-id]="::$ctrl.nodeId"></step-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>
+            <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>
             </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>
+            <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>
             </div>
           </div>
         </button>
       </md-subheader>
-      <md-list-item ng-if="$ctrl.expand && !$ctrl.disabled"
-                    class="grading__item-container">
+      <md-list-item ng-if="$ctrl.expand && !$ctrl.disabled" class="grading__item-container">
         <workgroup-node-grading workgroup-id="::$ctrl.workgroupId"
                                 class="workgroup-node-grading"
                                 node-id="{{ ::$ctrl.nodeId }}"

src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/stepItem/stepItem.ts

@@ -1,13 +1,15 @@
 'use strict';
 
-import StepInfo from './stepInfo/stepInfo';
 import StepItem from './stepItem/stepItem';
 import StudentGradingTools from './studentGradingTools/studentGradingTools';
 import * as angular from 'angular';
+import { StepInfoComponent } from '../../../../site/src/app/classroom-monitor/step-info/step-info.component';
+import { downgradeComponent } from '@angular/upgrade/static';
 
 const StudentGrading = angular
   .module('studentGrading', [])
-  .component('stepInfo', StepInfo)
+  .directive('stepInfo',
+      downgradeComponent({ component: StepInfoComponent }) as angular.IDirectiveFactory)
   .component('stepItem', StepItem)
   .component('studentGradingTools', StudentGradingTools);