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

fonctionalitée ajout contact ok

Browse Source
This commit is contained in:
AlineRinquin 2022-01-21 14:02:57 +01:00
parent 4a55d75da7
commit cde96f2bb6
14 changed files with 304 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/app-routing.module.ts
View File

@ -4,6 +4,7 @@ import { PageAccountComponent } from './pages/page-account/page-account.componen
import { PageAccueilComponent } from './pages/page-accueil/page-accueil.component';
import { PageAddMemberComponent } from './pages/page-add-member/page-add-member.component';
import { PageAgendaComponent } from './pages/page-agenda/page-agenda.component';
import { PageAjoutContactComponent } from './pages/page-ajout-contact/page-ajout-contact.component';
import { PageDashboardComponent } from './pages/page-dashboard/page-dashboard.component';
import { PageDeleteMemberComponent } from './pages/page-delete-member/page-delete-member.component';
import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
@ -30,6 +31,8 @@ const routes: Routes = [
{ path: 'creation-compte', component: PageSignupComponent },
{ path: 'to-do-list', component: PageToDoListComponent },
{ path: 'modifier-membre', component: PageUpdateMemberComponent },
{ path: 'ajouter-contact', component: PageAjoutContactComponent },
{ path: 'modifier-contact', component: PageAjoutContactComponent },
{ path: '**', component: PageNotFoundComponent },
];

4
src/app/app.module.ts
View File

@ -33,6 +33,8 @@ import { PaginationComponent } from './components/pagination/pagination.componen
import { CreneauComponent } from './components/creneau/creneau.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { PageAjoutContactComponent } from './pages/page-ajout-contact/page-ajout-contact.component';
import { PageModifierContactComponent } from './pages/page-modifier-contact/page-modifier-contact.component';
@NgModule({
declarations: [
@ -65,6 +67,8 @@ import { HttpClientModule } from '@angular/common/http';
FicheContactComponent,
PaginationComponent,
CreneauComponent,
PageAjoutContactComponent,
PageModifierContactComponent,
],
imports: [
BrowserModule,

45
src/app/components/fiche-contact/fiche-contact.component.html
View File

@ -1,18 +1,29 @@
<div>
<button class="w-100 btn btn-lg btn-rounded btn-secondary">
Modifier
</button>
<button class="w-100 btn btn-lg btn-rounded btn-secondary">
Supprimer
</button>
<img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/contact-1.png"/>
<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>
<p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-gmail.png"/>
{{ personne.email }}</p>
<p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/gateau.png"/>
{{ personne.dateNaissance }}</p>
<p class="fiche-contact" >
{{ personne.adresse }}</p>
<div class="container">
<div class="row">
<div class="col-sm">
<button class="w-100 btn btn-lg btn-rounded btn-secondary">
Modifier
</button>
</div>
<div class="col-sm">
<button class="w-100 btn btn-lg btn-rounded btn-secondary">
Supprimer
</button>
</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.prenom }} {{ personne.nom }}</p>
<p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/phone.png"/>
{{ personne.telephone }}</p>
<p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-gmail.png"/>
{{ personne.email }}</p>
<p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/gateau.png"/>
{{ personne.dateNaissance }}</p>
<p class="fiche-contact" >
{{ personne.adresse }}</p>
</div>
</div>
</div>
</div>

11
src/app/components/fiche-contact/fiche-contact.component.scss
View File

@ -2,7 +2,16 @@
color: #fff;
background-color: #5a1e63 !important;
width: 100%;
max-width: 330px;
max-width: 150px;
padding: 15px;
margin: auto;
}
.container {
border: 1px solid 8c2e9b;
padding: 10px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
max-height: 1200px;
max-width: 350px;
}

82
src/app/pages/page-ajout-contact/page-ajout-contact.component.html Normal file
View File

@ -0,0 +1,82 @@
<div>
<app-header></app-header>
<app-side-bar></app-side-bar>
</div>
<div class="ajoutContact-form text-center">
<main class="form-ajoutContact">
<form (ngSubmit)="onSubmit()" [formGroup]="ajoutContactForm">
<h1>Ajouter un contact</h1>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputlastName"
placeholder=""
name="lastName"
formControlName="lastNameFc">
<label for="floatingInputlastName">Nom</label>
</div>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputfirstName"
placeholder=""
name="firstName"
formControlName="firstNameFc">
<label for="floatingInputfirstName">Prénom</label>
</div>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputTelephone"
placeholder=""
name="telephone"
formControlName="telephoneFc">
<label for="floatingInputfirstName">Téléphone</label>
</div>
<div class="form-floating">
<input type="email"
class="form-control"
id="floatingInput"
placeholder=""
name="email"
formControlName="emailFc">
<label for="floatingInput">Adresse email</label>
</div>
<div class="form-floating">
<input type="date"
class="form-control"
id="floatingInputdateNaissance"
placeholder=""
name="dateNaissance"
formControlName="dateNaissanceFc">
<label for="floatingInputfirstName">Date de naissance</label>
</div>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputAdresse"
placeholder=""
name="adresse"
formControlName="adresseFc">
<label for="floatingInputfirstName">Adresse</label>
</div>
<button class="w-100 btn btn-lg btn-success"
type="submit"
[disabled]="ajoutContactForm.invalid">Valider</button>
</form>
</main>
</div>

26
src/app/pages/page-ajout-contact/page-ajout-contact.component.scss Normal file
View File

@ -0,0 +1,26 @@
.login-form {
height: 100vh;
padding-top: 40px;
background-color: #f5f5f5;
}
.form-ajoutContact {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-ajoutContact .checkbox {
font-weight: 400;
}
.form-ajoutContact .form-floating:focus-within {
z-index: 2;
}
.form-ajoutContact input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}

25
src/app/pages/page-ajout-contact/page-ajout-contact.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PageAjoutContactComponent } from './page-ajout-contact.component';
describe('PageAjoutContactComponent', () => {
let component: PageAjoutContactComponent;
let fixture: ComponentFixture<PageAjoutContactComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ PageAjoutContactComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(PageAjoutContactComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

71
src/app/pages/page-ajout-contact/page-ajout-contact.component.ts Normal file
View File

@ -0,0 +1,71 @@
import { Component, OnInit } from '@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import { Router } from '@angular/router';
import { Contact } from '../../models/contact';
import { RepertoireService } from '../../services/repertoire.service';
@Component({
selector: 'app-page-ajout-contact',
templateUrl: './page-ajout-contact.component.html',
styleUrls: ['./page-ajout-contact.component.scss'],
})
export class PageAjoutContactComponent implements OnInit {
public ajoutContactForm: FormGroup;
constructor(
private repertoireService: RepertoireService,
private router: Router,
private fb: FormBuilder
) {
this.ajoutContactForm = new FormGroup({});
}
ngOnInit(): void {
// *********************************pensser a changer group car déprécié********************************
this.ajoutContactForm = this.fb.group({
lastNameFc: new FormControl('', [Validators.required]),
firstNameFc: new FormControl('', [Validators.required]),
telephoneFc: new FormControl('', [Validators.required]),
emailFc: new FormControl('', [
Validators.email,
Validators.required,
Validators.pattern(/^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/gim),
]), // chercher une meilleure regex
dateNaissanceFc: new FormControl('', [Validators.required]),
adresseFc: new FormControl('', [Validators.required]),
});
}
public onSubmit(): void {
console.log('value : ', this.ajoutContactForm.value);
console.log('form : ', this.ajoutContactForm);
const firstNameValue = this.ajoutContactForm.value['firstNameFc'];
const lastNameValue = this.ajoutContactForm.value['lastNameFc'];
const telephoneValue = this.ajoutContactForm.value['telephoneFc'];
const emailValue = this.ajoutContactForm.value['emailFc'];
const dateNaissanceValue = this.ajoutContactForm.value['dateNaissanceFc'];
const adresseValue = this.ajoutContactForm.value['adresseFc'];
const contact: Contact = {
nom: lastNameValue,
prenom: firstNameValue,
telephone: telephoneValue,
email: emailValue,
dateNaissance: dateNaissanceValue,
adresse: adresseValue,
};
if (contact.nom !== '') {
this.repertoireService.addContact(contact).subscribe((resp) => {
this.router.navigate(['repertoire/']);
});
} else {
// affichage erreur
}
}
}

1
src/app/pages/page-modifier-contact/page-modifier-contact.component.html Normal file
View File

@ -0,0 +1 @@
<p>page-modifier-contact works!</p>

0
src/app/pages/page-modifier-contact/page-modifier-contact.component.scss Normal file
View File

25
src/app/pages/page-modifier-contact/page-modifier-contact.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PageModifierContactComponent } from './page-modifier-contact.component';
describe('PageModifierContactComponent', () => {
let component: PageModifierContactComponent;
let fixture: ComponentFixture<PageModifierContactComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ PageModifierContactComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(PageModifierContactComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/pages/page-modifier-contact/page-modifier-contact.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-page-modifier-contact',
templateUrl: './page-modifier-contact.component.html',
styleUrls: ['./page-modifier-contact.component.scss']
})
export class PageModifierContactComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

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

@ -6,7 +6,7 @@
type="submit">Tous les contacts
</button>
<button 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
</button>
@ -19,7 +19,6 @@
(keyup)="onSearchChange(word.value)">
<div class="input-group-append">
<!--<button class="btn btn-secondary" type="button">Rechercher</button>-->
</div>
</div>

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

@ -21,8 +21,17 @@ export class RepertoireService {
return this.http.get(`${this.apiUrl}/contacts/team/1`);
}
//sur le component fiche contact de la page repertoire
// sur clic de btn modifier ou supproimer ca renvois vers page modifier contact
//page modifier contact faire un get by id du contact en question
// appeler methode/ update /delette/ add et contact by id
addContact(contact: Contact): Observable<any> {
console.log(contact);
return this.http.post(`${this.apiUrl}/contacts/add`, contact);
}
deleteContact() {
return this.http.delete(`${this.apiUrl}/contacts/delete`);
}
// updateContact(){
// return this.http.put(`${this.apiUrl}/contacts/update/1`);
// }
}