Merge pull request #28 from AlineRinquin/aline

Aline

package-lock.json

@@ -14189,6 +14189,11 @@
       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
       "integrity": "sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w=="
     },
+    "bootstrap-icons": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
+      "integrity": "sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

src/app/components/fiche-contact/fiche-contact.component.ts

@@ -14,6 +14,7 @@ export class FicheContactComponent implements OnInit {
   ngOnInit(): void {}
 
   onClickDelete(numPerson: number){
+    window.alert("Le contact à bien été supprimé!")
     this.clickDelete.emit(numPerson);
   }
 }

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="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>
-    <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;
+}

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

@@ -33,16 +33,6 @@ export class PageRepertoireComponent implements OnInit {
       this.listContact = listContact;
       this.listFull = listContact;
     });
-
-    this.personneid = this.route.snapshot.paramMap.get('id');
-    console.log(this.personneid);
-
-    this.repertoireService
-      .getContactById(this.personneid)
-      .subscribe((listContactInfo: any) => {
-        console.log(listContactInfo);
-        this.listContactInfo = listContactInfo;
-      });
   }
 
   // Méthode pour récuper ce qui est saisi dans l'input
@@ -63,15 +53,20 @@ export class PageRepertoireComponent implements OnInit {
     this.listContact = prenom;
   }
 
-  // Méthode qui au click va ouvrir les détails d'un contat
+  // Méthode qui au click va ouvrir les détails d'un contact
   onClick(personne: any) {
     console.log(personne);
     this.openDetails = personne;
   }
 
-
+  // Méthode qui au click va supprimer un contact
-  onClickDelete(contact: Contact){
+  onClickDelete(contactId: number){
-    this.repertoireService.deleteContact(contact).subscribe((resp) => {
+    this.repertoireService.deleteContact(contactId).subscribe((resp) => {
+      if(contactId) {
+        this.listContact.forEach(contactId => console.log(contactId))
+      }else{
+        window.alert("Le contact ne peut pas être supprimé!")
+      }
       this.router.navigate(['repertoire/']);
     });
   }

src/app/services/repertoire.service.ts

@@ -27,12 +27,11 @@ export class RepertoireService {
 
   addContact(contact: Contact): Observable<any> {
     console.log(contact);
-
     return this.http.post(`${this.apiUrl}/contacts/add`, contact);
   }
 
-  deleteContact(contact: Contact): Observable<any> {
+  deleteContact(contactId: number): Observable<any> {
-    return this.http.delete(`${this.apiUrl}/contacts/delete/1`);
+    return this.http.delete(`${this.apiUrl}/contacts/delete/${contactId}`);
   }
 
   updateContact(contact: Contact): Observable<any> {