Skip to content

Commit 7741e6a

Browse files
hirokiterashimabreity
hirokiterashima
and
breity
authored
feat(Discussion): Teacher can show/hide responses (#2296)
Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>
1 parent 1838644 commit 7741e6a

11 files changed

Lines changed: 396 additions & 206 deletions

‎src/assets/wise5/components/discussion/class-response-teacher/class-response-teacher.component.html‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<mat-card appearance="outlined" class="class-response">
2+
<div class="p-2 w-full">
3+
<div class="flex flex-row items-center gap-2">
4+
<mat-icon
5+
class="mat-48"
6+
style="color: {{ getAvatarColorForWorkgroupId(response.workgroupId) }};"
7+
>
8+
account_circle
9+
</mat-icon>
10+
<div>
11+
<div class="strong">{{ response.usernames }}</div>
12+
<div class="mat-caption secondary-text">
13+
<save-time-message
14+
[saveTime]="adjustClientSaveTime(response.serverSaveTime)"
15+
[timeOnly]="true"
16+
tooltipPosition="after"
17+
/>
18+
</div>
19+
</div>
20+
<span class="flex-grow"></span>
21+
@if (
22+
response.latestInappropriateFlagAnnotation == null ||
23+
response.latestInappropriateFlagAnnotation.data == null ||
24+
response.latestInappropriateFlagAnnotation.data.action != 'Delete'
25+
) {
26+
<button
27+
matIconButton
28+
(click)="hidePost(response)"
29+
matTooltip="Hide from students"
30+
matTooltipPosition="above"
31+
i18n-matTooltip
32+
>
33+
<mat-icon>visibility_on</mat-icon>
34+
</button>
35+
} @else if (
36+
response.latestInappropriateFlagAnnotation != null &&
37+
response.latestInappropriateFlagAnnotation.data.action === 'Delete'
38+
) {
39+
<button
40+
matIconButton
41+
(click)="showPost(response)"
42+
matTooltip="Show to students"
43+
matTooltipPosition="above"
44+
i18n-matTooltip
45+
>
46+
<mat-icon color="warn">visibility_off</mat-icon>
47+
</button>
48+
}
49+
</div>
50+
<div class="post" [innerHTML]="response.studentData.responseTextHTML"></div>
51+
@for (attachment of response.studentData.attachments; track attachment) {
52+
<img [src]="attachment.iconURL" i18n-alt alt="Post attachment" class="attachment" />
53+
}
54+
</div>
55+
@if (response.replies.length > 0) {
56+
<div class="notice-bg-bg">
57+
@if (mode === 'student' || response.replies.length > 0) {
58+
<mat-divider class="comment-divider" />
59+
}
60+
<div class="comments-header" matSubheader>
61+
@if (response.replies.length === 1) {
62+
<span i18n> Comments ({{ response.replies.length }}) </span>
63+
}
64+
@if (response.replies.length > 1) {
65+
<a [routerLink]="" (click)="toggleExpanded()" class="flex items-center">
66+
<span i18n>Comments ({{ response.replies.length }})</span>
67+
<mat-icon>{{ expanded ? 'expand_less' : 'expand_more' }}</mat-icon>
68+
</a>
69+
}
70+
</div>
71+
<div class="comments">
72+
@for (reply of repliesToShow; track reply) {
73+
<div class="comment" [ngClass]="{ 'animate-show': !isLast }">
74+
<div class="flex flex-row items-center gap-2">
75+
<mat-icon
76+
matListAvatar
77+
class="mat-40"
78+
style="color: {{ getAvatarColorForWorkgroupId(reply.workgroupId) }}"
79+
>
80+
account_circle
81+
</mat-icon>
82+
<div class="flex flex-wrap gap-2 items-center">
83+
<span class="strong">{{ reply.usernames }}</span>
84+
<save-time-message
85+
[saveTime]="adjustClientSaveTime(reply.serverSaveTime)"
86+
[timeOnly]="true"
87+
tooltipPosition="after"
88+
/>
89+
</div>
90+
<span class="flex-grow"></span>
91+
@if (
92+
(response.latestInappropriateFlagAnnotation == null ||
93+
response.latestInappropriateFlagAnnotation.data.action !== 'Delete') &&
94+
(reply.latestInappropriateFlagAnnotation == null ||
95+
reply.latestInappropriateFlagAnnotation.data.action != 'Delete')
96+
) {
97+
<button
98+
matIconButton
99+
(click)="hidePost(reply)"
100+
matTooltip="Hide from students"
101+
matTooltipPosition="above"
102+
i18n-matTooltip
103+
>
104+
<mat-icon>visibility_on</mat-icon>
105+
</button>
106+
} @else if (
107+
response.latestInappropriateFlagAnnotation != null &&
108+
response.latestInappropriateFlagAnnotation.data.action === 'Delete'
109+
) {
110+
<mat-icon
111+
tabindex="0"
112+
color="warn"
113+
matTooltip="Parent post is hidden, so this comment is also hidden"
114+
matTooltipPosition="above"
115+
i18n-matTooltip
116+
>visibility_off</mat-icon
117+
>
118+
} @else if (
119+
reply.latestInappropriateFlagAnnotation != null &&
120+
reply.latestInappropriateFlagAnnotation.data.action === 'Delete'
121+
) {
122+
<button
123+
matIconButton
124+
(click)="showPost(reply)"
125+
matTooltip="Show to students"
126+
matTooltipPosition="above"
127+
i18n-matTooltip
128+
>
129+
<mat-icon color="warn">visibility_off</mat-icon>
130+
</button>
131+
}
132+
</div>
133+
<div class="pt-1" [innerHTML]="reply.studentData.responseHTML"></div>
134+
</div>
135+
}
136+
</div>
137+
</div>
138+
}
139+
</mat-card>

‎src/assets/wise5/components/discussion/class-response-teacher/class-response-teacher.component.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
2+
import { getAvatarColorForWorkgroupId } from '../../../common/workgroup/workgroup';
3+
import { CdkTextareaAutosize, TextFieldModule } from '@angular/cdk/text-field';
4+
import { SaveTimeMessageComponent } from '../../../common/save-time-message/save-time-message.component';
5+
import { RouterModule } from '@angular/router';
6+
import { MatDividerModule } from '@angular/material/divider';
7+
import { MatCardModule } from '@angular/material/card';
8+
import { MatButtonModule } from '@angular/material/button';
9+
import { FormsModule } from '@angular/forms';
10+
import { CommonModule } from '@angular/common';
11+
import { MatIconModule } from '@angular/material/icon';
12+
import { MatTooltipModule } from '@angular/material/tooltip';
13+
import { ClassResponse } from '../class-response/class-response.component';
14+
15+
@Component({
16+
encapsulation: ViewEncapsulation.None,
17+
imports: [
18+
CdkTextareaAutosize,
19+
CommonModule,
20+
FormsModule,
21+
MatButtonModule,
22+
MatCardModule,
23+
MatDividerModule,
24+
MatIconModule,
25+
MatTooltipModule,
26+
RouterModule,
27+
SaveTimeMessageComponent,
28+
TextFieldModule
29+
],
30+
selector: 'class-response-teacher',
31+
styleUrl: '../class-response/class-response.component.scss',
32+
templateUrl: './class-response-teacher.component.html'
33+
})
34+
export class ClassResponseTeacherComponent extends ClassResponse {
35+
@Output() hidePostEvent: any = new EventEmitter();
36+
@Input() isDisabled: boolean;
37+
@Input() mode: any;
38+
@Input() numReplies: number;
39+
@Input() response: any;
40+
@Output() showPostEvent: any = new EventEmitter();
41+
@Output() submitButtonClicked: any = new EventEmitter();
42+
43+
protected expanded: boolean = false;
44+
protected repliesToShow: any[] = [];
45+
46+
protected hidePost(componentState: any): void {
47+
if (confirm($localize`Are you sure you want to hide this content?`)) {
48+
this.hidePostEvent.emit(componentState);
49+
}
50+
}
51+
52+
protected showPost(componentState: any): void {
53+
if (confirm($localize`Are you sure you want to show this content?`)) {
54+
this.showPostEvent.emit(componentState);
55+
}
56+
}
57+
}

‎src/assets/wise5/components/discussion/class-response/class-response.component.html‎

Lines changed: 0 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -22,44 +22,6 @@
2222
@for (attachment of response.studentData.attachments; track attachment) {
2323
<img [src]="attachment.iconURL" i18n-alt alt="Post attachment" class="attachment" />
2424
}
25-
@if (mode === 'grading' || mode === 'gradingRevision') {
26-
<div class="flex justify-end items-center">
27-
<br />
28-
@if (
29-
response.latestInappropriateFlagAnnotation == null ||
30-
response.latestInappropriateFlagAnnotation.data == null ||
31-
response.latestInappropriateFlagAnnotation.data.action != 'Delete'
32-
) {
33-
<button
34-
mat-stroked-button
35-
color="warn"
36-
(click)="delete(response)"
37-
matTooltip="Delete this post so students will not see it"
38-
matTooltipPosition="above"
39-
i18n-matTooltip
40-
i18n
41-
>
42-
Delete
43-
</button>
44-
}
45-
@if (
46-
response.latestInappropriateFlagAnnotation != null &&
47-
response.latestInappropriateFlagAnnotation.data.action === 'Delete'
48-
) {
49-
<button
50-
mat-stroked-button
51-
color="warn"
52-
(click)="undoDelete(response)"
53-
matTooltip="Make this post viewable to students"
54-
matTooltipPosition="above"
55-
i18n-matTooltip
56-
i18n
57-
>
58-
Undo Delete
59-
</button>
60-
}
61-
</div>
62-
}
6325
</div>
6426
@if (response.replies.length > 0) {
6527
<div class="notice-bg-bg">
@@ -98,58 +60,6 @@
9860
</div>
9961
</div>
10062
<div class="pt-1" [innerHTML]="reply.studentData.responseHTML"></div>
101-
@if (mode === 'grading' || mode === 'gradingRevision') {
102-
<div class="flex justify-end items-center">
103-
@if (
104-
(response.latestInappropriateFlagAnnotation == null ||
105-
response.latestInappropriateFlagAnnotation.data.action !== 'Delete') &&
106-
(reply.latestInappropriateFlagAnnotation == null ||
107-
reply.latestInappropriateFlagAnnotation.data.action != 'Delete')
108-
) {
109-
<button
110-
mat-stroked-button
111-
color="warn"
112-
(click)="delete(reply)"
113-
i18n-matTooltip
114-
matTooltip="Delete this post so students will not see it"
115-
matTooltipPosition="above"
116-
i18n
117-
>
118-
Delete
119-
</button>
120-
}
121-
@if (
122-
response.latestInappropriateFlagAnnotation != null &&
123-
response.latestInappropriateFlagAnnotation.data.action === 'Delete'
124-
) {
125-
<span
126-
color="warn"
127-
i18n-matTooltip
128-
matTooltip="Students will not see this post"
129-
matTooltipPosition="above"
130-
i18n
131-
>
132-
Parent Deleted
133-
</span>
134-
}
135-
@if (
136-
reply.latestInappropriateFlagAnnotation != null &&
137-
reply.latestInappropriateFlagAnnotation.data.action === 'Delete'
138-
) {
139-
<button
140-
mat-stroked-button
141-
color="warn"
142-
(click)="undoDelete(reply)"
143-
i18n-matTooltip
144-
matTooltip="Make this post viewable to students"
145-
matTooltipPosition="above"
146-
i18n
147-
>
148-
Undo Delete
149-
</button>
150-
}
151-
</div>
152-
}
15363
</div>
15464
}
15565
</div>

‎src/assets/wise5/components/discussion/class-response/class-response.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,4 +74,8 @@
7474
outline: none;
7575
}
7676
}
77+
78+
.mat-icon {
79+
vertical-align: top;
80+
}
7781
}

‎src/assets/wise5/components/discussion/class-response/class-response.component.ts‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,13 @@ import { MatTooltipModule } from '@angular/material/tooltip';
3939
templateUrl: 'class-response.component.html'
4040
})
4141
export class ClassResponse {
42-
@Output() deleteButtonClicked: any = new EventEmitter();
4342
protected expanded: boolean = false;
4443
@Input() isDisabled: boolean;
4544
@Input() mode: any;
4645
@Input() numReplies: number;
4746
protected repliesToShow: any[] = [];
4847
@Input() response: any;
4948
@Output() submitButtonClicked: any = new EventEmitter();
50-
@Output() undoDeleteButtonClicked: any = new EventEmitter();
5149
private urlMatcher: any =
5250
/((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?)/g;
5351

@@ -123,18 +121,6 @@ export class ClassResponse {
123121
return responseText.substring(0, responseText.length - 1);
124122
}
125123

126-
protected delete(componentState: any): void {
127-
if (confirm($localize`Are you sure you want to delete this post?`)) {
128-
this.deleteButtonClicked.emit(componentState);
129-
}
130-
}
131-
132-
protected undoDelete(componentState: any): void {
133-
if (confirm($localize`Are you sure you want to show this post?`)) {
134-
this.undoDeleteButtonClicked.emit(componentState);
135-
}
136-
}
137-
138124
protected toggleExpanded(): void {
139125
this.expanded = !this.expanded;
140126
if (this.expanded) {

‎src/assets/wise5/components/discussion/discussion-show-work/discussion-show-work.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
[response]="componentState"
66
[numReplies]="componentState.replies.length"
77
[mode]="'grading'"
8-
(deleteButtonClicked)="hidePost($event)"
9-
(undoDeleteButtonClicked)="showPost($event)"
8+
(hidePostEvent)="hidePost($event)"
9+
(showPostEvent)="showPost($event)"
1010
[isDisabled]="true"
1111
class="post"
1212
/>

‎src/assets/wise5/components/discussion/discussion-student/discussion-student.component.html‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@if (mode !== 'summary') {
2-
<component-header [component]="component" />
3-
}
1+
<component-header [component]="component" />
42
<div class="discussion-content">
53
@if (mode === 'student') {
64
<component-annotations
@@ -98,8 +96,6 @@
9896
[numReplies]="componentState.replies.length"
9997
(submitButtonClicked)="handleSubmitButtonClicked(componentState)"
10098
[mode]="mode"
101-
(deleteButtonClicked)="deleteButtonClicked($event)"
102-
(undoDeleteButtonClicked)="undoDeleteButtonClicked($event)"
10399
[isDisabled]="isDisabled"
104100
class="post"
105101
/>
@@ -112,8 +108,6 @@
112108
[numReplies]="componentState.replies.length"
113109
(submitButtonClicked)="handleSubmitButtonClicked(componentState)"
114110
[mode]="mode"
115-
(deleteButtonClicked)="deleteButtonClicked($event)"
116-
(undoDeleteButtonClicked)="undoDeleteButtonClicked($event)"
117111
[isDisabled]="isDisabled"
118112
class="post"
119113
/>
@@ -127,8 +121,6 @@
127121
[numReplies]="componentState.replies.length"
128122
(submitButtonClicked)="handleSubmitButtonClicked(componentState)"
129123
[mode]="mode"
130-
(deleteButtonClicked)="deleteButtonClicked($event)"
131-
(undoDeleteButtonClicked)="undoDeleteButtonClicked($event)"
132124
[isDisabled]="isDisabled"
133125
class="post"
134126
style="display: block"

0 commit comments

Comments
 (0)