From 4986d76fb935041b383f4a66060837764961284e Mon Sep 17 00:00:00 2001
From: Adrian Kunz <a.kunz@uni-kassel.de>
Date: Wed, 13 Dec 2023 13:11:28 +0100
Subject: [PATCH] feat(frontend): Diff modal

---
 .../diff-modal/diff-modal.component.html      | 16 ++++++
 .../diff-modal/diff-modal.component.scss      |  0
 .../diff-modal/diff-modal.component.ts        | 51 +++++++++++++++++++
 .../edit-assignment-routing.module.ts         |  2 +
 .../edit-assignment/edit-assignment.module.ts |  6 ++-
 .../edit-assignment.component.html            |  5 ++
 .../preview/preview.component.html            |  7 ---
 .../preview/preview.component.ts              | 30 -----------
 8 files changed, 78 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/app/assignment/modules/edit-assignment/diff-modal/diff-modal.component.html
 create mode 100644 frontend/src/app/assignment/modules/edit-assignment/diff-modal/diff-modal.component.scss
 create mode 100644 frontend/src/app/assignment/modules/edit-assignment/diff-modal/diff-modal.component.ts

diff --git a/frontend/src/app/assignment/modules/edit-assignment/diff-modal/diff-modal.component.html b/frontend/src/app/assignment/modules/edit-assignment/diff-modal/diff-modal.component.html
new file mode 100644
index 000000000..958c5e502
--- /dev/null
+++ b/frontend/src/app/assignment/modules/edit-assignment/diff-modal/diff-modal.component.html
@@ -0,0 +1,16 @@
+<ngbx-modal [back]="['..']" size="lg" #modal>
+  <ng-container modal-title>
+    Differences
+  </ng-container>
+  <ng-container modal-body>
+    <h5>Metadata</h5>
+    <pre [innerHTML]="diffMetadata | safeHtml"></pre>
+    <h5>Tasks</h5>
+    <pre [innerHTML]="diffTasks | safeHtml"></pre>
+  </ng-container>
+  <ng-container modal-footer>
+    <button type="button" class="btn btn-secondary" (click)="modal.close()">
+      Close
+    </button>
+  </ng-container>
+</ngbx-modal>
diff --git a/frontend/src/app/assignment/modules/edit-assignment/diff-modal/diff-modal.component.scss b/frontend/src/app/assignment/modules/edit-assignment/diff-modal/diff-modal.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/assignment/modules/edit-assignment/diff-modal/diff-modal.component.ts b/frontend/src/app/assignment/modules/edit-assignment/diff-modal/diff-modal.component.ts
new file mode 100644
index 000000000..b211d650c
--- /dev/null
+++ b/frontend/src/app/assignment/modules/edit-assignment/diff-modal/diff-modal.component.ts
@@ -0,0 +1,51 @@
+import {Component, OnInit} from '@angular/core';
+import {AssignmentService} from "../../../services/assignment.service";
+import * as jsdiff from "diff";
+import {ActivatedRoute} from "@angular/router";
+import {AssignmentContext} from "../../../services/assignment.context";
+import {switchMap} from "rxjs/operators";
+import {TaskMarkdownService} from "../task-markdown.service";
+
+@Component({
+  selector: 'app-diff-modal',
+  templateUrl: './diff-modal.component.html',
+  styleUrl: './diff-modal.component.scss'
+})
+export class DiffModalComponent implements OnInit {
+  diffMetadata = '';
+  diffTasks = '';
+
+  constructor(
+    private route: ActivatedRoute,
+    private context: AssignmentContext,
+    private assignmentService: AssignmentService,
+    private taskMarkdownService: TaskMarkdownService,
+  ) {
+  }
+
+  ngOnInit() {
+    this.route.params.pipe(
+      switchMap(({aid}) => this.assignmentService.get(aid)),
+    ).subscribe(oldAssignment => {
+      const {tasks: oldTasks, ...old} = oldAssignment;
+      const {tasks: newTasks, ...current} = this.context.assignment;
+      this.diffMetadata = renderDiff(jsdiff.diffJson(old, current));
+      const oldTasksMd = this.taskMarkdownService.renderTasks(oldTasks);
+      const newTasksMd = this.taskMarkdownService.renderTasks(newTasks);
+      this.diffTasks = renderDiff(jsdiff.diffWords(oldTasksMd, newTasksMd));
+    });
+  }
+}
+
+function escapeHtml(text: string) {
+  return text.replace(/[&<>"'`=\/]/g, function (s) {
+    return `&#${s.charCodeAt(0)};`;
+  });
+}
+
+function renderDiff(diff: jsdiff.Change[]) {
+  return diff.map(part => {
+    const color = part.added ? 'text-success' : part.removed ? 'text-danger' : '';
+    return `<span class="${color}">${escapeHtml(part.value)}</span>`;
+  }).join('');
+}
diff --git a/frontend/src/app/assignment/modules/edit-assignment/edit-assignment-routing.module.ts b/frontend/src/app/assignment/modules/edit-assignment/edit-assignment-routing.module.ts
index a35e0e647..3738968d3 100644
--- a/frontend/src/app/assignment/modules/edit-assignment/edit-assignment-routing.module.ts
+++ b/frontend/src/app/assignment/modules/edit-assignment/edit-assignment-routing.module.ts
@@ -8,6 +8,7 @@ import {PreviewComponent} from './preview/preview.component';
 import {TasksComponent} from './tasks/tasks.component';
 import {PlagiarismDetectionComponent} from "./plagiarism-detection/plagiarism-detection.component";
 import {CodeSearchComponent} from "./code-search/code-search.component";
+import {DiffModalComponent} from "./diff-modal/diff-modal.component";
 
 export const editAssignmentChildRoutes: Routes = [
   {path: 'info', component: InfoComponent, data: {title: 'Info'}},
@@ -32,6 +33,7 @@ const routes: Routes = [
     data: {title: 'Edit Assignment'},
     children: [
       ...editAssignmentChildRoutes,
+      {path: 'diff', component: DiffModalComponent, data: {title: 'Differences'}},
       {path: '', redirectTo: 'info', pathMatch: 'full'},
     ],
   },
diff --git a/frontend/src/app/assignment/modules/edit-assignment/edit-assignment.module.ts b/frontend/src/app/assignment/modules/edit-assignment/edit-assignment.module.ts
index dd1ee0604..fa664ca8d 100644
--- a/frontend/src/app/assignment/modules/edit-assignment/edit-assignment.module.ts
+++ b/frontend/src/app/assignment/modules/edit-assignment/edit-assignment.module.ts
@@ -16,8 +16,9 @@ import {InfoComponent} from './info/info.component';
 import {PreviewComponent} from './preview/preview.component';
 import {TasksComponent} from './tasks/tasks.component';
 import {TaskMarkdownService} from "./task-markdown.service";
-import { CodeSearchComponent } from './code-search/code-search.component';
-import { PlagiarismDetectionComponent } from './plagiarism-detection/plagiarism-detection.component';
+import {CodeSearchComponent} from './code-search/code-search.component';
+import {PlagiarismDetectionComponent} from './plagiarism-detection/plagiarism-detection.component';
+import {DiffModalComponent} from "./diff-modal/diff-modal.component";
 
 
 @NgModule({
@@ -31,6 +32,7 @@ import { PlagiarismDetectionComponent } from './plagiarism-detection/plagiarism-
     TasksComponent,
     CodeSearchComponent,
     PlagiarismDetectionComponent,
+    DiffModalComponent,
   ],
   imports: [
     CommonModule,
diff --git a/frontend/src/app/assignment/modules/edit-assignment/edit-assignment/edit-assignment.component.html b/frontend/src/app/assignment/modules/edit-assignment/edit-assignment/edit-assignment.component.html
index 048f15ce1..15ca1244c 100644
--- a/frontend/src/app/assignment/modules/edit-assignment/edit-assignment/edit-assignment.component.html
+++ b/frontend/src/app/assignment/modules/edit-assignment/edit-assignment/edit-assignment.component.html
@@ -8,6 +8,11 @@ <h1>
     <a class="btn btn-secondary ms-2" routerLink="/assignments">
       Cancel
     </a>
+    @if (context.assignment['_id']) {
+      <a class="btn btn-info ms-2" routerLink="diff">
+        View Diff
+      </a>
+    }
     @if (draft) {
       <button class="btn btn-warning ms-2" (click)="deleteDraft()">
         Delete Draft
diff --git a/frontend/src/app/assignment/modules/edit-assignment/preview/preview.component.html b/frontend/src/app/assignment/modules/edit-assignment/preview/preview.component.html
index f3f134ff5..3eee99d94 100644
--- a/frontend/src/app/assignment/modules/edit-assignment/preview/preview.component.html
+++ b/frontend/src/app/assignment/modules/edit-assignment/preview/preview.component.html
@@ -5,13 +5,6 @@
   </div>
 </div>
 
-@if (diffMetadata && diffTasks) {
-  <h2>Differences</h2>
-  <h3>Metadata</h3>
-  <pre [innerHTML]="diffMetadata | safeHtml"></pre>
-  <h3>Tasks</h3>
-  <pre [innerHTML]="diffTasks | safeHtml"></pre>
-}
 @if (!loggedIn) {
   <div class="alert alert-warning" role="alert">
     <h4 class="alert-heading">
diff --git a/frontend/src/app/assignment/modules/edit-assignment/preview/preview.component.ts b/frontend/src/app/assignment/modules/edit-assignment/preview/preview.component.ts
index 3b8a6bd05..066dc4e17 100644
--- a/frontend/src/app/assignment/modules/edit-assignment/preview/preview.component.ts
+++ b/frontend/src/app/assignment/modules/edit-assignment/preview/preview.component.ts
@@ -2,22 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {KeycloakService} from 'keycloak-angular';
 import {CreateAssignmentDto} from '../../../model/assignment';
 import {AssignmentContext} from '../../../services/assignment.context';
-import * as jsdiff from 'diff';
-import {AssignmentService} from "../../../services/assignment.service";
-import {TaskMarkdownService} from "../task-markdown.service";
 
-function escapeHtml(text: string) {
-  return text.replace(/[&<>"'`=\/]/g, function (s) {
-    return `&#${s.charCodeAt(0)};`;
-  });
-}
-
-function renderDiff(diff: jsdiff.Change[]) {
-  return diff.map(part => {
-    const color = part.added ? 'text-success' : part.removed ? 'text-danger' : '';
-    return `<span class="${color}">${escapeHtml(part.value)}</span>`;
-  }).join('');
-}
 
 @Component({
   selector: 'app-edit-assignment-preview',
@@ -26,33 +11,18 @@ function renderDiff(diff: jsdiff.Change[]) {
 })
 export class PreviewComponent implements OnInit {
   assignment: CreateAssignmentDto;
-  diffMetadata?: string;
-  diffTasks?: string;
 
   loggedIn = false;
 
   constructor(
     private keycloakService: KeycloakService,
     context: AssignmentContext,
-    private assignmentService: AssignmentService,
-    private taskMarkdownService: TaskMarkdownService,
   ) {
     this.assignment = context.getAssignment();
   }
 
   ngOnInit(): void {
     this.loggedIn = this.keycloakService.isLoggedIn();
-
-    if ('_id' in this.assignment) {
-      this.assignmentService.get(this.assignment._id as string).subscribe(oldAssignment => {
-        const {tasks: oldTasks, ...old} = oldAssignment;
-        const {tasks: newTasks, ...current} = this.assignment;
-        this.diffMetadata = renderDiff(jsdiff.diffJson(old, current));
-        const oldTasksMd = this.taskMarkdownService.renderTasks(oldTasks);
-        const newTasksMd = this.taskMarkdownService.renderTasks(newTasks);
-        this.diffTasks = renderDiff(jsdiff.diffWords(oldTasksMd, newTasksMd));
-      });
-    }
   }
 
   login(): void {