Ajouter un loader sur l'ajout des sauts

Front/skydivelogs-app/src/app/app.component.css

@@ -1,6 +1,6 @@
 .hamburger__icon {
   position: relative;
-  z-index: 50;
+  /* z-index: 101; */
   height: 1rem;
   margin-right: 1rem;
   cursor: pointer;
@@ -19,7 +19,7 @@
   position: absolute;
   width: 200px;
   overflow: hidden;
-  z-index: 50;
+  z-index: 101;
   background-color: grey;
   height: 650px;
   padding: 5px;

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -1,4 +1,4 @@
-<form class="formNewJumps" (ngSubmit)="onFormSubmit()">
+<form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="allDatasLoaded() else loading">
   <mat-form-field>
     <mat-label>Choose the jump type</mat-label>
     <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType" name="selectedJumpType">
@@ -97,3 +97,7 @@
   <br />
   <button class="btn btn-primary" *ngIf="isValidatedForm()">Submit</button>
 </form>
+
+<ng-template #loading>
+  <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+</ng-template>

Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts

@@ -1,21 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
-import { JumpTypeResp } from '../../models/jumpType';
+import { JumpTypeResp } from "../../models/jumpType";
-import { AircraftResp } from '../../models/aircraft';
+import { AircraftResp } from "../../models/aircraft";
-import { DropZoneResp } from '../../models/dropzone';
+import { DropZoneResp } from "../../models/dropzone";
-import { DateService } from '../../services/date.service';
+import { DateService } from "../../services/date.service";
-import { GearResp } from '../../models/gear';
+import { GearResp } from "../../models/gear";
-import { ServiceComm } from '../../services/service-comm.service';
+import { ServiceComm } from "../../services/service-comm.service";
-import { DropzoneService } from '../../services/dropzone.service';
+import { DropzoneService } from "../../services/dropzone.service";
-import { AircraftService } from '../../services/aircraft.service';
+import { AircraftService } from "../../services/aircraft.service";
-import { JumpService } from '../../services/jump.service';
+import { JumpService } from "../../services/jump.service";
-import { JumpTypeService } from '../../services/jump-type.service';
+import { JumpTypeService } from "../../services/jump-type.service";
-import { GearService } from '../../services/gear.service';
+import { GearService } from "../../services/gear.service";
-import { isNumber } from 'util';
+import { isNumber } from "util";
 
 @Component({
-  selector: 'app-new-jump',
+  selector: "app-new-jump",
-  templateUrl: './new-jump.component.html',
+  templateUrl: "./new-jump.component.html",
-  styleUrls: ['./new-jump.component.css']
+  styleUrls: ["./new-jump.component.css"]
 })
 export class NewJumpComponent implements OnInit {
   beginDate: Date;
@@ -33,6 +33,7 @@ export class NewJumpComponent implements OnInit {
   private listOfDropZone: Array<DropZoneResp>;
   listOfFilteredDropZone: Array<DropZoneResp>;
   listOfGear: Array<GearResp>;
+  private countDatasLoaded: number;
 
   constructor(
     private serviceComm: ServiceComm,
@@ -45,7 +46,7 @@ export class NewJumpComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.serviceComm.UpdatedComponentTitle('Add a new jump');
+    this.serviceComm.UpdatedComponentTitle("Add a new jump");
 
     this.endDate = new Date();
     this.beginDate = this.dateService.AddDays(new Date(), -1);
@@ -78,15 +79,20 @@ export class NewJumpComponent implements OnInit {
       this.selectedGear !== undefined &&
       this.selectedAircraft !== undefined &&
       this.selectedJumpType !== undefined &&
-      this.exitAltitude !== undefined && isNumber(this.exitAltitude) &&
+      this.exitAltitude !== undefined &&
-      this.deployAltitude !== undefined && isNumber(this.deployAltitude) &&
+      isNumber(this.exitAltitude) &&
-      this.countOfJumps !== undefined && isNumber(this.countOfJumps)
+      this.deployAltitude !== undefined &&
+      isNumber(this.deployAltitude) &&
+      this.countOfJumps !== undefined &&
+      isNumber(this.countOfJumps)
     );
   }
 
   private getListOfJumpTypes() {
     this.serviceJumpType.getListOfJumpTypes().subscribe(data => {
       this.listOfJumpType = data;
+      this.countDatasLoaded = 1;
+
       this.getListOfAircrafts();
       this.getListOfDropZones();
       this.getListOfGears();
@@ -96,6 +102,7 @@ export class NewJumpComponent implements OnInit {
   private getListOfAircrafts() {
     this.serviceAircraft.getListOfAircrafts().subscribe(data => {
       this.listOfAircraft = data;
+      this.countDatasLoaded++;
     });
   }
 
@@ -104,16 +111,17 @@ export class NewJumpComponent implements OnInit {
       data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
       this.listOfDropZone = data;
       this.listOfFilteredDropZone = data;
+      this.countDatasLoaded++;
     });
   }
 
   private getListOfGears() {
     this.serviceGear.getListOfGears().subscribe(data => {
       this.listOfGear = data;
+      this.countDatasLoaded++;
     });
   }
 
-
   public displayFn(data?: JumpTypeResp): string | undefined {
     return data ? data.name : undefined;
   }
@@ -122,6 +130,12 @@ export class NewJumpComponent implements OnInit {
     const filterValue = event.toLowerCase();
 
     this.listOfFilteredDropZone = this.listOfDropZone;
-    this.listOfFilteredDropZone = this.listOfFilteredDropZone.filter(option => option.name.toLowerCase().includes(filterValue));
+    this.listOfFilteredDropZone = this.listOfFilteredDropZone.filter(option =>
+      option.name.toLowerCase().includes(filterValue)
+    );
+  }
+
+  public allDatasLoaded(): boolean {
+    return this.countDatasLoaded == 4;
   }
 }