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

ajout couleur

This commit is contained in:
AlineRinquin 2022-02-15 15:37:22 +01:00
parent 98374d8a47
commit a881b6cee6
7 changed files with 98 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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