Merge branch 'dev' into sana

README.md

@@ -4,6 +4,8 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 
 ## Development server
 
+Run npm install
+
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding

src/app/components/fiche-contact/fiche-contact.component.html

@@ -1 +1,18 @@
-<p>fiche-contact works!</p>
+<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>

src/app/components/fiche-contact/fiche-contact.component.scss

@@ -0,0 +1,8 @@
+.btn-secondary {
+  color: #fff;
+  background-color: #5a1e63 !important;
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: auto;
+}

src/app/components/fiche-contact/fiche-contact.component.ts

@@ -1,15 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-fiche-contact',
   templateUrl: './fiche-contact.component.html',
-  styleUrls: ['./fiche-contact.component.scss']
+  styleUrls: ['./fiche-contact.component.scss'],
 })
 export class FicheContactComponent implements OnInit {
+  @Input() personne: any;
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }

src/app/models/contact.ts

@@ -0,0 +1,8 @@
+export interface Contact {
+  nom: string;
+  prenom: string;
+  telephone: string;
+  email: string;
+  adresse: string;
+  dateNaissance: Date;
+}

src/app/models/menu.ts

@@ -0,0 +1,10 @@
+import { Membre } from './membre';
+import { Team } from './team';
+
+export interface Menu {
+  libelle: string;
+  dateMenu: Date;
+  membre: Membre;
+  team: Team;
+  validationProposition: boolean;
+}

src/app/models/to-do-list.ts

@@ -0,0 +1,7 @@
+import { Team } from './team';
+
+export interface ToDoList {
+  nom: string;
+  team: Team;
+  tache: string;
+}

src/app/pages/page-add-member/page-add-member.component.html

@@ -1 +1,109 @@
 <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="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">
+              <select type="text"
+                      class="form-control"
+                      id="floatingInputprofil"
+                      name="profil"
+                      formControlName="profilFc"
+                      [ngClass]="{'is-valid' : addMemberForm.controls['profilFc'].touched && addMemberForm.controls['profilFc'].valid,
+                                  'is-invalid':  addMemberForm.controls['profilFc'].touched && !addMemberForm.controls['profilFc'].valid}">
+                              <option>Adulte</option>
+                              <option>Enfant</option>
+              </select>
+              <label for="floatingInputfirstName">Profil</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>
+
+          <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>
+
+      </form>
+  </main>

src/app/pages/page-add-member/page-add-member.component.scss

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

src/app/pages/page-add-member/page-add-member.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+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';
 
 @Component({
   selector: 'app-page-add-member',
@@ -7,9 +11,92 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PageAddMemberComponent implements OnInit {
 
-  constructor() { }
-
-  ngOnInit(): void {
+  public addMemberForm: FormGroup;
+  constructor(
+    private authService: AuthService,
+    private router: Router,
+    private fb: FormBuilder
+  ) {
+    this.addMemberForm = new FormGroup({});
   }
 
+  ngOnInit(): void {
+    // *********************************pensser a changer group car déprécié********************************
+    this.addMemberForm = this.fb.group(
+      {
+        firstNameFc: new FormControl('', [Validators.required]),
+        lastNameFc: new FormControl('', [Validators.required]),
+        dateNaissanceFc: new FormControl('', [Validators.required]),
+        profilFc: new FormControl('', [Validators.required]),
+        emailFc: new FormControl('', [
+          Validators.email,
+          Validators.required,
+          Validators.pattern(/^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/gim),
+        ]), // chercher une meilleure regex
+        passwordFc: new FormControl('', [
+          Validators.minLength(8),
+          Validators.required,
+        ]),
+        passwordConfirmFc: new FormControl('', [
+          Validators.minLength(8),
+          Validators.required,
+        ]),
+      },
+      {
+        validator: this.ConfirmedValidator('passwordFc', 'passwordConfirmFc'),
+      }
+    );
+  }
+
+  public onSubmit(): void {
+    console.log('value : ', this.addMemberForm.value);
+    console.log('form : ', this.addMemberForm);
+    const firstNameValue = this.addMemberForm.value['firstNameFc'];
+    const lastNameValue = this.addMemberForm.value['lastNameFc'];
+    const emailValue = this.addMemberForm.value['emailFc'];
+    const passwordValue = this.addMemberForm.value['passwordFc'];
+    const dateNaissanceValue = this.addMemberForm.value['dateNaissanceFc'];
+    const teamNameValue = this.addMemberForm.value['teamNameFc'];
+    const profilValue = this.addMemberForm.value['profilFc'];
+    const passwordConfirmValue = this.addMemberForm.value['passwordConfirmFc'];
+    const teamValue = [''];
+
+    const membre: Membre = {
+      nom: firstNameValue,
+      prenom: lastNameValue,
+      email: emailValue,
+      password: passwordValue,
+      dateNaissance: dateNaissanceValue,
+      profil: profilValue,
+      passwordConfirm: passwordConfirmValue,
+      roleList: ["ROLE_PARENT"]
+    };
+
+
+    if (membre.email !== '' && membre.password !== '') {
+      this.authService.signup(membre).subscribe((resp) => {
+        this.router.navigate(['account/signin']);
+      });
+    } else {
+      // affichage erreur
+    }
+  }
+
+  ConfirmedValidator(controlName: string, matchingControlName: string) {
+    return (formGroup: FormGroup) => {
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (
+        matchingControl.errors &&
+        !matchingControl.errors['confirmedValidator']
+      ) {
+        return;
+      }
+      if (control.value !== matchingControl.value) {
+        matchingControl.setErrors({ confirmedValidator: true });
+      } else {
+        matchingControl.setErrors(null);
+      }
+    };
+  }
 }

src/app/pages/page-repertoire/page-repertoire.component.html

@@ -1,2 +1,32 @@
 <app-header></app-header>
 <app-side-bar></app-side-bar>
+
+<div>
+    <button class="w-100 btn btn-lg btn-secondary " 
+        type="submit">Tous les contacts
+    </button>
+
+    <button 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-append">
+       <!--<button class="btn btn-secondary" type="button">Rechercher</button>--> 
+        </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"></app-fiche-contact></div>
+    
+</div>

src/app/pages/page-repertoire/page-repertoire.component.scss

@@ -0,0 +1,15 @@
+.btn-secondary {
+  color: #fff;
+  background-color: #5a1e63 !important;
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: auto;
+}
+
+.input-group mb-3 {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: auto;
+}

src/app/pages/page-repertoire/page-repertoire.component.ts

@@ -1,15 +1,50 @@
 import { Component, OnInit } from '@angular/core';
+import { RepertoireService } from 'src/app/services/repertoire.service';
 
 @Component({
   selector: 'app-page-repertoire',
   templateUrl: './page-repertoire.component.html',
-  styleUrls: ['./page-repertoire.component.scss']
+  styleUrls: ['./page-repertoire.component.scss'],
 })
 export class PageRepertoireComponent implements OnInit {
+  public listContact: any[];
+  public listFull: any[];
+  keyword: any;
+  openDetails: any;
 
-  constructor() { }
-
-  ngOnInit(): void {
+  constructor(private repertoireService: RepertoireService) {
+    this.listContact = [];
+    this.listFull = [];
   }
 
+  ngOnInit(): void {
+    this.repertoireService.getContact().subscribe((listContact: any[]) => {
+      console.log(listContact);
+      this.listContact = listContact;
+      this.listFull = listContact;
+    });
+  }
+
+  // Méthode pour récuper ce qui est saisi dans l'input
+  onSearchChange(prenom: string): void {
+    this.keyword = prenom;
+    if (prenom == '') {
+      this.listContact = this.listFull;
+    } else {
+      this.applyFilter(prenom);
+    }
+  }
+
+  // Méthode qui applique un filtre sur ce qui est récupéré de l'input sur le prénom
+  applyFilter(filter: any) {
+    let prenom = this.listFull.filter((contact) =>
+      contact.prenom.toLowerCase().includes(filter.toLowerCase())
+    );
+    this.listContact = prenom;
+  }
+
+  onClick(personne: any) {
+    console.log(personne);
+    this.openDetails = personne;
+  }
 }

src/app/services/auth.service.ts

@@ -58,6 +58,7 @@ export class AuthService {
     return this.http.post(`${this.apiUrl}/forgot-psw`, body);
   }
 
+
   creationTeam(team: Team): Observable<any> {
     console.log(team);
 
@@ -65,6 +66,7 @@ export class AuthService {
   }
 
 
+
   addMember(membre: Membre): Observable<any> {
     console.log(membre);
 

src/app/services/organizee.service.spec.ts

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

src/app/services/organizee.service.ts

@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { map, Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class OrganizeeService {
+  apiUrl: string;
+  tokenKey: string;
+
+  constructor(private http: HttpClient) {
+    // On se sert des variables d'environnement de notre application
+    this.apiUrl = environment.apiUrl;
+    this.tokenKey = environment.tokenKey;
+  }
+}

src/app/services/repertoire.service.spec.ts

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

src/app/services/repertoire.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { map, Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { Contact } from '../models/contact';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RepertoireService {
+  apiUrl: string;
+  tokenKey: string;
+
+  constructor(private http: HttpClient) {
+    // On se sert des variables d'environnement de notre application
+    this.apiUrl = environment.apiUrl;
+    this.tokenKey = environment.tokenKey;
+  }
+
+  getContact(): Observable<any> {
+    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
+}