feat(Discussion): Teacher can show/hide responses

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

@@ -0,0 +1,139 @@
+<mat-card appearance="outlined" class="class-response">
+  <div class="p-2 w-full">
+    <div class="flex flex-row items-center gap-2">
+      <mat-icon
+        class="mat-48"
+        style="color: {{ getAvatarColorForWorkgroupId(response.workgroupId) }};"
+      >
+        account_circle
+      </mat-icon>
+      <div>
+        <div class="strong">{{ response.usernames }}</div>
+        <div class="mat-caption secondary-text">
+          <save-time-message
+            [saveTime]="adjustClientSaveTime(response.serverSaveTime)"
+            [timeOnly]="true"
+            tooltipPosition="after"
+          />
+        </div>
+      </div>
+      <span class="flex-grow"></span>
+      @if (
+        response.latestInappropriateFlagAnnotation == null ||
+        response.latestInappropriateFlagAnnotation.data == null ||
+        response.latestInappropriateFlagAnnotation.data.action != 'Delete'
+      ) {
+        <button
+          matIconButton
+          (click)="hidePost(response)"
+          matTooltip="Hide from students"
+          matTooltipPosition="above"
+          i18n-matTooltip
+        >
+          <mat-icon>visibility_on</mat-icon>
+        </button>
+      } @else if (
+        response.latestInappropriateFlagAnnotation != null &&
+        response.latestInappropriateFlagAnnotation.data.action === 'Delete'
+      ) {
+        <button
+          matIconButton
+          (click)="showPost(response)"
+          matTooltip="Show to students"
+          matTooltipPosition="above"
+          i18n-matTooltip
+        >
+          <mat-icon color="warn">visibility_off</mat-icon>
+        </button>
+      }
+    </div>
+    <div class="post" [innerHTML]="response.studentData.responseTextHTML"></div>
+    @for (attachment of response.studentData.attachments; track attachment) {
+      <img [src]="attachment.iconURL" i18n-alt alt="Post attachment" class="attachment" />
+    }
+  </div>
+  @if (response.replies.length > 0) {
+    <div class="notice-bg-bg">
+      @if (mode === 'student' || response.replies.length > 0) {
+        <mat-divider class="comment-divider" />
+      }
+      <div class="comments-header" matSubheader>
+        @if (response.replies.length === 1) {
+          <span i18n> Comments ({{ response.replies.length }}) </span>
+        }
+        @if (response.replies.length > 1) {
+          <a [routerLink]="" (click)="toggleExpanded()" class="flex items-center">
+            <span i18n>Comments ({{ response.replies.length }})</span>
+            <mat-icon>{{ expanded ? 'expand_less' : 'expand_more' }}</mat-icon>
+          </a>
+        }
+      </div>
+      <div class="comments">
+        @for (reply of repliesToShow; track reply) {
+          <div class="comment" [ngClass]="{ 'animate-show': !isLast }">
+            <div class="flex flex-row items-center gap-2">
+              <mat-icon
+                matListAvatar
+                class="mat-40"
+                style="color: {{ getAvatarColorForWorkgroupId(reply.workgroupId) }}"
+              >
+                account_circle
+              </mat-icon>
+              <div class="flex flex-wrap gap-2 items-center">
+                <span class="strong">{{ reply.usernames }}</span>
+                <save-time-message
+                  [saveTime]="adjustClientSaveTime(reply.serverSaveTime)"
+                  [timeOnly]="true"
+                  tooltipPosition="after"
+                />
+              </div>
+              <span class="flex-grow"></span>
+              @if (
+                (response.latestInappropriateFlagAnnotation == null ||
+                  response.latestInappropriateFlagAnnotation.data.action !== 'Delete') &&
+                (reply.latestInappropriateFlagAnnotation == null ||
+                  reply.latestInappropriateFlagAnnotation.data.action != 'Delete')
+              ) {
+                <button
+                  matIconButton
+                  (click)="hidePost(reply)"
+                  matTooltip="Hide from students"
+                  matTooltipPosition="above"
+                  i18n-matTooltip
+                >
+                  <mat-icon>visibility_on</mat-icon>
+                </button>
+              } @else if (
+                response.latestInappropriateFlagAnnotation != null &&
+                response.latestInappropriateFlagAnnotation.data.action === 'Delete'
+              ) {
+                <mat-icon
+                  tabindex="0"
+                  color="warn"
+                  matTooltip="Parent post is hidden, so this comment is also hidden"
+                  matTooltipPosition="above"
+                  i18n-matTooltip
+                  >visibility_off</mat-icon
+                >
+              } @else if (
+                reply.latestInappropriateFlagAnnotation != null &&
+                reply.latestInappropriateFlagAnnotation.data.action === 'Delete'
+              ) {
+                <button
+                  matIconButton
+                  (click)="showPost(reply)"
+                  matTooltip="Show to students"
+                  matTooltipPosition="above"
+                  i18n-matTooltip
+                >
+                  <mat-icon color="warn">visibility_off</mat-icon>
+                </button>
+              }
+            </div>
+            <div class="pt-1" [innerHTML]="reply.studentData.responseHTML"></div>
+          </div>
+        }
+      </div>
+    </div>
+  }
+</mat-card>

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

@@ -0,0 +1,57 @@
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { getAvatarColorForWorkgroupId } from '../../../common/workgroup/workgroup';
+import { CdkTextareaAutosize, TextFieldModule } from '@angular/cdk/text-field';
+import { SaveTimeMessageComponent } from '../../../common/save-time-message/save-time-message.component';
+import { RouterModule } from '@angular/router';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ClassResponse } from '../class-response/class-response.component';
+
+@Component({
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    CdkTextareaAutosize,
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCardModule,
+    MatDividerModule,
+    MatIconModule,
+    MatTooltipModule,
+    RouterModule,
+    SaveTimeMessageComponent,
+    TextFieldModule
+  ],
+  selector: 'class-response-teacher',
+  styleUrl: '../class-response/class-response.component.scss',
+  templateUrl: './class-response-teacher.component.html'
+})
+export class ClassResponseTeacherComponent extends ClassResponse {
+  @Output() hidePostEvent: any = new EventEmitter();
+  @Input() isDisabled: boolean;
+  @Input() mode: any;
+  @Input() numReplies: number;
+  @Input() response: any;
+  @Output() showPostEvent: any = new EventEmitter();
+  @Output() submitButtonClicked: any = new EventEmitter();
+
+  protected expanded: boolean = false;
+  protected repliesToShow: any[] = [];
+
+  protected hidePost(componentState: any): void {
+    if (confirm($localize`Are you sure you want to hide this content?`)) {
+      this.hidePostEvent.emit(componentState);
+    }
+  }
+
+  protected showPost(componentState: any): void {
+    if (confirm($localize`Are you sure you want to show this content?`)) {
+      this.showPostEvent.emit(componentState);
+    }
+  }
+}

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

@@ -22,44 +22,6 @@
     @for (attachment of response.studentData.attachments; track attachment) {
       <img [src]="attachment.iconURL" i18n-alt alt="Post attachment" class="attachment" />
     }
-    @if (mode === 'grading' || mode === 'gradingRevision') {
-      <div class="flex justify-end items-center">
-        <br />
-        @if (
-          response.latestInappropriateFlagAnnotation == null ||
-          response.latestInappropriateFlagAnnotation.data == null ||
-          response.latestInappropriateFlagAnnotation.data.action != 'Delete'
-        ) {
-          <button
-            mat-stroked-button
-            color="warn"
-            (click)="delete(response)"
-            matTooltip="Delete this post so students will not see it"
-            matTooltipPosition="above"
-            i18n-matTooltip
-            i18n
-          >
-            Delete
-          </button>
-        }
-        @if (
-          response.latestInappropriateFlagAnnotation != null &&
-          response.latestInappropriateFlagAnnotation.data.action === 'Delete'
-        ) {
-          <button
-            mat-stroked-button
-            color="warn"
-            (click)="undoDelete(response)"
-            matTooltip="Make this post viewable to students"
-            matTooltipPosition="above"
-            i18n-matTooltip
-            i18n
-          >
-            Undo Delete
-          </button>
-        }
-      </div>
-    }
   </div>
   @if (response.replies.length > 0) {
     <div class="notice-bg-bg">
@@ -98,58 +60,6 @@
               </div>
             </div>
             <div class="pt-1" [innerHTML]="reply.studentData.responseHTML"></div>
-            @if (mode === 'grading' || mode === 'gradingRevision') {
-              <div class="flex justify-end items-center">
-                @if (
-                  (response.latestInappropriateFlagAnnotation == null ||
-                    response.latestInappropriateFlagAnnotation.data.action !== 'Delete') &&
-                  (reply.latestInappropriateFlagAnnotation == null ||
-                    reply.latestInappropriateFlagAnnotation.data.action != 'Delete')
-                ) {
-                  <button
-                    mat-stroked-button
-                    color="warn"
-                    (click)="delete(reply)"
-                    i18n-matTooltip
-                    matTooltip="Delete this post so students will not see it"
-                    matTooltipPosition="above"
-                    i18n
-                  >
-                    Delete
-                  </button>
-                }
-                @if (
-                  response.latestInappropriateFlagAnnotation != null &&
-                  response.latestInappropriateFlagAnnotation.data.action === 'Delete'
-                ) {
-                  <span
-                    color="warn"
-                    i18n-matTooltip
-                    matTooltip="Students will not see this post"
-                    matTooltipPosition="above"
-                    i18n
-                  >
-                    Parent Deleted
-                  </span>
-                }
-                @if (
-                  reply.latestInappropriateFlagAnnotation != null &&
-                  reply.latestInappropriateFlagAnnotation.data.action === 'Delete'
-                ) {
-                  <button
-                    mat-stroked-button
-                    color="warn"
-                    (click)="undoDelete(reply)"
-                    i18n-matTooltip
-                    matTooltip="Make this post viewable to students"
-                    matTooltipPosition="above"
-                    i18n
-                  >
-                    Undo Delete
-                  </button>
-                }
-              </div>
-            }
           </div>
         }
       </div>

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

@@ -74,4 +74,8 @@
       outline: none;
     }
   }
+
+  .mat-icon {
+    vertical-align: top;
+  }
 }

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

@@ -39,15 +39,13 @@ import { MatTooltipModule } from '@angular/material/tooltip';
   templateUrl: 'class-response.component.html'
 })
 export class ClassResponse {
-  @Output() deleteButtonClicked: any = new EventEmitter();
   protected expanded: boolean = false;
   @Input() isDisabled: boolean;
   @Input() mode: any;
   @Input() numReplies: number;
   protected repliesToShow: any[] = [];
   @Input() response: any;
   @Output() submitButtonClicked: any = new EventEmitter();
-  @Output() undoDeleteButtonClicked: any = new EventEmitter();
   private urlMatcher: any =
     /((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?)/g;
 
@@ -123,18 +121,6 @@ export class ClassResponse {
     return responseText.substring(0, responseText.length - 1);
   }
 
-  protected delete(componentState: any): void {
-    if (confirm($localize`Are you sure you want to delete this post?`)) {
-      this.deleteButtonClicked.emit(componentState);
-    }
-  }
-
-  protected undoDelete(componentState: any): void {
-    if (confirm($localize`Are you sure you want to show this post?`)) {
-      this.undoDeleteButtonClicked.emit(componentState);
-    }
-  }
-
   protected toggleExpanded(): void {
     this.expanded = !this.expanded;
     if (this.expanded) {

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

@@ -5,8 +5,8 @@
         [response]="componentState"
         [numReplies]="componentState.replies.length"
         [mode]="'grading'"
-        (deleteButtonClicked)="hidePost($event)"
-        (undoDeleteButtonClicked)="showPost($event)"
+        (hidePostEvent)="hidePost($event)"
+        (showPostEvent)="showPost($event)"
         [isDisabled]="true"
         class="post"
       />

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

@@ -1,6 +1,4 @@
-@if (mode !== 'summary') {
-  <component-header [component]="component" />
-}
+<component-header [component]="component" />
 <div class="discussion-content">
   @if (mode === 'student') {
     <component-annotations
@@ -98,8 +96,6 @@
             [numReplies]="componentState.replies.length"
             (submitButtonClicked)="handleSubmitButtonClicked(componentState)"
             [mode]="mode"
-            (deleteButtonClicked)="deleteButtonClicked($event)"
-            (undoDeleteButtonClicked)="undoDeleteButtonClicked($event)"
             [isDisabled]="isDisabled"
             class="post"
           />
@@ -112,8 +108,6 @@
             [numReplies]="componentState.replies.length"
             (submitButtonClicked)="handleSubmitButtonClicked(componentState)"
             [mode]="mode"
-            (deleteButtonClicked)="deleteButtonClicked($event)"
-            (undoDeleteButtonClicked)="undoDeleteButtonClicked($event)"
             [isDisabled]="isDisabled"
             class="post"
           />
@@ -127,8 +121,6 @@
           [numReplies]="componentState.replies.length"
           (submitButtonClicked)="handleSubmitButtonClicked(componentState)"
           [mode]="mode"
-          (deleteButtonClicked)="deleteButtonClicked($event)"
-          (undoDeleteButtonClicked)="undoDeleteButtonClicked($event)"
           [isDisabled]="isDisabled"
           class="post"
           style="display: block"