feat(Show Group Work): Display work in preview (#1033)

src/app/student-teacher-common-services.module.ts

@@ -37,7 +37,6 @@ import { DialogGuidanceService } from '../assets/wise5/components/dialogGuidance
 import { PeerChatService } from '../assets/wise5/components/peerChat/peerChatService';
 import { ShowMyWorkService } from '../assets/wise5/components/showMyWork/showMyWorkService';
 import { ShowGroupWorkService } from '../assets/wise5/components/showGroupWork/showGroupWorkService';
-import { PeerGroupService } from '../assets/wise5/services/peerGroupService';
 import { ComputerAvatarService } from '../assets/wise5/services/computerAvatarService';
 import { StudentStatusService } from '../assets/wise5/services/studentStatusService';
 import { OpenResponseCompletionCriteriaService } from '../assets/wise5/components/openResponse/openResponseCompletionCriteriaService';
@@ -83,7 +82,6 @@ import { StudentPeerGroupService } from '../assets/wise5/services/studentPeerGro
     OpenResponseService,
     PathService,
     PeerChatService,
-    PeerGroupService,
     ProjectLibraryService,
     { provide: ProjectService, useExisting: VLEProjectService },
     SessionService,

src/app/student/vle/student-vle.module.ts

@@ -32,6 +32,8 @@ import { RunEndedAndLockedMessageComponent } from '../../../assets/wise5/vle/run
 import { NodeClickLockedService } from '../../../assets/wise5/services/nodeClickLockedService';
 import { NodeNavigationComponent } from '../../../assets/wise5/directives/node-navigation/node-navigation.component';
 import { GroupTabsComponent } from '../../../assets/wise5/directives/group-tabs/group-tabs.component';
+import { StudentPeerGroupService } from '../../../assets/wise5/services/studentPeerGroupService';
+import { PeerGroupService } from '../../../assets/wise5/services/peerGroupService';
 
 @NgModule({
   declarations: [
@@ -66,6 +68,7 @@ import { GroupTabsComponent } from '../../../assets/wise5/directives/group-tabs/
     PauseScreenService,
     { provide: DataService, useExisting: StudentDataService },
     { provide: NotificationService, useExisting: StudentNotificationService },
+    { provide: PeerGroupService, useExisting: StudentPeerGroupService },
     { provide: ProjectService, useExisting: VLEProjectService },
     StudentNotificationService,
     VLEProjectService

src/app/teacher-hybrid-angular.module.ts

@@ -32,6 +32,7 @@ import { setUpLocationSync } from '@angular/router/upgrade';
 import { TeacherPeerGroupService } from '../assets/wise5/services/teacherPeerGroupService';
 import { DataExportService } from '../assets/wise5/services/dataExportService';
 import { TeacherNodeIconComponent } from '../assets/wise5/authoringTool/teacher-node-icon/teacher-node-icon.component';
+import { PeerGroupService } from '../assets/wise5/services/peerGroupService';
 
 @Component({ template: `` })
 export class EmptyComponent {}
@@ -60,6 +61,7 @@ export class EmptyComponent {}
     MoveNodesService,
     ProjectAssetService,
     SpaceService,
+    { provide: PeerGroupService, useExisting: TeacherPeerGroupService },
     { provide: ProjectService, useExisting: TeacherProjectService },
     TeacherDataService,
     TeacherDiscussionService,

src/assets/wise5/components/peerChat/peer-chat-grading/peer-chat-grading.component.spec.ts

@@ -43,6 +43,7 @@ describe('PeerChatGradingComponent', () => {
       declarations: [PeerChatGradingComponent],
       providers: [
         ClassroomStatusService,
+        PeerGroupService,
         TeacherDataService,
         TeacherProjectService,
         TeacherWebSocketService,

src/assets/wise5/components/showGroupWork/show-group-work-student/show-group-work-student.component.spec.ts

@@ -10,7 +10,10 @@ import { AnnotationService } from '../../../services/annotationService';
 import { ConfigService } from '../../../services/configService';
 import { NodeService } from '../../../services/nodeService';
 import { NotebookService } from '../../../services/notebookService';
+import { PeerGroupService } from '../../../services/peerGroupService';
 import { ProjectService } from '../../../services/projectService';
+import { StudentDataService } from '../../../services/studentDataService';
+import { StudentPeerGroupService } from '../../../services/studentPeerGroupService';
 import { PeerGroup } from '../../peerChat/PeerGroup';
 import { PeerGroupMember } from '../../peerChat/PeerGroupMember';
 import { ShowGroupWorkStudentComponent } from './show-group-work-student.component';
@@ -26,14 +29,23 @@ class MockNotebookService {
 }
 
 class MockConfigService {
+  getPeriodId() {
+    return periodId;
+  }
   getRunId() {
     return 1;
   }
+  isAuthoring() {
+    return false;
+  }
   isPreview() {
     return false;
   }
+  isSignedInUserATeacher() {
+    return false;
+  }
   getWorkgroupId() {
-    return 1;
+    return workgroupId;
   }
   getAvatarColorForWorkgroupId(workgroupId: any) {
     return '#000000';
@@ -48,7 +60,14 @@ let componentState1;
 let componentState2;
 let componentState3;
 let fixture: ComponentFixture<ShowGroupWorkStudentComponent>;
+const periodId = 100;
+const peerGroup = new PeerGroup(
+  1,
+  [new PeerGroupMember(1, 1), new PeerGroupMember(2, 1), new PeerGroupMember(3, 1)],
+  new PeerGrouping()
+);
 let studentWork;
+const workgroupId: number = 1000;
 
 describe('ShowGroupWorkStudentComponent', () => {
   beforeEach(async () => {
@@ -60,7 +79,8 @@ describe('ShowGroupWorkStudentComponent', () => {
         { provide: ConfigService, useClass: MockConfigService },
         { provide: MatDialog, useClass: MockService },
         { provide: NodeService, useClass: MockService },
-        { provide: NotebookService, useClass: MockNotebookService }
+        { provide: NotebookService, useClass: MockNotebookService },
+        { provide: PeerGroupService, useClass: StudentPeerGroupService }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -85,11 +105,7 @@ describe('ShowGroupWorkStudentComponent', () => {
     spyOn(TestBed.inject(ProjectService), 'injectAssetPaths').and.returnValue({
       type: 'OpenResponse'
     });
-    component.peerGroup = new PeerGroup(
-      1,
-      [new PeerGroupMember(1, 1), new PeerGroupMember(2, 1), new PeerGroupMember(3, 1)],
-      new PeerGrouping()
-    );
+    component.peerGroup = peerGroup;
     component.setWorkgroupInfos();
     spyOn(component, 'subscribeToSubscriptions').and.callFake(() => {});
     fixture.detectChanges();
@@ -98,6 +114,7 @@ describe('ShowGroupWorkStudentComponent', () => {
   setStudentWorkFromGroupMembers();
   setLayout();
   setWidths();
+  showGroupWorkInPreview();
 });
 
 function createComponentState(workgroupId: number): any {
@@ -160,3 +177,27 @@ function setWidths() {
     });
   });
 }
+
+function showGroupWorkInPreview() {
+  describe('ngOnInit()', () => {
+    it('should show group work in preview', () => {
+      spyOn(TestBed.inject(ConfigService), 'isPreview').and.returnValue(true);
+      spyOn(TestBed.inject(ConfigService), 'getWorkgroupId').and.returnValue(workgroupId);
+      spyOn(TestBed.inject(ConfigService), 'getPeriodId').and.returnValue(periodId);
+      spyOn(TestBed.inject(PeerGroupService), 'retrievePeerGroup').and.returnValue(of(peerGroup));
+      const latestComponentState = {
+        id: 100,
+        studentData: {
+          response: 'Hello'
+        },
+        workgroupId: workgroupId
+      };
+      spyOn(
+        TestBed.inject(StudentDataService),
+        'getLatestComponentStateByNodeIdAndComponentId'
+      ).and.returnValue(latestComponentState);
+      component.ngOnInit();
+      expect(component.workgroupIdToWork.get(workgroupId)).toEqual(latestComponentState);
+    });
+  });
+}

src/assets/wise5/services/peerGroupService.ts

@@ -4,10 +4,13 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { Node } from '../common/Node';
 import { PeerGroup } from '../components/peerChat/PeerGroup';
+import { PeerGroupMember } from '../components/peerChat/PeerGroupMember';
 import { ConfigService } from './configService';
 
 @Injectable()
 export class PeerGroupService {
+  static readonly PREVIEW_PEER_GROUP_ID = 1;
+
   runId: number;
 
   constructor(protected configService: ConfigService, protected http: HttpClient) {
@@ -34,6 +37,28 @@ export class PeerGroupService {
       .pipe(map((value) => new PeerGroup(value.id, value.members, value.peerGrouping)));
   }
 
+  retrievePeerGroupWork(
+    peerGroup: PeerGroup,
+    nodeId: string,
+    componentId: string
+  ): Observable<any> {
+    return this.http.get(`/api/peer-group/${peerGroup.id}/${nodeId}/${componentId}/student-work`);
+  }
+
+  protected getPreviewPeerGroup(): PeerGroup {
+    let workgroupId = 1;
+    let periodId = 1;
+    if (!this.configService.isAuthoring()) {
+      workgroupId = this.configService.getWorkgroupId();
+      periodId = this.configService.getPeriodId();
+    }
+    return new PeerGroup(
+      PeerGroupService.PREVIEW_PEER_GROUP_ID,
+      [new PeerGroupMember(workgroupId, periodId)],
+      null
+    );
+  }
+
   retrieveStudentWork(
     peerGroup: PeerGroup,
     nodeId: string,

src/assets/wise5/services/studentPeerGroupService.ts

@@ -3,7 +3,6 @@ import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { PeerGroupStudentData } from '../../../app/domain/peerGroupStudentData';
 import { PeerGroup } from '../components/peerChat/PeerGroup';
-import { PeerGroupMember } from '../components/peerChat/PeerGroupMember';
 import { AnnotationService } from './annotationService';
 import { ConfigService } from './configService';
 import { PeerGroupService } from './peerGroupService';
@@ -12,8 +11,6 @@ import { ProjectService } from './projectService';
 
 @Injectable()
 export class StudentPeerGroupService extends PeerGroupService {
-  static readonly PREVIEW_PEER_GROUP_ID = 1;
-
   constructor(
     private annotationService: AnnotationService,
     protected configService: ConfigService,
@@ -28,30 +25,12 @@ export class StudentPeerGroupService extends PeerGroupService {
     peerGroupingTag: string,
     workgroupId = this.configService.getWorkgroupId()
   ): Observable<PeerGroup> {
-    if (
-      this.configService.isPreview() ||
-      this.configService.isAuthoring() ||
-      this.configService.isSignedInUserATeacher()
-    ) {
+    if (this.configService.isPreview()) {
       return of(this.getPreviewPeerGroup());
     }
     return super.retrievePeerGroup(peerGroupingTag, workgroupId);
   }
 
-  private getPreviewPeerGroup(): PeerGroup {
-    let workgroupId = 1;
-    let periodId = 1;
-    if (!this.configService.isAuthoring()) {
-      workgroupId = this.configService.getWorkgroupId();
-      periodId = this.configService.getPeriodId();
-    }
-    return new PeerGroup(
-      StudentPeerGroupService.PREVIEW_PEER_GROUP_ID,
-      [new PeerGroupMember(workgroupId, periodId)],
-      null
-    );
-  }
-
   retrievePeerGroupWork(
     peerGroup: PeerGroup,
     nodeId: string,
@@ -61,11 +40,8 @@ export class StudentPeerGroupService extends PeerGroupService {
       return of(
         this.studentDataService.getComponentStatesByNodeIdAndComponentId(nodeId, componentId)
       );
-    } else if (this.configService.isAuthoring() || this.configService.isSignedInUserATeacher()) {
-      return of([]);
-    } else {
-      return this.http.get(`/api/peer-group/${peerGroup.id}/${nodeId}/${componentId}/student-work`);
     }
+    return super.retrievePeerGroupWork(peerGroup, nodeId, componentId);
   }
 
   retrieveQuestionBankStudentData(
@@ -105,13 +81,10 @@ export class StudentPeerGroupService extends PeerGroupService {
   ): Observable<PeerGroupStudentData[]> {
     if (this.configService.isPreview()) {
       return this.getPreviewPeerGroupStudentData(nodeId, componentId, fieldName);
-    } else if (this.configService.isAuthoring() || this.configService.isSignedInUserATeacher()) {
-      return of([]);
-    } else {
-      return this.http.get<PeerGroupStudentData[]>(
-        `/api/peer-group/${peerGroupId}/${nodeId}/${componentId}/student-data/${urlEnding}`
-      );
     }
+    return this.http.get<PeerGroupStudentData[]>(
+      `/api/peer-group/${peerGroupId}/${nodeId}/${componentId}/student-data/${urlEnding}`
+    );
   }
 
   private getPreviewPeerGroupStudentData(
@@ -146,4 +119,27 @@ export class StudentPeerGroupService extends PeerGroupService {
       return of([peerGroupStudentData]);
     }
   }
+
+  retrieveStudentWork(
+    peerGroup: PeerGroup,
+    nodeId: string,
+    componentId: string,
+    showWorkNodeId: string,
+    showWorkComponentId: string
+  ): Observable<any> {
+    if (this.configService.isPreview()) {
+      const latestComponentState = this.studentDataService.getLatestComponentStateByNodeIdAndComponentId(
+        showWorkNodeId,
+        showWorkComponentId
+      );
+      return latestComponentState != null ? of([latestComponentState]) : of([]);
+    }
+    return super.retrieveStudentWork(
+      peerGroup,
+      nodeId,
+      componentId,
+      showWorkNodeId,
+      showWorkComponentId
+    );
+  }
 }

src/assets/wise5/services/teacherPeerGroupService.ts

@@ -1,7 +1,9 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { Observable, of } from 'rxjs';
 import { PeerGroupDialogComponent } from '../classroomMonitor/classroomMonitorComponents/peer-group/peer-group-dialog/peer-group-dialog.component';
+import { PeerGroup } from '../components/peerChat/PeerGroup';
 import { ConfigService } from './configService';
 import { PeerGroupService } from './peerGroupService';
 
@@ -21,4 +23,16 @@ export class TeacherPeerGroupService extends PeerGroupService {
       panelClass: 'dialog-lg'
     });
   }
+
+  retrievePeerGroup(): Observable<PeerGroup> {
+    return of(this.getPreviewPeerGroup());
+  }
+
+  retrievePeerGroupWork(): Observable<any> {
+    return of([]);
+  }
+
+  retrieveStudentWork(): Observable<any> {
+    return of([]);
+  }
 }