feat: display numbas task comments

src/app/api/models/task.ts

@@ -480,6 +480,12 @@ export class Task extends Entity {
     );
   }
 
+  public get numbasEnabled(): boolean {
+    return (
+      this.definition.hasEnabledNumbasTest && this.definition.hasNumbasData
+    );
+  }
+
   public submissionUrl(asAttachment: boolean = false): string {
     return `${AppInjector.get(DoubtfireConstants).API_URL}/projects/${this.project.id}/task_def_id/${
       this.definition.id

src/app/doubtfire-angular.module.ts

@@ -233,6 +233,7 @@ import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-view
 import {NumbasComponent} from './common/numbas-component/numbas-component.component';
 import {NumbasModal} from './common/numbas-component/numbas-modal.component';
 import {NumbasLmsService} from './api/services/numbas-lms.service';
+import {NumbasCommentComponent} from './tasks/task-comments-viewer/numbas-comment/numbas-comment.component';
 
 @NgModule({
   // Components we declare
@@ -333,6 +334,7 @@ import {NumbasLmsService} from './api/services/numbas-lms.service';
     FUsersComponent,
     FUnitsComponent,
     NumbasComponent,
+    NumbasCommentComponent,
   ],
   // Module Imports
   imports: [

src/app/tasks/task-comments-viewer/numbas-comment/numbas-comment.component.html

@@ -0,0 +1,10 @@
+<div fxLayout="row" fxLayoutAlign="space-evenly center">
+  <div fxLayout="column" fxLayoutAlign="space-around center">
+    <div>
+      <hr class="hr-text" data-content="Numbas Summary" />
+      <div class="markdown-to-html" [innerHTML]="comment.text"></div>
+      <button mat-button (click)="reviewNumbasTest()">Review test</button>
+      <hr class="hr-fade" />
+    </div>
+  </div>
+</div>

src/app/tasks/task-comments-viewer/numbas-comment/numbas-comment.component.scss

@@ -0,0 +1,51 @@
+div {
+  width: 100%;
+}
+
+p {
+  color: #2c2c2c;
+  text-align: center;
+}
+
+hr {
+  width: 100%;
+}
+
+.hr-fade {
+  background: linear-gradient(to right, transparent, #9696969d, transparent);
+  width: 100%;
+  margin-top: 1px;
+}
+
+.hr-text {
+  margin: 0;
+  line-height: 1em;
+  position: relative;
+  outline: 0;
+  border: 0;
+  color: black;
+  text-align: center;
+  height: 1.5em;
+  opacity: 0.8;
+  &:before {
+    content: "";
+    background: linear-gradient(to right, transparent, #9696969d, transparent);
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+  }
+  &:after {
+    content: attr(data-content);
+    position: relative;
+    display: inline-block;
+    color: black;
+
+    padding: 0 0.5em;
+    line-height: 1.5em;
+
+    color: #9696969d;
+    background-color: #fff;
+  }
+}

src/app/tasks/task-comments-viewer/numbas-comment/numbas-comment.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Task, TaskComment } from 'src/app/api/models/doubtfire-model';
+import { NumbasModal } from 'src/app/common/numbas-component/numbas-modal.component';
+
+@Component({
+  selector: 'numbas-comment',
+  templateUrl: './numbas-comment.component.html',
+  styleUrls: ['./numbas-comment.component.scss'],
+})
+export class NumbasCommentComponent implements OnInit {
+  @Input() task: Task;
+  @Input() comment: TaskComment;
+
+  constructor(private modalService: NumbasModal) {}
+
+  ngOnInit() {}
+
+  reviewNumbasTest() {
+    this.modalService.show(this.task, 'review');
+  }
+}

src/app/tasks/task-comments-viewer/task-comments-viewer.component.html

@@ -85,6 +85,14 @@
                 ></app-task-assessment-comment>
               </div>
 
+              <div *ngSwitchCase="'numbas'" class="comment-numbas">
+                <numbas-comment
+                  [task]="task"
+                  [comment]="comment"
+                  *ngIf="numbasEnabled"
+                ></numbas-comment>
+              </div>
+
               <div class="bubble" [ngClass]="commentClasses(comment)">
                 <a
                   (click)="scrollToComment(comment.originalComment.id)"

src/app/tasks/task-comments-viewer/task-comments-viewer.component.scss

@@ -144,7 +144,7 @@ $comment-inner-border-radius: 4px;
     width: 100%;
   }
 
-  .comment-container .comment-assessment {
+  .comment-container .comment-assessment, .comment-container .comment-numbas {
     width: 100%;
   }
 

src/app/tasks/task-comments-viewer/task-comments-viewer.component.ts

@@ -97,6 +97,10 @@ export class TaskCommentsViewerComponent implements OnChanges, OnInit {
     return this.constants.IsOverseerEnabled.value;
   }
 
+  get numbasEnabled(): boolean {
+    return this.task.numbasEnabled;
+  }
+
   uploadFiles(event) {
     [...event].forEach((file) => {
       if (
@@ -149,7 +153,7 @@ export class TaskCommentsViewerComponent implements OnChanges, OnInit {
   }
 
   shouldShowAuthorIcon(commentType: string) {
-    return !(commentType === 'extension' || commentType === 'status' || commentType == 'assessment');
+    return !(commentType === 'extension' || commentType === 'status' || commentType == 'assessment' || commentType == 'numbas');
   }
 
   commentClasses(comment: TaskComment): object {