refactor: show consecutive scorm comments together

thoth-tech · Jun 18, 2024 · a2e8a9c · a2e8a9c
1 parent 20da042
commit a2e8a9c
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 32 deletions.
diff --git a/src/app/api/models/task-comment/scorm-comment.ts b/src/app/api/models/task-comment/scorm-comment.ts
@@ -3,6 +3,9 @@ import {Task, TaskComment, TestAttempt} from '../doubtfire-model';
 export class ScormComment extends TaskComment {
   testAttempt: TestAttempt;
 
+  // UI rendering data
+  lastInScormSeries: boolean = false;
+
   constructor(task: Task) {
     super(task);
   }

diff --git a/src/app/api/models/task.ts b/src/app/api/models/task.ts
@@ -17,6 +17,7 @@ import {
   TaskSimilarityService,
   TestAttempt,
   TestAttemptService,
+  ScormComment,
 } from './doubtfire-model';
 import {Grade} from './grade';
 import {LOCALE_ID} from '@angular/core';
@@ -385,6 +386,14 @@ export class Task extends Entity {
       if (comments[i].replyToId) {
         comments[i].originalComment = comments.find((tc) => tc.id === comments[i].replyToId);
       }
+
+      // Scorm series
+      if (comments[i].commentType === 'scorm') {
+        comments[i].firstInSeries = i === 0 || comments[i - 1].commentType !== 'scorm';
+        (comments[i] as ScormComment).lastInScormSeries =
+          i + 1 === comments.length || comments[i + 1]?.commentType !== 'scorm';
+        if (!comments[i].firstInSeries) comments[i].shouldShowTimestamp = false;
+      }
     }
 
     comments[comments.length - 1].shouldShowAvatar = true;

diff --git a/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.html b/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.html
@@ -1,24 +1,32 @@
-<div class="flex-row justify-evenly items-center">
-  <div class="flex-column justify-around items-center">
-    <div>
-      <hr class="hr-text" data-content="Knowledge Check Summary" />
-      <div class="markdown-to-html my-1.5" [innerHTML]="comment.text"></div>
-      <div class="flex-row">
-        <button
-          mat-button
-          (click)="reviewScormTest()"
-          [hidden]="!user.isStaff && !task.definition.scormAllowReview"
-        >
-          Review test
-        </button>
-        <button mat-button (click)="passScormAttempt()" [hidden]="!canOverridePass">
-          Pass attempt
-        </button>
-        <button mat-button (click)="deleteScormAttempt()" [hidden]="!user.isStaff">
-          Delete attempt
-        </button>
-      </div>
-      <hr class="hr-fade" />
-    </div>
-  </div>
+<hr class="hr-text" data-content="Knowledge Check Summary" [hidden]="!comment.firstInSeries" />
+<div class="flex flex-row items-center">
+  <button
+    mat-button
+    class="mr-4 h-12 flex-shrink-0"
+    (click)="reviewScormTest()"
+    [hidden]="!user.isStaff && !task.definition.scormAllowReview"
+  >
+    Review
+  </button>
+  <div class="markdown-to-html flex-grow" [innerHTML]="comment.text"></div>
+  <button
+    #menuState="matMenuTrigger"
+    mat-icon-button
+    class="p-0 h-12 flex-shrink-0"
+    [matMenuTriggerFor]="menu"
+    [hidden]="!user.isStaff"
+  >
+    <mat-icon>more_vert</mat-icon>
+  </button>
+  <mat-menu #menu="matMenu">
+    <button
+      mat-menu-item
+      (click)="passScormAttempt()"
+      [hidden]="this.comment.testAttempt.successStatus"
+    >
+      Pass attempt
+    </button>
+    <button mat-menu-item (click)="deleteScormAttempt()">Delete attempt</button>
+  </mat-menu>
 </div>
+<hr class="hr-fade" [hidden]="!comment.lastInScormSeries" />
diff --git a/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.scss b/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.scss
@@ -1,7 +1,3 @@
-div {
-  width: 100%;
-}
-
 p {
   color: #2c2c2c;
   text-align: center;
@@ -14,7 +10,7 @@ hr {
 .hr-fade {
   background: linear-gradient(to right, transparent, #9696969d, transparent);
   width: 100%;
-  margin-top: 1px;
+  margin-top: 6px;
 }
 
 .hr-text {

diff --git a/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.ts b/src/app/tasks/task-comments-viewer/scorm-comment/scorm-comment.component.ts
@@ -27,10 +27,6 @@ export class ScormCommentComponent {
     this.user = this.userService.currentUser;
   }
 
-  get canOverridePass(): boolean {
-    return this.user.isStaff && !this.comment.testAttempt.successStatus;
-  }
-
   reviewScormTest() {
     window.open(
       `#/task_def_id/${this.task.taskDefId}/scorm-player/review/${this.comment.testAttempt.id}`,