partner list

matsen-tool/src/app/_components/list/list-col-definition.ts

@@ -1,8 +1,10 @@
+import {ListColTypeAddress} from "@app/_components/list/list-col-type-address";
+
 export interface ListColDefinition {
     name: string,
     text: string,
     type: string,
-    field?: string,
+    field?: string | ListColTypeAddress,
     sortable?: boolean,
-    subResource?: string
+    subResource?: string,
 }

matsen-tool/src/app/_components/list/list-col-type-address.ts

@@ -0,0 +1,8 @@
+export interface ListColTypeAddress {
+    street: string,
+    streetNo: string,
+    zip: string,
+    city: string,
+    country: string,
+    _type: 'address',
+}

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

@@ -50,6 +50,12 @@
                                     {{ getElementValue(element, column) }}
                                 </span>
                             </ng-container>
+                            <ng-container *ngSwitchCase="COLUMN_TYPE_ADDRESS">
+                                <div [innerHTML]="getElementValue(element, column)"></div>
+                            </ng-container>
+                            <ng-container *ngSwitchCase="COLUMN_TYPE_TEXT_WEBSITE">
+                                <a href="{{ getElementValue(element, column) }}" target="_blank">{{ getElementValue(element, column) }}</a>
+                            </ng-container>
                             <ng-container *ngSwitchCase="COLUMN_TYPE_BTN_REMOVE">
                                 <span class="spt-icon-unassign" (click)="onRemoveItemFunction(element, column)"></span>
                             </ng-container>

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

@@ -3,6 +3,7 @@ import {MatSort, Sort} from "@angular/material/sort";
 import {PagingComponent} from "@app/_components/paging/paging.component";
 import {MatTableDataSource} from "@angular/material/table";
 import {ListColDefinition} from "@app/_components/list/list-col-definition";
+import {ListColTypeAddress} from "@app/_components/list/list-col-type-address";
 
 type GeneralDataSource = MatTableDataSource<any>;
 
@@ -19,31 +20,39 @@ export class ListComponent implements OnInit, AfterViewInit {
     @Input() public onNavigateToDetailsFunction!: Function;
     @Input() public onRemoveItemFunction!: Function;
     @Input() public searchable: boolean;
+    @Input() public showDetailButton: boolean;
+    @Input() public showPosition: boolean;
     @Input() public listColDefinitions!: ListColDefinition[];
     @Input() public hidePageSize: boolean;
     @ViewChild(MatSort) sort;
-    @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
+    @ViewChild("pagingComponent", { static: false }) protected pagingComponent!: PagingComponent;
 
+    public static COLUMN_TYPE_ADDRESS: string = 'address';
     public static COLUMN_TYPE_BTN_REMOVE: string = 'btn_remove';
     public static COLUMN_TYPE_DETAIL: string = 'detail';
     public static COLUMN_TYPE_IMAGE: string = 'image';
     public static COLUMN_TYPE_POSITION: string = 'position';
     public static COLUMN_TYPE_TEXT: string = 'text';
     public static COLUMN_TYPE_TEXT_LINKED: string = 'text_linked';
+    public static COLUMN_TYPE_TEXT_WEBSITE: string = 'website';
 
     public static validColumnTypes: string[] = [
+        ListComponent.COLUMN_TYPE_ADDRESS,
         ListComponent.COLUMN_TYPE_BTN_REMOVE,
         ListComponent.COLUMN_TYPE_DETAIL,
         ListComponent.COLUMN_TYPE_IMAGE,
         ListComponent.COLUMN_TYPE_POSITION,
         ListComponent.COLUMN_TYPE_TEXT,
         ListComponent.COLUMN_TYPE_TEXT_LINKED,
+        ListComponent.COLUMN_TYPE_TEXT_WEBSITE,
     ];
     get COLUMN_TYPE_DETAIL(): string { return ListComponent.COLUMN_TYPE_DETAIL; }
     get COLUMN_TYPE_POSITION(): string { return ListComponent.COLUMN_TYPE_POSITION; }
     get COLUMN_TYPE_IMAGE(): string { return ListComponent.COLUMN_TYPE_IMAGE; }
     get COLUMN_TYPE_TEXT(): string { return ListComponent.COLUMN_TYPE_TEXT; }
     get COLUMN_TYPE_TEXT_LINKED(): string { return ListComponent.COLUMN_TYPE_TEXT_LINKED; }
+    get COLUMN_TYPE_TEXT_WEBSITE(): string { return ListComponent.COLUMN_TYPE_TEXT_WEBSITE; }
+    get COLUMN_TYPE_ADDRESS(): string { return ListComponent.COLUMN_TYPE_ADDRESS; }
     get COLUMN_TYPE_BTN_REMOVE(): string { return ListComponent.COLUMN_TYPE_BTN_REMOVE; }
 
     protected displayedColumns!: string[];
@@ -51,12 +60,24 @@ export class ListComponent implements OnInit, AfterViewInit {
 
     constructor() {
         this.searchable = true;
+        this.showDetailButton = true;
+        this.showPosition = true;
         this.sort = new MatSort();
         this.hidePageSize = false;
     }
 
     ngOnInit(): void {
         this.displayedColumns = [];
+        let extraRows: ListColDefinition[] = [];
+        if (this.showDetailButton) {
+            extraRows.push(ListComponent.createColDefinition(
+                'detail', 'overview.details', ListComponent.COLUMN_TYPE_DETAIL));
+        }
+        if (this.showPosition) {
+            extraRows.push(ListComponent.createColDefinition(
+                'pos', 'overview.number', ListComponent.COLUMN_TYPE_POSITION));
+        }
+        this.listColDefinitions = extraRows.concat(this.listColDefinitions);
         this.listColDefinitions.forEach((value, index) => {
             this.displayedColumns.push(value.name);
         });
@@ -82,15 +103,23 @@ export class ListComponent implements OnInit, AfterViewInit {
     }
 
     onRowSelected(row: any, index: number) {
-        console.log('row selected');
-        console.log(row, index);
         this.selectedRowIndex = index;
     }
 
     getElementValue(element: any, column: ListColDefinition): any {
-        if (column.field) {
+        if (typeof column.field === 'string') {
             return column.subResource ? element[column.subResource][column.field] : element[column.field];
+        } else if (column.field && column.field._type === 'address') {
+            const field = column.field as ListColTypeAddress;
+            if (column.subResource) {
+                return `${element[column.subResource][field.street]} ${element[column.subResource][field.streetNo]}<br/> 
+                        ${element[column.subResource][field.zip]} ${element[column.subResource][field.city]}
+                        <br/> ${element[column.subResource][field.country]}`;
+            } else {
+                return `${element[field.street]} ${element[field.streetNo]}<br/> ${element[field.zip]} ${element[field.city]} <br/> ${element[field.country]}`;
+            }
         }
+        return null;
     }
 
     getElementImage(element: any, column: ListColDefinition): any {
@@ -116,13 +145,21 @@ export class ListComponent implements OnInit, AfterViewInit {
         return this.pagingComponent.getSearchValue();
     }
 
+    public getPageIndex() {
+        return this.pagingComponent.getPageIndex();
+    }
+
+    public getPageSize() {
+        return this.pagingComponent.getPageSize();
+    }
+
     public static createColDefinition(
         name: string,
         text: string,
         type: string,
-        field?: string,
+        field?: string | ListColTypeAddress,
         sortable?: boolean,
-        subResource?: string
+        subResource?: string,
     ): ListColDefinition {
         if (!this.validColumnTypes.includes(type)) {
             throw Error('invalid column type');
@@ -134,7 +171,24 @@ export class ListComponent implements OnInit, AfterViewInit {
         res.type = type;
         res.field = field;
         res.sortable = sortable;
-        res.subResource = subResource
+        res.subResource = subResource;
+        return res;
+    }
+
+    public static createColDefTypeAddress(
+        street: string,
+        streetNo: string,
+        zip: string,
+        city: string,
+        country: string,
+    ) {
+        let res: ListColTypeAddress = {} as ListColTypeAddress;
+        res.street = street;
+        res.streetNo = streetNo;
+        res.zip = zip;
+        res.city = city;
+        res.country = country;
+        res._type = 'address'
         return res;
     }
 }

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

@@ -88,8 +88,6 @@ export class SearchSelectComponent implements OnInit, AfterViewInit {
     }
 
     onRowSelected(row: any, index: number) {
-        console.log('row selected');
-        console.log(row, index);
         this.selectedRowIndex = index;
         this.documentForm.get(this.formId)?.setValue(row.id);
         if (this.displayedDataSubResource !== undefined) {

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

@@ -2,79 +2,12 @@
     <div *ngIf="!this.user" class="top-btn">
         <button class="btn btn-primary" (click)="openModalNewPartner()">+ {{ 'basic.new' | translate }} {{ partnerColumnHeadline }}</button>
     </div>
-    <app-paging #pagingComponent
-                [getDataFunction]="getData"
-                [dataSource]="dataSource"
-                [searchable]="true"
-    >
-        <div class="table-responsive">
-            <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
-
-                <ng-container matColumnDef="details">
-                    <th mat-header-cell *matHeaderCellDef>
-                        {{ 'overview.details' | translate }}
-                    </th>
-                    <td mat-cell class="spt-button-td" *matCellDef="let element">
-                            <span class="btn btn-primary spt-icon-details"
-                                  data-type="user-tool" data-action="edit" (click)="navigateToPartnerDetails(element)"></span>
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="pos">
-                    <th mat-header-cell *matHeaderCellDef>
-                        {{ 'overview.number' | translate }}
-                    </th>
-                    <td mat-cell
-                        *matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="image">
-                    <th mat-header-cell *matHeaderCellDef>
-                        {{ 'overview.logo' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element" class="btn-link" (click)="navigateToPartnerDetails(element)">
-                        <img *ngIf="element.logoUrl !== null && element.logoUrl !== undefined"
-                             src="{{ element.logoUrl }}" alt="" width="40" height="40"  />
-                        <img *ngIf="element.logoUrl === null || element.logoUrl === undefined"
-                             src="/assets/images/icons/dummy-company.png" width="40" height="40" alt="" />
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="name">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header
-                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ partnerColumnHeadline }}">
-                        {{ partnerColumnHeadline }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <span class="btn-link" (click)="navigateToPartnerDetails(element)">{{ element.name }}</span>
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="address">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header="address"
-                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.address' | translate }}">
-                        {{ 'overview.address' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}
-                        <br/>{{ element.zip }} {{ element.city }}
-                        <br/>{{ element.country }}
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="website">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header
-                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.website' | translate }}">
-                        {{ 'overview.website' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <a href="{{ element.website }}" target="_blank">{{ element.website }}</a>
-                    </td>
-                </ng-container>
-
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
-        </div>
-    </app-paging>
+    <app-list #listComponent
+              [dataSource]="getDataSource()"
+              [getDataFunction]="getData"
+              [onNavigateToDetailsFunction]="navigateToPartnerDetails"
+              [onSortFunction]="onSortChange"
+              [onRemoveItemFunction]="unassignPartner"
+              [listColDefinitions]="listColDefinitions"
+    ></app-list>
 </div>

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

@@ -4,21 +4,23 @@ import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {MatSort, Sort} from "@angular/material/sort";
 import {Subscription} from "rxjs";
 import {
+    PartnerFollowJsonld,
     PartnerFollowService,
-    PartnerJsonld,
+    PartnerJsonld, PartnerProductJsonld,
     PartnerProductService,
     PartnerService,
     ProductJsonld,
     UserJsonld
 } from "@app/core/api/v1";
 import {OrderFilter} from "@app/_models/orderFilter";
-import {ActivatedRoute, Router} from "@angular/router";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {TranslateService} from "@ngx-translate/core";
+import {Router} from "@angular/router";
 import {MatTableDataSource} from "@angular/material/table";
 import {NewPartnerComponent} from "@app/_views/partners/new-partner/new-partner.component";
-import {NewTaskComponent} from "@app/_views/tasks/new-task/new-task.component";
 import TypeEnum = PartnerJsonld.PartnerTypeEnum;
+import {ListColDefinition} from "@app/_components/list/list-col-definition";
+import {ListComponent} from "@app/_components/list/list.component";
+import {TranslateService} from "@ngx-translate/core";
+type GeneralDataSource = MatTableDataSource<any>;
 
 @Component({
   selector: 'app-partner-list',
@@ -31,50 +33,94 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
     @Input() public product!: ProductJsonld;
     @Input("partnerType") partnerType!: string;
     @ViewChild(MatSort) sort;
+    @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
     @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
 
     protected partnersSub: Subscription;
     protected partners: Array<PartnerJsonld>;
-    protected dataSource;
-
+    protected userPartners: Array<PartnerFollowJsonld>;
+    protected partnerProducts: Array<PartnerProductJsonld>;
+    protected dataSourcePartners;
+    protected dataSourceUserPartners;
+    protected dataSourcePartnerProducts;
     protected nameOrderAsc: OrderFilter;
     protected cityOrderAsc: OrderFilter;
     protected websiteOrderAsc: OrderFilter;
-
     protected partnerColumnHeadline: string;
-    protected displayedColumns!: string[];
+    protected listColDefinitions!: ListColDefinition[];
 
     constructor(
-        private partnerService: PartnerService,
-        private partnerFollowService: PartnerFollowService,
-        private partnerProductService: PartnerProductService,
-        private router: Router,
-        private translateService: TranslateService,
+        protected partnerService: PartnerService,
+        protected partnerFollowService: PartnerFollowService,
+        protected partnerProductService: PartnerProductService,
+        protected router: Router,
         protected appHelperService: AppHelperService,
+        protected translateService: TranslateService,
     ) {
-        this.displayedColumns = ['details', 'pos', 'image', 'name', 'address', 'website'];
         this.sort = new MatSort();
         this.partnersSub = new Subscription();
         this.partners = [];
-
+        this.userPartners = [];
+        this.partnerProducts = [];
+        this.dataSourcePartners = new MatTableDataSource<PartnerJsonld>(this.partners);
+        this.dataSourceUserPartners = new MatTableDataSource<PartnerFollowJsonld>(this.userPartners);
+        this.dataSourcePartnerProducts = new MatTableDataSource<PartnerProductJsonld>(this.partnerProducts);
         this.nameOrderAsc = OrderFilter.Asc;
         this.cityOrderAsc = OrderFilter.Asc;
         this.websiteOrderAsc = OrderFilter.Asc;
-
-        this.dataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
         this.partnerColumnHeadline = "";
     }
 
     ngOnInit() {
-        this.translateService.get('basic.' + this.partnerType + 'One').subscribe((translation: string) => {
-            this.partnerColumnHeadline = translation;
-        });
+        this.listColDefinitions = [];
+        if (this.user !== undefined || this.product !== undefined) {
+            this.listColDefinitions = [
+                ListComponent.createColDefinition(
+                    'image', 'overview.logo', ListComponent.COLUMN_TYPE_IMAGE, 'logoUrl', false, 'partner'),
+                ListComponent.createColDefinition(
+                    'name', 'basic.' + this.partnerType + 'One', ListComponent.COLUMN_TYPE_TEXT, 'name', true, 'partner'),
+                ListComponent.createColDefinition(
+                    'address', 'overview.address', ListComponent.COLUMN_TYPE_ADDRESS,
+                    ListComponent.createColDefTypeAddress(
+                        'street', 'streetNo', 'zip', 'city', 'country'
+                    ),
+                    false, 'partner'
+                ),
+                ListComponent.createColDefinition(
+                    'website', 'overview.website', ListComponent.COLUMN_TYPE_TEXT_WEBSITE, 'website', true, 'partner'),
+                ListComponent.createColDefinition(
+                    'unassign', 'overview.unassign', ListComponent.COLUMN_TYPE_BTN_REMOVE)
+            ]
+        } else {
+            this.listColDefinitions = [
+                ListComponent.createColDefinition(
+                    'image', 'overview.logo', ListComponent.COLUMN_TYPE_IMAGE, 'logoUrl'),
+                ListComponent.createColDefinition(
+                    'name', 'basic.' + this.partnerType + 'One', ListComponent.COLUMN_TYPE_TEXT, 'name'),
+                ListComponent.createColDefinition(
+                    'address', 'overview.address', ListComponent.COLUMN_TYPE_ADDRESS,
+                    ListComponent.createColDefTypeAddress(
+                        'street', 'streetNo', 'zip', 'city', 'country'
+                    )
+                ),
+                ListComponent.createColDefinition(
+                    'website', 'overview.website', ListComponent.COLUMN_TYPE_TEXT_WEBSITE, 'website'),
+            ]
+        }
     }
 
     ngAfterViewInit() {
-        this.dataSource.sort = this.sort;
-        this.dataSource.paginator = this.pagingComponent.paginator;
-        this.pagingComponent.getData();
+        this.listComponent.getData();
+    }
+
+    getDataSource(): GeneralDataSource {
+        if (this.user !== undefined) {
+            return this.dataSourceUserPartners;
+        } else if (this.product !== undefined) {
+            return this.dataSourcePartnerProducts;
+        } else {
+            return this.dataSourcePartners;
+        }
     }
 
     getData = (searchValue = undefined) => {
@@ -89,8 +135,8 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
 
     getPartnerData = (searchValue = undefined) => {
         this.partnersSub = this.partnerService.partnersGetCollection(
-            this.pagingComponent.getPageIndex(),
-            this.pagingComponent.getPageSize(),
+            this.listComponent.getPageIndex(),
+            this.listComponent.getPageSize(),
             this.partnerType,
             undefined,
             searchValue,
@@ -100,16 +146,16 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
         ).subscribe(
             data => {
                 this.partners = data["hydra:member"];
-                this.dataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
-                this.pagingComponent.setDataLength(Number(data["hydra:totalItems"]));
+                this.dataSourcePartners = new MatTableDataSource<PartnerJsonld>(this.partners);
+                this.listComponent.setData(this.dataSourcePartners, Number(data["hydra:totalItems"]));
             }
         );
     }
 
     getUserPartnerData = (searchValue = undefined) => {
         this.partnersSub = this.partnerFollowService.partnerFollowsGetCollection(
-            this.pagingComponent.getPageIndex(),
-            this.pagingComponent.getPageSize(),
+            this.listComponent.getPageIndex(),
+            this.listComponent.getPageSize(),
             undefined,
             undefined,
             searchValue,
@@ -118,23 +164,17 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
             this.partnerType
         ).subscribe(
             data => {
-                let partnerFollows = data["hydra:member"];
-                this.partners = [];
-                partnerFollows.forEach(item => {
-                    if (item.partner) {
-                        this.partners.push(item.partner);
-                    }
-                });
-                this.dataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
-                this.pagingComponent.setDataLength(Number(data["hydra:totalItems"]));
+                this.userPartners = data["hydra:member"];
+                this.dataSourceUserPartners = new MatTableDataSource<PartnerFollowJsonld>(this.userPartners);
+                this.listComponent.setData(this.dataSourcePartners, Number(data["hydra:totalItems"]));
             }
         );
     }
 
     getPartnerProducts = (searchValue = undefined) => {
         this.partnersSub = this.partnerProductService.partnerProductsGetCollection(
-            this.pagingComponent.getPageIndex(),
-            this.pagingComponent.getPageSize(),
+            this.listComponent.getPageIndex(),
+            this.listComponent.getPageSize(),
             undefined,
             undefined,
             searchValue,
@@ -144,15 +184,9 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
             this.partnerType,
         ).subscribe(
             data => {
-                let partnerProducts = data["hydra:member"];
-                this.partners = [];
-                partnerProducts.forEach(item => {
-                    if (item.partner) {
-                        this.partners.push(item.partner);
-                    }
-                });
-                this.dataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
-                this.pagingComponent.setDataLength(Number(data["hydra:totalItems"]));
+                this.partnerProducts = data["hydra:member"];
+                this.dataSourcePartnerProducts = new MatTableDataSource<PartnerProductJsonld>(this.partnerProducts);
+                this.listComponent.setData(this.dataSourcePartnerProducts, Number(data["hydra:totalItems"]));
             }
         );
     }
@@ -184,8 +218,13 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
         this.pagingComponent.getData();
     }
 
-    navigateToPartnerDetails(element: any) {
-        const partner: PartnerJsonld = element as PartnerJsonld;
+    navigateToPartnerDetails = (element: any) => {
+        let partner: PartnerJsonld;
+        if (this.user !== undefined || this.product !== undefined) {
+            partner = element['partner'];
+        } else {
+            partner = element;
+        }
         this.router.navigate(['/' + partner.partnerType, this.appHelperService.extractId(partner.id)]);
     }
 
@@ -194,4 +233,28 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
         partner.partnerType = this.partnerType as TypeEnum;
         this.appHelperService.openModal(NewPartnerComponent, { 'partner': partner }, this.getData);
     }
+
+    unassignPartner = (element: any)=> {
+        console.log(element);
+        let confirmMessage = "";
+        this.translateService.get('system.confirm-unassign').subscribe((translation: string) => {
+            confirmMessage = translation;
+        });
+        const userConfirmed = confirm(confirmMessage);
+        if (userConfirmed) {
+            if (this.user) {
+                this.partnerFollowService.partnerFollowsIdDelete(this.appHelperService.extractId(element.id)).subscribe(
+                    data => {
+                        this.getData(this.listComponent.getSearchValue());
+                    }
+                );
+            } else if (this.product) {
+                this.partnerProductService.partnerProductsIdDelete(this.appHelperService.extractId(element.id)).subscribe(
+                    data => {
+                        this.getData(this.listComponent.getSearchValue());
+                    }
+                );
+            }
+        }
+    }
 }

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

@@ -2,7 +2,7 @@ import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core'
 import {MatSort, Sort} from "@angular/material/sort";
 import {Subscription} from "rxjs";
 import {
-    ContactJsonld, ContactPartnerProductJsonld, ContactPartnerProductService, PartnerFollowJsonld,
+    ContactJsonld, ContactPartnerProductJsonld, ContactPartnerProductService,
     PartnerJsonld, PartnerProductJsonld,
     PartnerProductService,
     ProductJsonld,
@@ -39,16 +39,13 @@ export class ProductListComponent implements OnInit, AfterViewInit {
     protected userProducts: Array<UserProductJsonld>;
     protected partnerProducts: Array<PartnerProductJsonld>;
     protected contactPartnerProducts: Array<ContactPartnerProductJsonld>;
-
     protected dataSourceProducts;
     protected dataSourceUserProducts;
     protected dataSourcePartnerProducts;
     protected dataSourceContactPartnerProducts;
-
     protected bShowNewProductButton: boolean;
     protected nameOrderFilter: OrderFilter;
-
-    public listColDefinitions!: ListColDefinition[];
+    protected listColDefinitions!: ListColDefinition[];
 
     constructor(
         private router: Router,
@@ -76,27 +73,18 @@ export class ProductListComponent implements OnInit, AfterViewInit {
     ngOnInit(){
         this.listColDefinitions = [];
         if (this.partner || this.contact || this.user) {
-            this.listColDefinitions.push(
-                ListComponent.createColDefinition(
-                    'detail', 'overview.details', ListComponent.COLUMN_TYPE_DETAIL),
-                ListComponent.createColDefinition(
-                    'pos', 'overview.number', ListComponent.COLUMN_TYPE_POSITION),
+            this.listColDefinitions = [
                 ListComponent.createColDefinition(
-                    'img', 'overview.image', ListComponent.COLUMN_TYPE_IMAGE, 'imageUrl', false, 'product'),
+                    'image', 'overview.image', ListComponent.COLUMN_TYPE_IMAGE, 'imageUrl', false, 'product'),
                 ListComponent.createColDefinition(
                     'name', 'form.product', ListComponent.COLUMN_TYPE_TEXT_LINKED, 'name', true,'product'),
                 ListComponent.createColDefinition(
                     'unassign', 'overview.unassign', ListComponent.COLUMN_TYPE_BTN_REMOVE)
-            );
-
+            ]
         } else {
             this.listColDefinitions = [
                 ListComponent.createColDefinition(
-                    'detail', 'overview.details', ListComponent.COLUMN_TYPE_DETAIL),
-                ListComponent.createColDefinition(
-                    'pos', 'overview.number', ListComponent.COLUMN_TYPE_POSITION),
-                ListComponent.createColDefinition(
-                    'img', 'overview.image', ListComponent.COLUMN_TYPE_IMAGE, 'imageUrl'),
+                    'image', 'overview.image', ListComponent.COLUMN_TYPE_IMAGE, 'imageUrl'),
                 ListComponent.createColDefinition(
                     'name', 'form.product', ListComponent.COLUMN_TYPE_TEXT_LINKED, 'name', true),
             ];
@@ -137,8 +125,8 @@ export class ProductListComponent implements OnInit, AfterViewInit {
 
     getProducts = (searchValue = undefined) => {
         this.productsSub = this.productService.productsGetCollection(
-            this.listComponent.pagingComponent.getPageIndex(),
-            this.listComponent.pagingComponent.getPageSize(),
+            this.listComponent.getPageIndex(),
+            this.listComponent.getPageSize(),
             searchValue,
             undefined,
             this.nameOrderFilter,
@@ -153,8 +141,8 @@ export class ProductListComponent implements OnInit, AfterViewInit {
 
     getUserProducts = (searchValue = undefined) => {
         this.productsSub = this.userProductService.userProductsGetCollection(
-            this.listComponent.pagingComponent.getPageIndex(),
-            this.listComponent.pagingComponent.getPageSize(),
+            this.listComponent.getPageIndex(),
+            this.listComponent.getPageSize(),
             this.user.id,
             undefined,
             undefined,
@@ -171,8 +159,8 @@ export class ProductListComponent implements OnInit, AfterViewInit {
 
     getPartnerProducts = (searchValue= undefined) => {
         this.productsSub = this.partnerProductService.partnerProductsGetCollection(
-            this.listComponent.pagingComponent.getPageIndex(),
-            this.listComponent.pagingComponent.getPageSize(),
+            this.listComponent.getPageIndex(),
+            this.listComponent.getPageSize(),
             this.partner.id,
             undefined,
             undefined,
@@ -193,8 +181,8 @@ export class ProductListComponent implements OnInit, AfterViewInit {
 
     getContactPartnerProduct = (searchValue = undefined) => {
         this.productsSub = this.contactPartnerProductService.contactPartnerProductsGetCollection(
-            this.listComponent.pagingComponent.getPageIndex(),
-            this.listComponent.pagingComponent.getPageSize(),
+            this.listComponent.getPageIndex(),
+            this.listComponent.getPageSize(),
             this.contact.id,
             undefined,
             searchValue,
@@ -221,12 +209,8 @@ export class ProductListComponent implements OnInit, AfterViewInit {
 
     navigateToProductDetails = (element: any, column?: any)=> {
         let product: ProductJsonld;
-        if (this.user !== undefined) {
-            product = element['partner'];
-        } else if (this.partner !== undefined) {
-            product = element['partner'];
-        } else if (this.contact !== undefined) {
-            product = element['partnerProduct']['partner'];
+        if (this.user !== undefined || this.partner !== undefined || this.contact !== undefined) {
+            product = element['product'];
         } else {
             product = element;
         }
@@ -234,9 +218,7 @@ export class ProductListComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewProduct() {
-        // TODO: Warum muss ich einen leeren String übergeben, damit es funktioniert?
         let product: ProductJsonld = {} as ProductJsonld;
-        product.name = "";
         this.appHelperService.openModal(NewProductComponent, { 'product': product }, this.getData);
     }