From e82d138907bbb9c5f98b6428c07f2b89fdcb324c Mon Sep 17 00:00:00 2001
From: AlineRinquin <aline.rinquin.ar@gmail.com>
Date: Wed, 16 Feb 2022 11:48:34 +0100
Subject: [PATCH] ajout des couleurs dans le form

---
 .../fiche-contact.component.html              |  3 +-
 .../page-ajout-contact.component.ts           |  2 +-
 .../page-modifier-contact.component.html      |  8 +++-
 .../page-modifier-contact.component.scss      | 43 ++++++++++++++++++-
 .../page-modifier-contact.component.ts        |  1 +
 5 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/src/app/components/fiche-contact/fiche-contact.component.html b/src/app/components/fiche-contact/fiche-contact.component.html
index bbbdbef..54d74e8 100644
--- a/src/app/components/fiche-contact/fiche-contact.component.html
+++ b/src/app/components/fiche-contact/fiche-contact.component.html
@@ -12,7 +12,8 @@
         </div>
         <div class="row align-items-center">
             <div class="col-md-6 offset-md-3">
-                <img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/contact-1.png"/>
+                <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>
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 7de50de..d65fdec 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
@@ -67,7 +67,7 @@ export class PageAjoutContactComponent implements OnInit {
         this.router.navigate(['repertoire/']);
       });
     } else {
-      // affichage erreur
+      window.alert("Le contact ne peut pas être ajouté!")
     }
   }
 }
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 5ac961b..3b7f16b 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
@@ -4,10 +4,14 @@
 </div>
 
 <div class="modifContact-form text-center">
+    <h1>Modifier ce contact</h1>
     <main class="form-modifContact">
         <form  (ngSubmit)="onSubmit()" [formGroup]="modifContactForm">
-            <h1>Modifier ce 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-modifier-contact/page-modifier-contact.component.scss b/src/app/pages/page-modifier-contact/page-modifier-contact.component.scss
index 6709ac8..ee16c4d 100644
--- a/src/app/pages/page-modifier-contact/page-modifier-contact.component.scss
+++ b/src/app/pages/page-modifier-contact/page-modifier-contact.component.scss
@@ -8,7 +8,13 @@
   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-modifContact .checkbox {
@@ -25,7 +31,40 @@
   border-bottom-left-radius: 0;
 }
 
+.form-modifContact input[type="color"] {
+  border: none;
+  margin-bottom: 10px;
+  margin-top: -70px;
+  margin-left: 100px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.form-modifContact input[type="color"]::-webkit-color-swatch {
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 80px;
+  height: 80px;
+}
+
+.form-modifContact input[type="text"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-modifContact 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-modifier-contact/page-modifier-contact.component.ts b/src/app/pages/page-modifier-contact/page-modifier-contact.component.ts
index cf1a49d..a9c8b91 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
@@ -60,6 +60,7 @@ export class PageModifierContactComponent implements OnInit {
   //Méthode qui initialise les champs du formulaire avec les infos de la BDD
   private initForm(contact?: Contact): FormGroup {
     return this.fb.group({
+      couleur: [contact ? contact.couleur : ''],
       firstName: [contact ? contact.nom : ''],
       lastName: [contact ? contact.prenom : ''],
       telephone: [contact ? contact.telephone : ''],