Partners with real data

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

@@ -1,25 +1,25 @@
 <table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)"
        class="mat-elevation-z8">
 
-    <ng-container matColumnDef="position">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Nummer sortieren">
+    <ng-container matColumnDef="pos">
+        <th mat-header-cell *matHeaderCellDef>
             Nr.
         </th>
-        <td mat-cell *matCellDef="let element">{{ element.position }}</td>
+        <td mat-cell *matCellDef="let element">{{dataSource.filteredData.indexOf(element) + 1}}</td>
     </ng-container>
 
-    <ng-container matColumnDef="partner">
+    <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.partner }}</a></td>
+        <td mat-cell *matCellDef="let element"><a routerLink="detail">{{ element.name }}</a></td>
     </ng-container>
 
     <ng-container matColumnDef="address">
         <th mat-header-cell *matHeaderCellDef mat-sort-header="street" sortActionDescription="Nach Adresse sortieren">
             Adresse
         </th>
-        <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.street_no }}
+        <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}
             <br/>{{ element.zip }} {{ element.city }}
         </td>
     </ng-container>
@@ -28,7 +28,7 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Website sortieren">
             Website
         </th>
-        <td mat-cell *matCellDef="let element">{{ element.website }}</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>

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

@@ -3,47 +3,19 @@ import {MatSort, Sort, MatSortModule} from "@angular/material/sort";
 import {LiveAnnouncer} from "@angular/cdk/a11y";
 import {MatTableDataSource, MatTableModule} from "@angular/material/table";
 import {ActivatedRoute, RouterLink, RouterLinkActive} from "@angular/router";
+import {Subscription} from "rxjs";
+import {PartnerJsonld, PartnerService} from "@app/core/api/v1";
 
 export interface PeriodicElement {
-    position: number;
-    partner: string;
+    pos: number;
+    name: string;
     street: string;
-    street_no: string;
+    streetNo: string;
     zip: string;
     city: string;
     website: string;
 }
 
-const ELEMENT_DATA: PeriodicElement[] = [
-    {
-        position: 1,
-        partner: 'spawntree GmbH',
-        street: 'Bauernvogtskoppel',
-        street_no: '6c',
-        zip: '21465',
-        city: 'Wentorf',
-        website: 'http://spawntree.de'
-    },
-    {
-        position: 2,
-        partner: 'Peter Pan AG',
-        street: 'Heinrich-Löhns-Weg',
-        street_no: '123b',
-        zip: '22134',
-        city: 'Hamburg',
-        website: ''
-    },
-    {
-        position: 3,
-        partner: 'Weit Weg GmbH',
-        street: 'Hans-Werner-Olm Straße',
-        street_no: '1',
-        zip: '87254',
-        city: 'München',
-        website: 'http://weitweg.de'
-    },
-];
-
 @Component({
     selector: 'app-partners',
     templateUrl: './partners.component.html',
@@ -54,17 +26,43 @@ const ELEMENT_DATA: PeriodicElement[] = [
 export class PartnersComponent implements OnInit, AfterViewInit {
     @ViewChild(MatSort) sort;
 
+
+    protected partnersSub: Subscription;
+    protected partners: Array<PartnerJsonld> = [];
+
     dataType!: string;
-    displayedColumns: string[] = ['position', 'partner', 'address', 'website'];
-    dataSource = new MatTableDataSource(ELEMENT_DATA);
+    displayedColumns: string[] = ['pos', 'name', 'address', 'website'];
+    dataSource = new MatTableDataSource(this.partners);
 
-    constructor(private _liveAnnouncer: LiveAnnouncer, private route: ActivatedRoute) {
+    constructor(
+        private _liveAnnouncer: LiveAnnouncer,
+        private route: ActivatedRoute,
+        private partnerService: PartnerService
+    ) {
         this.sort = new MatSort();
+
+        this.partnersSub = new Subscription();
+        this.partners = [];
     }
 
     ngOnInit() {
         this.dataType = this.route.snapshot.data['dataType'];
         console.log('Data Type:', this.dataType);
+
+        this.partnersSub = this.partnerService.partnersGetCollection().subscribe(
+            data => {
+                this.partners = data["hydra:member"];
+                // this.partners.sort((a, b) => {
+                //     const nameA = a.name ? a.name.toLowerCase() : '';
+                //     const nameB = b.name ? b.name.toLowerCase() : '';
+                //     return nameA.localeCompare(nameB);
+                // });
+
+                this.dataSource.data = this.partners;
+                console.log(this.partners);
+            }
+        );
+        console.log(this.dataSource.data);
     }
 
     ngAfterViewInit() {