refactored partner component

matsen-tool/src/app/_components/paging/paging.component.ts

@@ -4,6 +4,7 @@ import {NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {Observable, throwError} from "rxjs";
 import {MatTableDataSource} from "@angular/material/table";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
+import {Sort} from "@angular/material/sort";
 
 @Component({
   selector: 'app-paging',
@@ -40,13 +41,9 @@ export class PagingComponent implements OnInit {
     }
 
     ngAfterViewInit() {
-
-        //this.dataSource = this.paginator;
-console.log('paging after init');
-        //this.getDataFunction();
     }
 
-    initData() {
+    getData() {
         this.getDataFunction();
     }
 
@@ -58,6 +55,11 @@ console.log('paging after init');
         this.getDataFunction();
     }
 
+    resetPageIndex(): void
+    {
+        this.pageIndex = 0;
+    }
+
     getPageIndex(): number {
         return this.pageIndex + 1;
     }

matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.ts

@@ -35,7 +35,7 @@ export class ContactListComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit(): void {
-        this.pagingComponent.initData();
+        this.pagingComponent.getData();
     }
 
     getData = () => {

matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html

@@ -1 +1,65 @@
-<p>partner-list works!</p>
+<div class="spt-container">
+    <button class="btn btn-primary"
+            (click)="openModalNewPartner()">{{ 'basic.new' | translate }} {{ partnerColumnHeadline }}
+    </button>
+    <app-paging #pagingComponent
+                [getDataFunction]="getData"
+                [dataSource]="dataSource"
+    >
+        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8 mb-3">
+
+            <ng-container matColumnDef="pos">
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ 'overview.number' | translate }}
+                </th>
+                <td mat-cell
+                    *matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="image">
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ 'overview.logo' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    <img role="button" src="{{ element.logoUrl }}" (click)="navigateToPartnerDetails(element)" width="40"
+                         height="40"/>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="name">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ partnerColumnHeadline }}">
+                    {{ partnerColumnHeadline }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    <span role="button" (click)="navigateToPartnerDetails(element)">{{ element.name }}</span>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="address">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header="address"
+                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.address' | translate }}">
+                    {{ 'overview.address' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}
+                    <br/>{{ element.zip }} {{ element.city }}
+                    <br/>{{ element.country }}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="website">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.website' | translate }}">
+                    {{ 'overview.website' | translate }}
+                </th>
+                <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>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+    </app-paging>
+</div>

matsen-tool/src/app/_views/partners/partner-list/partner-list.component.ts

@@ -1,6 +1,17 @@
-import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {PagingComponent} from "@app/_components/paging/paging.component";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
+import {MatSort, Sort} from "@angular/material/sort";
+import {Subscription} from "rxjs";
+import {PartnerJsonld, PartnerService} from "@app/core/api/v1";
+import {OrderFilter} from "@app/_models/orderFilter";
+import {ActivatedRoute, Router} from "@angular/router";
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {TranslateService} from "@ngx-translate/core";
+import {MatTableDataSource} from "@angular/material/table";
+import {NewPartnerComponent} from "@app/_views/partners/new-partner/new-partner.component";
+import {NewTaskComponent} from "@app/_views/tasks/new-task/new-task.component";
+import TypeEnum = PartnerJsonld.PartnerTypeEnum;
 
 @Component({
   selector: 'app-partner-list',
@@ -9,18 +20,108 @@ import {AppHelperService} from "@app/_helpers/app-helper.service";
 })
 export class PartnerListComponent implements OnInit, AfterViewInit {
 
+    @Input("partnerType") partnerType!: string;
+    @ViewChild(MatSort) partnersSort;
     @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
 
+    protected partnersSub: Subscription;
+    protected partners: Array<PartnerJsonld>;
+    protected dataSource;
+
+    protected nameOrderAsc: OrderFilter;
+    protected cityOrderAsc: OrderFilter;
+    protected websiteOrderAsc: OrderFilter;
+
+    protected partnerColumnHeadline: string;
+    protected displayedColumns!: string[];
 
     constructor(
+        private route: ActivatedRoute,
+        private partnerService: PartnerService,
+        private router: Router,
+        private translateService: TranslateService,
         protected appHelperService: AppHelperService,
     ) {
+        this.displayedColumns = ['pos', 'image', 'name', 'address', 'website'];
+        this.partnersSort = new MatSort();
+        this.partnersSub = new Subscription();
+        this.partners = [];
+
+        this.nameOrderAsc = OrderFilter.Asc;
+        this.cityOrderAsc = OrderFilter.Asc;
+        this.websiteOrderAsc = OrderFilter.Asc;
+
+        this.dataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
+        this.partnerColumnHeadline = "";
+    }
+
+    ngOnInit() {
+        this.translateService.get('basic.' + this.partnerType + 'One').subscribe((translation: string) => {
+            this.partnerColumnHeadline = translation;
+        });
+    }
+
+    ngAfterViewInit() {
+        this.dataSource.sort = this.partnersSort;
+        this.dataSource.paginator = this.pagingComponent.paginator;
+        this.pagingComponent.getData();
+    }
+
+    getData = () => {
+        this.partnersSub = this.partnerService.partnersGetCollection(
+            this.pagingComponent.getPageIndex(),
+            this.pagingComponent.getPageSize(),
+            this.partnerType,
+            undefined,
+            undefined,
+            this.nameOrderAsc,
+            this.cityOrderAsc,
+            this.websiteOrderAsc
+        ).subscribe(
+            data => {
+                this.partners = data["hydra:member"];
+                this.dataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
+                this.pagingComponent.dataLength = Number(data["hydra:totalItems"]);
+            }
+        );
+        // switch over this.dataType (customers, etc.)
+    }
+
+    onSortChange = (sortState: Sort) => {
+        this.pagingComponent.resetPageIndex()
+
+        let order: OrderFilter;
+        if (sortState.direction === "") {
+            order = OrderFilter.Undefined;
+        } else {
+            order = sortState.direction;
+        }
+
+        this.nameOrderAsc = OrderFilter.Undefined;
+        this.cityOrderAsc = OrderFilter.Undefined;
+        this.websiteOrderAsc = OrderFilter.Undefined;
+        switch (sortState.active) {
+            case "name":
+                this.nameOrderAsc = order;
+                break;
+            case "address":
+                this.cityOrderAsc = order;
+                break;
+            case "website":
+                this.websiteOrderAsc = order;
+                break;
+        }
+        this.pagingComponent.getData();
     }
 
-    ngOnInit(): void {
+    navigateToPartnerDetails(element: any) {
+        const partner: PartnerJsonld = element as PartnerJsonld;
+        this.router.navigate(['/' + partner.partnerType, this.appHelperService.extractId(partner.id)]);
     }
 
-    ngAfterViewInit(): void {
-        this.pagingComponent.initData();
+    openModalNewPartner() {
+        let partner: PartnerJsonld = {} as PartnerJsonld;
+        partner.partnerType = this.partnerType as TypeEnum;
+        this.appHelperService.openModal(NewPartnerComponent, { 'partner': partner }, this.getData);
     }
 }

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

@@ -1,72 +1,8 @@
 <div class="spt-container">
     <div class="d-flex justify-content-between align-items-start">
         <h2>{{ headline }}</h2>
-        <button class="btn btn-primary"
-                (click)="openModalNewPartner()">{{ 'basic.new' | translate }} {{ partnerNameOne }}
-        </button>
     </div>
-    <table mat-table [dataSource]="partnersDataSource" matSort (matSortChange)="onSortChange($event)"
-           class="mat-elevation-z8 mb-3">
-
-        <ng-container matColumnDef="pos">
-            <th mat-header-cell *matHeaderCellDef>
-                {{ 'overview.number' | translate }}
-            </th>
-            <td mat-cell
-                *matCellDef="let element">{{ (partnersPageSize * partnersPageIndex) + partnersDataSource.filteredData.indexOf(element) + 1 }}
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="image">
-            <th mat-header-cell *matHeaderCellDef>
-                {{ 'overview.logo' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">
-                <img role="button" src="{{ element.logoUrl }}" (click)="navigateToPartnerDetails(element)" width="40"
-                     height="40"/>
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header
-                sortActionDescription="{{ 'overview.sort' | translate }}: {{ partnerNameOne }}">
-                {{ partnerNameOne }}
-            </th>
-            <td mat-cell *matCellDef="let element"><span role="button"
-                                                         (click)="navigateToPartnerDetails(element)">{{ element.name }}</span>
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="address">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header="address"
-                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.address' | translate }}">
-                {{ 'overview.address' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}
-                <br/>{{ element.zip }} {{ element.city }}
-                <br/>{{ element.country }}
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="website">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header
-                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.website' | translate }}">
-                {{ 'overview.website' | translate }}
-            </th>
-            <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>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-    <mat-paginator class="rounded-1"
-                   [pageSizeOptions]="[10,25,50]"
-                   [length]="partnersLength"
-                   (page)="handlePageEvent($event)"
-                   [pageSize]="partnersPageSize"
-                   [pageIndex]="partnersPageIndex"
-                   showFirstLastButtons>
-    </mat-paginator>
+    <app-partner-list #partnerList
+        [partnerType]="partnerType"
+    ></app-partner-list>
 </div>

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

@@ -1,169 +1,37 @@
-import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
-import {MatSort, Sort, MatSortModule} from "@angular/material/sort";
-import {MatTableDataSource, MatTableModule} from "@angular/material/table";
-import {ActivatedRoute, Router, RouterLink, RouterLinkActive} from "@angular/router";
-import {Subscription} from "rxjs";
-import {PartnerJsonld, PartnerService} from "@app/core/api/v1";
-import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator";
-import {OrderFilter} from "@app/_models/orderFilter";
-import {AppHelperService} from "@app/_helpers/app-helper.service";
-import {NgIf} from "@angular/common";
-import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
-import {NewPartnerComponent} from "@app/_views/partners/new-partner/new-partner.component";
-import {TranslateModule, TranslateService} from "@ngx-translate/core";
-import {ModalStatus} from "@app/_helpers/modal.states";
-import TypeEnum = PartnerJsonld.PartnerTypeEnum;
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {ActivatedRoute} from "@angular/router";
+import {TranslateService} from "@ngx-translate/core";
+import {PartnerListComponent} from "@app/_views/partners/partner-list/partner-list.component";
 
 @Component({
-    selector: 'app-partners',
+    selector: 'app-partner',
     templateUrl: './partners.component.html',
     styleUrl: './partners.component.scss',
 })
 export class PartnersComponent implements OnInit, AfterViewInit {
-    @ViewChild(MatSort) partnersSort;
-    @ViewChild(MatPaginator) partnersPaginator: MatPaginator;
 
-    protected partnersSub: Subscription;
-    protected partners: Array<PartnerJsonld>;
+    @ViewChild("partnerList", { static: false }) partnerList!: PartnerListComponent;
 
-    protected nameOrderAsc: OrderFilter;
-    protected cityOrderAsc: OrderFilter;
-    protected websiteOrderAsc: OrderFilter;
-
-    protected dataType!: string;
+    protected partnerType!: string;
     protected headline: string;
-    protected partnerNameOne: string;
-    protected displayedColumns: string[];
-
-    protected partnersDataSource;
-    protected partnersLength: number;
-    protected partnersPageEvent: PageEvent;
-    protected partnersPageSize: number;
-    protected partnersPageIndex: number;
-
-    protected modalOptions: NgbModalOptions = {
-        centered: true
-    };
+    protected partnerColumnHeadline: string;
 
     constructor(
         private route: ActivatedRoute,
-        private partnerService: PartnerService,
-        private router: Router,
-        private modalService: NgbModal,
         private translateService: TranslateService,
-        protected appHelperService: AppHelperService,
     ) {
-        this.partnersSort = new MatSort();
-        this.partnersPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
-
-        this.partnersSub = new Subscription();
-        this.partners = [];
-        this.displayedColumns = ['pos', 'image', 'name', 'address', 'website'];
-
-        this.nameOrderAsc = OrderFilter.Asc;
-        this.cityOrderAsc = OrderFilter.Asc;
-        this.websiteOrderAsc = OrderFilter.Asc;
-
-        this.partnersDataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
-        this.partnersLength = 0;
-        this.partnersPageEvent = new PageEvent();
-        this.partnersPageSize = 10;
-        this.partnersPageIndex = 0;
-
+        this.partnerType = this.route.snapshot.data['dataType'];
         this.headline = "";
-        this.partnerNameOne = "";
+        this.partnerColumnHeadline = "";
     }
 
     ngOnInit() {
-        this.dataType = this.route.snapshot.data['dataType'];
-        // this.translateService.use(this.translateService.getDefaultLang());
-        this.translateService.get('basic.' + this.dataType).subscribe((translation: string) => {
+        this.translateService.get('basic.' + this.partnerType).subscribe((translation: string) => {
             this.headline = translation;
         });
-        this.translateService.get('basic.' + this.dataType + 'One').subscribe((translation: string) => {
-            this.partnerNameOne = translation;
-        });
-        this.getPartnersData();
     }
 
     ngAfterViewInit() {
-        this.partnersDataSource.sort = this.partnersSort;
-        this.partnersDataSource.paginator = this.partnersPaginator;
-    }
-
-    getPartnersData() {
-        this.partnersSub = this.partnerService.partnersGetCollection(
-            this.partnersPageIndex + 1,
-            this.partnersPageSize,
-            this.dataType,
-            undefined,
-            undefined,
-            this.nameOrderAsc,
-            this.cityOrderAsc,
-            this.websiteOrderAsc
-        ).subscribe(
-            data => {
-                this.partners = data["hydra:member"];
-                this.partnersDataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
-                this.partnersLength = Number(data["hydra:totalItems"]);
-                this.partnersPaginator.length = this.partnersLength;
-            }
-        );
-        // switch over this.dataType (customers, etc.)
     }
 
-    /** Announce the change in sort state for assistive technology. */
-    onSortChange(sortState: Sort) {
-        // Reset page index to first page
-        this.partnersPageIndex = 0;
-
-        let order: OrderFilter;
-        if (sortState.direction === "") {
-            order = OrderFilter.Undefined;
-        } else {
-            order = sortState.direction;
-        }
-
-        this.nameOrderAsc = OrderFilter.Undefined;
-        this.cityOrderAsc = OrderFilter.Undefined;
-        this.websiteOrderAsc = OrderFilter.Undefined;
-        switch (sortState.active) {
-            case "name":
-                this.nameOrderAsc = order;
-                break;
-            case "address":
-                this.cityOrderAsc = order;
-                break;
-            case "website":
-                this.websiteOrderAsc = order;
-                break;
-        }
-        this.getPartnersData();
-    }
-
-    handlePageEvent(e: PageEvent) {
-        this.partnersPageEvent = e;
-        this.partnersLength = e.length;
-        this.partnersPageIndex = e.pageIndex.valueOf();
-        this.partnersPageSize = e.pageSize.valueOf();
-        this.getPartnersData();
-    }
-
-    navigateToPartnerDetails(element: any) {
-        const partner: PartnerJsonld = element as PartnerJsonld;
-        this.router.navigate(['/' + partner.partnerType, this.appHelperService.extractId(partner.id)]);
-    }
-
-    openModalNewPartner() {
-        const modalRefContact = this.modalService.open(NewPartnerComponent, this.appHelperService.getModalOptions());
-        let partner: PartnerJsonld = {} as PartnerJsonld;
-        partner.partnerType = this.dataType as TypeEnum;
-        modalRefContact.componentInstance.partner = partner;
-        modalRefContact.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefContact.dismiss();
-                this.getPartnersData();
-            }
-        });
-    }
 }

matsen-tool/src/app/_views/posts/post-list/post-list.component.ts

@@ -59,7 +59,7 @@ export class PostListComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit() {
-        this.pagingComponent.initData();
+        this.pagingComponent.getData();
     }
 
     getData = () => {

matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.ts

@@ -72,7 +72,7 @@ export class SalesDetailComponent implements OnInit, AfterViewInit {
         ).subscribe(
             data => {
               this.sale = data;
-              this.pagingComponent.initData();
+              this.pagingComponent.getData();
             }
         );
     }

matsen-tool/src/app/_views/tasks/task-list/task-list.component.ts

@@ -43,7 +43,7 @@ export class TaskListComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit(): void {
-        this.pagingComponent.initData();
+        this.pagingComponent.getData();
     }
 
     getData = () => {