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