Merge pull request #2864 from WISE-Community/issue-2859-upgrade-alertStatusCorner-to-angular

Upgraded AlertStatusCorner to Angular component

Author: geoffreykwan

src/main/webapp/site/src/app/classroom-monitor/alert-status-corner/alert-status-corner.component.html

@@ -0,0 +1,6 @@
+<div *ngIf="hasAlert" class="status-corner-wrapper status-corner-top-right">
+  <div class="status-corner"
+      [ngClass]="{'status-corner--warn': hasNewAlert}"
+      matTooltip="{{message}}"
+      matTooltipPosition="above"></div>
+</div>

src/main/webapp/site/src/app/classroom-monitor/alert-status-corner/alert-status-corner.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'alert-status-corner',
+  templateUrl: 'alert-status-corner.component.html'
+})
+export class AlertStatusCornerComponent {
+  @Input()
+  hasNewAlert: boolean;
+
+  @Input()
+  hasAlert: boolean;
+
+  @Input()
+  message: string;
+}

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

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 
 import '../../../wise5/teacher/teacher-angular-js-module';
+import { AlertStatusCornerComponent } from './classroom-monitor/alert-status-corner/alert-status-corner.component';
 import { UpgradeModule } from '@angular/upgrade/static';
 import { setUpLocationSync } from '@angular/router/upgrade';
 import { ProjectService } from '../../../wise5/services/projectService';
@@ -47,6 +48,7 @@ import { HtmlAuthoring } from '../../../wise5/components/html/html-authoring/htm
 @NgModule({
   declarations: [
     AdvancedProjectAuthoringComponent,
+    AlertStatusCornerComponent,
     ChooseImportStepComponent,
     ChooseImportStepLocationComponent,
     ChooseNewComponent,

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

@@ -13,8 +13,8 @@
                  aria-label="collapse">remove
         </md-icon>
       </div>
-      <alert-status-corner has-alert="$ctrl.newAlert" has-new-alert="$ctrl.newAlert"
-                           message="$ctrl.alertIconLabel">
+      <alert-status-corner [has-alert]="$ctrl.newAlert" [has-new-alert]="$ctrl.newAlert"
+                           [message]="$ctrl.alertIconLabel">
       </alert-status-corner>
     </md-card-content>
     <md-card-content ng-if="$ctrl.isGroup && $ctrl.expanded"

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

@@ -23,14 +23,14 @@ class NavItemController {
   currentPeriod: any;
   currentWorkgroup: any;
   expanded: boolean = false;
-  hasAlert: boolean;
+  hasAlert: boolean = false;
   hasRubrics: boolean;
   icon: any;
   isCurrentNode: boolean;
   isGroup: boolean;
   item: any;
   maxScore: number;
-  newAlert: any;
+  newAlert: boolean = false;;
   nodeHasWork: boolean;
   nodeId: string;
   nodeTitle: string;
@@ -108,13 +108,8 @@ class NavItemController {
       this.parentGroupId = parentGroup.id;
     }
     this.setWorkgroupsOnNodeData();
-
-    this.hasAlert = false;
-    this.newAlert = false;
     this.alertNotifications = [];
-
     this.getAlertNotifications();
-
     this.hasRubrics = this.ProjectService.getNumberOfRubricsByNodeId(this.nodeId) > 0;
     this.alertIconLabel = this.$translate('HAS_ALERTS_NEW');
     this.alertIconClass = 'warn';
@@ -448,29 +443,23 @@ class NavItemController {
   }
 
   getAlertNotifications() {
-    let periodId = this.currentPeriod.periodId;
-    let workgroupId = this.currentWorkgroup ? this.currentWorkgroup.workgroupId : null;
-    let args = {
+    const args = {
       nodeId: this.nodeId,
-      periodId: periodId,
-      toWorkgroupId: workgroupId
+      periodId: this.currentPeriod.periodId,
+      toWorkgroupId: this.currentWorkgroup ? this.currentWorkgroup.workgroupId : null
     };
     this.alertNotifications = this.NotificationService.getAlertNotifications(args);
     this.hasAlert = this.alertNotifications.length > 0;
     this.newAlert = this.hasNewAlert();
   }
 
-  hasNewAlert() {
-    let result = false;
-    let nAlerts = this.alertNotifications.length;
-    for (let i = 0; i < nAlerts; i++) {
-      let alert = this.alertNotifications[i];
+  hasNewAlert(): boolean {
+    for (const alert of this.alertNotifications) {
       if (!alert.timeDismissed) {
-        result = true;
-        break;
+        return true;
       }
     }
-    return result;
+    return false;
   }
 
   getPeriodLabel() {

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

@@ -1,7 +1,5 @@
 'use strict';
 
-import AlertStatusCorner from './alertStatusCorner/alertStatusCorner';
-import AlertStatusIcon from './alertStatusIcon/alertStatusIcon';
 import ComponentGrading from './componentGrading/componentGrading';
 import { ComponentNewWorkBadgeComponent } from '../../../../site/src/app/classroom-monitor/component-new-work-badge/component-new-work-badge.component';
 import ComponentRevisionsInfo from './componentRevisionsInfo/componentRevisionsInfo';
@@ -16,15 +14,16 @@ import TopBar from './topBar/topBar';
 import WorkgroupComponentRevisions from './workgroupComponentRevisions/workgroupComponentRevisions';
 import WorkgroupNodeGrading from './workgroupNodeGrading/workgroupNodeGrading';
 import { WorkgroupNodeStatusComponent } from '../../../../site/src/app/classroom-monitor/workgroup-node-status/workgroup-node-status.component';
+import { AlertStatusCornerComponent } from '../../../../site/src/app/classroom-monitor/alert-status-corner/alert-status-corner.component';
 import WorkgroupSelect from './workgroupSelect/workgroupSelect';
 import * as angular from 'angular';
 import { WorkgroupNodeScoreComponent } from './workgroupNodeScore/workgroup-node-score.component';
 import { downgradeComponent } from '@angular/upgrade/static';
 
 const Shared = angular
   .module('cmShared', [])
-  .component('alertStatusCorner', AlertStatusCorner)
-  .component('alertStatusIcon', AlertStatusIcon)
+  .directive('alertStatusCorner',
+      downgradeComponent({ component: AlertStatusCornerComponent }) as angular.IDirectiveFactory)
   .component('componentGrading', ComponentGrading)
   .directive('componentNewWorkBadge',
       downgradeComponent({ component: ComponentNewWorkBadgeComponent }) as angular.IDirectiveFactory)