add loader + dialog box + maj port

angular.json

@@ -100,7 +100,12 @@
               "browserTarget": "angularTest:build:development"
             }
           },
-          "defaultConfiguration": "development"
+          "defaultConfiguration": "development",
+          "options": {
+            "port": 9002
+          }
+
+
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { EmployeeService } from './service/employee.service';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import {MatDialogModule} from '@angular/material/dialog';
 import { MatIconModule } from "@angular/material/icon";
 import { Custom_Ng2SearchPipe } from './../Custom_Ng2SearchPipe';
 import { FormsModule } from '@angular/forms';
@@ -21,6 +22,7 @@ import { CreateJoinsPageComponent } from './create-joins-page/create-joins-page.
 import { JoinsTableComponent } from './joins-table/joins-table.component';
 import { WhereCardComponent } from './where-card/where-card.component';
 import { ColumnsCardComponent } from './columns-card/columns-card.component';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'
 
 @NgModule({
   declarations: [
@@ -44,7 +46,9 @@ import { ColumnsCardComponent } from './columns-card/columns-card.component';
     MatStepperModule,
     MatToolbarModule,
     MatIconModule,
-    FormsModule
+    FormsModule,
+    MatDialogModule,
+    MatProgressSpinnerModule
 
   ],
   providers: [EmployeeService],

src/app/navbar/navbar.component.html

@@ -26,6 +26,7 @@
 
             <button (click)="applyResetDatabase()" class="text-white bg-orange-400 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:animate-pulse">MAJ BDD</button>
 
+            <mat-spinner *ngIf="isLoading" diameter="30"></mat-spinner>
           </div>
         </div>
       </div>
@@ -52,6 +53,10 @@
       <a routerLink="joins" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Jointures</a>
 
       <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
+
+      <button (click)="applyResetDatabase()" class="ml-2 text-white bg-orange-400 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:animate-pulse">MAJ BDD</button>
+
+      <mat-spinner *ngIf="isLoading" diameter="30" class="ml-2 mt-2"></mat-spinner>
     </div>
   </div>
 </nav>

src/app/navbar/navbar.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { ResetDataService } from '../service/reset_data.service';
 import { Router, RouterModule } from '@angular/router';
 import { AppRoutingModule } from '../app-routing.module';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-navbar',
@@ -11,6 +12,7 @@ import { AppRoutingModule } from '../app-routing.module';
 })
 export class NavbarComponent {
   public mobileOpen: boolean = false;
+  public isLoading: boolean = false;
 
   constructor(private resetDataService: ResetDataService, private router: Router){}
 
@@ -19,7 +21,18 @@ export class NavbarComponent {
   }
 
   public applyResetDatabase():void {
-    this.resetDataService.resetDatabase().subscribe();
+    if(window.confirm('Êtes-vous sûr de vouloir recharger le BDD ? Cela peut prendre du temps !')){
-    this.router.navigateByUrl('');
+      this.isLoading = true;
+      this.resetDataService.resetDatabase().subscribe(
+        () => {
+          //this.router.navigateByUrl('');
+          this.isLoading = false;
+        },
+        (error: HttpErrorResponse) => {
+          alert(error.message)
         }
+      );
+     }
+  }
+
 }