user, sales list

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

@@ -25,48 +25,65 @@
                     <!-- Conditional Cells -->
                     <td mat-cell *matCellDef="let element" [ngClass]="getColCssClass(column)">
                         <ng-container [ngSwitch]="column.type">
-                            <!-- Detail Column -->
+
+                            <ng-container *ngSwitchCase="COLUMN_TYPE_ADDRESS">
+                                <div [innerHTML]="getElementValue(element, column)"></div>
+                            </ng-container>
+
+                            <ng-container *ngSwitchCase="COLUMN_TYPE_CURRENCY">
+                                {{ getElementValue(element, column) | currency: 'EUR' }}
+                            </ng-container>
+
+                            <ng-container *ngSwitchCase="COLUMN_TYPE_BTN_DOWNLOAD">
+                                <span class="btn btn-primary bi bi-download p-2-4"
+                                    data-type="user-tool" data-action="edit" (click)="onDownloadFunction(element)"></span>
+                            </ng-container>
+
+                            <ng-container *ngSwitchCase="COLUMN_TYPE_BTN_REMOVE">
+                                <span class="spt-icon-unassign" (click)="onRemoveItemFunction(element, column)"></span>
+                            </ng-container>
+
+                            <ng-container *ngSwitchCase="COLUMN_TYPE_BTN_EDIT">
+                                <span class="btn btn-primary bi bi-pencil p-2-4"
+                                    data-type="user-tool" data-action="edit" (click)="onEditFunction(element)"></span>
+                            </ng-container>
+
+                            <ng-container *ngSwitchCase="COLUMN_TYPE_DATE">
+                                {{ getElementValue(element, column) | date:'dd.MM.YYYY - HH:mm':'GMT+0000' }} Uhr
+                            </ng-container>
+
+                            <ng-container *ngSwitchCase="COLUMN_TYPE_EMAIL">
+                                <span><a href="mailto:{{ getElementValue(element, column) }}">{{ getElementValue(element, column) }}</a></span>
+                            </ng-container>
+
                             <ng-container *ngSwitchCase="COLUMN_TYPE_DETAIL" >
                                 <span class="btn btn-primary spt-icon-details"
                                       data-type="user-tool" data-action="edit"
                                       (click)="onNavigateToDetailsFunction(element, column)">
                                 </span>
                             </ng-container>
-                            <!-- Position Column -->
-                            <ng-container *ngSwitchCase="COLUMN_TYPE_POSITION">
-                                {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex() - 1) + dataSource.filteredData.indexOf(element) + 1 }}
-                            </ng-container>
-                            <!-- Image Column -->
+
                             <ng-container *ngSwitchCase="COLUMN_TYPE_IMAGE">
                                 <img [src]="getElementImage(element, column)" width="40" height="40"/>
                             </ng-container>
-                            <!-- Text Column -->
+
+                            <ng-container *ngSwitchCase="COLUMN_TYPE_POSITION">
+                                {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex() - 1) + dataSource.filteredData.indexOf(element) + 1 }}
+                            </ng-container>
+
                             <ng-container *ngSwitchCase="COLUMN_TYPE_TEXT">
                                 {{ getElementValue(element, column) }}
                             </ng-container>
-                            <!-- Text Linked Column -->
+
                             <ng-container *ngSwitchCase="COLUMN_TYPE_TEXT_LINKED">
                                 <a [routerLink]="[appHelperService.getResourceLink(element, column.subResource)]">
                                     {{ getElementValue(element, column) }}
                                 </a>
                             </ng-container>
-                            <ng-container *ngSwitchCase="COLUMN_TYPE_ADDRESS">
-                                <div [innerHTML]="getElementValue(element, column)"></div>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="COLUMN_TYPE_TEXT_WEBSITE">
+                            <ng-container *ngSwitchCase="COLUMN_TYPE_WEBSITE">
                                 <a href="{{ getElementValue(element, column) }}" target="_blank">{{ getElementValue(element, column) }}</a>
                             </ng-container>
-                            <ng-container *ngSwitchCase="COLUMN_TYPE_BTN_DOWNLOAD">
-                               <span class="btn btn-primary bi bi-download p-2-4"
-                                     data-type="user-tool" data-action="edit" (click)="onDownloadFunction(element)"></span>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="COLUMN_TYPE_BTN_EDIT">
-                                 <span class="btn btn-primary bi bi-pencil p-2-4"
-                                       data-type="user-tool" data-action="edit" (click)="onEditFunction(element)"></span>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="COLUMN_TYPE_BTN_REMOVE">
-                                <span class="spt-icon-unassign" (click)="onRemoveItemFunction(element, column)"></span>
-                            </ng-container>
+
                         </ng-container>
                     </td>
                 </ng-container>

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

@@ -33,35 +33,44 @@ export class ListComponent implements OnInit, AfterViewInit {
     public static COLUMN_TYPE_BTN_DOWNLOAD: string = 'btn_download';
     public static COLUMN_TYPE_BTN_EDIT: string = 'btn_edit';
     public static COLUMN_TYPE_BTN_REMOVE: string = 'btn_remove';
+    public static COLUMN_TYPE_CURRENCY: string = 'euro';
+    public static COLUMN_TYPE_DATE: string = 'date';
     public static COLUMN_TYPE_DETAIL: string = 'detail';
+    public static COLUMN_TYPE_EMAIL: string = 'email';
     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 COLUMN_TYPE_WEBSITE: string = 'website';
 
     public static validColumnTypes: string[] = [
         ListComponent.COLUMN_TYPE_ADDRESS,
         ListComponent.COLUMN_TYPE_BTN_DOWNLOAD,
         ListComponent.COLUMN_TYPE_BTN_EDIT,
         ListComponent.COLUMN_TYPE_BTN_REMOVE,
+        ListComponent.COLUMN_TYPE_CURRENCY,
+        ListComponent.COLUMN_TYPE_DATE,
         ListComponent.COLUMN_TYPE_DETAIL,
+        ListComponent.COLUMN_TYPE_EMAIL,
         ListComponent.COLUMN_TYPE_IMAGE,
         ListComponent.COLUMN_TYPE_POSITION,
         ListComponent.COLUMN_TYPE_TEXT,
         ListComponent.COLUMN_TYPE_TEXT_LINKED,
-        ListComponent.COLUMN_TYPE_TEXT_WEBSITE,
+        ListComponent.COLUMN_TYPE_WEBSITE,
     ];
     get COLUMN_TYPE_ADDRESS(): string { return ListComponent.COLUMN_TYPE_ADDRESS; }
     get COLUMN_TYPE_BTN_DOWNLOAD(): string { return ListComponent.COLUMN_TYPE_BTN_DOWNLOAD; }
     get COLUMN_TYPE_BTN_EDIT(): string { return ListComponent.COLUMN_TYPE_BTN_EDIT; }
     get COLUMN_TYPE_BTN_REMOVE(): string { return ListComponent.COLUMN_TYPE_BTN_REMOVE; }
+    get COLUMN_TYPE_CURRENCY(): string { return ListComponent.COLUMN_TYPE_CURRENCY; }
+    get COLUMN_TYPE_DATE(): string { return ListComponent.COLUMN_TYPE_DATE; }
     get COLUMN_TYPE_DETAIL(): string { return ListComponent.COLUMN_TYPE_DETAIL; }
+    get COLUMN_TYPE_EMAIL(): string { return ListComponent.COLUMN_TYPE_EMAIL; }
     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_WEBSITE(): string { return ListComponent.COLUMN_TYPE_WEBSITE; }
 
     protected displayedColumns!: string[];
     protected selectedRowIndex: number | null = null;

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

@@ -107,7 +107,7 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
             {
                 name: 'website',
                 text: 'overview.website',
-                type: ListComponent.COLUMN_TYPE_TEXT_WEBSITE,
+                type: ListComponent.COLUMN_TYPE_WEBSITE,
                 field: 'website',
                 sortable: true,
                 subResource: withSubResource ? 'partner' : undefined

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

@@ -19,7 +19,6 @@ import {AssignProductComponent} from "@app/_views/products/assign-product/assign
 import {TranslateService} from "@ngx-translate/core";
 import {ListColDefinition} from "@app/_components/list/list-col-definition";
 import {ListComponent} from "@app/_components/list/list.component";
-import {ROUTE_PRODUCT} from "@app/app-routing.module";
 type GeneralDataSource = MatTableDataSource<any>;
 
 @Component({
@@ -88,7 +87,6 @@ export class ProductListComponent implements OnInit, AfterViewInit {
                 field: 'name',
                 sortable: true,
                 subResource: withSubResource ? 'product' : undefined,
-                linkResource: 'product'
             } as ListColDefinition,
         ];
         if (withSubResource) {

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

@@ -2,96 +2,11 @@
     <div class="top-btn">
         <button *ngIf="!this.user" class="btn btn-primary" (click)="openModalNewSale()">+ {{ 'basic.new-sale' | translate }}</button>
     </div>
-    <app-paging #pagingComponent
-                    [getDataFunction]="getData"
-                    [dataSource]="dataSource"
-        >
-        <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)="navigateToSaleDetails(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="user">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header
-                        sortActionDescription="{{ 'overview.sort' | translate }}:  {{ 'overview.sale-user' | translate }}">
-                        {{ 'overview.sale-user' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <a [routerLink]="['/user', appHelperService.extractId(element.owner.id)]">{{ element.owner.fullName }}</a>
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="partner">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header="address"
-                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.sale-partner' | translate }}">
-                        {{ 'overview.sale-partner' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <a [routerLink]="['/customer', appHelperService.extractId(element.partner.id)]">{{ element.partner.name }}</a>
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="product">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header
-                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
-                        {{ 'overview.productname' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <a [routerLink]="['/product', appHelperService.extractId(element.product.id)]">{{ element.product.name }}</a>
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="turnover">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header
-                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.turnover' | translate }}">
-                        {{ 'overview.turnover' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        {{ element.turnover | currency: 'EUR' }}
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="profit">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header
-                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.profit' | translate }}">
-                        {{ 'overview.profit' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        {{ element.profit | currency: 'EUR' }}
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="date">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header
-                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdAt' | translate }}">
-                        {{ 'overview.createdAt' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        {{ element.createdAt | date:'dd.MM.YYYY - HH:mm':'GMT+0000' }} Uhr
-                    </td>
-                </ng-container>
-
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
-        </div>
-    </app-paging>
-</div>
+    <app-list #listComponent
+              [dataSource]="dataSource"
+              [getDataFunction]="getData"
+              [onNavigateToDetailsFunction]="navigateToSaleDetails"
+              [onSortFunction]="onSortChange"
+              [listColDefinitions]="listColDefinitions"
+    ></app-list>
+</div>

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

@@ -10,6 +10,8 @@ import {PagingComponent} from "@app/_components/paging/paging.component";
 import {NewSaleComponent} from "@app/_views/sales/new-sale/new-sale.component";
 import {OrderFilter} from "@app/_models/orderFilter";
 import {AccountService} from "@app/_services";
+import {ListComponent} from "@app/_components/list/list.component";
+import {ListColDefinition} from "@app/_components/list/list-col-definition";
 
 @Component({
   selector: 'app-sale-list',
@@ -21,16 +23,14 @@ export class SaleListComponent implements OnInit, AfterViewInit {
     @Input() public user!: UserJsonld;
     @Input() public product!: ProductJsonld;
     @Input() public partner!: PartnerJsonld;
-    @ViewChild(MatSort) sort;
-    @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
+    @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
 
-    protected displayedColumns: string[];
     protected salesSub: Subscription;
     protected sales: Array<SaleJsonld>;
     protected salesSummarySub: Subscription;
     protected saleSummaries: Array<SaleSummaryJsonld>;
-
     protected dataSource;
+    protected listColDefinitions!: ListColDefinition[];
 
     constructor(
         private saleService: SaleService,
@@ -38,27 +38,71 @@ export class SaleListComponent implements OnInit, AfterViewInit {
         protected appHelperService: AppHelperService,
         protected accountService: AccountService,
     ) {
-        this.sort = new MatSort();
-        this.displayedColumns = ['details', 'pos', 'user', 'partner', 'product', 'turnover', 'profit', 'date'];
         this.salesSub = new Subscription();
         this.sales = [];
         this.salesSummarySub = new Subscription();
         this.saleSummaries = [];
-
         this.dataSource = new MatTableDataSource<SaleJsonld>(this.sales);
+        this.listColDefinitions = [
+            {
+                name: 'user',
+                text: 'overview.sale-user',
+                type: ListComponent.COLUMN_TYPE_TEXT_LINKED,
+                field: 'fullName',
+                sortable: true,
+                subResource: 'owner',
+            } as ListColDefinition,
+            {
+                name: 'partner',
+                text: 'overview.sale-partner',
+                type: ListComponent.COLUMN_TYPE_TEXT_LINKED,
+                field: 'name',
+                sortable: true,
+                subResource: 'partner',
+            } as ListColDefinition,
+            {
+                name: 'product',
+                text: 'overview.productname',
+                type: ListComponent.COLUMN_TYPE_TEXT_LINKED,
+                field: 'name',
+                sortable: true,
+                subResource: 'product',
+            } as ListColDefinition,
+            {
+                name: 'turnover',
+                text: 'overview.turnover',
+                type: ListComponent.COLUMN_TYPE_CURRENCY,
+                field: 'turnover',
+                sortable: true
+            } as ListColDefinition,
+            {
+                name: 'profit',
+                text: 'overview.profit',
+                type: ListComponent.COLUMN_TYPE_CURRENCY,
+                field: 'profit',
+                sortable: true
+            } as ListColDefinition,
+            {
+                name: 'createdAt',
+                text: 'overview.createdAt',
+                type: ListComponent.COLUMN_TYPE_DATE,
+                field: 'createdAt',
+                sortable: true
+            } as ListColDefinition,
+        ];
     }
 
     ngOnInit() {
     }
 
     ngAfterViewInit(): void {
-        this.pagingComponent.getData();
+        this.listComponent.getData();
     }
 
     getData = () => {
         this.salesSub = this.saleService.salesGetCollection(
-            this.pagingComponent.getPageIndex(),
-            this.pagingComponent.getPageSize(),
+            this.listComponent.getPageIndex(),
+            this.listComponent.getPageSize(),
             this.user !== undefined ? this.user.id : undefined,
             undefined,
             this.partner !== undefined ? this.partner.id : undefined,
@@ -68,15 +112,13 @@ export class SaleListComponent implements OnInit, AfterViewInit {
             data => {
                 this.sales = data["hydra:member"];
                 this.dataSource = new MatTableDataSource<SaleJsonld>(this.sales);
-                this.pagingComponent.setDataLength(Number(data["hydra:totalItems"]));
+                this.listComponent.setData(this.dataSource, Number(data["hydra:totalItems"]));
             }
         )
     }
 
-    onSortChange(sortState: Sort) {
+    onSortChange = (sortState: Sort)=> {
         // Reset page index to first page
-        this.pagingComponent.resetPageIndex();
-
         let order: OrderFilter;
         if (sortState.direction === "") {
             order = OrderFilter.Undefined;
@@ -84,10 +126,11 @@ export class SaleListComponent implements OnInit, AfterViewInit {
             order = sortState.direction;
         }
 
-        this.pagingComponent.getData();
+        this.listComponent.getData();
     }
 
-    navigateToSaleDetails(element: any) {
+    navigateToSaleDetails = (element: any) => {
+        console.log(element);
         const sale: SaleJsonld = element as SaleJsonld;
         this.router.navigate(['/sale', this.appHelperService.extractId(sale.id)]);
     }

matsen-tool/src/app/_views/user/user-list/user-list.component.html

@@ -1,71 +1,9 @@
 <div class="spt-container">
-    <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)="navigateToUserDetails(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.image' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <img  src="{{ element.imageUrl }}" width="40"
-                             height="40"  />
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="firstName">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
-                        {{ 'overview.firstName' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <span>{{ element.firstName }}</span>
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="lastName">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
-                        {{ 'overview.lastName' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <span>{{ element.lastName }}</span>
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="email">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
-                        {{ 'overview.email' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <span><a href="mailto:{{ element.email }}">{{ element.email }}</a></span>
-                    </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]="dataSource"
+              [getDataFunction]="getData"
+              [onNavigateToDetailsFunction]="navigateToUserDetails"
+              [onSortFunction]="onSortChange"
+              [listColDefinitions]="listColDefinitions"
+    ></app-list>
 </div>

matsen-tool/src/app/_views/user/user-list/user-list.component.ts

@@ -7,6 +7,9 @@ import {MatTableDataSource} from "@angular/material/table";
 import {OrderFilter} from "@app/_models/orderFilter";
 import {Router} from "@angular/router";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
+import {ListComponent} from "@app/_components/list/list.component";
+import {ListColDefinition} from "@app/_components/list/list-col-definition";
+import {ListColTypeAddress} from "@app/_components/list/list-col-type-address";
 
 @Component({
   selector: 'app-user-list',
@@ -15,28 +18,50 @@ import {AppHelperService} from "@app/_helpers/app-helper.service";
 })
 export class UserListComponent implements OnInit, AfterViewInit {
 
-    @ViewChild(MatSort) sort;
-    @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
-
+    @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
 
     protected usersSub: Subscription;
     protected users: Array<UserJsonld>;
     protected dataSource;
-    protected displayedColumns!: string[];
-
+    protected listColDefinitions!: ListColDefinition[];
 
     constructor(
         private userService: UserService,
         private router: Router,
         protected appHelperService: AppHelperService,
     ) {
-        this.displayedColumns = ['details', 'pos', 'image', 'firstName', 'lastName', 'email'];
-        this.sort = new MatSort();
-
-        this.sort = new MatSort();
         this.usersSub = new Subscription();
         this.users = [];
         this.dataSource = new MatTableDataSource<UserJsonld>(this.users);
+        this.listColDefinitions = [
+            {
+                name: 'image',
+                text: 'overview.image',
+                type: ListComponent.COLUMN_TYPE_IMAGE,
+                field: 'imageUrl',
+            } as ListColDefinition,
+            {
+                name: 'firstName',
+                text: 'overview.firstName',
+                type: ListComponent.COLUMN_TYPE_TEXT,
+                field: 'firstName',
+                sortable: true,
+            } as ListColDefinition,
+            {
+                name: 'lastName',
+                text: 'overview.lastName',
+                type: ListComponent.COLUMN_TYPE_TEXT,
+                field: 'lastName',
+                sortable: true,
+            } as ListColDefinition,
+            {
+                name: 'email',
+                text: 'overview.email',
+                type: ListComponent.COLUMN_TYPE_EMAIL,
+                field: 'email',
+                sortable: false,
+            } as ListColDefinition,
+        ];
     }
 
     ngOnInit() {
@@ -44,15 +69,13 @@ export class UserListComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit() {
-        this.dataSource.sort = this.sort;
-        this.dataSource.paginator = this.pagingComponent.paginator;
-        this.pagingComponent.getData();
+        this.listComponent.getData();
     }
 
     getData = (term? : string): void => {
         this.usersSub = this.userService.usersGetCollection(
-            this.pagingComponent.getPageIndex(),
-            this.pagingComponent.getPageSize(),
+            this.listComponent.getPageIndex(),
+            this.listComponent.getPageSize(),
             undefined,
             undefined,
             term
@@ -60,24 +83,22 @@ export class UserListComponent implements OnInit, AfterViewInit {
             data => {
                 this.users = data["hydra:member"];
                 this.dataSource = new MatTableDataSource<UserJsonld>(this.users);
-                this.pagingComponent.setDataLength(Number(data["hydra:totalItems"]));
+                this.listComponent.setData(this.dataSource, Number(data["hydra:totalItems"]));
             }
         );
     }
 
     onSortChange = (sortState: Sort) => {
-        this.pagingComponent.resetPageIndex()
-
         let order: OrderFilter;
         if (sortState.direction === "") {
             order = OrderFilter.Undefined;
         } else {
             order = sortState.direction;
         }
-        this.pagingComponent.getData();
+        this.listComponent.getData();
     }
 
-    navigateToUserDetails(element: any) {
+    navigateToUserDetails = (element: any) => {
         const user: UserJsonld = element as UserJsonld;
         this.router.navigate(['/user', this.appHelperService.extractId(user.id)]);
     }