more lists

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

@@ -4,7 +4,10 @@ export interface ListColDefinition {
     name: string,
     text: string,
     type: string,
-    field?: string | ListColTypeAddress,
+    field?: string,
+    address?: ListColTypeAddress,
     sortable?: boolean,
     subResource?: string,
+    length?: number,
+    displayedLength?: number
 }

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

@@ -46,9 +46,9 @@
                             </ng-container>
                             <!-- Text Linked Column -->
                             <ng-container *ngSwitchCase="COLUMN_TYPE_TEXT_LINKED">
-                                <span class="btn-link" (click)="onNavigateToDetailsFunction(element, column)">
+                                <a [routerLink]="[appHelperService.getResourceLink(element, column.subResource)]">
                                     {{ getElementValue(element, column) }}
-                                </span>
+                                </a>
                             </ng-container>
                             <ng-container *ngSwitchCase="COLUMN_TYPE_ADDRESS">
                                 <div [innerHTML]="getElementValue(element, column)"></div>
@@ -56,6 +56,14 @@
                             <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_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>

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

@@ -3,7 +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";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 type GeneralDataSource = MatTableDataSource<any>;
 
@@ -19,6 +19,8 @@ export class ListComponent implements OnInit, AfterViewInit {
     @Input() public onSortFunction!: Function;
     @Input() public onNavigateToDetailsFunction!: Function;
     @Input() public onRemoveItemFunction!: Function;
+    @Input() public onEditFunction!: Function;
+    @Input() public onDownloadFunction!: Function;
     @Input() public searchable: boolean;
     @Input() public showDetailButton: boolean;
     @Input() public showPosition: boolean;
@@ -28,6 +30,8 @@ export class ListComponent implements OnInit, AfterViewInit {
     @ViewChild("pagingComponent", { static: false }) protected pagingComponent!: PagingComponent;
 
     public static COLUMN_TYPE_ADDRESS: string = 'address';
+    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_DETAIL: string = 'detail';
     public static COLUMN_TYPE_IMAGE: string = 'image';
@@ -38,6 +42,8 @@ export class ListComponent implements OnInit, AfterViewInit {
 
     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_DETAIL,
         ListComponent.COLUMN_TYPE_IMAGE,
@@ -46,19 +52,23 @@ export class ListComponent implements OnInit, AfterViewInit {
         ListComponent.COLUMN_TYPE_TEXT_LINKED,
         ListComponent.COLUMN_TYPE_TEXT_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_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[];
     protected selectedRowIndex: number | null = null;
 
-    constructor() {
+    constructor(
+        protected appHelperService: AppHelperService,
+    ) {
         this.searchable = true;
         this.showDetailButton = true;
         this.showPosition = true;
@@ -68,16 +78,26 @@ export class ListComponent implements OnInit, AfterViewInit {
 
     ngOnInit(): void {
         this.displayedColumns = [];
-        let extraRows: ListColDefinition[] = [];
+        let defaultRows: ListColDefinition[] = [];
         if (this.showDetailButton) {
-            extraRows.push(ListComponent.createColDefinition(
-                'detail', 'overview.details', ListComponent.COLUMN_TYPE_DETAIL));
+            defaultRows.push(
+                {
+                    name: 'detail',
+                    text: 'overview.details',
+                    type: ListComponent.COLUMN_TYPE_DETAIL
+                } as ListColDefinition
+            );
         }
         if (this.showPosition) {
-            extraRows.push(ListComponent.createColDefinition(
-                'pos', 'overview.number', ListComponent.COLUMN_TYPE_POSITION));
+            defaultRows.push(
+                {
+                    name: 'pos',
+                    text: 'overview.number',
+                    type: ListComponent.COLUMN_TYPE_POSITION
+                } as ListColDefinition
+            );
         }
-        this.listColDefinitions = extraRows.concat(this.listColDefinitions);
+        this.listColDefinitions = defaultRows.concat(this.listColDefinitions);
         this.listColDefinitions.forEach((value, index) => {
             this.displayedColumns.push(value.name);
         });
@@ -106,18 +126,20 @@ export class ListComponent implements OnInit, AfterViewInit {
         this.selectedRowIndex = index;
     }
 
-    getElementValue(element: any, column: ListColDefinition): any {
-        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]}`;
+    getElementValue(element: any, column: ListColDefinition): string | null {
+        element = column.subResource !== undefined ? element[column.subResource]: element;
+        if (element === undefined) {
+            return null;
+        }
+        if (column.field !== undefined) {
+            if (column.displayedLength !== undefined) {
+                return element[column.field]?.slice(0, column.displayedLength) + '...';
             }
+            return element[column.field];
+        }
+        if (column.address !== undefined) {
+            const field = column.address;
+            return `${element[field.street]} ${element[field.streetNo]}<br/> ${element[field.zip]} ${element[field.city]} <br/> ${element[field.country]}`;
         }
         return null;
     }
@@ -130,6 +152,14 @@ export class ListComponent implements OnInit, AfterViewInit {
         return "/assets/images/icons/dummy-product.png"
     }
 
+    getElementId(element: any, column: ListColDefinition): string {
+        if (column.subResource) {
+            return column.subResource in element ? element[column.subResource]['id'] : null;
+        } else {
+            return element['id'];
+        }
+    }
+
     getColCssClass(column: ListColDefinition): string {
         switch (column.type) {
             case ListComponent.COLUMN_TYPE_DETAIL:
@@ -152,43 +182,4 @@ export class ListComponent implements OnInit, AfterViewInit {
     public getPageSize() {
         return this.pagingComponent.getPageSize();
     }
-
-    public static createColDefinition(
-        name: string,
-        text: string,
-        type: string,
-        field?: string | ListColTypeAddress,
-        sortable?: boolean,
-        subResource?: string,
-    ): ListColDefinition {
-        if (!this.validColumnTypes.includes(type)) {
-            throw Error('invalid column type');
-        }
-
-        let res: ListColDefinition = {} as ListColDefinition;
-        res.name = name;
-        res.text = text;
-        res.type = type;
-        res.field = field;
-        res.sortable = sortable;
-        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/_helpers/app-helper.service.ts

@@ -2,6 +2,8 @@ import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
 import {Injectable} from "@angular/core";
 import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {ModalStatus} from "@app/_helpers/modal.states";
+import {PartnerJsonld} from "@app/core/api/v1";
+import {ROUTE_CUSTOMER, ROUTE_SERVICE, ROUTE_SUPPLIER} from "@app/app-routing.module";
 
 @Injectable({ providedIn: 'root' })
 export class AppHelperService {
@@ -65,4 +67,28 @@ export class AppHelperService {
         }
     }
 
+    public getResourceLink(element: any, subResource?: any): string | null {
+        let resourceLink: string = '/';
+        element = subResource !== undefined ? element[subResource]: element;
+        if (element === undefined) {
+            return null;
+        }
+        if (element['@type'] === 'Partner') {
+            switch (element['partnerType']) {
+                case PartnerJsonld.PartnerTypeEnum.Customer:
+                    resourceLink += ROUTE_CUSTOMER;
+                    break;
+                case PartnerJsonld.PartnerTypeEnum.Supplier:
+                    resourceLink += ROUTE_SUPPLIER;
+                    break;
+                case PartnerJsonld.PartnerTypeEnum.Service:
+                    resourceLink += ROUTE_SERVICE;
+                    break;
+            }
+        } else {
+            resourceLink += element['@type'].toLowerCase();
+        }
+        return resourceLink + '/' + this.extractId(element['id']);
+    }
+
 }

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

@@ -2,103 +2,16 @@
     <div class="top-btn">
         <button class="btn btn-primary" (click)="openModalNewDocument()">+ {{ 'basic.new-document' | 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="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="name">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header
-                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.document' | translate }}">
-                        {{ 'overview.document' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">{{ element.name }}
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="description">
-                    <th mat-header-cell *matHeaderCellDef>
-                        {{ 'overview.description' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element"
-                        title="{{element.description}}">{{ element.description?.length > 70 ? element.description?.slice(0, 70) + '...' : element.description }}
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="partnerName">
-                    <th mat-header-cell *matHeaderCellDef>
-                        {{ 'overview.partner' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <ng-container *ngIf="element.partner !== undefined">
-                            <a [routerLink]="['/customer', appHelperService.extractId(element.partner.id)]">{{ element.partner.name }}</a>
-                        </ng-container>
-
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="productName">
-                    <th mat-header-cell *matHeaderCellDef>
-                        {{ 'overview.product' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <ng-container *ngIf="element.product !== undefined">
-                            <a [routerLink]="['/product', appHelperService.extractId(element.product.id)]">{{ element.product.name }}</a>
-                        </ng-container>
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="createdAt">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header
-                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.uploaded' | translate }}">
-                        {{ 'overview.uploaded' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">{{ element.createdAt | date:'dd.MM.YYYY - HH:mm':'GMT+0000' }} Uhr
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="createdByName">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header
-                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdBy' | translate }}">
-                        {{ 'overview.createdBy' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">
-                        <a [routerLink]="['/user', appHelperService.extractId(element.createdBy.id)]">{{ element.createdBy.fullName }}</a>
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="download">
-                    <th mat-header-cell *matHeaderCellDef></th>
-                    <td mat-cell *matCellDef="let element">
-                        <span class="btn btn-primary bi bi-download p-2-4"
-                              data-type="user-tool" data-action="edit" (click)="navigateToDocumentFile(element)"></span>
-                    </td>
-                </ng-container>
-
-                <ng-container matColumnDef="edit">
-                    <th mat-header-cell *matHeaderCellDef></th>
-                    <td mat-cell *matCellDef="let element">
-                        <span class="btn btn-primary bi bi-pencil p-2-4"
-                              data-type="user-tool" data-action="edit" (click)="openModalEditDocument(element)"></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"
+              [onSortFunction]="onSortChange"
+              [onDownloadFunction]="navigateToDocumentFile"
+              [onEditFunction]="openModalEditDocument"
+              [listColDefinitions]="listColDefinitions"
+              [searchable]="true"
+              [hidePageSize]="false"
+              [showDetailButton]="false"
+    ></app-list>
 </div>
 

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

@@ -7,6 +7,8 @@ import {MatTableDataSource} from "@angular/material/table";
 import {PagingComponent} from "@app/_components/paging/paging.component";
 import {OrderFilter} from "@app/_models/orderFilter";
 import {NewDocumentComponent} from "@app/_views/documents/new-document/new-document.component";
+import {ListComponent} from "@app/_components/list/list.component";
+import {ListColDefinition} from "@app/_components/list/list-col-definition";
 
 @Component({
   selector: 'app-document-list',
@@ -17,41 +19,84 @@ export class DocumentListComponent implements OnInit, AfterViewInit {
 
     @Input() public product!: ProductJsonld;
     @Input() public partner!: PartnerJsonld;
-    @ViewChild(MatSort) sort;
-    @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
-
-    protected displayedColumns: string[];
+    @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
 
     protected documentsSub: Subscription;
     protected documents: Array<DocumentJsonld>;
     protected dataSource;
+    protected listColDefinitions!: ListColDefinition[];
 
     constructor(
         private documentService: DocumentService,
         protected appHelperService: AppHelperService
     ) {
-        this.sort = new MatSort();
-        this.displayedColumns = ['pos', 'name', 'description', 'partnerName', 'productName', 'createdAt', 'createdByName', 'download', 'edit'];
-
         this.documentsSub = new Subscription();
         this.documents = [];
         this.dataSource = new MatTableDataSource<DocumentJsonld>(this.documents);
 
+        this.listColDefinitions = [
+            {
+                name: 'name',
+                text: 'overview.document',
+                type: ListComponent.COLUMN_TYPE_TEXT,
+                field: 'name',
+                sortable: true
+            } as ListColDefinition,
+            {
+                name: 'description',
+                text: 'overview.description',
+                type: ListComponent.COLUMN_TYPE_TEXT,
+                field: 'description',
+                sortable: true,
+                displayedLength: 70,
+            } as ListColDefinition,
+            {
+                name: 'partner',
+                text: 'overview.partner',
+                type: ListComponent.COLUMN_TYPE_TEXT_LINKED,
+                field: 'name',
+                sortable: true,
+                subResource: 'partner',
+            } as ListColDefinition,
+            {
+                name: 'product',
+                text: 'overview.product',
+                type: ListComponent.COLUMN_TYPE_TEXT_LINKED,
+                field: 'name',
+                sortable: true,
+                subResource: 'product',
+            } as ListColDefinition,
+            {
+                name: 'createdBy',
+                text: 'overview.createdBy',
+                type: ListComponent.COLUMN_TYPE_TEXT_LINKED,
+                field: 'fullName',
+                sortable: true,
+                subResource: 'createdBy',
+            } as ListColDefinition,
+            {
+                name: 'download',
+                type: ListComponent.COLUMN_TYPE_BTN_DOWNLOAD,
+            } as ListColDefinition,
+            {
+                name: 'edit',
+                type: ListComponent.COLUMN_TYPE_BTN_EDIT,
+            } as ListColDefinition,
+        ];
+
     }
 
     ngOnInit(){
     }
 
     ngAfterViewInit() {
-        this.dataSource.sort = this.sort;
-        this.dataSource.paginator = this.pagingComponent.paginator;
-        this.pagingComponent.getData();
+        this.listComponent.getData();
     }
 
     getData = () => {
         this.documentsSub = this.documentService.documentsGetCollection(
-            this.pagingComponent.getPageIndex(),
-            this.pagingComponent.getPageSize(),
+            this.listComponent.getPageIndex(),
+            this.listComponent.getPageSize(),
             undefined,
             undefined,
             this.partner !== undefined ? this.partner.id : undefined,
@@ -62,22 +107,20 @@ export class DocumentListComponent implements OnInit, AfterViewInit {
             data => {
                 this.documents = data["hydra:member"];
                 this.dataSource = new MatTableDataSource<DocumentJsonld>(this.documents);
-                this.pagingComponent.setDataLength(Number(data["hydra:totalItems"]));
+                this.listComponent.setData(this.dataSource, Number(data["hydra:totalItems"]));
             }
         );
     }
 
     onSortChange(sortState: Sort) {
         // Reset page index to first page
-        this.pagingComponent.resetPageIndex();
-
         let order: OrderFilter;
         if (sortState.direction === "") {
             order = OrderFilter.Undefined;
         } else {
             order = sortState.direction;
         }
-        this.getData();
+        this.listComponent.getData();
     }
 
     navigateToDocumentFile(element: DocumentJsonld) {
@@ -89,8 +132,8 @@ export class DocumentListComponent implements OnInit, AfterViewInit {
         this.appHelperService.openModal(NewDocumentComponent, { 'document': document }, this.getData);
     }
 
-    openModalEditDocument(document: DocumentJsonld) {
-        this.appHelperService.openModal(NewDocumentComponent, { 'document': document }, this.getData);
+    openModalEditDocument(element: DocumentJsonld) {
+        this.appHelperService.openModal(NewDocumentComponent, { 'document': element }, this.getData);
     }
 
 }

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

@@ -20,6 +20,7 @@ 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";
+import {ListColTypeAddress} from "@app/_components/list/list-col-type-address";
 type GeneralDataSource = MatTableDataSource<any>;
 
 @Component({
@@ -72,40 +73,54 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
     }
 
     ngOnInit() {
-        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'),
-            ]
+        let withSubResource: boolean = (this.user !== undefined || this.product !== undefined);
+        this.listColDefinitions = [
+            {
+                name: 'image',
+                text: 'overview.logo',
+                type: ListComponent.COLUMN_TYPE_IMAGE,
+                field: 'logoUrl',
+                subResource: withSubResource ? 'partner' : undefined
+            } as ListColDefinition,
+            {
+                name: 'name',
+                text: 'basic.' + this.partnerType + 'One',
+                type: ListComponent.COLUMN_TYPE_TEXT,
+                field: 'name',
+                sortable: true,
+                subResource: withSubResource ? 'partner' : undefined
+            } as ListColDefinition,
+            {
+                name: 'address',
+                text: 'overview.address',
+                type: ListComponent.COLUMN_TYPE_ADDRESS,
+                address: {
+                    street: 'street',
+                    streetNo: 'streetNo',
+                    zip: 'zip',
+                    city: 'city',
+                    country: 'country',
+                } as ListColTypeAddress,
+                sortable: false,
+                subResource: withSubResource ? 'partner' : undefined
+            } as ListColDefinition,
+            {
+                name: 'website',
+                text: 'overview.website',
+                type: ListComponent.COLUMN_TYPE_TEXT_WEBSITE,
+                field: 'website',
+                sortable: true,
+                subResource: withSubResource ? 'partner' : undefined
+            } as ListColDefinition,
+        ];
+        if (withSubResource) {
+            this.listColDefinitions.push(
+                {
+                    name: 'unassign',
+                    text: 'overview.unassign',
+                    type: ListComponent.COLUMN_TYPE_BTN_REMOVE,
+                } as ListColDefinition
+            )
         }
     }
 
@@ -146,6 +161,7 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
         ).subscribe(
             data => {
                 this.partners = data["hydra:member"];
+                console.log(this.partners);
                 this.dataSourcePartners = new MatTableDataSource<PartnerJsonld>(this.partners);
                 this.listComponent.setData(this.dataSourcePartners, Number(data["hydra:totalItems"]));
             }

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

@@ -10,83 +10,5 @@
         [onRemoveItemFunction]="unassignProduct"
         [onSortFunction]="onSortChange"
         [listColDefinitions]="listColDefinitions"
-        [searchable]="true"
-        [hidePageSize]="false"
     ></app-list>
-</div>
-
-
-<!--<div class="spt-container">-->
-<!--    <div *ngIf="!this.user" class="top-btn">-->
-<!--        <button *ngIf="bShowNewProductButton" class="btn btn-primary" (click)="openModalNewProduct()">+ {{ 'basic.new-product' | translate }}</button>-->
-<!--        <button *ngIf="!bShowNewProductButton" class="btn btn-primary" (click)="openModalAssignProduct()">+ {{ 'basic.assign-product' | translate }}</button>-->
-<!--    </div>-->
-<!--    <app-paging #pagingComponent-->
-<!--                [getDataFunction]="getData"-->
-<!--                [dataSource]="dataSourceProducts"-->
-<!--                [searchable]="true"-->
-<!--    >-->
-<!--        <div class="table-responsive">-->
-<!--            <table mat-table [dataSource]="getDataSource()" 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)="navigateToProductDetails(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) + getDataSource().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" class="btn-link" (click)="navigateToProductDetails(element)">-->
-<!--                        <ng-container *ngIf="getProductFromElement(element) as product">-->
-<!--                            <img *ngIf="product.imageUrl !== null && product.imageUrl !== undefined"-->
-<!--                                 src="{{product.imageUrl}}" width="40" height="40"/>-->
-<!--                            <img *ngIf="product.imageUrl === null || product.imageUrl === undefined"-->
-<!--                                 src="/assets/images/icons/dummy-product.png" width="40" height="40" alt="" />-->
-<!--                        </ng-container>-->
-<!--                    </td>-->
-<!--                </ng-container>-->
-
-<!--                <ng-container matColumnDef="name">-->
-<!--                    <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">-->
-<!--                        <ng-container *ngIf="getProductFromElement(element) as product">-->
-<!--                            <span class="btn-link" (click)="navigateToProductDetails(element)">{{ product.name }}</span>-->
-<!--                        </ng-container>-->
-<!--                    </td>-->
-<!--                </ng-container>-->
-
-<!--                <ng-container matColumnDef="unassign" *ngIf="partner || contact">-->
-<!--                    <th mat-header-cell class="text-end" *matHeaderCellDef>-->
-<!--                        {{ 'overview.unassign' | translate }}-->
-<!--                    </th>-->
-<!--                    <td mat-cell class="spt-button-td text-end" *matCellDef="let element">-->
-<!--                        <span class="spt-icon-unassign" (click)="unassignProduct(element)"></span>-->
-<!--                    </td>-->
-<!--                </ng-container>-->
-
-<!--                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>-->
-<!--                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>-->
-<!--            </table>-->
-<!--        </div>-->
-<!--    </app-paging>-->
-<!--</div>-->
+</div>

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

@@ -19,6 +19,7 @@ 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({
@@ -31,7 +32,6 @@ export class ProductListComponent implements OnInit, AfterViewInit {
     @Input() public user!: UserJsonld;
     @Input() public partner!: PartnerJsonld;
     @Input() public contact!: ContactJsonld;
-    @ViewChild(MatSort) sort;
     @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
 
     protected productsSub: Subscription;
@@ -56,7 +56,6 @@ export class ProductListComponent implements OnInit, AfterViewInit {
         private contactPartnerProductService: ContactPartnerProductService,
         protected appHelperService: AppHelperService,
     ) {
-        this.sort = new MatSort();
         this.productsSub = new Subscription();
         this.products = [];
         this.userProducts = [];
@@ -72,22 +71,34 @@ export class ProductListComponent implements OnInit, AfterViewInit {
 
     ngOnInit(){
         this.listColDefinitions = [];
-        if (this.partner || this.contact || this.user) {
-            this.listColDefinitions = [
-                ListComponent.createColDefinition(
-                    '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(
-                    'image', 'overview.image', ListComponent.COLUMN_TYPE_IMAGE, 'imageUrl'),
-                ListComponent.createColDefinition(
-                    'name', 'form.product', ListComponent.COLUMN_TYPE_TEXT_LINKED, 'name', true),
-            ];
+        let withSubResource: boolean = (this.partner !== undefined || this.contact !== undefined || this.user !== undefined);
+        this.listColDefinitions = [
+            {
+                name: 'image',
+                text: 'overview.image',
+                type: ListComponent.COLUMN_TYPE_IMAGE,
+                field: 'imageUrl',
+                sortable: false,
+                subResource: withSubResource ? 'product' : undefined
+            } as ListColDefinition,
+            {
+                name: 'name',
+                text: 'form.product',
+                type: ListComponent.COLUMN_TYPE_TEXT_LINKED,
+                field: 'name',
+                sortable: true,
+                subResource: withSubResource ? 'product' : undefined,
+                linkResource: 'product'
+            } as ListColDefinition,
+        ];
+        if (withSubResource) {
+            this.listColDefinitions.push(
+                {
+                    name: 'unassign',
+                    text: 'overview.unassign',
+                    type: ListComponent.COLUMN_TYPE_BTN_REMOVE,
+                } as ListColDefinition,
+            )
         }
 
         this.bShowNewProductButton =
@@ -95,7 +106,6 @@ export class ProductListComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit() {
-        this.dataSourceProducts.sort = this.sort;
         this.listComponent.getData();
     }
 

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

@@ -20,11 +20,21 @@ import {UsersComponent} from "@app/_views/user/users.component";
 
 const accountModule = () => import('@app/_views/account/account.module').then(x => x.AccountModule);
 
+export const ROUTE_CUSTOMER = 'customer';
+export const ROUTE_SUPPLIER = 'supplier';
+export const ROUTE_SERVICE = 'service';
+export const ROUTE_CONTACT = 'contact';
+export const ROUTE_PRODUCT = 'product';
+export const ROUTE_TASK = 'task';
+export const ROUTE_DOCUMENT = 'document';
+export const ROUTE_SALE = 'sale';
+export const ROUTE_USER = 'user';
+
 const routes: Routes = [
     {path: '', component: HomeComponent, canActivate: [userGuard]},
     {path: 'account', loadChildren: accountModule},
     {
-        path: 'customer',
+        path: ROUTE_CUSTOMER,
         component: TwoColumnComponent,
         canActivate: [userGuard],
         children: [
@@ -33,7 +43,7 @@ const routes: Routes = [
         ]
     },
     {
-        path: 'supplier',
+        path: ROUTE_SUPPLIER,
         component: TwoColumnComponent,
         canActivate: [userGuard],
         children: [
@@ -42,7 +52,7 @@ const routes: Routes = [
         ]
     },
     {
-        path: 'service',
+        path: ROUTE_SERVICE,
         component: TwoColumnComponent,
         canActivate: [userGuard],
         children: [
@@ -51,7 +61,7 @@ const routes: Routes = [
         ]
     },
     {
-        path: 'contact',
+        path: ROUTE_CONTACT,
         component: TwoColumnComponent,
         canActivate: [userGuard],
         children: [
@@ -60,7 +70,7 @@ const routes: Routes = [
         ]
     },
     {
-        path: 'product',
+        path: ROUTE_PRODUCT,
         component: TwoColumnComponent,
         canActivate: [userGuard],
         children: [
@@ -69,7 +79,7 @@ const routes: Routes = [
         ]
     },
     {
-        path: 'task',
+        path: ROUTE_TASK,
         component: TwoColumnComponent,
         canActivate: [userGuard],
         children: [
@@ -77,7 +87,7 @@ const routes: Routes = [
         ]
     },
     {
-        path: 'document',
+        path: ROUTE_DOCUMENT,
         component: TwoColumnComponent,
         canActivate: [userGuard],
         children: [
@@ -85,7 +95,7 @@ const routes: Routes = [
         ]
     },
     {
-        path: 'sale',
+        path: ROUTE_SALE,
         component: TwoColumnComponent,
         canActivate: [userGuard],
         children: [
@@ -94,7 +104,7 @@ const routes: Routes = [
         ]
     },
     {
-        path: 'profile',
+        path: ROUTE_PRODUCT,
         component: TwoColumnComponent,
         canActivate: [userGuard],
         children: [
@@ -102,7 +112,7 @@ const routes: Routes = [
         ]
     },
     {
-        path: 'user',
+        path: ROUTE_USER,
         component: TwoColumnComponent,
         canActivate: [userGuard, adminGuard],
         children: [