dasboard pas fini et modif addmembre

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>
     <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 class="col-sm-3 col-xs-6 box border" id="boxTwo">
+        <app-calendrier>A venir</app-calendrier>
+      </div>
+
+      <div class="row">
+      <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 class="col-8 border">
-      <app-calendrier>A venir</app-calendrier>
-    </div>
-  
   </div>
-
-
-  <div class="row">
-    <app-card-member>A modifier</app-card-member>
-  </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,18 +12,25 @@ 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 {
     this.membreService.getMembreId(this.tokenService.getCurrentMembreId()).subscribe((result) => {
       this.conectedUser = result ;
       console.log(result);
     })
+
+    this.membreService.getMembresByTeamId()?.subscribe((membres: any[]) => {
+      console.log(membres);
+      this.listMembres = membres;
+  });
   }