Skip to content

Commit 2ae10df

Browse files
hirokiterashimabreity
hirokiterashima
and
breity
authored
feat(Idea Summary): Dialog to view more responses (#2301)
Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>
1 parent 9c5c9ad commit 2ae10df

7 files changed

Lines changed: 97 additions & 21 deletions

File tree

‎src/assets/wise5/directives/teacher-summary-display/idea-summary-dialog/idea-summary-dialog.component.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<h2 mat-dialog-title>
2+
<span i18n>Responses for "{{ data.idea.text }}"</span> ({{ data.idea.count }})
3+
</h2>
4+
<mat-dialog-content class="dialog-content-scroll @container">
5+
<div class="@2xl:columns-2 @4xl:columns-3 gap-2">
6+
@for (response of data.responses; track response.timestamp) {
7+
<div class="rounded-md bg-white p-2 mb-2 break-inside-avoid-column">
8+
<div class="font-normal flex gap-2 mb-2">
9+
<mat-icon class="shrink-0" [style.color]="response.avatarColor">account_circle</mat-icon>
10+
<span class="mt-0.5">{{ response.usernames }}</span>
11+
</div>
12+
<div>"{{ response.text }}"</div>
13+
</div>
14+
}
15+
</div>
16+
</mat-dialog-content>
17+
<mat-dialog-actions align="end">
18+
<button mat-button mat-dialog-close cdkFocusRegionstart i18n>Close</button>
19+
</mat-dialog-actions>

‎src/assets/wise5/directives/teacher-summary-display/idea-summary-dialog/idea-summary-dialog.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component, Inject } from '@angular/core';
2+
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
3+
import { MatIconModule } from '@angular/material/icon';
4+
import { MatButtonModule } from '@angular/material/button';
5+
6+
@Component({
7+
imports: [MatButtonModule, MatDialogModule, MatIconModule],
8+
templateUrl: './idea-summary-dialog.component.html'
9+
})
10+
export class IdeaSummaryDialogComponent {
11+
constructor(@Inject(MAT_DIALOG_DATA) public data: { idea: any; responses: any[] }) {}
12+
}

‎src/assets/wise5/directives/teacher-summary-display/idea-summary/idea-summary.component.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,13 @@
1515
</mat-panel-description>
1616
</mat-expansion-panel-header>
1717
<div class="text-sm bg-white p-1 rounded">
18-
<span i18n>Sample responses:</span>
18+
<div class="flex flex-wrap justify-between gap-2">
19+
<span i18n>Sample responses:</span>
20+
<a (click)="showAllResponses()" i18n>View all</a>
21+
</div>
1922
<ul>
20-
@for (response of responses; track response.timestamp) {
21-
<li i18n>"{{ response.text }}"</li>
23+
@for (response of sampleResponses; track response.timestamp) {
24+
<li>"{{ response.text }}"</li>
2225
}
2326
</ul>
2427
</div>

‎src/assets/wise5/directives/teacher-summary-display/idea-summary/idea-summary.component.spec.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@ describe('IdeaSummaryComponent', () => {
5959
count: 5,
6060
color: 'red'
6161
};
62+
component['workgroups'] = [
63+
{ workgroupId: 1, displayNames: 'student1' },
64+
{ workgroupId: 2, displayNames: 'student2' }
65+
];
6266
});
6367

6468
describe('initial state', () => {

‎src/assets/wise5/directives/teacher-summary-display/idea-summary/idea-summary.component.ts‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import { Component, Input, ViewEncapsulation } from '@angular/core';
1+
import { Component, inject, Input, ViewEncapsulation } from '@angular/core';
22
import { MatIcon } from '@angular/material/icon';
33
import { TeacherSummaryDisplayComponent } from '../teacher-summary-display.component';
44
import { firstValueFrom } from 'rxjs';
55
import { ComponentState } from '../../../../../app/domain/componentState';
66
import { MatExpansionModule } from '@angular/material/expansion';
7+
import { MatDialog } from '@angular/material/dialog';
8+
import { IdeaSummaryDialogComponent } from '../idea-summary-dialog/idea-summary-dialog.component';
9+
import { getAvatarColorForWorkgroupId } from '../../../common/workgroup/workgroup';
710

811
interface IdeaCategory {
912
id: string;
@@ -15,6 +18,7 @@ interface IdeaCategory {
1518
interface Response {
1619
text: string;
1720
timestamp: number;
21+
usernames: string;
1822
}
1923

2024
@Component({
@@ -25,12 +29,21 @@ interface Response {
2529
templateUrl: './idea-summary.component.html'
2630
})
2731
export class IdeaSummaryComponent extends TeacherSummaryDisplayComponent {
32+
private dialog = inject(MatDialog);
33+
2834
@Input() componentId: string;
2935
@Input() idea: IdeaCategory;
3036
@Input() nodeId: string;
3137

3238
protected expanded: boolean = false;
3339
protected responses: Response[] = [];
40+
protected sampleResponses: Response[] = [];
41+
private workgroups: any[] = [];
42+
43+
ngOnInit(): void {
44+
super.ngOnInit();
45+
this.workgroups = this.configService.getClassmateUserInfos();
46+
}
3447

3548
protected renderDisplay(): void {
3649
super.renderDisplay();
@@ -52,9 +65,7 @@ export class IdeaSummaryComponent extends TeacherSummaryDisplayComponent {
5265
} else if (component.type === 'OpenResponse') {
5366
this.responses = this.getORResponsesWithIdea(states, this.idea.id);
5467
}
55-
if (this.responses.length > 2) {
56-
this.responses = this.responses.slice(0, 2); // only show 2 responses max
57-
}
68+
this.sampleResponses = this.responses.slice(0, 2); // only show 2 responses max
5869
}
5970

6071
private getDGResponsesWithIdea(states: ComponentState[], ideaId: string): Response[] {
@@ -66,7 +77,10 @@ export class IdeaSummaryComponent extends TeacherSummaryDisplayComponent {
6677
if (response?.ideas?.some((idea) => idea.detected && idea.name === ideaId)) {
6778
// computer responses contain ideas detected, but we want the actual student response
6879
// which is before the computer response
69-
responsesWithIdea.push(responses[index - 1]);
80+
const studentResponse = responses[index - 1];
81+
studentResponse.usernames = this.getDisplayNames(state.workgroupId);
82+
studentResponse.avatarColor = getAvatarColorForWorkgroupId(state.workgroupId);
83+
responsesWithIdea.push(studentResponse);
7084
workgroupsProcessed.push(state.workgroupId);
7185
}
7286
});
@@ -84,7 +98,23 @@ export class IdeaSummaryComponent extends TeacherSummaryDisplayComponent {
8498
.filter((state) => annotations.some((annotation) => annotation.studentWorkId === state.id))
8599
.map((state) => ({
86100
text: state.studentData.response,
87-
timestamp: state.clientSaveTime
101+
timestamp: state.clientSaveTime,
102+
usernames: this.getDisplayNames(state.workgroupId),
103+
avatarColor: getAvatarColorForWorkgroupId(state.workgroupId)
88104
}));
89105
}
106+
107+
private getDisplayNames(workgroupId: number): string {
108+
return this.workgroups.find((workgroup) => workgroup.workgroupId === workgroupId).displayNames;
109+
}
110+
111+
protected showAllResponses(): void {
112+
this.dialog.open(IdeaSummaryDialogComponent, {
113+
data: {
114+
idea: this.idea,
115+
responses: this.responses
116+
},
117+
panelClass: ['app-styles', 'dialog-lg']
118+
});
119+
}
90120
}

‎src/assets/wise5/services/configService.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -241,13 +241,10 @@ export class ConfigService {
241241
return null;
242242
}
243243

244-
setClassmateDisplayNames() {
245-
let classmateUserInfos = this.getClassmateUserInfos();
246-
if (classmateUserInfos) {
247-
for (let workgroup of classmateUserInfos) {
248-
workgroup.displayNames = this.getDisplayUsernamesByWorkgroupId(workgroup.workgroupId);
249-
}
250-
}
244+
private setClassmateDisplayNames(): void {
245+
this.getClassmateUserInfos()?.forEach((workgroup) => {
246+
workgroup.displayNames = this.getDisplayUsernamesByWorkgroupId(workgroup.workgroupId);
247+
});
251248
}
252249

253250
/**

‎src/messages.xlf‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,10 @@
349349
<context context-type="sourcefile">src/assets/wise5/directives/generate-image-dialog/generate-image-dialog.component.html</context>
350350
<context context-type="linenumber">13,19</context>
351351
</context-group>
352+
<context-group purpose="location">
353+
<context context-type="sourcefile">src/assets/wise5/directives/teacher-summary-display/idea-summary-dialog/idea-summary-dialog.component.html</context>
354+
<context context-type="linenumber">18,20</context>
355+
</context-group>
352356
<context-group purpose="location">
353357
<context context-type="sourcefile">src/assets/wise5/vle/notifications-dialog/notifications-dialog.component.html</context>
354358
<context context-type="linenumber">74,76</context>
@@ -14646,7 +14650,7 @@ The branches will be removed but the steps will remain in the unit.</source>
1464614650
</context-group>
1464714651
<context-group purpose="location">
1464814652
<context context-type="sourcefile">src/assets/wise5/services/configService.ts</context>
14649-
<context context-type="linenumber">563</context>
14653+
<context context-type="linenumber">560</context>
1465014654
</context-group>
1465114655
</trans-unit>
1465214656
<trans-unit id="5008745968518267369" datatype="html">
@@ -23187,18 +23191,25 @@ If this problem continues, let your teacher know and move on to the next activit
2318723191
<context context-type="linenumber">27,32</context>
2318823192
</context-group>
2318923193
</trans-unit>
23194+
<trans-unit id="7967732284579375900" datatype="html">
23195+
<source>Responses for &quot;<x id="INTERPOLATION" equiv-text="{{ data.idea.text }}"/>&quot;</source>
23196+
<context-group purpose="location">
23197+
<context context-type="sourcefile">src/assets/wise5/directives/teacher-summary-display/idea-summary-dialog/idea-summary-dialog.component.html</context>
23198+
<context context-type="linenumber">2</context>
23199+
</context-group>
23200+
</trans-unit>
2319023201
<trans-unit id="3690771652722848805" datatype="html">
2319123202
<source>Sample responses:</source>
2319223203
<context-group purpose="location">
2319323204
<context context-type="sourcefile">src/assets/wise5/directives/teacher-summary-display/idea-summary/idea-summary.component.html</context>
23194-
<context context-type="linenumber">18,20</context>
23205+
<context context-type="linenumber">19,21</context>
2319523206
</context-group>
2319623207
</trans-unit>
23197-
<trans-unit id="4302009595680225393" datatype="html">
23198-
<source>&quot;<x id="INTERPOLATION" equiv-text="{{ response.text }}"/>&quot;</source>
23208+
<trans-unit id="2734780694152757859" datatype="html">
23209+
<source>View all</source>
2319923210
<context-group purpose="location">
2320023211
<context context-type="sourcefile">src/assets/wise5/directives/teacher-summary-display/idea-summary/idea-summary.component.html</context>
23201-
<context context-type="linenumber">21,23</context>
23212+
<context context-type="linenumber">20,23</context>
2320223213
</context-group>
2320323214
</trans-unit>
2320423215
<trans-unit id="1563518905064973119" datatype="html">

0 commit comments

Comments
 (0)