Skip to content

Commit 0346081

Browse files
breitybreity
authored
feat(Discussion): Hide hidden response content in teacher summary (#2308)
1 parent 192a2f5 commit 0346081

5 files changed

Lines changed: 436 additions & 96 deletions

File tree

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

Lines changed: 101 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,30 @@
11
<mat-card appearance="outlined" class="class-response">
2+
@if (isHidden(response)) {
3+
<details>
4+
<summary class="secondary-text notice-bg-bg">
5+
<span class="flex-grow" i18n>This post is hidden from students.</span>
6+
<span class="details-closed" i18n>(tap to view)</span>
7+
<span class="details-open hidden" i18n>(tap to hide)</span>
8+
<button
9+
matIconButton
10+
(click)="showPost(response); $event.preventDefault()"
11+
matTooltip="Show to students"
12+
matTooltipPosition="above"
13+
i18n-matTooltip
14+
>
15+
<mat-icon color="warn">visibility_off</mat-icon>
16+
</button>
17+
</summary>
18+
<ng-container *ngTemplateOutlet="postContent" />
19+
<ng-container *ngTemplateOutlet="commentsSection; context: { $implicit: true }" />
20+
</details>
21+
} @else {
22+
<ng-container *ngTemplateOutlet="postContent; context: { $implicit: true }" />
23+
<ng-container *ngTemplateOutlet="commentsSection" />
24+
}
25+
</mat-card>
26+
27+
<ng-template #postContent let-showHideButton>
228
<div class="p-2 w-full">
329
<div class="flex flex-row items-center gap-2">
430
<mat-icon
@@ -17,12 +43,8 @@
1743
/>
1844
</div>
1945
</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-
) {
46+
@if (showHideButton) {
47+
<span class="flex-grow"></span>
2648
<button
2749
matIconButton
2850
(click)="hidePost(response)"
@@ -32,31 +54,19 @@
3254
>
3355
<mat-icon>visibility_on</mat-icon>
3456
</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>
4857
}
4958
</div>
5059
<div class="post" [innerHTML]="response.studentData.responseTextHTML"></div>
5160
@for (attachment of response.studentData.attachments; track attachment) {
5261
<img [src]="attachment.iconURL" i18n-alt alt="Post attachment" class="attachment" />
5362
}
5463
</div>
64+
</ng-template>
65+
66+
<ng-template #commentsSection let-parentHidden>
5567
@if (response.replies.length > 0) {
5668
<div class="notice-bg-bg">
57-
@if (mode === 'student' || response.replies.length > 0) {
58-
<mat-divider class="comment-divider" />
59-
}
69+
<mat-divider class="comment-divider" />
6070
<div class="comments-header" matSubheader>
6171
@if (response.replies.length === 1) {
6272
<span i18n> Comments ({{ response.replies.length }}) </span>
@@ -71,69 +81,78 @@
7181
<div class="comments">
7282
@for (reply of repliesToShow; track reply) {
7383
<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) }}"
84+
@if (parentHidden || isHidden(reply)) {
85+
<details
86+
class="reply-details rounded-md notice-bg-border border-1 open:border-transparent open:pb-2"
7987
>
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>
88+
<summary class="secondary-text notice-bg-bg rounded-md" [class.py-2]="parentHidden">
89+
@if (parentHidden) {
90+
<span class="flex-grow" i18n
91+
>Comment hidden because parent post is hidden.</span
92+
>
93+
} @else {
94+
<span class="flex-grow" i18n>This comment is hidden from students.</span>
95+
}
96+
<span class="details-closed" i18n>(tap to view)</span>
97+
<span class="details-open hidden" i18n>(tap to hide)</span>
98+
@if (!parentHidden && isHidden(reply)) {
99+
<button
100+
matIconButton
101+
(click)="showPost(reply); $event.preventDefault()"
102+
matTooltip="Show to students"
103+
matTooltipPosition="above"
104+
i18n-matTooltip
105+
>
106+
<mat-icon color="warn">visibility_off</mat-icon>
107+
</button>
108+
}
109+
</summary>
110+
<ng-container *ngTemplateOutlet="replyContent; context: { $implicit: reply }" />
111+
</details>
112+
} @else {
113+
<ng-container
114+
*ngTemplateOutlet="
115+
replyContent;
116+
context: { $implicit: reply, showHideButton: true }
117+
"
118+
/>
119+
}
134120
</div>
135121
}
136122
</div>
137123
</div>
138124
}
139-
</mat-card>
125+
</ng-template>
126+
127+
<ng-template #replyContent let-reply let-showHideButton="showHideButton">
128+
<div class="flex flex-row items-center gap-2 pt-1">
129+
<mat-icon
130+
matListAvatar
131+
class="mat-40"
132+
style="color: {{ getAvatarColorForWorkgroupId(reply.workgroupId) }}"
133+
>
134+
account_circle
135+
</mat-icon>
136+
<div class="flex flex-wrap gap-2 items-center">
137+
<span class="strong">{{ reply.usernames }}</span>
138+
<save-time-message
139+
[saveTime]="adjustClientSaveTime(reply.serverSaveTime)"
140+
[timeOnly]="true"
141+
tooltipPosition="after"
142+
/>
143+
</div>
144+
@if (showHideButton) {
145+
<span class="flex-grow"></span>
146+
<button
147+
matIconButton
148+
(click)="hidePost(reply)"
149+
matTooltip="Hide from students"
150+
matTooltipPosition="above"
151+
i18n-matTooltip
152+
>
153+
<mat-icon>visibility_on</mat-icon>
154+
</button>
155+
}
156+
</div>
157+
<div class="pt-1" [innerHTML]="reply.studentData.responseHTML"></div>
158+
</ng-template>

0 commit comments

Comments
 (0)