Confirmer la création d'une nouvelle session: modale (dialog) angular-material

src/app/app.component.html

@@ -67,7 +67,7 @@
           <mat-icon>add</mat-icon>
           {{ uitextSidenavNewCalc }}
         </a>
-        <a id="side-nav-empty-session" (click)="emptySession(); sidenav.close()">
+        <a id="side-nav-empty-session" (click)="sidenav.close(); emptySession()">
             <mat-icon>insert_drive_file</mat-icon>
             {{ uitextSidenavEmptySession }}
         </a>

src/app/app.component.ts

@@ -18,7 +18,8 @@ import { SaveCalcDialogAnchorDirective } from "./components/save-calculator/save
 import { SaveCalculatorComponent } from "./components/save-calculator/save-calculator.component";
 import { nghydDateRev } from "../date_revision";
 
-import { MatSidenav, MatToolbar } from "@angular/material";
+import { MatSidenav, MatToolbar, MatDialog } from "@angular/material";
+import { DialogConfirmEmptySessionComponent } from "./components/dialog-confirm-empty-session/dialog-confirm-empty-session.component";
 
 
 @Component({
@@ -73,7 +74,8 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     private errorService: ErrorService,
     private router: Router,
     private formulaireService: FormulaireService,
-    private httpService: HttpService
+    private httpService: HttpService,
+    private confirmEmptySessionDialog: MatDialog
   ) {
     ServiceFactory.instance.applicationSetupService = appSetupService;
     ServiceFactory.instance.paramService = paramService;
@@ -342,13 +344,18 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
    * restarts a fresh session by closing all calculators
    */
   public emptySession() {
-    // @TODO replace with nice modal
-    if (confirm(this.intlService.localizeText("INFO_EMPTY_SESSION_DIALOGUE_TEXT"))) {
-      for (const c of this._calculators) {
-        const form = this.formulaireService.getFormulaireFromId(c.uid);
-        this.closeCalculator(form);
+    const dialogRef = this.confirmEmptySessionDialog.open(
+      DialogConfirmEmptySessionComponent,
+      { disableClose: true }
+    );
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        for (const c of this._calculators) {
+          const form = this.formulaireService.getFormulaireFromId(c.uid);
+          this.closeCalculator(form);
+        }
       }
-    }
+    });
   }
 
   public loadSession() {

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { MatButtonModule, MatCheckboxModule, MatIconModule, MatSelectModule, MatTabsModule, MatSidenavModule,
-  MatToolbarModule, MatMenuModule } from "@angular/material";
+  MatToolbarModule, MatMenuModule, MatDialogModule } from "@angular/material";
 import { FlexLayoutModule } from "@angular/flex-layout";
 import { MDBBootstrapModule } from "angular-bootstrap-md";
 import { HttpClientModule } from "@angular/common/http";
@@ -16,6 +16,7 @@ import { ParamService } from "./services/param/param.service";
 import { InternationalisationService } from "./services/internationalisation/internationalisation.service";
 import { HttpService } from "./services/http/http.service";
 import { ApplicationSetupService } from "./services/app-setup/app-setup.service";
+
 import { AppComponent } from "./app.component";
 import { NgParamInputComponent } from "./components/ngparam-input/ngparam-input.component";
 import { FieldSetComponent } from "./components/field-set/field-set.component";
@@ -53,6 +54,7 @@ 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";
 
 const appRoutes: Routes = [
   { path: "list", component: CalculatorListComponent },
@@ -63,18 +65,15 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(
-      appRoutes,
-      {
-        useHash: true, // prevents reloading whole app when typing url in browser's navigation bar
-        enableTracing: false // debugging purposes only
-      }
-    ),
-    BrowserModule,
-    NgxMdModule.forRoot(),
     BrowserAnimationsModule,
+    BrowserModule,
+    ChartModule,
+    HttpClientModule,
+    FlexLayoutModule,
+    FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
     MatButtonModule,
     MatCheckboxModule,
+    MatDialogModule,
     MatIconModule,
     MatMenuModule,
     MatSelectModule,
@@ -82,39 +81,69 @@ const appRoutes: Routes = [
     MatTabsModule,
     MatToolbarModule,
     MDBBootstrapModule.forRoot(),
-    FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
-    HttpClientModule,
-    FlexLayoutModule,
-    ChartModule
+    NgxMdModule.forRoot(),
+    RouterModule.forRoot(
+      appRoutes,
+      {
+        useHash: true, // prevents reloading whole app when typing url in browser's navigation bar
+        enableTracing: false // debugging purposes only
+      }
+    )
   ],
   declarations: [ // composants, pipes et directives
     AppComponent,
-    NgParamInputComponent,
-    FieldSetComponent, FieldsetContainerComponent,
-    ParamFieldLineComponent, NgParamMinComponent, NgParamMaxComponent, NgParamStepComponent,
-    ParamValuesComponent, ValueListComponent,
-    SelectFieldLineComponent, CheckFieldLineComponent,
-    LogComponent, LogEntryComponent,
-    CalculatorListComponent,
     ApplicationSetupComponent,
     BaseParamInputComponent,
-    GenericCalculatorComponent, CalculatorNameComponent,
-    // AlertDialog,
-    CalculatorResultsComponent, FixedVarResultsComponent, SectionResultsComponent, RemousResultsComponent,
-    ResultsGraphComponent, GraphTypeSelectComponent,
-    CalcCanvasComponent, SectionCanvasComponent,
-    ResultElementBaseComponent, HorizontalResultElementComponent, VerticalResultElementComponent,
-    FixedResultsComponent, VarResultsComponent,
-    LoadCalculatorComponent, LoadCalcDialogAnchorDirective,
-    SaveCalculatorComponent, SaveCalcDialogAnchorDirective,
-    ParamLinkComponent
+    CalcCanvasComponent,
+    CalculatorListComponent,
+    CalculatorNameComponent,
+    CalculatorResultsComponent,
+    CheckFieldLineComponent,
+    DialogConfirmEmptySessionComponent,
+    FieldSetComponent,
+    FieldsetContainerComponent,
+    FixedResultsComponent,
+    FixedVarResultsComponent,
+    GenericCalculatorComponent,
+    GraphTypeSelectComponent,
+    HorizontalResultElementComponent,
+    LoadCalcDialogAnchorDirective,
+    LoadCalculatorComponent,
+    LogComponent,
+    LogEntryComponent,
+    NgParamInputComponent,
+    NgParamMaxComponent,
+    NgParamMinComponent,
+    NgParamStepComponent,
+    ParamFieldLineComponent,
+    ParamLinkComponent,
+    ParamValuesComponent,
+    RemousResultsComponent,
+    ResultElementBaseComponent,
+    ResultsGraphComponent,
+    SaveCalcDialogAnchorDirective,
+    SaveCalculatorComponent,
+    SectionCanvasComponent,
+    SectionResultsComponent,
+    SelectFieldLineComponent,
+    ValueListComponent,
+    VarResultsComponent,
+    VerticalResultElementComponent
+  ],
+  entryComponents: [
+    DialogConfirmEmptySessionComponent,
+    LoadCalculatorComponent,
+    SaveCalculatorComponent
   ],
-  // entryComponents: [AlertDialog],
-  entryComponents: [LoadCalculatorComponent, SaveCalculatorComponent],
   providers: [ // services
-    ParamService, InternationalisationService, HttpService, FormulaireService, ApplicationSetupService
+    ApplicationSetupService,
+    FormulaireService,
+    HttpService,
+    InternationalisationService,
+    ParamService
   ],
-  schemas: [NO_ERRORS_SCHEMA],
-  bootstrap: [AppComponent]
+  schemas: [ NO_ERRORS_SCHEMA ],
+  bootstrap: [ AppComponent ]
 })
+
 export class AppModule { }

src/app/components/alert-dialog/alert-dialog.component.ts

-// import { Component, Input } from '@angular/core';
-// import { MdDialog } from '@angular/material';
-
-// @Component({
-//     selector: 'dialog1',
-//     template: `
-//   <h2>{{_text}}</h2>
-//   `,
-//     providers: [MdDialog]
-// })
-// export class AlertDialog {
-//     /**
-//      * text input attribute
-//      */
-//     private _text: string;
-
-//     // constructor(private _dialog: MdDialog) { }
-//     // public get dialog() {
-//     //     return this._dialog;
-//     // }
-
-//     @Input()
-//     public set text(s: string) {
-//         this._text = s;
-//     }
-
-//     // public run(t: string) {
-//     //     let dialogRef = this._dialog.open(AlertDialog);
-//     //     //        let ad: AlertDialog = dialogRef.componentInstance;
-//     //     //      ad.text = "azeaze";
-//     //     this._text = t;
-//     // }
-// }

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

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

src/app/components/dialog-confirm-empty-session/dialog-confirm-empty-session.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-empty-session",
+    templateUrl: "dialog-confirm-empty-session.component.html",
+})
+export class DialogConfirmEmptySessionComponent {
+
+    constructor(
+        public dialogRef: MatDialogRef<DialogConfirmEmptySessionComponent>,
+        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 uitextEmptySessionTitle() {
+      return this.intlService.localizeText("INFO_EMPTY_SESSION_DIALOGUE_TITRE");
+    }
+
+    public get uitextEmptySessionBody() {
+      return this.intlService.localizeText("INFO_EMPTY_SESSION_DIALOGUE_TEXT");
+    }
+
+}

src/index.html

@@ -8,28 +8,6 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <!-- ressources pour faire fonctionner le toggler de la navbar -->
-  <!-- <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" -->
-  <!--script href="dependencies/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
-    crossorigin="anonymous"></script>-->
-
-  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" -->
-  <script href="dependencies/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
-    crossorigin="anonymous"></script>
-
-  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" -->
-  <script href="dependencies/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
-    crossorigin="anonymous"></script>
-
-  <!-- Load the Angular Material stylesheet -->
-  <!--
-  <link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
-  <style>
-    body {
-      font-family: Roboto, Arial, sans-serif;
-    }
-  </style>
--->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 </head>