product list

matsen-tool/openapi.yaml

@@ -377,6 +377,21 @@ paths:
           style: form
           explode: false
           allowReserved: false
+        -
+          name: 'order[partnerProduct.product.name]'
+          in: query
+          description: ''
+          required: false
+          deprecated: false
+          allowEmptyValue: true
+          schema:
+            type: string
+            enum:
+              - asc
+              - desc
+          style: form
+          explode: false
+          allowReserved: false
       deprecated: false
     post:
       operationId: api_contact_partner_products_post
@@ -1823,6 +1838,21 @@ paths:
           style: form
           explode: true
           allowReserved: false
+        -
+          name: 'order[product.name]'
+          in: query
+          description: ''
+          required: false
+          deprecated: false
+          allowEmptyValue: true
+          schema:
+            type: string
+            enum:
+              - asc
+              - desc
+          style: form
+          explode: false
+          allowReserved: false
         -
           name: excludeContactId
           in: query

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

@@ -2,6 +2,7 @@ export interface ListColDefinition {
     name: string,
     text: string,
     type: string,
-    field?: string
+    field?: string,
+    sortable?: boolean,
     subResource?: string
 }

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

@@ -11,18 +11,26 @@
             <ng-container *ngFor="let column of listColDefinitions">
                 <ng-container [matColumnDef]="column.name">
                     <!-- Header Cell -->
-                    <th mat-header-cell *matHeaderCellDef>
-                        {{ column.text | translate }}
-                    </th>
+                    <ng-container *ngIf="column.sortable">
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                            {{ column.text | translate }}
+                        </th>
+                    </ng-container>
+                    <ng-container *ngIf="!column.sortable">
+                        <th mat-header-cell *matHeaderCellDef>
+                            {{ column.text | translate }}
+                        </th>
+                    </ng-container>
+
                     <!-- Conditional Cells -->
-                    <td mat-cell *matCellDef="let element">
+                    <td mat-cell *matCellDef="let element" [ngClass]="getColCssClass(column)">
                         <ng-container [ngSwitch]="column.type">
                             <!-- Detail Column -->
                             <ng-container *ngSwitchCase="COLUMN_TYPE_DETAIL" >
-                            <span class="btn btn-primary spt-icon-details"
-                                  data-type="user-tool" data-action="edit"
-                                  (click)="navigateToDetailsFunction(element, column)">
-                            </span>
+                                <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">
@@ -38,9 +46,12 @@
                             </ng-container>
                             <!-- Text Linked Column -->
                             <ng-container *ngSwitchCase="COLUMN_TYPE_TEXT_LINKED">
-                            <span class="btn-link" (click)="navigateToDetailsFunction(element, column)">
-                                {{ getElementValue(element, column) }}
-                            </span>
+                                <span class="btn-link" (click)="onNavigateToDetailsFunction(element, column)">
+                                    {{ getElementValue(element, column) }}
+                                </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>

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

@@ -3,7 +3,6 @@ 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 {OrderFilter} from "@app/_models/orderFilter";
 
 type GeneralDataSource = MatTableDataSource<any>;
 
@@ -16,31 +15,40 @@ export class ListComponent implements OnInit, AfterViewInit {
 
     @Input() public dataSource!: GeneralDataSource;
     @Input() public getDataFunction!: Function;
-    @Input() public navigateToDetailsFunction!: Function;
+    @Input() public onSortFunction!: Function;
+    @Input() public onNavigateToDetailsFunction!: Function;
+    @Input() public onRemoveItemFunction!: Function;
     @Input() public searchable: boolean;
     @Input() public listColDefinitions!: ListColDefinition[];
     @Input() public hidePageSize: boolean;
     @ViewChild(MatSort) sort;
     @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
 
+    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_IMAGE: string = 'image';
+
     public static validColumnTypes: string[] = [
+        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_IMAGE
     ];
-
+    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_BTN_REMOVE(): string { return ListComponent.COLUMN_TYPE_BTN_REMOVE; }
 
     protected displayedColumns!: string[];
     protected selectedRowIndex: number | null = null;
 
-
     constructor() {
         this.searchable = true;
         this.sort = new MatSort();
@@ -70,14 +78,7 @@ export class ListComponent implements OnInit, AfterViewInit {
 
     onSortChange = (sortState: Sort) => {
         this.pagingComponent.resetPageIndex()
-
-        let order: OrderFilter;
-        if (sortState.direction === "") {
-            order = OrderFilter.Undefined;
-        } else {
-            order = sortState.direction;
-        }
-        this.pagingComponent.getData();
+        this.onSortFunction(sortState);
     }
 
     onRowSelected(row: any, index: number) {
@@ -100,17 +101,27 @@ export class ListComponent implements OnInit, AfterViewInit {
         return "/assets/images/icons/dummy-product.png"
     }
 
-    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; }
+    getColCssClass(column: ListColDefinition): string {
+        switch (column.type) {
+            case ListComponent.COLUMN_TYPE_DETAIL:
+                return "spt-button-td";
+            case ListComponent.COLUMN_TYPE_BTN_REMOVE:
+                return "spt-button-td text-end";
+            default:
+                return "";
+        }
+    }
+
+    public getSearchValue(): any {
+        return this.pagingComponent.getSearchValue();
+    }
 
     public static createColDefinition(
         name: string,
         text: string,
         type: string,
         field?: string,
+        sortable?: boolean,
         subResource?: string
     ): ListColDefinition {
         if (!this.validColumnTypes.includes(type)) {
@@ -122,7 +133,8 @@ export class ListComponent implements OnInit, AfterViewInit {
         res.text = text;
         res.type = type;
         res.field = field;
+        res.sortable = sortable;
         res.subResource = subResource
         return res;
     }
-}
+}

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

@@ -101,6 +101,7 @@ export class AssignProductComponent implements OnInit, AfterViewInit {
             term,
             undefined,
             undefined,
+            undefined,
             this.appHelperService.extractId(this.contactPartnerProduct.contactIri)
         ).subscribe(
             data => {

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

@@ -6,7 +6,9 @@
     <app-list #listComponent
         [dataSource]="getDataSource()"
         [getDataFunction]="getData"
-        [navigateToDetailsFunction]="navigateToProductDetails"
+        [onNavigateToDetailsFunction]="navigateToProductDetails"
+        [onRemoveItemFunction]="unassignProduct"
+        [onSortFunction]="onSortChange"
         [listColDefinitions]="listColDefinitions"
         [searchable]="true"
         [hidePageSize]="false"
@@ -14,77 +16,77 @@
 </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">
+<!--<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="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="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="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="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>
+<!--                <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>
+<!--                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>-->
+<!--                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>-->
+<!--            </table>-->
+<!--        </div>-->
+<!--    </app-paging>-->
+<!--</div>-->

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

@@ -1,6 +1,5 @@
 import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {MatSort, Sort} from "@angular/material/sort";
-import {PagingComponent} from "@app/_components/paging/paging.component";
 import {Subscription} from "rxjs";
 import {
     ContactJsonld, ContactPartnerProductJsonld, ContactPartnerProductService, PartnerFollowJsonld,
@@ -8,7 +7,7 @@ import {
     PartnerProductService,
     ProductJsonld,
     ProductService,
-    UserJsonld,
+    UserJsonld, UserProductJsonld,
     UserProductService
 } from "@app/core/api/v1";
 import {Router} from "@angular/router";
@@ -33,14 +32,11 @@ export class ProductListComponent implements OnInit, AfterViewInit {
     @Input() public partner!: PartnerJsonld;
     @Input() public contact!: ContactJsonld;
     @ViewChild(MatSort) sort;
-    @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
     @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
 
-    protected displayedColumns: string[];
-
     protected productsSub: Subscription;
     protected products: Array<ProductJsonld>;
-    protected userProducts: Array<PartnerFollowJsonld>;
+    protected userProducts: Array<UserProductJsonld>;
     protected partnerProducts: Array<PartnerProductJsonld>;
     protected contactPartnerProducts: Array<ContactPartnerProductJsonld>;
 
@@ -48,8 +44,9 @@ export class ProductListComponent implements OnInit, AfterViewInit {
     protected dataSourceUserProducts;
     protected dataSourcePartnerProducts;
     protected dataSourceContactPartnerProducts;
+
     protected bShowNewProductButton: boolean;
-    protected nameOrderAsc: OrderFilter;
+    protected nameOrderFilter: OrderFilter;
 
     public listColDefinitions!: ListColDefinition[];
 
@@ -63,40 +60,54 @@ export class ProductListComponent implements OnInit, AfterViewInit {
         protected appHelperService: AppHelperService,
     ) {
         this.sort = new MatSort();
-        this.displayedColumns = ['details', 'pos', 'image', 'name'];
-
         this.productsSub = new Subscription();
         this.products = [];
         this.userProducts = [];
         this.partnerProducts = [];
         this.contactPartnerProducts = [];
         this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
-        this.dataSourceUserProducts = new MatTableDataSource<PartnerFollowJsonld>(this.userProducts);
+        this.dataSourceUserProducts = new MatTableDataSource<UserProductJsonld>(this.userProducts);
         this.dataSourcePartnerProducts = new MatTableDataSource<PartnerProductJsonld>(this.partnerProducts);
         this.dataSourceContactPartnerProducts = new MatTableDataSource<ContactPartnerProductJsonld>(this.contactPartnerProducts);
         this.bShowNewProductButton = true;
-        this.nameOrderAsc = OrderFilter.Asc;
-
-        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'),
-            ListComponent.createColDefinition('name', 'form.product', ListComponent.COLUMN_TYPE_TEXT_LINKED, 'name'),
-        ];
+        this.nameOrderFilter = OrderFilter.Asc;
     }
 
     ngOnInit(){
-        if (this.partner || this.contact) {
-            this.displayedColumns.push('unassign');
+        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),
+                ListComponent.createColDefinition(
+                    'img', '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'),
+                ListComponent.createColDefinition(
+                    'name', 'form.product', ListComponent.COLUMN_TYPE_TEXT_LINKED, 'name', true),
+            ];
         }
+
         this.bShowNewProductButton =
             this.user === undefined && this.partner === undefined && this.contact === undefined;
     }
 
     ngAfterViewInit() {
         this.dataSourceProducts.sort = this.sort;
-        //this.dataSourceProducts.paginator = this.pagingComponent.paginator;
-        //this.pagingComponent.getData();
         this.listComponent.getData();
     }
 
@@ -130,16 +141,12 @@ export class ProductListComponent implements OnInit, AfterViewInit {
             this.listComponent.pagingComponent.getPageSize(),
             searchValue,
             undefined,
-            this.nameOrderAsc,
+            this.nameOrderFilter,
         ).subscribe(
             data => {
                 this.products = data["hydra:member"];
-                this.listComponent.pagingComponent.setDataLength(Number(data["hydra:totalItems"]));
                 this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
-
                 this.listComponent.setData(this.dataSourceProducts, Number(data["hydra:totalItems"]));
-
-
             }
         );
     }
@@ -152,19 +159,12 @@ export class ProductListComponent implements OnInit, AfterViewInit {
             undefined,
             undefined,
             undefined,
-            this.nameOrderAsc,
+            this.nameOrderFilter,
         ).subscribe(
             data => {
-                let userProducts = data["hydra:member"];
-                this.products = [];
-                userProducts.forEach(item => {
-                    if (item.product) {
-                        this.products.push(item.product);
-                    }
-
-                })
-                this.listComponent.pagingComponent.setDataLength(Number(data["hydra:totalItems"]));
-                this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
+                this.userProducts = data["hydra:member"];
+                this.dataSourceUserProducts = new MatTableDataSource<UserProductJsonld>(this.userProducts);
+                this.listComponent.setData(this.dataSourceUserProducts, Number(data["hydra:totalItems"]));
             }
         );
     }
@@ -179,11 +179,14 @@ export class ProductListComponent implements OnInit, AfterViewInit {
             undefined,
             undefined,
             searchValue,
+            undefined,
+            undefined,
+            this.nameOrderFilter,
         ).subscribe(
             data => {
                 this.partnerProducts = data["hydra:member"];
-                this.listComponent.pagingComponent.setDataLength(Number(data["hydra:totalItems"]));
                 this.dataSourcePartnerProducts = new MatTableDataSource<PartnerProductJsonld>(this.partnerProducts);
+                this.listComponent.setData(this.dataSourcePartnerProducts, Number(data["hydra:totalItems"]));
             }
         );
     }
@@ -194,51 +197,26 @@ export class ProductListComponent implements OnInit, AfterViewInit {
             this.listComponent.pagingComponent.getPageSize(),
             this.contact.id,
             undefined,
-            searchValue
+            searchValue,
+            this.nameOrderFilter,
         ).subscribe(
             data => {
                 this.contactPartnerProducts = data["hydra:member"];
-                this.listComponent.pagingComponent.setDataLength(Number(data["hydra:totalItems"]));
                 this.dataSourceContactPartnerProducts = new MatTableDataSource<ContactPartnerProductJsonld>(this.contactPartnerProducts);
+                this.listComponent.setData(this.dataSourceContactPartnerProducts, Number(data["hydra:totalItems"]));
             }
         );
     }
 
-    getElementValue(element: any, field: any): any {
-        if (this.user !== undefined) {
-            return element['partner'][field];
-        } else if (this.partner !== undefined) {
-            return element['partner'][field];
-        } else if (this.contact !== undefined) {
-            return element[field];
-        } else {
-            return element[field];
-        }
-    }
-
-    getProductFromElement(element: any): ProductJsonld {
-        if (this.user !== undefined) {
-            return element['product'];
-        } else if (this.partner !== undefined) {
-            return element['product'];
-        } else if (this.contact !== undefined) {
-            return element['product'];
-        } else {
-            return element;
-        }
-    }
-
     onSortChange = (sortState: Sort) => {
-        this.pagingComponent.resetPageIndex()
-
         let order: OrderFilter;
         if (sortState.direction === "") {
             order = OrderFilter.Undefined;
         } else {
             order = sortState.direction;
         }
-        this.nameOrderAsc = order;
-        this.pagingComponent.getData();
+        this.nameOrderFilter = order;
+        this.listComponent.getData();
     }
 
     navigateToProductDetails = (element: any, column?: any)=> {
@@ -290,7 +268,7 @@ export class ProductListComponent implements OnInit, AfterViewInit {
         }
     }
 
-    unassignProduct(element: any) {
+    unassignProduct = (element: any)=> {
         let confirmMessage = "";
         this.translateService.get('system.confirm-unassign').subscribe((translation: string) => {
             confirmMessage = translation;
@@ -300,15 +278,24 @@ export class ProductListComponent implements OnInit, AfterViewInit {
             if (this.partner) {
                 this.partnerProductService.partnerProductsIdDelete(this.appHelperService.extractId(element.id)).subscribe(
                     data => {
-                        this.getData(this.pagingComponent.getSearchValue());
+                        //this.getData(this.pagingComponent.getSearchValue());
+                        this.getData(this.listComponent.getSearchValue());
                     }
                 );
             } else if (this.contact) {
                 this.contactPartnerProductService.contactPartnerProductsIdDelete(this.appHelperService.extractId(element.id)).subscribe(
                     data => {
-                        this.getData(this.pagingComponent.getSearchValue());
+                        //this.getData(this.pagingComponent.getSearchValue());
+                        this.getData(this.listComponent.getSearchValue());
                     }
                 );
+            } else if (this.user) {
+                this.userProductService.userProductsIdDelete(this.appHelperService.extractId(element.id)).subscribe(
+                    data => {
+                        //this.getData(this.pagingComponent.getSearchValue());
+                        this.getData(this.listComponent.getSearchValue());
+                    }
+                )
             }
         }
     }

matsen-tool/src/app/core/api/v1/api/contactPartnerProduct.service.ts

@@ -107,13 +107,14 @@ export class ContactPartnerProductService {
      * @param contact 
      * @param contact2 
      * @param partnerProductProductName 
+     * @param orderPartnerProductProductName 
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public contactPartnerProductsGetCollection(page?: number, itemsPerPage?: number, contact?: string, contact2?: Array<string>, partnerProductProductName?: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<ApiContactPartnerProductsGetCollection200Response>;
-    public contactPartnerProductsGetCollection(page?: number, itemsPerPage?: number, contact?: string, contact2?: Array<string>, partnerProductProductName?: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<ApiContactPartnerProductsGetCollection200Response>>;
-    public contactPartnerProductsGetCollection(page?: number, itemsPerPage?: number, contact?: string, contact2?: Array<string>, partnerProductProductName?: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<ApiContactPartnerProductsGetCollection200Response>>;
-    public contactPartnerProductsGetCollection(page?: number, itemsPerPage?: number, contact?: string, contact2?: Array<string>, partnerProductProductName?: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+    public contactPartnerProductsGetCollection(page?: number, itemsPerPage?: number, contact?: string, contact2?: Array<string>, partnerProductProductName?: string, orderPartnerProductProductName?: 'asc' | 'desc', observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<ApiContactPartnerProductsGetCollection200Response>;
+    public contactPartnerProductsGetCollection(page?: number, itemsPerPage?: number, contact?: string, contact2?: Array<string>, partnerProductProductName?: string, orderPartnerProductProductName?: 'asc' | 'desc', observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<ApiContactPartnerProductsGetCollection200Response>>;
+    public contactPartnerProductsGetCollection(page?: number, itemsPerPage?: number, contact?: string, contact2?: Array<string>, partnerProductProductName?: string, orderPartnerProductProductName?: 'asc' | 'desc', observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<ApiContactPartnerProductsGetCollection200Response>>;
+    public contactPartnerProductsGetCollection(page?: number, itemsPerPage?: number, contact?: string, contact2?: Array<string>, partnerProductProductName?: string, orderPartnerProductProductName?: 'asc' | 'desc', observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
 
         let localVarQueryParameters = new HttpParams({encoder: this.encoder});
         if (page !== undefined && page !== null) {
@@ -138,6 +139,10 @@ export class ContactPartnerProductService {
           localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
             <any>partnerProductProductName, 'partnerProduct.product.name');
         }
+        if (orderPartnerProductProductName !== undefined && orderPartnerProductProductName !== null) {
+          localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+            <any>orderPartnerProductProductName, 'order[partnerProduct.product.name]');
+        }
 
         let localVarHeaders = this.defaultHeaders;
 

matsen-tool/src/app/core/api/v1/api/partnerProduct.service.ts

@@ -112,14 +112,15 @@ export class PartnerProductService {
      * @param productName 
      * @param partnerType 
      * @param partnerType2 
+     * @param orderProductName 
      * @param excludeContactId 
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public partnerProductsGetCollection(page?: number, itemsPerPage?: number, partner?: string, partner2?: Array<string>, partnerName?: string, product?: string, product2?: Array<string>, productName?: string, partnerType?: string, partnerType2?: Array<string>, excludeContactId?: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<ApiPartnerProductsGetCollection200Response>;
-    public partnerProductsGetCollection(page?: number, itemsPerPage?: number, partner?: string, partner2?: Array<string>, partnerName?: string, product?: string, product2?: Array<string>, productName?: string, partnerType?: string, partnerType2?: Array<string>, excludeContactId?: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<ApiPartnerProductsGetCollection200Response>>;
-    public partnerProductsGetCollection(page?: number, itemsPerPage?: number, partner?: string, partner2?: Array<string>, partnerName?: string, product?: string, product2?: Array<string>, productName?: string, partnerType?: string, partnerType2?: Array<string>, excludeContactId?: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<ApiPartnerProductsGetCollection200Response>>;
-    public partnerProductsGetCollection(page?: number, itemsPerPage?: number, partner?: string, partner2?: Array<string>, partnerName?: string, product?: string, product2?: Array<string>, productName?: string, partnerType?: string, partnerType2?: Array<string>, excludeContactId?: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+    public partnerProductsGetCollection(page?: number, itemsPerPage?: number, partner?: string, partner2?: Array<string>, partnerName?: string, product?: string, product2?: Array<string>, productName?: string, partnerType?: string, partnerType2?: Array<string>, orderProductName?: 'asc' | 'desc', excludeContactId?: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<ApiPartnerProductsGetCollection200Response>;
+    public partnerProductsGetCollection(page?: number, itemsPerPage?: number, partner?: string, partner2?: Array<string>, partnerName?: string, product?: string, product2?: Array<string>, productName?: string, partnerType?: string, partnerType2?: Array<string>, orderProductName?: 'asc' | 'desc', excludeContactId?: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<ApiPartnerProductsGetCollection200Response>>;
+    public partnerProductsGetCollection(page?: number, itemsPerPage?: number, partner?: string, partner2?: Array<string>, partnerName?: string, product?: string, product2?: Array<string>, productName?: string, partnerType?: string, partnerType2?: Array<string>, orderProductName?: 'asc' | 'desc', excludeContactId?: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<ApiPartnerProductsGetCollection200Response>>;
+    public partnerProductsGetCollection(page?: number, itemsPerPage?: number, partner?: string, partner2?: Array<string>, partnerName?: string, product?: string, product2?: Array<string>, productName?: string, partnerType?: string, partnerType2?: Array<string>, orderProductName?: 'asc' | 'desc', excludeContactId?: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
 
         let localVarQueryParameters = new HttpParams({encoder: this.encoder});
         if (page !== undefined && page !== null) {
@@ -168,6 +169,10 @@ export class PartnerProductService {
                   <any>element, 'partner.type[]');
             })
         }
+        if (orderProductName !== undefined && orderProductName !== null) {
+          localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+            <any>orderProductName, 'order[product.name]');
+        }
         if (excludeContactId !== undefined && excludeContactId !== null) {
           localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
             <any>excludeContactId, 'excludeContactId');