| @@ -1,5 +1,5 @@ | |||||
| import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; | |||||
| import {DocumentJsonld, DocumentService} from "@app/core/api/v1"; | |||||
| 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 {AppHelperService} from "@app/_helpers/app-helper.service"; | ||||
| import {MatSort, Sort} from "@angular/material/sort"; | import {MatSort, Sort} from "@angular/material/sort"; | ||||
| import {Subscription} from "rxjs"; | import {Subscription} from "rxjs"; | ||||
| @@ -15,6 +15,8 @@ import {NewDocumentComponent} from "@app/_views/documents/new-document/new-docum | |||||
| }) | }) | ||||
| export class DocumentListComponent implements OnInit, AfterViewInit { | export class DocumentListComponent implements OnInit, AfterViewInit { | ||||
| @Input() public product!: ProductJsonld; | |||||
| @Input() public partner!: PartnerJsonld; | |||||
| @ViewChild(MatSort) sort; | @ViewChild(MatSort) sort; | ||||
| @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent; | @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent; | ||||
| @@ -49,7 +51,13 @@ export class DocumentListComponent implements OnInit, AfterViewInit { | |||||
| getData = () => { | getData = () => { | ||||
| this.documentsSub = this.documentService.documentsGetCollection( | this.documentsSub = this.documentService.documentsGetCollection( | ||||
| this.pagingComponent.getPageIndex(), | this.pagingComponent.getPageIndex(), | ||||
| this.pagingComponent.getPageSize() | |||||
| this.pagingComponent.getPageSize(), | |||||
| undefined, | |||||
| undefined, | |||||
| this.partner !== undefined ? this.partner.id : undefined, | |||||
| undefined, | |||||
| this.product !== undefined ? this.product.id : undefined | |||||
| ).subscribe( | ).subscribe( | ||||
| data => { | data => { | ||||
| this.documents = data["hydra:member"]; | this.documents = data["hydra:member"]; | ||||
| @@ -13,26 +13,28 @@ | |||||
| </div> | </div> | ||||
| <div class="mb-3"> | <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"/> | <input type="hidden" formControlName="partner"/> | ||||
| </div> | </div> | ||||
| <div class="mb-3"> | <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"/> | <input type="hidden" formControlName="product"/> | ||||
| </div> | </div> | ||||
| @@ -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 { | import { | ||||
| DocumentJsonld, DocumentObjectService, | DocumentJsonld, DocumentObjectService, | ||||
| DocumentService, MediaObjectService, PartnerJsonld, PartnerService, ProductService | |||||
| DocumentService, PartnerJsonld, PartnerService, ProductJsonld, ProductService, UserJsonld, UserService | |||||
| } from "@app/core/api/v1"; | } from "@app/core/api/v1"; | ||||
| import {ModalStatus} from "@app/_helpers/modal.states"; | import {ModalStatus} from "@app/_helpers/modal.states"; | ||||
| import {FormGroup} from "@angular/forms"; | 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 {TranslateService} from "@ngx-translate/core"; | ||||
| import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer"; | import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer"; | ||||
| import {documentForm} from "@app/_forms/apiForms"; | import {documentForm} from "@app/_forms/apiForms"; | ||||
| import {AppHelperService} from "@app/_helpers/app-helper.service"; | 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({ | @Component({ | ||||
| selector: 'app-new-document', | selector: 'app-new-document', | ||||
| templateUrl: './new-document.component.html', | templateUrl: './new-document.component.html', | ||||
| styleUrl: './new-document.component.scss' | styleUrl: './new-document.component.scss' | ||||
| }) | }) | ||||
| export class NewDocumentComponent implements OnInit { | |||||
| export class NewDocumentComponent implements OnInit, AfterViewInit { | |||||
| @Input() public document!: DocumentJsonld; | @Input() public document!: DocumentJsonld; | ||||
| @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>(); | @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 documentForm: FormGroup; | ||||
| protected documentSub: Subscription; | protected documentSub: Subscription; | ||||
| protected selectedFile: File | null; | protected selectedFile: File | null; | ||||
| protected documentObjectSub: Subscription; | 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( | 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, | 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.documentForm = documentForm; | ||||
| this.documentSub = new Subscription(); | this.documentSub = new Subscription(); | ||||
| this.selectedFile = null; | this.selectedFile = null; | ||||
| this.documentObjectSub = new Subscription(); | 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 { | ngOnInit(): void { | ||||
| this.documentForm = FormGroupInitializer.initFormGroup(this.documentForm, this.document); | 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"])); | |||||
| } | |||||
| ); | ); | ||||
| } | } | ||||
| @@ -132,8 +132,6 @@ export class PartnerListComponent implements OnInit, AfterViewInit { | |||||
| } | } | ||||
| getPartnerProducts = (searchValue = undefined) => { | getPartnerProducts = (searchValue = undefined) => { | ||||
| console.log(this.partnerType); | |||||
| console.log(searchValue); | |||||
| this.partnersSub = this.partnerProductService.partnerProductsGetCollection( | this.partnersSub = this.partnerProductService.partnerProductsGetCollection( | ||||
| this.pagingComponent.getPageIndex(), | this.pagingComponent.getPageIndex(), | ||||
| this.pagingComponent.getPageSize(), | this.pagingComponent.getPageSize(), | ||||
| @@ -84,3 +84,9 @@ | |||||
| > | > | ||||
| </app-sale-list> | </app-sale-list> | ||||
| </app-toggle> | </app-toggle> | ||||
| <app-toggle #toggleDocuments [headline]="'basic.documents' | translate"> | |||||
| <app-document-list *ngIf="toggleDocuments.isOpened" #documentsListComponent | |||||
| [partner]="partner" | |||||
| > | |||||
| </app-document-list> | |||||
| </app-toggle> | |||||
| @@ -16,6 +16,7 @@ import {ContactListComponent} from "@app/_views/contacts/contact-list/contact-li | |||||
| import {TaskListComponent} from "@app/_views/tasks/task-list/task-list.component"; | import {TaskListComponent} from "@app/_views/tasks/task-list/task-list.component"; | ||||
| import {ProductListComponent} from "@app/_views/products/product-list/product-list.component"; | import {ProductListComponent} from "@app/_views/products/product-list/product-list.component"; | ||||
| import {SaleListComponent} from "@app/_views/sales/sale-list/sale-list.component"; | import {SaleListComponent} from "@app/_views/sales/sale-list/sale-list.component"; | ||||
| import {DocumentListComponent} from "@app/_views/documents/document-list/document-list.component"; | |||||
| @Component({ | @Component({ | ||||
| selector: 'app-partners-detail', | selector: 'app-partners-detail', | ||||
| @@ -34,6 +35,8 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit { | |||||
| @ViewChild("postListComponent", { static: false }) postsComponent!: PostListComponent; | @ViewChild("postListComponent", { static: false }) postsComponent!: PostListComponent; | ||||
| @ViewChild("toggleSales", { static: true }) toggleSales!: ToggleComponent; | @ViewChild("toggleSales", { static: true }) toggleSales!: ToggleComponent; | ||||
| @ViewChild("salesListComponent", { static: false }) salesListComponent!: SaleListComponent; | @ViewChild("salesListComponent", { static: false }) salesListComponent!: SaleListComponent; | ||||
| @ViewChild("toggleDocuments", { static: true }) toggleDocuments!: ToggleComponent; | |||||
| @ViewChild("documentsListComponent", { static: false }) documentsListComponent!: DocumentListComponent; | |||||
| protected user: User | null; | protected user: User | null; | ||||
| @@ -11,14 +11,15 @@ | |||||
| </div> | </div> | ||||
| <div class="mb-3"> | <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="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}}" /> | <input type="text" *ngIf="this.posting.id !== null && this.posting.id !== undefined" class="form-control" disabled value="{{posting.product?.name}}" /> | ||||
| </div> | </div> | ||||
| @@ -2,12 +2,18 @@ import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angula | |||||
| import {ModalStatus} from "@app/_helpers/modal.states"; | import {ModalStatus} from "@app/_helpers/modal.states"; | ||||
| import {FormGroup} from "@angular/forms"; | import {FormGroup} from "@angular/forms"; | ||||
| import {postForm} from "@app/_forms/apiForms"; | 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 {FormGroupInitializer} from "@app/_helpers/formgroup.initializer"; | ||||
| import {AppHelperService} from "@app/_helpers/app-helper.service"; | 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({ | @Component({ | ||||
| selector: 'app-new-post', | selector: 'app-new-post', | ||||
| @@ -17,10 +23,13 @@ import {map} from "rxjs/operators"; | |||||
| export class NewPostComponent implements OnInit { | export class NewPostComponent implements OnInit { | ||||
| @Input() public posting!: PostJsonld; | @Input() public posting!: PostJsonld; | ||||
| @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>(); | @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>(); | ||||
| @ViewChild('productSearchInput', { static: false }) $productSearchInput!: SearchInputComponent; | |||||
| @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent; | |||||
| protected postForm: FormGroup; | protected postForm: FormGroup; | ||||
| protected postSub: Subscription; | protected postSub: Subscription; | ||||
| protected products: Array<ProductJsonld>; | |||||
| protected dataSourceProducts; | |||||
| protected colDefProducts: SearchInputColDef[]; | |||||
| constructor( | constructor( | ||||
| private postService: PostService, | private postService: PostService, | ||||
| @@ -29,15 +38,31 @@ export class NewPostComponent implements OnInit { | |||||
| ) { | ) { | ||||
| this.postForm = postForm; | this.postForm = postForm; | ||||
| this.postSub = new Subscription(); | 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 { | ngOnInit(): void { | ||||
| this.postForm = FormGroupInitializer.initFormGroup(this.postForm, this.posting); | 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"])); | |||||
| } | |||||
| ); | ); | ||||
| } | } | ||||
| @@ -19,10 +19,10 @@ | |||||
| </div> | </div> | ||||
| <div class="col-12 col-sm-6 col-lg-4 has-image"> | <div class="col-12 col-sm-6 col-lg-4 has-image"> | ||||
| <img *ngIf="product.imageUrl !== null && product.imageUrl !== undefined" | <img *ngIf="product.imageUrl !== null && product.imageUrl !== undefined" | ||||
| src="{{product.imageUrl}}" width="247" height="94" | |||||
| alt="{{product.name}}" title="{{product.name}}" /> | |||||
| src="{{product.imageUrl}}" width="247" height="94" | |||||
| alt="{{product.name}}" title="{{product.name}}"/> | |||||
| <img *ngIf="product.imageUrl === null || product.imageUrl === undefined" | <img *ngIf="product.imageUrl === null || product.imageUrl === undefined" | ||||
| src="/assets/images/icons/dummy-product.png" width="247" height="94" alt="" /> | |||||
| src="/assets/images/icons/dummy-product.png" width="247" height="94" alt=""/> | |||||
| </div> | </div> | ||||
| <span class="position-absolute bi p-2" | <span class="position-absolute bi p-2" | ||||
| [class.bi-heart]="userProduct === null" | [class.bi-heart]="userProduct === null" | ||||
| @@ -60,7 +60,13 @@ | |||||
| </app-toggle> | </app-toggle> | ||||
| <app-toggle #toggleSales [headline]="'basic.sales' | translate"> | <app-toggle #toggleSales [headline]="'basic.sales' | translate"> | ||||
| <app-sale-list *ngIf="toggleSales.isOpened" #salesListComponent | <app-sale-list *ngIf="toggleSales.isOpened" #salesListComponent | ||||
| [product]="product" | |||||
| [product]="product" | |||||
| > | > | ||||
| </app-sale-list> | </app-sale-list> | ||||
| </app-toggle> | |||||
| <app-toggle #toggleDocuments [headline]="'basic.documents' | translate"> | |||||
| <app-document-list *ngIf="toggleDocuments.isOpened" #documentsListComponent | |||||
| [product]="product" | |||||
| > | |||||
| </app-document-list> | |||||
| </app-toggle> | </app-toggle> | ||||
| @@ -2,28 +2,31 @@ | |||||
| <h2 *ngIf="sale.id">{{ 'basic.edit-sale' | translate }}</h2> | <h2 *ngIf="sale.id">{{ 'basic.edit-sale' | translate }}</h2> | ||||
| <div class="spt-form"> | <div class="spt-form"> | ||||
| <form [formGroup]="saleForm" (ngSubmit)="onSubmit()"> | <form [formGroup]="saleForm" (ngSubmit)="onSubmit()"> | ||||
| <div class="mb-3"> | <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> | ||||
| <div class="mb-3"> | <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> | ||||
| <div class="mb-3"> | <div class="mb-3"> | ||||
| @@ -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 { | import { | ||||
| MediaObjectService, | |||||
| PartnerJsonld, | PartnerJsonld, | ||||
| PartnerService, | |||||
| PartnerService, ProductJsonld, | |||||
| ProductService, | ProductService, | ||||
| SaleJsonld, | SaleJsonld, | ||||
| SaleService | SaleService | ||||
| } from "@app/core/api/v1"; | } from "@app/core/api/v1"; | ||||
| import {ModalStatus} from "@app/_helpers/modal.states"; | import {ModalStatus} from "@app/_helpers/modal.states"; | ||||
| import {FormGroup} from "@angular/forms"; | 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 {TranslateService} from "@ngx-translate/core"; | ||||
| import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer"; | import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer"; | ||||
| import {saleForm} from "@app/_forms/apiForms"; | import {saleForm} from "@app/_forms/apiForms"; | ||||
| import {AppHelperService} from "@app/_helpers/app-helper.service"; | 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({ | @Component({ | ||||
| selector: 'app-new-sale', | selector: 'app-new-sale', | ||||
| templateUrl: './new-sale.component.html', | templateUrl: './new-sale.component.html', | ||||
| styleUrl: './new-sale.component.scss' | styleUrl: './new-sale.component.scss' | ||||
| }) | }) | ||||
| export class NewSaleComponent implements OnInit { | |||||
| export class NewSaleComponent implements OnInit, AfterViewInit { | |||||
| @Input() public sale!: SaleJsonld; | @Input() public sale!: SaleJsonld; | ||||
| @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>(); | @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 saleForm: FormGroup; | ||||
| protected saleSub: Subscription; | 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; | protected formatter = (apiData: any) => apiData.name; | ||||
| @@ -41,23 +48,60 @@ export class NewSaleComponent implements OnInit { | |||||
| protected appHelperService: AppHelperService, | protected appHelperService: AppHelperService, | ||||
| ) { | ) { | ||||
| this.saleForm = saleForm; | this.saleForm = saleForm; | ||||
| this.saleSub = new Subscription(); | 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 { | ngOnInit(): void { | ||||
| this.saleForm = FormGroupInitializer.initFormGroup(this.saleForm, this.sale); | 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"])); | |||||
| } | |||||
| ); | ); | ||||
| } | } | ||||
| @@ -46,9 +46,9 @@ export class NewTaskComponent implements OnInit, AfterViewInit { | |||||
| protected formatter = (apiData: any) => apiData.name; | protected formatter = (apiData: any) => apiData.name; | ||||
| constructor( | constructor( | ||||
| private taskService: TaskService, | |||||
| private userService: UserService, | |||||
| private partnerService: PartnerService, | |||||
| protected taskService: TaskService, | |||||
| protected userService: UserService, | |||||
| protected partnerService: PartnerService, | |||||
| protected productService: ProductService, | protected productService: ProductService, | ||||
| protected appHelperService: AppHelperService | protected appHelperService: AppHelperService | ||||
| ) { | ) { | ||||