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

Side bar css ok avancées sur ticket page account et page membreetc

Browse source
This commit is contained in:
Sana EL HIRI 2022-02-14 15:45:32 +01:00
parent e53a9a062d
commit 026ac42818
14 changed files with 402 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/app/components/side-bar/side-bar.component.html
View file

@ -1,11 +1,21 @@
<nav class="custom-side-bar flex-shrink-0 bg-white border-end">
<div id="navbarNavAltMarkup">
<div class="navbar-nav">
<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">Ma Team</a>
<a routerLink="../repertoire" routerLinkActive="active-custom" class="nav-link">Répertoire</a>
<a routerLink="../to-do-list" routerLinkActive="active-custom" class="nav-link">To-Do-List</a>
<a routerLink="../menu" routerLinkActive="active-custom" class="nav-link">Menus</a>
<a routerLink="../agenda" routerLinkActive="active-custom" class="nav-link">Agenda</a>
</div>
</div>
<nav class="wrapper">
<ul class="nav flex-column">
<li class="nav-item">
<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">
<i class="fa fa-people-fill-o"></i>
Ma Team</a>
</li>
<li class="nav-item">
<a routerLink="../repertoire" routerLinkActive="active-custom" class="nav-link">Répertoire</a>
</li>
<li class="nav-item">
<a routerLink="../to-do-list" routerLinkActive="active-custom" class="nav-link">To-Do-List</a>
</li>
<li class="nav-item">
<a routerLink="../menu" routerLinkActive="active-custom" class="nav-link">Menus</a>
</li>
<li class="nav-item">
<a routerLink="../agenda" routerLinkActive="active-custom" class="nav-link">Agenda</a>
</li>
</ul>
</nav>

24
src/app/components/side-bar/side-bar.component.scss
View file

@ -0,0 +1,24 @@
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: auto;
height: 100%;
position: absolute;
background-color: rgb(238, 238, 238);
}
.nav{
margin-top: 20px;
align-items: center;
}
li {
margin-bottom: 5px;
}
a{
color: black;
font-weight: bold;
}

44
src/app/pages/page-account/page-account.component.html
View file

@ -1,7 +1,41 @@
<app-header></app-header>
<app-side-bar></app-side-bar>
<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 class="row">
<div class="col-md-auto">
<app-side-bar></app-side-bar>
</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-membre"
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-membre"
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>

7
src/app/pages/page-account/page-account.component.scss
View file

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

235
src/app/pages/page-add-member/page-add-member.component.html
View file

@ -1,101 +1,142 @@
<app-header></app-header>
<app-side-bar></app-side-bar>
<div class="signup-form text-center">
<main class="form-signup">
<form (ngSubmit)="onSubmit()" [formGroup]="addMemberForm">
<h1>J'inscris un nouveau membre</h1>
<div class="form-floating">
<input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
formControlName="couleurFc">
<label for="floatingInputcouleur">Choisissez une couleur !</label>
</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">Avatar</label>
</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">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">Prénom</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="floatingInputfirstName">Date de naissance</label>
</div>
<div class="form-floating">
<input type="email"
class="form-control"
id="floatingInput"
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="floatingInput">Adresse 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="passwordConfirm"
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="floatingPassword">Confirmer mot de passe</label>
</div>
<div class="row">
<div class="col-md-auto">
<app-side-bar></app-side-bar>
</div>
<button class="w-100 btn btn-lg btn-success"
type="submit"
[disabled]="addMemberForm.invalid">Je confirme l'ajout de ce membre à ma team !</button>
<p>
Value : {{ addMemberForm.value | json }}
</p>
<p>
Form valid : {{ addMemberForm.valid }}
</p>
<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>
</form>
<button
class="w-100 btn btn-lg btn-outline-success"
type="submit"
[disabled]="addMemberForm.invalid"
>Ajouter le membre</button>
</form>
</main>
</div>

57
src/app/pages/page-add-member/page-add-member.component.scss
View file

@ -4,29 +4,72 @@
background-color: #f5f5f5;
}
.form-signup {
.form-addMember {
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: #ef5da8;
}
.form-signup .checkbox {
.form-addMember .checkbox {
font-weight: 400;
}
.form-signup .form-floating:focus-within {
.form-addMember .form-floating:focus-within {
z-index: 2;
}
.form-signup input[type="email"] {
margin-bottom: -1px;
.form-addMember input[type="email"] {
margin-bottom: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signup input[type="password"] {
.form-addMember input[type="color"] {
border: none;
margin-bottom: 10px;
margin-top: -70px;
margin-left: 100px;
border-radius: 50%;
width: 100px;
height: 100px;
}
.form-addMember input[type="color"]::-webkit-color-swatch {
border: none;
margin-top: -15px;
border-radius: 80%;
width: 80px;
height: 80px;
}
.form-addMember input[type="text"] {
margin-bottom: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-addMember input[type="date"] {
margin-bottom: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-addMember input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.btn-outline-success {
margin-top: 10px;
background-color: #ffff;
color: #ef5da8 !important;
border-color: #ef5da8 !important;
}

6
src/app/pages/page-add-member/page-add-member.component.ts
View file

@ -3,6 +3,7 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
import { Router } from '@angular/router';
import { Membre } from 'src/app/models/membre';
import { AuthService } from 'src/app/services/auth.service';
import { MembreService } from 'src/app/services/membre.service';
@Component({
selector: 'app-page-add-member',
@ -13,6 +14,7 @@ export class PageAddMemberComponent implements OnInit {
public addMemberForm: FormGroup;
constructor(
private membreService: MembreService,
private authService: AuthService,
private router: Router,
private fb: FormBuilder
@ -27,7 +29,7 @@ export class PageAddMemberComponent implements OnInit {
firstNameFc: new FormControl('', [Validators.required]),
lastNameFc: new FormControl('', [Validators.required]),
dateNaissanceFc: new FormControl('', [Validators.required]),
couleurFc: new FormControl('', [Validators.required]),
couleurFc: new FormControl('', []),
emailFc: new FormControl('', [
Validators.email,
Validators.required,
@ -74,7 +76,7 @@ export class PageAddMemberComponent implements OnInit {
if (membre.email !== '' && membre.password !== '') {
this.authService.signup(membre).subscribe((resp) => {
this.router.navigate(['account/signin']);
this.router.navigate(['compte']);
});
} else {
// affichage erreur

55
src/app/pages/page-creation-team/page-creation-team.component.html
View file

@ -1,30 +1,27 @@
<app-header></app-header>
<app-side-bar></app-side-bar>
<div class="signup-form text-center">
<main class="form-signup">
<form (ngSubmit)="onSubmit()" [formGroup]="teamForm">
<h1>Créer votre team!</h1>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputName"
placeholder=""
name="name"
formControlName="nameFc"
[ngClass]="{'is-valid' : teamForm.controls['nameFc'].touched && teamForm.controls['nameFc'].valid,
'is-invalid': teamForm.controls['nameFc'].touched && !teamForm.controls['nameFc'].valid}">
<label for="floatingInputName">Nom</label>
</div>
<button class="w-100 btn btn-lg btn-success"
type="submit"
[disabled]="teamForm.invalid">Je crée ma team</button>
<p>
Value : {{ teamForm.value | json }}
</p>
<p>
Form valid : {{ teamForm.valid }}
</p>
</form>
</main>
</div>
<div class="row">
<div class="col-md-auto">
<app-side-bar></app-side-bar>
</div>
<div class=" col team-form text-center">
<h1>Créer votre team</h1>
<main class="form-team">
<form (ngSubmit)="onSubmit()" [formGroup]="teamForm">
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputName"
placeholder=""
name="name"
formControlName="nameFc"
[ngClass]="{'is-valid' : teamForm.controls['nameFc'].touched && teamForm.controls['nameFc'].valid,
'is-invalid': teamForm.controls['nameFc'].touched && !teamForm.controls['nameFc'].valid}">
<label for="floatingInputName">Nom</label>
</div>
<button class="w-100 btn btn-lg btn-success"
type="submit"
[disabled]="teamForm.invalid">Je crée ma team</button>
</form>
</main>
</div>
</div>

21
src/app/pages/page-creation-team/page-creation-team.component.scss
View file

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

11
src/app/pages/page-delete-member/page-delete-member.component.html
View file

@ -1 +1,12 @@
<app-header></app-header>
<div class="row">
<div class="col-md-auto">
<app-side-bar></app-side-bar>
</div>
<div class=" col compte text-center">
<h1>Supprimer un membre</h1>
<main class="contenu-compte">
</main>
</div>
</div>

2
src/app/pages/page-not-found/page-not-found.component.html
View file

@ -1,5 +1,5 @@
<app-header></app-header>
<app-side-bar></app-side-bar>
<div>
<p> Page introuvable</p>

11
src/app/pages/page-update-member/page-update-member.component.html
View file

@ -1 +1,12 @@
<app-header></app-header>
<div class="row">
<div class="col-md-auto">
<app-side-bar></app-side-bar>
</div>
<div class=" col compte text-center">
<h1>Modifier un membre</h1>
<main class="contenu-compte">
</main>
</div>
</div>

16
src/app/services/membre.service.spec.ts Normal file
View file

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { MembreService } from './membre.service';
describe('MembreService', () => {
let service: MembreService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(MembreService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

40
src/app/services/membre.service.ts Normal file
View file

@ -0,0 +1,40 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Membre } from '../models/membre';
@Injectable({
providedIn: 'root'
})
export class MembreService {
apiUrl: string;
tokenKey: string;
constructor(private http: HttpClient) {
this.apiUrl = environment.apiUrl;
this.tokenKey = environment.tokenKey;
}
getMembres(): Observable<any> {
return this.http.get(`${this.apiUrl}/membres/all`);
}
getMembreId(id: any): Observable<any> {
return this.http.get(`${this.apiUrl}/membres/1` + id);
}
addMembre(membre: Membre): Observable<any> {
console.log(membre);
return this.http.post(`${this.apiUrl}/membres/add`, membre);
}
deleteMembre(membre: Membre): Observable<any> {
return this.http.delete(`${this.apiUrl}/membres/delete/1`);
}
updateMembre(membre: Membre): Observable<any> {
return this.http.put(`${this.apiUrl}/membres/update/1`, membre);
}
}