Merge pull request #3 from AlineRinquin/aline

mise en place du html et lien vers le back de repertoire

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() { }
+  constructor() {}
-
-  ngOnInit(): void {
-  }
 
+  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-repertoire/page-repertoire.component.html

@@ -1,2 +1,32 @@
 <app-header></app-header>
-<app-side-bar></app-side-bar>
+<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() { }
+  constructor(private repertoireService: RepertoireService) {
-
+    this.listContact = [];
-  ngOnInit(): void {
+    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

@@ -20,7 +20,7 @@ export class AuthService {
   signup(membre: Membre): Observable<any> {
     console.log(membre);
 
-    return this.http.post(`${this.apiUrl}/creation-compte`, membre);
+    return this.http.post(`${this.apiUrl}/membres/sign-up`, membre);
   }
 
   signin(email: string, password: string): Observable<any> {

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

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'http://localhost:3306',
+  apiUrl: 'http://localhost:8088',
   tokenKey: 'TOKEN-ORGANIZEE',
 };