Merge pull request #69 from AlineRinquin/component-alert

Component alert

src/app/app.module.ts

@@ -43,6 +43,7 @@ import localeFr from '@angular/common/locales/fr';
 import { CardAvatarComponent } from './components/card-avatar/card-avatar.component';
 import { HumeurComponent } from './components/humeur/humeur.component';
 import { DeconnexionComponent } from './components/deconnexion/deconnexion.component';
+import { AlertComponent } from './components/alert/alert.component';
 registerLocaleData(localeFr)
 
 @NgModule({
@@ -82,7 +83,8 @@ registerLocaleData(localeFr)
     PageUpdateAccountComponent,
     CardAvatarComponent,
     DeconnexionComponent,
-    HumeurComponent
+    HumeurComponent,
+    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:50%;transform: translateX(50%);width:600px; text-align:center;">
+    {{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/components/signin/signin.component.html

@@ -27,10 +27,13 @@
     <!-- <div *ngIf="errorForm">
       <p class="text-danger">Il manque des informations dans le formulaire...</p>
     </div> -->
-    <div *ngIf="isShow">
+    
+    <app-alert *ngIf="isShow" [alert]="alert" (eventClose)="onClickCloseAlert();"></app-alert>
+    
+    <!-- <div *ngIf="isShow">
       <div class="alert alert-{{alert.type}}" role="alert">
         {{alert.content}}
       </div>
-    </div>
+    </div> -->
   </main>
 </div>

src/app/components/signin/signin.component.ts

@@ -44,4 +44,9 @@ export class SigninComponent implements OnInit {
       this.isShow = true;
     }
   }
+
+  onClickCloseAlert(){
+    console.log('fermeture');
+    this.isShow = ! this.isShow;
+  }
 }

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

@@ -1,7 +1,9 @@
 <app-header></app-header>
 <app-side-bar></app-side-bar>
 
-<div
+<app-alert *ngIf="isShow" [alert]="alert" (eventClose)="onClickCloseAlert();"></app-alert>
+
+<!-- <div
   class="alert alert-{{ alert.type }}"
   role="alert"
   style="position: absolute; z-index: 999; top: 50%; left: 40%; width: 500px"
@@ -18,7 +20,7 @@
   >
     <span aria-hidden="true">&times;</span>
   </button>
-</div>
+</div> -->
 
 <div style="display: flex">
   <div style="width: 150px">