From 49049bc2553c5111ddd2307d6e270eb59f1008c7 Mon Sep 17 00:00:00 2001
From: AlineRinquin <aline.rinquin.ar@gmail.com>
Date: Thu, 17 Feb 2022 10:14:20 +0100
Subject: [PATCH] Ajout des couleurs et un peu css

---
 .../fiche-contact.component.html              | 38 +++++++++++++------
 .../fiche-contact.component.scss              | 20 ++++++++++
 .../page-ajout-contact.component.ts           |  1 +
 .../page-modifier-contact.component.html      |  2 +-
 .../page-modifier-contact.component.ts        |  3 +-
 .../page-repertoire.component.html            |  2 +-
 .../page-repertoire.component.scss            |  8 ++++
 src/app/services/repertoire.service.ts        |  2 +-
 8 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/src/app/components/fiche-contact/fiche-contact.component.html b/src/app/components/fiche-contact/fiche-contact.component.html
index 54d74e8..bbedc91 100644
--- a/src/app/components/fiche-contact/fiche-contact.component.html
+++ b/src/app/components/fiche-contact/fiche-contact.component.html
@@ -11,18 +11,32 @@
             </button>
         </div>
         <div class="row align-items-center">
-            <div class="col-md-6 offset-md-3">
-                <p class="fiche-contact" > 
-                    {{ personne.couleur }}</p>
-                <p class="fiche-contact" >{{ personne.prenom }} {{ personne.nom }}</p>
-                <p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/phone.png"/>
-                    {{ personne.telephone }}</p>
-                <p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-gmail.png"/>
-                    {{ personne.email }}</p>
-                <p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/gateau.png"/>
-                    {{ personne.dateNaissance }}</p>
-                    <p class="fiche-contact" >
-                        {{ personne.adresse }}</p>
+            <div class="col-md-12">
+                
+                <div class="row d-flex justify-content-center flex-row">
+                <div class= "couleur col-4" [style.background-color]="personne.couleur"></div>
+                <span class="fiche-contact col-7" >{{ personne.prenom }} {{ personne.nom }} </span>
+                </div>
+
+                <div class="row d-flex justify-content-center flex-row">
+                    <img class= "col-4"  style="max-height: 12% ; max-width: 12%" src="../../../assets/images/phone.png"/>
+                    <span class="fiche-contact col-7" >{{ personne.telephone }}</span>
+                </div>
+
+                <div class="row d-flex justify-content-center flex-row">
+                    <img class= "col-4" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-gmail.png"/>
+                    <span class="fiche-contact col-7" >{{ personne.email }}</span>
+                </div>
+
+                <div class="row d-flex justify-content-center flex-row">
+                    <img class= "col-4" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/gateau.png"/>
+                    <span class="fiche-contact col-7" >{{ personne.dateNaissance }}</span>
+                </div>
+                
+                <div class="row d-flex justify-content-center flex-row">
+                <p class="fiche-contact col-7" >{{ personne.adresse }}</p>
+                </div>
+
             </div>
         </div>
         
diff --git a/src/app/components/fiche-contact/fiche-contact.component.scss b/src/app/components/fiche-contact/fiche-contact.component.scss
index 85d641e..daa8fcc 100644
--- a/src/app/components/fiche-contact/fiche-contact.component.scss
+++ b/src/app/components/fiche-contact/fiche-contact.component.scss
@@ -7,6 +7,26 @@
   margin: auto;
 }
 
+.couleur{
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 60px;
+  height: 60px;
+  flex-direction: row;
+}
+
+.info{
+display:flex;
+justify-content: center;
+}
+
+.fiche-contact{
+  display:flex;
+  justify-content: center;
+  flex-direction: row;
+}
+
 .container {
   border: 1px solid 8c2e9b;
   padding: 10px;
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 c6c662c..1076f68 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
@@ -30,6 +30,7 @@ export class PageAjoutContactComponent implements OnInit {
   ngOnInit(): void {
     // *********************************pensser à changer group car déprécié********************************
     this.ajoutContactForm = this.fb.group({
+      couleurFc: new FormControl('', [Validators.required]),
       lastNameFc: new FormControl('', [Validators.required]),
       firstNameFc: new FormControl('', [Validators.required]),
       telephoneFc: new FormControl('', [Validators.required]),
diff --git a/src/app/pages/page-modifier-contact/page-modifier-contact.component.html b/src/app/pages/page-modifier-contact/page-modifier-contact.component.html
index 3b7f16b..76e7e28 100644
--- a/src/app/pages/page-modifier-contact/page-modifier-contact.component.html
+++ b/src/app/pages/page-modifier-contact/page-modifier-contact.component.html
@@ -10,7 +10,7 @@
             
             <div class="form-floating">
             <input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
-            formControlName="couleurFc">
+            formControlName="couleurFc" value= "{{ listContactInfo.couleur }}">
             </div>
 
             <div class="form-floating">
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 fe6c2ad..ca53cc0 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
@@ -44,6 +44,7 @@ export class PageModifierContactComponent implements OnInit {
 
     // *********************************pensser à changer group car déprécié********************************
     this.modifContactForm = this.fb.group({
+      couleurFc: new FormControl('', [Validators.required]),
       lastNameFc: new FormControl('', [Validators.required]),
       firstNameFc: new FormControl('', [Validators.required]),
       telephoneFc: new FormControl('', [Validators.required]),
@@ -71,7 +72,7 @@ export class PageModifierContactComponent implements OnInit {
 
   //Méthode qui envoie les champs modifiés pour mise à jour
   public onSubmit(): void {
-    const couleurValue = this.modifContactForm.value[''];
+    const couleurValue = this.modifContactForm.value['couleurFc'];
     const firstNameValue = this.modifContactForm.value['firstNameFc'];
     const lastNameValue = this.modifContactForm.value['lastNameFc'];
     const telephoneValue = this.modifContactForm.value['telephoneFc'];
diff --git a/src/app/pages/page-repertoire/page-repertoire.component.html b/src/app/pages/page-repertoire/page-repertoire.component.html
index ec618ff..23c6ed2 100644
--- a/src/app/pages/page-repertoire/page-repertoire.component.html
+++ b/src/app/pages/page-repertoire/page-repertoire.component.html
@@ -27,7 +27,7 @@
         <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" />
+                    <div class= "couleur" [style.background-color]="personne.couleur"></div>
                     <p class="fiche-contact">{{ personne.prenom }} {{ personne.nom }}</p>
                 </div>
             </div>
diff --git a/src/app/pages/page-repertoire/page-repertoire.component.scss b/src/app/pages/page-repertoire/page-repertoire.component.scss
index efd2ffb..8aa61e2 100644
--- a/src/app/pages/page-repertoire/page-repertoire.component.scss
+++ b/src/app/pages/page-repertoire/page-repertoire.component.scss
@@ -16,6 +16,14 @@
   flex-direction: row;
 }
 
+.couleur{
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 60px;
+  height: 60px;
+  flex-direction: row;
+}
 ;h4 {
   color: black;
   font-weight: bold;
diff --git a/src/app/services/repertoire.service.ts b/src/app/services/repertoire.service.ts
index 8c85751..3296dec 100644
--- a/src/app/services/repertoire.service.ts
+++ b/src/app/services/repertoire.service.ts
@@ -38,6 +38,6 @@ export class RepertoireService {
   }
 
   updateContact(contact: Contact): Observable<any> {
-    return this.http.put(`${this.apiUrl}/contacts/update/`, contact);
+    return this.http.put(`${this.apiUrl}/contacts/update/1`, contact);
   }
 }