From 5248e80622e55b79ce4d7b35f8202ee8099c2dce Mon Sep 17 00:00:00 2001
From: Andrew Cain <macite@gmail.com>
Date: Mon, 8 Jan 2024 09:39:09 +1100
Subject: [PATCH] feat: add ability to open turnitin viewer

---
 src/app/api/models/task-similarity.ts         | 11 ++-
 .../api/services/task-definition.service.ts   |  2 -
 .../api/services/task-similarity.service.ts   | 10 ++-
 .../task-similarity-view.component.html       | 79 ++++++++++---------
 .../task-similarity-view.component.ts         |  8 ++
 5 files changed, 69 insertions(+), 41 deletions(-)

diff --git a/src/app/api/models/task-similarity.ts b/src/app/api/models/task-similarity.ts
index c842cb751..c3a72e556 100644
--- a/src/app/api/models/task-similarity.ts
+++ b/src/app/api/models/task-similarity.ts
@@ -1,7 +1,8 @@
 import { Entity } from 'ngx-entity-service';
 import { AppInjector } from 'src/app/app-injector';
-import { Task } from './doubtfire-model';
+import { Task, TaskSimilarityService } from './doubtfire-model';
 import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+import { Observable } from 'rxjs';
 
 export enum TaskSimilarityType {
   Moss = 'MossTaskSimilarity',
@@ -34,6 +35,7 @@ export class TaskSimilarity extends Entity {
   pct: number;
   parts: TaskSimilarityPart[];
   task: Task;
+  readyForViewer: boolean = false;
 
   constructor(task: Task) {
     super();
@@ -51,6 +53,13 @@ export class TaskSimilarity extends Entity {
     return `${constants.API_URL}/tasks/${this.task.id}/similarities/${this.id}/contents/${idx}`;
   }
 
+  /**
+   * Return an ovserverable that will fetch the similarity report url for this task similarity.
+   */
+  public fetchSimilarityReportUrl(): Observable<string> {
+    return AppInjector.get(TaskSimilarityService).getSimilarityReportUrl(this.task.id, this.id);
+  }
+
   public get friendlyTypeName(): string {
     switch (this.type) {
       case TaskSimilarityType.Moss:
diff --git a/src/app/api/services/task-definition.service.ts b/src/app/api/services/task-definition.service.ts
index 74a5d36fc..141673239 100644
--- a/src/app/api/services/task-definition.service.ts
+++ b/src/app/api/services/task-definition.service.ts
@@ -84,7 +84,6 @@ export class TaskDefinitionService extends CachedEntityService<TaskDefinition> {
           return JSON.stringify(taskDef.plagiarismChecks);
         },
       },
-      'plagiarismReportUrl',
       'plagiarismWarnPct',
       'restrictStatusUpdates',
       {
@@ -111,7 +110,6 @@ export class TaskDefinitionService extends CachedEntityService<TaskDefinition> {
 
     this.mapping.mapAllKeysToJsonExcept(
       'id',
-      'plagiarismReportUrl',
       'hasTaskSheet',
       'hasTaskResources',
       'hasTaskAssessmentResources'
diff --git a/src/app/api/services/task-similarity.service.ts b/src/app/api/services/task-similarity.service.ts
index 571f2f906..d2770d800 100644
--- a/src/app/api/services/task-similarity.service.ts
+++ b/src/app/api/services/task-similarity.service.ts
@@ -3,6 +3,9 @@ import { Injectable } from '@angular/core';
 import { CachedEntityService } from 'ngx-entity-service';
 import API_URL from 'src/app/config/constants/apiURL';
 import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { AppInjector } from 'src/app/app-injector';
+import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
 
 @Injectable()
 export class TaskSimilarityService extends CachedEntityService<TaskSimilarity> {
@@ -11,7 +14,7 @@ export class TaskSimilarityService extends CachedEntityService<TaskSimilarity> {
   constructor(httpClient: HttpClient) {
     super(httpClient, API_URL);
 
-    this.mapping.addKeys('id', 'type', 'flagged', 'pct', 'parts');
+    this.mapping.addKeys('id', 'type', 'flagged', 'pct', 'readyForViewer', 'parts');
 
     this.mapping.addJsonKey('flagged');
   }
@@ -20,4 +23,9 @@ export class TaskSimilarityService extends CachedEntityService<TaskSimilarity> {
   public override createInstanceFrom(_json: object, constructorParams: Task): TaskSimilarity {
     return new TaskSimilarity(constructorParams);
   }
+
+  public getSimilarityReportUrl(taskId: number, similarityId: number): Observable<string> {
+    const httpClient = AppInjector.get(HttpClient);
+    return httpClient.get<string>(`${AppInjector.get(DoubtfireConstants).API_URL}/tasks/${taskId}/similarities/${similarityId}/viewer_url`);
+  }
 }
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.html
index 19b8e6095..3a2b3bd55 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.html
@@ -10,44 +10,49 @@ <h1 class="mat-headline m-0">Similarities</h1>
 
   <mat-accordion multi>
     @for (similarity of task?.similarityCache.values | async; track similarity) {
-  
       <h1 class="mat-headline"></h1>
       @for (part of similarity.parts; track part; let i = $index) {
-  <mat-expansion-panel
-       
-        hideToggle
-        (opened)="part.panelOpenState = true"
-        (closed)="part.panelOpenState = false"
-      >
-        <mat-expansion-panel-header [ngClass]="{ flagged: similarity.flagged }">
-          <mat-panel-title>
-            {{ similarity.friendlyTypeName }}
-          </mat-panel-title>
-          <mat-panel-description> {{ part.description }} </mat-panel-description>
-          @if (i === 0) {
-<button
-           
-            [matTooltip]="similarity.flagged ? 'Unflag similarity' : 'Flag similarity'"
-            mat-icon-button
-            aria-label="Flag similarities"
-            (click)="toggleFlag($event, similarity)"
-          >
-            <mat-icon [color]="similarity.flagged ? 'warn' : ''">{{
-              similarity.flagged ? 'flag_circle' : 'check_circle'
-            }}</mat-icon>
-          </button>
-}
-        </mat-expansion-panel-header>
-        @if (part.panelOpenState) {
-<f-file-viewer
-         
-          [fileType]="part.format"
-          [src]="similarity.fileUrl(part.idx)"
-        ></f-file-viewer>
-}
-      </mat-expansion-panel>
-}
-    
-}
+        <mat-expansion-panel
+          hideToggle
+          (opened)="part.panelOpenState = true"
+          (closed)="part.panelOpenState = false"
+        >
+          <mat-expansion-panel-header [ngClass]="{flagged: similarity.flagged}">
+            <mat-panel-title>
+              {{ similarity.friendlyTypeName }}
+            </mat-panel-title>
+            <mat-panel-description> {{ part.description }} </mat-panel-description>
+            @if (similarity.readyForViewer) {
+              <button
+                matTooltip="View report for this similarity"
+                mat-icon-button
+                aria-label="View Detailed Report"
+                (click)="openReport($event, similarity)"
+              >
+                <mat-icon>summarize</mat-icon>
+              </button>
+            }
+            @if (i === 0) {
+              <button
+                [matTooltip]="similarity.flagged ? 'Unflag similarity' : 'Flag similarity'"
+                mat-icon-button
+                aria-label="Flag similarities"
+                (click)="toggleFlag($event, similarity)"
+              >
+                <mat-icon [color]="similarity.flagged ? 'warn' : ''">{{
+                  similarity.flagged ? 'flag_circle' : 'check_circle'
+                }}</mat-icon>
+              </button>
+            }
+          </mat-expansion-panel-header>
+          @if (part.panelOpenState) {
+            <f-file-viewer
+              [fileType]="part.format"
+              [src]="similarity.fileUrl(part.idx)"
+            ></f-file-viewer>
+          }
+        </mat-expansion-panel>
+      }
+    }
   </mat-accordion>
 </div>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.ts
index 1ec7e28f6..2a6739207 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.ts
@@ -46,4 +46,12 @@ export class TaskSimilarityViewComponent implements OnChanges {
         this.selectedTaskService.checkFooterHeight();
       });
   }
+
+  openReport(e: Event, similarity: TaskSimilarity) {
+    e.stopPropagation();
+    // Open similarity report in new tab
+    similarity.fetchSimilarityReportUrl().subscribe((url) => {
+      window.open(url, '_blank');
+    });
+  }
 }