diff --git a/matsen-tool/src/app/_views/documents/new-document/new-document.component.html b/matsen-tool/src/app/_views/documents/new-document/new-document.component.html index 15ce707..de2d814 100644 --- a/matsen-tool/src/app/_views/documents/new-document/new-document.component.html +++ b/matsen-tool/src/app/_views/documents/new-document/new-document.component.html @@ -13,26 +13,28 @@
- - + +
- - + +
diff --git a/matsen-tool/src/app/_views/documents/new-document/new-document.component.ts b/matsen-tool/src/app/_views/documents/new-document/new-document.component.ts index 8b36bab..7c5109e 100644 --- a/matsen-tool/src/app/_views/documents/new-document/new-document.component.ts +++ b/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 = new EventEmitter(); - @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; + protected dataSourcePartners; + protected products: Array; + 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(this.partners); + this.products = []; + this.dataSourceProducts = new MatTableDataSource(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(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(this.products); + this.productSearchSelect.setData(this.dataSourceProducts, this.products, Number(data["hydra:totalItems"])); + } ); } diff --git a/matsen-tool/src/app/_views/posts/new-post/new-post.component.html b/matsen-tool/src/app/_views/posts/new-post/new-post.component.html index 5e6c5c5..0241344 100644 --- a/matsen-tool/src/app/_views/posts/new-post/new-post.component.html +++ b/matsen-tool/src/app/_views/posts/new-post/new-post.component.html @@ -11,14 +11,15 @@
- - + +
diff --git a/matsen-tool/src/app/_views/posts/new-post/new-post.component.ts b/matsen-tool/src/app/_views/posts/new-post/new-post.component.ts index a1cb3cb..1f33d7f 100644 --- a/matsen-tool/src/app/_views/posts/new-post/new-post.component.ts +++ b/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 = new EventEmitter(); - @ViewChild('productSearchInput', { static: false }) $productSearchInput!: SearchInputComponent; + @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent; protected postForm: FormGroup; protected postSub: Subscription; + protected products: Array; + 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(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(this.products); + this.productSearchSelect.setData(this.dataSourceProducts, this.products, Number(data["hydra:totalItems"])); + } ); } diff --git a/matsen-tool/src/app/_views/sales/new-sale/new-sale.component.html b/matsen-tool/src/app/_views/sales/new-sale/new-sale.component.html index a4c9418..a72274b 100644 --- a/matsen-tool/src/app/_views/sales/new-sale/new-sale.component.html +++ b/matsen-tool/src/app/_views/sales/new-sale/new-sale.component.html @@ -2,28 +2,31 @@

{{ 'basic.edit-sale' | translate }}

+
- - - + + +
- - - + + +
diff --git a/matsen-tool/src/app/_views/sales/new-sale/new-sale.component.ts b/matsen-tool/src/app/_views/sales/new-sale/new-sale.component.ts index 9fd4e06..601001a 100644 --- a/matsen-tool/src/app/_views/sales/new-sale/new-sale.component.ts +++ b/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 = new EventEmitter(); - @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; + protected dataSourcePartners; + protected products: Array; + 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(this.partners); + this.products = []; + this.dataSourceProducts = new MatTableDataSource(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(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(this.products); + this.productSearchSelect.setData(this.dataSourceProducts, this.products, Number(data["hydra:totalItems"])); + } ); } diff --git a/matsen-tool/src/app/_views/tasks/new-task/new-task.component.ts b/matsen-tool/src/app/_views/tasks/new-task/new-task.component.ts index 3fd259a..7233430 100644 --- a/matsen-tool/src/app/_views/tasks/new-task/new-task.component.ts +++ b/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 ) {