refactoring list and modal component

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

@@ -1,36 +0,0 @@
-import {PageEvent} from "@angular/material/paginator";
-import {throwError} from "rxjs";
-import {NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
-
-export class ListComponent{
-
-    protected dataLength: number;
-    protected pageEvent: PageEvent;
-    protected pageSize: number;
-    protected pageIndex: number;
-    protected pageSizeOptions: number[];
-    protected modalOptions: NgbModalOptions = {
-        centered: true
-    };
-
-
-    constructor() {
-        this.dataLength = 0;
-        this.pageEvent = new PageEvent();
-        this.pageSize = 10;
-        this.pageIndex = 0;
-        this.pageSizeOptions = [10,20.30];
-    }
-
-    getData() {
-        throwError(() => new Error('implement in child class'));
-    }
-
-    handlePageEvent(e: PageEvent) {
-        this.pageEvent = e;
-        this.dataLength = e.length;
-        this.pageIndex = e.pageIndex.valueOf();
-        this.pageSize = e.pageSize.valueOf();
-        this.getData();
-    }
-}

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

@@ -0,0 +1,9 @@
+<ng-content></ng-content>
+<mat-paginator *ngIf="dataLength > 0" class="rounded-1"
+               [pageSizeOptions]="pageSizeOptions"
+               [length]="dataLength"
+               (page)="handlePageEvent($event)"
+               [pageSize]="pageSize"
+               [pageIndex]="pageIndex"
+               showFirstLastButtons>
+</mat-paginator>

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

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

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

@@ -0,0 +1,63 @@
+import {AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
+import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
+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";
+
+@Component({
+  selector: 'app-paging',
+  templateUrl: './paging.component.html',
+  styleUrl: './paging.component.scss'
+})
+export class PagingComponent implements OnInit {
+
+    @Input() public dataSource!: any;
+    @Input() public getDataFunction!: Function;
+    @Input() public pageSize!: number;
+    @Input() public pageSizeOptions!: number[];
+
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+
+    private defaultPageSize: number = 10;
+    private defaultPageSizeOptions: number[] = [10,20,50];
+
+    public dataLength: number;
+    public pageEvent: PageEvent;
+    protected pageIndex: number;
+
+    constructor(
+    ) {
+        this.dataLength = 0;
+        this.pageEvent = new PageEvent();
+        this.pageIndex = 0;
+    }
+
+    ngOnInit() {
+        this.pageSize = this.pageSize !== undefined ? this.pageSize : this.defaultPageSize;
+        this.pageSizeOptions = this.pageSizeOptions !== undefined ? this.pageSizeOptions : this.defaultPageSizeOptions;
+        this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
+    }
+
+    ngAfterViewInit() {
+
+        this.dataSource = this.paginator;
+        this.getDataFunction();
+    }
+
+    handlePageEvent(e: PageEvent) {
+        this.pageEvent = e;
+        this.dataLength = e.length;
+        this.pageIndex = e.pageIndex.valueOf();
+        this.pageSize = e.pageSize.valueOf();
+        this.getDataFunction();
+    }
+
+    getPageIndex(): number {
+        return this.pageIndex + 1;
+    }
+
+    getPageSize(): number {
+        return this.pageSize;
+    }
+}

matsen-tool/src/app/_components/search-input/search-input.component.html

@@ -1,4 +1,11 @@
-<label for="{{dataField}}" class="form-label">{{ formLabelLangKey | translate }}:</label>
-<input type="text" class="form-control" id="{{dataField}}" [ngbTypeahead]="searchItem"
-       [inputFormatter]="formatter" [value]="documentForm.get(documentFormField)?.value"
-       [resultFormatter]="formatter" [editable]="false" (selectItem)="onItemSelect($event)"/>
+<label for="{{ dataField }}" class="form-label">
+    {{ formLabelLangKey | translate }}:
+</label>
+<input type="text" class="form-control" id="{{dataField}}"
+       [ngbTypeahead]="searchItem"
+       [inputFormatter]="formatter"
+       [value]="documentForm.get(documentFormField)?.value"
+       [resultFormatter]="formatter"
+       [editable]="false"
+       (selectItem)="onItemSelect($event)"
+/>

matsen-tool/src/app/_helpers/api-helper.service.ts

@@ -1,36 +0,0 @@
-import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
-import {Injectable} from "@angular/core";
-
-@Injectable({ providedIn: 'root' })
-export class ApiHelperService {
-
-    constructor(private sanitizer: DomSanitizer) {}
-
-    public extractId(iri: string | undefined | null): string {
-        if (iri !== undefined && iri !== null) {
-            const iriRegex = /\/(\d+)$/;
-            const match = iri.match(iriRegex);
-            if (match && match[1]) {
-                return match[1];
-            }
-        }
-        return "";
-    }
-
-    public convertDate(dateString: string | null, withTime = false) {
-        // number 10 for input date (2024-03-15)
-        // number 16 for input datetime-local (2024-04-28T03:22)
-        if (dateString !== null) {
-            const date = new Date(dateString);
-            return date.toISOString().slice(0, withTime ? 16 : 10);
-        }
-        return "";
-    }
-
-    public getSafeLongtext(longtext: any): SafeHtml {
-        if (longtext) {
-            return this.sanitizer.bypassSecurityTrustHtml(longtext.replace(/\n/g, '<br>'));
-        }
-        return false;
-    }
-}

matsen-tool/src/app/_helpers/app-helper.service.ts

@@ -0,0 +1,68 @@
+import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
+import {Injectable} from "@angular/core";
+import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
+import {ModalStatus} from "@app/_helpers/modal.states";
+
+@Injectable({ providedIn: 'root' })
+export class AppHelperService {
+
+    constructor(
+        private sanitizer: DomSanitizer,
+        private modalService: NgbModal,
+    ) {}
+
+    public extractId(iri: string | undefined | null): string {
+        if (iri !== undefined && iri !== null) {
+            const iriRegex = /\/(\d+)$/;
+            const match = iri.match(iriRegex);
+            if (match && match[1]) {
+                return match[1];
+            }
+        }
+        return "";
+    }
+
+    public convertDate(dateString: string | null, withTime = false) {
+        // number 10 for input date (2024-03-15)
+        // number 16 for input datetime-local (2024-04-28T03:22)
+        if (dateString !== null) {
+            const date = new Date(dateString);
+            return date.toISOString().slice(0, withTime ? 16 : 10);
+        }
+        return "";
+    }
+
+    public getSafeLongtext(longtext: any): SafeHtml {
+        if (longtext) {
+            return this.sanitizer.bypassSecurityTrustHtml(longtext.replace(/\n/g, '<br>'));
+        }
+        return false;
+    }
+
+    public getModalOptions(): NgbModalOptions {
+        return { centered: true } as NgbModalOptions;
+    }
+
+    public openModal(component: any, data: any, callback?: () => void): Promise<ModalStatus> {
+        const modalRef = this.modalService.open(component);
+        for (const key in data) {
+            modalRef.componentInstance[key] = data[key];
+        }
+
+        return modalRef.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRef.dismiss();
+                if (callback) {
+                    callback();
+                }
+            }
+        });
+    }
+
+    public assertType<T>(value: any, type: string): asserts value is T {
+        if (typeof value !== type) {
+            throw new Error(`Expected ${type} but received ${typeof value}`);
+        }
+    }
+
+}

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

@@ -1,38 +1,36 @@
 <div class="spt-container">
     <div class="contacts position-relative">
-        <button class="btn btn-primary toggle-btn" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}
-        </button>
-        <div class="row">
-            <div class="col-4" *ngFor="let contact of contacts">
-                <div class="card">
-                    <div class="card-body row">
-                        <div class="col-8">
-                            <h2>{{ contact.firstName }} {{ contact.lastName }}</h2>
-                            <p><a href="mailto:{{contact.email}}">{{ contact.email }}</a><br/>
-                                {{ contact.phone }}<br/>
-                                {{ contact.position }}</p>
-                        </div>
-                        <div class="col-4">
-                            <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"
-                                 ngSrc="{{contact.imageUrl}}" width="247" height="94"
-                                 alt="{{contact.firstName}} {{contact.lastName}}"
-                                 title="{{contact.firstName}} {{contact.lastName}}"/>
+        <button class="btn btn-primary toggle-btn" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}</button>
+        <app-paging #pagingComponent
+                    [getDataFunction]="getData"
+                    [dataSource]="dataSource"
+                    [pageSize]="6"
+                    [pageSizeOptions]="[6,12,18]"
+        >
+            <div class="row">
+                <div class="col-4" *ngFor="let contact of contacts">
+                    <div class="card">
+                        <div class="card-body row">
+                            <div class="col-8">
+                                <h2>{{ contact.firstName }} {{ contact.lastName }}</h2>
+                                <p><a href="mailto:{{contact.email}}">{{ contact.email }}</a><br/>
+                                    {{ contact.phone }}<br/>
+                                    {{ contact.position }}</p>
+                            </div>
+                            <div class="col-4">
+                                <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"
+                                     ngSrc="{{contact.imageUrl}}" width="247" height="94"
+                                     alt="{{contact.firstName}} {{contact.lastName}}"
+                                     title="{{contact.firstName}} {{contact.lastName}}"/>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="d-flex justify-content-end mt-1 mb-4">
-                        <span role="button" (click)="navigateToContactDetails(contact)"
-                              class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
+                    <div class="d-flex justify-content-end mt-1 mb-4">
+                            <span role="button" (click)="navigateToContactDetails(contact)"
+                                  class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
+                    </div>
                 </div>
             </div>
-        </div>
-        <mat-paginator *ngIf="dataLength > 0" class="rounded-1"
-                       [pageSizeOptions]="this.pageSizeOptions"
-                       [length]="dataLength"
-                       (page)="handlePageEvent($event)"
-                       [pageSize]="pageSize"
-                       [pageIndex]="pageIndex"
-                       showFirstLastButtons>
-        </mat-paginator>
+        </app-paging>
     </div>
 </div>

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

@@ -1,78 +1,57 @@
-import {ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, Input, ViewChild} from '@angular/core';
 import {Subscription} from "rxjs";
 import {ContactJsonld, ContactService, PartnerJsonld} from "@app/core/api/v1";
-import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
 import {MatTableDataSource} from "@angular/material/table";
 import {NewContactComponent} from "@app/_views/contacts/new-contact/new-contact.component";
-import {ModalStatus} from "@app/_helpers/modal.states";
-import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {Router} from "@angular/router";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
-import {ListComponent} from "@app/_components/list/list.component";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
+import {PagingComponent} from "@app/_components/paging/paging.component";
 
 @Component({
   selector: 'app-contact-list',
   templateUrl: './contact-list.component.html',
   styleUrl: './contact-list.component.scss'
 })
-export class ContactListComponent extends ListComponent implements OnInit {
+export class ContactListComponent {
 
     @Input() public partner!: PartnerJsonld;
-
-    @ViewChild(MatPaginator) contactsPaginator: MatPaginator;
+    @ViewChild("pagingComponent", { static: false }) pagingComponent: PagingComponent = new PagingComponent();
 
     protected contactsSub: Subscription;
     protected contacts: Array<ContactJsonld>;
-    protected contactsDataSource;
+    protected dataSource;
 
     constructor(
         private router: Router,
-        private modalService: NgbModal,
         private contactService: ContactService,
-        protected apiHelperService: ApiHelperService
+        protected appHelperService: AppHelperService
     ) {
-        super();
         this.contactsSub = new Subscription();
         this.contacts = [];
-        this.contactsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
-        this.contactsDataSource = new MatTableDataSource<ContactJsonld>(this.contacts);
-    }
-
-    ngOnInit() {
-        this.getData();
+        this.dataSource = new MatTableDataSource<ContactJsonld>(this.contacts);
     }
 
-    override getData() {
+    getData = () => {
         this.contactsSub = this.contactService.contactsGetCollection(
-            this.pageIndex + 1,
-            this.pageSize,
+            this.pagingComponent.getPageIndex(),
+            this.pagingComponent.getPageSize(),
             this.partner.id
         ).subscribe(
             data => {
                 this.contacts = data["hydra:member"];
-                this.dataLength = Number(data["hydra:totalItems"]);
-                if (this.contactsPaginator !== undefined) {
-                    this.contactsPaginator.length = this.dataLength;
-                }
+                this.pagingComponent.dataLength = Number(data["hydra:totalItems"]);
             }
         );
     }
 
     openModalNewContact() {
-        const modalRefContact = this.modalService.open(NewContactComponent, this.modalOptions);
         let contact: ContactJsonld = {} as ContactJsonld;
         contact.partner = this.partner.id ?? null;
-        modalRefContact.componentInstance.contact = contact;
-        modalRefContact.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefContact.dismiss();
-                this.getData();
-            }
-        });
+        this.appHelperService.openModal(NewContactComponent, { 'contact': contact }, this.getData);
     }
 
     navigateToContactDetails(element: any) {
         const contact: ContactJsonld = element as ContactJsonld;
-        this.router.navigate(['/contacts', this.apiHelperService.extractId(contact.id)]);
+        this.router.navigate(['/contacts', this.appHelperService.extractId(contact.id)]);
     }
 }

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

@@ -19,7 +19,7 @@ import {ModalStatus} from "@app/_helpers/modal.states";
 import {User} from "@app/_models";
 import {AccountService} from "@app/_services";
 import {NewCommentComponent} from "@app/_views/posts/new-comment/new-comment.component";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {constructorParametersDownlevelTransform} from "@angular/compiler-cli";
 import {PostListComponent} from "@app/_views/posts/post-list/post-list.component";
 import {ToggleComponent} from "@app/_components/toggle/toggle.component";
@@ -50,8 +50,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
         private partnerService: PartnerService,
         private accountService: AccountService,
         private route: ActivatedRoute,
-        private modalService: NgbModal,
-        protected apiHelperService: ApiHelperService
+        protected appHelperService: AppHelperService
     ) {
         this.user = this.accountService.userValue;
         this.contactSub = new Subscription();
@@ -70,7 +69,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     ngAfterViewInit() {
     }
 
-    getContactData() {
+    getContactData = () => {
         // switch over this.dataType (customers, etc.)
         this.contactSub = this.contactService.contactsIdGet(
             this.contactId
@@ -84,7 +83,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
 
     getPartnerData() {
         this.partnerSub = this.partnerService.partnersIdGet(
-            this.apiHelperService.extractId(this.contact.partner)
+            this.appHelperService.extractId(this.contact.partner)
         ).subscribe(
             data => {
                 this.partner = data;
@@ -93,16 +92,10 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditContact() {
-        const modalRefContact = this.modalService.open(NewContactComponent, this.modalOptions);
-        modalRefContact.componentInstance.contact = this.contact;
+        let data: any = { 'contact': this.contact }
         if (this.contact.birthday !== undefined) {
-            modalRefContact.componentInstance.birthdayValue = this.apiHelperService.convertDate(this.contact.birthday);
+            data.birthdayValue = this.appHelperService.convertDate(this.contact.birthday);
         }
-        modalRefContact.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefContact.dismiss();
-                this.getContactData();
-            }
-        });
+        this.appHelperService.openModal(NewContactComponent, data, this.getContactData);
     }
 }

matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.html

@@ -1,5 +1,5 @@
-<h2 *ngIf="!contact.id">{{'basic.new-contact' | translate}}</h2>
-<h2 *ngIf="contact.id">{{'basic.edit-contact' | translate}}</h2>
+<h2 *ngIf="!contact?.id">{{'basic.new-contact' | translate}}</h2>
+<h2 *ngIf="contact?.id">{{'basic.edit-contact' | translate}}</h2>
 <div class="spt-form">
     <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
         <div class="mb-3">

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

@@ -1,12 +1,12 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {FormGroup} from "@angular/forms";
 import {contactForm} from "@app/_forms/apiForms";
 import {ContactJsonld, ContactService, MediaObjectService} from "@app/core/api/v1";
-import {Subscription} from "rxjs";
+import {Subscription, window} from "rxjs";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {TranslateService} from "@ngx-translate/core";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 
 @Component({
@@ -14,7 +14,7 @@ import {ApiHelperService} from "@app/_helpers/api-helper.service";
     templateUrl: './new-contact.component.html',
     styleUrl: './new-contact.component.scss'
 })
-export class NewContactComponent implements OnInit {
+export class NewContactComponent implements OnInit, AfterViewInit {
     @Input() public contact!: ContactJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
 
@@ -29,7 +29,7 @@ export class NewContactComponent implements OnInit {
         private contactService: ContactService,
         private mediaObjectService: MediaObjectService,
         private translateService: TranslateService,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
         this.contactForm = contactForm;
         this.selectedImage = null;
@@ -38,12 +38,19 @@ export class NewContactComponent implements OnInit {
         this.mediaSub = new Subscription();
 
         this.birthdayValue = "";
+
     }
 
     ngOnInit(): void {
+        console.log(this.contact);
         this.contactForm = FormGroupInitializer.initFormGroup(this.contactForm, this.contact);
     }
 
+    ngAfterViewInit(): void {
+    }
+
+
+
     protected onBirthdayChange(selectedItem: any) {
         // Set T12:00 for correct string
         let selectedItemValue = null;
@@ -85,7 +92,7 @@ export class NewContactComponent implements OnInit {
             } else {
                 // Edit contact
                 this.contactSub = this.contactService.contactsIdPatch(
-                    this.apiHelperService.extractId(this.contact.id),
+                    this.appHelperService.extractId(this.contact.id),
                     this.contactForm.value as ContactJsonld
                 ).subscribe(
                     data => {
@@ -110,7 +117,7 @@ export class NewContactComponent implements OnInit {
         this.translateService.get('system.confirm-delete-image').subscribe((translation: string) => {
             confirmMessage = translation;
         });
-        const userConfirmed = window.confirm(confirmMessage);
+        const userConfirmed = (window as any).confirm(confirmMessage);
         if (userConfirmed) {
             this.contactForm.patchValue({"image": null});
             this.contactForm.patchValue({"imageUrl": null});

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

@@ -11,8 +11,7 @@ import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {NewDocumentComponent} from "@app/_views/documents/new-document/new-document.component";
 import {TranslateModule} from "@ngx-translate/core";
 import {ModalStatus} from "@app/_helpers/modal.states";
-import {NewCommentComponent} from "@app/_views/posts/new-comment/new-comment.component";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 @Component({
     selector: 'app-documents',
@@ -43,7 +42,7 @@ export class DocumentsComponent {
         private router: Router,
         private modalService: NgbModal,
         private documentService: DocumentService,
-        protected apiHelperService: ApiHelperService
+        protected appHelperService: AppHelperService
     ) {
         this.sort = new MatSort();
         this.displayedColumns = ['pos', 'name', 'description', 'partnerName', 'productName', 'createdAt', 'createdByName', 'download', 'edit'];
@@ -123,7 +122,7 @@ export class DocumentsComponent {
     }
 
     openModalNewDocument() {
-        const modalRefDocument = this.modalService.open(NewDocumentComponent, this.modalOptions);
+        const modalRefDocument = this.modalService.open(NewDocumentComponent, this.appHelperService.getModalOptions());
         let document: DocumentJsonld = {} as DocumentJsonld;
         modalRefDocument.componentInstance.document = document;
         modalRefDocument.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
@@ -135,7 +134,7 @@ export class DocumentsComponent {
     }
 
     openModalEditDocument(document: DocumentJsonld) {
-        const modalRefDocument = this.modalService.open(NewDocumentComponent, this.modalOptions);
+        const modalRefDocument = this.modalService.open(NewDocumentComponent, this.appHelperService.getModalOptions());
         modalRefDocument.componentInstance.document = document;
         modalRefDocument.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {

matsen-tool/src/app/_views/documents/new-document/new-document.component.html

@@ -14,25 +14,25 @@
 
         <div class="mb-3">
             <app-search-input #partnerSearchInput
-                      [formId]="'partner'"
-                      [formLabelLangKey]="'form.partner'"
-                      [dataField]="'partnerName'"
-                      [documentForm]="documentForm"
-                      [documentFormField]="'partnerName'"
-                      [fetchFunction]="fetchPartners"
-            ></app-search-input>
+                  [formId]="'partner'"
+                  [formLabelLangKey]="'form.partner'"
+                  [dataField]="'partnerName'"
+                  [documentForm]="documentForm"
+                  [documentFormField]="'partnerName'"
+                  [fetchFunction]="fetchPartners">
+            </app-search-input>
             <input type="hidden" formControlName="partner"/>
         </div>
 
         <div class="mb-3">
             <app-search-input #productSearchInput
-                              [formId]="'product'"
-                              [formLabelLangKey]="'form.product'"
-                              [dataField]="'productName'"
-                              [documentForm]="documentForm"
-                              [documentFormField]="'productName'"
-                              [fetchFunction]="fetchProducts"
-            ></app-search-input>
+                  [formId]="'product'"
+                  [formLabelLangKey]="'form.product'"
+                  [dataField]="'productName'"
+                  [documentForm]="documentForm"
+                  [documentFormField]="'productName'"
+                  [fetchFunction]="fetchProducts">
+            </app-search-input>
             <input type="hidden" formControlName="product"/>
         </div>
 

matsen-tool/src/app/_views/documents/new-document/new-document.component.ts

@@ -9,7 +9,7 @@ import {debounceTime, distinctUntilChanged, Observable, OperatorFunction, Subscr
 import {TranslateService} from "@ngx-translate/core";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {documentForm} from "@app/_forms/apiForms";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {filter, map} from "rxjs/operators";
 import {SearchInputComponent} from "@app/_components/search-input/search-input.component";
 
@@ -39,7 +39,7 @@ export class NewDocumentComponent implements OnInit {
         private translateService: TranslateService,
         private partnerService: PartnerService,
         private productService: ProductService,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
         this.documentForm = documentForm;
         this.documentSub = new Subscription();
@@ -94,7 +94,7 @@ export class NewDocumentComponent implements OnInit {
             } else {
                 // Edit contact
                 this.documentSub = this.documentService.documentsIdPatch(
-                    this.apiHelperService.extractId(this.document.id),
+                    this.appHelperService.extractId(this.document.id),
                     this.documentForm.value as DocumentJsonld
                 ).subscribe(
                     data => {

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

@@ -69,14 +69,14 @@
                 <div class="tasks mb-3" *ngFor="let task of tasks">
                     <div class="card p-3">
                         <div class="position-relative">
-                            <h3 class="m-0" *ngIf="task.partner"><a href="/{{task.partnerType}}/{{apiHelperService.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
+                            <h3 class="m-0" *ngIf="task.partner"><a href="/{{task.partnerType}}/{{appHelperService.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
                             <span class="info d-flex position-absolute">
                                 <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
                                 <span class="importance" [attr.data-importance]="task.prio"></span>
                             </span>
                             <h2 class="m-0">{{ task.headline }}</h2>
                             <div class="pt-3 pe-5 position-relative">
-                                <p class="m-0" [innerHTML]="apiHelperService.getSafeLongtext(task.description)"></p>
+                                <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
                                 <p>Zugewiesen an: {{ task.assignedToName }}</p>
                                 <span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
                                       data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>

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

@@ -18,7 +18,7 @@ import {MatTableDataSource} from "@angular/material/table";
 import {NewTaskComponent} from "@app/_views/tasks/new-task/new-task.component";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {NewTaskNoteComponent} from "@app/_views/tasks/new-task-note/new-task-note.component";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 @Component({
     templateUrl: 'home.component.html',
@@ -56,7 +56,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
         private postService: PostService,
         private userService: UserService,
         private taskService: TaskService,
-        protected apiHelperService: ApiHelperService
+        protected appHelperService: AppHelperService
     ) {
         this.user = this.accountService.userValue;
         // this.accountService.user.subscribe(x => this.user = x);
@@ -128,7 +128,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewTask() {
-        const modalRefTask = this.modalService.open(NewTaskComponent, this.modalOptions);
+        const modalRefTask = this.modalService.open(NewTaskComponent, this.appHelperService.getModalOptions());
         let task: TaskJsonld = {} as TaskJsonld;
         task.partner = null;
         task.completed = false;
@@ -142,7 +142,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewTaskNote(task: TaskJsonld) {
-        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
+        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.appHelperService.getModalOptions());
         let taskNote: TaskNoteJsonld = {} as TaskNoteJsonld;
         taskNote.task = task.id ?? null;
         modalRefTaskNote.componentInstance.taskNote = taskNote;
@@ -155,9 +155,9 @@ export class HomeComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditTask(task: TaskJsonld) {
-        const modalRefTaskEdit = this.modalService.open(NewTaskComponent, this.modalOptions);
+        const modalRefTaskEdit = this.modalService.open(NewTaskComponent, this.appHelperService.getModalOptions());
         modalRefTaskEdit.componentInstance.task = task;
-        modalRefTaskEdit.componentInstance.dueAtValue = this.apiHelperService.convertDate(task.dueAt);
+        modalRefTaskEdit.componentInstance.dueAtValue = this.appHelperService.convertDate(task.dueAt);
         modalRefTaskEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
                 modalRefTaskEdit.dismiss();
@@ -167,7 +167,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditTaskNote(taskNote: TaskNoteJsonld) {
-        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
+        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.appHelperService.getModalOptions());
         modalRefTaskNote.componentInstance.taskNote = taskNote;
         modalRefTaskNote.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {

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

@@ -6,7 +6,7 @@ import {FormGroup} from "@angular/forms";
 import {Subscription} from "rxjs";
 import {TranslateService} from "@ngx-translate/core";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 @Component({
     selector: 'app-new-partner',
@@ -29,7 +29,7 @@ export class NewPartnerComponent implements OnInit {
         private partnerService: PartnerService,
         private mediaObjectService: MediaObjectService,
         private translateService: TranslateService,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
         this.partnerForm = partnerForm;
         this.selectedImage = null;
@@ -79,7 +79,7 @@ export class NewPartnerComponent implements OnInit {
             } else {
                 // Edit contact
                 this.partnerSub = this.partnerService.partnersIdPatch(
-                    this.apiHelperService.extractId(this.partner.id),
+                    this.appHelperService.extractId(this.partner.id),
                     this.partnerForm.value as PartnerJsonld
                 ).subscribe(
                     data => {

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

@@ -42,13 +42,13 @@
         </div>
         <div class="card-body row" *ngIf="partner.description">
             <div class="col-12">
-                <p [innerHTML]="apiHelperService.getSafeLongtext(partner.description)"></p>
+                <p [innerHTML]="appHelperService.getSafeLongtext(partner.description)"></p>
             </div>
         </div>
         <div class="card-body row" *ngIf="partnerProducts">
             <div class="col-12">
                 <ul *ngFor="let partnerProduct of partnerProducts">
-                    <li><a href="/products/{{this.apiHelperService.extractId(partnerProduct.product)}}">{{partnerProduct.productName}}</a></li>
+                    <li><a href="/products/{{this.appHelperService.extractId(partnerProduct.product)}}">{{partnerProduct.productName}}</a></li>
                 </ul>
             </div>
         </div>

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

@@ -8,7 +8,7 @@ import {
 } from "@app/core/api/v1";
 import {Subscription} from "rxjs";
 import {environment} from "@environments/environment";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {AccountService} from "@app/_services";
 import {User} from "@app/_models";
@@ -54,7 +54,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         private partnerService: PartnerService,
         private partnerProductService: PartnerProductService,
         private partnerFollowService: PartnerFollowService,
-        protected apiHelperService: ApiHelperService
+        protected appHelperService: AppHelperService
     ) {
         this.partnerDetailSub = new Subscription();
 
@@ -102,7 +102,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditPartner() {
-        const modalRef = this.modalService.open(NewPartnerComponent, this.modalOptions);
+        const modalRef = this.modalService.open(NewPartnerComponent, this.appHelperService.getModalOptions());
         modalRef.componentInstance.partner = this.partner;
         modalRef.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
@@ -144,7 +144,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
             );
         } else {
             this.partnerFollowSub = this.partnerFollowService.partnerFollowsIdDelete(
-                this.apiHelperService.extractId(this.partnerFollow.id)
+                this.appHelperService.extractId(this.partnerFollow.id)
             ).subscribe(
                 data => {
                     this.partnerFollow = null;

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

@@ -6,7 +6,7 @@ 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 {ApiHelperService} from "@app/_helpers/api-helper.service";
+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";
@@ -53,7 +53,7 @@ export class PartnersComponent implements OnInit, AfterViewInit {
         private router: Router,
         private modalService: NgbModal,
         private translateService: TranslateService,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
         this.partnersSort = new MatSort();
         this.partnersPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
@@ -153,11 +153,11 @@ export class PartnersComponent implements OnInit, AfterViewInit {
 
     navigateToPartnerDetails(element: any) {
         const partner: PartnerJsonld = element as PartnerJsonld;
-        this.router.navigate(['/' + partner.partnerType, this.apiHelperService.extractId(partner.id)]);
+        this.router.navigate(['/' + partner.partnerType, this.appHelperService.extractId(partner.id)]);
     }
 
     openModalNewPartner() {
-        const modalRefContact = this.modalService.open(NewPartnerComponent, this.modalOptions);
+        const modalRefContact = this.modalService.open(NewPartnerComponent, this.appHelperService.getModalOptions());
         let partner: PartnerJsonld = {} as PartnerJsonld;
         partner.partnerType = this.dataType as TypeEnum;
         modalRefContact.componentInstance.partner = partner;

matsen-tool/src/app/_views/posts/new-comment/new-comment.component.ts

@@ -5,7 +5,7 @@ import {Subscription} from "rxjs";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {FormGroup} from "@angular/forms";
 import {commentForm} from "@app/_forms/apiForms";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 @Component({
     selector: 'app-new-comment',
@@ -21,7 +21,7 @@ export class NewCommentComponent implements OnInit {
 
     constructor(
         private commentService: CommentService,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
         this.commentForm = commentForm;
         this.commentSub = new Subscription();
@@ -46,7 +46,7 @@ export class NewCommentComponent implements OnInit {
             } else {
                 // Edit comment
                 this.commentSub = this.commentService.commentsIdPatch(
-                    this.apiHelperService.extractId(this.comment.id),
+                    this.appHelperService.extractId(this.comment.id),
                     this.commentForm.value as CommentJsonld
                 ).subscribe(
                     data => {

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

@@ -4,7 +4,7 @@ import {FormGroup} from "@angular/forms";
 import {postForm} from "@app/_forms/apiForms";
 import {PartnerJsonld, PostJsonld, PostService} from "@app/core/api/v1";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {Subscription} from "rxjs";
 
 @Component({
@@ -21,7 +21,7 @@ export class NewPostComponent implements OnInit {
 
     constructor(
         private postService: PostService,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
         this.postForm = postForm;
         this.postSub = new Subscription();
@@ -47,7 +47,7 @@ export class NewPostComponent implements OnInit {
             } else {
                 // Edit post
                 this.postSub = this.postService.postsIdPatch(
-                    this.apiHelperService.extractId(this.posting.id),
+                    this.appHelperService.extractId(this.posting.id),
                     this.postForm.value as PostJsonld
                 ).subscribe(
                     data => {

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

@@ -1,57 +1,54 @@
 <div class="spt-container">
     <div class="posts position-relative">
         <button class="btn btn-primary toggle-btn" (click)="openModalNewPost()">{{ 'basic.new-post' | translate }}</button>
-        <div class="post mb-3" *ngFor="let post of posts">
-            <div class="card">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
-                        <p>{{ post.ownerName }}</p>
-                    </div>
-                    <div>
-                        <h3>{{ post.headline }}</h3>
-                        <p class="m-0" [innerHTML]="apiHelperService.getSafeLongtext(post.message)"></p>
-                    </div>
-                    <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2"
-                          data-type="user-tool"
-                          data-action="edit" (click)="openModalEditPost(post)"></span>
-                </div>
-            </div>
-            <div *ngIf="post.id && commentsVisibility.get(post.id)">
-                <div class="card ms-5" *ngFor="let comment of post.comments">
+        <app-paging #pagingComponent
+            [getDataFunction]="getData"
+            [dataSource]="postsDataSource"
+        >
+            <div class="post mb-3" *ngFor="let post of posts">
+                <div class="card">
                     <div class="card-body">
                         <div class="d-flex justify-content-between align-items-center">
-                            <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
-                            <p>{{ comment.ownerName }}</p>
+                            <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
+                            <p>{{ post.ownerName }}</p>
                         </div>
                         <div>
-                            <p class="m-0" [innerHTML]="apiHelperService.getSafeLongtext(comment.message)"></p>
+                            <h3>{{ post.headline }}</h3>
+                            <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(post.message)"></p>
+                        </div>
+                        <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2"
+                              data-type="user-tool"
+                              data-action="edit" (click)="openModalEditPost(post)"></span>
+                    </div>
+                </div>
+                <div *ngIf="post.id && commentsVisibility.get(post.id)">
+                    <div class="card ms-5" *ngFor="let comment of post.comments">
+                        <div class="card-body">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
+                                <p>{{ comment.ownerName }}</p>
+                            </div>
+                            <div>
+                                <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(comment.message)"></p>
+                            </div>
+                            <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2"
+                                  data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
                         </div>
-                        <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2"
-                              data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
                     </div>
                 </div>
-            </div>
 
-            <div class="d-flex justify-content-end mt-1">
-                    <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
-                          (click)="showComments(post)">
-                        <ng-container
-                            *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                        <ng-container
-                            *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
-                    </span>
-                <span role="button" class="badge bg-secondary p-2"
-                      (click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>
+                <div class="d-flex justify-content-end mt-1">
+                        <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
+                              (click)="showComments(post)">
+                            <ng-container
+                                *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                            <ng-container
+                                *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                        </span>
+                    <span role="button" class="badge bg-secondary p-2"
+                          (click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>
+                </div>
             </div>
-        </div>
-        <mat-paginator *ngIf="dataLength > 0" class="rounded-1"
-                       [pageSizeOptions]="this.pageSizeOptions"
-                       [length]="dataLength"
-                       (page)="handlePageEvent($event)"
-                       [pageSize]="pageSize"
-                       [pageIndex]="pageIndex"
-                       showFirstLastButtons>
-        </mat-paginator>
+        </app-paging>
     </div>
 </div>

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

@@ -4,7 +4,7 @@ import {
     CommentJsonld,
     ContactJsonld,
     PartnerJsonld,
-    PartnerProductJsonld, PartnerProductService,
+    PartnerProductJsonld,
     PostJsonld,
     PostService,
     SaleJsonld, UserJsonld
@@ -14,16 +14,16 @@ import {MatTableDataSource} from "@angular/material/table";
 import {NewPostComponent} from "@app/_views/posts/new-post/new-post.component";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {NewCommentComponent} from "@app/_views/posts/new-comment/new-comment.component";
-import {ListComponent} from "@app/_components/list/list.component";
+import {PagingComponent} from "@app/_components/paging/paging.component";
 
 @Component({
   selector: 'app-post-list',
   templateUrl: './post-list.component.html',
   styleUrl: './post-list.component.scss'
 })
-export class PostListComponent extends ListComponent implements OnInit, AfterViewInit {
+export class PostListComponent implements OnInit, AfterViewInit {
 
     @Input() public partner!: PartnerJsonld;
     @Input() public contact!: ContactJsonld;
@@ -32,6 +32,7 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
     @Input() public existsContact!: boolean;
     @Input() public existsSale!: boolean;
 
+    @ViewChild("pagingComponent", { static: false }) pagingComponent: PagingComponent = new PagingComponent();
     @ViewChild(MatPaginator) postsPaginator: MatPaginator;
 
     protected postsSub: Subscription;
@@ -40,13 +41,15 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
     protected partnerProducts: Array<PartnerProductJsonld>;
     protected postsDataSource;
     protected commentsVisibility: Map<string, boolean>;
+    protected modalOptions: NgbModalOptions = {
+        centered: true
+    };
 
     constructor(
         private postService: PostService,
         private modalService: NgbModal,
-        protected apiHelperService: ApiHelperService
+        protected appHelperService: AppHelperService
     ) {
-        super();
         this.postsSub = new Subscription();
         this.posts = [];
         this.partnerProductsSub = new Subscription();
@@ -64,10 +67,10 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
         this.postsDataSource.paginator = this.postsPaginator;
     }
 
-    override getData() {
+    getData = () => {
         this.postsSub = this.postService.postsGetCollection(
-            this.pageIndex + 1,
-            this.pageSize,
+            this.pagingComponent.getPageIndex(),
+            this.pagingComponent.getPageSize(),
             this.partner !== undefined ? this.partner.id : undefined,
             undefined,
             this.contact !== undefined ? this.contact.id : undefined,
@@ -81,7 +84,7 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
         ).subscribe(
             data => {
                 this.posts = data["hydra:member"];
-                this.dataLength = Number(data["hydra:totalItems"]);
+                this.pagingComponent.dataLength = Number(data["hydra:totalItems"]);
                 this.posts.forEach(posts => {
                     if (posts.id) {
                         this.commentsVisibility.set(posts.id, false);
@@ -99,7 +102,7 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
     }
 
     openModalNewPost() {
-        const modalRefPosting = this.modalService.open(NewPostComponent, this.modalOptions);
+        const modalRefPosting = this.modalService.open(NewPostComponent, this.appHelperService.getModalOptions());
         let posting: PostJsonld = {} as PostJsonld;
         posting.partner = this.partner.id ?? null;
         modalRefPosting.componentInstance.posting = posting;
@@ -112,7 +115,7 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
     }
 
     openModalEditPost(post: PostJsonld) {
-        const modalRefPostingEdit = this.modalService.open(NewPostComponent, this.modalOptions);
+        const modalRefPostingEdit = this.modalService.open(NewPostComponent, this.appHelperService.getModalOptions());
         modalRefPostingEdit.componentInstance.posting = post;
         modalRefPostingEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
@@ -123,7 +126,7 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
     }
 
     openModalEditComment(comment: CommentJsonld) {
-        const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
+        const modalRefComment = this.modalService.open(NewCommentComponent, this.appHelperService.getModalOptions());
         modalRefComment.componentInstance.comment = comment;
         modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
@@ -134,7 +137,7 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
     }
 
     openModalNewComment(post: PostJsonld) {
-        const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
+        const modalRefComment = this.modalService.open(NewCommentComponent, this.appHelperService.getModalOptions());
         let comment: CommentJsonld = {} as CommentJsonld;
         comment.post = post.id ?? null;
         modalRefComment.componentInstance.comment = comment;

matsen-tool/src/app/_views/products/new-product/new-product.component.ts

@@ -5,7 +5,7 @@ import {FormGroup} from "@angular/forms";
 import {Subscription} from "rxjs";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {productForm} from "@app/_forms/apiForms";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {TranslateService} from "@ngx-translate/core";
 
 @Component({
@@ -27,7 +27,7 @@ export class NewProductComponent implements OnInit {
         private productService: ProductService,
         private mediaObjectService: MediaObjectService,
         private translateService: TranslateService,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
         this.productForm = productForm;
         this.productSub = new Subscription();
@@ -70,7 +70,7 @@ export class NewProductComponent implements OnInit {
             } else {
                 // Edit product
                 this.productSub = this.productService.productsIdPatch(
-                    this.apiHelperService.extractId(this.product.id),
+                    this.appHelperService.extractId(this.product.id),
                     this.productForm.value as ProductJsonld
                 ).subscribe(
                     data => {

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

@@ -13,7 +13,7 @@ import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {NewProductComponent} from "@app/_views/products/new-product/new-product.component";
 import {User} from "@app/_models";
 import {AccountService} from "@app/_services";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 @Component({
     selector: 'app-products-detail',
@@ -40,7 +40,7 @@ export class ProductsDetailComponent implements OnInit, AfterViewInit {
         private productService: ProductService,
         private userProductService: UserProductService,
         private modalService: NgbModal,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
         this.id = "";
         this.user = this.accountService.userValue;
@@ -105,7 +105,7 @@ export class ProductsDetailComponent implements OnInit, AfterViewInit {
             );
         } else {
             this.userProductSub = this.userProductService.userProductsIdDelete(
-                this.apiHelperService.extractId(this.userProduct.id)
+                this.appHelperService.extractId(this.userProduct.id)
             ).subscribe(
                 data => {
                     this.userProduct = null;
@@ -115,7 +115,7 @@ export class ProductsDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditProduct() {
-        const modalRefProduct = this.modalService.open(NewProductComponent, this.modalOptions);
+        const modalRefProduct = this.modalService.open(NewProductComponent, this.appHelperService.getModalOptions());
         modalRefProduct.componentInstance.product = this.product;
         modalRefProduct.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {

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

@@ -4,7 +4,7 @@ import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@an
 import {MatTableDataSource, MatTableModule} from "@angular/material/table";
 import {ProductJsonld, ProductService} from "@app/core/api/v1";
 import {OrderFilter} from "@app/_models/orderFilter";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {Router, RouterLink, RouterLinkActive} from "@angular/router";
 import {NgIf} from "@angular/common";
 import {Subscription} from "rxjs";
@@ -42,7 +42,7 @@ export class ProductsComponent implements OnInit, AfterViewInit {
         private router: Router,
         private modalService: NgbModal,
         private productService: ProductService,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
         this.sort = new MatSort();
         this.displayedColumns = ['pos', 'image', 'name', 'storage', 'number'];
@@ -119,11 +119,11 @@ export class ProductsComponent implements OnInit, AfterViewInit {
 
     navigateToProductDetails(element: any) {
         const product: ProductJsonld = element as ProductJsonld;
-        this.router.navigate(['/products', this.apiHelperService.extractId(product.id)]);
+        this.router.navigate(['/products', this.appHelperService.extractId(product.id)]);
     }
 
     openModalNewProduct() {
-        const modalRefProduct = this.modalService.open(NewProductComponent, this.modalOptions);
+        const modalRefProduct = this.modalService.open(NewProductComponent, this.appHelperService.getModalOptions());
         // TODO: Warum muss ich einen leeren String übergeben, damit es funktioniert?
         let product: ProductJsonld = {} as ProductJsonld;
         product.name = "";

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

@@ -4,7 +4,7 @@ import {Router} from "@angular/router";
 import {AccountService} from "@app/_services";
 import {Subscription} from "rxjs";
 import {PartnerJsonld, UserJsonld, UserService} from "@app/core/api/v1";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 @Component({
   selector: 'app-profile',
@@ -20,7 +20,7 @@ export class ProfileComponent implements OnInit {
         private router: Router,
         private accountService: AccountService,
         private userService: UserService,
-        protected apiHelperService: ApiHelperService
+        protected appHelperService: AppHelperService
     ) {
         this.userSub = new Subscription();
         this.user = {} as UserJsonld;
@@ -34,7 +34,7 @@ export class ProfileComponent implements OnInit {
         const user = this.accountService.userValue;
         if (user?.id !== null && user?.id !== undefined) {
             this.userSub = this.userService.usersIdGet(
-                this.apiHelperService.extractId(user.id)
+                this.appHelperService.extractId(user.id)
             ).subscribe(
                 data => {
                     this.user = data;

matsen-tool/src/app/_views/sales/new-sale/new-sale.component.ts

@@ -13,7 +13,7 @@ import {debounceTime, distinctUntilChanged, Observable, OperatorFunction, Subscr
 import {TranslateService} from "@ngx-translate/core";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {saleForm} from "@app/_forms/apiForms";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {filter, map} from "rxjs/operators";
 
 @Component({
@@ -35,7 +35,7 @@ export class NewSaleComponent implements OnInit {
         private partnerService: PartnerService,
         private productService: ProductService,
         private translateService: TranslateService,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
         this.saleForm = saleForm;
 
@@ -113,7 +113,7 @@ export class NewSaleComponent implements OnInit {
             } else {
                 // Edit sale
                 this.saleSub = this.saleService.salesIdPatch(
-                    this.apiHelperService.extractId(this.sale.id),
+                    this.appHelperService.extractId(this.sale.id),
                     this.saleForm.value as SaleJsonld
                 ).subscribe(
                     data => {

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

@@ -13,7 +13,7 @@
                     <dt *ngIf="sale.profit">{{'overview.profit' | translate}}:</dt>
                     <dd *ngIf="sale.profit">{{ sale.profit }}</dd>
                     <dt *ngIf="sale.comment">{{'overview.comment' | translate}}:</dt>
-                    <dd *ngIf="sale.comment" [innerHTML]="apiHelperService.getSafeLongtext(sale.comment)"></dd>
+                    <dd *ngIf="sale.comment" [innerHTML]="appHelperService.getSafeLongtext(sale.comment)"></dd>
                 </dl>
             </div>
             <div class="col-4"></div>
@@ -36,7 +36,7 @@
                         </div>
                         <div>
                             <h3>{{ post.headline }}</h3>
-                            <p class="m-0" [innerHTML]="apiHelperService.getSafeLongtext(post.message)"></p>
+                            <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(post.message)"></p>
                         </div>
                         <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
                               data-action="edit" (click)="openModalEditPosting(post)"></span>
@@ -50,7 +50,7 @@
                                 <p>{{ comment.ownerName }}</p>
                             </div>
                             <div>
-                                <p class="m-0" [innerHTML]="apiHelperService.getSafeLongtext(comment.message)"></p>
+                                <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(comment.message)"></p>
                             </div>
                             <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
                                   data-action="edit" (click)="openModalEditComment(comment)"></span>

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

@@ -12,7 +12,7 @@ import {NewCommentComponent} from "@app/_views/posts/new-comment/new-comment.com
 import {NewContactComponent} from "@app/_views/contacts/new-contact/new-contact.component";
 import {NewSaleComponent} from "@app/_views/sales/new-sale/new-sale.component";
 import {ActivatedRoute} from "@angular/router";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 @Component({
   selector: 'app-sales-detail',
@@ -47,7 +47,7 @@ export class SalesDetailComponent implements OnInit, AfterViewInit {
       private route: ActivatedRoute,
       private postService: PostService,
       private modalService: NgbModal,
-      protected apiHelperService: ApiHelperService
+      protected appHelperService: AppHelperService
   ) {
     this.user = this.accountService.userValue;
 
@@ -126,7 +126,7 @@ export class SalesDetailComponent implements OnInit, AfterViewInit {
   }
 
   openModalNewPosting() {
-    const modalRefPosting = this.modalService.open(NewPostComponent, this.modalOptions);
+    const modalRefPosting = this.modalService.open(NewPostComponent, this.appHelperService.getModalOptions());
     let posting: PostJsonld = {} as PostJsonld;
     posting.sale = this.sale.id ?? null;
     posting.partner = this.sale.partner ?? null;
@@ -141,7 +141,7 @@ export class SalesDetailComponent implements OnInit, AfterViewInit {
   }
 
   openModalNewComment(post: PostJsonld) {
-    const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
+    const modalRefComment = this.modalService.open(NewCommentComponent, this.appHelperService.getModalOptions());
     let comment: CommentJsonld = {} as CommentJsonld;
     comment.post = post.id ?? null;
     modalRefComment.componentInstance.comment = comment;
@@ -154,7 +154,7 @@ export class SalesDetailComponent implements OnInit, AfterViewInit {
   }
 
   openModalEditPosting(post: PostJsonld) {
-    const modalRefPostingEdit = this.modalService.open(NewPostComponent, this.modalOptions);
+    const modalRefPostingEdit = this.modalService.open(NewPostComponent, this.appHelperService.getModalOptions());
     modalRefPostingEdit.componentInstance.posting = post;
     modalRefPostingEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
       if (modalStatus === ModalStatus.Submitted) {
@@ -165,7 +165,7 @@ export class SalesDetailComponent implements OnInit, AfterViewInit {
   }
 
   openModalEditComment(comment: CommentJsonld) {
-    const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
+    const modalRefComment = this.modalService.open(NewCommentComponent, this.appHelperService.getModalOptions());
     modalRefComment.componentInstance.comment = comment;
     modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
       if (modalStatus === ModalStatus.Submitted) {
@@ -176,7 +176,7 @@ export class SalesDetailComponent implements OnInit, AfterViewInit {
   }
 
   openModalEditSale() {
-    const modalRefSale = this.modalService.open(NewSaleComponent, this.modalOptions);
+    const modalRefSale = this.modalService.open(NewSaleComponent, this.appHelperService.getModalOptions());
     modalRefSale.componentInstance.sale = this.sale;
     modalRefSale.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
       if (modalStatus === ModalStatus.Submitted) {

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

@@ -53,7 +53,7 @@
                 {{ 'overview.sale-partner' | translate }}
             </th>
             <td mat-cell *matCellDef="let element">
-                <a [routerLink]="['/customer', apiHelperService.extractId(element.partner)]">{{ element.partnerName }}</a>
+                <a [routerLink]="['/customer', appHelperService.extractId(element.partner)]">{{ element.partnerName }}</a>
             </td>
         </ng-container>
 
@@ -63,7 +63,7 @@
                 {{ 'overview.productname' | translate }}
             </th>
             <td mat-cell *matCellDef="let element">
-                <a [routerLink]="['/products', apiHelperService.extractId(element.product)]">{{ element.productName }}</a>
+                <a [routerLink]="['/products', appHelperService.extractId(element.product)]">{{ element.productName }}</a>
             </td>
         </ng-container>
 

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

@@ -16,7 +16,7 @@ import {ModalStatus} from "@app/_helpers/modal.states";
 import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {MatTableDataSource} from "@angular/material/table";
 import {OrderFilter} from "@app/_models/orderFilter";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {Router} from "@angular/router";
 import {registerLocaleData} from "@angular/common";
 import localeDe from '@angular/common/locales/de';
@@ -63,7 +63,7 @@ export class SalesComponent implements OnInit {
         private translateService: TranslateService,
         private modalService: NgbModal,
         private router: Router,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
         this.sort = new MatSort();
         this.displayedColumns = ['pos', 'user', 'partner', 'product', 'turnover', 'profit', 'date', 'details'];
@@ -162,11 +162,11 @@ export class SalesComponent implements OnInit {
 
     navigateToSaleDetails(element: any) {
         const sale: SaleJsonld = element as SaleJsonld;
-        this.router.navigate(['/sales', this.apiHelperService.extractId(sale.id)]);
+        this.router.navigate(['/sales', this.appHelperService.extractId(sale.id)]);
     }
 
     openModalNewSale() {
-        const modalRefSale = this.modalService.open(NewSaleComponent, this.modalOptions);
+        const modalRefSale = this.modalService.open(NewSaleComponent, this.appHelperService.getModalOptions());
         let sale: SaleJsonld = {} as SaleJsonld;
         modalRefSale.componentInstance.sale = sale;
         modalRefSale.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {

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

@@ -4,7 +4,7 @@ import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroup} from "@angular/forms";
 import {Subscription} from "rxjs";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {taskNoteForm} from "@app/_forms/apiForms";
 
 @Component({
@@ -21,7 +21,7 @@ export class NewTaskNoteComponent {
 
   constructor(
       private taskNoteService: TaskNoteService,
-      protected apiHelperService: ApiHelperService
+      protected appHelperService: AppHelperService
   ) {
     this.taskNoteForm = taskNoteForm;
     this.taskNoteSub = new Subscription();
@@ -46,7 +46,7 @@ export class NewTaskNoteComponent {
       } else {
         // Edit taskNote
         this.taskNoteSub = this.taskNoteService.taskNotesIdPatch(
-            this.apiHelperService.extractId(this.taskNote.id),
+            this.appHelperService.extractId(this.taskNote.id),
             this.taskNoteForm.value as TaskNoteJsonld
         ).subscribe(
             data => {

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

@@ -5,7 +5,7 @@ import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {FormGroup} from "@angular/forms";
 import {debounceTime, distinctUntilChanged, Observable, OperatorFunction, Subscription, switchMap} from "rxjs";
 import {taskForm} from "@app/_forms/apiForms";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {filter, map} from "rxjs/operators";
 
 @Component({
@@ -27,7 +27,7 @@ export class NewTaskComponent implements OnInit {
         private taskService: TaskService,
         private userService: UserService,
         private partnerService: PartnerService,
-        protected apiHelperService: ApiHelperService
+        protected appHelperService: AppHelperService
     ) {
         this.taskForm = taskForm;
         this.taskSub = new Subscription();
@@ -97,7 +97,7 @@ export class NewTaskComponent implements OnInit {
             } else {
                 // Edit task
                 this.taskSub = this.taskService.tasksIdPatch(
-                    this.apiHelperService.extractId(this.task.id),
+                    this.appHelperService.extractId(this.task.id),
                     this.taskForm.value as TaskJsonld
                 ).subscribe(
                     data => {

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

@@ -1,58 +1,55 @@
 <div class="spt-container">
     <div class="spt-accordion position-relative">
         <button class="btn btn-primary toggle-btn" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button>
-        <div class="tasks mb-3" *ngFor="let task of tasks">
-            <div class="card p-3">
-                <div class="position-relative">
-                    <h3 class="m-0" *ngIf="task.partner"><a href="/{{task.partnerType}}/{{this.apiHelperService.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
-                    <span class="info d-flex position-absolute">
-                            <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
-                            <span class="importance" [attr.data-importance]="task.prio"></span>
-                        </span>
-                    <h2 class="m-0">{{ task.headline }}</h2>
-                    <div class="pt-3 pe-5 position-relative">
-                        <p class="m-0" [innerHTML]="apiHelperService.getSafeLongtext(task.description)"></p>
-                        <p>Zugewiesen an: {{ task.assignedToName }}</p>
-                        <span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
-                              data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
+        <app-paging #pagingComponent
+                    [getDataFunction]="getData"
+                    [dataSource]="dataSource"
+        >
+            <div class="tasks mb-3" *ngFor="let task of tasks">
+                <div class="card p-3">
+                    <div class="position-relative">
+                        <h3 class="m-0" *ngIf="task.partner"><a href="/{{task.partnerType}}/{{this.appHelperService.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
+                        <span class="info d-flex position-absolute">
+                                <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
+                                <span class="importance" [attr.data-importance]="task.prio"></span>
+                            </span>
+                        <h2 class="m-0">{{ task.headline }}</h2>
+                        <div class="pt-3 pe-5 position-relative">
+                            <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
+                            <p>Zugewiesen an: {{ task.assignedToName }}</p>
+                            <span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
+                                  data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div *ngIf="task.id && taskNotesVisibility.get(task.id)">
-                <div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
-                    <div class="card-body">
-                        <div class="d-flex justify-content-between align-items-center">
-                            <p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
-                            <p>{{ taskNote.ownerName }}</p>
-                        </div>
-                        <div>
-                            <p>{{ taskNote.message }}</p>
+                <div *ngIf="task.id && taskNotesVisibility.get(task.id)">
+                    <div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
+                        <div class="card-body">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
+                                <p>{{ taskNote.ownerName }}</p>
+                            </div>
+                            <div>
+                                <p>{{ taskNote.message }}</p>
+                            </div>
+                            <span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
+                                  data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
                         </div>
-                        <span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
-                              data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
                     </div>
                 </div>
-            </div>
 
-            <div class="d-flex justify-content-end mt-1">
-                    <span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
-                          (click)="showTaskNotes(task)">
-                        <ng-container
-                            *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                        <ng-container
-                            *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
-                    </span>
-                <span role="button" class="badge bg-secondary p-2"
-                      (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
+                <div class="d-flex justify-content-end mt-1">
+                        <span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
+                              (click)="showTaskNotes(task)">
+                            <ng-container
+                                *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                            <ng-container
+                                *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                        </span>
+                    <span role="button" class="badge bg-secondary p-2"
+                          (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
+                </div>
             </div>
-        </div>
-        <mat-paginator *ngIf="dataLength > 0" class="rounded-1"
-                       [pageSizeOptions]="this.pageSizeOptions"
-                       [length]="dataLength"
-                       (page)="handlePageEvent($event)"
-                       [pageSize]="pageSize"
-                       [pageIndex]="pageIndex"
-                       showFirstLastButtons>
-        </mat-paginator>
+        </app-paging>
     </div>
 </div>

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

@@ -1,13 +1,12 @@
-import {AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
-import {ListComponent} from "@app/_components/list/list.component";
+import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
+import {PagingComponent} from "@app/_components/paging/paging.component";
 import {Subscription} from "rxjs";
 import {PartnerJsonld, TaskJsonld, TaskNoteJsonld, TaskService} from "@app/core/api/v1";
-import {MatPaginator, MatPaginatorIntl} from "@angular/material/paginator";
 import {MatTableDataSource} from "@angular/material/table";
 import {NewTaskComponent} from "@app/_views/tasks/new-task/new-task.component";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {NewTaskNoteComponent} from "@app/_views/tasks/new-task-note/new-task-note.component";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {AccountService} from "@app/_services";
 import {User} from "@app/_models";
@@ -17,16 +16,15 @@ import {User} from "@app/_models";
   templateUrl: './task-list.component.html',
   styleUrl: './task-list.component.scss'
 })
-export class TaskListComponent extends ListComponent implements OnInit, AfterViewInit {
+export class TaskListComponent {
 
     @Input() public partner!: PartnerJsonld;
-
-    @ViewChild(MatPaginator) tasksPaginator: MatPaginator;
+    @ViewChild("pagingComponent", { static: false }) pagingComponent: PagingComponent = new PagingComponent();
 
     protected user: User | null;
     protected tasksSub: Subscription;
     protected tasks: Array<TaskJsonld>;
-    protected tasksDataSource;
+    protected dataSource;
 
     protected taskNotesVisibility: Map<string, boolean>;
 
@@ -34,38 +32,26 @@ export class TaskListComponent extends ListComponent implements OnInit, AfterVie
         private taskService: TaskService,
         private accountService: AccountService,
         private modalService: NgbModal,
-        protected apiHelperService: ApiHelperService,
+        protected appHelperService: AppHelperService,
     ) {
-        super();
         this.tasksSub = new Subscription();
         this.tasks = [];
-        this.tasksPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
-        this.tasksDataSource = new MatTableDataSource<TaskJsonld>(this.tasks);
-        this.tasksPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
+        this.dataSource = new MatTableDataSource<TaskJsonld>(this.tasks);
         this.taskNotesVisibility = new Map<string, boolean>();
         this.user = this.accountService.userValue;
     }
 
-    ngOnInit() {
-        this.getData();
-    }
-
-    ngAfterViewInit() {
-        this.tasksDataSource.paginator = this.tasksPaginator;
-    }
-
-    override getData() {
+    getData = () => {
         this.tasksSub = this.taskService.tasksGetCollection(
-            this.pageIndex + 1,
-            this.pageSize,
+            this.pagingComponent.getPageIndex(),
+            this.pagingComponent.getPageSize(),
             undefined,
             undefined,
             this.partner.id
         ).subscribe(
             data => {
                 this.tasks = data["hydra:member"];
-                console.log(this.tasks);
-                this.dataLength = Number(data["hydra:totalItems"]);
+                this.pagingComponent.dataLength = Number(data["hydra:totalItems"]);
                 this.tasks.forEach(task => {
                     if (task.id) {
                         this.taskNotesVisibility.set(task.id, false);
@@ -83,7 +69,7 @@ export class TaskListComponent extends ListComponent implements OnInit, AfterVie
     }
 
     openModalNewTask() {
-        const modalRefTask = this.modalService.open(NewTaskComponent, this.modalOptions);
+        const modalRefTask = this.modalService.open(NewTaskComponent, this.appHelperService.getModalOptions());
         let task: TaskJsonld = {} as TaskJsonld;
         task.partner = this.partner.id ?? null;
         task.completed = false;
@@ -97,7 +83,7 @@ export class TaskListComponent extends ListComponent implements OnInit, AfterVie
     }
 
     openModalNewTaskNote(task: TaskJsonld) {
-        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
+        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.appHelperService.getModalOptions());
         let taskNote: TaskNoteJsonld = {} as TaskNoteJsonld;
         taskNote.task = task.id ?? null;
         modalRefTaskNote.componentInstance.taskNote = taskNote;
@@ -110,9 +96,9 @@ export class TaskListComponent extends ListComponent implements OnInit, AfterVie
     }
 
     openModalEditTask(task: TaskJsonld) {
-        const modalRefTaskEdit = this.modalService.open(NewTaskComponent, this.modalOptions);
+        const modalRefTaskEdit = this.modalService.open(NewTaskComponent, this.appHelperService.getModalOptions());
         modalRefTaskEdit.componentInstance.task = task;
-        modalRefTaskEdit.componentInstance.dueAtValue = this.apiHelperService.convertDate(task.dueAt);
+        modalRefTaskEdit.componentInstance.dueAtValue = this.appHelperService.convertDate(task.dueAt);
         modalRefTaskEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
                 modalRefTaskEdit.dismiss();
@@ -122,7 +108,7 @@ export class TaskListComponent extends ListComponent implements OnInit, AfterVie
     }
 
     openModalEditTaskNote(taskNote: TaskNoteJsonld) {
-        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
+        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.appHelperService.getModalOptions());
         modalRefTaskNote.componentInstance.taskNote = taskNote;
         modalRefTaskNote.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {

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

@@ -7,14 +7,14 @@
         <div class="tasks mb-3" *ngFor="let task of tasks">
             <div class="card p-3">
                 <div class="position-relative">
-                    <h3 class="m-0" *ngIf="task.partner"><a href="/{{task.partnerType}}/{{this.apiHelperService.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
+                    <h3 class="m-0" *ngIf="task.partner"><a href="/{{task.partnerType}}/{{this.appHelperService.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
                     <span class="info d-flex position-absolute">
                         <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
                         <span class="importance" [attr.data-importance]="task.prio"></span>
                     </span>
                     <h2 class="m-0">{{task.headline}}</h2>
                     <div class="pt-3 pe-5 position-relative">
-                        <p class="m-0" [innerHTML]="apiHelperService.getSafeLongtext(task.description)"></p>
+                        <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
                         <p>Zugewiesen an: {{task.assignedToName}}</p>
                         <span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
                               data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
@@ -29,7 +29,7 @@
                             <p>{{ taskNote.ownerName }}</p>
                         </div>
                         <div>
-                            <p class="m-0" [innerHTML]="apiHelperService.getSafeLongtext(taskNote.message)"></p>
+                            <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(taskNote.message)"></p>
                         </div>
                         <span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
                               data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>

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

@@ -1,7 +1,7 @@
 import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
 import {NewTaskComponent} from "@app/_views/tasks/new-task/new-task.component";
 import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
-import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {Subscription} from "rxjs";
 import {TaskJsonld, TaskNoteJsonld, TaskService} from "@app/core/api/v1";
 import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
@@ -39,7 +39,7 @@ export class TasksComponent implements OnInit, AfterViewInit {
         private modalService: NgbModal,
         private accountService: AccountService,
         private taskService: TaskService,
-        protected apiHelperService: ApiHelperService
+        protected appHelperService: AppHelperService
     ) {
         this.user = this.accountService.userValue;
 
@@ -88,7 +88,7 @@ export class TasksComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewTask() {
-        const modalRefTask = this.modalService.open(NewTaskComponent, this.modalOptions);
+        const modalRefTask = this.modalService.open(NewTaskComponent, this.appHelperService.getModalOptions());
         let task: TaskJsonld = {} as TaskJsonld;
         task.partner = null;
         task.completed = false;
@@ -102,7 +102,7 @@ export class TasksComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewTaskNote(task: TaskJsonld) {
-        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
+        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.appHelperService.getModalOptions());
         let taskNote: TaskNoteJsonld = {} as TaskNoteJsonld;
         taskNote.task = task.id ?? null;
         modalRefTaskNote.componentInstance.taskNote = taskNote;
@@ -115,9 +115,9 @@ export class TasksComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditTask(task: TaskJsonld) {
-        const modalRefTaskEdit = this.modalService.open(NewTaskComponent, this.modalOptions);
+        const modalRefTaskEdit = this.modalService.open(NewTaskComponent, this.appHelperService.getModalOptions());
         modalRefTaskEdit.componentInstance.task = task;
-        modalRefTaskEdit.componentInstance.dueAtValue = this.apiHelperService.convertDate(task.dueAt);
+        modalRefTaskEdit.componentInstance.dueAtValue = this.appHelperService.convertDate(task.dueAt);
         modalRefTaskEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
                 modalRefTaskEdit.dismiss();
@@ -127,7 +127,7 @@ export class TasksComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditTaskNote(taskNote: TaskNoteJsonld) {
-        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
+        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.appHelperService.getModalOptions());
         modalRefTaskNote.componentInstance.taskNote = taskNote;
         modalRefTaskNote.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {

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

@@ -53,6 +53,7 @@ import {ContactListComponent} from "@app/_views/contacts/contact-list/contact-li
 import {ApiModule, Configuration, ConfigurationParameters} from "@app/core/api/v1";
 import { TaskListComponent } from './_views/tasks/task-list/task-list.component';
 import { SearchInputComponent } from './_components/search-input/search-input.component';
+import { PagingComponent } from '@app/_components/paging/paging.component';
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -127,6 +128,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         ContactListComponent,
         TaskListComponent,
         SearchInputComponent,
+        PagingComponent,
     ],
     providers: [
         {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},