Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate/comments-modal component #869

Open
wants to merge 11 commits into
base: 8.0.x
Choose a base branch
from
Prev Previous commit
Next Next commit
refactor: migrate comments-modal
b0ink committed Jul 20, 2024
commit 13710e2fa17419f5c22940af87091d9c55dc0a87
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div class="modal-comment">
@if (commentType === 'image') {
<img class="image-comment" [src]="commentResourceUrl" />
} @else if (commentType === 'pdf') {
<iframe class="pdf-comment" [src]="commentResourceUrl | safe" type="application/pdf"></iframe>
}
</div>
17 changes: 17 additions & 0 deletions src/app/common/modals/comments-modal/comments-modal.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.modal-comment {
padding: 15px;

.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;
}
}
19 changes: 14 additions & 5 deletions src/app/common/modals/comments-modal/comments-modal.component.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
import {Component, Input, Inject} from '@angular/core';
import {Component, Input, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
selector: 'comments-modal',
templateUrl: 'comments-modal.component.html',
styleUrls: ['comments-modal.component.scss'],
templateUrl: './comments-modal.component.html',
styleUrls: ['./comments-modal.component.scss'],
})
export class CommentsModalComponent {
constructor() {}
export class CommentsModalComponent implements OnInit {
@Input() commentType: string;
@Input() commentResourceUrl: string;

constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}

ngOnInit(): void {
this.commentType = this.data.commentType;
this.commentResourceUrl = this.data.commentResourceUrl;
}
}
18 changes: 18 additions & 0 deletions src/app/common/modals/comments-modal/comments-modal.service.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import {Injectable} from '@angular/core';
import {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) {
this.dialog.open(CommentsModalComponent, {
data: {commentResourceUrl, commentType},
width: '100%',
maxWidth: '800px',
});
}
}
1 change: 0 additions & 1 deletion src/app/common/modals/modals.coffee
Original file line number Diff line number Diff line change
@@ -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'
])
2 changes: 2 additions & 0 deletions src/app/doubtfire-angular.module.ts
Original file line number Diff line number Diff line change
@@ -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: [
5 changes: 3 additions & 2 deletions src/app/doubtfire-angularjs.module.ts
Original file line number Diff line number Diff line change
@@ -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(