bakground color side bar essai alert pas fini cursor pointer

src/app/components/fiche-contact/fiche-contact.component.ts

@@ -10,10 +10,14 @@ export class FicheContactComponent implements OnInit {
   @Input() personne: any;
   @Output() clickDelete = new EventEmitter();
   parent: boolean;
+  isShow: boolean;
+  alert:any;
 
 
   constructor(private tokenService: TokenService) {
     this.parent = false;
+    this.isShow = false;
+    this.alert = "";
   }
 
   ngOnInit(): void {
@@ -26,7 +30,8 @@ export class FicheContactComponent implements OnInit {
 
   // supprime le contact
   onClickDelete(numPerson: number){
-    window.alert("Le contact à bien été supprimé!")
+    this.alert={"type":"succes", "content":"le contact a été supprimé mother fucker!!!!!!!!!"};
+    this.isShow = true;
     this.clickDelete.emit(numPerson);
   }
 }

src/app/pages/page-ajout-contact/page-ajout-contact.component.html

@@ -1,7 +1,7 @@
 <app-header></app-header>
 <div class="row">
   <div class="col-md-auto">
-    <app-side-bar></app-side-bar>
+    <app-side-bar [backgroundColor]="'#5a1e63'"></app-side-bar>
   </div>
   <div class="ajoutContact-form text-center">
     <h3>Ajouter un contact</h3>
@@ -87,53 +87,6 @@
           <label for="floatingInputfirstName">Adresse</label>
         </div>
 
-        <div class="form-floating">
-          <input
-            type="text"
-            class="form-control"
-            id="floatingInputTelephone"
-            placeholder=""
-            name="telephone"
-            formControlName="telephoneFc"
-          />
-          <label for="floatingInputfirstName">Téléphone</label>
-        </div>
-        <div class="form-floating">
-          <input
-            type="email"
-            class="form-control"
-            id="floatingInput"
-            placeholder=""
-            name="email"
-            formControlName="emailFc"
-          />
-          <label for="floatingInput">Adresse email</label>
-        </div>
-
-        <div class="form-floating">
-          <input
-            type="date"
-            class="form-control"
-            id="floatingInputdateNaissance"
-            placeholder=""
-            name="dateNaissance"
-            formControlName="dateNaissanceFc"
-          />
-          <label for="floatingInputfirstName">Date de naissance</label>
-        </div>
-
-        <div class="form-floating">
-          <input
-            type="text"
-            class="form-control"
-            id="floatingInputAdresse"
-            placeholder=""
-            name="adresse"
-            formControlName="adresseFc"
-          />
-          <label for="floatingInputfirstName">Adresse</label>
-        </div>
-
         <button
           class="w-100 btn btn-lg btn-secondary"
           type="submit"

src/app/pages/page-modifier-contact/page-modifier-contact.component.html

@@ -1,7 +1,7 @@
 <app-header></app-header>
 <div class="row">
     <div class="col-md-auto">
-        <app-side-bar></app-side-bar>
+        <app-side-bar [backgroundColor]="'#5a1e63'"></app-side-bar>
     </div>
 
 <div class="modifContact-form text-center">

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

@@ -2,9 +2,15 @@
 
 <div class="row">
   <div class="col-md-auto">
-    <app-side-bar></app-side-bar>
+    <app-side-bar [backgroundColor]="'#5a1e63'"></app-side-bar>
   </div>
 
+  <app-alert
+  *ngIf="isShow"
+  [alert]="alert"
+  (eventClose)="onClickCloseAlert()"
+></app-alert>
+
   <div class="col compte text-center py-3 border">
     <div>
       <button
@@ -34,7 +40,7 @@
       <div class="row justify-content-evenly">
         <div class="col-4">
           <div
-            class="row my-3 d-flex justify-content-center flex-row"
+            class="row my-3 d-flex justify-content-center flex-row pointer"
             *ngFor="let personne of listContact"
             (click)="onClick(personne)"
           >

src/app/pages/page-repertoire/page-repertoire.component.scss

@@ -31,4 +31,8 @@
 .h4 {
   color: black;
   font-weight: bold;
+}
+
+.pointer{
+  cursor: pointer;
 }

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

@@ -17,6 +17,9 @@ export class PageRepertoireComponent implements OnInit {
   keyword: any;
   openDetails: any;
   parent: boolean;
+  isShow: boolean;
+  alert:any;
+  
 
   constructor(
     private repertoireService: RepertoireService,
@@ -28,6 +31,8 @@ export class PageRepertoireComponent implements OnInit {
     this.listFull = [];
     this.listContactInfo = '';
     this.parent = false;
+    this.isShow = false;
+    this.alert = "";
   }
 
   ngOnInit(): void {
@@ -45,7 +50,7 @@ export class PageRepertoireComponent implements OnInit {
     });
   }
 
-  // Méthode pour récuper ce qui est saisi dans l'input
+  // Méthode pour récuper ce qui est saisi dans l'input pour effectuer une recherche
   onSearchChange(prenom: string): void {
     this.keyword = prenom;
     if (prenom == '') {
@@ -73,12 +78,20 @@ export class PageRepertoireComponent implements OnInit {
   onClickDelete(contactId: number){
     this.repertoireService.deleteContact(contactId).subscribe((resp) => {
       if(contactId) {
+        this.alert={"type":"succes", "content":"le contact a été supprimé mother fucker!!!!!!!!!"};
+        this.isShow = true;
         this.listContact.forEach(contactId => console.log(contactId))
       }else{
-        window.alert("Le contact ne peut pas être supprimé!")
+        this.alert={"type":"danger", "content":"le contact n'a pas été supprimé"};
+        this.isShow = true;
       }
       this.router.navigate(['repertoire/']);
     });
     window.location.reload();
   }
+
+    // methode pour fermer l'alert de message
+    onClickCloseAlert(){
+      this.isShow = ! this.isShow;
+    }
 }