ajout du component alert pour les confirmations d'actions

src/app/app.module.ts

@@ -39,6 +39,7 @@ import { PageCreationTeamComponent } from './pages/page-creation-team/page-creat
 import { AutofocusFixModule  } from 'ngx-autofocus-fix';
 import { EmoticonComponent } from './emoticon/emoticon.component';
 import { DayPilot, DayPilotModule } from "@daypilot/daypilot-lite-angular";
+import { AlertComponent } from './components/alert/alert.component';
 
 @NgModule({
   declarations: [
@@ -75,6 +76,7 @@ import { DayPilot, DayPilotModule } from "@daypilot/daypilot-lite-angular";
     PageModifierContactComponent,
     PageCreationTeamComponent,
     EmoticonComponent,
+    AlertComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/alert/alert.component.html

@@ -0,0 +1,4 @@
+<div class="alert alert-{{alert.type}} alert-dismissible fade show" role="alert" style="position:absolute;z-index:9999;top:10px;right:10px;">
+    {{alert.content}}
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="onClickCloseAlert()"></button>
+  </div>

src/app/components/alert/alert.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertComponent } from './alert.component';
+
+describe('AlertComponent', () => {
+  let component: AlertComponent;
+  let fixture: ComponentFixture<AlertComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AlertComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.scss']
+})
+export class AlertComponent implements OnInit {
+  @Input() alert:any;
+  @Output() eventClose = new EventEmitter<string>();
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  
+  onClickCloseAlert(){
+    //console.log('fermeture from component');
+    this.eventClose.emit('true');
+  }
+}

src/app/pages/page-agenda/page-agenda.component.html

@@ -1,12 +1,7 @@
 <app-header></app-header>
 
 
-<div class="alert alert-{{alert.type}}" role="alert" style="position:absolute;z-index:999;top:50%;left:40%; width: 500px;" *ngIf="isShow" id="showAlert">
+<app-alert *ngIf="alert" id="showAlert" [alert]="alert" (eventClose)="closeAlert($event)"></app-alert>
-    {{alert.content}}
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="onClickCloseAlert()">
-        <span aria-hidden="true">&times;</span>
-    </button>
-</div>
 
 <div style="display: flex;">
     <div style="width:150px;">

src/app/pages/page-agenda/page-agenda.component.ts

@@ -13,14 +13,12 @@ export class PageAgendaComponent implements AfterViewInit {
 
   userId : any;
   teamId : any;
-  isShow: boolean;
   alert:any;
 
   @ViewChild("navigator") navigator!: DayPilotNavigatorComponent;
   @ViewChild("calendar") calendar!: DayPilotCalendarComponent;
 
   constructor(private evenementService:EvenementService) {
-    this.isShow = false;
     this.alert = "";
   }
 
@@ -45,9 +43,9 @@ export class PageAgendaComponent implements AfterViewInit {
 
   events: DayPilot.EventData[] = [];
 
-  onClickCloseAlert(){
+  closeAlert(value:any){
-    console.log('fermeture');
+    //console.log('fermeture'+value);
-    this.isShow = ! this.isShow;
+    this.alert="";
   }
 
   ngAfterViewInit(): void {
@@ -88,12 +86,10 @@ export class PageAgendaComponent implements AfterViewInit {
           next: result => {
             this.viewChange();
             this.alert={"type":"success", "content":"L'évènement à bien été modifié"};
-            this.isShow = true;
           },
           error: err => {
             this.viewChange();
             this.alert={"type":"danger", "content":"Problème lors de la modification de l'évenment"};
-            this.isShow = true;
           },
           complete: () => console.log('DONE!')
         }
@@ -130,13 +126,11 @@ export class PageAgendaComponent implements AfterViewInit {
       this.evenementService.addEvenements(event).subscribe({
         next: result => {
           this.viewChange();
-          this.alert={"type":"success", "content":"L'évènement à été correctement ajouté au calendrier"};
+          this.alert={"type":"success", "content":"L'évènement à correctement été  ajouté au calendrier"};
-          this.isShow = true;
         },
         error: err => {
           this.viewChange();
           this.alert={"type":"danger", "content":"Problème lors de l'ajout de l'évenment"};
-          this.isShow = true;
         },
         complete: () => console.log('DONE!')
       });
@@ -147,13 +141,11 @@ export class PageAgendaComponent implements AfterViewInit {
       this.evenementService.deleteEvenements(Number(args.e.id())).subscribe({
         next: result => {
           this.viewChange();
-          this.alert={"type":"success", "content":"L'évènement à été correctement supprimé du calendrier"};
+          this.alert={"type":"success", "content":"L'évènement à correctement été supprimé du calendrier"};
-          this.isShow = true;
         },
         error: err => {
           this.viewChange();
           this.alert={"type":"danger", "content":"Problème lors de la suppression de l'évenment"};
-          this.isShow = true;
         },
         complete: () => console.log('DONE!')
       })
@@ -175,12 +167,10 @@ export class PageAgendaComponent implements AfterViewInit {
           next: result => {
             this.viewChange();
             this.alert={"type":"success", "content":"L'évènement à bien été modifié"};
-            this.isShow = true;
           },
           error: err => {
             this.viewChange();
             this.alert={"type":"danger", "content":"Problème lors de la modification de l'évenment"};
-            this.isShow = true;
           },
           complete: () => console.log('DONE!')
         }

src/index.html

@@ -6,7 +6,6 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 </head>
 <body>
   <app-root></app-root>