Remplacement de la modale de fermeture de calculette avec angular-material

src/app/app.module.ts

@@ -54,7 +54,9 @@ import { LoadCalcDialogAnchorDirective } from "./components/load-calculator/load
 import { SaveCalculatorComponent } from "./components/save-calculator/save-calculator.component";
 import { SaveCalcDialogAnchorDirective } from "./components/save-calculator/save-calculator-anchor.directive";
 import { ParamLinkComponent } from "./components/param-link/param-link.component";
+
 import { DialogConfirmEmptySessionComponent } from "./components/dialog-confirm-empty-session/dialog-confirm-empty-session.component";
+import { DialogConfirmCloseCalcComponent } from "./components/dialog-confirm-close-calc/dialog-confirm-close-calc.component";
 
 const appRoutes: Routes = [
   { path: "list", component: CalculatorListComponent },
@@ -99,6 +101,7 @@ const appRoutes: Routes = [
     CalculatorNameComponent,
     CalculatorResultsComponent,
     CheckFieldLineComponent,
+    DialogConfirmCloseCalcComponent,
     DialogConfirmEmptySessionComponent,
     FieldSetComponent,
     FieldsetContainerComponent,
@@ -131,6 +134,7 @@ const appRoutes: Routes = [
     VerticalResultElementComponent
   ],
   entryComponents: [
+    DialogConfirmCloseCalcComponent,
     DialogConfirmEmptySessionComponent,
     LoadCalculatorComponent,
     SaveCalculatorComponent

src/app/components/dialog-confirm-close-calc/dialog-confirm-close-calc.component.html

+<h1 mat-dialog-title [innerHTML]="uitextCloseCalcTitle"></h1>
+<div mat-dialog-content>
+  <p [innerHTML]="uitextCloseCalcBody"></p>
+</div>
+<div mat-dialog-actions>
+  <button mat-raised-button color="primary" [mat-dialog-close]="false" cdkFocusInitial>
+    {{ uitextNo }}
+  </button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="true">
+    {{ uitextYes }}
+  </button>
+</div>

src/app/components/dialog-confirm-close-calc/dialog-confirm-close-calc.component.ts

+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
+import { Inject, Component } from "@angular/core";
+import { InternationalisationService } from "../../services/internationalisation/internationalisation.service";
+
+@Component({
+    selector: "dialog-confirm-close-calc",
+    templateUrl: "dialog-confirm-close-calc.component.html",
+})
+export class DialogConfirmCloseCalcComponent {
+
+    constructor(
+        public dialogRef: MatDialogRef<DialogConfirmCloseCalcComponent>,
+        private intlService: InternationalisationService,
+        @Inject(MAT_DIALOG_DATA) public data: any
+    ) { }
+
+    public get uitextYes() {
+      return this.intlService.localizeText("INFO_OPTION_YES");
+    }
+
+    public get uitextNo() {
+      return this.intlService.localizeText("INFO_OPTION_NO");
+    }
+
+    public get uitextCloseCalcTitle() {
+      return this.intlService.localizeText("INFO_CLOSE_DIALOGUE_TITRE");
+    }
+
+    public get uitextCloseCalcBody() {
+      return this.intlService.localizeText("INFO_CLOSE_DIALOGUE_TEXT");
+    }
+
+}

src/app/components/dialog-confirm-empty-session/dialog-confirm-empty-session.component.html

-<h1 mat-dialog-title>{{ uitextEmptySessionTitle }}</h1>
+<h1 mat-dialog-title [innerHTML]="uitextEmptySessionTitle"></h1>
 <div mat-dialog-content>
-  <p>{{ uitextEmptySessionBody }}</p>
+  <p [innerHTML]="uitextEmptySessionBody"></p>
 </div>
 <div mat-dialog-actions>
-  <button mat-raised-button color="warn" [mat-dialog-close]="false" cdkFocusInitial>
+  <button mat-raised-button color="primary" [mat-dialog-close]="false" cdkFocusInitial>
     {{ uitextNo }}
   </button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="true">
+  <button mat-raised-button color="warn" [mat-dialog-close]="true">
     {{ uitextYes }}
   </button>
 </div>

src/app/components/generic-calculator/calculator.component.html

@@ -11,7 +11,7 @@
         <!-- bouton de sauvegarde -->
         <i class="fa fa-save" (click)="saveCalculator()"></i>
         <!-- bouton de fermeture -->
-        <i class="fa fa-window-close" (click)="confirmModal.show()"></i>
+        <i class="fa fa-window-close" (click)="closeCalculator()"></i>
     </div>
 </div>
 
@@ -51,24 +51,3 @@
         <calc-results id="resultsComp" (afterViewChecked)="onCalcResultsViewChecked()"></calc-results>
     </div>
 </div>
-
-<!-- dialogue de confirmation de fermeture -->
-<div mdbModal #confirmModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close pull-right" aria-label="Close" (click)="confirmModal.hide()">
-                    <span aria-hidden="true">×</span>
-                </button>
-                <h4 class="modal-title w-100" id="myModalLabel">{{ uitextCloseDialogTitle }}</h4>
-            </div>
-            <div class="modal-body">
-                <h4 [innerHTML]="uitextCloseDialogText"></h4>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-danger relative waves-light" (click)="confirmModal.hide();onCloseForm()" mdbRippleRadius>{{ uitextCloseDialogYes }}</button>
-                <button type="button" class="btn btn-success waves-light" aria-label="Close" (click)="confirmModal.hide()" mdbRippleRadius>{{ uitextCloseDialogNo }}</button>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file

src/app/components/generic-calculator/calculator.component.ts

@@ -16,6 +16,8 @@ import { FormulaireElement } from "../../formulaire/formulaire-element";
 import { FieldsetContainer } from "../../formulaire/fieldset-container";
 import { FieldsetContainerComponent } from "../fieldset-container/fieldset-container.component";
 import { ServiceFactory } from "../../services/service-factory";
+import { MatDialog } from "@angular/material";
+import { DialogConfirmCloseCalcComponent } from "../dialog-confirm-close-calc/dialog-confirm-close-calc.component";
 
 @Component({
     selector: "hydrocalc",
@@ -85,7 +87,10 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
     private intlService: InternationalisationService;
     private formulaireService: FormulaireService;
 
-    constructor(private route: ActivatedRoute) {
+    constructor(
+        private route: ActivatedRoute,
+        private confirmCloseCalcDialog: MatDialog
+    ) {
         super();
         this.intlService = ServiceFactory.instance.internationalisationService;
         this.formulaireService = ServiceFactory.instance.formulaireService;
@@ -134,22 +139,6 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
         return this.intlService.localizeText("INFO_CALCULATOR_CALCULER");
     }
 
-    public get uitextCloseDialogTitle() {
-        return this.intlService.localizeText("INFO_CLOSE_DIALOGUE_TITRE");
-    }
-
-    public get uitextCloseDialogText() {
-        return this.intlService.localizeText("INFO_CLOSE_DIALOGUE_TEXT");
-    }
-
-    public get uitextCloseDialogYes() {
-        return this.intlService.localizeText("INFO_OPTION_YES");
-    }
-
-    public get uitextCloseDialogNo() {
-        return this.intlService.localizeText("INFO_OPTION_NO");
-    }
-
     ngOnInit() {
         this.intlService.addObserver(this);
         this.formulaireService.addObserver(this);
@@ -391,4 +380,16 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
     public saveCalculator() {
         this.formulaireService.saveForm(this._formulaire);
     }
+
+    public closeCalculator() {
+        const dialogRef = this.confirmCloseCalcDialog.open(
+            DialogConfirmCloseCalcComponent,
+            { disableClose: true }
+        );
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                this.onCloseForm();
+            }
+        });
+    }
 }

src/locale/messages.fr.json

@@ -48,7 +48,7 @@
     "INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_1": "Partiellement noyé",
     "INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_2": "Noyé",
     "INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_3": "Débit nul",
-    "INFO_EMPTY_SESSION_DIALOGUE_TEXT": "Attention ! Toutes les calculettes ouvertes seront perdues. Continuer ?",
+    "INFO_EMPTY_SESSION_DIALOGUE_TEXT": "Attention ! Toutes les calculettes ouvertes seront perdues. Continuer ?",
     "INFO_EMPTY_SESSION_DIALOGUE_TITRE": "Démarrer une nouvelle session",
     "INFO_EXTRARES_ENUM_OUVRAGE_Q_MODE_0": "Surface libre",
     "INFO_EXTRARES_ENUM_OUVRAGE_Q_MODE_1": "En charge",