Partner Detail URI

matsen-tool/src/app/app-routing.module.ts

@@ -23,7 +23,7 @@ const routes: Routes = [
         canActivate: [AuthGuard],
         children: [
             {path: '', component: PartnersComponent, data: {dataType: 'customer'}},
-            {path: 'detail', component: PartnersDetailComponent, data: {dataType: 'customer-detail'}},
+            {path: ':id', component: PartnersDetailComponent, data: {dataType: 'customer-detail'}},
         ]
     },
     {

matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts

@@ -1,23 +1,34 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {ModalComponent} from "@app/_components/modal/modal.component";
 import {NewContactComponent} from "@app/partners/new-contact/new-contact.component";
+import {ActivatedRoute} from "@angular/router";
 
 @Component({
     selector: 'app-partners-detail',
     templateUrl: './partners-detail.component.html',
     styleUrl: './partners-detail.component.scss'
 })
-export class PartnersDetailComponent {
+export class PartnersDetailComponent implements OnInit {
     private closeResult = '';
+    protected id: string;
 
     protected readonly ModalComponent = ModalComponent;
-    constructor(private modalService: NgbModal) {
+    constructor(
+        private modalService: NgbModal,
+        private route: ActivatedRoute
+    ) {
+        this.id = "";
     }
     openModalNewContact() {
         const modalRef = this.modalService.open(ModalComponent);
         modalRef.componentInstance.dynamicComponent = NewContactComponent;
     }
 
-    ngOnInit() {}
+    ngOnInit() {
+        this.route.params.subscribe(params => {
+            this.id = params['id'];
+            // Hier kannst du die Logik für die Anzeige der Details für den bestimmten Partner implementieren
+        });
+    }
 }

matsen-tool/src/app/partners/partners.component.html

@@ -5,14 +5,16 @@
         <th mat-header-cell *matHeaderCellDef>
             Nr.
         </th>
-        <td mat-cell *matCellDef="let element">{{(currentPageSize * currentPageIndex) + dataSource.filteredData.indexOf(element) + 1}}</td>
+        <td mat-cell
+            *matCellDef="let element">{{ (currentPageSize * currentPageIndex) + dataSource.filteredData.indexOf(element) + 1 }}
+        </td>
     </ng-container>
 
     <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Partner sortieren">
             Partner
         </th>
-        <td mat-cell *matCellDef="let element"><a routerLink="detail">{{ element.name }}</a></td>
+        <td mat-cell *matCellDef="let element"><a [routerLink]="['/customers', element.name]">{{ element.name }}</a></td>
     </ng-container>
 
     <ng-container matColumnDef="address">
@@ -29,7 +31,8 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Website sortieren">
             Website
         </th>
-        <td mat-cell *matCellDef="let element"><a href="{{ element.website }}" target="_blank">{{ element.website }}</a></td>
+        <td mat-cell *matCellDef="let element"><a href="{{ element.website }}" target="_blank">{{ element.website }}</a>
+        </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>