Upgraded NavItemProgress to Angular component. #2842

Author: hirokiterashima

src/main/webapp/site/src/app/classroom-monitor/nav-item-progress/nav-item-progress.component.html

@@ -0,0 +1,19 @@
+<span fxLayout="row" fxLayoutAlign="start center">
+  <span class="progress-wrapper" tabindex="0" [ngSwitch]="period.periodId">
+    <mat-progress-bar *ngSwitchCase="-1"
+        matTooltip="{{nodeCompletion}}% completed (All periods)"
+        i18n-matTooltip
+        matTooltipPosition="above"
+        class="nav-item__progress"
+        mode="determinate"
+        value="{{nodeCompletion}}"></mat-progress-bar>
+    <mat-progress-bar *ngSwitchDefault
+        matTooltip="{{nodeCompletion}}% completed (Period: {{period.periodName}})"
+        i18n-matTooltip
+        matTooltipPosition="above"
+        class="nav-item__progress"
+        mode="determinate"
+        value="{{nodeCompletion}}"></mat-progress-bar>
+  </span>
+  <span class="nav-item__progress-value md-body-2 text-secondary" hide-xs>{{nodeCompletion}}%</span>
+</span>

src/main/webapp/site/src/app/classroom-monitor/nav-item-progress/nav-item-progress.component.scss

@@ -0,0 +1,3 @@
+mat-progress-bar {
+  height: 14px;
+}

src/main/webapp/site/src/app/classroom-monitor/nav-item-progress/nav-item-progress.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: 'nav-item-progress',
+  styleUrls: ['nav-item-progress.component.scss'],
+  templateUrl: 'nav-item-progress.component.html'
+})
+export class NavItemProgressComponent {
+
+  @Input()
+  nodeCompletion: string;
+
+  @Input()
+  period: any;
+}

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

@@ -34,6 +34,7 @@ import { EditComponentRubricComponent } from './authoring-tool/edit-component-ru
 import { EditComponentTagsComponent } from './authoring-tool/edit-component-tags/edit-component-tags.component';
 import { EditComponentWidthComponent } from './authoring-tool/edit-component-width/edit-component-width.component';
 import { RubricAuthoringComponent } from '../../../wise5/authoringTool/rubric/rubric-authoring.component';
+import { NavItemProgressComponent } from './classroom-monitor/nav-item-progress/nav-item-progress.component';
 
 @NgModule({
   declarations: [
@@ -50,6 +51,7 @@ import { RubricAuthoringComponent } from '../../../wise5/authoringTool/rubric/ru
     EditComponentWidthComponent,
     ManageStudentsComponent,
     MilestoneReportDataComponent,
+    NavItemProgressComponent,
     NodeAdvancedGeneralAuthoringComponent,
     NodeAdvancedJsonAuthoringComponent,
     RubricAuthoringComponent,

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

@@ -6059,6 +6059,20 @@
           <context context-type="linenumber">2</context>
         </context-group>
       </trans-unit>
+      <trans-unit datatype="html" id="6817513ddcee06a7cb2a7b2708e5616b861db81c">
+        <source><x equiv-text="{{nodeCompletion}}" id="INTERPOLATION"/>% completed (All periods)</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/classroom-monitor/nav-item-progress/nav-item-progress.component.html</context>
+          <context context-type="linenumber">4</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit datatype="html" id="988ec0475312fa85da7fa2f0f2e06e56b1e7f429">
+        <source><x equiv-text="{{nodeCompletion}}" id="INTERPOLATION"/>% completed (Period: <x equiv-text="{{period.periodName}}" id="INTERPOLATION_1"/>)</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/classroom-monitor/nav-item-progress/nav-item-progress.component.html</context>
+          <context context-type="linenumber">11</context>
+        </context-group>
+      </trans-unit>
       <trans-unit datatype="html" id="bfab7f41cfc32a926c55987d6a9c3349ae417131">
         <source> Show Save Button </source>
         <context-group purpose="location">

src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/nodeProgress/navItem/navItem.html

@@ -29,9 +29,8 @@
       </md-list>
     </md-card-content>
     <md-card-footer class="nav-item__more md-body-1" layout="row" layout-align="start center" flex>
-      <nav-item-progress node-completion="$ctrl.getNodeCompletion()"
-                         period-id="$ctrl.currentPeriod.periodId"
-                         period-name="$ctrl.currentPeriod.periodName"></nav-item-progress>
+      <nav-item-progress [node-completion]="$ctrl.getNodeCompletion()"
+                         [period]="$ctrl.currentPeriod"></nav-item-progress>
       <span flex></span>
       <a href="#" ng-click="$ctrl.toggleLockNode()" aria-label="{{ $ctrl.getNodeLockedText() }}">
         <md-tooltip md-direction="top">{{ $ctrl.getNodeLockedText() }}</md-tooltip>
@@ -62,9 +61,8 @@
       <span flex hide-xs></span>
       <nav-item-score class="nav-item--list__info-item" [max-score]="$ctrl.maxScore"
                       [average-score]="$ctrl.getNodeAverageScore()"></nav-item-score>
-      <nav-item-progress node-completion="$ctrl.getNodeCompletion()"
-                         period-id="$ctrl.currentPeriod.periodId"
-                         period-name="$ctrl.currentPeriod.periodName"></nav-item-progress>
+      <nav-item-progress [node-completion]="$ctrl.getNodeCompletion()"
+                         [period]="$ctrl.currentPeriod"></nav-item-progress>
     </p>
   </md-list-item>
 </ng-switch>

src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/nodeProgress/navItemProgress/navItemProgress.ts

@@ -2,20 +2,21 @@
 
 import NodeProgressView from './nodeProgressView/nodeProgressView';
 import NavItem from './navItem/navItem';
-import NavItemProgress from './navItemProgress/navItemProgress';
 import WorkgroupsOnNode from './workgroupsOnNode/workgroupsOnNode';
 import WorkgroupProgress from './workgroupProgress/workgroupProgress';
 import * as angular from 'angular';
 import { downgradeComponent } from '@angular/upgrade/static';
 import { NavItemScoreComponent } from './navItemScore/nav-item-score.component';
+import { NavItemProgressComponent } from '../../../../site/src/app/classroom-monitor/nav-item-progress/nav-item-progress.component';
 
 const NodeProgress = angular
   .module('nodeProgress', [])
   .component('nodeProgressView', NodeProgressView)
   .component('navItem', NavItem)
-  .component('navItemProgress', NavItemProgress)
+  .directive('navItemProgress',
+      downgradeComponent({ component: NavItemProgressComponent }) as angular.IDirectiveFactory)
   .directive('navItemScore',
-      downgradeComponent({ component: NavItemScoreComponent}) as angular.IDirectiveFactory)
+      downgradeComponent({ component: NavItemScoreComponent }) as angular.IDirectiveFactory)
   .component('workgroupsOnNode', WorkgroupsOnNode)
   .component('workgroupProgress', WorkgroupProgress);