ajout des couleurs dans le form

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>

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é!")
     }
   }
 }

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" 

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

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 : ''],