dasboard pas fini et modif addmembre

src/app/app.module.ts

@@ -41,6 +41,7 @@ import { PageUpdateAccountComponent } from './pages/page-update-account/page-upd
 import { DayPilot, DayPilotModule } from "@daypilot/daypilot-lite-angular";
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
+import { CardAvatarComponent } from './components/card-avatar/card-avatar.component';
 registerLocaleData(localeFr)
 
 @NgModule({
@@ -80,6 +81,7 @@ registerLocaleData(localeFr)
     FooterComponent,
     PageDeleteAccountComponent,
     PageUpdateAccountComponent,
+    CardAvatarComponent,
 
   ],
   imports: [

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

@@ -0,0 +1,13 @@
+<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>
+            </div>
+          </div>
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+#couleur{
+  width: 60px;
+  height: 60px;
+  margin: 0 auto;
+  background: black;
+
+}
+
+.card {
+  min-height: 8px;
+  border: none;
+  overflow: hidden;
+  border-radius: 8px;
+  justify-content: center;
+}
+
+
+h3 {
+  font-size: small;
+}

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

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

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

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

src/app/components/meteo/meteo.component.scss

@@ -1 +0,0 @@
-

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

@@ -54,8 +54,8 @@ export class PageAddMemberComponent implements OnInit {
   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 firstNameValue = this.addMemberForm.value['firstNameFc'];
     const emailValue = this.addMemberForm.value['emailFc'];
     const roleValue = this.addMemberForm.value['roleFc'];
     const passwordValue = this.addMemberForm.value['passwordFc'];
@@ -65,8 +65,8 @@ export class PageAddMemberComponent implements OnInit {
 
 
     const membre: Membre = {
-      nom: firstNameValue,
-      prenom: lastNameValue,
+      nom: lastNameValue,
+      prenom: firstNameValue,
       email: emailValue,
       password: passwordValue,
       couleur: couleurValue,

src/app/pages/page-ajout-contact/page-ajout-contact.component.html

@@ -1,9 +1,10 @@
-<div>
 <app-header></app-header>
+<div class="row">
+    <div class="col-md-auto">
         <app-side-bar></app-side-bar>
     </div>
 <div class="ajoutContact-form text-center">
-    <h1>Ajouter un contact</h1>
+    <h3>Ajouter un contact</h3>
     <main class="form-ajoutContact">
         <form  (ngSubmit)="onSubmit()" [formGroup]="ajoutContactForm">
             
@@ -84,3 +85,4 @@
         </form>
     </main>
 </div>
+</div>

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

@@ -1,32 +1,39 @@
 <app-header></app-header>
 <app-side-bar></app-side-bar>
    
-<div class="container">
 
+
+<div class="container">
   <div>
     <h3 class="titre">Bienvenue {{conectedUser.prenom}}!!</h3>
   </div>
-
   <div class="row d-flex align-items-center flex-row">
 
-    <div class="col-4">
-      <div class="flex-row border">
+      <div class="col-sm-3 col-xs-6 box border" id="boxThree">
         <app-meteo></app-meteo>
       </div>
-      <div class="flex-row border">
-        <span>Humeur en attente component</span>
-      </div>
-    </div>
-
-    <div class="col-8 border">
+      <div class="col-sm-3 col-xs-6 box border" id="boxTwo">
         <app-calendrier>A venir</app-calendrier>
       </div>
 
-  </div>
-
-
       <div class="row">
-    <app-card-member>A modifier</app-card-member>
+      <div class="col-sm-3 col-xs-6 box border" id="boxFour">
+        <div>
+          <p>Humeur en attente component
+          </p>
+          <p>Humeur en attente component
+          </p>
+          <p>Humeur en attente component
+          </p>
+        </div>
+        </div>
       </div>
     
+    <div class="row avatar">
+      <div class="col" *ngFor="let membreData of listMembres">
+          <app-card-avatar [membre]="membreData">
+          </app-card-avatar>
+      </div>
+    </div>
+  </div>
 </div>

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

@@ -1,10 +1,11 @@
 .titre{
+  display: inline-flex;
+  margin-left: 20px;
   text-align: center;
   font-weight: bold;
 }
 
 .meteo {
-  display: flex;
   margin-left: 500px;
   margin-top: -60px;
 }
@@ -12,11 +13,38 @@
 .container {
   display: flex;
   padding: 10px;
-  border: 1px solid 8c2e9b;
+
 }
 
-
+button{
+  margin-bottom: 5px;
+}
 
 .calendrier{
   align-content: flex-end;
 }
+
+#boxFour{
+  height: 150px;
+  margin-top: -70px;
+  width: fit-content;
+}
+
+#boxThree{
+  margin-top: -85px;
+  height: 150px;
+  width: fit-content;
+}
+
+#boxTwo{
+  margin-top: 50px;
+  margin-left: 150px;
+  height: 50%;
+  width: fit-content;
+}
+
+.avatar{
+  margin-top: -50px;
+  justify-content: space-between;
+  margin: 0;
+}

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

@@ -12,11 +12,13 @@ import { TokenService } from 'src/app/services/token.service';
 export class PageDashboardComponent implements OnInit {
 
   conectedUser: any;
+  listMembres: any[];
 
   constructor(private membreService: MembreService,
     private http: HttpClient, 
     private router: Router,  
     private tokenService: TokenService) { 
+      this.listMembres = [];
 }
 
   ngOnInit(): void {
@@ -24,6 +26,11 @@ export class PageDashboardComponent implements OnInit {
       this.conectedUser = result ;
       console.log(result);
     })
+
+    this.membreService.getMembresByTeamId()?.subscribe((membres: any[]) => {
+      console.log(membres);
+      this.listMembres = membres;
+  });
   }
 
 

src/app/pages/page-modifier-contact/page-modifier-contact.component.html

@@ -1,10 +1,11 @@
-<div>
 <app-header></app-header>
+<div class="row">
+    <div class="col-md-auto">
         <app-side-bar></app-side-bar>
     </div>
 
 <div class="modifContact-form text-center">
-    <h1>Modifier ce contact</h1>
+    <h3>Modifier ce contact</h3>
     <main class="form-modifContact">
         <form  (ngSubmit)="onSubmit()" [formGroup]="modifContactForm">
             
@@ -85,3 +86,4 @@
         </form>
     </main>
 </div>
+</div> 

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

@@ -69,5 +69,6 @@ export class PageRepertoireComponent implements OnInit {
       }
       this.router.navigate(['repertoire/']);
     });
+    window.location.reload();
   }
 }