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

card membre

This commit is contained in:
Sana EL HIRI 2022-02-16 19:18:24 +01:00
parent a9970a50eb
commit 0d4ac5606b
19 changed files with 308 additions and 11826 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11633
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -18,6 +18,7 @@
"@angular/platform-browser": "~13.0.0",
"@angular/platform-browser-dynamic": "~13.0.0",
"@angular/router": "~13.0.0",
"@ng-bootstrap/ng-bootstrap": "^12.0.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"jwt-decode": "^3.1.2",

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

@ -23,7 +23,6 @@ import { PageDashboardComponent } from './pages/page-dashboard/page-dashboard.co
import { MeteoComponent } from './components/meteo/meteo.component';
import { HumeurComponent } from './components/humeur/humeur.component';
import { CalendrierComponent } from './components/calendrier/calendrier.component';
import { AvatarComponent } from './components/avatar/avatar.component';
import { CardMemberComponent } from './components/card-member/card-member.component';
import { ToDoListComponent } from './components/to-do-list/to-do-list.component';
import { TacheComponent } from './components/tache/tache.component';
@ -66,7 +65,6 @@ import { EmoticonComponent } from './emoticon/emoticon.component';
MeteoComponent,
HumeurComponent,
CalendrierComponent,
AvatarComponent,
CardMemberComponent,
ToDoListComponent,
TacheComponent,

1
src/app/components/avatar/avatar.component.html
View File

@ -1 +0,0 @@
<p>avatar works!</p>

0
src/app/components/avatar/avatar.component.scss
View File

25
src/app/components/avatar/avatar.component.spec.ts
View File

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

15
src/app/components/avatar/avatar.component.ts
View File

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

24
src/app/components/card-member/card-member.component.html
View File

@ -1 +1,23 @@
<p>card-member works!</p>
<div class="container mt-5 membre">
<div class="row d-flex justify-content-center">
<div class="col-md-auto">
<div class="card p-3 py-4 align-items">
<!-- récuperer couleur du back-->
<div class="text-center"><div class="rounded-circle"id="couleur"[style.background-color]="membre.couleur"></div></div>
<div class="text-center mt-3">
<h3 class="mt-2 mb-0">{{membre.prenom }} {{membre.nom }}</h3>
<div class="buttons text-center"><button button type="button" class="btn btn-outline-primary px-4"
routerLink="../modifier-membre"
routerLinkActive="active-custom">
Modifier
</button><button button type="button" class="btn btn-primary px-4"
routerLink="../supprimer-membre"
routerLinkActive="active-custom">
Supprimer
</button>
</div>
</div>
</div>
</div>
</div>
</div>

55
src/app/components/card-member/card-member.component.scss
View File

@ -0,0 +1,55 @@
#couleur{
width: 100px;
height: 100px;
background: black;
}
.card {
min-height: 22rem;
border: none;
position: relative;
overflow: hidden;
border-radius: 8px;
cursor: pointer
}
.fonts {
font-size: 11px
}
.buttons button:nth-child(1) {
margin-top: 5px;
border: 1px solid #7879F1 !important;
color: #7879F1;
height: 40px;
width: 150px;
}
.buttons button:nth-child(1):hover {
margin-top: 5px;
border: 1px solid #7879F1 !important;
color: #fff;
height: 40px;
width: 150px;
background-color: #7879F1
}
.buttons button:nth-child(2) {
margin-top: 5px;
border: 1px solid #7879F1 !important;
background-color: #7879F1;
color: #fff;
height: 40px;
width: 150px;
}
.buttons button:nth-child(2):hover {
margin-top: 5px;
border: 1px solid #bd4646 !important;
background-color: #bd4646;
color: #fff;
height: 40px;
width: 150px;
}

4
src/app/components/card-member/card-member.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-card-member',
@ -6,10 +6,12 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./card-member.component.scss']
})
export class CardMemberComponent implements OnInit {
@Input() membre: any;
constructor() { }
ngOnInit(): void {
}
}

4
src/app/components/side-bar/side-bar.component.html
View File

@ -1,5 +1,5 @@
<nav class="wrapper">
<ul class="nav flex-column">
<nav class="wrapper md-auto position-fixed ">
<ul class="nav flex-column" id="sticky-sidebar">
<li class="nav-item" ngbNavItem="maTeam" >
<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">
<i class="bi bi-people-fill"></i>

5
src/app/components/side-bar/side-bar.component.scss
View File

@ -1,12 +1,11 @@
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
flex-direction: column;
align-items: left;
width: auto;
height: 100%;
position: absolute;
background-color: rgb(238, 238, 238);
}
.nav{
margin-top: 20px;

70
src/app/pages/page-account/page-account.component.html
View File

@ -1,40 +1,36 @@
<app-header></app-header>
<div class="row">
<div class="col-md-auto">
<div class="container-fluid">
<div class="row">
<app-side-bar></app-side-bar>
<div class="col-9 offset-2" id="main">
<h1>Ma team</h1>
<div class="d-flex justify-content-center">
<button button type="button" class="btn btn-primary btn-lg"
routerLink="../creation-team"
routerLinkActive="active-custom">Créer ma team</button>
</div>
<div class="d-flex justify-content-center">
<button button type="button" class="btn btn-primary btn-lg"
routerLink="../modifier-compte"
routerLinkActive="active-custom">Modifier mon compte</button>
</div>
<div class="d-flex justify-content-center">
<button button type="button" class="btn btn-primary btn-lg"
routerLink="../supprimer-compte"
routerLinkActive="active-custom">Supprimer mon compte</button>
</div>
<div class="d-flex justify-content-center">
<button button type="button" class="btn btn-primary btn-lg"
routerLink="../ajout-membre"
routerLinkActive="active-custom">Ajouter un membre</button>
</div>
<div class="row">
<div class="col" *ngFor="let membreData of listMembres">
<app-card-member [membre]="membreData">
</app-card-member>
</div>
</div>
</div>
</div>
<div class=" col compte text-center">
<h1>Ma Team</h1>
<main class="contenu-compte">
<div class="d-flex justify-content-center">
<button button type="button" class="btn btn-primary btn-lg"
routerLink="../creation-team"
routerLinkActive="active-custom">Créer ma team</button>
</div>
<div class="d-flex justify-content-center">
<button button type="button" class="btn btn-primary btn-lg"
routerLink="../modifier-compte"
routerLinkActive="active-custom">Modifier mon compte</button>
</div>
<div class="d-flex justify-content-center">
<button button type="button" class="btn btn-primary btn-lg"
routerLink="../supprimer-compte"
routerLinkActive="active-custom">Supprimer mon compte</button>
</div>
<div class="d-flex justify-content-center">
<button button type="button" class="btn btn-primary btn-lg"
routerLink="../ajout-membre"
routerLinkActive="active-custom">Ajouter un membre</button>
</div>
<div class="d-flex justify-content-center">
<button button type="button" class="btn btn-primary btn-lg"
routerLink="../modifier-membre"
routerLinkActive="active-custom">Modifier ce membre</button>
</div>
<div class="d-flex justify-content-center">
<button button type="button" class="btn btn-primary btn-lg"
routerLink="../supprimer-membre"
routerLinkActive="active-custom">Supprimer ce membre</button>
</div>
</main>
</div>
</div>

4
src/app/pages/page-account/page-account.component.scss
View File

@ -1,7 +1,3 @@
.contenu.compte{
display: flex;
flex-direction: row;
}
button{
margin-bottom: 5px;
}

10
src/app/pages/page-account/page-account.component.ts
View File

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { MembreService } from 'src/app/services/membre.service';
import { TeamService } from 'src/app/services/team.service';
@Component({
selector: 'app-page-account',
@ -6,10 +8,16 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./page-account.component.scss']
})
export class PageAccountComponent implements OnInit {
public listMembres: any[];
constructor() { }
constructor(private teamService: TeamService, private membreService: MembreService) {
this.listMembres = [];
}
ngOnInit(): void {
this.membreService.getMembres().subscribe((membres: any[]) => {
this.listMembres = membres;
});
}
}

273
src/app/pages/page-add-member/page-add-member.component.html
View File

@ -1,142 +1,141 @@
<app-header></app-header>
<div class="row">
<div class="col-md-auto">
<div class="container-fluid">
<div class="row">
<app-side-bar></app-side-bar>
<div class="col-9 offset-2" id="main">
<div class="form-addMember">
<form (ngSubmit)="onSubmit()" [formGroup]="addMemberForm">
<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"
class="form-control"
id="floatingInputlastName"
placeholder=""
name="lastName"
formControlName="lastNameFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['lastNameFc'].touched &&
addMemberForm.controls['lastNameFc'].valid,
'is-invalid':
addMemberForm.controls['lastNameFc'].touched &&
!addMemberForm.controls['lastNameFc'].valid
}"
/>
<label for="floatingInputlastName">VOTRE NOM</label>
</div>
<div class="form-floating">
<input
type="text"
class="form-control"
id="floatingInputfirstName"
placeholder=""
name="firstName"
formControlName="firstNameFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['firstNameFc'].touched &&
addMemberForm.controls['firstNameFc'].valid,
'is-invalid':
addMemberForm.controls['firstNameFc'].touched &&
!addMemberForm.controls['firstNameFc'].valid
}"
/>
<label for="floatingInputfirstName">VOTRE PRENOM</label>
</div>
<div class="form-floating">
<input
type="date"
class="form-control"
id="floatingInputdateNaissance"
placeholder=""
name="dateNaissance"
formControlName="dateNaissanceFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['dateNaissanceFc'].touched &&
addMemberForm.controls['dateNaissanceFc'].valid,
'is-invalid':
addMemberForm.controls['dateNaissanceFc'].touched &&
!addMemberForm.controls['dateNaissanceFc'].valid
}"
/>
<label for="floatingInputdateNaissance">VOTRE DATE DE NAISSANCE</label>
</div>
<div class="form-floating">
<input
type="email"
class="form-control"
id="floatingInputemail"
placeholder=""
name="email"
formControlName="emailFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['emailFc'].touched &&
addMemberForm.controls['emailFc'].valid,
'is-invalid':
addMemberForm.controls['emailFc'].touched &&
!addMemberForm.controls['emailFc'].valid
}"
/>
<label for="floatingInputemail">VOTRE EMAIL</label>
</div>
<div class="form-floating">
<input
type="password"
class="form-control"
id="floatingPassword"
placeholder=""
name="password"
formControlName="passwordFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['passwordFc'].touched &&
addMemberForm.controls['passwordFc'].valid,
'is-invalid':
addMemberForm.controls['passwordFc'].touched &&
!addMemberForm.controls['passwordFc'].valid
}"
/>
<label for="floatingPassword">MOT DE PASSE</label>
</div>
<div class="form-floating">
<input
type="password"
class="form-control"
id="floatingpasswordConfirm"
placeholder=""
name="passwordConfirm"
formControlName="passwordConfirmFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['passwordConfirmFc'].touched &&
addMemberForm.controls['passwordConfirmFc'].valid,
'is-invalid':
addMemberForm.controls['passwordConfirmFc'].touched &&
!addMemberForm.controls['passwordConfirmFc'].valid
}"
/>
<label for="floatingPasswordConfirm">CONFIRMEZ VOTRE MOT DE PASSE</label>
</div>
<button
class="w-100 btn btn-lg btn-outline-success"
type="submit"
[disabled]="addMemberForm.invalid"
>Ajouter le membre</button>
</form>
</div>
</div>
</div>
<div class=" col addMember-form text-center">
<h1>Ajouter un membre</h1>
<main class="form-addMember">
<form (ngSubmit)="onSubmit()" [formGroup]="addMemberForm">
<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"
class="form-control"
id="floatingInputlastName"
placeholder=""
name="lastName"
formControlName="lastNameFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['lastNameFc'].touched &&
addMemberForm.controls['lastNameFc'].valid,
'is-invalid':
addMemberForm.controls['lastNameFc'].touched &&
!addMemberForm.controls['lastNameFc'].valid
}"
/>
<label for="floatingInputlastName">VOTRE NOM</label>
</div>
<div class="form-floating">
<input
type="text"
class="form-control"
id="floatingInputfirstName"
placeholder=""
name="firstName"
formControlName="firstNameFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['firstNameFc'].touched &&
addMemberForm.controls['firstNameFc'].valid,
'is-invalid':
addMemberForm.controls['firstNameFc'].touched &&
!addMemberForm.controls['firstNameFc'].valid
}"
/>
<label for="floatingInputfirstName">VOTRE PRENOM</label>
</div>
<div class="form-floating">
<input
type="date"
class="form-control"
id="floatingInputdateNaissance"
placeholder=""
name="dateNaissance"
formControlName="dateNaissanceFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['dateNaissanceFc'].touched &&
addMemberForm.controls['dateNaissanceFc'].valid,
'is-invalid':
addMemberForm.controls['dateNaissanceFc'].touched &&
!addMemberForm.controls['dateNaissanceFc'].valid
}"
/>
<label for="floatingInputdateNaissance">VOTRE DATE DE NAISSANCE</label>
</div>
<div class="form-floating">
<input
type="email"
class="form-control"
id="floatingInputemail"
placeholder=""
name="email"
formControlName="emailFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['emailFc'].touched &&
addMemberForm.controls['emailFc'].valid,
'is-invalid':
addMemberForm.controls['emailFc'].touched &&
!addMemberForm.controls['emailFc'].valid
}"
/>
<label for="floatingInputemail">VOTRE EMAIL</label>
</div>
<div class="form-floating">
<input
type="password"
class="form-control"
id="floatingPassword"
placeholder=""
name="password"
formControlName="passwordFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['passwordFc'].touched &&
addMemberForm.controls['passwordFc'].valid,
'is-invalid':
addMemberForm.controls['passwordFc'].touched &&
!addMemberForm.controls['passwordFc'].valid
}"
/>
<label for="floatingPassword">MOT DE PASSE</label>
</div>
<div class="form-floating">
<input
type="password"
class="form-control"
id="floatingpasswordConfirm"
placeholder=""
name="passwordConfirm"
formControlName="passwordConfirmFc"
[ngClass]="{
'is-valid':
addMemberForm.controls['passwordConfirmFc'].touched &&
addMemberForm.controls['passwordConfirmFc'].valid,
'is-invalid':
addMemberForm.controls['passwordConfirmFc'].touched &&
!addMemberForm.controls['passwordConfirmFc'].valid
}"
/>
<label for="floatingPasswordConfirm">CONFIRMEZ VOTRE MOT DE PASSE</label>
</div>
<button
class="w-100 btn btn-lg btn-outline-success"
type="submit"
[disabled]="addMemberForm.invalid"
>Ajouter le membre</button>
</form>
</main>
</div>

2
src/app/pages/page-add-member/page-add-member.component.ts
View File

@ -75,7 +75,7 @@ export class PageAddMemberComponent implements OnInit {
if (membre.email !== '' && membre.password !== '') {
this.authService.signup(membre).subscribe((resp) => {
this.membreService.addMembre(membre).subscribe((resp) => {
this.router.navigate(['compte']);
});
} else {

2
src/app/services/membre.service.ts
View File

@ -27,7 +27,7 @@ export class MembreService {
addMembre(membre: Membre): Observable<any> {
console.log(membre);
return this.http.post(`${this.apiUrl}/membres/add`, membre);
return this.http.post(`${this.apiUrl}/membres/sign-up`, membre);
}
deleteMembre(membre: Membre): Observable<any> {

4
src/index.html
View File

@ -1,8 +1,8 @@
<!doctype html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="utf-8">
<title>OrganizeeFront</title>
<title>Organizee</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">