Migration: confirmation-modal component

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

@@ -2,19 +2,19 @@
   <div class="modal-header clearfix">
     <h3 class="modal-title">
       <i class="fa fa-question-circle fa-2x pull-left"></i>
-      <div>{{title}}</div>
+      <div>{{ title }}</div>
       <small>Please confirm that you want to perform this action.</small>
     </h3>
   </div>
-  <div class="modal-body">
-    {{message}}
+  <div class="modal-body" style="font-size: 1.5em;">
+    {{ message }}
   </div>
   <div class="modal-footer clearfix">
     <div class="btn-group">
-      <label class="btn btn-success" ng-click="confirmAction()">
+      <label class="btn btn-success" (click)="confirmAction()">
         <i class="fa fa-check"></i> Confirm
       </label>
-      <label class="btn btn-danger" ng-click="cancelAction()">
+      <label class="btn btn-danger" (click)="cancelAction()">
         <i class="fa fa-times"></i> Cancel
       </label>
     </div>

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

@@ -0,0 +1,41 @@
+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: '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: any,
+    public dialogRef: MatDialogRef<ConfirmationModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {}
+
+  ngOnInit(): void {
+    console.log('confirmation-model ngOnInit()');
+  }
+
+  public confirmAction() {
+    console.log('confirmAction');
+    if (typeof this.action === 'function') {
+      this.action();
+    } else {
+      this.alertService.add("danger", `${this.title} action failed`, 3000);
+    }
+    /** note - page reload after closing **/
+    this.dialogRef.close();
+  }
+
+  public cancelAction() {
+    console.log('cancelAction');
+    this.alertService.add("info", `${this.title} action cancelled`, 3000);
+    this.dialogRef.close();
+  }
+}

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

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { ConfirmationModalComponent } from './confirmation-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfirmationModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(title: string, message: string, action?: any) {
+    let dialogRef: MatDialogRef<ConfirmationModalComponent, any>;
+    dialogRef = this.dialog.open(ConfirmationModalComponent, {position: {top: '2.5%'}});
+    dialogRef.updateSize("42.5%", "");
+    dialogRef.componentInstance.title = title;
+    dialogRef.componentInstance.message = message;
+    dialogRef.componentInstance.action = action;
+  }
+}

src/app/common/modals/modals.coffee

@@ -1,6 +1,5 @@
 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 { ConfirmationModalComponent } from './common/modals/confirmation-modal/confirmation-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,
+    ConfirmationModalComponent,
     InstitutionSettingsComponent,
     HomeComponent,
     CommentBubbleActionComponent,

src/app/doubtfire-angularjs.module.ts

@@ -133,7 +133,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/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';
@@ -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 { 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';
@@ -264,6 +264,7 @@ DoubtfireAngularJSModule.factory(
 DoubtfireAngularJSModule.factory('DoubtfireConstants', downgradeInjectable(DoubtfireConstants));
 DoubtfireAngularJSModule.factory('ExtensionModal', downgradeInjectable(ExtensionModalService));
 DoubtfireAngularJSModule.factory('CalendarModal', downgradeInjectable(CalendarModalService));
+DoubtfireAngularJSModule.factory('ConfirmationModal', downgradeInjectable(ConfirmationModalService));
 DoubtfireAngularJSModule.factory('TaskCommentService', downgradeInjectable(TaskCommentService));
 DoubtfireAngularJSModule.factory('tutorialService', downgradeInjectable(TutorialService));
 DoubtfireAngularJSModule.factory('streamService', downgradeInjectable(TutorialStreamService));