wip cleanup

matsen-tool/src/app/_components/list/list-get-data-function-type.ts

@@ -0,0 +1,4 @@
+// types.ts
+import { Observable } from 'rxjs';
+
+export type ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => Observable<any>;

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

@@ -1,5 +1,5 @@
 <app-paging #pagingComponent
-            [getDataFunction]="getDataFunction"
+            [getDataFunction]="getData"
             [dataSource]="dataSource"
             [searchable]="searchable"
             [hidePageSize]="hidePageSize"

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

@@ -4,23 +4,22 @@ import {PagingComponent} from "@app/_components/paging/paging.component";
 import {MatTableDataSource} from "@angular/material/table";
 import {ListColDefinition} from "@app/_components/list/list-col-definition";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
-
-type GeneralDataSource = MatTableDataSource<any>;
+import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 
 @Component({
   selector: 'app-list',
   templateUrl: './list.component.html',
   styleUrl: './list.component.scss'
 })
-export class ListComponent implements OnInit, AfterViewInit {
 
-    @Input() public dataSource!: GeneralDataSource;
-    @Input() public getDataFunction!: Function;
+export class ListComponent implements OnInit, AfterViewInit {
+    @Input() public getDataFunction!: ListGetDataFunctionType;
     @Input() public onSortFunction!: Function;
     @Input() public onNavigateToDetailsFunction!: Function;
     @Input() public onRemoveItemFunction!: Function;
     @Input() public onEditFunction!: Function;
     @Input() public onDownloadFunction!: Function;
+    @Input() public onRowSelectedFunction!: Function;
     @Input() public searchable: boolean;
     @Input() public showDetailButton: boolean;
     @Input() public showPosition: boolean;
@@ -74,6 +73,7 @@ export class ListComponent implements OnInit, AfterViewInit {
 
     protected displayedColumns!: string[];
     protected selectedRowIndex: number | null = null;
+    protected dataSource;
 
     constructor(
         protected appHelperService: AppHelperService,
@@ -83,45 +83,39 @@ export class ListComponent implements OnInit, AfterViewInit {
         this.showPosition = true;
         this.sort = new MatSort();
         this.hidePageSize = false;
+        this.dataSource = new MatTableDataSource<any>();
     }
 
     ngOnInit(): void {
-        this.displayedColumns = [];
-        let defaultRows: ListColDefinition[] = [];
-        if (this.showDetailButton) {
-            defaultRows.push(
-                {
-                    name: 'detail',
-                    text: 'overview.details',
-                    type: ListComponent.COLUMN_TYPE_DETAIL
-                } as ListColDefinition
-            );
-        }
         if (this.showPosition) {
-            defaultRows.push(
-                {
-                    name: 'pos',
-                    text: 'overview.number',
-                    type: ListComponent.COLUMN_TYPE_POSITION
-                } as ListColDefinition
-            );
+            this.listColDefinitions.unshift(ListComponent.getDefaultColPosition());
+        }
+        if (this.showDetailButton) {
+            this.listColDefinitions.unshift(ListComponent.getDefaultColDetailBtn());
         }
-        this.listColDefinitions = defaultRows.concat(this.listColDefinitions);
+        this.displayedColumns = [];
         this.listColDefinitions.forEach((value, index) => {
             this.displayedColumns.push(value.name);
         });
     }
 
     ngAfterViewInit(): void {
-        //  this.searchBoxOpen = false;
     }
 
-    getData(): void {
-        this.getDataFunction()
+    getData = (): void => {
+        this.getDataFunction(
+            this.pagingComponent.getPageIndex(),
+            this.pagingComponent.getPageSize(),
+            this.pagingComponent.getSearchValue()
+        ).subscribe(
+            data => {
+                this.dataSource = new MatTableDataSource<any>(data['hydra:member']);
+                this.pagingComponent.setDataLength(data["hydra:totalItems"]);
+            }
+        )
     }
 
     setData(dataSource: any, dataLength: number): void {
-        this.dataSource = dataSource;
         this.pagingComponent.dataSource = dataSource;
         this.pagingComponent.setDataLength(dataLength);
     }
@@ -133,6 +127,9 @@ export class ListComponent implements OnInit, AfterViewInit {
 
     onRowSelected(row: any, index: number) {
         this.selectedRowIndex = index;
+        if (this.onRowSelectedFunction !== undefined) {
+            this.onRowSelectedFunction(row, index);
+        }
     }
 
     getElementValue(element: any, column: ListColDefinition): string | null {
@@ -161,14 +158,6 @@ 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:
@@ -180,10 +169,6 @@ export class ListComponent implements OnInit, AfterViewInit {
         }
     }
 
-    public getSearchValue(): any {
-        return this.pagingComponent.getSearchValue();
-    }
-
     public getPageIndex() {
         return this.pagingComponent.getPageIndex();
     }
@@ -191,4 +176,20 @@ export class ListComponent implements OnInit, AfterViewInit {
     public getPageSize() {
         return this.pagingComponent.getPageSize();
     }
+
+    public static getDefaultColDetailBtn(): ListColDefinition {
+        return {
+            name: 'detail',
+            text: 'overview.details',
+            type: ListComponent.COLUMN_TYPE_DETAIL
+        } as ListColDefinition;
+    }
+
+    public static getDefaultColPosition(): ListColDefinition {
+        return {
+            name: 'pos',
+            text: 'overview.number',
+            type: ListComponent.COLUMN_TYPE_POSITION
+        } as ListColDefinition;
+    }
 }

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

@@ -13,7 +13,8 @@
                    [pageSize]="pageSize"
                    [pageIndex]="pageIndex"
                    [hidePageSize]="hidePageSize"
-                   showFirstLastButtons>
+                   showFirstLastButtons
+    >
     </mat-paginator>
 </div>
 <ng-content></ng-content>

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

@@ -79,7 +79,11 @@ export class PagingComponent implements OnInit, AfterViewInit {
     }
 
     getData() {
-        this.getDataFunction(this.searchForm ? this.searchForm.get('inputText')?.value : undefined);
+        this.getDataFunction(
+            this.getPageIndex(),
+            this.getPageSize(),
+            this.searchForm ? this.searchForm.get('inputText')?.value : undefined
+        );
     }
 
     handlePageEvent(e: PageEvent) {

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

@@ -5,51 +5,14 @@
     </div>
 <!--    <p>NAME {{documentForm.get(formId)}}<span>X</span></p>-->
     <div class="search-toggle" [class.search-box-open]="searchBoxOpen">
-        <app-paging #pagingComponent
-                        [getDataFunction]="getDataFunction"
-                        [dataSource]="dataSource"
-                        [searchable]="true"
-                        [hidePageSize]="true"
+        <app-list #listComponent
+              [getDataFunction]="getDataFunction"
+              [onSortFunction]="onSortChange"
+              [onRowSelectedFunction]="onRowSelected"
+              [listColDefinitions]="listColDefinitions"
+              [showDetailButton]="false"
+              [showPosition]="false"
         >
-
-            <div *ngIf="searchSelectColDefs" class="table-responsive">
-                <table mat-table [dataSource]="dataSource"  matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
-
-                    <ng-container *ngFor="let column of searchSelectColDefs" [matColumnDef]="column.column">
-                        <th mat-header-cell *matHeaderCellDef>
-                            {{ column.columnHeader | translate }}
-                        </th>
-                        <ng-container *ngIf="column.columnType == COLUMN_TYPE_POSITION">
-                            <td mat-cell *matCellDef="let element">
-                                {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
-                            </td>
-                        </ng-container>
-                        <ng-container *ngIf="column.columnType == COLUMN_TYPE_IMAGE">
-                            <td  mat-cell *matCellDef="let element">
-                                X{{element.imageUrl}}X
-                                <img *ngIf="element.imageUrl !== null && element.imageUrl !== undefined"
-                                     src="{{ getElementValue(element, column) }}" width="40" height="40"/>
-                                <img *ngIf="element.imageUrl === null || element.imageUrl === undefined"
-                                     src="/assets/images/icons/dummy-product.png" width="40" height="40" alt="" />
-                            </td>
-                        </ng-container>
-                        <ng-container *ngIf="column.columnType == COLUMN_TYPE_TEXT">
-                            <td  mat-cell *matCellDef="let element">
-                                {{ getElementValue(element, column) }}
-                            </td>
-                        </ng-container>
-
-                    </ng-container>
-
-                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                    <tr mat-row
-                        *matRowDef="let row; columns: displayedColumns; index as i;"
-                        (click)="onRowSelected(row, i)"
-                        [ngClass]="{'highlighted': selectedRowIndex === i}"
-                    ></tr>
-
-                </table>
-            </div>
-        </app-paging>
+        </app-list>
     </div>
 </div>

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

@@ -4,6 +4,9 @@ import {FormGroup} from "@angular/forms";
 import {SearchInputColDef} from "@app/_components/search-input/search-input-col-def";
 import {MatSort, Sort} from "@angular/material/sort";
 import {OrderFilter} from "@app/_models/orderFilter";
+import {ListComponent} from "@app/_components/list/list.component";
+import {ListColDefinition} from "@app/_components/list/list-col-definition";
+import {Observable} from "rxjs";
 
 @Component({
   selector: 'app-search-select',
@@ -11,41 +14,27 @@ import {OrderFilter} from "@app/_models/orderFilter";
   styleUrl: './search-select.component.scss'
 })
 export class SearchSelectComponent implements OnInit, AfterViewInit {
-
     @Input() public formId!: string;
     @Input() public formLabelLangKey!: string;
     @Input() public documentForm!: FormGroup;
     @Input() public documentFormField!: string;
-    @Input() public getDataFunction!: Function;
+    @Input() public getDataFunction!: (index: number, pageSize: number, term?: string) => Observable<any>;
     @Input() public dataSource: any;
-    @Input() public searchSelectColDefs!: SearchInputColDef[];
     @Input() public dataSet!: any;
     @Input() public displayedDataField!: string;
     @Input() public displayedDataSubResource!: string;
-
+    @Input() public listColDefinitions!: ListColDefinition[];
     @Output() rowSelected = new EventEmitter<any>();
-
     @ViewChild('paragraphRef', { static: false }) paragraphRef!: ElementRef;
-    @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent
-    @ViewChild(MatSort) sort;
-
-    static COLUMN_TYPE_POSITION: string = 'position';
-    static COLUMN_TYPE_TEXT: string = 'text';
-    static COLUMN_TYPE_IMAGE: string = 'image';
-    static validColumnTypes: string[] = [
-        SearchSelectComponent.COLUMN_TYPE_POSITION,
-        SearchSelectComponent.COLUMN_TYPE_TEXT,
-        SearchSelectComponent.COLUMN_TYPE_IMAGE
-    ];
-
-    protected displayedColumns!: string[];
+    @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
+    protected readonly SearchSelectComponent = SearchSelectComponent;
+
     protected selectedRowIndex: number | null = null;
     protected searchBoxOpen: boolean;
     protected searchBoxInitialized: boolean;
     protected searchBoxFilled: boolean;
 
     constructor() {
-        this.sort = new MatSort();
         this.searchBoxOpen = false;
         this.searchBoxInitialized = false;
         this.searchBoxFilled = false;
@@ -55,10 +44,6 @@ export class SearchSelectComponent implements OnInit, AfterViewInit {
         if (this.dataSet !== undefined) {
             this.searchBoxFilled = true;
         }
-        this.displayedColumns = [];
-        this.searchSelectColDefs.forEach((value, index) => {
-            this.displayedColumns.push(value.column);
-        });
     }
 
     ngAfterViewInit(): void {
@@ -67,33 +52,21 @@ export class SearchSelectComponent implements OnInit, AfterViewInit {
         }
     }
 
-    getData(): void {
-
-    }
-
     setData(dataSource: any, data: any[], dataLength: number): void {
-        this.dataSource = dataSource;
-        this.pagingComponent.dataSource = dataSource;
-        this.pagingComponent.setDataLength(dataLength);
-    }
-
-    getPagingComponent(): PagingComponent {
-        return this.pagingComponent;
+        this.listComponent.setData(dataSource, dataLength);
     }
 
     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();
     }
 
-    onRowSelected(row: any, index: number) {
+    onRowSelected = (row: any, index: number) => {
         this.selectedRowIndex = index;
         this.documentForm.get(this.formId)?.setValue(row.id);
         if (this.displayedDataSubResource !== undefined) {
@@ -105,58 +78,97 @@ export class SearchSelectComponent implements OnInit, AfterViewInit {
         this.searchBoxOpen = false;
     }
 
-    get COLUMN_TYPE_POSITION(): string {
-        return SearchSelectComponent.COLUMN_TYPE_POSITION;
+    openSearchBox() {
+        this.searchBoxOpen = !this.searchBoxOpen;
+        if (this.searchBoxOpen && !this.searchBoxInitialized) {
+            this.listComponent.getData();
+            this.searchBoxInitialized = true;
+        }
     }
 
-    get COLUMN_TYPE_IMAGE(): string {
-        return SearchSelectComponent.COLUMN_TYPE_IMAGE;
+    clearSearch() {
+        this.paragraphRef.nativeElement.textContent = '';
+        this.searchBoxFilled = false;
+        this.documentForm.get(this.formId)?.setValue(undefined);
     }
 
-    get COLUMN_TYPE_TEXT(): string {
-        return SearchSelectComponent.COLUMN_TYPE_TEXT;
+    public getPageIndex() {
+        return this.listComponent.getPageIndex();
     }
 
-    getElementValue(element: any, column: SearchInputColDef): any {
-        if (column.field) {
-            return column.subResource ? element[column.subResource][column.field] : element[column.field];
-        }
+    public getPageSize() {
+        return this.listComponent.getPageSize();
     }
 
-    static createColDef(
-        column: string,
-        columnHeader: string,
-        columnType: string,
-        field?: string,
-        subResource?: string
-    ): SearchInputColDef {
-        if (!this.validColumnTypes.includes(columnType)) {
-            throw Error('invalid column type');
-        }
+    public static getDefaultColDefPartners(): ListColDefinition[] {
+        return [
+            ListComponent.getDefaultColPosition(),
+            {
+                name: 'img',
+                text: 'overview.image',
+                type: ListComponent.COLUMN_TYPE_IMAGE,
+                field: 'logoUrl',
+            } as ListColDefinition,
+            {
+                name: 'name',
+                text: 'form.name',
+                type: ListComponent.COLUMN_TYPE_TEXT,
+                field: 'name',
+            }
+        ];
+    }
 
-        let res: SearchInputColDef = {} as SearchInputColDef;
-        res.column = column;
-        res.columnHeader = columnHeader;
-        res.columnType = columnType;
-        res.field = field;
-        res.subResource = subResource;
-        return res;
+    public static getDefaultColDefProducts(): ListColDefinition[] {
+        return [
+            ListComponent.getDefaultColPosition(),
+            {
+                name: 'img',
+                text: 'overview.image',
+                type: ListComponent.COLUMN_TYPE_IMAGE,
+                field: 'imageUrl',
+            } as ListColDefinition,
+            {
+                name: 'name',
+                text: 'form.product',
+                type: ListComponent.COLUMN_TYPE_TEXT,
+                field: 'name',
+            }
+        ];
     }
 
-    openSearchBox() {
-        // if (this.paragraphRef.nativeElement.textContent !== '') {
-        this.searchBoxOpen = !this.searchBoxOpen;
-        if (this.searchBoxOpen && !this.searchBoxInitialized) {
-            this.pagingComponent.getData();
-            this.searchBoxInitialized = true;
-        }
-        // }
+    public static getDefaultColDefContacts(): ListColDefinition[] {
+        return [
+            ListComponent.getDefaultColPosition(),
+            {
+                name: 'img',
+                text: 'overview.image',
+                type: ListComponent.COLUMN_TYPE_IMAGE,
+                field: 'imageUrl',
+            } as ListColDefinition,
+            {
+                name: 'name',
+                text: 'form.name',
+                type: ListComponent.COLUMN_TYPE_TEXT,
+                field: 'fullName',
+            }
+        ];
     }
 
-    clearSearch() {
-        this.paragraphRef.nativeElement.textContent = '';
-        this.searchBoxFilled = false;
-        this.documentForm.get(this.formId)?.setValue(undefined);
-        // this.searchBoxOpen = true;
+    public static getDefaultColDefUsers(): ListColDefinition[] {
+        return [
+            ListComponent.getDefaultColPosition(),
+            {
+                name: 'img',
+                text: 'overview.image',
+                type: ListComponent.COLUMN_TYPE_IMAGE,
+                field: 'imageUrl',
+            } as ListColDefinition,
+            {
+                name: 'name',
+                text: 'form.name',
+                type: ListComponent.COLUMN_TYPE_TEXT,
+                field: 'fullName',
+            }
+        ];
     }
 }

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

@@ -22,7 +22,6 @@ export class NewContactComponent implements OnInit, AfterViewInit {
     protected selectedImage: File | null;
     protected contactSub: Subscription;
     protected mediaSub: Subscription;
-
     protected birthdayValue: string;
 
     constructor(
@@ -33,12 +32,9 @@ export class NewContactComponent implements OnInit, AfterViewInit {
     ) {
         this.contactForm = contactForm;
         this.selectedImage = null;
-
         this.contactSub = new Subscription();
         this.mediaSub = new Subscription();
-
         this.birthdayValue = "";
-
     }
 
     ngOnInit(): void {
@@ -48,8 +44,6 @@ export class NewContactComponent implements OnInit, AfterViewInit {
     ngAfterViewInit(): void {
     }
 
-
-
     protected onBirthdayChange(selectedItem: any) {
         // Set T12:00 for correct string
         let selectedItemValue = null;
@@ -75,7 +69,6 @@ export class NewContactComponent implements OnInit, AfterViewInit {
         }
     }
 
-    // Submit all values of the form to the backend
     submitForm() {
         if (this.contactForm.valid) {
             if (this.contact.id === null || this.contact.id === undefined) {

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

@@ -3,14 +3,12 @@
         <button class="btn btn-primary" (click)="openModalNewDocument()">+ {{ 'basic.new-document' | translate }}</button>
     </div>
     <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

@@ -2,9 +2,7 @@ import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core'
 import {DocumentJsonld, DocumentService, PartnerJsonld, ProductJsonld} from "@app/core/api/v1";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {MatSort, Sort} from "@angular/material/sort";
-import {Subscription} from "rxjs";
 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";
@@ -21,19 +19,12 @@ export class DocumentListComponent implements OnInit, AfterViewInit {
     @Input() public partner!: PartnerJsonld;
     @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.documentsSub = new Subscription();
-        this.documents = [];
-        this.dataSource = new MatTableDataSource<DocumentJsonld>(this.documents);
-
         this.listColDefinitions = [
             {
                 name: 'name',
@@ -83,7 +74,6 @@ export class DocumentListComponent implements OnInit, AfterViewInit {
                 type: ListComponent.COLUMN_TYPE_BTN_EDIT,
             } as ListColDefinition,
         ];
-
     }
 
     ngOnInit(){
@@ -93,22 +83,15 @@ export class DocumentListComponent implements OnInit, AfterViewInit {
         this.listComponent.getData();
     }
 
-    getData = () => {
-        this.documentsSub = this.documentService.documentsGetCollection(
-            this.listComponent.getPageIndex(),
-            this.listComponent.getPageSize(),
+    getData = (index: number, pageSize: number, term?: string) => {
+        return this.documentService.documentsGetCollection(
+            index,
+            pageSize,
             undefined,
             undefined,
             this.partner !== undefined ? this.partner.id : undefined,
             undefined,
             this.product !== undefined ? this.product.id : undefined
-
-        ).subscribe(
-            data => {
-                this.documents = data["hydra:member"];
-                this.dataSource = new MatTableDataSource<DocumentJsonld>(this.documents);
-                this.listComponent.setData(this.dataSource, Number(data["hydra:totalItems"]));
-            }
         );
     }
 
@@ -129,11 +112,11 @@ export class DocumentListComponent implements OnInit, AfterViewInit {
 
     openModalNewDocument() {
         let document: DocumentJsonld = {} as DocumentJsonld;
-        this.appHelperService.openModal(NewDocumentComponent, { 'document': document }, this.getData);
+        this.appHelperService.openModal(NewDocumentComponent, { 'document': document }, this.listComponent.getData);
     }
 
     openModalEditDocument(element: DocumentJsonld) {
-        this.appHelperService.openModal(NewDocumentComponent, { 'document': element }, this.getData);
+        this.appHelperService.openModal(NewDocumentComponent, { 'document': element }, this.listComponent.getData);
     }
 
 }

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

@@ -19,10 +19,9 @@
                                [formLabelLangKey]="'form.partner'"
                                [documentForm]="documentForm"
                                [getDataFunction]="getPartners"
-                               [dataSource]="dataSourcePartners"
-                               [searchSelectColDefs]="colDefPartners"
                                [displayedDataField]="'name'"
                                [dataSet]="document.partner"
+                               [listColDefinitions]="SearchSelectComponent.getDefaultColDefPartners()"
             >
             </app-search-select>
             <input type="hidden" id="partner" formControlName="partner"/>
@@ -35,10 +34,9 @@
                                [formLabelLangKey]="'form.product'"
                                [documentForm]="documentForm"
                                [getDataFunction]="getProducts"
-                               [dataSource]="dataSourceProducts"
-                               [searchSelectColDefs]="colDefProducts"
                                [displayedDataField]="'name'"
                                [dataSet]="document.product"
+                               [listColDefinitions]="SearchSelectComponent.getDefaultColDefProducts()"
             >
             </app-search-select>
             <input type="hidden" id="product" formControlName="product"/>

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

@@ -1,18 +1,17 @@
 import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import {
     DocumentJsonld, DocumentObjectService,
-    DocumentService, PartnerJsonld, PartnerService, ProductJsonld, ProductService, UserJsonld, UserService
+    DocumentService, PartnerService, ProductService
 } from "@app/core/api/v1";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroup} from "@angular/forms";
-import {Observable, Subscription} from "rxjs";
+import {Observable} from "rxjs";
 import {TranslateService} from "@ngx-translate/core";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {documentForm} from "@app/_forms/apiForms";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {SearchSelectComponent} from "@app/_components/search-select/search-select.component";
-import {MatTableDataSource} from "@angular/material/table";
-import {SearchInputColDef} from "@app/_components/search-input/search-input-col-def";
+import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 
 @Component({
     selector: 'app-new-document',
@@ -22,20 +21,12 @@ import {SearchInputColDef} from "@app/_components/search-input/search-input-col-
 export class NewDocumentComponent implements OnInit, AfterViewInit  {
     @Input() public document!: DocumentJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
-
     @ViewChild('partnerSearchSelect', { static: false }) partnerSearchSelect!: SearchSelectComponent;
     @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent;
+    protected readonly SearchSelectComponent = SearchSelectComponent;
 
     protected documentForm: FormGroup;
-    protected documentSub: Subscription;
     protected selectedFile: File | null;
-    protected documentObjectSub: Subscription;
-    protected partners: Array<PartnerJsonld>;
-    protected dataSourcePartners;
-    protected products: Array<ProductJsonld>;
-    protected dataSourceProducts;
-    protected colDefPartners: SearchInputColDef[];
-    protected colDefProducts: SearchInputColDef[];
 
     constructor(
         protected documentService: DocumentService,
@@ -45,25 +36,8 @@ export class NewDocumentComponent implements OnInit, AfterViewInit  {
         protected productService: ProductService,
         protected appHelperService: AppHelperService,
     ) {
-        this.partners = [];
-        this.dataSourcePartners = new MatTableDataSource<PartnerJsonld>(this.partners);
-        this.products = [];
-        this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
         this.documentForm = documentForm;
-        this.documentSub = new Subscription();
         this.selectedFile = null;
-        this.documentObjectSub = new Subscription();
-
-        this.colDefPartners = [
-            SearchSelectComponent.createColDef('pos', 'overview.number', SearchSelectComponent.COLUMN_TYPE_POSITION),
-            SearchSelectComponent.createColDef('img', 'overview.image', SearchSelectComponent.COLUMN_TYPE_IMAGE, 'logoUrl'),
-            SearchSelectComponent.createColDef('name', 'form.name', SearchSelectComponent.COLUMN_TYPE_TEXT, 'name'),
-        ];
-        this.colDefProducts = [
-            SearchSelectComponent.createColDef('pos', 'overview.number', SearchSelectComponent.COLUMN_TYPE_POSITION),
-            SearchSelectComponent.createColDef('img', 'overview.image', SearchSelectComponent.COLUMN_TYPE_IMAGE, 'imageUrl'),
-            SearchSelectComponent.createColDef('name', 'form.product', SearchSelectComponent.COLUMN_TYPE_TEXT, 'name'),
-        ];
     }
 
     ngOnInit(): void {
@@ -71,44 +45,29 @@ export class NewDocumentComponent implements OnInit, AfterViewInit  {
     }
 
     ngAfterViewInit(): void {
-        this.partnerSearchSelect.getData();
-        this.productSearchSelect.getData();
     }
 
-    getPartners = (term: string): void => {
-        this.partnerService.partnersGetCollection(
-            this.partnerSearchSelect.pagingComponent.getPageIndex(),
-            this.partnerSearchSelect.pagingComponent.getPageSize(),
+    getPartners: ListGetDataFunctionType = (index: number, pageSize: number, term?: string): Observable<any>  =>  {
+        return this.partnerService.partnersGetCollection(
+            index,
+            pageSize,
             undefined,
             undefined,
             term
-        ).subscribe(
-            data => {
-                this.partners = data['hydra:member'];
-                this.dataSourcePartners = new MatTableDataSource<PartnerJsonld>(this.partners);
-                this.partnerSearchSelect.setData(this.dataSourcePartners, this.partners, Number(data["hydra:totalItems"]));
-            }
-        )
+        );
     }
 
-    getProducts = (term?: string): void => {
-        // NOTE: all products that are not assigned to partner yet
-        this.productService.productsGetCollection(
-            this.productSearchSelect.pagingComponent.getPageIndex(),
-            this.productSearchSelect.pagingComponent.getPageSize(),
+    getProducts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string): Observable<any>  =>  {
+        return this.productService.productsGetCollection(
+            index,
+            pageSize,
             term
-        ).subscribe(
-            data => {
-                this.products = data['hydra:member'];
-                this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
-                this.productSearchSelect.setData(this.dataSourceProducts, this.products, Number(data["hydra:totalItems"]));
-            }
         );
     }
 
     onSubmit() {
         if (this.selectedFile !== null) {
-            this.documentObjectSub = this.documentObjectService.documentObjectsPost(
+            this.documentObjectService.documentObjectsPost(
                 this.selectedFile
             ).subscribe(
                 data => {
@@ -125,7 +84,7 @@ export class NewDocumentComponent implements OnInit, AfterViewInit  {
         if (this.documentForm.valid) {
             if (this.document.id === null || this.document.id === undefined) {
                 // Create new product
-                this.documentSub = this.documentService.documentsPost(
+                this.documentService.documentsPost(
                     this.documentForm.value as DocumentJsonld
                 ).subscribe(
                     data => {
@@ -135,7 +94,7 @@ export class NewDocumentComponent implements OnInit, AfterViewInit  {
                 );
             } else {
                 // Edit contact
-                this.documentSub = this.documentService.documentsIdPatch(
+                this.documentService.documentsIdPatch(
                     this.appHelperService.extractId(this.document.id),
                     this.documentForm.value as DocumentJsonld
                 ).subscribe(

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

@@ -3,8 +3,7 @@
         <button class="btn btn-primary" (click)="openModalNewPartner()">+ {{ 'basic.new' | translate }} {{ partnerColumnHeadline }}</button>
     </div>
     <app-list #listComponent
-              [dataSource]="getDataSource()"
-              [getDataFunction]="getData"
+              [getDataFunction]="getDataFunction"
               [onNavigateToDetailsFunction]="navigateToPartnerDetails"
               [onSortFunction]="onSortChange"
               [onRemoveItemFunction]="unassignPartner"

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

@@ -1,12 +1,10 @@
 import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
-import {PagingComponent} from "@app/_components/paging/paging.component";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
-import {MatSort, Sort} from "@angular/material/sort";
-import {Subscription} from "rxjs";
+import {Sort} from "@angular/material/sort";
+import {Observable} from "rxjs";
 import {
-    PartnerFollowJsonld,
     PartnerFollowService,
-    PartnerJsonld, PartnerProductJsonld,
+    PartnerJsonld,
     PartnerProductService,
     PartnerService,
     ProductJsonld,
@@ -14,14 +12,13 @@ import {
 } from "@app/core/api/v1";
 import {OrderFilter} from "@app/_models/orderFilter";
 import {Router} from "@angular/router";
-import {MatTableDataSource} from "@angular/material/table";
 import {NewPartnerComponent} from "@app/_views/partners/new-partner/new-partner.component";
 import TypeEnum = PartnerJsonld.PartnerTypeEnum;
 import {ListColDefinition} from "@app/_components/list/list-col-definition";
 import {ListComponent} from "@app/_components/list/list.component";
 import {TranslateService} from "@ngx-translate/core";
 import {ListColTypeAddress} from "@app/_components/list/list-col-type-address";
-type GeneralDataSource = MatTableDataSource<any>;
+import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 
 @Component({
   selector: 'app-partner-list',
@@ -33,22 +30,14 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
     @Input() public user!: UserJsonld;
     @Input() public product!: ProductJsonld;
     @Input("partnerType") partnerType!: string;
-    @ViewChild(MatSort) sort;
     @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
-    @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
 
-    protected partnersSub: Subscription;
-    protected partners: Array<PartnerJsonld>;
-    protected userPartners: Array<PartnerFollowJsonld>;
-    protected partnerProducts: Array<PartnerProductJsonld>;
-    protected dataSourcePartners;
-    protected dataSourceUserPartners;
-    protected dataSourcePartnerProducts;
     protected nameOrderAsc: OrderFilter;
     protected cityOrderAsc: OrderFilter;
     protected websiteOrderAsc: OrderFilter;
     protected partnerColumnHeadline: string;
     protected listColDefinitions!: ListColDefinition[];
+    protected getDataFunction!: ListGetDataFunctionType;
 
     constructor(
         protected partnerService: PartnerService,
@@ -58,14 +47,6 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
         protected appHelperService: AppHelperService,
         protected translateService: TranslateService,
     ) {
-        this.sort = new MatSort();
-        this.partnersSub = new Subscription();
-        this.partners = [];
-        this.userPartners = [];
-        this.partnerProducts = [];
-        this.dataSourcePartners = new MatTableDataSource<PartnerJsonld>(this.partners);
-        this.dataSourceUserPartners = new MatTableDataSource<PartnerFollowJsonld>(this.userPartners);
-        this.dataSourcePartnerProducts = new MatTableDataSource<PartnerProductJsonld>(this.partnerProducts);
         this.nameOrderAsc = OrderFilter.Asc;
         this.cityOrderAsc = OrderFilter.Asc;
         this.websiteOrderAsc = OrderFilter.Asc;
@@ -73,6 +54,10 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
     }
 
     ngOnInit() {
+        this.translateService.get('basic.' + this.partnerType + 'One').subscribe((translation: string) => {
+            this.partnerColumnHeadline = translation;
+        });
+
         let withSubResource: boolean = (this.user !== undefined || this.product !== undefined);
         this.listColDefinitions = [
             {
@@ -101,7 +86,7 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
                     city: 'city',
                     country: 'country',
                 } as ListColTypeAddress,
-                sortable: false,
+                sortable: true,
                 subResource: withSubResource ? 'partner' : undefined
             } as ListColDefinition,
             {
@@ -122,94 +107,69 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
                 } as ListColDefinition
             )
         }
-    }
-
-    ngAfterViewInit() {
-        this.listComponent.getData();
-    }
-
-    getDataSource(): GeneralDataSource {
         if (this.user !== undefined) {
-            return this.dataSourceUserPartners;
+            this.getDataFunction = this.getPartnerData;
         } else if (this.product !== undefined) {
-            return this.dataSourcePartnerProducts;
+            this.getDataFunction =  this.getUserPartnerData
         } else {
-            return this.dataSourcePartners;
+            this.getDataFunction =  this.getPartnerData;
         }
     }
 
-    getData = (searchValue = undefined) => {
+    ngAfterViewInit() {
+        this.listComponent.getData();
+    }
+
+    getData = (): ListGetDataFunctionType => {
         if (this.user !== undefined) {
-            this.getUserPartnerData(searchValue);
+            return this.getUserPartnerData;
         } else if (this.product !== undefined) {
-            this.getPartnerProducts(searchValue);
-        } else {
-            this.getPartnerData(searchValue);
+            return this.getPartnerProducts;
         }
+        return this.getPartnerData;
     }
 
-    getPartnerData = (searchValue = undefined) => {
-        this.partnersSub = this.partnerService.partnersGetCollection(
-            this.listComponent.getPageIndex(),
-            this.listComponent.getPageSize(),
+    getPartnerData: ListGetDataFunctionType = (index: number, pageSize: number, term?: string): Observable<any>  =>  {
+        return this.partnerService.partnersGetCollection(
+            index,
+            pageSize,
             this.partnerType,
             undefined,
-            searchValue,
+            term,
             this.nameOrderAsc,
             this.cityOrderAsc,
             this.websiteOrderAsc
-        ).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"]));
-            }
         );
     }
 
-    getUserPartnerData = (searchValue = undefined) => {
-        this.partnersSub = this.partnerFollowService.partnerFollowsGetCollection(
-            this.listComponent.getPageIndex(),
-            this.listComponent.getPageSize(),
+    getUserPartnerData: ListGetDataFunctionType = (index: number, pageSize: number, term?: string): Observable<any>  =>  {
+        return this.partnerFollowService.partnerFollowsGetCollection(
+            index,
+            pageSize,
             undefined,
             undefined,
-            searchValue,
+            term,
             this.user.id,
             undefined,
             this.partnerType
-        ).subscribe(
-            data => {
-                this.userPartners = data["hydra:member"];
-                this.dataSourceUserPartners = new MatTableDataSource<PartnerFollowJsonld>(this.userPartners);
-                this.listComponent.setData(this.dataSourcePartners, Number(data["hydra:totalItems"]));
-            }
         );
     }
 
-    getPartnerProducts = (searchValue = undefined) => {
-        this.partnersSub = this.partnerProductService.partnerProductsGetCollection(
-            this.listComponent.getPageIndex(),
-            this.listComponent.getPageSize(),
+    getPartnerProducts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string): Observable<any>  =>  {
+        return this.partnerProductService.partnerProductsGetCollection(
+            index,
+            pageSize,
             undefined,
             undefined,
-            searchValue,
+            term,
             this.product.id,
             undefined,
             undefined,
             this.partnerType,
-        ).subscribe(
-            data => {
-                this.partnerProducts = data["hydra:member"];
-                this.dataSourcePartnerProducts = new MatTableDataSource<PartnerProductJsonld>(this.partnerProducts);
-                this.listComponent.setData(this.dataSourcePartnerProducts, Number(data["hydra:totalItems"]));
-            }
         );
     }
 
     onSortChange = (sortState: Sort) => {
-        this.pagingComponent.resetPageIndex()
-
         let order: OrderFilter;
         if (sortState.direction === "") {
             order = OrderFilter.Undefined;
@@ -231,7 +191,7 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
                 this.websiteOrderAsc = order;
                 break;
         }
-        this.pagingComponent.getData();
+        this.listComponent.getData();
     }
 
     navigateToPartnerDetails = (element: any) => {
@@ -260,13 +220,13 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
             if (this.user) {
                 this.partnerFollowService.partnerFollowsIdDelete(this.appHelperService.extractId(element.id)).subscribe(
                     data => {
-                        this.getData(this.listComponent.getSearchValue());
+                        this.listComponent.getData();
                     }
                 );
             } else if (this.product) {
                 this.partnerProductService.partnerProductsIdDelete(this.appHelperService.extractId(element.id)).subscribe(
                     data => {
-                        this.getData(this.listComponent.getSearchValue());
+                        this.listComponent.getData();
                     }
                 );
             }

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

@@ -20,8 +20,8 @@
                                    [documentForm]="postForm"
                                    [getDataFunction]="getProducts"
                                    [dataSource]="dataSourceProducts"
-                                   [searchSelectColDefs]="colDefProducts"
                                    [displayedDataField]="'name'"
+                                   [listColDefinitions]="SearchSelectComponent.getDefaultColDefPartners()"
                 >
                 </app-search-select>
                 <input id="product" type="hidden" *ngIf="this.posting.id === null || this.posting.id === undefined"

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

@@ -14,6 +14,7 @@ import {Subscription} from "rxjs";
 import {SearchSelectComponent} from "@app/_components/search-select/search-select.component";
 import {MatTableDataSource} from "@angular/material/table";
 import {SearchInputColDef} from "@app/_components/search-input/search-input-col-def";
+import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 
 @Component({
     selector: 'app-new-post',
@@ -25,12 +26,12 @@ export class NewPostComponent implements OnInit {
     @Input() public product!: ProductJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
     @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent;
+    protected readonly SearchSelectComponent = SearchSelectComponent;
 
     protected postForm: FormGroup;
     protected postSub: Subscription;
     protected products: Array<ProductJsonld>;
     protected dataSourceProducts;
-    protected colDefProducts: SearchInputColDef[];
 
     constructor(
         private postService: PostService,
@@ -41,29 +42,17 @@ export class NewPostComponent implements OnInit {
         this.postSub = new Subscription();
         this.products = [];
         this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
-        this.colDefProducts = [
-            SearchSelectComponent.createColDef('pos', 'overview.number', SearchSelectComponent.COLUMN_TYPE_POSITION),
-            SearchSelectComponent.createColDef('img', 'overview.image', SearchSelectComponent.COLUMN_TYPE_IMAGE, 'imageUrl'),
-            SearchSelectComponent.createColDef('name', 'form.product', SearchSelectComponent.COLUMN_TYPE_TEXT, 'name'),
-        ];
     }
 
     ngOnInit(): void {
         this.postForm = FormGroupInitializer.initFormGroup(this.postForm, this.posting);
     }
 
-    getProducts = (term?: string): void => {
-        // NOTE: all products that are not assigned to partner yet
-        this.productService.productsGetCollection(
-            this.productSearchSelect.pagingComponent.getPageIndex(),
-            this.productSearchSelect.pagingComponent.getPageSize(),
+    getProducts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => {
+        return this.productService.productsGetCollection(
+            index,
+            pageSize,
             term
-        ).subscribe(
-            data => {
-                this.products = data['hydra:member'];
-                this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
-                this.productSearchSelect.setData(this.dataSourceProducts, this.products, Number(data["hydra:totalItems"]));
-            }
         );
     }
 

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

@@ -10,8 +10,8 @@
                [documentForm]="form"
                [getDataFunction]="getUnassignedProducts"
                [dataSource]="dataSourceProducts"
-               [searchSelectColDefs]="colDefProducts"
                [displayedDataField]="'name'"
+               [listColDefinitions]="SearchSelectComponent.getDefaultColDefPartners()"
             >
                 <input type="hidden" id="product" formControlName="productIri" value="{{partnerProduct.productIri}}"/>
             </app-search-select>
@@ -24,9 +24,9 @@
                [documentForm]="form"
                [getDataFunction]="getUnassignedPartnerProducts"
                [dataSource]="dataSourcePartnerProducts"
-               [searchSelectColDefs]="colDefPartnerProducts"
                [displayedDataField]="'name'"
                [displayedDataSubResource]="'product'"
+               [listColDefinitions]="SearchSelectComponent.getDefaultColDefPartners()"
             >
                 <input type="hidden" id="partnerProduct" formControlName="partnerProductIri" value="{{contactPartnerProduct.partnerProductIri}}"/>
             </app-search-select>

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

@@ -12,6 +12,7 @@ import {SearchSelectComponent} from "@app/_components/search-select/search-selec
 import {MatTableDataSource} from "@angular/material/table";
 import {SearchInputColDef} from "@app/_components/search-input/search-input-col-def";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
+import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 
 @Component({
   selector: 'app-assign-product',
@@ -23,7 +24,8 @@ export class AssignProductComponent implements OnInit, AfterViewInit {
     @Input() public partnerProduct!: PartnerProductJsonld;
     @Input() public contactPartnerProduct!: ContactPartnerProductJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
-    @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent;
+    @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent
+    protected readonly SearchSelectComponent = SearchSelectComponent;
 
     protected products: Array<ProductJsonld>;
     protected dataSourceProducts;
@@ -31,9 +33,6 @@ export class AssignProductComponent implements OnInit, AfterViewInit {
     protected dataSourcePartnerProducts;
     protected form!: FormGroup;
 
-    protected colDefProducts: SearchInputColDef[];
-    protected colDefPartnerProducts: SearchInputColDef[];
-
     constructor(
         protected productService: ProductService,
         protected partnerProductService: PartnerProductService,
@@ -45,18 +44,6 @@ export class AssignProductComponent implements OnInit, AfterViewInit {
 
         this.partnerProducts = [];
         this.dataSourcePartnerProducts = new MatTableDataSource<PartnerProductJsonld>(this.partnerProducts);
-
-        this.colDefProducts = [
-            SearchSelectComponent.createColDef('pos', 'overview.number', SearchSelectComponent.COLUMN_TYPE_POSITION),
-            SearchSelectComponent.createColDef('img', 'overview.image', SearchSelectComponent.COLUMN_TYPE_IMAGE, 'imageUrl'),
-            SearchSelectComponent.createColDef('name', 'overview.productname', SearchSelectComponent.COLUMN_TYPE_TEXT, 'name')
-        ];
-
-        this.colDefPartnerProducts = [
-            SearchSelectComponent.createColDef('pos', 'overview.number', SearchSelectComponent.COLUMN_TYPE_POSITION),
-            SearchSelectComponent.createColDef('img', 'overview.image', SearchSelectComponent.COLUMN_TYPE_IMAGE, 'imageUrl', 'product'),
-            SearchSelectComponent.createColDef('name', 'overview.productname', SearchSelectComponent.COLUMN_TYPE_TEXT, 'name', 'product')
-        ];
     }
 
     ngOnInit(): void {
@@ -69,30 +56,21 @@ export class AssignProductComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit(): void {
-        this.productSearchSelect.getData();
     }
 
-    getUnassignedProducts = (term?: string): void => {
-        // NOTE: all products that are not assigned to partner yet
-        this.productService.productsGetCollection(
-            this.productSearchSelect.pagingComponent.getPageIndex(),
-            this.productSearchSelect.pagingComponent.getPageSize(),
+    getUnassignedProducts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => {
+        return this.productService.productsGetCollection(
+            index,
+            pageSize,
             term,
             this.appHelperService.extractId(this.partnerProduct.partnerIri)
-        ).subscribe(
-            data => {
-                this.products = data['hydra:member'];
-                this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
-                this.productSearchSelect.setData(this.dataSourceProducts, this.products, Number(data["hydra:totalItems"]));
-            }
         );
     }
 
-    getUnassignedPartnerProducts = (term: string) => {
-        // NOTE: all partner products that are not assigned to contact yet
-        this.partnerProductService.partnerProductsGetCollection(
-            1,
-            50,
+    getUnassignedPartnerProducts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => {
+        return this.partnerProductService.partnerProductsGetCollection(
+            index,
+            pageSize,
             this.partnerIri,
             undefined,
             undefined,
@@ -103,12 +81,6 @@ export class AssignProductComponent implements OnInit, AfterViewInit {
             undefined,
             undefined,
             this.appHelperService.extractId(this.contactPartnerProduct.contactIri)
-        ).subscribe(
-            data => {
-                this.partnerProducts = data['hydra:member'];
-                this.dataSourcePartnerProducts = new MatTableDataSource<PartnerProductJsonld>(this.partnerProducts);
-                this.productSearchSelect.setData(this.dataSourceProducts, this.partnerProducts, Number(data["hydra:totalItems"]));
-            }
         );
     }
 

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

@@ -4,8 +4,7 @@
         <button *ngIf="!bShowNewProductButton" class="btn btn-primary" (click)="openModalAssignProduct()">+ {{ 'basic.assign-product' | translate }}</button>
     </div>
     <app-list #listComponent
-        [dataSource]="getDataSource()"
-        [getDataFunction]="getData"
+        [getDataFunction]="getDataFunction"
         [onNavigateToDetailsFunction]="navigateToProductDetails"
         [onRemoveItemFunction]="unassignProduct"
         [onSortFunction]="onSortChange"

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

@@ -1,25 +1,24 @@
 import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
-import {MatSort, Sort} from "@angular/material/sort";
-import {Subscription} from "rxjs";
+import {Sort} from "@angular/material/sort";
+import {Observable} from "rxjs";
 import {
     ContactJsonld, ContactPartnerProductJsonld, ContactPartnerProductService,
     PartnerJsonld, PartnerProductJsonld,
     PartnerProductService,
     ProductJsonld,
     ProductService,
-    UserJsonld, UserProductJsonld,
+    UserJsonld,
     UserProductService
 } from "@app/core/api/v1";
 import {Router} from "@angular/router";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
-import {MatTableDataSource} from "@angular/material/table";
 import {OrderFilter} from "@app/_models/orderFilter";
 import {NewProductComponent} from "@app/_views/products/new-product/new-product.component";
 import {AssignProductComponent} from "@app/_views/products/assign-product/assign-product.component";
 import {TranslateService} from "@ngx-translate/core";
 import {ListColDefinition} from "@app/_components/list/list-col-definition";
 import {ListComponent} from "@app/_components/list/list.component";
-type GeneralDataSource = MatTableDataSource<any>;
+import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 
 @Component({
   selector: 'app-product-list',
@@ -33,18 +32,10 @@ export class ProductListComponent implements OnInit, AfterViewInit {
     @Input() public contact!: ContactJsonld;
     @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
 
-    protected productsSub: Subscription;
-    protected products: Array<ProductJsonld>;
-    protected userProducts: Array<UserProductJsonld>;
-    protected partnerProducts: Array<PartnerProductJsonld>;
-    protected contactPartnerProducts: Array<ContactPartnerProductJsonld>;
-    protected dataSourceProducts;
-    protected dataSourceUserProducts;
-    protected dataSourcePartnerProducts;
-    protected dataSourceContactPartnerProducts;
     protected bShowNewProductButton: boolean;
     protected nameOrderFilter: OrderFilter;
     protected listColDefinitions!: ListColDefinition[];
+    protected getDataFunction!: ListGetDataFunctionType;
 
     constructor(
         private router: Router,
@@ -55,15 +46,6 @@ export class ProductListComponent implements OnInit, AfterViewInit {
         private contactPartnerProductService: ContactPartnerProductService,
         protected appHelperService: AppHelperService,
     ) {
-        this.productsSub = new Subscription();
-        this.products = [];
-        this.userProducts = [];
-        this.partnerProducts = [];
-        this.contactPartnerProducts = [];
-        this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
-        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.nameOrderFilter = OrderFilter.Asc;
     }
@@ -101,106 +83,68 @@ export class ProductListComponent implements OnInit, AfterViewInit {
 
         this.bShowNewProductButton =
             this.user === undefined && this.partner === undefined && this.contact === undefined;
-    }
-
-    ngAfterViewInit() {
-        this.listComponent.getData();
-    }
 
-    getDataSource(): GeneralDataSource {
         if (this.user !== undefined) {
-            return this.dataSourceUserProducts;
+            this.getDataFunction = this.getUserProducts;
         } else if (this.partner !== undefined) {
-            return this.dataSourcePartnerProducts;
+            this.getDataFunction = this.getPartnerProducts;
         } else if (this.contact !== undefined) {
-            return this.dataSourceContactPartnerProducts;
+            this.getDataFunction = this.getContactPartnerProduct;
         } else {
-            return this.dataSourceProducts;
+            this.getDataFunction = this.getProducts;
         }
     }
 
-    getData = (searchValue = undefined) => {
-        if (this.user !== undefined) {
-            this.getUserProducts(searchValue);
-        } else if (this.partner !== undefined) {
-            this.getPartnerProducts(searchValue);
-        } else if (this.contact !== undefined) {
-            this.getContactPartnerProduct(searchValue);
-        } else {
-            this.getProducts(searchValue);
-        }
+    ngAfterViewInit() {
+        this.listComponent.getData();
     }
 
-    getProducts = (searchValue = undefined) => {
-        this.productsSub = this.productService.productsGetCollection(
-            this.listComponent.getPageIndex(),
-            this.listComponent.getPageSize(),
-            searchValue,
+    getProducts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string): Observable<any>  =>  {
+        return this.productService.productsGetCollection(
+            index,
+            pageSize,
+            term,
             undefined,
             this.nameOrderFilter,
-        ).subscribe(
-            data => {
-                this.products = data["hydra:member"];
-                this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
-                this.listComponent.setData(this.dataSourceProducts, Number(data["hydra:totalItems"]));
-            }
         );
     }
 
-    getUserProducts = (searchValue = undefined) => {
-        this.productsSub = this.userProductService.userProductsGetCollection(
-            this.listComponent.getPageIndex(),
-            this.listComponent.getPageSize(),
+    getUserProducts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => {
+        return this.userProductService.userProductsGetCollection(
+            index,
+            pageSize,
             this.user.id,
             undefined,
             undefined,
             undefined,
             this.nameOrderFilter,
-        ).subscribe(
-            data => {
-                this.userProducts = data["hydra:member"];
-                this.dataSourceUserProducts = new MatTableDataSource<UserProductJsonld>(this.userProducts);
-                this.listComponent.setData(this.dataSourceUserProducts, Number(data["hydra:totalItems"]));
-            }
         );
     }
 
-    getPartnerProducts = (searchValue= undefined) => {
-        this.productsSub = this.partnerProductService.partnerProductsGetCollection(
-            this.listComponent.getPageIndex(),
-            this.listComponent.getPageSize(),
+    getPartnerProducts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => {
+        return this.partnerProductService.partnerProductsGetCollection(
+            index,
+            pageSize,
             this.partner.id,
             undefined,
             undefined,
             undefined,
             undefined,
-            searchValue,
+            term,
             undefined,
             undefined,
             this.nameOrderFilter,
-        ).subscribe(
-            data => {
-                this.partnerProducts = data["hydra:member"];
-                this.dataSourcePartnerProducts = new MatTableDataSource<PartnerProductJsonld>(this.partnerProducts);
-                this.listComponent.setData(this.dataSourcePartnerProducts, Number(data["hydra:totalItems"]));
-            }
         );
     }
 
-    getContactPartnerProduct = (searchValue = undefined) => {
-        this.productsSub = this.contactPartnerProductService.contactPartnerProductsGetCollection(
+    getContactPartnerProduct: ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => {
+        return this.contactPartnerProductService.contactPartnerProductsGetCollection(
             this.listComponent.getPageIndex(),
             this.listComponent.getPageSize(),
             this.contact.id,
             undefined,
-            searchValue,
+            term,
             this.nameOrderFilter,
-        ).subscribe(
-            data => {
-                this.contactPartnerProducts = data["hydra:member"];
-                this.dataSourceContactPartnerProducts = new MatTableDataSource<ContactPartnerProductJsonld>(this.contactPartnerProducts);
-                this.listComponent.setData(this.dataSourceContactPartnerProducts, Number(data["hydra:totalItems"]));
-            }
         );
     }
 
@@ -227,7 +171,7 @@ export class ProductListComponent implements OnInit, AfterViewInit {
 
     openModalNewProduct() {
         let product: ProductJsonld = {} as ProductJsonld;
-        this.appHelperService.openModal(NewProductComponent, { 'product': product }, this.getData);
+        this.appHelperService.openModal(NewProductComponent, { 'product': product }, this.listComponent.getData);
     }
 
     openModalAssignProduct() {
@@ -235,7 +179,7 @@ export class ProductListComponent implements OnInit, AfterViewInit {
             this.appHelperService.openModal(
                 AssignProductComponent,
                 { 'user' : this.user },
-                this.getUserProducts
+                this.listComponent.getData
             );
         } else if (this.partner !== undefined) {
             let partnerProduct: PartnerProductJsonld = {} as PartnerProductJsonld;
@@ -243,7 +187,7 @@ export class ProductListComponent implements OnInit, AfterViewInit {
             this.appHelperService.openModal(
                 AssignProductComponent,
                 { 'partnerProduct' : partnerProduct },
-                this.getPartnerProducts
+                this.listComponent.getData
             );
         } else if (this.contact !== undefined) {
             let contactPartnerProduct: ContactPartnerProductJsonld = {} as ContactPartnerProductJsonld;
@@ -251,7 +195,7 @@ export class ProductListComponent implements OnInit, AfterViewInit {
             this.appHelperService.openModal(
                 AssignProductComponent,
                 { 'contactPartnerProduct' : contactPartnerProduct, 'partnerIri' : this.contact.partnerIri },
-                this.getContactPartnerProduct
+                this.listComponent.getData
             );
         } else {
             throw new Error('data not found')
@@ -268,22 +212,19 @@ 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.listComponent.getSearchValue());
+                        this.listComponent.getData();
                     }
                 );
             } else if (this.contact) {
                 this.contactPartnerProductService.contactPartnerProductsIdDelete(this.appHelperService.extractId(element.id)).subscribe(
                     data => {
-                        //this.getData(this.pagingComponent.getSearchValue());
-                        this.getData(this.listComponent.getSearchValue());
+                        this.listComponent.getData();
                     }
                 );
             } else if (this.user) {
                 this.userProductService.userProductsIdDelete(this.appHelperService.extractId(element.id)).subscribe(
                     data => {
-                        //this.getData(this.pagingComponent.getSearchValue());
-                        this.getData(this.listComponent.getSearchValue());
+                        this.listComponent.getData();
                     }
                 )
             }

matsen-tool/src/app/_views/profile/profile.component.html

@@ -1,3 +1,3 @@
-<app-user-detail
+<app-user-detail *ngIf="user"
     [user]="user"
 ></app-user-detail>

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

@@ -1,7 +1,8 @@
 import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {AccountService} from "@app/_services";
-import {UserJsonld} from "@app/core/api/v1";
+import {UserJsonld, UserService} from "@app/core/api/v1";
 import {UserDetailComponent} from "@app/_views/user/user-detail/user-detail.component";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 @Component({
   selector: 'app-profile',
@@ -16,13 +17,23 @@ export class ProfileComponent implements OnInit, AfterViewInit {
 
     constructor(
         private accountService: AccountService,
+        private userService: UserService,
+        private appHelperService: AppHelperService
     ) {
-        if (this.accountService.userValue?.userResource) {
-            this.user = this.accountService.userValue?.userResource;
+        const user = this.accountService.userValue;
+        if (user?.id !== null && user?.id !== undefined) {
+            this.userService.usersIdGet(
+                this.appHelperService.extractId(user.id)
+            ).subscribe(
+                data => {
+                    this.user = data;
+                }
+            );
         }
     }
 
     ngOnInit() {
+
     }
 
     ngAfterViewInit(): void {

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

@@ -10,8 +10,8 @@
                    [documentForm]="saleForm"
                    [getDataFunction]="getPartners"
                    [dataSource]="dataSourcePartners"
-                   [searchSelectColDefs]="colDefPartners"
                    [displayedDataField]="'name'"
+                   [listColDefinitions]="SearchSelectComponent.getDefaultColDefPartners()"
             >
             </app-search-select>
             <input type="hidden" formControlName="partnerIri"/>
@@ -24,8 +24,8 @@
                    [documentForm]="saleForm"
                    [getDataFunction]="getProducts"
                    [dataSource]="dataSourceProducts"
-                   [searchSelectColDefs]="colDefProducts"
                    [displayedDataField]="'name'"
+                   [listColDefinitions]="SearchSelectComponent.getDefaultColDefProducts()"
             >
             </app-search-select>
             <input type="hidden" formControlName="productIri"/>

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

@@ -8,7 +8,7 @@ import {
 } from "@app/core/api/v1";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroup} from "@angular/forms";
-import {Subscription} from "rxjs";
+import {Observable, Subscription} from "rxjs";
 import {TranslateService} from "@ngx-translate/core";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {saleForm} from "@app/_forms/apiForms";
@@ -16,6 +16,8 @@ import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {SearchSelectComponent} from "@app/_components/search-select/search-select.component";
 import {MatTableDataSource} from "@angular/material/table";
 import {SearchInputColDef} from "@app/_components/search-input/search-input-col-def";
+import {ListComponent} from "@app/_components/list/list.component";
+import {ListColDefinition} from "@app/_components/list/list-col-definition";
 
 @Component({
     selector: 'app-new-sale',
@@ -25,9 +27,9 @@ import {SearchInputColDef} from "@app/_components/search-input/search-input-col-
 export class NewSaleComponent implements OnInit, AfterViewInit {
     @Input() public sale!: SaleJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
-
     @ViewChild('partnerSearchSelect', { static: false }) partnerSearchSelect!: SearchSelectComponent;
     @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent;
+    protected readonly SearchSelectComponent = SearchSelectComponent;
 
     protected saleForm: FormGroup;
     protected saleSub: Subscription;
@@ -35,10 +37,6 @@ export class NewSaleComponent implements OnInit, AfterViewInit {
     protected dataSourcePartners;
     protected products: Array<ProductJsonld>;
     protected dataSourceProducts;
-    protected colDefPartners: SearchInputColDef[];
-    protected colDefProducts: SearchInputColDef[];
-
-    protected formatter = (apiData: any) => apiData.name;
 
     constructor(
         private saleService: SaleService,
@@ -53,16 +51,6 @@ export class NewSaleComponent implements OnInit, AfterViewInit {
         this.dataSourcePartners = new MatTableDataSource<PartnerJsonld>(this.partners);
         this.products = [];
         this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
-        this.colDefPartners = [
-            SearchSelectComponent.createColDef('pos', 'overview.number', SearchSelectComponent.COLUMN_TYPE_POSITION),
-            SearchSelectComponent.createColDef('img', 'overview.image', SearchSelectComponent.COLUMN_TYPE_IMAGE, 'logoUrl'),
-            SearchSelectComponent.createColDef('name', 'form.name', SearchSelectComponent.COLUMN_TYPE_TEXT, 'name'),
-        ];
-        this.colDefProducts = [
-            SearchSelectComponent.createColDef('pos', 'overview.number', SearchSelectComponent.COLUMN_TYPE_POSITION),
-            SearchSelectComponent.createColDef('img', 'overview.image', SearchSelectComponent.COLUMN_TYPE_IMAGE, 'imageUrl'),
-            SearchSelectComponent.createColDef('name', 'form.product', SearchSelectComponent.COLUMN_TYPE_TEXT, 'name'),
-        ];
     }
 
     ngOnInit(): void {
@@ -70,38 +58,23 @@ export class NewSaleComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit(): void {
-        this.partnerSearchSelect.getData();
-        this.productSearchSelect.getData();
     }
 
-    getPartners = (term: string): void => {
-        this.partnerService.partnersGetCollection(
-            this.partnerSearchSelect.pagingComponent.getPageIndex(),
-            this.partnerSearchSelect.pagingComponent.getPageSize(),
+    getPartners = (index: number, pageSize: number, term?: string): Observable<any> => {
+        return this.partnerService.partnersGetCollection(
+            index,
+            pageSize,
             undefined,
             undefined,
             term
-        ).subscribe(
-            data => {
-                this.partners = data['hydra:member'];
-                this.dataSourcePartners = new MatTableDataSource<PartnerJsonld>(this.partners);
-                this.partnerSearchSelect.setData(this.dataSourcePartners, this.partners, Number(data["hydra:totalItems"]));
-            }
-        )
+        );
     }
 
-    getProducts = (term?: string): void => {
-        // NOTE: all products that are not assigned to partner yet
-        this.productService.productsGetCollection(
-            this.productSearchSelect.pagingComponent.getPageIndex(),
-            this.productSearchSelect.pagingComponent.getPageSize(),
+    getProducts = (index: number, pageSize: number, term?: string): Observable<any> => {
+        return this.productService.productsGetCollection(
+            index,
+            pageSize,
             term
-        ).subscribe(
-            data => {
-                this.products = data['hydra:member'];
-                this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
-                this.productSearchSelect.setData(this.dataSourceProducts, this.products, Number(data["hydra:totalItems"]));
-            }
         );
     }
 

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

@@ -3,7 +3,6 @@
         <button *ngIf="!this.user" class="btn btn-primary" (click)="openModalNewSale()">+ {{ 'basic.new-sale' | translate }}</button>
     </div>
     <app-list #listComponent
-              [dataSource]="dataSource"
               [getDataFunction]="getData"
               [onNavigateToDetailsFunction]="navigateToSaleDetails"
               [onSortFunction]="onSortChange"

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

@@ -25,11 +25,6 @@ export class SaleListComponent implements OnInit, AfterViewInit {
     @Input() public partner!: PartnerJsonld;
     @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
 
-    protected salesSub: Subscription;
-    protected sales: Array<SaleJsonld>;
-    protected salesSummarySub: Subscription;
-    protected saleSummaries: Array<SaleSummaryJsonld>;
-    protected dataSource;
     protected listColDefinitions!: ListColDefinition[];
 
     constructor(
@@ -38,11 +33,6 @@ export class SaleListComponent implements OnInit, AfterViewInit {
         protected appHelperService: AppHelperService,
         protected accountService: AccountService,
     ) {
-        this.salesSub = new Subscription();
-        this.sales = [];
-        this.salesSummarySub = new Subscription();
-        this.saleSummaries = [];
-        this.dataSource = new MatTableDataSource<SaleJsonld>(this.sales);
         this.listColDefinitions = [
             {
                 name: 'user',
@@ -99,22 +89,16 @@ export class SaleListComponent implements OnInit, AfterViewInit {
         this.listComponent.getData();
     }
 
-    getData = () => {
-        this.salesSub = this.saleService.salesGetCollection(
-            this.listComponent.getPageIndex(),
-            this.listComponent.getPageSize(),
+    getData = (index: number, pageSize: number, term?: string) => {
+        return this.saleService.salesGetCollection(
+            index,
+            pageSize,
             this.user !== undefined ? this.user.id : undefined,
             undefined,
             this.partner !== undefined ? this.partner.id : undefined,
             undefined,
             this.product !== undefined ? this.product.id : undefined,
-        ).subscribe(
-            data => {
-                this.sales = data["hydra:member"];
-                this.dataSource = new MatTableDataSource<SaleJsonld>(this.sales);
-                this.listComponent.setData(this.dataSource, Number(data["hydra:totalItems"]));
-            }
-        )
+        );
     }
 
     onSortChange = (sortState: Sort)=> {
@@ -130,14 +114,13 @@ export class SaleListComponent implements OnInit, AfterViewInit {
     }
 
     navigateToSaleDetails = (element: any) => {
-        console.log(element);
         const sale: SaleJsonld = element as SaleJsonld;
         this.router.navigate(['/sale', this.appHelperService.extractId(sale.id)]);
     }
 
     openModalNewSale() {
         let sale: SaleJsonld = {} as SaleJsonld;
-        this.appHelperService.openModal(NewSaleComponent, { 'sale': sale }, this.getData);
+        this.appHelperService.openModal(NewSaleComponent, { 'sale': sale }, this.listComponent.getData);
     }
 
 }

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

@@ -21,7 +21,6 @@ export class SaleSummaryComponent implements OnInit, AfterViewInit  {
 
     constructor(
         private saleSummaryService: SaleSummaryService,
-        private router: Router,
         protected appHelperService: AppHelperService,
     ) {
         this.salesSummarySub = new Subscription();
@@ -30,10 +29,10 @@ export class SaleSummaryComponent implements OnInit, AfterViewInit  {
     }
 
     ngOnInit(): void {
-        this.getData();
     }
 
     ngAfterViewInit(): void {
+        this.getData();
     }
 
     getData() {

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

@@ -18,9 +18,9 @@
                                [documentForm]="taskNoteForm"
                                [getDataFunction]="getContacts"
                                [dataSource]="dataSourceContacts"
-                               [searchSelectColDefs]="colDefContacts"
                                [displayedDataField]="'fullName'"
                                [dataSet]="taskNote.contact"
+                               [listColDefinitions]="SearchSelectComponent.getDefaultColDefContacts()"
             >
             </app-search-select>
             <input type="hidden" formControlName="contactIri" value="{{taskNote.contactIri}}"/>

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

@@ -15,6 +15,7 @@ import {taskNoteForm} from "@app/_forms/apiForms";
 import {SearchSelectComponent} from "@app/_components/search-select/search-select.component";
 import {MatTableDataSource} from "@angular/material/table";
 import {SearchInputColDef} from "@app/_components/search-input/search-input-col-def";
+import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 
 @Component({
     selector: 'app-new-task-note',
@@ -26,13 +27,13 @@ export class NewTaskNoteComponent implements OnInit, AfterViewInit {
     @Input() public taskNote!: TaskNoteJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
     @ViewChild('contactSearchSelect', { static: false }) contactSearchSelect!: SearchSelectComponent;
+    protected readonly SearchSelectComponent = SearchSelectComponent;
 
     protected taskNoteForm: FormGroup;
     protected taskNoteSub: Subscription;
     protected contactTypes = Object.values(TaskNoteJsonld.ContactTypeEnum);
     protected contacts: Array<ContactJsonld>;
     protected dataSourceContacts;
-    protected colDefContacts: SearchInputColDef[];
 
     constructor(
         protected taskNoteService: TaskNoteService,
@@ -43,12 +44,6 @@ export class NewTaskNoteComponent implements OnInit, AfterViewInit {
         this.taskNoteSub = new Subscription();
         this.contacts = [];
         this.dataSourceContacts = new MatTableDataSource<ContactJsonld>(this.contacts);
-
-        this.colDefContacts = [
-            SearchSelectComponent.createColDef('pos', 'overview.number', SearchSelectComponent.COLUMN_TYPE_POSITION),
-            SearchSelectComponent.createColDef('img', 'overview.image', SearchSelectComponent.COLUMN_TYPE_IMAGE, 'imageUrl'),
-            SearchSelectComponent.createColDef('name', 'form.name', SearchSelectComponent.COLUMN_TYPE_TEXT, 'fullName')
-        ];
     }
 
     ngOnInit(): void {
@@ -64,19 +59,13 @@ export class NewTaskNoteComponent implements OnInit, AfterViewInit {
 
     }
 
-    getContacts = (term?: string): void => {
-        this.contactService.contactsGetCollection(
-            this.contactSearchSelect.pagingComponent.getPageIndex(),
-            this.contactSearchSelect.pagingComponent.getPageSize(),
+    getContacts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => {
+        return this.contactService.contactsGetCollection(
+            this.contactSearchSelect.getPageIndex(),
+            this.contactSearchSelect.getPageSize(),
             this.task.partnerIri!,
             undefined,
             term
-        ).subscribe(
-            data => {
-                this.contacts = data['hydra:member'];
-                this.dataSourceContacts = new MatTableDataSource<ContactJsonld>(this.contacts);
-                this.contactSearchSelect.setData(this.dataSourceContacts, this.contacts, Number(data["hydra:totalItems"]));
-            }
         );
     }
 

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

@@ -26,9 +26,9 @@
                                [documentForm]="taskForm"
                                [getDataFunction]="getProducts"
                                [dataSource]="dataSourceProducts"
-                               [searchSelectColDefs]="colDefProducts"
                                [displayedDataField]="'name'"
                                [dataSet]="task.product"
+                               [listColDefinitions]="SearchSelectComponent.getDefaultColDefProducts()"
             >
                 <input type="hidden" formControlName="productIri" value="{{task.productIri}}"/>
             </app-search-select>
@@ -43,9 +43,9 @@
                                [documentForm]="taskForm"
                                [getDataFunction]="getUsers"
                                [dataSource]="dataSourceUsers"
-                               [searchSelectColDefs]="colDefUsers"
                                [displayedDataField]="'fullName'"
                                [dataSet]="task.assignedTo"
+                               [listColDefinitions]="SearchSelectComponent.getDefaultColDefUsers()"
             >
                 <input type="hidden" formControlName="assignedToIri" value="{{task.productIri}}"/>
             </app-search-select>

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

@@ -18,6 +18,7 @@ import {filter, map} from "rxjs/operators";
 import {MatTableDataSource} from "@angular/material/table";
 import {SearchSelectComponent} from "@app/_components/search-select/search-select.component";
 import {SearchInputColDef} from "@app/_components/search-input/search-input-col-def";
+import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 
 @Component({
     selector: 'app-new-task',
@@ -29,6 +30,7 @@ export class NewTaskComponent implements OnInit, AfterViewInit {
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
     @ViewChild('userSearchSelect', { static: false }) userSearchSelect!: SearchSelectComponent;
     @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent;
+    protected readonly SearchSelectComponent = SearchSelectComponent;
 
     protected taskForm: FormGroup;
     protected taskSub: Subscription;
@@ -40,15 +42,9 @@ export class NewTaskComponent implements OnInit, AfterViewInit {
     protected products: Array<ProductJsonld>;
     protected dataSourceProducts;
 
-    protected colDefUsers: SearchInputColDef[];
-    protected colDefProducts: SearchInputColDef[];
-
-    protected formatter = (apiData: any) => apiData.name;
-
     constructor(
         protected taskService: TaskService,
         protected userService: UserService,
-        protected partnerService: PartnerService,
         protected productService: ProductService,
         protected appHelperService: AppHelperService
     ) {
@@ -59,17 +55,6 @@ export class NewTaskComponent implements OnInit, AfterViewInit {
         this.taskForm = taskForm;
         this.taskSub = new Subscription();
         this.dueAtValue = "";
-
-        this.colDefUsers = [
-            SearchSelectComponent.createColDef('pos', 'overview.number', SearchSelectComponent.COLUMN_TYPE_POSITION),
-            SearchSelectComponent.createColDef('img', 'overview.image', SearchSelectComponent.COLUMN_TYPE_IMAGE, 'imageUrl'),
-            SearchSelectComponent.createColDef('name', 'form.name', SearchSelectComponent.COLUMN_TYPE_TEXT, 'fullName'),
-        ];
-        this.colDefProducts = [
-            SearchSelectComponent.createColDef('pos', 'overview.number', SearchSelectComponent.COLUMN_TYPE_POSITION),
-            SearchSelectComponent.createColDef('img', 'overview.image', SearchSelectComponent.COLUMN_TYPE_IMAGE, 'imageUrl'),
-            SearchSelectComponent.createColDef('name', 'form.product', SearchSelectComponent.COLUMN_TYPE_TEXT, 'name'),
-        ];
     }
 
     ngOnInit(): void {
@@ -86,81 +71,26 @@ export class NewTaskComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit(): void {
-        this.userSearchSelect.getData();
-        this.productSearchSelect.getData();
     }
 
-    getUsers = (term?: string): void => {
-        this.userService.usersGetCollection(1, 50, undefined, term)
-        this.userService.usersGetCollection(
-            this.userSearchSelect.pagingComponent.getPageIndex(),
-            this.userSearchSelect.pagingComponent.getPageSize(),
+    getUsers: ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => {
+        return this.userService.usersGetCollection(
+            index,
+            pageSize,
             undefined,
             undefined,
             term
-        ).subscribe(
-            data => {
-                this.users = data['hydra:member'];
-                this.dataSourceUsers = new MatTableDataSource<UserJsonld>(this.users);
-                this.userSearchSelect.setData(this.dataSourceUsers, this.users, Number(data["hydra:totalItems"]));
-            }
-        )
-    }
-
-    getProducts = (term?: string): void => {
-        // NOTE: all products that are not assigned to partner yet
-        this.productService.productsGetCollection(
-            this.productSearchSelect.pagingComponent.getPageIndex(),
-            this.productSearchSelect.pagingComponent.getPageSize(),
-            term
-        ).subscribe(
-            data => {
-                this.products = data['hydra:member'];
-                this.dataSourceProducts = new MatTableDataSource<ProductJsonld>(this.products);
-                this.productSearchSelect.setData(this.dataSourceProducts, this.products, Number(data["hydra:totalItems"]));
-            }
-        );
-    }
-
-
-    protected searchUsers: OperatorFunction<string, readonly { id: any; name: any }[]> = (text$: Observable<string>) =>
-        text$.pipe(
-            debounceTime(200),
-            distinctUntilChanged(),
-            filter((term) => term.length >= 2),
-            switchMap((term) => this.fetchUsers(term)),
-            map((users) => users.slice(0, 10)),
-        );
-
-    protected searchPartners: OperatorFunction<string, readonly { id: any; name: any }[]> = (text$: Observable<string>) =>
-        text$.pipe(
-            debounceTime(200),
-            distinctUntilChanged(),
-            filter((term) => term.length >= 2),
-            switchMap((term) => this.fetchPartners(term)),
-            map((partners) => partners.slice(0, 10)),
-        );
-
-    protected fetchUsers(term: string): Observable<{ id: any; name: any }[]> {
-        return this.userService.usersGetCollection(1, 50, undefined, term).pipe(
-            map((response) => response['hydra:member'].map(user => ({ id: user.id, name: user.firstName + ' ' + user.lastName }))),
         );
     }
 
-    protected fetchPartners(term: string): Observable<{ id: any; name: any }[]> {
-        return this.partnerService.partnersGetCollection(1, 50, undefined, undefined, term).pipe(
-            map((response) => response['hydra:member'].map(partner => ({ id: partner.id, name: partner.name }))),
+    getProducts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => {
+        return this.productService.productsGetCollection(
+            index,
+            pageSize,
+            term
         );
     }
 
-    protected onPartnerSelect(selectedItem: any): void {
-        this.taskForm.get('partner')?.setValue(selectedItem.item.id);
-    }
-
-    protected onAssignedToSelect(selectedItem: any): void {
-        this.taskForm.get('assignedTo')?.setValue(selectedItem.item.id);
-    }
-
     protected onDueAtChange(selectedItem: any) {
         // Set T12:00 for correct string
         let selectedItemValue = selectedItem.target.value + "T12:00";
@@ -193,5 +123,4 @@ export class NewTaskComponent implements OnInit, AfterViewInit {
             }
         }
     }
-
 }

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

@@ -1,15 +1,7 @@
-import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
-import {NewTaskComponent} from "@app/_views/tasks/new-task/new-task.component";
-import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {AppHelperService} from "@app/_helpers/app-helper.service";
-import {Subscription} from "rxjs";
-import {TaskJsonld, TaskNoteJsonld, TaskService} from "@app/core/api/v1";
-import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
-import {MatTableDataSource} from "@angular/material/table";
 import {User} from "@app/_models";
 import {AccountService} from "@app/_services";
-import {ModalStatus} from "@app/_helpers/modal.states";
-import {NewTaskNoteComponent} from "@app/_views/tasks/new-task-note/new-task-note.component";
 import {TaskListComponent} from "@app/_views/tasks/task-list/task-list.component";
 
 @Component({

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

@@ -39,7 +39,7 @@
         >
         </app-sale-list>
         <app-sale-summary *ngIf="toggleSales.isOpened" #saleSummaryComponent
-                          [user]="user"
+            [user]="user"
         >
         </app-sale-summary>
     </app-toggle>

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

@@ -20,7 +20,6 @@ import {ActivatedRoute} from "@angular/router";
 })
 export class UserDetailComponent implements OnInit, AfterViewInit {
     @Input() public user!: UserJsonld;
-
     @ViewChild("togglePosts", { static: true }) togglePosts!: ToggleComponent;
     @ViewChild("postListComponent", { static: false }) postsComponent!: PostListComponent;
     @ViewChild("toggleTasks", { static: true }) toggleTasks!: ToggleComponent;
@@ -51,6 +50,7 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
     }
 
     ngOnInit() {
+        console.log(this.user);
         if (this.user === undefined) {
             this.route.params.subscribe(params => {
                 this.getUserData(params['id']);
@@ -61,13 +61,7 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit(): void {
-        // if (this.accountService.userValue?.userResource) {
-        //     let user = this.accountService.userValue?.userResource;
-        //     if (this.user.id === user.id) {
-        //         this.isCurrentUser = true;
-        //     }
-        //     this.isCurrentUser = this.userId == user?.id;
-        // }
+
     }
 
     getUserData(userId: string) {

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

@@ -1,6 +1,5 @@
 <div class="spt-container">
     <app-list #listComponent
-              [dataSource]="dataSource"
               [getDataFunction]="getData"
               [onNavigateToDetailsFunction]="navigateToUserDetails"
               [onSortFunction]="onSortChange"

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

@@ -10,6 +10,7 @@ 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";
+import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 
 @Component({
   selector: 'app-user-list',
@@ -20,9 +21,6 @@ export class UserListComponent implements OnInit, AfterViewInit {
 
     @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
 
-    protected usersSub: Subscription;
-    protected users: Array<UserJsonld>;
-    protected dataSource;
     protected listColDefinitions!: ListColDefinition[];
 
     constructor(
@@ -30,9 +28,6 @@ export class UserListComponent implements OnInit, AfterViewInit {
         private router: Router,
         protected appHelperService: AppHelperService,
     ) {
-        this.usersSub = new Subscription();
-        this.users = [];
-        this.dataSource = new MatTableDataSource<UserJsonld>(this.users);
         this.listColDefinitions = [
             {
                 name: 'image',
@@ -72,19 +67,13 @@ export class UserListComponent implements OnInit, AfterViewInit {
         this.listComponent.getData();
     }
 
-    getData = (term? : string): void => {
-        this.usersSub = this.userService.usersGetCollection(
-            this.listComponent.getPageIndex(),
-            this.listComponent.getPageSize(),
+    getData: ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => {
+        return this.userService.usersGetCollection(
+            index,
+            pageSize,
             undefined,
             undefined,
             term
-        ).subscribe(
-            data => {
-                this.users = data["hydra:member"];
-                this.dataSource = new MatTableDataSource<UserJsonld>(this.users);
-                this.listComponent.setData(this.dataSource, Number(data["hydra:totalItems"]));
-            }
         );
     }
 

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

@@ -20,16 +20,18 @@ 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_CUSTOMER = 'customer';
 export const ROUTE_DOCUMENT = 'document';
+export const ROUTE_PRODUCT = 'product';
+export const ROUTE_PROFILE = 'profile';
 export const ROUTE_SALE = 'sale';
+export const ROUTE_SERVICE = 'service';
+export const ROUTE_SUPPLIER = 'supplier';
+export const ROUTE_TASK = 'task';
 export const ROUTE_USER = 'user';
 
+
 const routes: Routes = [
     {path: '', component: HomeComponent, canActivate: [userGuard]},
     {path: 'account', loadChildren: accountModule},
@@ -104,7 +106,7 @@ const routes: Routes = [
         ]
     },
     {
-        path: ROUTE_PRODUCT,
+        path: ROUTE_PROFILE,
         component: TwoColumnComponent,
         canActivate: [userGuard],
         children: [