refactoring

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

@@ -1,5 +1,6 @@
 import {PageEvent} from "@angular/material/paginator";
 import {throwError} from "rxjs";
+import {NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 
 export class ListComponent{
 
@@ -8,6 +9,9 @@ export class ListComponent{
     protected pageSize: number;
     protected pageIndex: number;
     protected pageSizeOptions: number[];
+    protected modalOptions: NgbModalOptions = {
+        centered: true
+    };
 
 
     constructor() {

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

@@ -0,0 +1,4 @@
+<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/_components/search-input/search-input.component.spec.ts

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

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

@@ -0,0 +1,38 @@
+import {Component, Input} from '@angular/core';
+import {FormGroup} from "@angular/forms";
+import {debounceTime, distinctUntilChanged, Observable, OperatorFunction, switchMap} from "rxjs";
+import {filter, map} from "rxjs/operators";
+
+@Component({
+  selector: 'app-search-input',
+  templateUrl: './search-input.component.html',
+  styleUrl: './search-input.component.scss'
+})
+export class SearchInputComponent {
+
+    @Input() public formId!: string;
+    @Input() public formLabelLangKey!: string;
+    @Input() public dataField!: string;
+    @Input() public documentForm!: FormGroup;
+    @Input() public documentFormField!: string;
+    @Input() public fetchFunction!: (term: string) => Observable<{ id: any; name: any }[]>;
+
+
+    protected formatter = (apiData: any) => apiData.name;
+
+    protected searchItem: OperatorFunction<string, readonly {
+        id: any;
+        name: any
+    }[]> = (text$: Observable<string>) =>
+        text$.pipe(
+            debounceTime(200),
+            distinctUntilChanged(),
+            filter((term) => term.length >= 2),
+            switchMap((term) => this.fetchFunction(term)),
+            map((items: {id: any, name: any}[]) => items.slice(0, 10)),
+        );
+
+    protected onItemSelect(selectedItem: any): void {
+        this.documentForm.get(this.formId)?.setValue(selectedItem.item.id);
+    }
+}

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

@@ -2,7 +2,7 @@ import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
 import {Injectable} from "@angular/core";
 
 @Injectable({ providedIn: 'root' })
-export class ApiConverter {
+export class ApiHelperService {
 
     constructor(private sanitizer: DomSanitizer) {}
 

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

@@ -26,12 +26,12 @@
                 </div>
             </div>
         </div>
-        <mat-paginator *ngIf="contactsLength > 0" class="rounded-1"
-                       [pageSizeOptions]="[6,12,18]"
-                       [length]="contactsLength"
-                       (page)="contactsHandlePageEvent($event)"
-                       [pageSize]="contactsPageSize"
-                       [pageIndex]="contactsPageIndex"
+        <mat-paginator *ngIf="dataLength > 0" class="rounded-1"
+                       [pageSizeOptions]="this.pageSizeOptions"
+                       [length]="dataLength"
+                       (page)="handlePageEvent($event)"
+                       [pageSize]="pageSize"
+                       [pageIndex]="pageIndex"
                        showFirstLastButtons>
         </mat-paginator>
     </div>

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

@@ -7,14 +7,15 @@ import {NewContactComponent} from "@app/_views/contacts/new-contact/new-contact.
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {Router} from "@angular/router";
-import {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-helper.service";
+import {ListComponent} from "@app/_components/list/list.component";
 
 @Component({
   selector: 'app-contact-list',
   templateUrl: './contact-list.component.html',
   styleUrl: './contact-list.component.scss'
 })
-export class ContactListComponent implements OnInit {
+export class ContactListComponent extends ListComponent implements OnInit {
 
     @Input() public partner!: PartnerJsonld;
 
@@ -23,48 +24,36 @@ export class ContactListComponent implements OnInit {
     protected contactsSub: Subscription;
     protected contacts: Array<ContactJsonld>;
     protected contactsDataSource;
-    protected contactsLength: number;
-    protected contactsPageEvent: PageEvent;
-    protected contactsPageSize: number;
-    protected contactsPageIndex: number;
-
-    protected modalOptions: NgbModalOptions = {
-        centered: true
-    };
 
     constructor(
         private router: Router,
         private modalService: NgbModal,
         private contactService: ContactService,
-        protected apiConverter: ApiConverter
+        protected apiHelperService: ApiHelperService
     ) {
+        super();
         this.contactsSub = new Subscription();
         this.contacts = [];
         this.contactsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
         this.contactsDataSource = new MatTableDataSource<ContactJsonld>(this.contacts);
-        this.contactsLength = 0;
-        this.contactsPageEvent = new PageEvent();
-        this.contactsPageSize = 6;
-        this.contactsPageIndex = 0;
     }
 
     ngOnInit() {
-        this.getContactsData();
+        this.getData();
     }
 
-    getContactsData() {
+    override getData() {
         this.contactsSub = this.contactService.contactsGetCollection(
-            this.contactsPageIndex + 1,
-            this.contactsPageSize,
+            this.pageIndex + 1,
+            this.pageSize,
             this.partner.id
         ).subscribe(
             data => {
                 this.contacts = data["hydra:member"];
-                this.contactsLength = Number(data["hydra:totalItems"]);
+                this.dataLength = Number(data["hydra:totalItems"]);
                 if (this.contactsPaginator !== undefined) {
-                    this.contactsPaginator.length = this.contactsLength;
+                    this.contactsPaginator.length = this.dataLength;
                 }
-                console.log('getPartnerProducts done');
             }
         );
     }
@@ -77,21 +66,13 @@ export class ContactListComponent implements OnInit {
         modalRefContact.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
                 modalRefContact.dismiss();
-                this.getContactsData();
+                this.getData();
             }
         });
     }
 
     navigateToContactDetails(element: any) {
         const contact: ContactJsonld = element as ContactJsonld;
-        this.router.navigate(['/contacts', this.apiConverter.extractId(contact.id)]);
-    }
-
-    contactsHandlePageEvent(e: PageEvent) {
-        this.contactsPageEvent = e;
-        this.contactsLength = e.length;
-        this.contactsPageIndex = e.pageIndex.valueOf();
-        this.contactsPageSize = e.pageSize.valueOf();
-        this.getContactsData();
+        this.router.navigate(['/contacts', this.apiHelperService.extractId(contact.id)]);
     }
 }

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

@@ -1,5 +1,5 @@
 <div class="spt-container">
-    <div class="card contacts-detail">
+    <div *ngIf="contact" class="card contacts-detail">
         <div class="card-body row pb-5">
             <div class="col-8">
                 <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
@@ -25,57 +25,8 @@
     </div>
 </div>
 <app-toggle #togglePosts [headline]="'basic.posts' | translate">
-    <div class="spt-container">
-        <div class="posts position-relative">
-            <button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{'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]="apiConverter.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>
-                    </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]="apiConverter.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>
-                    </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>
-            </div>
-            <mat-paginator *ngIf="posts.length > 0" class="rounded-1"
-                           [pageSizeOptions]="[10,20,30]"
-                           [length]="postsLength"
-                           (page)="postsHandlePageEvent($event)"
-                           [pageSize]="postsPageSize"
-                           [pageIndex]="postsPageIndex"
-                           showFirstLastButtons>
-            </mat-paginator>
-        </div>
-    </div>
+    <app-post-list *ngIf="contact" #postListComponent
+                   [partner]="partner"
+                   [contact]="contact"
+    ></app-post-list>
 </app-toggle>

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

@@ -1,5 +1,13 @@
 import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
-import {CommentJsonld, ContactJsonld, ContactService, PostJsonld, PostService} from "@app/core/api/v1";
+import {
+    CommentJsonld,
+    ContactJsonld,
+    ContactService,
+    PartnerJsonld,
+    PartnerService,
+    PostJsonld,
+    PostService
+} from "@app/core/api/v1";
 import {Subscription} from "rxjs";
 import {ActivatedRoute} from "@angular/router";
 import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
@@ -11,8 +19,10 @@ 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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-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";
 
 @Component({
     selector: 'app-contacts-detail',
@@ -20,166 +30,73 @@ import {constructorParametersDownlevelTransform} from "@angular/compiler-cli";
     styleUrl: './contacts-detail.component.scss'
 })
 export class ContactsDetailComponent implements OnInit, AfterViewInit {
-    @ViewChild(MatPaginator) postsPaginator: MatPaginator;
+    @ViewChild("togglePosts", { static: true }) togglePosts: ToggleComponent = new ToggleComponent();
+    @ViewChild("postListComponent", { static: false }) postsComponent!: PostListComponent;
 
     protected user: User | null;
 
-    protected id: string;
-    protected contact: ContactJsonld;
+    protected contactId!: string;
+    protected contact!: ContactJsonld;
     protected contactSub: Subscription;
-
-    protected postsSub: Subscription;
-    protected posts: Array<PostJsonld>;
-    protected postsDataSource;
-    protected postsLength: number;
-    protected postsPageEvent: PageEvent;
-    protected postsPageSize: number;
-    protected postsPageIndex: number;
+    protected partner!: PartnerJsonld;
+    protected partnerSub: Subscription;
     protected commentsVisibility: Map<string, boolean>;
-
     protected modalOptions: NgbModalOptions = {
         centered: true
     };
 
     constructor(
         private contactService: ContactService,
+        private partnerService: PartnerService,
         private accountService: AccountService,
         private route: ActivatedRoute,
-        private postService: PostService,
         private modalService: NgbModal,
-        protected apiConverter: ApiConverter
+        protected apiHelperService: ApiHelperService
     ) {
         this.user = this.accountService.userValue;
-
-        this.id = "";
-        this.contact = {} as ContactJsonld;
         this.contactSub = new Subscription();
-
-        this.postsSub = new Subscription();
-        this.posts = [];
-        this.postsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
-        this.postsDataSource = new MatTableDataSource<PostJsonld>(this.posts);
-        this.postsLength = 0;
-        this.postsPageEvent = new PageEvent();
-        this.postsPageSize = 10;
-        this.postsPageIndex = 0;
         this.commentsVisibility = new Map<string, boolean>();
+        this.partnerSub = new Subscription();
     }
 
     ngOnInit() {
+        // Get contact id from route url parameter
         this.route.params.subscribe(params => {
-            this.id = params['id'];
+            this.contactId = params['id'];
         });
         this.getContactData();
-        this.getPostsData();
     }
 
     ngAfterViewInit() {
-        this.postsDataSource.paginator = this.postsPaginator;
     }
 
     getContactData() {
         // switch over this.dataType (customers, etc.)
         this.contactSub = this.contactService.contactsIdGet(
-            this.id
+            this.contactId
         ).subscribe(
             data => {
                 this.contact = data;
+                this.getPartnerData()
             }
         );
     }
 
-    getPostsData() {
-        this.postsSub = this.postService.postsGetCollection(
-            this.postsPageIndex + 1,
-            this.postsPageSize,
-            this.contact.partner + '',
-            [],
-            this.id,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            false
+    getPartnerData() {
+        this.partnerSub = this.partnerService.partnersIdGet(
+            this.apiHelperService.extractId(this.contact.partner)
         ).subscribe(
             data => {
-                this.posts = data["hydra:member"];
-                this.postsLength = Number(data["hydra:totalItems"]);
-                this.posts.forEach(posts => {
-                    if (posts.id) {
-                        this.commentsVisibility.set(posts.id, false);
-                    }
-                });
-            }
-        );
-    }
-
-    postsHandlePageEvent(e: PageEvent) {
-        this.postsPageEvent = e;
-        this.postsLength = e.length;
-        this.postsPageIndex = e.pageIndex.valueOf();
-        this.postsPageSize = e.pageSize.valueOf();
-        this.getPostsData();
-    }
-
-    openModalNewPosting() {
-        const modalRefPosting = this.modalService.open(NewPostComponent, this.modalOptions);
-        let posting: PostJsonld = {} as PostJsonld;
-        posting.contact = this.contact.id ?? null;
-        posting.partner = this.contact.partner ?? null;
-        // TODO: REAL PRODUCT
-        posting.product = "/api/products/101";
-        modalRefPosting.componentInstance.posting = posting;
-        modalRefPosting.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefPosting.dismiss();
-                this.getPostsData();
-            }
-        });
-    }
-
-    openModalNewComment(post: PostJsonld) {
-        const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
-        let comment: CommentJsonld = {} as CommentJsonld;
-        comment.post = post.id ?? null;
-        modalRefComment.componentInstance.comment = comment;
-        modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefComment.dismiss();
-                this.getPostsData();
-            }
-        });
-    }
-
-    openModalEditPosting(post: PostJsonld) {
-        const modalRefPostingEdit = this.modalService.open(NewPostComponent, this.modalOptions);
-        modalRefPostingEdit.componentInstance.posting = post;
-        modalRefPostingEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefPostingEdit.dismiss();
-                this.getPostsData();
+                this.partner = data;
             }
-        });
-    }
-
-    openModalEditComment(comment: CommentJsonld) {
-        const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
-        modalRefComment.componentInstance.comment = comment;
-        modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefComment.dismiss();
-                this.getPostsData();
-            }
-        });
+        )
     }
 
     openModalEditContact() {
         const modalRefContact = this.modalService.open(NewContactComponent, this.modalOptions);
         modalRefContact.componentInstance.contact = this.contact;
         if (this.contact.birthday !== undefined) {
-            modalRefContact.componentInstance.birthdayValue = this.apiConverter.convertDate(this.contact.birthday);
+            modalRefContact.componentInstance.birthdayValue = this.apiHelperService.convertDate(this.contact.birthday);
         }
         modalRefContact.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
@@ -188,11 +105,4 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
             }
         });
     }
-
-    showComments(post: PostJsonld) {
-        if (post.id) {
-            const currentVisibility = this.commentsVisibility.get(post.id);
-            this.commentsVisibility.set(post.id, !currentVisibility);
-        }
-    }
 }

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

@@ -6,7 +6,7 @@ import {Subscription} from "rxjs";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {TranslateService} from "@ngx-translate/core";
-import {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-helper.service";
 
 
 @Component({
@@ -29,7 +29,7 @@ export class NewContactComponent implements OnInit {
         private contactService: ContactService,
         private mediaObjectService: MediaObjectService,
         private translateService: TranslateService,
-        protected apiConverter: ApiConverter,
+        protected apiHelperService: ApiHelperService,
     ) {
         this.contactForm = contactForm;
         this.selectedImage = null;
@@ -85,7 +85,7 @@ export class NewContactComponent implements OnInit {
             } else {
                 // Edit contact
                 this.contactSub = this.contactService.contactsIdPatch(
-                    this.apiConverter.extractId(this.contact.id),
+                    this.apiHelperService.extractId(this.contact.id),
                     this.contactForm.value as ContactJsonld
                 ).subscribe(
                     data => {

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

@@ -12,7 +12,7 @@ import {NewDocumentComponent} from "@app/_views/documents/new-document/new-docum
 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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-helper.service";
 
 @Component({
     selector: 'app-documents',
@@ -43,7 +43,7 @@ export class DocumentsComponent {
         private router: Router,
         private modalService: NgbModal,
         private documentService: DocumentService,
-        protected apiConverter: ApiConverter
+        protected apiHelperService: ApiHelperService
     ) {
         this.sort = new MatSort();
         this.displayedColumns = ['pos', 'name', 'description', 'partnerName', 'productName', 'createdAt', 'createdByName', 'download', 'edit'];

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

@@ -13,24 +13,32 @@
         </div>
 
         <div class="mb-3">
-            <label for="partner" class="form-label">{{ 'form.partner' | translate }}:</label>
-            <input type="text" class="form-control" id="partner" [ngbTypeahead]="searchPartners"
-                   [inputFormatter]="formatter" [value]="documentForm.get('partnerName')?.value"
-                   [resultFormatter]="formatter" [editable]="false" (selectItem)="onPartnerSelect($event)"/>
+            <app-search-input #partnerSearchInput
+                      [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">
-            <label for="product" class="form-label">{{ 'form.product' | translate }}:</label>
-            <input type="text" class="form-control" id="product" [ngbTypeahead]="searchProducts"
-                   [inputFormatter]="formatter" [value]="documentForm.get('productName')?.value"
-                   [resultFormatter]="formatter" [editable]="false" (selectItem)="onProductSelect($event)"/>
+            <app-search-input #productSearchInput
+                              [formId]="'product'"
+                              [formLabelLangKey]="'form.product'"
+                              [dataField]="'productName'"
+                              [documentForm]="documentForm"
+                              [documentFormField]="'productName'"
+                              [fetchFunction]="fetchProducts"
+            ></app-search-input>
             <input type="hidden" formControlName="product"/>
         </div>
 
         <div class="mb-3" *ngIf="documentForm.get('documentUrl')?.value === null">
-            <label for="image" class="form-label">{{ 'form.upload-image' | translate }}:</label>
-            <input type="file" class="form-control" id="image" (change)="onFileSelected($event)" accept="image/*"/>
+            <label for="image" class="form-label">{{ 'form.upload-file' | translate }}:</label>
+            <input type="file" class="form-control" id="image" (change)="onFileSelected($event)"/>
         </div>
 
         <div class="mb-3" *ngIf="documentForm.get('documentUrl')?.value !== null">

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

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import {
     DocumentJsonld, DocumentObjectService,
     DocumentService, MediaObjectService, PartnerJsonld, PartnerService, ProductService
@@ -9,8 +9,9 @@ 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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-helper.service";
 import {filter, map} from "rxjs/operators";
+import {SearchInputComponent} from "@app/_components/search-input/search-input.component";
 
 @Component({
     selector: 'app-new-document',
@@ -21,6 +22,9 @@ export class NewDocumentComponent implements OnInit {
     @Input() public document!: DocumentJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
 
+    @ViewChild('partnerSearchInput', { static: false }) $partnerSearchInput!: SearchInputComponent;
+    @ViewChild('productSearchInput', { static: false }) $productSearchInput!: SearchInputComponent;
+
     protected documentForm: FormGroup;
     protected documentSub: Subscription;
 
@@ -35,7 +39,7 @@ export class NewDocumentComponent implements OnInit {
         private translateService: TranslateService,
         private partnerService: PartnerService,
         private productService: ProductService,
-        protected apiConverter: ApiConverter,
+        protected apiHelperService: ApiHelperService,
     ) {
         this.documentForm = documentForm;
         this.documentSub = new Subscription();
@@ -47,51 +51,20 @@ export class NewDocumentComponent implements OnInit {
         this.documentForm = FormGroupInitializer.initFormGroup(this.documentForm, this.document);
     }
 
-    protected searchPartners: OperatorFunction<string, readonly {
-        id: any;
-        name: any
-    }[]> = (text$: Observable<string>) =>
-        text$.pipe(
-            debounceTime(200),
-            distinctUntilChanged(),
-            filter((term) => term.length >= 2),
-            switchMap((term) => this.fetchPartners(term)),
-            map((partners) => partners.slice(0, 10)),
-        );
-
-    protected searchProducts: OperatorFunction<string, readonly {
-        id: any;
-        name: any
-    }[]> = (text$: Observable<string>) =>
-        text$.pipe(
-            debounceTime(200),
-            distinctUntilChanged(),
-            filter((term) => term.length >= 2),
-            switchMap((term) => this.fetchProducts(term)),
-            map((products) => products.slice(0, 10)),
-        );
-
-    protected fetchPartners(term: string): Observable<{ id: any; name: any }[]> {
+    fetchPartners = (term: string): Observable<{ id: any; name: any }[]> => {
         return this.partnerService.partnersGetCollection(1, 50, undefined, undefined, term).pipe(
             map((response) => response['hydra:member'].map(partner => ({id: partner.id, name: partner.name}))),
         );
     }
 
-    protected fetchProducts(term: string): Observable<{ id: any; name: any }[]> {
+    fetchProducts = (term: string): Observable<{ id: any; name: any }[]> => {
         return this.productService.productsGetCollection(1, 50, term).pipe(
             map((response) => response['hydra:member'].map(product => ({id: product.id, name: product.name}))),
         );
     }
 
-    protected onPartnerSelect(selectedItem: any): void {
-        this.documentForm.get('partner')?.setValue(selectedItem.item.id);
-    }
-
-    protected onProductSelect(selectedItem: any): void {
-        this.documentForm.get('product')?.setValue(selectedItem.item.id);
-    }
-
     onSubmit() {
+        console.log(this.documentForm);
         if (this.selectedFile !== null) {
             this.documentObjectSub = this.documentObjectService.documentObjectsPost(
                 this.selectedFile
@@ -121,7 +94,7 @@ export class NewDocumentComponent implements OnInit {
             } else {
                 // Edit contact
                 this.documentSub = this.documentService.documentsIdPatch(
-                    this.apiConverter.extractId(this.document.id),
+                    this.apiHelperService.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}}/{{apiConverter.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
+                            <h3 class="m-0" *ngIf="task.partner"><a href="/{{task.partnerType}}/{{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]="apiConverter.getSafeLongtext(task.description)"></p>
+                                <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>

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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-helper.service";
 
 @Component({
     templateUrl: 'home.component.html',
@@ -36,8 +36,6 @@ export class HomeComponent implements OnInit, AfterViewInit {
 
     protected userIsAdmin: boolean;
 
-    protected readonly ApiConverter = ApiConverter;
-
     protected tasksSub: Subscription;
     protected tasks: Array<TaskJsonld>;
     protected tasksDataSource;
@@ -58,7 +56,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
         private postService: PostService,
         private userService: UserService,
         private taskService: TaskService,
-        protected apiConverter: ApiConverter
+        protected apiHelperService: ApiHelperService
     ) {
         this.user = this.accountService.userValue;
         // this.accountService.user.subscribe(x => this.user = x);
@@ -159,7 +157,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
     openModalEditTask(task: TaskJsonld) {
         const modalRefTaskEdit = this.modalService.open(NewTaskComponent, this.modalOptions);
         modalRefTaskEdit.componentInstance.task = task;
-        modalRefTaskEdit.componentInstance.dueAtValue = this.apiConverter.convertDate(task.dueAt);
+        modalRefTaskEdit.componentInstance.dueAtValue = this.apiHelperService.convertDate(task.dueAt);
         modalRefTaskEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
                 modalRefTaskEdit.dismiss();

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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-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 apiConverter: ApiConverter,
+        protected apiHelperService: ApiHelperService,
     ) {
         this.partnerForm = partnerForm;
         this.selectedImage = null;
@@ -79,7 +79,7 @@ export class NewPartnerComponent implements OnInit {
             } else {
                 // Edit contact
                 this.partnerSub = this.partnerService.partnersIdPatch(
-                    this.apiConverter.extractId(this.partner.id),
+                    this.apiHelperService.extractId(this.partner.id),
                     this.partnerForm.value as PartnerJsonld
                 ).subscribe(
                     data => {

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

@@ -42,82 +42,33 @@
         </div>
         <div class="card-body row" *ngIf="partner.description">
             <div class="col-12">
-                <p [innerHTML]="apiConverter.getSafeLongtext(partner.description)"></p>
+                <p [innerHTML]="apiHelperService.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.apiConverter.extractId(partnerProduct.product)}}">{{partnerProduct.productName}}</a></li>
+                    <li><a href="/products/{{this.apiHelperService.extractId(partnerProduct.product)}}">{{partnerProduct.productName}}</a></li>
                 </ul>
             </div>
         </div>
     </div>
 </div>
 <app-toggle #toggleContacts [headline]="'basic.contacts' | translate">
-    <app-contact-list *ngIf="partner" #contactsComponent [partner]="partner"></app-contact-list>
+    <app-contact-list *ngIf="partner" #contactListComponent
+                      [partner]="partner">
+    </app-contact-list>
 </app-toggle>
 
 <app-toggle #toggleTasks [headline]="'basic.tasks' | translate">
-    <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.apiConverter.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]="apiConverter.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 *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>
-                    </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>
-            </div>
-            <mat-paginator *ngIf="tasks.length > 0" class="rounded-1"
-                           [pageSizeOptions]="[10,20,30]"
-                           [length]="tasksLength"
-                           (page)="tasksHandlePageEvent($event)"
-                           [pageSize]="tasksPageSize"
-                           [pageIndex]="tasksPageIndex"
-                           showFirstLastButtons>
-            </mat-paginator>
-        </div>
-    </div>
+    <app-task-list *ngIf="partner" #taskListComponent
+                      [partner]="partner">
+    </app-task-list>
 </app-toggle>
 <app-toggle #togglePosts [headline]="'basic.posts' | translate">
-    <app-post-list *ngIf="partner" #postsComponent [partner]="partner" [existsContact]="false" [existsSale]="false"></app-post-list>
+    <app-post-list *ngIf="partner" #postListComponent
+                   [partner]="partner"
+                   [existsContact]="false"
+                   [existsSale]="false">
+    </app-post-list>
 </app-toggle>

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

@@ -1,25 +1,22 @@
-import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {ActivatedRoute, Router} from "@angular/router";
 import {
     PartnerFollowJsonld, PartnerFollowService,
     PartnerJsonld, PartnerProductJsonld, PartnerProductService,
-    PartnerService, TaskJsonld, TaskNoteJsonld, TaskService
+    PartnerService
 } from "@app/core/api/v1";
 import {Subscription} from "rxjs";
 import {environment} from "@environments/environment";
-import {ApiConverter} from "@app/_helpers/api.converter";
-import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
-import {MatTableDataSource} from "@angular/material/table";
-import {NewTaskComponent} from "@app/_views/tasks/new-task/new-task.component";
+import {ApiHelperService} from "@app/_helpers/api-helper.service";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {AccountService} from "@app/_services";
 import {User} from "@app/_models";
 import {NewPartnerComponent} from "@app/_views/partners/new-partner/new-partner.component";
-import {NewTaskNoteComponent} from "@app/_views/tasks/new-task-note/new-task-note.component";
 import {ToggleComponent} from "@app/_components/toggle/toggle.component";
 import {PostListComponent} from "@app/_views/posts/post-list/post-list.component";
 import {ContactListComponent} from "@app/_views/contacts/contact-list/contact-list.component";
+import {TaskListComponent} from "@app/_views/tasks/task-list/task-list.component";
 
 @Component({
     selector: 'app-partners-detail',
@@ -28,39 +25,23 @@ import {ContactListComponent} from "@app/_views/contacts/contact-list/contact-li
 })
 export class PartnersDetailComponent implements OnInit, AfterViewInit {
     @ViewChild("toggleContacts", { static: true }) toggleContacts: ToggleComponent = new ToggleComponent();
-    @ViewChild("contactsComponent", { static: false }) contactsComponent!: ContactListComponent;
-
+    @ViewChild("contactListComponent", { static: false }) contactsComponent!: ContactListComponent;
     @ViewChild("toggleTasks", { static: true }) toggleTasks: ToggleComponent = new ToggleComponent();
-
+    @ViewChild("taskListComponent", { static: false }) taskListComponent!: TaskListComponent;
     @ViewChild("togglePosts", { static: true }) togglePosts: ToggleComponent = new ToggleComponent();
-    @ViewChild("postsComponent", { static: false }) postsComponent!: PostListComponent;
-
-    @ViewChild(MatPaginator) tasksPaginator: MatPaginator;
+    @ViewChild("postListComponent", { static: false }) postsComponent!: PostListComponent;
 
     protected user: User | null;
 
     protected readonly environment = environment;
-    protected id: string;
+    protected partnerId!: string;
 
     protected partnerDetailSub: Subscription;
     protected partner!: PartnerJsonld;
-
     protected partnerProductSub: Subscription;
     protected partnerProducts: Array<PartnerProductJsonld>;
-
     protected partnerFollowSub: Subscription;
     protected partnerFollow: PartnerFollowJsonld | null;
-
-    protected tasksSub: Subscription;
-    protected tasks: Array<TaskJsonld>;
-    protected tasksDataSource;
-    protected tasksLength: number;
-    protected tasksPageEvent: PageEvent;
-    protected tasksPageSize: number;
-    protected tasksPageIndex: number;
-
-    protected taskNotesVisibility: Map<string, boolean>;
-
     protected modalOptions: NgbModalOptions = {
         centered: true
     };
@@ -73,12 +54,9 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         private partnerService: PartnerService,
         private partnerProductService: PartnerProductService,
         private partnerFollowService: PartnerFollowService,
-        private taskService: TaskService,
-        protected apiConverter: ApiConverter
+        protected apiHelperService: ApiHelperService
     ) {
-        this.id = "";
         this.partnerDetailSub = new Subscription();
-        //this.partner = {} as PartnerJsonld;
 
         this.partnerProductSub = new Subscription();
         this.partnerProducts = [];
@@ -87,42 +65,26 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         this.partnerFollow = null;
 
         this.user = this.accountService.userValue;
-
-        this.tasksSub = new Subscription();
-        this.tasks = [];
-        this.tasksPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
-        this.tasksDataSource = new MatTableDataSource<TaskJsonld>(this.tasks);
-        this.tasksLength = 0;
-        this.tasksPageEvent = new PageEvent();
-        this.tasksPageSize = 10;
-        this.tasksPageIndex = 0;
-        this.taskNotesVisibility = new Map<string, boolean>();
     }
 
     ngOnInit() {
         this.route.params.subscribe(params => {
-            this.id = params['id'];
+            this.partnerId = params['id'];
         });
         this.getPartnerData();
         this.getPartnerProducts();
-        this.getTasksData();
         this.getPartnerFollowedStatus();
-
-        console.log('ng init done');
     }
 
     ngAfterViewInit() {
-        console.log('ng after view init');
-        this.tasksDataSource.paginator = this.tasksPaginator;
     }
 
     getPartnerData() {
         this.partnerDetailSub = this.partnerService.partnersIdGet(
-            this.id
+            this.partnerId
         ).subscribe(
             data => {
                 this.partner = data;
-                console.log('getPartnerData done');
             }
         );
     }
@@ -131,96 +93,14 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         this.partnerProductSub = this.partnerProductService.partnerProductsGetCollection(
             1,
             50,
-            this.id
+            this.partnerId
         ).subscribe(
             data => {
                 this.partnerProducts = data["hydra:member"];
-                console.log('getPartnerProducts done');
-            }
-        );
-    }
-
-    getTasksData() {
-        this.tasksSub = this.taskService.tasksGetCollection(
-            this.tasksPageIndex + 1,
-            this.tasksPageSize,
-            undefined,
-            undefined,
-            this.id
-        ).subscribe(
-            data => {
-                this.tasks = data["hydra:member"];
-                console.log(this.tasks);
-                this.tasksLength = Number(data["hydra:totalItems"]);
-                this.tasks.forEach(task => {
-                    if (task.id) {
-                        this.taskNotesVisibility.set(task.id, false);
-                    }
-                });
-                console.log('getTasksData done');
             }
         );
     }
 
-    tasksHandlePageEvent(e: PageEvent) {
-        this.tasksPageEvent = e;
-        this.tasksLength = e.length;
-        this.tasksPageIndex = e.pageIndex.valueOf();
-        this.tasksPageSize = e.pageSize.valueOf();
-        this.getTasksData();
-    }
-
-
-    openModalNewTask() {
-        const modalRefTask = this.modalService.open(NewTaskComponent, this.modalOptions);
-        let task: TaskJsonld = {} as TaskJsonld;
-        task.partner = this.partner.id ?? null;
-        task.completed = false;
-        modalRefTask.componentInstance.task = task;
-        modalRefTask.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefTask.dismiss();
-                this.getTasksData();
-            }
-        });
-    }
-
-    openModalNewTaskNote(task: TaskJsonld) {
-        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
-        let taskNote: TaskNoteJsonld = {} as TaskNoteJsonld;
-        taskNote.task = task.id ?? null;
-        modalRefTaskNote.componentInstance.taskNote = taskNote;
-        modalRefTaskNote.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefTaskNote.dismiss();
-                this.getTasksData();
-            }
-        });
-    }
-
-    openModalEditTask(task: TaskJsonld) {
-        const modalRefTaskEdit = this.modalService.open(NewTaskComponent, this.modalOptions);
-        modalRefTaskEdit.componentInstance.task = task;
-        modalRefTaskEdit.componentInstance.dueAtValue = this.apiConverter.convertDate(task.dueAt);
-        modalRefTaskEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefTaskEdit.dismiss();
-                this.getTasksData();
-            }
-        });
-    }
-
-    openModalEditTaskNote(taskNote: TaskNoteJsonld) {
-        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
-        modalRefTaskNote.componentInstance.taskNote = taskNote;
-        modalRefTaskNote.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefTaskNote.dismiss();
-                this.getTasksData();
-            }
-        });
-    }
-
     openModalEditPartner() {
         const modalRef = this.modalService.open(NewPartnerComponent, this.modalOptions);
         modalRef.componentInstance.partner = this.partner;
@@ -232,18 +112,11 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         });
     }
 
-    showTaskNotes(task: TaskJsonld) {
-        if (task.id) {
-            const currentVisibility = this.taskNotesVisibility.get(task.id);
-            this.taskNotesVisibility.set(task.id, !currentVisibility);
-        }
-    }
-
     getPartnerFollowedStatus() {
         this.partnerFollowSub = this.partnerFollowService.partnerFollowsGetCollection(
             1,
             50,
-            this.id,
+            this.partnerId,
             undefined,
             this.user?.id
         ).subscribe(
@@ -271,7 +144,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
             );
         } else {
             this.partnerFollowSub = this.partnerFollowService.partnerFollowsIdDelete(
-                this.apiConverter.extractId(this.partnerFollow.id)
+                this.apiHelperService.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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-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 apiConverter: ApiConverter,
+        protected apiHelperService: ApiHelperService,
     ) {
         this.partnersSort = new MatSort();
         this.partnersPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
@@ -153,7 +153,7 @@ export class PartnersComponent implements OnInit, AfterViewInit {
 
     navigateToPartnerDetails(element: any) {
         const partner: PartnerJsonld = element as PartnerJsonld;
-        this.router.navigate(['/' + partner.partnerType, this.apiConverter.extractId(partner.id)]);
+        this.router.navigate(['/' + partner.partnerType, this.apiHelperService.extractId(partner.id)]);
     }
 
     openModalNewPartner() {

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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-helper.service";
 
 @Component({
     selector: 'app-new-comment',
@@ -21,7 +21,7 @@ export class NewCommentComponent implements OnInit {
 
     constructor(
         private commentService: CommentService,
-        protected apiConverter: ApiConverter,
+        protected apiHelperService: ApiHelperService,
     ) {
         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.apiConverter.extractId(this.comment.id),
+                    this.apiHelperService.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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-helper.service";
 import {Subscription} from "rxjs";
 
 @Component({
@@ -21,7 +21,7 @@ export class NewPostComponent implements OnInit {
 
     constructor(
         private postService: PostService,
-        protected apiConverter: ApiConverter,
+        protected apiHelperService: ApiHelperService,
     ) {
         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.apiConverter.extractId(this.posting.id),
+                    this.apiHelperService.extractId(this.posting.id),
                     this.postForm.value as PostJsonld
                 ).subscribe(
                     data => {

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

@@ -1,6 +1,6 @@
 <div class="spt-container">
     <div class="posts position-relative">
-        <button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button>
+        <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">
@@ -10,11 +10,11 @@
                     </div>
                     <div>
                         <h3>{{ post.headline }}</h3>
-                        <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
+                        <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)="openModalEditPosting(post)"></span>
+                          data-action="edit" (click)="openModalEditPost(post)"></span>
                 </div>
             </div>
             <div *ngIf="post.id && commentsVisibility.get(post.id)">
@@ -25,7 +25,7 @@
                             <p>{{ comment.ownerName }}</p>
                         </div>
                         <div>
-                            <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
+                            <p class="m-0" [innerHTML]="apiHelperService.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>
@@ -45,7 +45,7 @@
                       (click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>
             </div>
         </div>
-        <mat-paginator *ngIf="posts.length > 0" class="rounded-1"
+        <mat-paginator *ngIf="dataLength > 0" class="rounded-1"
                        [pageSizeOptions]="this.pageSizeOptions"
                        [length]="dataLength"
                        (page)="handlePageEvent($event)"

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

@@ -9,12 +9,12 @@ import {
     PostService,
     SaleJsonld, UserJsonld
 } from "@app/core/api/v1";
-import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
+import {MatPaginator, MatPaginatorIntl} from "@angular/material/paginator";
 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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-helper.service";
 import {NewCommentComponent} from "@app/_views/posts/new-comment/new-comment.component";
 import {ListComponent} from "@app/_components/list/list.component";
 
@@ -39,21 +39,12 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
     protected partnerProductsSub: Subscription;
     protected partnerProducts: Array<PartnerProductJsonld>;
     protected postsDataSource;
-    protected postsLength: number;
-    protected postsPageEvent: PageEvent;
-    protected postsPageSize: number;
-    protected postsPageIndex: number;
     protected commentsVisibility: Map<string, boolean>;
 
-    protected modalOptions: NgbModalOptions = {
-        centered: true
-    };
-
     constructor(
         private postService: PostService,
-        private partnerProductService: PartnerProductService,
         private modalService: NgbModal,
-        protected apiConverter: ApiConverter
+        protected apiHelperService: ApiHelperService
     ) {
         super();
         this.postsSub = new Subscription();
@@ -62,10 +53,6 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
         this.partnerProducts = [];
         this.postsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
         this.postsDataSource = new MatTableDataSource<PostJsonld>(this.posts);
-        this.postsLength = 0;
-        this.postsPageEvent = new PageEvent();
-        this.postsPageSize = 10;
-        this.postsPageIndex = 0;
         this.commentsVisibility = new Map<string, boolean>();
     }
 
@@ -79,8 +66,8 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
 
     override getData() {
         this.postsSub = this.postService.postsGetCollection(
-            this.postsPageIndex + 1,
-            this.postsPageSize,
+            this.pageIndex + 1,
+            this.pageSize,
             this.partner !== undefined ? this.partner.id : undefined,
             undefined,
             this.contact !== undefined ? this.contact.id : undefined,
@@ -94,7 +81,7 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
         ).subscribe(
             data => {
                 this.posts = data["hydra:member"];
-                this.postsLength = Number(data["hydra:totalItems"]);
+                this.dataLength = Number(data["hydra:totalItems"]);
                 this.posts.forEach(posts => {
                     if (posts.id) {
                         this.commentsVisibility.set(posts.id, false);
@@ -111,7 +98,7 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
         }
     }
 
-    openModalNewPosting() {
+    openModalNewPost() {
         const modalRefPosting = this.modalService.open(NewPostComponent, this.modalOptions);
         let posting: PostJsonld = {} as PostJsonld;
         posting.partner = this.partner.id ?? null;
@@ -124,7 +111,7 @@ export class PostListComponent extends ListComponent implements OnInit, AfterVie
         });
     }
 
-    openModalEditPosting(post: PostJsonld) {
+    openModalEditPost(post: PostJsonld) {
         const modalRefPostingEdit = this.modalService.open(NewPostComponent, this.modalOptions);
         modalRefPostingEdit.componentInstance.posting = post;
         modalRefPostingEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {

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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-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 apiConverter: ApiConverter,
+        protected apiHelperService: ApiHelperService,
     ) {
         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.apiConverter.extractId(this.product.id),
+                    this.apiHelperService.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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-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 apiConverter: ApiConverter,
+        protected apiHelperService: ApiHelperService,
     ) {
         this.id = "";
         this.user = this.accountService.userValue;
@@ -105,7 +105,7 @@ export class ProductsDetailComponent implements OnInit, AfterViewInit {
             );
         } else {
             this.userProductSub = this.userProductService.userProductsIdDelete(
-                this.apiConverter.extractId(this.userProduct.id)
+                this.apiHelperService.extractId(this.userProduct.id)
             ).subscribe(
                 data => {
                     this.userProduct = null;

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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-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 apiConverter: ApiConverter,
+        protected apiHelperService: ApiHelperService,
     ) {
         this.sort = new MatSort();
         this.displayedColumns = ['pos', 'image', 'name', 'storage', 'number'];
@@ -119,7 +119,7 @@ export class ProductsComponent implements OnInit, AfterViewInit {
 
     navigateToProductDetails(element: any) {
         const product: ProductJsonld = element as ProductJsonld;
-        this.router.navigate(['/products', this.apiConverter.extractId(product.id)]);
+        this.router.navigate(['/products', this.apiHelperService.extractId(product.id)]);
     }
 
     openModalNewProduct() {

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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-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 apiConverter: ApiConverter
+        protected apiHelperService: ApiHelperService
     ) {
         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.apiConverter.extractId(user.id)
+                this.apiHelperService.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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-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 apiConverter: ApiConverter,
+        protected apiHelperService: ApiHelperService,
     ) {
         this.saleForm = saleForm;
 
@@ -113,7 +113,7 @@ export class NewSaleComponent implements OnInit {
             } else {
                 // Edit sale
                 this.saleSub = this.saleService.salesIdPatch(
-                    this.apiConverter.extractId(this.sale.id),
+                    this.apiHelperService.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]="apiConverter.getSafeLongtext(sale.comment)"></dd>
+                    <dd *ngIf="sale.comment" [innerHTML]="apiHelperService.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]="apiConverter.getSafeLongtext(post.message)"></p>
+                            <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)="openModalEditPosting(post)"></span>
@@ -50,7 +50,7 @@
                                 <p>{{ comment.ownerName }}</p>
                             </div>
                             <div>
-                                <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
+                                <p class="m-0" [innerHTML]="apiHelperService.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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-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 apiConverter: ApiConverter
+      protected apiHelperService: ApiHelperService
   ) {
     this.user = this.accountService.userValue;
 

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', apiConverter.extractId(element.partner)]">{{ element.partnerName }}</a>
+                <a [routerLink]="['/customer', apiHelperService.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', apiConverter.extractId(element.product)]">{{ element.productName }}</a>
+                <a [routerLink]="['/products', apiHelperService.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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-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 apiConverter: ApiConverter,
+        protected apiHelperService: ApiHelperService,
     ) {
         this.sort = new MatSort();
         this.displayedColumns = ['pos', 'user', 'partner', 'product', 'turnover', 'profit', 'date', 'details'];
@@ -162,7 +162,7 @@ export class SalesComponent implements OnInit {
 
     navigateToSaleDetails(element: any) {
         const sale: SaleJsonld = element as SaleJsonld;
-        this.router.navigate(['/sales', this.apiConverter.extractId(sale.id)]);
+        this.router.navigate(['/sales', this.apiHelperService.extractId(sale.id)]);
     }
 
     openModalNewSale() {

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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-helper.service";
 import {taskNoteForm} from "@app/_forms/apiForms";
 
 @Component({
@@ -21,7 +21,7 @@ export class NewTaskNoteComponent {
 
   constructor(
       private taskNoteService: TaskNoteService,
-      protected apiConverter: ApiConverter
+      protected apiHelperService: ApiHelperService
   ) {
     this.taskNoteForm = taskNoteForm;
     this.taskNoteSub = new Subscription();
@@ -46,7 +46,7 @@ export class NewTaskNoteComponent {
       } else {
         // Edit taskNote
         this.taskNoteSub = this.taskNoteService.taskNotesIdPatch(
-            this.apiConverter.extractId(this.taskNote.id),
+            this.apiHelperService.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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-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 apiConverter: ApiConverter
+        protected apiHelperService: ApiHelperService
     ) {
         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.apiConverter.extractId(this.task.id),
+                    this.apiHelperService.extractId(this.task.id),
                     this.taskForm.value as TaskJsonld
                 ).subscribe(
                     data => {

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

@@ -0,0 +1,58 @@
+<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>
+                    </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>
+                        <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>
+        </div>
+        <mat-paginator *ngIf="dataLength > 0" class="rounded-1"
+                       [pageSizeOptions]="this.pageSizeOptions"
+                       [length]="dataLength"
+                       (page)="handlePageEvent($event)"
+                       [pageSize]="pageSize"
+                       [pageIndex]="pageIndex"
+                       showFirstLastButtons>
+        </mat-paginator>
+    </div>
+</div>

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

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

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

@@ -0,0 +1,134 @@
+import {AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
+import {ListComponent} from "@app/_components/list/list.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 {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {AccountService} from "@app/_services";
+import {User} from "@app/_models";
+
+@Component({
+  selector: 'app-task-list',
+  templateUrl: './task-list.component.html',
+  styleUrl: './task-list.component.scss'
+})
+export class TaskListComponent extends ListComponent implements OnInit, AfterViewInit {
+
+    @Input() public partner!: PartnerJsonld;
+
+    @ViewChild(MatPaginator) tasksPaginator: MatPaginator;
+
+    protected user: User | null;
+    protected tasksSub: Subscription;
+    protected tasks: Array<TaskJsonld>;
+    protected tasksDataSource;
+
+    protected taskNotesVisibility: Map<string, boolean>;
+
+    constructor(
+        private taskService: TaskService,
+        private accountService: AccountService,
+        private modalService: NgbModal,
+        protected apiHelperService: ApiHelperService,
+    ) {
+        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.taskNotesVisibility = new Map<string, boolean>();
+        this.user = this.accountService.userValue;
+    }
+
+    ngOnInit() {
+        this.getData();
+    }
+
+    ngAfterViewInit() {
+        this.tasksDataSource.paginator = this.tasksPaginator;
+    }
+
+    override getData() {
+        this.tasksSub = this.taskService.tasksGetCollection(
+            this.pageIndex + 1,
+            this.pageSize,
+            undefined,
+            undefined,
+            this.partner.id
+        ).subscribe(
+            data => {
+                this.tasks = data["hydra:member"];
+                console.log(this.tasks);
+                this.dataLength = Number(data["hydra:totalItems"]);
+                this.tasks.forEach(task => {
+                    if (task.id) {
+                        this.taskNotesVisibility.set(task.id, false);
+                    }
+                });
+            }
+        );
+    }
+
+    showTaskNotes(task: TaskJsonld) {
+        if (task.id) {
+            const currentVisibility = this.taskNotesVisibility.get(task.id);
+            this.taskNotesVisibility.set(task.id, !currentVisibility);
+        }
+    }
+
+    openModalNewTask() {
+        const modalRefTask = this.modalService.open(NewTaskComponent, this.modalOptions);
+        let task: TaskJsonld = {} as TaskJsonld;
+        task.partner = this.partner.id ?? null;
+        task.completed = false;
+        modalRefTask.componentInstance.task = task;
+        modalRefTask.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefTask.dismiss();
+                this.getData();
+            }
+        });
+    }
+
+    openModalNewTaskNote(task: TaskJsonld) {
+        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
+        let taskNote: TaskNoteJsonld = {} as TaskNoteJsonld;
+        taskNote.task = task.id ?? null;
+        modalRefTaskNote.componentInstance.taskNote = taskNote;
+        modalRefTaskNote.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefTaskNote.dismiss();
+                this.getData();
+            }
+        });
+    }
+
+    openModalEditTask(task: TaskJsonld) {
+        const modalRefTaskEdit = this.modalService.open(NewTaskComponent, this.modalOptions);
+        modalRefTaskEdit.componentInstance.task = task;
+        modalRefTaskEdit.componentInstance.dueAtValue = this.apiHelperService.convertDate(task.dueAt);
+        modalRefTaskEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefTaskEdit.dismiss();
+                this.getData();
+            }
+        });
+    }
+
+    openModalEditTaskNote(taskNote: TaskNoteJsonld) {
+        const modalRefTaskNote = this.modalService.open(NewTaskNoteComponent, this.modalOptions);
+        modalRefTaskNote.componentInstance.taskNote = taskNote;
+        modalRefTaskNote.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefTaskNote.dismiss();
+                this.getData();
+            }
+        });
+    }
+}

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.apiConverter.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
+                    <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]="apiConverter.getSafeLongtext(task.description)"></p>
+                        <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>
@@ -29,7 +29,7 @@
                             <p>{{ taskNote.ownerName }}</p>
                         </div>
                         <div>
-                            <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(taskNote.message)"></p>
+                            <p class="m-0" [innerHTML]="apiHelperService.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 {ApiConverter} from "@app/_helpers/api.converter";
+import {ApiHelperService} from "@app/_helpers/api-helper.service";
 import {Subscription} from "rxjs";
 import {TaskJsonld, TaskNoteJsonld, TaskService} from "@app/core/api/v1";
 import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
@@ -20,7 +20,6 @@ export class TasksComponent implements OnInit, AfterViewInit {
     @ViewChild(MatPaginator) tasksPaginator: MatPaginator;
 
     protected user: User | null;
-    protected readonly ApiConverter = ApiConverter;
 
     protected tasksSub: Subscription;
     protected tasks: Array<TaskJsonld>;
@@ -40,7 +39,7 @@ export class TasksComponent implements OnInit, AfterViewInit {
         private modalService: NgbModal,
         private accountService: AccountService,
         private taskService: TaskService,
-        protected apiConverter: ApiConverter
+        protected apiHelperService: ApiHelperService
     ) {
         this.user = this.accountService.userValue;
 
@@ -118,7 +117,7 @@ export class TasksComponent implements OnInit, AfterViewInit {
     openModalEditTask(task: TaskJsonld) {
         const modalRefTaskEdit = this.modalService.open(NewTaskComponent, this.modalOptions);
         modalRefTaskEdit.componentInstance.task = task;
-        modalRefTaskEdit.componentInstance.dueAtValue = this.apiConverter.convertDate(task.dueAt);
+        modalRefTaskEdit.componentInstance.dueAtValue = this.apiHelperService.convertDate(task.dueAt);
         modalRefTaskEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
                 modalRefTaskEdit.dismiss();

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

@@ -51,6 +51,8 @@ import { ProfileComponent } from './_views/profile/profile.component';
 import { PostListComponent } from './_views/posts/post-list/post-list.component';
 import {ContactListComponent} from "@app/_views/contacts/contact-list/contact-list.component";
 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';
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -123,6 +125,8 @@ export function HttpLoaderFactory(http: HttpClient) {
         PostListComponent,
         ContactListComponent,
         ContactListComponent,
+        TaskListComponent,
+        SearchInputComponent,
     ],
     providers: [
         {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},

matsen-tool/src/assets/i18n/de.json

@@ -94,6 +94,7 @@
     "country": "Land",
     "website": "Website",
     "upload-image": "Bild hochladen",
+    "upload-file": "Datei hochladen",
     "firstname": "Vorname",
     "lastname": "Nachname",
     "birthday": "Geburtstag",
@@ -114,7 +115,7 @@
     "product": "Produkt",
     "turnover": "Umsatz",
     "profit": "Gewinn",
-    "send": "Abschicken"
+    "send": "Speichern"
   },
   "sales":
   {