Merge pull request #33 from AlineRinquin/aline

Ajout des couleurs et un peu css

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">
+            <div class="col-md-12">
-                <p class="fiche-contact" > 
+                
-                    {{ personne.couleur }}</p>
+                <div class="row d-flex justify-content-center flex-row">
-                <p class="fiche-contact" >{{ personne.prenom }} {{ personne.nom }}</p>
+                <div class= "couleur col-4" [style.background-color]="personne.couleur"></div>
-                <p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/phone.png"/>
+                <span class="fiche-contact col-7" >{{ personne.prenom }} {{ personne.nom }} </span>
-                    {{ personne.telephone }}</p>
+                </div>
-                <p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-gmail.png"/>
+
-                    {{ personne.email }}</p>
+                <div class="row d-flex justify-content-center flex-row">
-                <p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/gateau.png"/>
+                    <img class= "col-4"  style="max-height: 12% ; max-width: 12%" src="../../../assets/images/phone.png"/>
-                    {{ personne.dateNaissance }}</p>
+                    <span class="fiche-contact col-7" >{{ personne.telephone }}</span>
-                    <p class="fiche-contact" >
+                </div>
-                        {{ personne.adresse }}</p>
+
+                <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>
         

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;

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]),

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">

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'];

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>

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;

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);
   }
 }