partner detail / contact detail

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

@@ -9,6 +9,8 @@ import {PartnersDetailComponent} from "@app/partners/partners-detail/partners-de
 import {ProductsComponent} from "@app/products/products.component";
 import {ProductsDetailComponent} from "@app/products/products-detail/products-detail.component";
 import {DocumentsComponent} from "@app/documents/documents.component";
+import {ContactsComponent} from "@app/contacts/contacts.component";
+import {ContactsDetailComponent} from "@app/contacts/contacts-detail/contacts-detail.component";
 
 const accountModule = () => import('./account/account.module').then(x => x.AccountModule);
 const usersModule = () => import('./users/users.module').then(x => x.UsersModule);
@@ -44,6 +46,15 @@ const routes: Routes = [
             {path: 'detail', component: PartnersDetailComponent, data: {dataType: 'service-detail'}},
         ]
     },
+    {
+        path: 'contacts',
+        component: TwoColumnComponent,
+        canActivate: [AuthGuard],
+        children: [
+            {path: '', component: ContactsComponent},
+            {path: ':id', component: ContactsDetailComponent},
+        ]
+    },
     {
         path: 'products',
         component: TwoColumnComponent,

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

@@ -15,16 +15,19 @@ import {MatCardModule} from "@angular/material/card";
 import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
 import {TranslateHttpLoader} from "@ngx-translate/http-loader";
 import {NgOptimizedImage} from "@angular/common";
-import {PartnersComponent} from './partners/partners.component';
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {TwoColumnComponent} from './layout/two-column/two-column.component';
+import {ProductsComponent} from './products/products.component';
+import {ProductsDetailComponent} from './products/products-detail/products-detail.component';
+import {DocumentsComponent} from './documents/documents.component';
+import {PartnersComponent} from './partners/partners.component';
 import {PartnersDetailComponent} from './partners/partners-detail/partners-detail.component';
-import { ProductsComponent } from './products/products.component';
-import { ProductsDetailComponent } from './products/products-detail/products-detail.component';
-import { DocumentsComponent } from './documents/documents.component';
-import { NewContactComponent } from './partners/new-contact/new-contact.component';
-import { ModalComponent } from './_components/modal/modal.component';
+import {NewContactComponent} from './partners/new-contact/new-contact.component';
+import {ContactsComponent} from './contacts/contacts.component';
+import {ContactsDetailComponent} from './contacts/contacts-detail/contacts-detail.component';
+import {ModalComponent} from './_components/modal/modal.component';
 import {PropertyInterceptor} from "@app/_helpers/property.interceptor";
+import {MatPaginatorModule} from "@angular/material/paginator";
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -58,19 +61,22 @@ export function HttpLoaderFactory(http: HttpClient) {
         AppRoutingModule,
         MatCardModule,
         NgOptimizedImage,
-        PartnersComponent
+        PartnersComponent,
+        MatPaginatorModule
     ],
     declarations: [
         AppComponent,
         AlertComponent,
         HomeComponent,
         TwoColumnComponent,
-        PartnersDetailComponent,
         ProductsComponent,
         ProductsDetailComponent,
         DocumentsComponent,
+        ModalComponent,
+        PartnersDetailComponent,
         NewContactComponent,
-        ModalComponent
+        ContactsComponent,
+        ContactsDetailComponent
     ],
     providers: [
         {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},

matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html

@@ -0,0 +1,119 @@
+<div class="card">
+    <div class="card-body row">
+        <div class="col-8">
+            <h1>{{contact.firstName}} {{contact.lastName}}</h1>
+            <dl>
+                <dt>Position:</dt>
+                <dd>{{contact.position}}</dd>
+                <dt>Telefon:</dt>
+                <dd>{{contact.phone}}</dd>
+                <dt>E-Mail:</dt>
+                <dd><a href="mailto:{{contact.email}}">{{contact.email}}</a></dd>
+                <dt>Geburtstag:</dt>
+                <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}}" />
+        </div>
+    </div>
+</div>
+
+<div class="posts">
+    <div class="d-flex justify-content-between align-items-start">
+        <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>
+            </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>
+            </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>
+            </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>
+        </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"
+                   (page)="postsHandlePageEvent($event)"
+                   [pageSize]="postsPageSize"
+                   [pageIndex]="postsPageIndex"
+                   showFirstLastButtons>
+    </mat-paginator>
+</div>

matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactsDetailComponent } from './contacts-detail.component';
+
+describe('ContactsDetailComponent', () => {
+  let component: ContactsDetailComponent;
+  let fixture: ComponentFixture<ContactsDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ContactsDetailComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ContactsDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,75 @@
+import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
+import {environment} from "@environments/environment";
+import {ContactJsonld, ContactService} from "@app/core/api/v1";
+import {Subscription} from "rxjs";
+import {ActivatedRoute} from "@angular/router";
+import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
+import {MatTableDataSource} from "@angular/material/table";
+
+@Component({
+    selector: 'app-contacts-detail',
+    templateUrl: './contacts-detail.component.html',
+    styleUrl: './contacts-detail.component.scss'
+})
+export class ContactsDetailComponent implements OnInit, AfterViewInit {
+    @ViewChild(MatPaginator) postsPaginator: MatPaginator;
+
+    protected readonly environment = environment;
+    protected contact: ContactJsonld;
+    protected id: string;
+    protected contactSub: Subscription;
+
+    protected postsDataSource;
+    protected postsLength: number;
+    protected postsPageEvent: PageEvent;
+    protected postsPageSize: number;
+    protected postsPageIndex: number;
+
+    constructor(
+        private contactService: ContactService,
+        private route: ActivatedRoute
+    ) {
+        this.id = "";
+        this.contact = {} as ContactJsonld;
+
+        this.contactSub = new Subscription();
+
+        // TODO: Change Jsonld
+        this.postsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
+        this.postsDataSource = new MatTableDataSource; //<ContactJsonld>(this.contacts)
+        this.postsLength = 0;
+        this.postsPageEvent = new PageEvent();
+        this.postsPageSize = 30;
+        this.postsPageIndex = 0;
+    }
+
+    ngOnInit() {
+        this.route.params.subscribe(params => {
+            this.id = params['id'];
+        });
+        this.getData();
+    }
+
+    ngAfterViewInit() {
+        this.postsDataSource.paginator = this.postsPaginator;
+    }
+
+    getData() {
+        // switch over this.dataType (customers, etc.)
+        this.contactSub = this.contactService.contactsIdGet(
+            this.id
+        ).subscribe(
+            data => {
+                this.contact = data;
+            }
+        );
+    }
+
+    postsHandlePageEvent(e: PageEvent) {
+        this.postsPageEvent = e;
+        this.postsLength = e.length;
+        this.postsPageIndex = e.pageIndex.valueOf();
+        this.postsPageSize = e.pageSize.valueOf();
+        // this.getData();
+    }
+}

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

@@ -0,0 +1 @@
+<p>contacts works!</p>

matsen-tool/src/app/contacts/contacts.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactsComponent } from './contacts.component';
+
+describe('ContactsComponent', () => {
+  let component: ContactsComponent;
+  let fixture: ComponentFixture<ContactsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ContactsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ContactsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contacts',
+  templateUrl: './contacts.component.html',
+  styleUrl: './contacts.component.scss'
+})
+export class ContactsComponent {
+
+}

matsen-tool/src/app/core/api/v1/.openapi-generator/FILES

@@ -1,4 +1,5 @@
 .gitignore
+.openapi-generator-ignore
 README.md
 api.module.ts
 api/api.ts

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

@@ -41,20 +41,28 @@
                 <div class="card-body row">
                     <div class="col-8">
                         <h2>{{contact.firstName}} {{contact.lastName}}</h2>
-                        <p>{{contact.email}}<br/>
+                        <p><a href="mailto:{{contact.email}}">{{contact.email}}</a><br/>
                             {{contact.phone}}<br/>
                             {{contact.position}}</p>
                     </div>
                     <div class="col-4">
-                        <img src="./assets/images/specific/matsen_logo.svg" width="247" height="94"
-                             alt="{{'basic.company-name' | translate}}"/>
+                        <img src="{{environment.basePath}}{{contact.imageUrl}}" width="247" height="94"
+                             alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}" />
                     </div>
                 </div>
             </div>
             <div class="d-flex justify-content-end mb-4">
-                <a routerLink="#" class="badge bg-secondary">Details</a>
+                <span (click)="navigateToContactDetails(contact)" class="badge bg-secondary">Details</span>
             </div>
         </div>
+        <mat-paginator class="mb-4"
+                       [pageSizeOptions]="[6,12,18]"
+                       [length]="contactsLength"
+                       (page)="contactsHandlePageEvent($event)"
+                       [pageSize]="contactsPageSize"
+                       [pageIndex]="contactsPageIndex"
+                       showFirstLastButtons>
+        </mat-paginator>
     </div>
 </div>
 
@@ -109,6 +117,12 @@
             </div>
         </div>
     </div>
+    <mat-paginator class="mb-4" [length]="tasksLength"
+                   (page)="tasksHandlePageEvent($event)"
+                   [pageSize]="tasksPageSize"
+                   [pageIndex]="tasksPageIndex"
+                   showFirstLastButtons>
+    </mat-paginator>
 </div>
 
 <div class="posts">
@@ -200,4 +214,10 @@
             <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
         </div>
     </div>
+    <mat-paginator class="mb-4" [length]="postsLength"
+                   (page)="postsHandlePageEvent($event)"
+                   [pageSize]="postsPageSize"
+                   [pageIndex]="postsPageIndex"
+                   showFirstLastButtons>
+    </mat-paginator>
 </div>

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

@@ -1,38 +1,61 @@
-import {Component, OnInit} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} 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";
-import {ContactJsonld, ContactService, MediaObjectService, PartnerJsonld, PartnerService} from "@app/core/api/v1";
+import {ActivatedRoute, Router} from "@angular/router";
+import {ContactJsonld, ContactService, PartnerJsonld, PartnerService} from "@app/core/api/v1";
 import {Subscription} from "rxjs";
 import {environment} from "@environments/environment";
 import {ApiConverter} from "@app/_helpers/api.converter";
+import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
+import {MatTableDataSource} from "@angular/material/table";
 
 @Component({
     selector: 'app-partners-detail',
     templateUrl: './partners-detail.component.html',
     styleUrl: './partners-detail.component.scss'
 })
-export class PartnersDetailComponent implements OnInit {
-    private closeResult = '';
+export class PartnersDetailComponent implements OnInit, AfterViewInit {
+    @ViewChild(MatPaginator) contactsPaginator: MatPaginator;
+    @ViewChild(MatPaginator) tasksPaginator: MatPaginator;
+    @ViewChild(MatPaginator) postsPaginator: MatPaginator;
+
+    protected readonly environment = environment;
     protected id: string;
 
     protected partnerDetailSub: Subscription;
     protected partner: PartnerJsonld;
     protected partnerLogoSub: Subscription;
-    protected partnerLogo: string|null|undefined;
+    protected partnerLogo: string | null | undefined;
 
     protected partnerContactsSub: Subscription;
     protected contacts: Array<ContactJsonld>;
-    // protected contactImageSub: Subscription;
-    // protected contactImage: string|null|undefined;
+
+    protected contactsDataSource;
+    protected contactsLength: number;
+    protected contactsPageEvent: PageEvent;
+    protected contactsPageSize: number;
+    protected contactsPageIndex: number;
+
+    protected tasksDataSource;
+    protected tasksLength: number;
+    protected tasksPageEvent: PageEvent;
+    protected tasksPageSize: number;
+    protected tasksPageIndex: number;
+
+    protected postsDataSource;
+    protected postsLength: number;
+    protected postsPageEvent: PageEvent;
+    protected postsPageSize: number;
+    protected postsPageIndex: number;
 
     protected readonly ModalComponent = ModalComponent;
+
     constructor(
+        private router: Router,
         private modalService: NgbModal,
         private route: ActivatedRoute,
         private partnerService: PartnerService,
-        private mediaObjectService: MediaObjectService,
         private contactService: ContactService
     ) {
         this.id = "";
@@ -42,9 +65,31 @@ export class PartnersDetailComponent implements OnInit {
         this.partnerLogo = "";
         this.partnerContactsSub = new Subscription();
         this.contacts = [];
-        // this.contactImageSub = new Subscription();
-        // this.contactImage = "";
+
+        this.contactsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
+        this.contactsDataSource = new MatTableDataSource<ContactJsonld>(this.contacts);
+        this.contactsLength = 0;
+        this.contactsPageEvent = new PageEvent();
+        this.contactsPageSize = 6;
+        this.contactsPageIndex = 0;
+
+        // TODO: Change Jsonld
+        this.tasksPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
+        this.tasksDataSource = new MatTableDataSource<ContactJsonld>(this.contacts);
+        this.tasksLength = 0;
+        this.tasksPageEvent = new PageEvent();
+        this.tasksPageSize = 10;
+        this.tasksPageIndex = 0;
+
+        // TODO: Change Jsonld
+        this.postsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
+        this.postsDataSource = new MatTableDataSource<ContactJsonld>(this.contacts);
+        this.postsLength = 0;
+        this.postsPageEvent = new PageEvent();
+        this.postsPageSize = 30;
+        this.postsPageIndex = 0;
     }
+
     openModalNewContact() {
         const modalRef = this.modalService.open(ModalComponent);
         modalRef.componentInstance.dynamicComponent = NewContactComponent;
@@ -53,13 +98,17 @@ export class PartnersDetailComponent implements OnInit {
     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
         });
         this.getData();
     }
 
-    getData()
-    {
+    ngAfterViewInit() {
+        this.contactsDataSource.paginator = this.contactsPaginator;
+        this.tasksDataSource.paginator = this.tasksPaginator;
+        this.postsDataSource.paginator = this.postsPaginator;
+    }
+
+    getData() {
         this.partnerDetailSub = this.partnerService.partnersIdGet(
             this.id
         ).subscribe(
@@ -67,28 +116,46 @@ export class PartnersDetailComponent implements OnInit {
                 this.partner = data;
 
                 this.partnerContactsSub = this.contactService.contactsGetCollection(
-                   1, ApiConverter.extractId(this.partner.id)
+                    this.contactsPageIndex + 1,
+                    ApiConverter.extractId(this.partner.id)
                 ).subscribe(
                     data => {
-                        console.log(data);
                         this.contacts = data["hydra:member"];
-                        console.log(this.contacts);
-
-                        // let imageUrl: string = typeof data.logo === 'string' ? data.logo : "";
-                        // this.contactImageSub = this.mediaObjectService.mediaObjectsIdGet(
-                        //     // logoUrl
-                        //     "4"
-                        // ).subscribe(
-                        //     data => {
-                        //         this.contactImage = data.contentUrl;
-                        //         console.log(this.partnerLogo);
-                        //     }
-                        // );
+                        this.contactsLength = Number(data["hydra:totalItems"]);
+                        this.contactsPaginator.length = this.contactsLength;
                     }
                 )
             }
         );
     }
 
-    protected readonly environment = environment;
+    contactsHandlePageEvent(e: PageEvent) {
+        this.contactsPageEvent = e;
+        this.contactsLength = e.length;
+        this.contactsPageIndex = e.pageIndex.valueOf();
+        this.contactsPageSize = e.pageSize.valueOf();
+        this.getData();
+    }
+
+    tasksHandlePageEvent(e: PageEvent) {
+        this.tasksPageEvent = e;
+        this.tasksLength = e.length;
+        this.tasksPageIndex = e.pageIndex.valueOf();
+        this.tasksPageSize = e.pageSize.valueOf();
+        // this.getData();
+    }
+
+    postsHandlePageEvent(e: PageEvent) {
+        this.postsPageEvent = e;
+        this.postsLength = e.length;
+        this.postsPageIndex = e.pageIndex.valueOf();
+        this.postsPageSize = e.pageSize.valueOf();
+        // this.getData();
+    }
+
+    navigateToContactDetails(element: any) {
+        const contact: ContactJsonld = element as ContactJsonld;
+        console.log(ApiConverter.extractId(contact.id));
+        this.router.navigate(['/contacts', ApiConverter.extractId(contact.id)]);
+    }
 }

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

@@ -6,7 +6,7 @@
             Nr.
         </th>
         <td mat-cell
-            *matCellDef="let element">{{ (currentPageSize * currentPageIndex) + dataSource.filteredData.indexOf(element) + 1 }}
+            *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}
         </td>
     </ng-container>
 
@@ -14,7 +14,7 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Partner sortieren">
             Partner
         </th>
-        <td mat-cell *matCellDef="let element"><span (click)="navigateToDetails(element)">{{ element.name }}</span></td>
+        <td mat-cell *matCellDef="let element"><span (click)="navigateToPartnerDetails(element)">{{ element.name }}</span></td>
     </ng-container>
 
     <ng-container matColumnDef="address">
@@ -39,11 +39,11 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
 
-<mat-paginator [pageSizeOptions]="[10]"
+<mat-paginator class="mb-4"
+               [pageSizeOptions]="[10,25,50]"
                [length]="length"
                (page)="handlePageEvent($event)"
-               [pageSize]="currentPageSize"
-               [pageIndex]="currentPageIndex"
-               showFirstLastButtons
-               aria-label="Select page of periodic elements">
+               [pageSize]="pageSize"
+               [pageIndex]="pageIndex"
+               showFirstLastButtons>
 </mat-paginator>

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

@@ -21,10 +21,6 @@ export class PartnersComponent implements OnInit, AfterViewInit {
 
     protected partnersSub: Subscription;
     protected partners: Array<PartnerJsonld>;
-    protected length: number;
-    protected pageEvent: PageEvent;
-    protected currentPageSize: number;
-    protected currentPageIndex: number;
 
     protected nameOrderAsc: OrderFilter;
     protected cityOrderAsc: OrderFilter;
@@ -32,7 +28,12 @@ export class PartnersComponent implements OnInit, AfterViewInit {
 
     protected dataType!: string;
     protected displayedColumns: string[];
+
     protected dataSource;
+    protected length: number;
+    protected pageEvent: PageEvent;
+    protected pageSize: number;
+    protected pageIndex: number;
 
     constructor(
         private route: ActivatedRoute,
@@ -51,10 +52,10 @@ export class PartnersComponent implements OnInit, AfterViewInit {
         this.websiteOrderAsc = OrderFilter.Asc;
 
         this.dataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
-        this.pageEvent = new PageEvent();
         this.length = 0;
-        this.currentPageSize = 10;
-        this.currentPageIndex = 0;
+        this.pageEvent = new PageEvent();
+        this.pageSize = 10;
+        this.pageIndex = 0;
     }
 
     ngOnInit() {
@@ -70,7 +71,7 @@ export class PartnersComponent implements OnInit, AfterViewInit {
     /** Announce the change in sort state for assistive technology. */
     onSortChange(sortState: Sort) {
         // Reset page index to first page
-        this.currentPageIndex = 0;
+        this.pageIndex = 0;
 
         let order: OrderFilter;
         if (sortState.direction === "") {
@@ -96,14 +97,13 @@ export class PartnersComponent implements OnInit, AfterViewInit {
         this.getData();
     }
 
-    getData()
-    {
+    getData() {
         // switch over this.dataType (customers, etc.)
         this.partnersSub = this.partnerService.partnersGetCollection(
-            this.currentPageIndex + 1,
+            this.pageIndex + 1,
             this.dataType,
             undefined,
-                this.nameOrderAsc,
+            this.nameOrderAsc,
             this.cityOrderAsc,
             this.websiteOrderAsc
         ).subscribe(
@@ -120,18 +120,14 @@ export class PartnersComponent implements OnInit, AfterViewInit {
     handlePageEvent(e: PageEvent) {
         this.pageEvent = e;
         this.length = e.length;
-        this.currentPageIndex = e.pageIndex.valueOf();
-        this.currentPageSize = e.pageSize.valueOf();
+        this.pageIndex = e.pageIndex.valueOf();
+        this.pageSize = e.pageSize.valueOf();
         this.getData();
     }
 
-    navigateToDetails(element: any) {
+    navigateToPartnerDetails(element: any) {
         const partner: PartnerJsonld = element as PartnerJsonld;
-        // this.partnerService.setPartnerData(partner);
-        //console.log(partner['@id']);
         console.log(ApiConverter.extractId(partner.id));
         this.router.navigate(['/customers', ApiConverter.extractId(partner.id)]);
     }
-
-    protected readonly PartnerJsonld = PartnerJsonld;
 }