From 61cacda89b7affdebdbb1834e97e0c8a4ac8569b Mon Sep 17 00:00:00 2001
From: AlineRinquin <aline.rinquin.ar@gmail.com>
Date: Tue, 15 Feb 2022 13:58:06 +0100
Subject: [PATCH 1/2] fonction delete

---
 package-lock.json                             | 14 +++++++++++
 package.json                                  |  1 +
 .../fiche-contact/fiche-contact.component.ts  |  1 +
 .../page-repertoire.component.ts              | 23 ++++++++-----------
 src/app/services/repertoire.service.ts        |  5 ++--
 5 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1c8f23f..7272556 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "~13.0.0",
         "@angular/router": "~13.0.0",
         "bootstrap": "^5.1.3",
+        "bootstrap-icons": "^1.8.1",
         "jwt-decode": "^3.1.2",
         "ngx-autofocus-fix": "^1.0.4",
         "rxjs": "~7.4.0",
@@ -3620,6 +3621,14 @@
         "@popperjs/core": "^2.10.2"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
+      "integrity": "sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -14170,6 +14179,11 @@
       "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
       "requires": {}
     },
+    "bootstrap-icons": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
+      "integrity": "sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 1507a28..6568a98 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "~13.0.0",
     "@angular/router": "~13.0.0",
     "bootstrap": "^5.1.3",
+    "bootstrap-icons": "^1.8.1",
     "jwt-decode": "^3.1.2",
     "ngx-autofocus-fix": "^1.0.4",
     "rxjs": "~7.4.0",
diff --git a/src/app/components/fiche-contact/fiche-contact.component.ts b/src/app/components/fiche-contact/fiche-contact.component.ts
index cc46263..f6c1a8a 100644
--- a/src/app/components/fiche-contact/fiche-contact.component.ts
+++ b/src/app/components/fiche-contact/fiche-contact.component.ts
@@ -14,6 +14,7 @@ export class FicheContactComponent implements OnInit {
   ngOnInit(): void {}
 
   onClickDelete(numPerson: number){
+    window.alert("Le contact à bien été supprimé!")
     this.clickDelete.emit(numPerson);
   }
 }
diff --git a/src/app/pages/page-repertoire/page-repertoire.component.ts b/src/app/pages/page-repertoire/page-repertoire.component.ts
index 99e0f66..b147389 100644
--- a/src/app/pages/page-repertoire/page-repertoire.component.ts
+++ b/src/app/pages/page-repertoire/page-repertoire.component.ts
@@ -33,16 +33,6 @@ export class PageRepertoireComponent implements OnInit {
       this.listContact = listContact;
       this.listFull = listContact;
     });
-
-    this.personneid = this.route.snapshot.paramMap.get('id');
-    console.log(this.personneid);
-
-    this.repertoireService
-      .getContactById(this.personneid)
-      .subscribe((listContactInfo: any) => {
-        console.log(listContactInfo);
-        this.listContactInfo = listContactInfo;
-      });
   }
 
   // Méthode pour récuper ce qui est saisi dans l'input
@@ -63,15 +53,20 @@ export class PageRepertoireComponent implements OnInit {
     this.listContact = prenom;
   }
 
-  // Méthode qui au click va ouvrir les détails d'un contat
+  // Méthode qui au click va ouvrir les détails d'un contact
   onClick(personne: any) {
     console.log(personne);
     this.openDetails = personne;
   }
 
-
-  onClickDelete(contact: Contact){
-    this.repertoireService.deleteContact(contact).subscribe((resp) => {
+  // Méthode qui au click va supprimer un contact
+  onClickDelete(contactId: number){
+    this.repertoireService.deleteContact(contactId).subscribe((resp) => {
+      if(contactId) {
+        this.listContact.forEach(contactId => console.log(contactId))
+      }else{
+        window.alert("Le contact ne peut pas être supprimé!")
+      }
       this.router.navigate(['repertoire/']);
     });
   }
diff --git a/src/app/services/repertoire.service.ts b/src/app/services/repertoire.service.ts
index a452854..cf9701b 100644
--- a/src/app/services/repertoire.service.ts
+++ b/src/app/services/repertoire.service.ts
@@ -27,12 +27,11 @@ export class RepertoireService {
 
   addContact(contact: Contact): Observable<any> {
     console.log(contact);
-
     return this.http.post(`${this.apiUrl}/contacts/add`, contact);
   }
 
-  deleteContact(contact: Contact): Observable<any> {
-    return this.http.delete(`${this.apiUrl}/contacts/delete/1`);
+  deleteContact(contactId: number): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/contacts/delete/${contactId}`);
   }
 
   updateContact(contact: Contact): Observable<any> {

From a881b6cee62c80690952367665a2749967fc9242 Mon Sep 17 00:00:00 2001
From: AlineRinquin <aline.rinquin.ar@gmail.com>
Date: Tue, 15 Feb 2022 15:37:22 +0100
Subject: [PATCH 2/2] ajout couleur

---
 src/app/models/contact.ts                     |  1 +
 .../page-ajout-contact.component.html         |  8 ++-
 .../page-ajout-contact.component.scss         | 47 +++++++++++++--
 .../page-ajout-contact.component.ts           |  4 +-
 .../page-modifier-contact.component.ts        |  4 +-
 .../page-repertoire.component.html            | 59 +++++++++++--------
 .../page-repertoire.component.scss            | 11 +++-
 7 files changed, 98 insertions(+), 36 deletions(-)

diff --git a/src/app/models/contact.ts b/src/app/models/contact.ts
index 539aab3..cee4c52 100644
--- a/src/app/models/contact.ts
+++ b/src/app/models/contact.ts
@@ -1,5 +1,6 @@
 export interface Contact {
   id: string;
+  couleur: string;
   nom: string;
   prenom: string;
   telephone: string;
diff --git a/src/app/pages/page-ajout-contact/page-ajout-contact.component.html b/src/app/pages/page-ajout-contact/page-ajout-contact.component.html
index 981a9c2..859ee3c 100644
--- a/src/app/pages/page-ajout-contact/page-ajout-contact.component.html
+++ b/src/app/pages/page-ajout-contact/page-ajout-contact.component.html
@@ -3,10 +3,14 @@
     <app-side-bar></app-side-bar>
 </div>
 <div class="ajoutContact-form text-center">
+    <h1>Ajouter un contact</h1>
     <main class="form-ajoutContact">
         <form  (ngSubmit)="onSubmit()" [formGroup]="ajoutContactForm">
-            <h1>Ajouter un contact</h1>
-
+            
+            <div class="form-floating">
+            <input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
+              formControlName="couleurFc">
+            </div>
 
             <div class="form-floating">
                 <input type="text" 
diff --git a/src/app/pages/page-ajout-contact/page-ajout-contact.component.scss b/src/app/pages/page-ajout-contact/page-ajout-contact.component.scss
index 0f5ceb6..062d238 100644
--- a/src/app/pages/page-ajout-contact/page-ajout-contact.component.scss
+++ b/src/app/pages/page-ajout-contact/page-ajout-contact.component.scss
@@ -1,14 +1,20 @@
 .login-form {
   height: 100vh;
   padding-top: 40px;
-  background-color: #f5f5f5;
+  background-color: #e286d3;
 }
 
 .form-ajoutContact {
   width: 100%;
   max-width: 330px;
   padding: 15px;
-  margin: auto;
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  border: solid 1px;
+  border-radius: 10px;
+  background-color: #fcddec;
+  border-color: #81164d;
 }
 
 .form-ajoutContact .checkbox {
@@ -20,12 +26,45 @@
 }
 
 .form-ajoutContact input[type="email"] {
-  margin-bottom: -1px;
+  margin-bottom: 10px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
+.form-ajoutContact input[type="color"] {
+  border: none;
+  margin-bottom: 10px;
+  margin-top: -70px;
+  margin-left: 100px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.form-ajoutContact input[type="color"]::-webkit-color-swatch {
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 80px;
+  height: 80px;
+}
+
+.form-ajoutContact input[type="text"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-ajoutContact input[type="date"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+
 .btn-secondary {
-  color: #fff;
+  margin-top: 10px;
+  background-color: #ffff;
+  color: rgb(255, 255, 255);
   background-color: #5a1e63 !important;
 }
diff --git a/src/app/pages/page-ajout-contact/page-ajout-contact.component.ts b/src/app/pages/page-ajout-contact/page-ajout-contact.component.ts
index d99669d..7de50de 100644
--- a/src/app/pages/page-ajout-contact/page-ajout-contact.component.ts
+++ b/src/app/pages/page-ajout-contact/page-ajout-contact.component.ts
@@ -42,8 +42,7 @@ export class PageAjoutContactComponent implements OnInit {
   }
 
   public onSubmit(): void {
-    console.log('value : ', this.ajoutContactForm.value);
-    console.log('form : ', this.ajoutContactForm);
+    const couleurValue = this.ajoutContactForm.value['couleurFc'];
     const firstNameValue = this.ajoutContactForm.value['firstNameFc'];
     const lastNameValue = this.ajoutContactForm.value['lastNameFc'];
     const telephoneValue = this.ajoutContactForm.value['telephoneFc'];
@@ -53,6 +52,7 @@ export class PageAjoutContactComponent implements OnInit {
 
     const contact: Contact = {
       id: '',
+      couleur: couleurValue,
       nom: lastNameValue,
       prenom: firstNameValue,
       telephone: telephoneValue,
diff --git a/src/app/pages/page-modifier-contact/page-modifier-contact.component.ts b/src/app/pages/page-modifier-contact/page-modifier-contact.component.ts
index 0cfa9d9..cf1a49d 100644
--- a/src/app/pages/page-modifier-contact/page-modifier-contact.component.ts
+++ b/src/app/pages/page-modifier-contact/page-modifier-contact.component.ts
@@ -71,8 +71,7 @@ export class PageModifierContactComponent implements OnInit {
 
   //Méthode qui envoie les champs modifiés pour mise à jour
   public onSubmit(): void {
-    console.log('value : ', this.modifContactForm.value);
-    console.log('form : ', this.modifContactForm);
+    const couleurValue = this.modifContactForm.value['couleurFc'];
     const firstNameValue = this.modifContactForm.value['firstNameFc'];
     const lastNameValue = this.modifContactForm.value['lastNameFc'];
     const telephoneValue = this.modifContactForm.value['telephoneFc'];
@@ -82,6 +81,7 @@ export class PageModifierContactComponent implements OnInit {
 
     const contact: Contact = {
       id: this.personneid,
+      couleur: couleurValue,
       nom: lastNameValue,
       prenom: firstNameValue,
       telephone: telephoneValue,
diff --git a/src/app/pages/page-repertoire/page-repertoire.component.html b/src/app/pages/page-repertoire/page-repertoire.component.html
index 20fbd8c..ec618ff 100644
--- a/src/app/pages/page-repertoire/page-repertoire.component.html
+++ b/src/app/pages/page-repertoire/page-repertoire.component.html
@@ -1,31 +1,42 @@
 <app-header></app-header>
-<app-side-bar></app-side-bar>
+<div class="row">
+    <div class="col-md-auto">
+        <app-side-bar></app-side-bar>
+    </div>
 
-<div>
-    <button class="w-100 btn btn-lg btn-secondary " 
-        type="submit">Tous les contacts
-    </button>
+    <div class=" col compte text-center">
+        <div>
+            <button class="w-100 btn btn-lg btn-secondary " type="submit">Tous les contacts
+            </button>
 
-    <button routerLink="/ajouter-contact" class="w-100 btn btn-lg btn-rounded btn-secondary">
-        Ajouter un contact
-    </button>
+            <button routerLink="/ajouter-contact" class="w-100 btn btn-lg btn-rounded btn-secondary">
+                Ajouter un contact
+            </button>
 
-    <div class="input-group mb-3">
-        <input type="text" class="form-control" 
-            placeholder="Rechercher un contact" 
-            aria-label="Rechercher un contact" 
-            aria-describedby="basic-addon2"
-            #word
-            (keyup)="onSearchChange(word.value)">
+            <div class="input-group mb-3 d-flex justify-content-center">
+                <input type="text" class="form-control" placeholder="Rechercher un contact"
+                    aria-label="Rechercher un contact" aria-describedby="basic-addon2" #word
+                    (keyup)="onSearchChange(word.value)">
+
+                <div class="input-group-append"></div>
+            </div>
+            <div>
+                <h4>Liste des Contacts</h4>
+            </div>
+        
+        <div class="row justify-content-evenly">
+            <div class="col-4">
+                <div *ngFor="let personne of listContact" (click)="onClick(personne)">
+                    <img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/contact-1.png" />
+                    <p class="fiche-contact">{{ personne.prenom }} {{ personne.nom }}</p>
+                </div>
+            </div>
             
-        <div class="input-group-append">
+            <div class="col-4" *ngIf="openDetails">
+                <app-fiche-contact [personne]="openDetails" (clickDelete)="onClickDelete($event)"></app-fiche-contact>
+            </div>
+        </div>
+
         </div>
     </div>
-
-    <div *ngFor="let personne of listContact" (click)="onClick(personne)" >
-        <img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/contact-1.png"/>
-        <p class="fiche-contact" >{{ personne.prenom }} {{ personne.nom }}</p>
-    </div>
-<div *ngIf="openDetails"><app-fiche-contact [personne]="openDetails" (clickDelete)="onClickDelete($event)"></app-fiche-contact></div>
-    
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/page-repertoire/page-repertoire.component.scss b/src/app/pages/page-repertoire/page-repertoire.component.scss
index 6634178..efd2ffb 100644
--- a/src/app/pages/page-repertoire/page-repertoire.component.scss
+++ b/src/app/pages/page-repertoire/page-repertoire.component.scss
@@ -7,9 +7,16 @@
   margin: auto;
 }
 
-.input-group mb-3 {
-  width: 100%;
+.input-group.mb-3 {
+  width: 50%;
   max-width: 330px;
   padding: 15px;
   margin: auto;
+  display: flex;
+  flex-direction: row;
 }
+
+;h4 {
+  color: black;
+  font-weight: bold;
+}
\ No newline at end of file