Migrate/confirmation-modal component

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

@@ -0,0 +1,20 @@
+<div class="confirmation-modal">
+  <h3 mat-dialog-title>
+    <div class="flex flex-row items-center">
+      <i class="fa fa-question-circle fa-2x pull-left"></i>
+      <div class="flex flex-col">
+        <div>{{ title }}</div>
+        <small>Please confirm that you want to perform this action.</small>
+      </div>
+    </div>
+  </h3>
+  <mat-dialog-content>
+    {{ message }}
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-raised-button color="primary" (click)="confirmAction()">
+      <i class="fa fa-check"></i> Confirm
+    </button>
+    <button mat-button color="warn" (click)="cancelAction()">Cancel</button>
+  </mat-dialog-actions>
+</div>

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

@@ -0,0 +1,47 @@
+import {Component, OnInit, Input, Inject} from '@angular/core';
+import {AlertService} from '../../services/alert.service';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+
+export interface ConfirmationModalData {
+  title: string;
+  message: string;
+  action?: any;
+}
+
+@Component({
+  selector: 'confirmation-modal',
+  templateUrl: './confirmation-modal.component.html',
+  styleUrls: ['./confirmation-modal.component.scss'],
+})
+export class ConfirmationModalComponent implements OnInit {
+  @Input() title: string;
+  @Input() message: string;
+  @Input() action: () => void;
+
+  constructor(
+    @Inject(AlertService) private alertService: AlertService,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmationModalData,
+
+    public dialogRef: MatDialogRef<ConfirmationModalComponent>,
+  ) {}
+
+  ngOnInit(): void {
+    this.title = this.data.title;
+    this.message = this.data.message;
+    this.action = this.data.action;
+  }
+
+  public confirmAction() {
+    if (typeof this.action === 'function') {
+      this.action();
+    } else {
+      this.alertService.error(`${this.title} action failed.`);
+    }
+    this.dialogRef.close();
+  }
+
+  public cancelAction() {
+    this.alertService.success(`${this.title} action cancelled.`);
+    this.dialogRef.close();
+  }
+}

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

@@ -0,0 +1,26 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {ConfirmationModalComponent, ConfirmationModalData} from './confirmation-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfirmationModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(title: string, message: string, action?: any) {
+    this.dialog.open<ConfirmationModalComponent, ConfirmationModalData>(
+      ConfirmationModalComponent,
+      {
+        data: {
+          title,
+          message,
+          action,
+        },
+        position: {top: '2.5%'},
+        width: '100%',
+        maxWidth: '650px',
+      },
+    );
+  }
+}

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

@@ -93,6 +93,7 @@ import {ExtensionCommentComponent} from './tasks/task-comments-viewer/extension-
 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 { ConfirmationModalComponent } from './common/modals/confirmation-modal/confirmation-modal.component';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatOptionModule} from '@angular/material/core';
@@ -264,6 +265,7 @@ const MY_DATE_FORMAT = {
     OverseerImageListComponent,
     ExtensionModalComponent,
     CalendarModalComponent,
+    ConfirmationModalComponent,
     InstitutionSettingsComponent,
     HomeComponent,
     CommentBubbleActionComponent,

src/app/doubtfire-angularjs.module.ts

@@ -118,7 +118,6 @@ import 'build/src/app/units/states/students-list/students-list.js';
 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';
@@ -154,6 +153,7 @@ import {ExtensionCommentComponent} from './tasks/task-comments-viewer/extension-
 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 { ConfirmationModalService } from './common/modals/confirmation-modal/confirmation-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';
@@ -243,6 +243,7 @@ DoubtfireAngularJSModule.factory('DoubtfireConstants', downgradeInjectable(Doubt
 DoubtfireAngularJSModule.factory('ExtensionModal', downgradeInjectable(ExtensionModalService));
 DoubtfireAngularJSModule.factory('Marked', downgradeInjectable(MarkedPipe));
 DoubtfireAngularJSModule.factory('CalendarModal', downgradeInjectable(CalendarModalService));
+DoubtfireAngularJSModule.factory('ConfirmationModal', downgradeInjectable(ConfirmationModalService));
 DoubtfireAngularJSModule.factory('TaskCommentService', downgradeInjectable(TaskCommentService));
 DoubtfireAngularJSModule.factory('alertService', downgradeInjectable(AlertService));
 DoubtfireAngularJSModule.factory('tutorialService', downgradeInjectable(TutorialService));

src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts

@@ -138,9 +138,7 @@ export class UnitTaskEditorComponent implements AfterViewInit {
       () => {
         this.unit.deleteTaskDefinition(taskDefinition);
         //TODO: reinstate ProgressModal.show "Deleting Task #{task.abbreviation}", 'Please wait while student projects are updated.', promise
-
-        this.alerts.success('Task deleted');
-      }
+      },
     );
   }