isa44.74
/
organizee-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #28 from AlineRinquin/aline 

Aline
This commit is contained in:
AlineRinquin 2022-02-15 15:39:14 +01:00 committed by GitHub
parent 25830750bd a881b6cee6
commit f284206787
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 115 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -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",

1
src/app/components/fiche-contact/fiche-contact.component.ts
View File

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

1
src/app/models/contact.ts
View File

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

8
src/app/pages/page-ajout-contact/page-ajout-contact.component.html
View File

@ -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"

47
src/app/pages/page-ajout-contact/page-ajout-contact.component.scss
View File

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

4
src/app/pages/page-ajout-contact/page-ajout-contact.component.ts
View File

@ -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,

4
src/app/pages/page-modifier-contact/page-modifier-contact.component.ts
View File

@ -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,

59
src/app/pages/page-repertoire/page-repertoire.component.html
View File

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

11
src/app/pages/page-repertoire/page-repertoire.component.scss
View File

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

23
src/app/pages/page-repertoire/page-repertoire.component.ts
View File

@ -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;
}
onClickDelete(contact: Contact){
this.repertoireService.deleteContact(contact).subscribe((resp) => {
// Méthode qui au click va supprimer un contact
onClickDelete(contactId: number){
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/']);
});
}

5
src/app/services/repertoire.service.ts
View File

@ -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> {
return this.http.delete(`${this.apiUrl}/contacts/delete/1`);
deleteContact(contactId: number): Observable<any> {
return this.http.delete(`${this.apiUrl}/contacts/delete/${contactId}`);
}
updateContact(contact: Contact): Observable<any> {