all seacrh selects

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

@@ -13,26 +13,28 @@
         </div>
 
         <div class="mb-3">
-            <app-search-input #partnerSearchInput
-                  [formId]="'partner'"
-                  [formLabelLangKey]="'form.partner'"
-                  [dataField]="'partnerName'"
-                  [documentForm]="documentForm"
-                  [documentFormField]="'partnerName'"
-                  [fetchFunction]="fetchPartners">
-            </app-search-input>
+            <app-search-select #partnerSearchSelect
+                              [formId]="'partnerIri'"
+                              [formLabelLangKey]="'form.partner'"
+                              [documentForm]="documentForm"
+                              [getDataFunction]="getPartners"
+                              [dataSource]="dataSourcePartners"
+                              [searchSelectColDefs]="colDefPartners"
+            >
+            </app-search-select>
             <input type="hidden" formControlName="partner"/>
         </div>
 
         <div class="mb-3">
-            <app-search-input #productSearchInput
-                  [formId]="'product'"
-                  [formLabelLangKey]="'form.product'"
-                  [dataField]="'productName'"
-                  [documentForm]="documentForm"
-                  [documentFormField]="'productName'"
-                  [fetchFunction]="fetchProducts">
-            </app-search-input>
+            <app-search-select #productSearchSelect
+                              [formId]="'productIri'"
+                              [formLabelLangKey]="'form.product'"
+                              [documentForm]="documentForm"
+                              [getDataFunction]="getProducts"
+                              [dataSource]="dataSourceProducts"
+                              [searchSelectColDefs]="colDefProducts"
+            >
+            </app-search-select>
             <input type="hidden" formControlName="product"/>
         </div>
 

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

@@ -1,65 +1,108 @@
-import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import {
     DocumentJsonld, DocumentObjectService,
-    DocumentService, MediaObjectService, PartnerJsonld, PartnerService, ProductService
+    DocumentService, PartnerJsonld, PartnerService, ProductJsonld, ProductService, UserJsonld, UserService
 } from "@app/core/api/v1";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroup} from "@angular/forms";
-import {debounceTime, distinctUntilChanged, Observable, OperatorFunction, Subscription, switchMap} from "rxjs";
+import {Observable, Subscription} 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 {filter, map} from "rxjs/operators";
-import {SearchInputComponent} from "@app/_components/search-input/search-input.component";
+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";
 
 @Component({
     selector: 'app-new-document',
     templateUrl: './new-document.component.html',
     styleUrl: './new-document.component.scss'
 })
-export class NewDocumentComponent implements OnInit {
+export class NewDocumentComponent implements OnInit, AfterViewInit  {
     @Input() public document!: DocumentJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
 
-    @ViewChild('partnerSearchInput', { static: false }) $partnerSearchInput!: SearchInputComponent;
-    @ViewChild('productSearchInput', { static: false }) $productSearchInput!: SearchInputComponent;
+    @ViewChild('partnerSearchSelect', { static: false }) partnerSearchSelect!: SearchSelectComponent;
+    @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent;
 
     protected documentForm: FormGroup;
     protected documentSub: Subscription;
-
     protected selectedFile: File | null;
     protected documentObjectSub: Subscription;
-
-    protected formatter = (apiData: any) => apiData.name;
+    protected partners: Array<PartnerJsonld>;
+    protected dataSourcePartners;
+    protected products: Array<ProductJsonld>;
+    protected dataSourceProducts;
+    protected colDefPartners: SearchInputColDef[];
+    protected colDefProducts: SearchInputColDef[];
 
     constructor(
-        private documentService: DocumentService,
-        private documentObjectService: DocumentObjectService,
-        private translateService: TranslateService,
-        private partnerService: PartnerService,
-        private productService: ProductService,
+        protected documentService: DocumentService,
+        protected documentObjectService: DocumentObjectService,
+        protected translateService: TranslateService,
+        protected partnerService: PartnerService,
+        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 {
         this.documentForm = FormGroupInitializer.initFormGroup(this.documentForm, this.document);
     }
 
-    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}))),
-        );
+    ngAfterViewInit(): void {
+        this.partnerSearchSelect.getData();
+        this.productSearchSelect.getData();
     }
 
-    fetchProducts = (term: string): Observable<{ id: any; name: any }[]> => {
-        return this.productService.productsGetCollection(1, 50, term).pipe(
-            map((response) => response['hydra:member'].map(product => ({id: product.id, name: product.name}))),
+    getPartners = (term: string): void => {
+        this.partnerService.partnersGetCollection(
+            this.partnerSearchSelect.pagingComponent.getPageIndex(),
+            this.partnerSearchSelect.pagingComponent.getPageSize(),
+            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(),
+            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/posts/new-post/new-post.component.html

@@ -11,14 +11,15 @@
         </div>
 
         <div class="mb-3">
-            <app-search-input *ngIf="this.posting.id === null || this.posting.id === undefined" #productSearchInput
-                  [formId]="'productIri'"
-                  [formLabelLangKey]="'form.product'"
-                  [dataField]="'productName'"
-                  [documentForm]="postForm"
-                  [documentFormField]="'productName'"
-                  [fetchFunction]="fetchProducts">
-            </app-search-input>
+            <app-search-select *ngIf="this.posting.id === null || this.posting.id === undefined" #productSearchSelect
+                               [formId]="'productIri'"
+                               [formLabelLangKey]="'form.product'"
+                               [documentForm]="postForm"
+                               [getDataFunction]="getProducts"
+                               [dataSource]="dataSourceProducts"
+                               [searchSelectColDefs]="colDefProducts"
+            >
+            </app-search-select>
             <input type="hidden" *ngIf="this.posting.id === null || this.posting.id === undefined" formControlName="product"/>
             <input type="text" *ngIf="this.posting.id !== null && this.posting.id !== undefined" class="form-control" disabled value="{{posting.product?.name}}" />
         </div>

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

@@ -2,12 +2,18 @@ import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angula
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroup} from "@angular/forms";
 import {postForm} from "@app/_forms/apiForms";
-import {PartnerJsonld, PartnerProductService, PostJsonld, PostService, ProductService} from "@app/core/api/v1";
+import {
+    PostJsonld,
+    PostService,
+    ProductJsonld,
+    ProductService
+} from "@app/core/api/v1";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
-import {Observable, Subscription} from "rxjs";
-import {SearchInputComponent} from "@app/_components/search-input/search-input.component";
-import {map} from "rxjs/operators";
+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";
 
 @Component({
     selector: 'app-new-post',
@@ -17,10 +23,13 @@ import {map} from "rxjs/operators";
 export class NewPostComponent implements OnInit {
     @Input() public posting!: PostJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
-    @ViewChild('productSearchInput', { static: false }) $productSearchInput!: SearchInputComponent;
+    @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent;
 
     protected postForm: FormGroup;
     protected postSub: Subscription;
+    protected products: Array<ProductJsonld>;
+    protected dataSourceProducts;
+    protected colDefProducts: SearchInputColDef[];
 
     constructor(
         private postService: PostService,
@@ -29,15 +38,31 @@ export class NewPostComponent implements OnInit {
     ) {
         this.postForm = postForm;
         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);
     }
 
-    fetchProducts = (term: string): Observable<{ id: any; name: any }[]> => {
-        return this.productService.productsGetCollection(1, 50, term).pipe(
-            map((response) => response['hydra:member'].map(product => ({id: product.id, name: product.name}))),
+    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"]));
+            }
         );
     }
 

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

@@ -2,28 +2,31 @@
 <h2 *ngIf="sale.id">{{ 'basic.edit-sale' | translate }}</h2>
 <div class="spt-form">
     <form [formGroup]="saleForm" (ngSubmit)="onSubmit()">
+
         <div class="mb-3">
-            <app-search-input #partnerSearchInput
-                  [formId]="'partner'"
-                  [formLabelLangKey]="'form.partner'"
-                  [dataField]="'partnerName'"
-                  [documentForm]="saleForm"
-                  [documentFormField]="'partnerName'"
-                  [fetchFunction]="fetchPartners">
-            </app-search-input>
-            <input type="hidden" formControlName="partner"/>
+            <app-search-select #partnerSearchSelect
+                   [formId]="'partnerIri'"
+                   [formLabelLangKey]="'form.partner'"
+                   [documentForm]="saleForm"
+                   [getDataFunction]="getPartners"
+                   [dataSource]="dataSourcePartners"
+                   [searchSelectColDefs]="colDefPartners"
+            >
+            </app-search-select>
+            <input type="hidden" formControlName="partnerIri"/>
         </div>
 
         <div class="mb-3">
-            <app-search-input #productSearchInput
-                  [formId]="'product'"
-                  [formLabelLangKey]="'form.product'"
-                  [dataField]="'productName'"
-                  [documentForm]="saleForm"
-                  [documentFormField]="'productName'"
-                  [fetchFunction]="fetchProducts">
-            </app-search-input>
-            <input type="hidden" formControlName="product"/>
+            <app-search-select #productSearchSelect
+                   [formId]="'productIri'"
+                   [formLabelLangKey]="'form.product'"
+                   [documentForm]="saleForm"
+                   [getDataFunction]="getProducts"
+                   [dataSource]="dataSourceProducts"
+                   [searchSelectColDefs]="colDefProducts"
+            >
+            </app-search-select>
+            <input type="hidden" formControlName="productIri"/>
         </div>
 
         <div class="mb-3">

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

@@ -1,35 +1,42 @@
-import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import {
-    MediaObjectService,
     PartnerJsonld,
-    PartnerService,
+    PartnerService, ProductJsonld,
     ProductService,
     SaleJsonld,
     SaleService
 } from "@app/core/api/v1";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroup} from "@angular/forms";
-import {debounceTime, distinctUntilChanged, Observable, OperatorFunction, Subscription, switchMap} from "rxjs";
+import {Subscription} from "rxjs";
 import {TranslateService} from "@ngx-translate/core";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {saleForm} from "@app/_forms/apiForms";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
-import {filter, map} from "rxjs/operators";
-import {SearchInputComponent} from "@app/_components/search-input/search-input.component";
+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";
 
 @Component({
     selector: 'app-new-sale',
     templateUrl: './new-sale.component.html',
     styleUrl: './new-sale.component.scss'
 })
-export class NewSaleComponent implements OnInit {
+export class NewSaleComponent implements OnInit, AfterViewInit {
     @Input() public sale!: SaleJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
-    @ViewChild('partnerSearchInput', { static: false }) $partnerSearchInput!: SearchInputComponent;
-    @ViewChild('productSearchInput', { static: false }) $productSearchInput!: SearchInputComponent;
+
+    @ViewChild('partnerSearchSelect', { static: false }) partnerSearchSelect!: SearchSelectComponent;
+    @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent;
 
     protected saleForm: FormGroup;
     protected saleSub: Subscription;
+    protected partners: Array<PartnerJsonld>;
+    protected dataSourcePartners;
+    protected products: Array<ProductJsonld>;
+    protected dataSourceProducts;
+    protected colDefPartners: SearchInputColDef[];
+    protected colDefProducts: SearchInputColDef[];
 
     protected formatter = (apiData: any) => apiData.name;
 
@@ -41,23 +48,60 @@ export class NewSaleComponent implements OnInit {
         protected appHelperService: AppHelperService,
     ) {
         this.saleForm = saleForm;
-
         this.saleSub = new Subscription();
+        this.partners = [];
+        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 {
         this.saleForm = FormGroupInitializer.initFormGroup(this.saleForm, this.sale);
     }
 
-    fetchProducts = (term: string): Observable<{ id: any; name: any }[]> => {
-        return this.productService.productsGetCollection(1, 50, term).pipe(
-            map((response) => response['hydra:member'].map(product => ({id: product.id, name: product.name}))),
-        );
+    ngAfterViewInit(): void {
+        this.partnerSearchSelect.getData();
+        this.productSearchSelect.getData();
     }
 
-    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}))),
+    getPartners = (term: string): void => {
+        this.partnerService.partnersGetCollection(
+            this.partnerSearchSelect.pagingComponent.getPageIndex(),
+            this.partnerSearchSelect.pagingComponent.getPageSize(),
+            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(),
+            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/tasks/new-task/new-task.component.ts

@@ -46,9 +46,9 @@ export class NewTaskComponent implements OnInit, AfterViewInit {
     protected formatter = (apiData: any) => apiData.name;
 
     constructor(
-        private taskService: TaskService,
-        private userService: UserService,
-        private partnerService: PartnerService,
+        protected taskService: TaskService,
+        protected userService: UserService,
+        protected partnerService: PartnerService,
         protected productService: ProductService,
         protected appHelperService: AppHelperService
     ) {