Merge pull request #32 from AlineRinquin/sana

Sana

src/app/app.module.ts

@@ -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,

src/app/components/avatar/avatar.component.html

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

src/app/components/avatar/avatar.component.spec.ts

@@ -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();
-  });
-});

src/app/components/avatar/avatar.component.ts

@@ -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 {
-  }
-
-}

src/app/components/card-member/card-member.component.html

@@ -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>

src/app/components/card-member/card-member.component.scss

@@ -0,0 +1,56 @@
+#couleur{
+  width: 100px;
+  height: 100px;
+  margin: 0 auto;
+  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;
+}

src/app/components/card-member/card-member.component.ts

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

src/app/components/side-bar/side-bar.component.html

@@ -1,5 +1,5 @@
-<nav class="wrapper">
+<nav  class="wrapper md-auto position-fixed ">
-  <ul class="nav flex-column">
+  <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>

src/app/components/side-bar/side-bar.component.scss

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

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

@@ -1,40 +1,31 @@
 <app-header></app-header>
-<div class="row">
+<div class="container-fluid">
-  <div class="col-md-auto">
+  <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="../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">
+</div>
-    <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>

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

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

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

@@ -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;
+    });
   }
 
 }

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

@@ -1,142 +1,141 @@
 <app-header></app-header>
-<div class="row">
+<div class="container-fluid">
-  <div class="col-md-auto">
+  <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>
 

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

@@ -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 {

src/app/services/membre.service.ts

@@ -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> {

src/index.html

@@ -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">