Ajout d'une pop-in pour l'ajout

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html

@@ -1,6 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button (click)="add()">Add a aircraft</button>
-  <app-new-drop-zone *ngIf="showAddForm === true"></app-new-drop-zone>
+  <button mat-button (click)="openDialogToAdd()" class="btn btn-primary">Add a drop zone</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="isfavorite">

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts

@@ -1,39 +1,41 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";
+import { MatDialog } from "@angular/material/dialog";
 
-import { DropZoneResp } from '../../models/dropzone';
-import { DropzoneService } from '../../services/dropzone.service';
-import { ServiceComm } from '../../services/service-comm.service';
+import { DropZoneResp } from "../../models/dropzone";
+import { DropzoneService } from "../../services/dropzone.service";
+import { ServiceComm } from "../../services/service-comm.service";
+import { NewDropZoneComponent } from "../new-drop-zone/new-drop-zone.component";
 
 @Component({
-  selector: 'app-list-of-dzs',
-  templateUrl: './list-of-dzs.component.html',
-  styleUrls: ['./list-of-dzs.component.css']
+  selector: "app-list-of-dzs",
+  templateUrl: "./list-of-dzs.component.html",
+  styleUrls: ["./list-of-dzs.component.css"]
 })
 export class ListOfDzsComponent implements OnInit {
   public displayedColumns: Array<string> = [
-    'isfavorite',
-    'id',
-    'name',
-    'latitude',
-    'longitude',
-    'address',
-    'email',
-    'type'
+    "isfavorite",
+    "id",
+    "name",
+    "latitude",
+    "longitude",
+    "address",
+    "email",
+    "type"
   ];
   public dataSourceTable: MatTableDataSource<DropZoneResp>;
   public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  public showAddForm: boolean;
 
   constructor(
     private serviceApi: DropzoneService,
-    private serviceComm: ServiceComm
-  ) { }
+    private serviceComm: ServiceComm,
+    public dialog: MatDialog
+  ) {}
 
   ngOnInit() {
-    this.serviceComm.UpdatedComponentTitle('List of DZs');
+    this.serviceComm.UpdatedComponentTitle("List of DZs");
     this.getListOfDropZones();
   }
 
@@ -56,7 +58,7 @@ export class ListOfDzsComponent implements OnInit {
     dropzone.isFavorite = this.serviceApi.RemoveFavoriteDropZone(dropzone);
   }
 
-  public add() {
-    this.showAddForm = true;
+  openDialogToAdd() {
+    this.dialog.open(NewDropZoneComponent);
   }
 }