ajout couleur

src/app/models/contact.ts

@@ -1,5 +1,6 @@
 export interface Contact {
   id: string;
+  couleur: string;
   nom: string;
   prenom: string;
   telephone: string;

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" 

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

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);
+    const couleurValue = this.ajoutContactForm.value['couleurFc'];
-    console.log('form : ', this.ajoutContactForm);
     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,

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);
+    const couleurValue = this.modifContactForm.value['couleurFc'];
-    console.log('form : ', this.modifContactForm);
     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,

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>
+    <div class=" col compte text-center">
-    <button class="w-100 btn btn-lg btn-secondary " 
+        <div>
-        type="submit">Tous les contacts
+            <button class="w-100 btn btn-lg btn-secondary " type="submit">Tous les contacts
-    </button>
+            </button>
 
-    <button routerLink="/ajouter-contact" class="w-100 btn btn-lg btn-rounded btn-secondary">
+            <button routerLink="/ajouter-contact" class="w-100 btn btn-lg btn-rounded btn-secondary">
-        Ajouter un contact
+                Ajouter un contact
-    </button>
+            </button>
 
-    <div class="input-group mb-3">
+            <div class="input-group mb-3 d-flex justify-content-center">
-        <input type="text" class="form-control" 
+                <input type="text" class="form-control" placeholder="Rechercher un contact"
-            placeholder="Rechercher un contact" 
+                    aria-label="Rechercher un contact" aria-describedby="basic-addon2" #word
-            aria-label="Rechercher un contact" 
+                    (keyup)="onSearchChange(word.value)">
-            aria-describedby="basic-addon2"
+
-            #word
+                <div class="input-group-append"></div>
-            (keyup)="onSearchChange(word.value)">
+            </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="col-4" *ngIf="openDetails">
+                <app-fiche-contact [personne]="openDetails" (clickDelete)="onClickDelete($event)"></app-fiche-contact>
+            </div>
+        </div>
 
-        <div class="input-group-append">
         </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>

src/app/pages/page-repertoire/page-repertoire.component.scss

@@ -7,9 +7,16 @@
   margin: auto;
 }
 
-.input-group mb-3 {
+.input-group.mb-3 {
-  width: 100%;
+  width: 50%;
   max-width: 330px;
   padding: 15px;
   margin: auto;
+  display: flex;
+  flex-direction: row;
+}
+
+;h4 {
+  color: black;
+  font-weight: bold;
 }