Migration: comments-modal component

src/app/common/file-downloader/file-downloader.service.ts

@@ -51,6 +51,8 @@ export class FileDownloaderService {
 
         downloadLink.click();
         downloadLink.parentNode.removeChild(downloadLink);
+
+        this.alerts.add('info', 'File downloaded.', 3000);
       },
       (error: any) => {
         this.alerts.add('danger', `Error downloading file - ${error}`);

src/app/common/modals/comments-modal/comments-modal.component.html

@@ -0,0 +1,10 @@
+<div class="modal-comment">
+    <div class="modal-body">
+      <div *ngIf="commentType == 'image'">
+        <img class="image-comment" [src]="commentResourceUrl" />
+      </div>
+      <div *ngIf="commentType == 'pdf'">
+        <iframe class="pdf-comment" [src]="commentResourceUrl" type="application/pdf"></iframe>
+      </div>
+    </div>
+  </div>

src/app/common/modals/comments-modal/comments-modal.component.scss

@@ -0,0 +1,15 @@
+.modal-comment {
+    .image-comment {
+        width: 100%;
+        height: 100%;
+        align-content: center;
+        border-radius: 5px;
+        padding: 0;
+        border: none;
+    }
+    .pdf-comment {
+      width: 100%;
+      height: 80vh;
+      align-content: center;
+    }
+  }

src/app/common/modals/comments-modal/comments-modal.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit, Input, Inject} from '@angular/core';
+import { alertService } from 'src/app/ajs-upgraded-providers';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'comments-modal',
+  templateUrl: './comments-modal.component.html',
+  styleUrls: ['./comments-modal.component.scss'],
+})
+export class CommentsModalComponent implements OnInit {
+  @Input() commentResourceUrl: string;
+  @Input() commentType: string;
+
+  constructor(
+    @Inject(alertService) private alertService: any,
+    public dialogRef: MatDialogRef<CommentsModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {}
+
+  ngOnInit(): void {
+    console.log('comments-model ngOnInit()');
+  }
+}

src/app/common/modals/comments-modal/comments-modal.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { CommentsModalComponent } from './comments-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CommentsModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(commentResourceUrl: string, commentType: string) {
+    let dialogRef: MatDialogRef<CommentsModalComponent, any>;
+    dialogRef = this.dialog.open(CommentsModalComponent);
+    dialogRef.updateSize('100%', '100%');
+    dialogRef.componentInstance.commentResourceUrl = commentResourceUrl;
+    dialogRef.componentInstance.commentType = commentType;
+  }
+}

src/app/common/modals/modals.coffee

@@ -2,5 +2,4 @@ angular.module("doubtfire.common.modals", [
   'doubtfire.common.modals.csv-result-modal'
   'doubtfire.common.modals.progress-modal'
   'doubtfire.common.modals.confirmation-modal'
-  'doubtfire.common.modals.comments-modal'
 ])

src/app/doubtfire-angular.module.ts

@@ -95,6 +95,7 @@ import { ExtensionCommentComponent } from './tasks/task-comments-viewer/extensio
 import { CampusListComponent } from './admin/institution-settings/campuses/campus-list/campus-list.component';
 import { ExtensionModalComponent } from './common/modals/extension-modal/extension-modal.component';
 import { CalendarModalComponent } from './common/modals/calendar-modal/calendar-modal.component';
+import { CommentsModalComponent } from './common/modals/comments-modal/comments-modal.component';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MAT_DATE_LOCALE, MatOptionModule } from '@angular/material/core';
@@ -250,6 +251,7 @@ import { TasksViewerComponent } from './units/states/tasks/tasks-viewer/tasks-vi
     OverseerImageListComponent,
     ExtensionModalComponent,
     CalendarModalComponent,
+    CommentsModalComponent,
     InstitutionSettingsComponent,
     HomeComponent,
     CommentBubbleActionComponent,

src/app/doubtfire-angularjs.module.ts

@@ -134,7 +134,6 @@ import 'build/src/app/common/filters/filters.js';
 import 'build/src/app/common/content-editable/content-editable.js';
 import 'build/src/app/common/alert-list/alert-list.js';
 import 'build/src/app/common/modals/confirmation-modal/confirmation-modal.js';
-import 'build/src/app/common/modals/comments-modal/comments-modal.js';
 import 'build/src/app/common/modals/csv-result-modal/csv-result-modal.js';
 import 'build/src/app/common/modals/progress-modal/progress-modal.js';
 import 'build/src/app/common/modals/modals.js';
@@ -174,6 +173,7 @@ import { ExtensionCommentComponent } from './tasks/task-comments-viewer/extensio
 import { TaskAssessmentCommentComponent } from './tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component';
 import { ExtensionModalService } from './common/modals/extension-modal/extension-modal.service';
 import { CalendarModalService } from './common/modals/calendar-modal/calendar-modal.service';
+import { CommentsModalService } from './common/modals/comments-modal/comments-modal.service';
 import { CampusListComponent } from './admin/institution-settings/campuses/campus-list/campus-list.component';
 import { ActivityTypeListComponent } from './admin/institution-settings/activity-type-list/activity-type-list.component';
 import { InstitutionSettingsComponent } from './admin/institution-settings/institution-settings.component';
@@ -264,6 +264,7 @@ DoubtfireAngularJSModule.factory(
 DoubtfireAngularJSModule.factory('DoubtfireConstants', downgradeInjectable(DoubtfireConstants));
 DoubtfireAngularJSModule.factory('ExtensionModal', downgradeInjectable(ExtensionModalService));
 DoubtfireAngularJSModule.factory('CalendarModal', downgradeInjectable(CalendarModalService));
+DoubtfireAngularJSModule.factory('CommentsModal', downgradeInjectable(CommentsModalService));
 DoubtfireAngularJSModule.factory('TaskCommentService', downgradeInjectable(TaskCommentService));
 DoubtfireAngularJSModule.factory('tutorialService', downgradeInjectable(TutorialService));
 DoubtfireAngularJSModule.factory('streamService', downgradeInjectable(TutorialStreamService));

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

@@ -46,10 +46,12 @@ export class PdfImageCommentComponent implements OnInit, OnDestroy {
   }
 
   public openCommentsModal() {
-    if (this.resourceUrl) {
+    if (this.comment.commentType == 'image') {
       this.commentsModalRef.show(this.resourceUrl, this.comment.commentType);
     } else {
-      this.downloadCommentResource(this.openCommentsModal.bind(this));
+      if (this.comment.commentType === 'pdf') {
+        this.fileDownloaderService.downloadFile(this.comment.attachmentUrl, "view.pdf");
+      }
     }
   }
 }

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

@@ -143,10 +143,10 @@ export class TaskCommentsViewerComponent implements OnChanges, OnInit {
     document.querySelector(`#comment-${commentID}`).scrollIntoView();
   }
 
-  openCommentsModal(comment: TaskComment) {
+  /*openCommentsModal(comment: TaskComment) {
     const resourceUrl = comment.attachmentUrl;
     this.commentsModalRef.show(resourceUrl, comment.commentType);
-  }
+  }*/
 
   shouldShowAuthorIcon(commentType: string) {
     return !(commentType === 'extension' || commentType === 'status' || commentType == 'assessment');