diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.html b/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.html
new file mode 100644
index 00000000000..104debf087d
--- /dev/null
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.html
@@ -0,0 +1,35 @@
+
+
+ You have not been paired with a classmate yet. Please check back later.
+
+
+
+
+
+
+ account_circle
+
+ {{ workgroupInfos[member.id].displayNames }}
+
+
+
+ (Waiting for response...)
+
+
+
+
+
+
+
+
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.scss b/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.scss
new file mode 100644
index 00000000000..9a7b05482ac
--- /dev/null
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.scss
@@ -0,0 +1,13 @@
+@import 'style/abstracts/variables';
+
+.mat-card {
+ margin: 4px;
+ padding: 8px;
+}
+
+.mat-card-content {
+ margin-top: 8px;
+ padding: 8px;
+ border-radius: $button-border-radius;
+ overflow: auto;
+}
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.spec.ts b/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.spec.ts
new file mode 100644
index 00000000000..75736f79e93
--- /dev/null
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.spec.ts
@@ -0,0 +1,195 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { of } from 'rxjs';
+import { PeerGrouping } from '../../../../../app/domain/peerGrouping';
+import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
+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 { PeerGroup } from '../../peerChat/PeerGroup';
+import { PeerGroupMember } from '../../peerChat/PeerGroupMember';
+import { ShowGroupWorkDisplayComponent } from './show-group-work-display.component';
+
+class MockService {}
+
+class MockNotebookService {
+ notebookUpdated$: any = of({});
+
+ isNotebookEnabled() {
+ return false;
+ }
+}
+
+class MockConfigService {
+ getPeriodId() {
+ return periodId;
+ }
+ getRunId() {
+ return 1;
+ }
+ isAuthoring() {
+ return false;
+ }
+ isPreview() {
+ return false;
+ }
+ isSignedInUserATeacher() {
+ return false;
+ }
+ getWorkgroupId() {
+ return workgroupId;
+ }
+ getAvatarColorForWorkgroupId(workgroupId: any) {
+ return '#000000';
+ }
+ getUsernamesStringByWorkgroupId(workgroupId: number) {
+ return `Student ${workgroupId}`;
+ }
+}
+
+let component: ShowGroupWorkDisplayComponent;
+let componentState1;
+let componentState2;
+let componentState3;
+let fixture: ComponentFixture
;
+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('ShowGroupWorkDisplayComponent', () => {
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [HttpClientTestingModule, StudentTeacherCommonServicesModule],
+ declarations: [ShowGroupWorkDisplayComponent],
+ providers: [
+ AnnotationService,
+ { provide: ConfigService, useClass: MockConfigService },
+ { provide: MatDialog, useClass: MockService },
+ { provide: NodeService, useClass: MockService },
+ { provide: NotebookService, useClass: MockNotebookService },
+ { provide: PeerGroupService, useClass: PeerGroupService }
+ ],
+ schemas: [NO_ERRORS_SCHEMA]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ShowGroupWorkDisplayComponent);
+ componentState1 = createComponentState(1);
+ componentState2 = createComponentState(2);
+ studentWork = [componentState1, componentState2];
+ component = fixture.componentInstance;
+ component.componentContent = {
+ id: 'abc',
+ prompt: '',
+ showSaveButton: true,
+ showSubmitButton: true,
+ isShowMyWork: true,
+ layout: 'row',
+ type: 'ShowGroupWork'
+ };
+ spyOn(TestBed.inject(ProjectService), 'injectAssetPaths').and.returnValue({
+ type: 'OpenResponse'
+ });
+ component.peerGroup = peerGroup;
+ component.setWorkgroupInfos();
+ fixture.detectChanges();
+ });
+
+ setStudentWorkFromGroupMembers();
+ setLayout();
+ setWidths();
+ showGroupWorkInPreview();
+});
+
+function createComponentState(workgroupId: number): any {
+ return {
+ workgroupId: workgroupId
+ };
+}
+
+function setStudentWorkFromGroupMembers() {
+ describe('setStudentWorkFromGroupMembers', () => {
+ it('should add entry to workgroupIdToWork for each student work', () => {
+ component.setStudentWorkFromGroupMembers(studentWork);
+ expect(component.workgroupIdToWork.size).toEqual(2);
+ });
+ });
+}
+
+function setLayout() {
+ describe('setLayout', () => {
+ it('should set row layout for narrow component type', () => {
+ component.setStudentWorkFromGroupMembers(studentWork);
+ component.setLayout();
+ expect(component.flexLayout).toBe('row wrap');
+ });
+
+ it('should set column layout', () => {
+ component.componentContent.layout = 'column';
+ component.setStudentWorkFromGroupMembers(studentWork);
+ component.setLayout();
+ expect(component.flexLayout).toBe('column');
+ });
+ });
+}
+
+function setWidths() {
+ describe('setWidths()', () => {
+ it('should set widths for narrow component type including my work', () => {
+ component.setStudentWorkFromGroupMembers(studentWork);
+ component.setWidths();
+ expect(component.widthMd).toEqual(50);
+ expect(component.widthLg).toEqual(33.33);
+ });
+
+ it('should set widths for narrow component type not including my work', () => {
+ component.componentContent.isShowMyWork = false;
+ spyOn(TestBed.inject(ConfigService), 'getWorkgroupId').and.returnValue(1);
+ component.setStudentWorkFromGroupMembers(studentWork);
+ component.setWidths();
+ expect(component.widthMd).toEqual(50);
+ expect(component.widthLg).toEqual(33.33);
+ });
+
+ it('should set widths for narrow component type and more than 2 group members', () => {
+ componentState3 = createComponentState(3);
+ studentWork = [componentState1, componentState2, componentState3];
+ component.setStudentWorkFromGroupMembers(studentWork);
+ component.setWidths();
+ expect(component.widthMd).toEqual(50);
+ expect(component.widthLg).toEqual(33.33);
+ });
+ });
+}
+
+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(PeerGroupService), 'retrieveStudentWork').and.returnValue(
+ of([latestComponentState])
+ );
+ component.ngOnInit();
+ expect(component.workgroupIdToWork.get(workgroupId)).toEqual(latestComponentState);
+ });
+ });
+}
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.ts b/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.ts
new file mode 100644
index 00000000000..55ab5dc54e2
--- /dev/null
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.component.ts
@@ -0,0 +1,122 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ConfigService } from '../../../services/configService';
+import { PeerGroupService } from '../../../services/peerGroupService';
+import { ProjectService } from '../../../services/projectService';
+import { PeerGroup } from '../../peerChat/PeerGroup';
+
+@Component({
+ selector: 'show-group-work-display',
+ templateUrl: './show-group-work-display.component.html',
+ styleUrls: ['./show-group-work-display.component.scss']
+})
+export class ShowGroupWorkDisplayComponent implements OnInit {
+ @Input() componentContent: any;
+ @Input() componentId: string;
+ flexLayout: string = 'column';
+ isPeerGroupRetrieved: boolean = false;
+ narrowComponentTypes: string[] = ['MultipleChoice', 'OpenResponse'];
+ @Input() nodeId: string;
+ peerGroup: PeerGroup;
+ showWorkComponentContent: any;
+ widthLg: number = 100;
+ widthMd: number = 100;
+ @Input() workgroupId: number;
+ workgroupIdToWork = new Map();
+ workgroupInfos: any = {};
+
+ constructor(
+ private configService: ConfigService,
+ private peerGroupService: PeerGroupService,
+ private projectService: ProjectService
+ ) {}
+
+ ngOnInit(): void {
+ this.retrieveStudentWorkForPeerGroup();
+ this.setShowWorkComponentContent();
+ }
+
+ private retrieveStudentWorkForPeerGroup(): void {
+ this.peerGroupService
+ .retrievePeerGroup(this.componentContent.peerGroupingTag, this.workgroupId)
+ .subscribe((peerGroup: PeerGroup) => {
+ if (peerGroup != null) {
+ this.peerGroup = this.componentContent.isShowMyWork
+ ? peerGroup
+ : this.removeMyWorkgroup(peerGroup);
+ this.setWorkgroupInfos();
+ this.peerGroupService
+ .retrieveStudentWork(
+ peerGroup,
+ this.nodeId,
+ this.componentId,
+ this.componentContent.showWorkNodeId,
+ this.componentContent.showWorkComponentId
+ )
+ .subscribe((studentWorkFromGroupMembers: any[]) => {
+ this.setStudentWorkFromGroupMembers(studentWorkFromGroupMembers);
+ this.setLayout();
+ });
+ }
+ this.isPeerGroupRetrieved = true;
+ });
+ }
+
+ setStudentWorkFromGroupMembers(studentWorkFromGroupMembers: any[]): void {
+ studentWorkFromGroupMembers.forEach((work) => {
+ this.workgroupIdToWork.set(work.workgroupId, work);
+ });
+ }
+
+ private setShowWorkComponentContent(): void {
+ this.showWorkComponentContent = this.projectService.injectAssetPaths(
+ this.projectService.getComponent(
+ this.componentContent.showWorkNodeId,
+ this.componentContent.showWorkComponentId
+ )
+ );
+ }
+
+ private removeMyWorkgroup(peerGroup: PeerGroup): PeerGroup {
+ const myWorkgroupId = this.configService.getWorkgroupId();
+ peerGroup.members = peerGroup.members.filter((workgroup) => {
+ return workgroup.id !== myWorkgroupId;
+ });
+ return peerGroup;
+ }
+
+ setWorkgroupInfos(): void {
+ this.workgroupInfos = {};
+ for (const member of this.peerGroup.members) {
+ this.setWorkgroupInfo(member.id);
+ }
+ }
+
+ private setWorkgroupInfo(workgroupId: number): void {
+ this.workgroupInfos[workgroupId] = {
+ avatarColor: this.configService.getAvatarColorForWorkgroupId(workgroupId),
+ displayNames: this.configService.getUsernamesStringByWorkgroupId(workgroupId)
+ };
+ }
+
+ setLayout(): void {
+ if (this.componentContent.layout === 'row') {
+ this.flexLayout = 'row wrap';
+ this.setWidths();
+ }
+ }
+
+ setWidths(): void {
+ const numWorkgroups = this.peerGroup.members.length;
+ if (numWorkgroups > 1) {
+ this.widthMd = 50;
+ this.widthLg = 50;
+ }
+ if (numWorkgroups > 2 && this.isNarrow()) {
+ this.widthLg = 33.33;
+ }
+ }
+
+ private isNarrow(): boolean {
+ return this.narrowComponentTypes.includes(this.showWorkComponentContent.type);
+ }
+}
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.module.ts b/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.module.ts
new file mode 100644
index 00000000000..37c312cb76d
--- /dev/null
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-display/show-group-work-display.module.ts
@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { ShowWorkStudentModule } from '../../showWork/show-work-student/show-work-student.module';
+import { ShowGroupWorkDisplayComponent } from './show-group-work-display.component';
+
+@NgModule({
+ declarations: [ShowGroupWorkDisplayComponent],
+ imports: [CommonModule, FlexLayoutModule, MatCardModule, MatIconModule, ShowWorkStudentModule],
+ exports: [ShowGroupWorkDisplayComponent]
+})
+export class ShowGroupWorkDisplayModule {}
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.component.html b/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.component.html
new file mode 100644
index 00000000000..792b3b43d18
--- /dev/null
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.component.html
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.component.scss b/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.component.spec.ts b/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.component.spec.ts
new file mode 100644
index 00000000000..79653dd6a3f
--- /dev/null
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.component.spec.ts
@@ -0,0 +1,25 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogModule } from '@angular/material/dialog';
+import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
+import { ShowGroupWorkGradingComponent } from './show-group-work-grading.component';
+
+describe('ShowGroupWorkGradingComponent', () => {
+ let component: ShowGroupWorkGradingComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [HttpClientTestingModule, MatDialogModule, StudentTeacherCommonServicesModule],
+ declarations: [ShowGroupWorkGradingComponent]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ShowGroupWorkGradingComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.component.ts b/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.component.ts
new file mode 100644
index 00000000000..2cd7e3205e0
--- /dev/null
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { ComponentShowWorkDirective } from '../../component-show-work.directive';
+
+@Component({
+ selector: 'show-group-work-grading',
+ templateUrl: './show-group-work-grading.component.html',
+ styleUrls: ['./show-group-work-grading.component.scss']
+})
+export class ShowGroupWorkGradingComponent extends ComponentShowWorkDirective {
+ @Input() workgroupId: number;
+}
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.module.ts b/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.module.ts
new file mode 100644
index 00000000000..c8b4937dc88
--- /dev/null
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { ShowGroupWorkDisplayModule } from '../show-group-work-display/show-group-work-display.module';
+import { ShowGroupWorkGradingComponent } from './show-group-work-grading.component';
+
+@NgModule({
+ declarations: [ShowGroupWorkGradingComponent],
+ imports: [ShowGroupWorkDisplayModule],
+ exports: [ShowGroupWorkGradingComponent]
+})
+export class ShowGroupWorkGradingModule {}
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-student/show-group-work-student.component.html b/src/assets/wise5/components/showGroupWork/show-group-work-student/show-group-work-student.component.html
index 419e46ef3b7..8b00210a84c 100644
--- a/src/assets/wise5/components/showGroupWork/show-group-work-student/show-group-work-student.component.html
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-student/show-group-work-student.component.html
@@ -1,36 +1,7 @@
-
-
- You have not been paired with a classmate yet. Please check back later.
-
-
-
-
-
-
- account_circle
-
- {{ workgroupInfos[member.id].displayNames }}
-
-
-
- (Waiting for response...)
-
-
-
-
-
-
-
-