From a6953ed792f093c0bbb013e9af5b81b64480d4ee Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MBP-von-Florian.fritz.box>
Date: Thu, 15 Feb 2024 10:42:39 +0100
Subject: [PATCH] pagination - contactsdetail

---
 .../contacts-detail.component.html            | 125 ++++++------------
 .../contacts-detail.component.ts              |  34 ++++-
 .../partners-detail.component.html            |  26 +++-
 .../partners-detail.component.ts              |   2 +-
 .../src/app/partners/partners.component.ts    |   3 +-
 5 files changed, 96 insertions(+), 94 deletions(-)

diff --git a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html
index b65b909..d7ed3a3 100644
--- a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html
+++ b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html
@@ -1,21 +1,22 @@
 <div class="card">
     <div class="card-body row">
         <div class="col-8">
-            <h1>{{contact.firstName}} {{contact.lastName}}</h1>
+            <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
             <dl>
                 <dt>Position:</dt>
-                <dd>{{contact.position}}</dd>
+                <dd>{{ contact.position }}</dd>
                 <dt>Telefon:</dt>
-                <dd>{{contact.phone}}</dd>
+                <dd>{{ contact.phone }}</dd>
                 <dt>E-Mail:</dt>
-                <dd><a href="mailto:{{contact.email}}">{{contact.email}}</a></dd>
+                <dd><a href="mailto:{{contact.email}}">{{ contact.email }}</a></dd>
                 <dt>Geburtstag:</dt>
-                <dd>{{contact.birthday | date:'dd.MM.YYYY'}}</dd>
+                <dd>{{ contact.birthday | date:'dd.MM.YYYY' }}</dd>
             </dl>
         </div>
         <div class="col-4">
-            <img *ngIf="contact.imageUrl !== null" src="{{environment.basePath}}{{contact.imageUrl}}" width="247" height="94"
-                 alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}" />
+            <img *ngIf="contact.imageUrl !== null" src="{{environment.basePath}}{{contact.imageUrl}}" width="247"
+                 height="94"
+                 alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}"/>
         </div>
     </div>
 </div>
@@ -25,92 +26,48 @@
         <h2>Notizen</h2>
         <button>Neue Notiz</button>
     </div>
-    <div class="post mb-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="d-flex justify-content-between align-items-center">
-                    <p>12.10.2023</p>
-                    <p>Jan Hansen</p>
-                </div>
-                <div>
-                    <h3>Neues Tool nutzen</h3>
-                    <p>Immer alles hier rein schreiben!</p>
+    <div *ngFor="let post of posts">
+        <div class="post mb-3">
+            <div class="card">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <p>{{ post.createdAt | date:'dd.MM.YYYY hh:mm' }}</p>
+                        <p>{{ post.ownerName }}</p>
+                    </div>
+                    <div>
+                        <h3>{{ post.headline }}</h3>
+                        <p>{{ post.message }}</p>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="d-flex justify-content-end">
-            <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
-        </div>
-    </div>
-    <div class="post mb-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="d-flex justify-content-between align-items-center">
-                    <p>01.10.2023</p>
-                    <p>Jan Hansen</p>
-                </div>
-                <div>
-                    <h3>Konditionen</h3>
-                    <p>Wir gewähren immer 10% Rabatt bei Bestellungen über 20.000 €.</p>
+            <div class="card ms-5">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <p>04.10.2023</p>
+                        <p>Jan Hansen</p>
+                    </div>
+                    <div>
+                        <p>Leider geht er mobil selten dran. Eher E-Mails schicken!</p>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="card ms-5">
-            <div class="card-body">
-                <div class="d-flex justify-content-between align-items-center">
-                    <p>02.10.2023</p>
-                    <p>Daniel Knudsen</p>
-                </div>
-                <div>
-                    <p>Achja! Gut zu wissen!</p>
+            <div class="card ms-5">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <p>02.10.2023</p>
+                        <p>Florian Eisenmenger</p>
+                    </div>
+                    <div>
+                        <p>Ich habe mit FAX die besten Erfahrungen gemacht...</p>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="d-flex justify-content-end">
-            <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
-        </div>
-    </div>
-    <div class="post mb-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="d-flex justify-content-between align-items-center">
-                    <p>12.09.2023</p>
-                    <p>Florian Eisenmenger</p>
-                </div>
-                <div>
-                    <h3>Ausland - Schwer erreichbar</h3>
-                    <p>Peter Müller ist der Chef, aber schwer erreichbar. Am besten Mobil probieren!</p>
-                </div>
-            </div>
-        </div>
-        <div class="card ms-5">
-            <div class="card-body">
-                <div class="d-flex justify-content-between align-items-center">
-                    <p>04.10.2023</p>
-                    <p>Jan Hansen</p>
-                </div>
-                <div>
-                    <p>Leider geht er mobil selten dran. Eher E-Mails schicken!</p>
-                </div>
+            <div class="d-flex justify-content-end">
+                <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
             </div>
         </div>
-        <div class="card ms-5">
-            <div class="card-body">
-                <div class="d-flex justify-content-between align-items-center">
-                    <p>02.10.2023</p>
-                    <p>Florian Eisenmenger</p>
-                </div>
-                <div>
-                    <p>Ich habe mit FAX die besten Erfahrungen gemacht...</p>
-                </div>
-            </div>
-        </div>
-        <div class="d-flex justify-content-end">
-            <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
-        </div>
     </div>
-    <mat-paginator class="mb-4"
-                   [length]="postsLength"
+    <mat-paginator *ngIf="posts.length > 0" class="mb-4" [length]="postsLength"
                    (page)="postsHandlePageEvent($event)"
                    [pageSize]="postsPageSize"
                    [pageIndex]="postsPageIndex"
diff --git a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
index e155eba..329b932 100644
--- a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
+++ b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
@@ -1,6 +1,6 @@
 import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
 import {environment} from "@environments/environment";
-import {ContactJsonld, ContactService} from "@app/core/api/v1";
+import {ContactJsonld, ContactService, PostJsonld, PostService} from "@app/core/api/v1";
 import {Subscription} from "rxjs";
 import {ActivatedRoute} from "@angular/router";
 import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
@@ -19,6 +19,8 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     protected id: string;
     protected contactSub: Subscription;
 
+    protected postsSub: Subscription;
+    protected posts: Array<PostJsonld>;
     protected postsDataSource;
     protected postsLength: number;
     protected postsPageEvent: PageEvent;
@@ -27,7 +29,8 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
 
     constructor(
         private contactService: ContactService,
-        private route: ActivatedRoute
+        private route: ActivatedRoute,
+        private postService: PostService
     ) {
         this.id = "";
         this.contact = {} as ContactJsonld;
@@ -35,8 +38,10 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
         this.contactSub = new Subscription();
 
         // TODO: Change Jsonld
+        this.postsSub = new Subscription();
+        this.posts = [];
         this.postsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
-        this.postsDataSource = new MatTableDataSource; //<ContactJsonld>(this.contacts)
+        this.postsDataSource = new MatTableDataSource<PostJsonld>(this.posts);
         this.postsLength = 0;
         this.postsPageEvent = new PageEvent();
         this.postsPageSize = 30;
@@ -47,14 +52,14 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
         this.route.params.subscribe(params => {
             this.id = params['id'];
         });
-        this.getData();
+        this.getContactData();
     }
 
     ngAfterViewInit() {
         this.postsDataSource.paginator = this.postsPaginator;
     }
 
-    getData() {
+    getContactData() {
         // switch over this.dataType (customers, etc.)
         this.contactSub = this.contactService.contactsIdGet(
             this.id
@@ -65,11 +70,28 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
         );
     }
 
+    getPostsData() {
+        this.postsSub = this.postService.postsGetCollection(
+            this.postsPageIndex + 1,
+            10,
+            undefined,
+            undefined,
+            this.id
+        ).subscribe(
+            data => {
+                console.log(data);
+                this.posts = data["hydra:member"];
+                this.postsLength = Number(data["hydra:totalItems"]);
+                this.postsPaginator.length = this.postsLength;
+            }
+        );
+    }
+
     postsHandlePageEvent(e: PageEvent) {
         this.postsPageEvent = e;
         this.postsLength = e.length;
         this.postsPageIndex = e.pageIndex.valueOf();
         this.postsPageSize = e.pageSize.valueOf();
-        // this.getData();
+        this.getPostsData();
     }
 }
diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
index 281d8b6..6089edf 100644
--- a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
+++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
@@ -55,7 +55,7 @@
                 <span (click)="navigateToContactDetails(contact)" class="badge bg-secondary">Details</span>
             </div>
         </div>
-        <mat-paginator class="mb-4"
+        <mat-paginator *ngIf="contacts.length > 0" class="mb-4"
                        [pageSizeOptions]="[6,12,18]"
                        [length]="contactsLength"
                        (page)="contactsHandlePageEvent($event)"
@@ -144,12 +144,34 @@
                     </div>
                 </div>
             </div>
+            <div class="card ms-5">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <p>04.10.2023</p>
+                        <p>Jan Hansen</p>
+                    </div>
+                    <div>
+                        <p>Leider geht er mobil selten dran. Eher E-Mails schicken!</p>
+                    </div>
+                </div>
+            </div>
+            <div class="card ms-5">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <p>02.10.2023</p>
+                        <p>Florian Eisenmenger</p>
+                    </div>
+                    <div>
+                        <p>Ich habe mit FAX die besten Erfahrungen gemacht...</p>
+                    </div>
+                </div>
+            </div>
             <div class="d-flex justify-content-end">
                 <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
             </div>
         </div>
     </div>
-    <mat-paginator class="mb-4" [length]="postsLength"
+    <mat-paginator *ngIf="posts.length > 0" class="mb-4" [length]="postsLength"
                    (page)="postsHandlePageEvent($event)"
                    [pageSize]="postsPageSize"
                    [pageIndex]="postsPageIndex"
diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
index 52d8588..a387f6e 100644
--- a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
+++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
@@ -145,7 +145,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
                 console.log(data);
                 this.posts = data["hydra:member"];
                 this.postsLength = Number(data["hydra:totalItems"]);
-                this.postsPaginator.length = this.contactsLength;
+                this.postsPaginator.length = this.postsLength;
             }
         );
     }
diff --git a/matsen-tool/src/app/partners/partners.component.ts b/matsen-tool/src/app/partners/partners.component.ts
index a6849af..edf6b54 100644
--- a/matsen-tool/src/app/partners/partners.component.ts
+++ b/matsen-tool/src/app/partners/partners.component.ts
@@ -7,13 +7,14 @@ import {PartnerJsonld, PartnerService} from "@app/core/api/v1";
 import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator";
 import {OrderFilter} from "@app/_models/orderFilter";
 import {ApiConverter} from "@app/_helpers/api.converter";
+import {NgIf} from "@angular/common";
 
 @Component({
     selector: 'app-partners',
     templateUrl: './partners.component.html',
     styleUrl: './partners.component.scss',
     standalone: true,
-    imports: [MatTableModule, MatSortModule, MatPaginatorModule, RouterLink, RouterLinkActive],
+    imports: [MatTableModule, MatSortModule, MatPaginatorModule, RouterLink, RouterLinkActive, NgIf],
 })
 export class PartnersComponent implements OnInit, AfterViewInit {
     @ViewChild(MatSort) sort;