From a21c8ca5f990f974622102e4e921d7ba9659b78e Mon Sep 17 00:00:00 2001
From: Marcel Meyer <m.meyer@it-frankfurt.com>
Date: Fri, 4 Nov 2022 16:44:19 +0100
Subject: [PATCH 1/2] added activatedRoute to member-details

---
 src/app/app-routing.module.ts                        | 12 +++++++-----
 .../member-details/member-details.component.html     |  6 +++++-
 .../member-details/member-details.component.ts       | 12 +++++++++++-
 .../members/member-table/member-table.component.html |  4 ++--
 .../members/member-table/member-table.component.scss |  1 +
 .../members/member-table/member-table.component.ts   |  3 +++
 src/app/services/member.service.ts                   |  4 ++++
 7 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 25c60d7..d80b831 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -5,11 +5,18 @@ import {RoutesComponent} from "./components/routes/routes.component";
 import {RouteComponent} from "./components/routes/route/route.component";
 import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component";
 import {AddRouteFormComponent} from "./components/routes/route/add-route-form/add-route-form.component";
+import {MemberDetailsComponent} from "./components/members/member-details/member-details.component";
 
 const routes: Routes = [
+  {
+    path:'', redirectTo:'members', pathMatch:"full"
+  },
   {
     path:'members', component:MemberTableComponent
   },
+  {
+    path:'member/:id', component:MemberDetailsComponent
+  },
   {
     path: 'routes',
     component: RoutesComponent,
@@ -27,11 +34,6 @@ const routes: Routes = [
     path: 'routesAddForm',
     component: AddRouteFormComponent,
   },
-  {
-    path: '',
-    redirectTo: 'members',
-    pathMatch: 'full',
-  },
 ];
 
 @NgModule({
diff --git a/src/app/components/members/member-details/member-details.component.html b/src/app/components/members/member-details/member-details.component.html
index 4173aba..04ff30c 100644
--- a/src/app/components/members/member-details/member-details.component.html
+++ b/src/app/components/members/member-details/member-details.component.html
@@ -1 +1,5 @@
-<p>member-details works!</p>
+<div >
+  <div>
+      <h2>{{member.firstName}}</h2>
+  </div>
+</div>
diff --git a/src/app/components/members/member-details/member-details.component.ts b/src/app/components/members/member-details/member-details.component.ts
index 52a75f4..c0a4979 100644
--- a/src/app/components/members/member-details/member-details.component.ts
+++ b/src/app/components/members/member-details/member-details.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import {MemberService} from "../../../services/member.service";
+import {ActivatedRoute} from "@angular/router";
+import {Member} from "../../../models/member";
 
 @Component({
   selector: 'app-member-details',
@@ -7,9 +10,16 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MemberDetailsComponent implements OnInit {
 
-  constructor() { }
+  member!: Member;
+
+  constructor(private memberService: MemberService, private route: ActivatedRoute) { }
 
   ngOnInit(): void {
+    this.route.params.subscribe(params => this.getMemberById(params['id']));
+  }
+
+  getMemberById(id: number) {
+    this.memberService.getMemberById(id).subscribe((data: Member) => this.member = data);
   }
 
 }
diff --git a/src/app/components/members/member-table/member-table.component.html b/src/app/components/members/member-table/member-table.component.html
index 2aeb5b3..f4ec68e 100644
--- a/src/app/components/members/member-table/member-table.component.html
+++ b/src/app/components/members/member-table/member-table.component.html
@@ -21,7 +21,7 @@
    <ng-container matColumnDef="details">
      <th mat-header-cell *matHeaderCellDef> Details </th>
      <td mat-cell *matCellDef="let member">
-       <button mat-icon-button color="primary" (click)="redirectToDetails(member.id)">
+       <button mat-icon-button color="primary" [routerLink]="['/member', member.id]">
          <mat-icon class="mat-18">reorder</mat-icon>
        </button>
      </td>
@@ -36,7 +36,7 @@
    </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row columns: displayedColumns" ></tr>
 
    <!-- SHOWS WHEN DATA DOES NOT EXIST -->
    <tr *matNoDataRow>
diff --git a/src/app/components/members/member-table/member-table.component.scss b/src/app/components/members/member-table/member-table.component.scss
index 1a04422..6682973 100644
--- a/src/app/components/members/member-table/member-table.component.scss
+++ b/src/app/components/members/member-table/member-table.component.scss
@@ -13,3 +13,4 @@ th.mat-header-cell {
 th.mat-sort-header-sorted {
   color: black;
 }
+
diff --git a/src/app/components/members/member-table/member-table.component.ts b/src/app/components/members/member-table/member-table.component.ts
index d19f864..0f17aae 100644
--- a/src/app/components/members/member-table/member-table.component.ts
+++ b/src/app/components/members/member-table/member-table.component.ts
@@ -20,6 +20,7 @@ export class MemberTableComponent implements OnInit{
   posts: any;
   displayedColumns: string[] = ['id', 'firstName', 'lastName', 'details', 'delete'];
 
+
   constructor(private memberService: MemberService) {}
 
   ngOnInit(): void {
@@ -58,4 +59,6 @@ export class MemberTableComponent implements OnInit{
   redirectToDelete(id: number) {
 
   }
+
+
 }
diff --git a/src/app/services/member.service.ts b/src/app/services/member.service.ts
index 6cb0333..35cb082 100644
--- a/src/app/services/member.service.ts
+++ b/src/app/services/member.service.ts
@@ -16,6 +16,10 @@ export class MemberService {
   return this.http.get<Member[]>(`${this.apiServerUrl}/members/all`);
   }
 
+  public getMemberById(id: number): Observable<Member> {
+    return this.http.get<Member>(`${this.apiServerUrl}/member/{id}`);
+  }
+
   public addMember(member: Member): Observable<Member> {
     return this.http.post<Member>(`${this.apiServerUrl}/member/add`, member);
   }
-- 
GitLab


From e6ecb12a87e51db1b7ab6e24ab4d5c87a4eb6702 Mon Sep 17 00:00:00 2001
From: Marcel Meyer <m.meyer@it-frankfurt.com>
Date: Sat, 5 Nov 2022 19:24:08 +0100
Subject: [PATCH 2/2] added member methods to member detail compnent

---
 src/app/app-routing.module.ts                               | 2 +-
 src/app/app.module.ts                                       | 2 +-
 .../member-details/member-details.component.html            | 2 +-
 .../member-details/member-details.component.scss            | 0
 .../member-details/member-details.component.spec.ts         | 0
 .../member-details/member-details.component.ts              | 6 +++---
 6 files changed, 6 insertions(+), 6 deletions(-)
 rename src/app/components/members/{ => member-table}/member-details/member-details.component.html (63%)
 rename src/app/components/members/{ => member-table}/member-details/member-details.component.scss (100%)
 rename src/app/components/members/{ => member-table}/member-details/member-details.component.spec.ts (100%)
 rename src/app/components/members/{ => member-table}/member-details/member-details.component.ts (77%)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d80b831..50b16f0 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -5,7 +5,7 @@ import {RoutesComponent} from "./components/routes/routes.component";
 import {RouteComponent} from "./components/routes/route/route.component";
 import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component";
 import {AddRouteFormComponent} from "./components/routes/route/add-route-form/add-route-form.component";
-import {MemberDetailsComponent} from "./components/members/member-details/member-details.component";
+import {MemberDetailsComponent} from "./components/members/member-table/member-details/member-details.component";
 
 const routes: Routes = [
   {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 00354ea..d4e78fd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -23,7 +23,7 @@ import {RoutesComponent} from "./components/routes/routes.component";
 import {RouteComponent} from "./components/routes/route/route.component";
 import {AddRouteFormComponent} from "./components/routes/route/add-route-form/add-route-form.component";
 import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component";
-import { MemberDetailsComponent } from './components/members/member-details/member-details.component';
+import { MemberDetailsComponent } from './components/members/member-table/member-details/member-details.component';
 
 @NgModule({
   declarations: [
diff --git a/src/app/components/members/member-details/member-details.component.html b/src/app/components/members/member-table/member-details/member-details.component.html
similarity index 63%
rename from src/app/components/members/member-details/member-details.component.html
rename to src/app/components/members/member-table/member-details/member-details.component.html
index 04ff30c..48f402e 100644
--- a/src/app/components/members/member-details/member-details.component.html
+++ b/src/app/components/members/member-table/member-details/member-details.component.html
@@ -1,4 +1,4 @@
-<div >
+<div *ngIf="member !== undefined">
   <div>
       <h2>{{member.firstName}}</h2>
   </div>
diff --git a/src/app/components/members/member-details/member-details.component.scss b/src/app/components/members/member-table/member-details/member-details.component.scss
similarity index 100%
rename from src/app/components/members/member-details/member-details.component.scss
rename to src/app/components/members/member-table/member-details/member-details.component.scss
diff --git a/src/app/components/members/member-details/member-details.component.spec.ts b/src/app/components/members/member-table/member-details/member-details.component.spec.ts
similarity index 100%
rename from src/app/components/members/member-details/member-details.component.spec.ts
rename to src/app/components/members/member-table/member-details/member-details.component.spec.ts
diff --git a/src/app/components/members/member-details/member-details.component.ts b/src/app/components/members/member-table/member-details/member-details.component.ts
similarity index 77%
rename from src/app/components/members/member-details/member-details.component.ts
rename to src/app/components/members/member-table/member-details/member-details.component.ts
index c0a4979..0884c3d 100644
--- a/src/app/components/members/member-details/member-details.component.ts
+++ b/src/app/components/members/member-table/member-details/member-details.component.ts
@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import {MemberService} from "../../../services/member.service";
+import {Component, Input, OnInit} from '@angular/core';
+import {MemberService} from "../../../../services/member.service";
 import {ActivatedRoute} from "@angular/router";
-import {Member} from "../../../models/member";
+import {Member} from "../../../../models/member";
 
 @Component({
   selector: 'app-member-details',
-- 
GitLab