From 6c4434ae37a4f950479828b411ce6b007cf203c2 Mon Sep 17 00:00:00 2001 From: Minh Tho DUONG Date: Tue, 14 May 2024 13:29:13 +1000 Subject: [PATCH 1/2] refactor: migrate the confirmation-model component --- .../confirmation-modal.coffee | 35 ---------------- ...html => confirmation-modal.component.html} | 6 +-- ...scss => confirmation-modal.component.scss} | 4 +- .../confirmation-modal.component.ts | 41 +++++++++++++++++++ .../confirmation-modal.service.ts | 19 +++++++++ src/app/common/modals/modals.coffee | 1 - src/app/doubtfire-angular.module.ts | 2 + src/app/doubtfire-angularjs.module.ts | 3 +- 8 files changed, 69 insertions(+), 42 deletions(-) delete mode 100644 src/app/common/modals/confirmation-modal/confirmation-modal.coffee rename src/app/common/modals/confirmation-modal/{confirmation-modal.tpl.html => confirmation-modal.component.html} (74%) rename src/app/common/modals/confirmation-modal/{confirmation-modal.scss => confirmation-modal.component.scss} (57%) create mode 100644 src/app/common/modals/confirmation-modal/confirmation-modal.component.ts create mode 100644 src/app/common/modals/confirmation-modal/confirmation-modal.service.ts diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.coffee b/src/app/common/modals/confirmation-modal/confirmation-modal.coffee deleted file mode 100644 index c7999098c..000000000 --- a/src/app/common/modals/confirmation-modal/confirmation-modal.coffee +++ /dev/null @@ -1,35 +0,0 @@ -angular.module("doubtfire.common.modals.confirmation-modal", []) - -.factory("ConfirmationModal", ($modal) -> - ConfirmationModal = {} - - # - # Show a modal asking the user to confirm their indicated action. - # - ConfirmationModal.show = (title, message, action) -> - modalInstance = $modal.open - templateUrl: 'common/modals/confirmation-modal/confirmation-modal.tpl.html' - controller: 'ConfirmationModalCtrl' - resolve: - title: -> title - message: -> message - action: -> action - - ConfirmationModal -) - -# -# Controller for confirmation modal -# -.controller('ConfirmationModalCtrl', ($scope, $modalInstance, title, message, action, alertService) -> - $scope.title = title - $scope.message = message - - $scope.confirmAction = -> - action() - $modalInstance.dismiss() - - $scope.cancelAction = -> - alertService.message "#{title} action cancelled", 3000 - $modalInstance.dismiss() -) diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.tpl.html b/src/app/common/modals/confirmation-modal/confirmation-modal.component.html similarity index 74% rename from src/app/common/modals/confirmation-modal/confirmation-modal.tpl.html rename to src/app/common/modals/confirmation-modal/confirmation-modal.component.html index 4bd87f686..ec66dcf72 100644 --- a/src/app/common/modals/confirmation-modal/confirmation-modal.tpl.html +++ b/src/app/common/modals/confirmation-modal/confirmation-modal.component.html @@ -6,15 +6,15 @@

Please confirm that you want to perform this action.

-
+
{{message}}
-
diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.scss b/src/app/common/modals/confirmation-modal/confirmation-modal.component.scss similarity index 57% rename from src/app/common/modals/confirmation-modal/confirmation-modal.scss rename to src/app/common/modals/confirmation-modal/confirmation-modal.component.scss index f30b0e345..9afc6bd60 100644 --- a/src/app/common/modals/confirmation-modal/confirmation-modal.scss +++ b/src/app/common/modals/confirmation-modal/confirmation-modal.component.scss @@ -1,3 +1,3 @@ .confirmation-modal .modal-body { - font-size: 1.5em; -} + font-size: 1.5em; + } \ No newline at end of file diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts b/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts new file mode 100644 index 000000000..e65776a4b --- /dev/null +++ b/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, + @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(); + } +} \ No newline at end of file diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts b/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts new file mode 100644 index 000000000..e6d9c6a5f --- /dev/null +++ b/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; + 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; + } +} diff --git a/src/app/common/modals/modals.coffee b/src/app/common/modals/modals.coffee index 16d2be1ec..73aae8685 100644 --- a/src/app/common/modals/modals.coffee +++ b/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' ]) diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts index 5f250b661..f37b72e8c 100644 --- a/src/app/doubtfire-angular.module.ts +++ b/src/app/doubtfire-angular.module.ts @@ -95,6 +95,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 {MAT_DATE_LOCALE, MatOptionModule} from '@angular/material/core'; @@ -251,6 +252,7 @@ import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-view OverseerImageListComponent, ExtensionModalComponent, CalendarModalComponent, + ConfirmationModalComponent, InstitutionSettingsComponent, HomeComponent, CommentBubbleActionComponent, diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts index c102584ea..07a14e6af 100644 --- a/src/app/doubtfire-angularjs.module.ts +++ b/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'; @@ -157,6 +156,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'; @@ -250,6 +250,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)); From 8154bee5d520bcfc3358270427fa07a108977d1e Mon Sep 17 00:00:00 2001 From: Minh Tho DUONG Date: Tue, 14 May 2024 14:18:31 +1000 Subject: [PATCH 2/2] refactor: migrate the confirmation-model component - updates --- .../confirmation-modal.component.ts | 20 +++++++++---------- .../confirmation-modal.service.ts | 7 +++++-- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts b/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts index e65776a4b..27f0d89d8 100644 --- a/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts +++ b/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts @@ -1,6 +1,9 @@ +/* eslint-disable prettier/prettier */ +/* eslint-disable @angular-eslint/component-selector */ +/* eslint-disable @typescript-eslint/no-explicit-any */ 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'; +import { AlertService } from '../../services/alert.service'; +import { MatDialogRef } from '@angular/material/dialog'; @Component({ selector: 'confirmation-modal', @@ -13,9 +16,8 @@ export class ConfirmationModalComponent implements OnInit { @Input() action: () => void; constructor( - @Inject(alertService) private alertService: any, + @Inject(AlertService) private alertService: any, public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any, ) {} ngOnInit(): void { @@ -23,19 +25,17 @@ export class ConfirmationModalComponent implements OnInit { } public confirmAction() { - console.log('confirmAction'); if (typeof this.action === 'function') { this.action(); } else { - this.alertService.add("danger", `${this.title} action failed`, 3000); + this.alertService.error(`${this.title} action failed.`); } - /** note - page reload after closing **/ + this.dialogRef.close(); } public cancelAction() { - console.log('cancelAction'); - this.alertService.add("info", `${this.title} action cancelled`, 3000); + this.alertService.success(`${this.title} action cancelled.`); this.dialogRef.close(); } -} \ No newline at end of file +} diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts b/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts index e6d9c6a5f..06c4da61e 100644 --- a/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts +++ b/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts @@ -1,5 +1,8 @@ +/* eslint-disable prefer-const */ +/* eslint-disable prettier/prettier */ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { Injectable } from '@angular/core'; -import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog'; +import { MatDialogRef, MatDialog } from '@angular/material/dialog'; import { ConfirmationModalComponent } from './confirmation-modal.component'; @Injectable({ @@ -11,7 +14,7 @@ export class ConfirmationModalService { public show(title: string, message: string, action?: any) { let dialogRef: MatDialogRef; dialogRef = this.dialog.open(ConfirmationModalComponent, {position: {top: '2.5%'}}); - dialogRef.updateSize("42.5%", ""); + dialogRef.updateSize('42.5%', ''); dialogRef.componentInstance.title = title; dialogRef.componentInstance.message = message; dialogRef.componentInstance.action = action;