Merge branch 'develop' into issue-1449-remove-student-does-not-update-ui

src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts

@@ -1,9 +1,9 @@
 import { Directive, Input } from '@angular/core';
 import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
 import { Component } from '../../../assets/wise5/common/Component';
-import { NodeService } from '../../../assets/wise5/services/nodeService';
 import { NotebookService } from '../../../assets/wise5/services/notebookService';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
+import { TeacherNodeService } from '../../../assets/wise5/services/teacherNodeService';
 
 @Directive()
 export abstract class EditAdvancedComponentComponent {
@@ -13,7 +13,7 @@ export abstract class EditAdvancedComponentComponent {
   @Input() nodeId: string;
 
   constructor(
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected notebookService: NotebookService,
     protected teacherProjectService: TeacherProjectService
   ) {}

src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html

@@ -40,6 +40,6 @@ <h5 i18n>Choose a location for the imported steps.</h5>
 <div class="nav-controls">
   <mat-divider></mat-divider>
   <div fxLayout="row" fxLayoutAlign="end center">
-    <button mat-button color="primary" routerLink="../.." aria-label="Cancel" i18n>Cancel</button>
+    <button mat-button color="primary" routerLink="../../.." i18n>Cancel</button>
   </div>
 </div>

src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts

@@ -39,14 +39,14 @@ export class ChooseImportStepLocationComponent {
           this.projectService.refreshProject();
           if (nodesWithNewNodeIds.length === 1) {
             const newNode = nodesWithNewNodeIds[0];
-            this.router.navigate(['../../node', newNode.id], {
+            this.router.navigate(['../../../node', newNode.id], {
               relativeTo: this.route,
               state: {
                 newComponents: newNode.components
               }
             });
           } else {
-            this.router.navigate(['../..'], { relativeTo: this.route });
+            this.router.navigate(['../../..'], { relativeTo: this.route });
           }
         });
       });

src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html

@@ -55,7 +55,7 @@ <h6 *ngIf="item.order != 0 && item.node.type == 'group'">
       Back
     </button>
     <span fxFlex></span>
-    <button mat-button color="primary" routerLink="../.." aria-label="cancel" i18n>Cancel</button>
+    <button mat-button color="primary" routerLink="../../.." i18n>Cancel</button>
     <button
       mat-raised-button
       color="primary"

src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html

@@ -25,6 +25,8 @@ <h5 i18n>Choose a unit from which to import step(s).</h5>
 <div class="nav-controls">
   <mat-divider></mat-divider>
   <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="end center">
-    <button mat-button color="primary" routerLink="../.." aria-label="cancel" i18n>Cancel</button>
+    <button mat-button color="primary" routerLink="../../choose-template" i18n>Back</button>
+    <span fxFlex></span>
+    <button mat-button color="primary" routerLink="../../.." i18n>Cancel</button>
   </div>
 </div>

src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ConfigService } from '../../../../assets/wise5/services/configService';
 import { ProjectLibraryService } from '../../../../assets/wise5/services/projectLibraryService';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'choose-import-unit',
@@ -11,6 +12,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class ChooseImportUnitComponent {
   protected libraryProjects: any[];
   protected myProjects: any[];
+  private subscriptions: Subscription = new Subscription();
 
   constructor(
     private configService: ConfigService,
@@ -21,11 +23,15 @@ export class ChooseImportUnitComponent {
 
   ngOnInit(): void {
     this.myProjects = this.configService.getAuthorableProjects();
-    this.projectLibraryService.getLibraryProjects().then((libraryProjects) => {
-      this.libraryProjects = this.projectLibraryService.sortAndFilterUniqueProjects(
-        libraryProjects
-      );
-    });
+    this.subscriptions.add(
+      this.projectLibraryService.getLibraryProjects().subscribe((libraryProjects) => {
+        this.libraryProjects = libraryProjects;
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 
   protected chooseProject(project: any): void {

src/app/classroom-monitor/component-new-work-badge/component-new-work-badge.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { AnnotationService } from '../../../assets/wise5/services/annotationService';
 import { TeacherDataService } from '../../../assets/wise5/services/teacherDataService';
+import { Annotation } from '../../../assets/wise5/common/Annotation';
 
 @Component({
   selector: 'component-new-work-badge',
@@ -29,10 +30,8 @@ export class ComponentNewWorkBadgeComponent {
   ngOnInit() {
     this.checkHasNewWork();
     this.annotationSavedToServerSubscription = this.AnnotationService.annotationSavedToServer$.subscribe(
-      ({ annotation }) => {
-        const annotationNodeId = annotation.nodeId;
-        const annotationComponentId = annotation.componentId;
-        if (this.nodeId === annotationNodeId && this.componentId === annotationComponentId) {
+      (annotation: Annotation) => {
+        if (annotation.nodeId === this.nodeId && annotation.componentId === this.componentId) {
           this.checkHasNewWork();
         }
       }

src/app/classroom-monitor/milestones/milestones.component.ts

@@ -7,6 +7,7 @@ import { AnnotationService } from '../../../assets/wise5/services/annotationServ
 import { MilestoneService } from '../../../assets/wise5/services/milestoneService';
 import { TeacherDataService } from '../../../assets/wise5/services/teacherDataService';
 import { Milestone } from '../../domain/milestone';
+import { Annotation } from '../../../assets/wise5/common/Annotation';
 
 @Component({
   selector: 'milestones',
@@ -62,7 +63,7 @@ export class MilestonesComponent {
 
   private subscribeToAnnotationChanges(): void {
     this.subscriptions.add(
-      this.annotationService.annotationReceived$.subscribe(({ annotation }) => {
+      this.annotationService.annotationReceived$.subscribe((annotation: Annotation) => {
         this.milestones
           .filter(
             (milestone) =>

src/app/domain/run.spec.ts

@@ -1,14 +1,13 @@
-import { waitForAsync } from '@angular/core/testing';
-import { Run } from './run';
+import { Run, sortByRunStartTimeDesc } from './run';
 
 describe('Run', () => {
   const run = new Run({
-    startTime: new Date('2019-03-21T08:00:00.0').getTime()
+    startTime: new Date('2019-03-21').getTime()
   });
-  const beforeStartTime = new Date('2019-03-20T08:00:00.0').getTime();
-  const betweenStartAndEndTimes = new Date('2019-03-22T08:00:00.0').getTime();
-  const endTime = new Date('2019-03-23T08:00:00.0').getTime();
-  const afterEndTime = new Date('2019-03-24T08:00:00.0').getTime();
+  const beforeStartTime = new Date('2019-03-20').getTime();
+  const betweenStartAndEndTimes = new Date('2019-03-22').getTime();
+  const endTime = new Date('2019-03-23').getTime();
+  const afterEndTime = new Date('2019-03-24').getTime();
 
   function expectRun(func, timeNow, expectedValue) {
     expect(run[func](timeNow)).toEqual(expectedValue);
@@ -35,4 +34,21 @@ describe('Run', () => {
     expectRun('isScheduled', beforeStartTime, true);
     expectRun('isScheduled', betweenStartAndEndTimes, false);
   });
+
+  describe('sortByStartTimeDesc()', () => {
+    let runList: Run[];
+    const run2 = new Run({
+      startTime: endTime
+    });
+    const run3 = new Run({
+      startTime: afterEndTime
+    });
+    beforeEach(() => {
+      runList = [run2, run3, run];
+      runList.sort(sortByRunStartTimeDesc);
+    });
+    it('sorts runs by start date', async () => {
+      expect(runList).toEqual([run3, run2, run]);
+    });
+  });
 });

src/app/domain/run.ts

@@ -93,3 +93,7 @@ export class Run {
     return this.endTime != null;
   }
 }
+
+export function sortByRunStartTimeDesc(a: Run, b: Run): number {
+  return b.startTime - a.startTime;
+}

src/app/notebook/notebook-report/notebook-report.component.ts

@@ -10,6 +10,7 @@ import {
   insertWiseLinks,
   replaceWiseLinks
 } from '../../../assets/wise5/common/wise-link/wise-link';
+import { Annotation } from '../../../assets/wise5/common/Annotation';
 
 @Component({
   selector: 'notebook-report',
@@ -67,7 +68,7 @@ export class NotebookReportComponent extends NotebookParentComponent {
     this.isAddNoteButtonAvailable = this.isNoteEnabled();
 
     this.subscriptions.add(
-      this.NotebookService.notebookItemAnnotationReceived$.subscribe(({ annotation }: any) => {
+      this.NotebookService.notebookItemAnnotationReceived$.subscribe((annotation: Annotation) => {
         if (annotation.localNotebookItemId === this.reportId) {
           this.hasNewAnnotation = true;
           this.latestAnnotations = this.AnnotationService.getLatestNotebookItemAnnotations(

src/app/services/projectLibraryService.spec.ts

@@ -6,21 +6,6 @@ import { ProjectLibraryService } from '../../assets/wise5/services/projectLibrar
 let configService: ConfigService;
 let http: HttpTestingController;
 let service: ProjectLibraryService;
-const getLibraryProjectsURL = '/api/project/library';
-const libraryProjects = [
-  {
-    children: [
-      { id: 3, name: 'three' },
-      { id: 1, name: 'one' }
-    ]
-  },
-  {
-    children: [
-      { id: 2, name: 'two' },
-      { id: 1, name: 'one' }
-    ]
-  }
-];
 
 describe('ProjectLibraryService', () => {
   beforeEach(() => {
@@ -33,56 +18,32 @@ describe('ProjectLibraryService', () => {
     configService = TestBed.inject(ConfigService);
   });
   getLibraryProjects();
-  sortAndFilterUniqueProjects();
-  filterUniqueProjects();
 });
 
 function getLibraryProjects() {
-  describe('getLibraryProjects', () => {
-    it('should get the library projects', () => {
-      spyOnLibraryProjectsURLFromConfig();
-      const result = service.getLibraryProjects();
-      http.expectOne(getLibraryProjectsURL).flush(libraryProjects);
-      result.then((projects) => {
-        expect(projects).toEqual(libraryProjects);
+  describe('getLibraryProjects()', () => {
+    const getLibraryProjectsURL = '/api/project/library';
+    const unit1 = { id: 1, name: 'one' };
+    const unit2 = { id: 2, name: 'two' };
+    const unit3 = { id: 3, name: 'three' };
+    const libraryProjects = [
+      {
+        children: [unit3, unit1]
+      },
+      {
+        children: [unit2, unit1]
+      }
+    ];
+    beforeEach(() => {
+      spyOn(configService, 'getConfigParam').and.callFake(() => {
+        return getLibraryProjectsURL;
       });
     });
-  });
-}
-
-function spyOnLibraryProjectsURLFromConfig() {
-  spyOn(configService, 'getConfigParam').and.callFake((param) => {
-    return getLibraryProjectsURL;
-  });
-}
-
-function sortAndFilterUniqueProjects() {
-  describe('sortAndFilterUniqueProjects', () => {
-    it('should filter and sort unique projects', () => {
-      const result = service.sortAndFilterUniqueProjects(libraryProjects);
-      expect(result).toEqual([
-        { id: 3, name: 'three' },
-        { id: 2, name: 'two' },
-        { id: 1, name: 'one' }
-      ]);
-    });
-  });
-}
-
-function filterUniqueProjects() {
-  describe('filterUniqueProjects', () => {
-    it('should filter unique projects based on id', () => {
-      const nonUniqueProjects = [
-        { id: 3, name: 'three' },
-        { id: 1, name: 'one' },
-        { id: 2, name: 'two' },
-        { id: 1, name: 'one' }
-      ];
-      const uniqueProjects = service.filterUniqueProjects(nonUniqueProjects);
-      expect(uniqueProjects.length).toEqual(3);
-      expect(uniqueProjects[0].id).toEqual(3);
-      expect(uniqueProjects[1].id).toEqual(1);
-      expect(uniqueProjects[2].id).toEqual(2);
+    it('gets the library projects, sorted and filtered', () => {
+      service.getLibraryProjects().subscribe((projects) => {
+        expect(projects).toEqual([unit3, unit2, unit1]);
+      });
+      http.expectOne(getLibraryProjectsURL).flush(libraryProjects);
     });
   });
 }

src/app/services/wiseLinkService.ts

@@ -3,6 +3,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { replaceWiseLinks } from '../../assets/wise5/common/wise-link/wise-link';
 import { NodeService } from '../../assets/wise5/services/nodeService';
 import { StudentDataService } from '../../assets/wise5/services/studentDataService';
+import { scrollToElement, temporarilyHighlightElement } from '../../assets/wise5/common/dom/dom';
 
 @Injectable()
 export class WiseLinkService {
@@ -43,15 +44,26 @@ export class WiseLinkService {
 
   private followLink(nodeId: string, componentId: string): void {
     if (nodeId === this.studentDataService.getCurrentNodeId()) {
-      this.nodeService.scrollToComponentAndHighlight(componentId);
+      this.scrollToComponentAndHighlight(componentId);
     } else {
       this.goToNode(nodeId, componentId);
     }
   }
 
+  private scrollToComponentAndHighlight(componentId: string): void {
+    const elementId = `component_${componentId}`;
+    scrollToElement(elementId);
+    temporarilyHighlightElement(elementId);
+  }
+
   private goToNode(nodeId: string, componentId: string): void {
     if (componentId !== '') {
-      this.nodeService.registerScrollToComponent(componentId);
+      const subscription = this.studentDataService.currentNodeChanged$.subscribe(() => {
+        setTimeout(() => {
+          this.scrollToComponentAndHighlight(componentId);
+          subscription.unsubscribe();
+        }, 500); // timeout attempts to ensure that new node has loaded before scroll+highlight
+      });
     }
     this.nodeService.setCurrentNode(nodeId);
   }

src/app/student/student-run-list/student-run-list.component.html

@@ -26,11 +26,11 @@
         <ng-container *ngIf="search" i18n>Units found: {{ filteredRuns.length }}</ng-container>
         <ng-container *ngIf="!search" i18n>My WISE units: {{ filteredRuns.length }}</ng-container>
         <span class="mat-caption" *ngIf="filteredRuns.length">
-          (<ng-container *ngIf="scheduledTotal()"
-            ><span i18n>{{ scheduledTotal() }} scheduled</span>,
+          (<ng-container *ngIf="getRunTotal('isScheduled')"
+            ><span i18n>{{ getRunTotal('isScheduled') }} scheduled</span>,
           </ng-container>
           <ng-container
-            ><span i18n>{{ activeTotal() }} active</span></ng-container
+            ><span i18n>{{ getRunTotal('isActive') }} active</span></ng-container
           >)
         </span>
         <ng-container *ngIf="search">
@@ -49,9 +49,9 @@
           id="run{{ run.id }}"
         >
           <app-timeline-item-label>
-            <strong>{{ run.startTime | date : 'mediumDate' }}</strong>
+            <strong>{{ run.startTime | date: 'mediumDate' }}</strong>
             <ng-container *ngIf="run.endTime && runSpansDays(run)">
-              - <strong>{{ run.endTime | date : 'mediumDate' }}</strong>
+              - <strong>{{ run.endTime | date: 'mediumDate' }}</strong>
             </ng-container>
           </app-timeline-item-label>
           <app-timeline-item-content>