Migrate/comments-modal component

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

@@ -0,0 +1,11 @@
+<div class="p-6">
+  @if (taskComment.commentType === 'image') {
+    <img class="w-full h-full p-0 rounded border-none" [src]="commentResourceUrl" />
+  } @else if (taskComment.commentType === 'pdf') {
+    <iframe
+      class="w-full h-[80vh]"
+      [src]="commentResourceUrl | safe"
+      type="application/pdf"
+    ></iframe>
+  }
+</div>

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

@@ -0,0 +1,25 @@
+import {Component, Input, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {TaskComment} from 'src/app/api/models/doubtfire-model';
+
+export interface CommentsModalData {
+  comment: TaskComment;
+  commentResourceUrl: string;
+}
+
+@Component({
+  selector: 'comments-modal',
+  templateUrl: './comments-modal.component.html',
+  styleUrls: ['./comments-modal.component.scss'],
+})
+export class CommentsModalComponent implements OnInit {
+  @Input() taskComment: TaskComment;
+  @Input() commentResourceUrl: string;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: CommentsModalData) {}
+
+  ngOnInit(): void {
+    this.taskComment = this.data.comment;
+    this.commentResourceUrl = this.data.commentResourceUrl;
+  }
+}

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

@@ -0,0 +1,20 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {TaskComment} from 'src/app/api/models/doubtfire-model';
+import {CommentsModalComponent, CommentsModalData} from './comments-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CommentsModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(commentResourceUrl: string, comment: TaskComment) {
+    this.dialog.open<CommentsModalComponent, CommentsModalData>(CommentsModalComponent, {
+      data: {commentResourceUrl, comment},
+      width: '100%',
+      maxWidth: '900px',
+      panelClass: 'overflow-y-auto',
+    });
+  }
+}

src/app/common/modals/modals.coffee

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

src/app/doubtfire-angular.module.ts

@@ -224,6 +224,7 @@ import {FTaskSheetViewComponent} from './units/states/tasks/viewer/directives/f-
 import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-viewer.component';
 import {UnitCodeComponent} from './common/unit-code/unit-code.component';
 import {GradeService} from './common/services/grade.service';
+import {CommentsModalComponent} from './common/modals/comments-modal/comments-modal.component';
 
 @NgModule({
   // Components we declare
@@ -325,6 +326,7 @@ import {GradeService} from './common/services/grade.service';
     FUsersComponent,
     FTaskBadgeComponent,
     FUnitsComponent,
+    CommentsModalComponent,
   ],
   // Services we provide
   providers: [

src/app/doubtfire-angularjs.module.ts

@@ -119,7 +119,6 @@ import 'build/src/app/units/states/analytics/analytics.js';
 import 'build/src/app/common/filters/filters.js';
 import 'build/src/app/common/content-editable/content-editable.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/modals.js';
 import 'build/src/app/common/grade-icon/grade-icon.js';
@@ -220,11 +219,12 @@ import {FUnitTaskListComponent} from './units/states/tasks/viewer/directives/f-u
 import {FTaskDetailsViewComponent} from './units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component';
 import {FTaskSheetViewComponent} from './units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component';
 import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-viewer.component';
-
 import {FUnitsComponent} from './admin/states/f-units/f-units.component';
 import {MarkedPipe} from './common/pipes/marked.pipe';
 import {AlertService} from './common/services/alert.service';
 import {GradeService} from './common/services/grade.service';
+import {CommentsModalService} from './common/modals/comments-modal/comments-modal.service';
+
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
   'doubtfire.sessions',
@@ -306,6 +306,7 @@ DoubtfireAngularJSModule.factory(
   downgradeInjectable(EditProfileDialogService),
 );
 DoubtfireAngularJSModule.factory('CreateNewUnitModal', downgradeInjectable(CreateNewUnitModal));
+DoubtfireAngularJSModule.factory('CommentsModal', downgradeInjectable(CommentsModalService));
 
 // directive -> component
 DoubtfireAngularJSModule.directive(

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

@@ -1,8 +1,9 @@
-import { Component, OnInit, Input, Inject, OnDestroy } from '@angular/core';
-import { commentsModal } from 'src/app/ajs-upgraded-providers';
-import { Project, TaskComment, Task } from 'src/app/api/models/doubtfire-model';
-import { FileDownloaderService } from 'src/app/common/file-downloader/file-downloader.service';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {Component, OnInit, Input, Inject, OnDestroy} from '@angular/core';
+import {commentsModal} from 'src/app/ajs-upgraded-providers';
+import {Project, TaskComment, Task} from 'src/app/api/models/doubtfire-model';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {CommentsModalService} from 'src/app/common/modals/comments-modal/comments-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'pdf-image-comment',
@@ -18,7 +19,7 @@ export class PdfImageCommentComponent implements OnInit, OnDestroy {
 
   constructor(
     private alerts: AlertService,
-    @Inject(commentsModal) private commentsModalRef: any,
+    @Inject(commentsModal) private commentsModalRef: CommentsModalService,
     private fileDownloaderService: FileDownloaderService,
   ) {}
 
@@ -48,7 +49,7 @@ export class PdfImageCommentComponent implements OnInit, OnDestroy {
 
   public openCommentsModal() {
     if (this.resourceUrl) {
-      this.commentsModalRef.show(this.resourceUrl, this.comment.commentType);
+      this.commentsModalRef.show(this.resourceUrl, this.comment);
     } else {
       this.downloadCommentResource(this.openCommentsModal.bind(this));
     }