@colijnit/transaction 12.1.72 → 12.1.74

package/fesm2015/colijnit-transaction.js

@@ -63,16 +63,20 @@ import { SharedService as SharedService$1, sendMethodsWithIcon, KeyPadModule, St
 import { CustomerFullObject } from '@colijnit/relationapi/build/model/customer-full-object.bo';
 import { RelationStatus } from '@colijnit/articleapi/build/enum/relation-status.enum';
 import { RelationKind } from '@colijnit/articleapi/build/enum/relation-kind.enum';
+import { TransactionKind } from '@colijnit/transactionapi/build/enum/transaction-kind.enum';
 import { RelationApi } from '@colijnit/relationapi';
 import { SupplierFullObject } from '@colijnit/relationapi/build/model/supplier-full-object.bo';
 import { RelationListObject } from '@colijnit/relationapi/build/model/relation-list-object.bo';
 import { BranchLov } from '@colijnit/relationapi/build/model/branch-lov.bo';
-import { TransactionKind } from '@colijnit/transactionapi/build/enum/transaction-kind.enum';
+import { ValidationResult } from '@colijnit/ioneconnector/build/model/validation-result';
+import { Relation } from '@colijnit/relationapi/build/model/relation.bo';
 import { CreateTransactionRequest } from '@colijnit/transactionapi/build/model/create-transaction-request';
 import { FormMasterService, CoDialogModule, ButtonModule, CollapsibleModule, InputCheckboxModule, InputTextModule, InputComboBoxModule, FormModule, InputRadioButtonModule, IconModule, InputTextComponent, InputListboxModule, DropDownModule, InputSearchModule, ColumnAlign, SimpleGridColumnDirective, ObserveVisibilityModule, ColorSequenceService, PriceDisplayPipeModule, InputDatePickerModule, Carousel3dModule, CarouselModule, FilterPipeModule, InputDatePickerComponent, InputTextareaComponent, InputTextareaModule, InputNumberPickerModule, CoDialogPromptModule, MultiSelectListModule, PopupModule, CoSidebarModule, CoGridModule, CoRichTextEditorModule, SimpleGridModule, GridToolbarButtonModule, InputDateRangePickerModule, ClickoutsideModule, CheckmarkOverlayModule, CoOrientation, CoDirection, FilterItemModule, PaginationModule, PaginationBarModule, IconCollapseHandleModule } from '@colijnit/corecomponents_v12';
 import { FlexModule } from '@angular/flex-layout';
 import { trigger, state, style, transition, animate } from '@angular/animations';
+import { RelationKind as RelationKind$1 } from '@colijnit/relationapi/build/enum/relation-kind.enum';
 import { AddressType } from '@colijnit/relationapi/build/enum/address-type.enum';
+import { RelationNameKind } from '@colijnit/relationapi/build/enum/relation-name-kind.enum';
 import { CommonModule, DatePipe } from '@angular/common';
 import { DateUtils } from '@colijnit/ioneconnector/build/utils/date-utils';
 import { NumberUtils } from '@colijnit/ioneconnector/build/utils/number-utils';
@@ -102,16 +106,12 @@ import { PrintPurchaseOrderRequest } from '@colijnit/mainapi/build/model/print-p
 import { PdfPurchaseOrderRequest } from '@colijnit/mainapi/build/model/pdf-purchase-order-request';
 import { RelationRequest } from '@colijnit/relationapi/build/model/relation-request';
 import { CoDocument } from '@colijnit/sharedapi/build/model/co-document.bo';
-import { ValidationResult } from '@colijnit/ioneconnector/build/model/validation-result';
-import { Relation } from '@colijnit/relationapi/build/model/relation.bo';
-import { RelationNameKind } from '@colijnit/relationapi/build/enum/relation-name-kind.enum';
 import { GenderType } from '@colijnit/relationapi/build/enum/gender-type.enum';
 import { FunctionUtils } from '@colijnit/ioneconnector/build/utils/function-utils';
 import { ContactOption } from '@colijnit/relationapi/build/model/contact-option.bo';
 import { BusinessObjectUtils } from '@colijnit/ioneconnector/build/utils/business-object-utils';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { RelationSmallObject } from '@colijnit/relationapi/build/model/relation-small-object.bo';
-import { RelationKind as RelationKind$1 } from '@colijnit/relationapi/build/enum/relation-kind.enum';
 import { ReceiveGoodsForPurchaseOrderCorrectionRequest } from '@colijnit/transactionapi/build/model/receive-goods-for-purchase-order-correction-request.bo';
 import { PurchaseOrderLineReceiptCorrectionDetails } from '@colijnit/transactionapi/build/model/purchase-order-line-receipt-correction-details.bo';
 import { GetPurchasePortalLine } from '@colijnit/transactionapi/build/model/get-purchase-portal-line';
@@ -426,6 +426,24 @@ class Dictionary {
                 "SEARCH_NUMBER_SUPPLIER_OR_DATE": "Zoeken op nummer, leverancier of datum",
                 "SEARCH_PRICE_LIST": "Zoek prijslijst",
                 "SEARCH_VAT": "Zoek btw",
+                "SEARCH_ARTICLE_NR": "Zoek artikelnummer",
+                "SEARCH_BATCH_NUMBER": "Zoek batchnummer",
+                "SEARCH_BRANCH": "Zoek filiaal",
+                "SEARCH_COMMISSION_CODE": "Zoek commissiecode",
+                "SEARCH_CUSTOMER_GROUP": "Zoek klantgroep",
+                "SEARCH_CUSTOMER_NAME": "Zoek klantnaam",
+                "SEARCH_EXCEEDENCE_CODE": "Zoek uitloopcode",
+                "SEARCH_MAIN_ARTICLE": "Zoek hoofdartikel",
+                "SEARCH_ONHOLD": "Zoek gepauzeerd",
+                "SEARCH_OWN_REFERENCE": "Zoek eigen referentie",
+                "SEARCH_PURCHASENUMBER": "Zoek inkoopnummer",
+                "SEARCH_PURCHASEPERSON": "Zoek inkoper",
+                "SEARCH_SALESPERSON": "Zoek verkoper",
+                "SEARCH_SERIAL_NUMBER": "Zoek serienummer",
+                "SEARCH_SOURCE_WAREHOUSE": "Zoek bronmagazijn",
+                "SEARCH_SUPPLIER": "Zoek leverancier",
+                "SEARCH_TAGS": "Zoek tags",
+                "SEARCH_TURNOVER_GROUP": "Zoek omzetgroep",
                 "SEARCH_WAREHOUSE": "Zoek magazijn",
                 "SELECT": "Selecteren",
                 "SELECT_A": "Selecteer een",
@@ -773,6 +791,24 @@ class Dictionary {
                 "SEARCH_NUMBER_SUPPLIER_OR_DATE": "Search for number, supplier or date",
                 "SEARCH_PRICE_LIST": "Search pricelist",
                 "SEARCH_VAT": "Search vat",
+                "SEARCH_ARTICLE_NR": "Search article number",
+                "SEARCH_BATCH_NUMBER": "Search batch number",
+                "SEARCH_BRANCH": "Search branch",
+                "SEARCH_COMMISSION_CODE": "Search commission code",
+                "SEARCH_CUSTOMER_GROUP": "Search customer group",
+                "SEARCH_CUSTOMER_NAME": "Search customer name",
+                "SEARCH_EXCEEDENCE_CODE": "Search exceedence code",
+                "SEARCH_MAIN_ARTICLE": "Search main article",
+                "SEARCH_ONHOLD": "Search on hold",
+                "SEARCH_OWN_REFERENCE": "Search own reference",
+                "SEARCH_PURCHASENUMBER": "Search purchase number",
+                "SEARCH_PURCHASEPERSON": "Search purchase person",
+                "SEARCH_SALESPERSON": "Search sales person",
+                "SEARCH_SERIAL_NUMBER": "Search serial number",
+                "SEARCH_SOURCE_WAREHOUSE": "Search source warehouse",
+                "SEARCH_SUPPLIER": "Search supplier",
+                "SEARCH_TAGS": "Search tags",
+                "SEARCH_TURNOVER_GROUP": "Search turnover group",
                 "SEARCH_WAREHOUSE": "Search warehouse",
                 "SELECT": "Select",
                 "SELECT_A": "Select a",
@@ -1753,7 +1789,8 @@ TransactionLineBaseComponent.decorators = [
 ];
 TransactionLineBaseComponent.propDecorators = {
     transactionLine: [{ type: Input }],
-    transactionInfo: [{ type: Input }]
+    transactionInfo: [{ type: Input }],
+    readonly: [{ type: HostBinding, args: ['class.read-only',] }]
 };
 
 class DialogTransactionLineBaseComponent extends TransactionLineBaseComponent {
@@ -2174,6 +2211,22 @@ class ErrorService {
                     }
                 });
             }
+            else if (response.validationResult.fieldValidations) {
+                messages.push(this._messageAsValidationError('Validation error'));
+                for (let key in response.validationResult.fieldValidations) {
+                    if (response.validationResult.fieldValidations.hasOwnProperty(key)) {
+                        if (response.validationResult.fieldValidations[key].messages && response.validationResult.fieldValidations[key].messages.length > 0) {
+                            for (let i = 0; i < response.validationResult.fieldValidations[key].messages.length; i++) {
+                                const messageCode = {
+                                    value: response.validationResult.fieldValidations[key].messages[i].fieldId,
+                                    defaultStr: response.validationResult.fieldValidations[key].messages[i].message
+                                };
+                                messagesDetails.push(this._messageDetails(messageCode));
+                            }
+                        }
+                    }
+                }
+            }
         }
         messages.push('</div>');
         return this.showError(messages.join(''), messagesDetails.length > 0 ? messagesDetails.join('') : undefined);
@@ -3206,6 +3259,22 @@ class TransactionConnectorAdapterService {
             }
         });
     }
+    changeHeaderTransactionDeliveryDateDefinitive(uuid, definitive) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                newDeliveryDateDefinitive: definitive
+            };
+            const response = yield this.connector.changeHeaderDeliveryDateDefinitive(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                this._handleExceptionFromResponse(response);
+                return null;
+            }
+        });
+    }
     changeHeaderTransactionRemark(uuid, remark) {
         return __awaiter(this, void 0, void 0, function* () {
             const request = {
@@ -4338,6 +4407,11 @@ class TransactionConnectorService {
             return this._adapterService.changeHeaderTransactionDeliveryDate(uuid, date);
         });
     }
+    changeHeaderTransactionDeliveryDateDefinitive(uuid, definitive) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this._adapterService.changeHeaderTransactionDeliveryDateDefinitive(uuid, definitive);
+        });
+    }
     changeHeaderTransactionRemark(uuid, remark) {
         return __awaiter(this, void 0, void 0, function* () {
             return this._adapterService.changeHeaderTransactionRemark(uuid, remark);
@@ -4881,6 +4955,36 @@ class RelationConnectorService {
             });
         });
     }
+    insertSupplier(relation) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.insertSupplier(relation).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(SupplierFullObject, result.resultObject));
+                    }
+                    else {
+                        this._handleExceptionFromResponse(result);
+                        reject(null);
+                    }
+                });
+            });
+        });
+    }
+    updateSupplier(relation) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.updateSupplier(relation).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(SupplierFullObject, result.resultObject));
+                    }
+                    else {
+                        this._handleExceptionFromResponse(result);
+                        reject(null);
+                    }
+                });
+            });
+        });
+    }
     _handleExceptionFromResponse(result) {
         this._errorService.showValidationError(result);
     }
@@ -4897,8 +5001,149 @@ RelationConnectorService.ctorParameters = () => [
     { type: TransactionEventService }
 ];
 
+class RelationService {
+    constructor(_adapterService, _selectMultipleCacheService, _selectSingleCacheService, _selectMultipleParameterizedCacheService) {
+        this._adapterService = _adapterService;
+        this._selectMultipleCacheService = _selectMultipleCacheService;
+        this._selectSingleCacheService = _selectSingleCacheService;
+        this._selectMultipleParameterizedCacheService = _selectMultipleParameterizedCacheService;
+        this._lockMethods = new Map([
+            [RelationKind.Customer, (relationNr) => this._lockCustomerFullObject(relationNr)],
+            [RelationKind.Supplier, (relationNr) => this._lockSupplierFullObject(relationNr)],
+            [RelationKind.Personnel, (relationNr) => this._lockEmployeeFullObject(relationNr)],
+            [RelationKind.Branch, (relationNr) => this._lockBranchFullObject(relationNr)],
+            [RelationKind.Company, (relationNr) => this._lockCompanyFullObject(relationNr)],
+            [RelationKind.ContactPerson, (relationNr) => this._lockContactPerson(relationNr)],
+        ]);
+        this._getMethods = new Map([
+            [RelationKind.Customer, (relationNr) => this.getCustomerFullObject(relationNr)],
+            [RelationKind.Supplier, (relationNr) => this.getSupplierFullObject(relationNr)]
+        ]);
+        this._updateMethods = new Map([
+            [RelationKind.Customer, (relation) => this.updateCustomer(relation)],
+            [RelationKind.Supplier, (relation) => this.updateSupplier(relation)]
+        ]);
+        this._insertMethods = new Map([
+            [RelationKind.Customer, (relation) => this.insertCustomer(relation)],
+            [RelationKind.Supplier, (relation) => this.insertSupplier(relation)]
+        ]);
+    }
+    getCustomerFullObject(relationNo) {
+        return this._selectSingleCacheService.requestCache(CustomerFullObject, relationNo, () => {
+            return this._adapterService.getCustomerFullObject(relationNo);
+        }).getValue();
+    }
+    getSupplierFullObject(relationNo) {
+        return this._selectSingleCacheService.requestCache(SupplierFullObject, relationNo, () => {
+            return this._adapterService.getSupplierFullObject(relationNo);
+        }).getValue();
+    }
+    insertCustomer(relation) {
+        return this._adapterService.insertCustomer(relation);
+    }
+    updateCustomer(relation) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this._adapterService.updateCustomer(relation);
+        });
+    }
+    insertSupplier(relation) {
+        return this._adapterService.insertSupplier(relation);
+    }
+    updateSupplier(relation) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this._adapterService.updateSupplier(relation);
+        });
+    }
+    getRelationListObjects(relationRequest) {
+        return this._adapterService.getRelationListObjects(relationRequest);
+    }
+    getRelationNumber(relationId) {
+        return this._adapterService.getRelationNumber(relationId);
+    }
+    getBranches(branchNr) {
+        return this._selectMultipleParameterizedCacheService.requestCache(BranchLov, (branchNr) => {
+            return this._adapterService.getBranches(branchNr);
+        }).getValue(branchNr);
+    }
+    insertRelation(relationKind, relation) {
+        const insertMethod = this._insertMethods.get(relationKind);
+        if (insertMethod) {
+            return insertMethod.call(this, relation);
+        }
+        else {
+            const result = new Relation();
+            return Promise.resolve(result);
+        }
+    }
+    updateRelation(relationKind, relation) {
+        const updateMethod = this._updateMethods.get(relationKind);
+        if (updateMethod) {
+            return updateMethod.call(this, relation);
+        }
+        else {
+            const result = new Relation();
+            return Promise.resolve(result);
+        }
+    }
+    lockRelation(relationKind, relationNr) {
+        const lockMethod = this._lockMethods.get(relationKind);
+        if (lockMethod) {
+            return lockMethod.call(this, relationNr);
+        }
+        else {
+            const result = new ValidationResult();
+            result.success = false;
+            return Promise.resolve(result);
+        }
+    }
+    getRelation(relationKind, relationNr) {
+        const getMethod = this._getMethods.get(relationKind);
+        if (getMethod) {
+            return getMethod.call(this, relationNr);
+        }
+        else {
+            const result = new ValidationResult();
+            result.success = false;
+            return Promise.resolve(null);
+        }
+    }
+    commit() {
+        return this._adapterService.commit();
+    }
+    _lockCustomerFullObject(relationNr) {
+        return this._adapterService.lockCustomerFullObject(relationNr);
+    }
+    _lockSupplierFullObject(relationNr) {
+        return this._adapterService.lockSupplierFullObject(relationNr);
+    }
+    _lockEmployeeFullObject(relationNr) {
+        return this._adapterService.lockEmployeeFullObject(relationNr);
+    }
+    _lockBranchFullObject(relationNr) {
+        return this._adapterService.lockBranchFullObject(relationNr);
+    }
+    _lockCompanyFullObject(relationNr) {
+        return this._adapterService.lockCompanyFullObject(relationNr);
+    }
+    _lockContactPerson(relationNr) {
+        return this._adapterService.lockContactPerson(relationNr);
+    }
+}
+RelationService.ɵprov = i0.ɵɵdefineInjectable({ factory: function RelationService_Factory() { return new RelationService(i0.ɵɵinject(RelationConnectorService), i0.ɵɵinject(SelectMultipleCacheService), i0.ɵɵinject(SelectSingleCacheService), i0.ɵɵinject(SelectMultipleParameterizedCacheService)); }, token: RelationService, providedIn: "root" });
+RelationService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+RelationService.ctorParameters = () => [
+    { type: RelationConnectorService },
+    { type: SelectMultipleCacheService },
+    { type: SelectSingleCacheService },
+    { type: SelectMultipleParameterizedCacheService }
+];
+
 class PendingReasonService {
-    constructor(options, dialogService, connector, sharedService, articleConnector, dictionaryService, transactionEventService, relationConnector) {
+    constructor(options, dialogService, connector, sharedService, articleConnector, dictionaryService, transactionEventService, relationService) {
         this.options = options;
         this.dialogService = dialogService;
         this.connector = connector;
@@ -4906,7 +5151,7 @@ class PendingReasonService {
         this.articleConnector = articleConnector;
         this.dictionaryService = dictionaryService;
         this.transactionEventService = transactionEventService;
-        this.relationConnector = relationConnector;
+        this.relationService = relationService;
         this.logout = new Subject();
         this.transactionUpdated = new BehaviorSubject(undefined);
         this.relationUpdated = new BehaviorSubject(undefined);
@@ -4917,7 +5162,7 @@ class PendingReasonService {
         this.purchasePortalLine = [];
         this.docDeliveryBatch = new DocDeliveryBatch();
         this.articleAmount = 0;
-        this._relation = new CustomerFullObject();
+        this._relation = new Relation();
     }
     set relation(value) {
         if (value) {
@@ -4936,6 +5181,11 @@ class PendingReasonService {
             this.transactionEventService.connectionInitialized.next(true);
         });
     }
+    resetCurrentTransaction() {
+        this.currentTransaction = new TransactionInfoResponse();
+        this._relation = new CustomerFullObject();
+        this.articleAmount = 0;
+    }
     cancelAddTransactionLine(lineUuid, remember = true) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
@@ -5138,14 +5388,14 @@ class PendingReasonService {
     }
     _getRelation(relation) {
         if (relation) {
-            this.relationConnector.getRelationNumber(relation.relationId).then((relationNr) => {
+            this.relationService.getRelationNumber(relation.relationId).then((relationNr) => {
                 if (relation.relationType === RelationKind.Customer) {
-                    this.relationConnector.getCustomerFullObject(parseInt(relationNr, 0)).then((customer) => {
+                    this.relationService.getCustomerFullObject(parseInt(relationNr, 0)).then((customer) => {
                         this.relation = customer;
                     });
                 }
                 else if (relation.relationType === RelationKind.Supplier) {
-                    this.relationConnector.getSupplierFullObject(parseInt(relationNr, 0)).then((supplier) => {
+                    this.relationService.getSupplierFullObject(parseInt(relationNr, 0)).then((supplier) => {
                         this.relation = supplier;
                     });
                 }
@@ -5153,7 +5403,7 @@ class PendingReasonService {
         }
     }
 }
-PendingReasonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PendingReasonService_Factory() { return new PendingReasonService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(DialogService), i0.ɵɵinject(TransactionConnectorService), i0.ɵɵinject(i4.SharedService), i0.ɵɵinject(ArticleConnectorService), i0.ɵɵinject(DictionaryService), i0.ɵɵinject(TransactionEventService), i0.ɵɵinject(RelationConnectorService)); }, token: PendingReasonService, providedIn: "root" });
+PendingReasonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PendingReasonService_Factory() { return new PendingReasonService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(DialogService), i0.ɵɵinject(TransactionConnectorService), i0.ɵɵinject(i4.SharedService), i0.ɵɵinject(ArticleConnectorService), i0.ɵɵinject(DictionaryService), i0.ɵɵinject(TransactionEventService), i0.ɵɵinject(RelationService)); }, token: PendingReasonService, providedIn: "root" });
 PendingReasonService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
@@ -5167,7 +5417,7 @@ PendingReasonService.ctorParameters = () => [
     { type: ArticleConnectorService },
     { type: DictionaryService },
     { type: TransactionEventService },
-    { type: RelationConnectorService }
+    { type: RelationService }
 ];
 
 class TransactionService extends PendingReasonService {
@@ -5258,6 +5508,15 @@ class TransactionService extends PendingReasonService {
             return false;
         });
     }
+    updateHeaderTransactionDeliveryDateDefinitive(uuid, definitive) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.changeHeaderTransactionDeliveryDateDefinitive(uuid, definitive);
+            if (response) {
+                return this.handleHeaderOperationStatuses(response);
+            }
+            return false;
+        });
+    }
     updateHeaderTransactionRemark(uuid, remark) {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeHeaderTransactionRemark(uuid, remark);
@@ -5472,10 +5731,10 @@ class TransactionService extends PendingReasonService {
             // this._cleanRelationBeforeSave();
             this.initializeTransaction();
             if (!this.relation.relationId) {
-                this.relation = yield this.relationConnector.insertCustomer(this.relation);
+                this.relation = yield this.relationService.insertRelation(this._relationKindFromTransactionKind.get(this.transactionKind), this.relation);
             }
             else {
-                this.relation = yield this.relationConnector.updateCustomer(this.relation);
+                this.relation = yield this.relationService.updateRelation(this._relationKindFromTransactionKind.get(this.transactionKind), this.relation);
             }
             if (!this.currentTransaction.transactionInfo.relation) {
                 return yield this.addRelationToTransaction(this.relation.relationId);
@@ -5980,7 +6239,7 @@ class TransactionService extends PendingReasonService {
         });
     }
 }
-TransactionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionService_Factory() { return new TransactionService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(DialogService), i0.ɵɵinject(TransactionConnectorService), i0.ɵɵinject(i4.SharedService), i0.ɵɵinject(ArticleConnectorService), i0.ɵɵinject(DictionaryService), i0.ɵɵinject(TransactionEventService), i0.ɵɵinject(RelationConnectorService)); }, token: TransactionService, providedIn: "root" });
+TransactionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionService_Factory() { return new TransactionService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(DialogService), i0.ɵɵinject(TransactionConnectorService), i0.ɵɵinject(i4.SharedService), i0.ɵɵinject(ArticleConnectorService), i0.ɵɵinject(DictionaryService), i0.ɵɵinject(TransactionEventService), i0.ɵɵinject(RelationService)); }, token: TransactionService, providedIn: "root" });
 TransactionService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
@@ -6007,24 +6266,27 @@ class CheckoutComponent {
     }
     ngOnInit() {
         this.service.transactionKind = this.transactionType;
+        this.relationType = this.service.getRelationKindFromTransactionKind();
     }
     // ngOnDestroy(): void {
     //   this._subscriptions.forEach(subscription => subscription.unsubscribe());
     // }
     handleCreateTransaction(event) {
         return __awaiter(this, void 0, void 0, function* () {
+            let success = true;
             if (this.stepper.activeStep === 0 && (yield this.handleRelationValidation())) {
-                const success = yield this.service.saveRelation();
+                success = yield this.service.saveRelation();
                 if (success) {
                     yield this.service.updateHeaderTransactionDefinitive(this.service.currentTransaction.transactionInfo.uuid, true);
                 }
             }
+            if (!success) {
+                return;
+            }
             const response = yield this.service.saveTransaction();
             if (response && response.isSuccess) {
                 const id = this.service.currentTransaction.transactionInfo.id;
-                this.service.currentTransaction = new TransactionInfoResponse();
-                this.service.relation = new CustomerFullObject();
-                this.service.articleAmount = 0;
+                this.service.resetCurrentTransaction();
                 this.transactionFinished.emit({ id: id, fromCheckout: this.showCreateTransactionButton });
             }
         });
@@ -6100,7 +6362,9 @@ CheckoutComponent.decorators = [
                 (createClicked)="handleCreateTransaction($event)"
     >
       <co-stepper-step #stepRelation [index]="1" [label]="'YOUR_DATA' | localize" (validateStep)="handleRelationValidation()">
-        <co-checkout-overview-relation-edit #checkoutRelation *ngIf="stepRelation.show" [(relation)]="service.relation"
+        <co-checkout-overview-relation-edit #checkoutRelation *ngIf="stepRelation.show"
+                                            [(relation)]="service.relation"
+                                            [relationType]="relationType"
                                             [deliveryAddressNawNr]="deliveryAddressNawNr"
                                             [invoiceAddressNawNr]="invoiceAddressNawNr"
                                             (deliveryAddressChange)="handleDeliveryAddressChange($event)"
@@ -6158,8 +6422,10 @@ class CheckoutOverviewRelationEditComponent {
     constructor(_formMaster, service) {
         this._formMaster = _formMaster;
         this.service = service;
+        this.relationKind = RelationKind$1;
         this.icons = Icon;
         this.addressType = AddressType;
+        this.relationType = RelationKind$1.Customer;
         this.validSubmit = new EventEmitter();
         this.invalidSubmit = new EventEmitter();
         this.deliveryAddressChange = new EventEmitter();
@@ -6170,6 +6436,12 @@ class CheckoutOverviewRelationEditComponent {
     set relation(value) {
         this._relation = value;
         if (this._relation) {
+            if (this._relation instanceof CustomerFullObject) {
+                this.customerGroup = this._relation.customerGroup;
+            }
+            else {
+                this._relation.type = RelationNameKind.Company;
+            }
             this.address = this._relation.getFirstAddressOrCreateNew();
             const firstActiveAddress = this._relation.activeAddresses.length > 0 ? this._relation.activeAddresses[0] : undefined;
             this.deliveryAddressNawNr = firstActiveAddress ? firstActiveAddress.nawNr : 0;
@@ -6192,6 +6464,12 @@ class CheckoutOverviewRelationEditComponent {
             }
         });
     }
+    handleCustomerGroupChange(group) {
+        this.customerGroup = group;
+        if (this._relation instanceof CustomerFullObject) {
+            this._relation.customerGroup = this.customerGroup;
+        }
+    }
     updateRelation(rel) {
         this._relation = rel;
         this.relationChange.emit(this._relation);
@@ -6233,15 +6511,15 @@ CheckoutOverviewRelationEditComponent.decorators = [
           </div>
           <div class="checkout-data-column">
             <div class="checkout-data-row">
-              <co-relation-type
+              <co-relation-type *ngIf="relationType === relationKind.Customer"
                 [relation]="relation"
               ></co-relation-type>
             </div>
-            <div class="checkout-data-row">
-              <relation-customer-groups [(model)]="relation.customerGroup" required></relation-customer-groups>
+            <div class="checkout-data-row" *ngIf="relationType === relationKind.Customer">
+              <relation-customer-groups [model]="customerGroup" (modelChange)="handleCustomerGroupChange($event)" required></relation-customer-groups>
             </div>
             <div class="checkout-data-row">
-              <co-relation-general [relation]="relation" (relationChange)="updateRelation($event)"></co-relation-general>
+              <co-relation-general [relation]="relation" [relationType]="relationType" (relationChange)="updateRelation($event)"></co-relation-general>
             </div>
             <div class="checkout-data-row">
               <co-relation-address [address]="address"></co-relation-address>
@@ -6338,6 +6616,7 @@ CheckoutOverviewRelationEditComponent.ctorParameters = () => [
 ];
 CheckoutOverviewRelationEditComponent.propDecorators = {
     relation: [{ type: Input }],
+    relationType: [{ type: Input }],
     deliveryAddressNawNr: [{ type: Input }],
     invoiceAddressNawNr: [{ type: Input }],
     validSubmit: [{ type: Output }],
@@ -7351,6 +7630,7 @@ CoreModule.decorators = [
 
 class RelationBaseComponent {
     constructor() {
+        this.relationType = RelationKind$1.Customer;
         this.relationChange = new EventEmitter();
         this._relation = NULL_RELATION_OBJECT;
     }
@@ -7375,6 +7655,7 @@ RelationBaseComponent.decorators = [
 ];
 RelationBaseComponent.propDecorators = {
     relation: [{ type: Input }],
+    relationType: [{ type: Input }],
     relationChange: [{ type: Output }]
 };
 
@@ -11494,10 +11775,42 @@ class TransactionQuickAccessPurchaseOrderOverviewComponent extends TransactionQu
         this.reportDocumentEmailRequest = new EmailPurchaseOrderRequest();
         this.reportDocumentPrintRequest = new PrintPurchaseOrderRequest();
         this.reportDocumentPdfRequest = new PdfPurchaseOrderRequest();
+        this.catalogOptions = {
+            searchOnStart: true,
+            showAddToCart: false,
+            showLookAtArticleButton: false,
+            showAddArticleButton: false
+        };
+        this.catalogParameters = {};
+        this.showCatalog = false;
+        this.searchText = "";
     }
     showClass() {
         return true;
     }
+    handleSearch(text) {
+        this.showCatalogDialog();
+    }
+    handleAddArticle(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.service.addArticle(this.searchText);
+    }
+    handleSearchCatalog(event) {
+        this.showCatalogDialog();
+    }
+    handleCatalogArticleClick(article) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (yield this.service.addArticle(article.articleNumber)) {
+                this.showCatalog = false;
+            }
+        });
+    }
+    showCatalogDialog() {
+        this.catalogParameters.general = this.searchText;
+        this.catalogParameters.publicationCode = 71; // todo: fix this?
+        this.showCatalog = true;
+    }
     emailDocument(request) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.service.emailPurchaseOrder(request);
@@ -11529,12 +11842,28 @@ TransactionQuickAccessPurchaseOrderOverviewComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-quick-access-purchase-order-overview",
                 template: `
+    <co-input-search
+      [(model)]="searchText"
+      [placeholder]="'SEARCH_ADD_ARTICLE' | localize"
+      [centerLabel]="true"
+      [useLeftIcon]="true"
+      [useRightIcon]="true"
+      (search)="handleSearch($event)"
+    ></co-input-search>
     <co-quick-send-button
       [defaultMethodIcon]="defaultSendMethodIcon"
       [showLoader]="showLoader"
       (sendIconClicked)="handleSend(defaultSendMethod)"
       (openSendMethodDialog)="showSendMethodDialog = true"
     ></co-quick-send-button>
+    <co-dialog-catalog *ngIf="showCatalog"
+                       [options]="catalogOptions"
+                       [parameters]="catalogParameters"
+                       [showNavigation]="true"
+                       (closeClick)="showCatalog = false"
+                       (articleClicked)="handleCatalogArticleClick($event)"
+    >
+    </co-dialog-catalog>
     <co-send-method-dialog *ngIf="showSendMethodDialog"
                            [headerTitle]="'Verzendmethode'"
                            [defaultSendMethod]="defaultSendMethod"
@@ -11601,6 +11930,7 @@ class TransactionMappingService {
             [{ type: TransactionKind.SalesOrder, category: TransactionTypeCategory.SalesOrderAllocation }, TransactionGoodsAllocationLineComponent],
             [{ type: TransactionKind.SalesOrder, category: TransactionTypeCategory.SalesOrderDeliveryNote }, TransactionOrderDeliveryLineComponent],
             [{ type: TransactionKind.SalesOrder, category: TransactionTypeCategory.SalesOrderInvoice }, TransactionOrderDeliveryLineComponent],
+            [{ type: TransactionKind.PurchaseOrder, category: TransactionTypeCategory.PurchaseOrderOverview }, TransactionPurchaseLineComponent],
             [{ type: TransactionKind.PurchaseOrder, category: TransactionTypeCategory.PurchaseOrderReceivedGoods }, TransactionReceiveGoodsLineComponent],
         ]);
         this._transactionFilterComponent = new Map([
@@ -12104,171 +12434,68 @@ class SharedConnectorService {
             return this.connector.selectDocsByTableKey(table, key).then((result) => {
                 if (result.validationResult && result.validationResult.success) {
                     resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(CoDocument, result.resultObjects));
-                }
-                else {
-                    reject(result.validationMessagesAsString);
-                }
-            });
-        });
-    }
-    getDocumentContent(id, thumbnail = true) {
-        return new Promise((resolve, reject) => {
-            return this.connector.getDocumentContent(id, thumbnail).then((result) => {
-                if (result.validationResult && result.validationResult.success) {
-                    resolve(result.resultObject.documentContent);
-                }
-                else {
-                    reject(result.validationMessagesAsString);
-                }
-            });
-        });
-    }
-}
-SharedConnectorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SharedConnectorService_Factory() { return new SharedConnectorService(i0.ɵɵinject(OptionsService)); }, token: SharedConnectorService, providedIn: "root" });
-SharedConnectorService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: "root"
-            },] }
-];
-SharedConnectorService.ctorParameters = () => [
-    { type: OptionsService }
-];
-
-class SharedService {
-    constructor(_optionsService, _connector, _transactionEventService) {
-        this._optionsService = _optionsService;
-        this._connector = _connector;
-        this._transactionEventService = _transactionEventService;
-        this._subs = [];
-        this._subs.push(this._transactionEventService.connectionInitialized.subscribe((initialized) => {
-            if (initialized) {
-                this._connector.connect();
-            }
-        }));
-    }
-    ngOnDestroy() {
-        this._subs.forEach(s => s.unsubscribe());
-    }
-    selectDocsByTableKey(table, key) {
-        return this._connector.selectDocsByTableKey(table, key);
-    }
-    getDocumentContent(docId, thumbnail = true) {
-        return this._connector.getDocumentContent(docId, thumbnail);
-    }
-}
-SharedService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SharedService_Factory() { return new SharedService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(SharedConnectorService), i0.ɵɵinject(TransactionEventService)); }, token: SharedService, providedIn: "root" });
-SharedService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: "root"
-            },] }
-];
-SharedService.ctorParameters = () => [
-    { type: OptionsService },
-    { type: SharedConnectorService },
-    { type: TransactionEventService }
-];
-
-class RelationService {
-    constructor(_adapterService, _selectMultipleCacheService, _selectSingleCacheService, _selectMultipleParameterizedCacheService) {
-        this._adapterService = _adapterService;
-        this._selectMultipleCacheService = _selectMultipleCacheService;
-        this._selectSingleCacheService = _selectSingleCacheService;
-        this._selectMultipleParameterizedCacheService = _selectMultipleParameterizedCacheService;
-        this._lockMethods = new Map([
-            [RelationKind.Customer, (relationNr) => this._lockCustomerFullObject(relationNr)],
-            [RelationKind.Supplier, (relationNr) => this._lockSupplierFullObject(relationNr)],
-            [RelationKind.Personnel, (relationNr) => this._lockEmployeeFullObject(relationNr)],
-            [RelationKind.Branch, (relationNr) => this._lockBranchFullObject(relationNr)],
-            [RelationKind.Company, (relationNr) => this._lockCompanyFullObject(relationNr)],
-            [RelationKind.ContactPerson, (relationNr) => this._lockContactPerson(relationNr)],
-        ]);
-        this._updateMethods = new Map([
-            [RelationKind.Customer, (relation) => this.updateCustomer(relation)]
-        ]);
-    }
-    getCustomerFullObject(relationNo) {
-        return this._selectSingleCacheService.requestCache(CustomerFullObject, relationNo, () => {
-            return this._adapterService.getCustomerFullObject(relationNo);
-        }).getValue();
-    }
-    getSupplierFullObject(relationNo) {
-        return this._selectSingleCacheService.requestCache(SupplierFullObject, relationNo, () => {
-            return this._adapterService.getSupplierFullObject(relationNo);
-        }).getValue();
-    }
-    insertCustomer(relation) {
-        return this._adapterService.insertCustomer(relation);
-    }
-    updateCustomer(relation) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this._adapterService.updateCustomer(relation);
-        });
-    }
-    getRelationListObjects(relationRequest) {
-        return this._adapterService.getRelationListObjects(relationRequest);
-    }
-    getRelationNumber(relationId) {
-        return this._adapterService.getRelationNumber(relationId);
-    }
-    getBranches(branchNr) {
-        return this._selectMultipleParameterizedCacheService.requestCache(BranchLov, (branchNr) => {
-            return this._adapterService.getBranches(branchNr);
-        }).getValue(branchNr);
-    }
-    updateRelation(relationKind, relation) {
-        const updateMethod = this._updateMethods.get(relationKind);
-        if (updateMethod) {
-            return updateMethod.call(this, relation);
-        }
-        else {
-            const result = new Relation();
-            return Promise.resolve(result);
-        }
-    }
-    lockRelation(relationKind, relationNr) {
-        const lockMethod = this._lockMethods.get(relationKind);
-        if (lockMethod) {
-            return lockMethod.call(this, relationNr);
-        }
-        else {
-            const result = new ValidationResult();
-            result.success = false;
-            return Promise.resolve(result);
-        }
-    }
-    commit() {
-        return this._adapterService.commit();
-    }
-    _lockCustomerFullObject(relationNr) {
-        return this._adapterService.lockCustomerFullObject(relationNr);
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
     }
-    _lockSupplierFullObject(relationNr) {
-        return this._adapterService.lockSupplierFullObject(relationNr);
+    getDocumentContent(id, thumbnail = true) {
+        return new Promise((resolve, reject) => {
+            return this.connector.getDocumentContent(id, thumbnail).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(result.resultObject.documentContent);
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
     }
-    _lockEmployeeFullObject(relationNr) {
-        return this._adapterService.lockEmployeeFullObject(relationNr);
+}
+SharedConnectorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SharedConnectorService_Factory() { return new SharedConnectorService(i0.ɵɵinject(OptionsService)); }, token: SharedConnectorService, providedIn: "root" });
+SharedConnectorService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+SharedConnectorService.ctorParameters = () => [
+    { type: OptionsService }
+];
+
+class SharedService {
+    constructor(_optionsService, _connector, _transactionEventService) {
+        this._optionsService = _optionsService;
+        this._connector = _connector;
+        this._transactionEventService = _transactionEventService;
+        this._subs = [];
+        this._subs.push(this._transactionEventService.connectionInitialized.subscribe((initialized) => {
+            if (initialized) {
+                this._connector.connect();
+            }
+        }));
     }
-    _lockBranchFullObject(relationNr) {
-        return this._adapterService.lockBranchFullObject(relationNr);
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
     }
-    _lockCompanyFullObject(relationNr) {
-        return this._adapterService.lockCompanyFullObject(relationNr);
+    selectDocsByTableKey(table, key) {
+        return this._connector.selectDocsByTableKey(table, key);
     }
-    _lockContactPerson(relationNr) {
-        return this._adapterService.lockContactPerson(relationNr);
+    getDocumentContent(docId, thumbnail = true) {
+        return this._connector.getDocumentContent(docId, thumbnail);
     }
 }
-RelationService.ɵprov = i0.ɵɵdefineInjectable({ factory: function RelationService_Factory() { return new RelationService(i0.ɵɵinject(RelationConnectorService), i0.ɵɵinject(SelectMultipleCacheService), i0.ɵɵinject(SelectSingleCacheService), i0.ɵɵinject(SelectMultipleParameterizedCacheService)); }, token: RelationService, providedIn: "root" });
-RelationService.decorators = [
+SharedService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SharedService_Factory() { return new SharedService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(SharedConnectorService), i0.ɵɵinject(TransactionEventService)); }, token: SharedService, providedIn: "root" });
+SharedService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
             },] }
 ];
-RelationService.ctorParameters = () => [
-    { type: RelationConnectorService },
-    { type: SelectMultipleCacheService },
-    { type: SelectSingleCacheService },
-    { type: SelectMultipleParameterizedCacheService }
+SharedService.ctorParameters = () => [
+    { type: OptionsService },
+    { type: SharedConnectorService },
+    { type: TransactionEventService }
 ];
 
 class AvatarComponent {
@@ -13134,6 +13361,7 @@ class RelationGeneralComponent extends RelationBaseComponent {
         this._dictionaryService = _dictionaryService;
         this._dialogService = _dialogService;
         this._relationService = _relationService;
+        this.relationKind = RelationKind$1;
         this.relType = RelationNameKind;
         this.genderType = GenderType;
         this.readonly = false;
@@ -13191,7 +13419,7 @@ class RelationGeneralComponent extends RelationBaseComponent {
                 }
                 else {
                     this.hideSidebar();
-                    this.relation = yield this._relationService.getCustomerFullObject(parseInt(relationSuggested.relationNr));
+                    this.relation = yield this._relationService.getRelation(relationSuggested.relationType, parseInt(relationSuggested.relationNr));
                     this.relationChange.next(this.relation);
                 }
             }
@@ -13868,6 +14096,11 @@ class TransactionHeaderDeliveryComponent extends TransactionBaseComponent {
             }
         });
     }
+    changeDeliveryDateDefinitive(event, definitive) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.service.updateHeaderTransactionDeliveryDateDefinitive(this.transactionInfo.uuid, definitive);
+    }
 }
 TransactionHeaderDeliveryComponent.decorators = [
     { type: Component, args: [{
@@ -13898,8 +14131,10 @@ TransactionHeaderDeliveryComponent.decorators = [
                                              [defaultEditMode]="false"
                                              [showLabel]="false"
         ></co-transaction-header-delivery-date>
-        <co-icon *ngIf="transactionInfo.deliveryDateDefinitive" [iconData]="iconService.getIcon(icons.LockKeyholeSolid)"></co-icon>
-        <co-icon *ngIf="!transactionInfo.deliveryDateDefinitive" [iconData]="iconService.getIcon(icons.LockKeyholeOpenSolid)"></co-icon>
+        <co-icon *ngIf="transactionInfo.deliveryDateDefinitive" [iconData]="iconService.getIcon(icons.LockKeyholeSolid)"
+                 (click)="changeDeliveryDateDefinitive($event, false)"></co-icon>
+        <co-icon *ngIf="!transactionInfo.deliveryDateDefinitive" [iconData]="iconService.getIcon(icons.LockKeyholeOpenSolid)"
+                 (click)="changeDeliveryDateDefinitive($event, true)"></co-icon>
       </div>
     </ng-template>
     <ng-template #secondBlock>
@@ -15751,7 +15986,6 @@ class TransactionComponent {
         this.showQuickAccess = true;
         this.showButtonBar = true;
         this.activeViewMode = ContentViewMode.List;
-        this.activeCategory = TransactionTypeCategory.SalesOrderOverview;
         this.sidePanelOpen = false;
         this._subs = [];
         this._transaction = new TransactionInfoResponse();
@@ -15768,6 +16002,11 @@ class TransactionComponent {
     set transaction(value) {
         if (value) {
             this._transaction = value;
+            if (this._transaction) {
+                this.activeCategory = this._transaction.transactionInfo.transactionKind === TransactionKind.PurchaseOrder ?
+                    TransactionTypeCategory.PurchaseOrderOverview :
+                    TransactionTypeCategory.SalesOrderOverview;
+            }
         }
     }
     get transaction() {
@@ -18416,9 +18655,7 @@ class TransactionConfirmationHistoryComponent {
             this.getPurchasePortalLine.filterObject = this.purchasePortalFilter;
             this.transactionService.getPurchasePortalLines(this.getPurchasePortalLine).then((result) => {
                 this.transactionService.purchasePortalLine = result;
-                this.transactionService.purchasePortalLine.forEach((element) => {
-                    this.filteredDocBatchArray = element.docBatchArray.filter(value => value.historical === 'G');
-                });
+                this.filteredDocBatchArray = this.transactionService.purchasePortalLine[0].docBatchArray.filter(value => value.historical === 'G');
             });
         });
     }
@@ -18521,31 +18758,20 @@ class TransactionConfirmationDetailsComponent {
         this.showAddOrder = false;
         this.newDocBatchArray = new DocDeliveryBatch();
         this.docBatchSaved = new EventEmitter();
-        this.isEditMode = false;
     }
     showClass() {
         return true;
     }
-    set isEditing(value) {
-        this.isEditMode = value;
-        console.log(this.isEditMode);
-        console.log(this.isEditing);
-    }
-    get isEditing() {
-        return this.isEditMode;
-    }
     addButtonClicked() {
         this.showAddOrder = !this.showAddOrder;
     }
     handleOkClick() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.newDocBatchArray.docAmount && this.newDocBatchArray.confirmedPrice) {
+                this.newDocBatchArray.docDateOrg = new Date();
                 this.newDocBatchArray.deleteLine = "F";
                 this.newDocBatchArray.historical = "G";
-                if (!this.newDocBatchArray.docDateOrg) {
-                    this.newDocBatchArray.docDateOrg = this.newDocBatchArray.docDate;
-                    this.transactionService.purchasePortalLine[0].docBatchArray.push(this.newDocBatchArray);
-                }
+                this.transactionService.purchasePortalLine[0].docBatchArray.push(this.newDocBatchArray);
                 this.transactionService.purchasePortalLine[0].docKind = "IB";
                 yield this.transactionService.updatePurchasePortalLines(this.transactionService.purchasePortalLine[0]);
                 this.docBatchSaved.emit(true);
@@ -18556,10 +18782,6 @@ class TransactionConfirmationDetailsComponent {
             }
         });
     }
-    handleCancelClick() {
-        this.newDocBatchArray = new DocDeliveryBatch();
-        this.isEditing = false;
-    }
 }
 TransactionConfirmationDetailsComponent.decorators = [
     { type: Component, args: [{
@@ -18577,9 +18799,6 @@ TransactionConfirmationDetailsComponent.decorators = [
             <span class="header-right-text" [textContent]="transactionLines.deliveryDate | date:'dd-MM-YYYY'"></span>
           </div>
         </div>
-        <div class="header-inform-user" *ngIf="isEditing">
-          <span class="header-inform-user editting" [textContent]="'EDITING_DATA_ROW' | localize"></span>
-        </div>
         <div *ngIf="showAddOrder" class="columns-wrapper">
           <div class="details-column">
             <co-input-text  class="details-input"
@@ -18620,7 +18839,7 @@ TransactionConfirmationDetailsComponent.decorators = [
       </co-form>
 
       <div *ngIf="showAddOrder" class="save-cancel-wrapper">
-        <co-default-ok-cancel-buttons (okClick)="handleOkClick()" (cancelClick)="handleCancelClick()"></co-default-ok-cancel-buttons>
+        <co-default-ok-cancel-buttons (okClick)="handleOkClick()"></co-default-ok-cancel-buttons>
       </div>
     </div>
   `,
@@ -18639,7 +18858,6 @@ TransactionConfirmationDetailsComponent.propDecorators = {
     transactionInfoNr: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-confirmation-details",] }],
     newDocBatchArray: [{ type: Input }],
-    isEditing: [{ type: Input }],
     docBatchSaved: [{ type: Output }]
 };
 
@@ -18736,7 +18954,6 @@ class TransactionLineSidePanelPurchaseComponent {
         this.goodsReceiptStatus = new GoodsReceiptStatusWithHistory();
         this.selectedLineDocBatchArray = new DocDeliveryBatch();
         this.isDocBatchSaved = false;
-        this.editingMode = false;
         this._transactionInfo = new TransactionInfo();
     }
     set transactionInfo(value) {
@@ -18763,7 +18980,6 @@ class TransactionLineSidePanelPurchaseComponent {
     }
     fillInputOnClick(data) {
         this.selectedLineDocBatchArray = data;
-        this.editingMode = true;
     }
     docBatchSaved(data) {
         this.isDocBatchSaved = data;
@@ -18779,7 +18995,6 @@ TransactionLineSidePanelPurchaseComponent.decorators = [
           [transactionInfoNr]="transactionInfo.transactionNr"
           [transactionLines]="transactionLine"
           [newDocBatchArray]="selectedLineDocBatchArray"
-          [isEditing]="editingMode"
           (docBatchSaved)="docBatchSaved($event)"
         ></co-transaction-confirmation-details>
         <co-transaction-confirmation-history
@@ -20729,7 +20944,10 @@ TransactionQuickAccessPurchaseOrderOverviewModule.decorators = [
                 imports: [
                     CommonModule,
                     QuickSendButtonModule,
-                    SendMethodDialogModule
+                    SendMethodDialogModule,
+                    InputSearchModule,
+                    DialogCatalogModule,
+                    PipeModule
                 ],
                 declarations: [
                     TransactionQuickAccessPurchaseOrderOverviewComponent
@@ -21950,12 +22168,21 @@ class TransactionLineSupplierButtonComponent extends TransactionLineBaseComponen
     showClass() {
         return true;
     }
+    handleOpenDialog(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.showDialogSupplier = !this.readonly;
+    }
     transactionLineSet() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.transactionLine && this.transactionLine.isArticle) {
-                this._relationService.getSupplierFullObject(this.transactionLine.supplierId).then((supp) => {
-                    this.transactionLine.supplierDescription = supp ? supp.displayName : "";
+                const request = new RelationRequest();
+                request.relationId = this.transactionLine.supplierId;
+                this._relationService.getRelationListObjects(request).then((relations) => {
+                    const relation = relations && relations.length > 0 ? relations[0] : null;
+                    this.transactionLine.supplierDescription = relation ? relation.displayName : "";
                 });
+                this.readonly = !this.transactionLine.articleFreeSupplier;
             }
         });
     }
@@ -21964,7 +22191,7 @@ TransactionLineSupplierButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-line-supplier-button",
                 template: `
-    <div class="transaction-line-button big" (click)="showDialogSupplier = true">
+    <div class="transaction-line-button big" (click)="handleOpenDialog($event)">
       <span class="co-transaction-overflow-ellipsis" [textContent]="transactionLine.supplierDescription"></span>
     </div>
     <co-dialog-transaction-line-supplier *ngIf="showDialogSupplier"
@@ -22432,8 +22659,8 @@ class TransactionFilterItemComponent {
         this.placeholder = '';
         this.customContent = false;
         this.singleSelect = false;
-        this.collectionChange = new EventEmitter();
         this.searchCollectionPlaceholder = "SEARCH_IN_COLLECTION";
+        this.collectionChange = new EventEmitter();
         this.searchPlaceholder = "SEARCH";
         this.noResultsLabel = "NO_RESULTS";
         this.showMoreLabel = "SHOW_MORE";
@@ -22482,6 +22709,7 @@ TransactionFilterItemComponent.propDecorators = {
     customContent: [{ type: Input }],
     singleSelect: [{ type: Input }],
     minSearchCharsToLoadCollection: [{ type: Input }],
+    searchCollectionPlaceholder: [{ type: Input }],
     collectionLoadFn: [{ type: Input }],
     collectionChange: [{ type: Output }]
 };
@@ -22689,13 +22917,40 @@ FilterRequestService.ctorParameters = () => [
     { type: TransactionService }
 ];
 
+var SearchPlaceholder;
+(function (SearchPlaceholder) {
+    SearchPlaceholder["ArticleNr"] = "SEARCH_ARTICLE_NR";
+    SearchPlaceholder["BatchNumber"] = "SEARCH_BATCH_NUMBER";
+    SearchPlaceholder["Branch"] = "SEARCH_BRANCH";
+    SearchPlaceholder["CommissionCode"] = "SEARCH_COMMISSION_CODE";
+    SearchPlaceholder["Confirmed"] = "SEARCH_CONFIRMED";
+    SearchPlaceholder["CustomerGroup"] = "SEARCH_CUSTOMER_GROUP";
+    SearchPlaceholder["CustomerName"] = "SEARCH_CUSTOMER_NAME";
+    SearchPlaceholder["Delivered"] = "SEARCH_DELIVERED";
+    SearchPlaceholder["DeliveryMethod"] = "SEARCH_DELIVERY_METHOD";
+    SearchPlaceholder["ExceedenceCode"] = "SEARCH_EXCEEDENCE_CODE";
+    SearchPlaceholder["Invoiced"] = "SEARCH_INVOICED";
+    SearchPlaceholder["MainArticle"] = "SEARCH_MAIN_ARTICLE";
+    SearchPlaceholder["OnHold"] = "SEARCH_ONHOLD";
+    SearchPlaceholder["OwnReference"] = "SEARCH_OWN_REFERENCE";
+    SearchPlaceholder["PurchaseNumber"] = "SEARCH_PURCHASENUMBER";
+    SearchPlaceholder["PurchasePerson"] = "SEARCH_PURCHASEPERSON";
+    SearchPlaceholder["SalesPerson"] = "SEARCH_SALESPERSON";
+    SearchPlaceholder["SerialNumber"] = "SEARCH_SERIAL_NUMBER";
+    SearchPlaceholder["SourceWarehouse"] = "SEARCH_SOURCE_WAREHOUSE";
+    SearchPlaceholder["Supplier"] = "SEARCH_SUPPLIER";
+    SearchPlaceholder["Tags"] = "SEARCH_TAGS";
+    SearchPlaceholder["TurnoverGroup"] = "SEARCH_TURNOVER_GROUP";
+    SearchPlaceholder["Warehouse"] = "SEARCH_WAREHOUSE";
+})(SearchPlaceholder || (SearchPlaceholder = {}));
+
 class TransactionFilterContentBaseComponent {
     constructor(searchService, filterRequestService, transactionService) {
         this.searchService = searchService;
         this.filterRequestService = filterRequestService;
         this.transactionService = transactionService;
+        this.searchPlaceholder = SearchPlaceholder;
         this.searchRequest = this.searchService.searchRequest;
-        this.searchPlaceholder = "SEARCH";
         this.filterButtonLabel = "SEARCH_IMPERATIVE";
     }
     ngOnInit() {
@@ -22789,6 +23044,7 @@ TransactionPurchaseOrderFilterContentArticleComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderArticleNr="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderArticleNr.isShowing"
                         [placeholder]="'ARTICLE_NR'"
+                        [searchCollectionPlaceholder]="searchPlaceholder.ArticleNr"
                         [singleSelect]="true"
                         [minSearchCharsToLoadCollection]="3"
                         [collectionLoadFn]="getArticles"
@@ -22800,6 +23056,7 @@ TransactionPurchaseOrderFilterContentArticleComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderTurnoverGroup="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderTurnoverGroup.isShowing"
                         [placeholder]="'TURNOVER_GROUP'"
+                        [searchCollectionPlaceholder]="searchPlaceholder.TurnoverGroup"
                         [collection]="turnoverGroups"
                         (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeTurnoverGroup')">
         </co-transaction-filter-item>
@@ -22809,6 +23066,7 @@ TransactionPurchaseOrderFilterContentArticleComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderExceedanceCodes="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderExceedanceCodes.isShowing"
                         [placeholder]="'EXCEEDENCE_CODE'"
+                        [searchCollectionPlaceholder]="searchPlaceholder.ExceedenceCode"
                         [collection]="exceedanceCodes"
                         (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'exceedanceCodes')"
         >
@@ -22821,7 +23079,7 @@ TransactionPurchaseOrderFilterContentArticleComponent.decorators = [
                         [placeholder]="'SERIAL_NUMBER'"
                         [customContent]="true">
           <co-input-text [(model)]="searchRequest.serialNumber"
-                         [placeholder]="searchPlaceholder | localize"></co-input-text>
+                         [placeholder]="searchPlaceholder.SerialNumber | localize"></co-input-text>
         </co-transaction-filter-item>
       </div>
 
@@ -22831,7 +23089,7 @@ TransactionPurchaseOrderFilterContentArticleComponent.decorators = [
                         [placeholder]="'BATCH_NUMBER'"
                         [customContent]="true">
           <co-input-text [(model)]="searchRequest.batchNumber"
-                         [placeholder]="searchPlaceholder | localize"></co-input-text>
+                         [placeholder]="searchPlaceholder.BatchNumber | localize"></co-input-text>
         </co-transaction-filter-item>
       </div>
 
@@ -22839,6 +23097,7 @@ TransactionPurchaseOrderFilterContentArticleComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderSupplier="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderSupplier.isShowing"
                         [placeholder]="'SUPPLIER'"
+                        [searchCollectionPlaceholder]="searchPlaceholder.Supplier"
                         [collection]="suppliers"
                         (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeSupplier')">
         </co-transaction-filter-item>
@@ -22951,7 +23210,7 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
                                     [placeholder]="'SERIAL_NUMBER'"
                                     [customContent]="true">
           <co-input-text [(model)]="searchRequest.serialNumber"
-                         [placeholder]="searchPlaceholder | localize"></co-input-text>
+                         [placeholder]="searchPlaceholder.SerialNumber | localize"></co-input-text>
         </co-transaction-filter-item>
       </div>
 
@@ -22961,7 +23220,7 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
                                     [placeholder]="'BATCH_NUMBER'"
                                     [customContent]="true">
           <co-input-text [(model)]="searchRequest.batchNumber"
-                         [placeholder]="searchPlaceholder | localize"></co-input-text>
+                         [placeholder]="searchPlaceholder.BatchNumber | localize"></co-input-text>
         </co-transaction-filter-item>
       </div>
 
@@ -23055,6 +23314,7 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderWarehouse="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderWarehouse.isShowing"
                                     [placeholder]="'WAREHOUSE'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.Warehouse"
                                     [singleSelect]="true"
                                     [collection]="warehouses"
                                     (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'warehouse')">
@@ -23065,6 +23325,7 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderSourceWarehouse="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderSourceWarehouse.isShowing"
                                     [placeholder]="'SOURCE_WAREHOUSE'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.SourceWarehouse"
                                     [singleSelect]="true"
                                     [collection]="sourceWarehouses"
                                     (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'sourceWarehouse')">
@@ -23075,6 +23336,7 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderDeliveryMethod="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderDeliveryMethod.isShowing"
                                     [placeholder]="'DELIVERY_METHOD'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.DeliveryMethod"
                                     [collection]="deliveryMethods"
                                     (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeDeliveryMethod')">
         </co-transaction-filter-item>
@@ -23280,7 +23542,7 @@ TransactionPurchaseOrderFilterContentOrderComponent.decorators = [
                         [placeholder]="'PURCHASENUMBER'"
                         [customContent]="true">
           <co-input-text [(model)]="searchRequest.transNr"
-                         [placeholder]="'PURCHASENUMBER' | localize"></co-input-text>
+                         [placeholder]="searchPlaceholder.PurchaseNumber | localize"></co-input-text>
         </co-transaction-filter-item>
       </div>
 
@@ -23318,6 +23580,7 @@ TransactionPurchaseOrderFilterContentOrderComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderBranch="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderBranch.isShowing"
                         [placeholder]="'BRANCH'"
+                        [searchCollectionPlaceholder]="searchPlaceholder.Branch"
                         [collection]="branches"
                         (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeBranchId')">
         </co-transaction-filter-item>
@@ -23327,6 +23590,7 @@ TransactionPurchaseOrderFilterContentOrderComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderSalesPerson="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderSalesPerson.isShowing"
                         [placeholder]="'PURCHASE_PERSON'"
+                        [searchCollectionPlaceholder]="searchPlaceholder.PurchasePerson"
                         [collection]="purchasePersons"
                         (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeSalesPerson')">
         </co-transaction-filter-item>
@@ -23338,7 +23602,7 @@ TransactionPurchaseOrderFilterContentOrderComponent.decorators = [
                         [placeholder]="'OWN_REFERENCE'"
                         [customContent]="true">
           <co-input-text [(model)]="searchRequest.userReference"
-                         [placeholder]="'OWN_REFERENCE' | localize"></co-input-text>
+                         [placeholder]="searchPlaceholder.OwnReference | localize"></co-input-text>
         </co-transaction-filter-item>
       </div>
 
@@ -23346,6 +23610,7 @@ TransactionPurchaseOrderFilterContentOrderComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderTags="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderTags.isShowing"
                         [placeholder]="'TAGS'"
+                        [searchCollectionPlaceholder]="searchPlaceholder.Tags"
                         [collection]="tags"
                         (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'tagRange')">
         </co-transaction-filter-item>
@@ -23355,6 +23620,7 @@ TransactionPurchaseOrderFilterContentOrderComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderOnHold="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderOnHold.isShowing"
                         [placeholder]="'ON_HOLD'"
+                        [searchCollectionPlaceholder]="searchPlaceholder.OnHold"
                         [collection]="onHoldCodes"
                         (collectionChange)="filterRequestService.handleCollectionChangeForRange($event,'rangeOnHoldCodes')">
         </co-transaction-filter-item>
@@ -23364,6 +23630,7 @@ TransactionPurchaseOrderFilterContentOrderComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderCommissionCode="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderCommissionCode.isShowing"
                         [placeholder]="'COMMISSION_CODE'"
+                        [searchCollectionPlaceholder]="searchPlaceholder.CommissionCode"
                         [collection]="commissionCodes"
                         (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'commissionCodes')">
         </co-transaction-filter-item>
@@ -24185,47 +24452,52 @@ TransactionSalesOrderFilterContentArticleComponent.decorators = [
       <!--Artikelnummer-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderArticleNr="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderArticleNr.isShowing"
-                        [placeholder]="'ARTICLE_NR'"
-                        [singleSelect]="true"
-                        [minSearchCharsToLoadCollection]="3"
-                        [collectionLoadFn]="getArticles"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'articleNr')">
+                                    [placeholder]="'ARTICLE_NR'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.ArticleNr"
+                                    [singleSelect]="true"
+                                    [minSearchCharsToLoadCollection]="3"
+                                    [collectionLoadFn]="getArticles"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'articleNr')">
         </co-transaction-filter-item>
       </div>
 
       <!--Omzetgroep-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderTurnoverGroup="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderTurnoverGroup.isShowing"
-                        [placeholder]="'TURNOVER_GROUP'"
-                        [collection]="turnoverGroups"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeTurnoverGroup')">
+                                    [placeholder]="'TURNOVER_GROUP'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.TurnoverGroup"
+                                    [collection]="turnoverGroups"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeTurnoverGroup')">
         </co-transaction-filter-item>
       </div>
 
       <!--Hoofdartikel-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderMainArticle="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderMainArticle.isShowing"
-                        [placeholder]="'MAIN_ARTICLE'"
-                        [collection]="mainArticles"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'mainArticleNrRange')">
+                                    [placeholder]="'MAIN_ARTICLE'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.MainArticle"
+                                    [collection]="mainArticles"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'mainArticleNrRange')">
         </co-transaction-filter-item>
       </div>
 
       <!--Uitloopcode -->
       <div class="filter-item-wrapper" lazyRender #lazyRenderExceedanceCodes="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderExceedanceCodes.isShowing"
-                        [placeholder]="'EXCEEDENCE_CODE'"
-                        [collection]="exceedanceCodes"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'exceedanceCodes')">
+                                    [placeholder]="'EXCEEDENCE_CODE'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.ExceedenceCode"
+                                    [collection]="exceedanceCodes"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'exceedanceCodes')">
         </co-transaction-filter-item>
       </div>
 
       <!--Leverancier-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderSupplier="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderSupplier.isShowing"
-                        [placeholder]="'SUPPLIER'"
-                        [collection]="suppliers"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeSupplier')"
+                                    [placeholder]="'SUPPLIER'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.Supplier"
+                                    [collection]="suppliers"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeSupplier')"
         >
         </co-transaction-filter-item>
       </div>
@@ -24319,9 +24591,10 @@ TransactionSalesOrderFilterContentLogisticsComponent.decorators = [
       <!--Levermethode-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderDeliveryMethod="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderDeliveryMethod.isShowing"
-                        [placeholder]="'DELIVERY_METHOD'"
-                        [collection]="deliveryMethods"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeDeliveryMethod')"
+                                    [placeholder]="'DELIVERY_METHOD'"
+                                    [collection]="deliveryMethods"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.DeliveryMethod"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeDeliveryMethod')"
         >
         </co-transaction-filter-item>
       </div>
@@ -24330,8 +24603,8 @@ TransactionSalesOrderFilterContentLogisticsComponent.decorators = [
       <!--Leverdatum definitief-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderDeliveryDateFinal="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderDeliveryDateFinal.isShowing"
-                        [placeholder]="'DELIVERY_DATE_FINAL'"
-                        [customContent]="true"
+                                    [placeholder]="'DELIVERY_DATE_FINAL'"
+                                    [customContent]="true"
         >
           <co-input-checkbox
             [model]="searchRequest.deliveryDateDefinitive === 'J'"
@@ -24354,131 +24627,133 @@ TransactionSalesOrderFilterContentLogisticsComponent.decorators = [
                                               [label]="'DELIVERED'"
                                               (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityDelivered')"
         ></co-transaction-filter-historic-state>
-        </div>
-
-        <!--Gefactureerd-->
-        <div class="filter-item-wrapper" lazyRender #lazyRenderInvoiced="lazyRender">
-          <co-transaction-filter-historic-state *ngIf="lazyRenderInvoiced.isShowing"
-                                                [label]="'INVOICED'"
-                                                (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityInvoiced')"
-          ></co-transaction-filter-historic-state>
-        </div>
+      </div>
 
-        <!--Te picken-->
-        <div class="filter-item-wrapper" lazyRender #lazyRenderToBePicked="lazyRender">
-          <co-transaction-filter-historic-state *ngIf="lazyRenderToBePicked.isShowing"
-                                                [label]="'TO_BE_PICKED'"
-                                                (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityToBePicked')"
-          ></co-transaction-filter-historic-state>
-        </div>
+      <!--Gefactureerd-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderInvoiced="lazyRender">
+        <co-transaction-filter-historic-state *ngIf="lazyRenderInvoiced.isShowing"
+                                              [label]="'INVOICED'"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityInvoiced')"
+        ></co-transaction-filter-historic-state>
+      </div>
 
-        <!--Gepicked-->
-        <div class="filter-item-wrapper" lazyRender #lazyRenderPicked="lazyRender">
-          <co-transaction-filter-historic-state *ngIf="lazyRenderPicked.isShowing"
-                                                [label]="'PICKED'"
-                                                (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityPicked')"
-          ></co-transaction-filter-historic-state>
-        </div>
+      <!--Te picken-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderToBePicked="lazyRender">
+        <co-transaction-filter-historic-state *ngIf="lazyRenderToBePicked.isShowing"
+                                              [label]="'TO_BE_PICKED'"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityToBePicked')"
+        ></co-transaction-filter-historic-state>
+      </div>
 
-        <!--Bevestigde leverdatum-->
-        <div class="filter-item-wrapper" lazyRender #lazyRenderConfirmedDeliveryDate="lazyRender">
-          <co-transaction-filter-item *ngIf="lazyRenderConfirmedDeliveryDate.isShowing"
-                          [placeholder]="'CONFIRMED_DELIVERY_DATE'"
-                          [customContent]="true">
-            <co-input-date-range
-              [startDate]="confirmedDeliveryStartDate"
-              [endDate]="confirmedDeliveryEndDate"
-              (dateRangeChange)="onDateRangeChange($event, 'confirmedDeliveryDateRange')"
-              (cleared)="onClearedDateRangeChange('confirmedDeliveryDateRange')"
-              [placeholder]="'SELECT_DATE' | localize">
-            </co-input-date-range>
-          </co-transaction-filter-item>
-        </div>
+      <!--Gepicked-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderPicked="lazyRender">
+        <co-transaction-filter-historic-state *ngIf="lazyRenderPicked.isShowing"
+                                              [label]="'PICKED'"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityPicked')"
+        ></co-transaction-filter-historic-state>
+      </div>
 
-        <!--Aankomstdatum-->
-        <div class="filter-item-wrapper" lazyRender #lazyRenderArrivalDate="lazyRender">
-          <co-transaction-filter-item *ngIf="lazyRenderArrivalDate.isShowing"
-                          [placeholder]="'ARRIVAL_DATE'"
-                          [customContent]="true">
-            <co-input-date-range
-              [startDate]="arrivalStartDate"
-              [endDate]="arrivalEndDate"
-              (dateRangeChange)="onDateRangeChange($event, 'arrivalDateRange')"
-              (cleared)="onClearedDateRangeChange('arrivalDateRange')"
-              [placeholder]="'SELECT_DATE' | localize">
-            </co-input-date-range>
-          </co-transaction-filter-item>
-        </div>
+      <!--Bevestigde leverdatum-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderConfirmedDeliveryDate="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderConfirmedDeliveryDate.isShowing"
+                                    [placeholder]="'CONFIRMED_DELIVERY_DATE'"
+                                    [customContent]="true">
+          <co-input-date-range
+            [startDate]="confirmedDeliveryStartDate"
+            [endDate]="confirmedDeliveryEndDate"
+            (dateRangeChange)="onDateRangeChange($event, 'confirmedDeliveryDateRange')"
+            (cleared)="onClearedDateRangeChange('confirmedDeliveryDateRange')"
+            [placeholder]="'SELECT_DATE' | localize">
+          </co-input-date-range>
+        </co-transaction-filter-item>
+      </div>
 
-        <!--Deellevering-->
-        <div class="filter-item-wrapper" lazyRender #lazyRenderPartialDelivery="lazyRender">
-          <co-transaction-filter-item *ngIf="lazyRenderPartialDelivery.isShowing"
-                          [placeholder]="'PART_DELIVERY'"
-                          [customContent]="true">
-            <co-input-checkbox
-              [model]="searchRequest.partialDelivery === 'J'"
-              (modelChange)="filterRequestService.handleCheckboxValueChangeForString($event, 'partialDelivery')"
-              [label]="'PART_DELIVERY' | localize">
-            </co-input-checkbox>
-          </co-transaction-filter-item>
-        </div>
+      <!--Aankomstdatum-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderArrivalDate="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderArrivalDate.isShowing"
+                                    [placeholder]="'ARRIVAL_DATE'"
+                                    [customContent]="true">
+          <co-input-date-range
+            [startDate]="arrivalStartDate"
+            [endDate]="arrivalEndDate"
+            (dateRangeChange)="onDateRangeChange($event, 'arrivalDateRange')"
+            (cleared)="onClearedDateRangeChange('arrivalDateRange')"
+            [placeholder]="'SELECT_DATE' | localize">
+          </co-input-date-range>
+        </co-transaction-filter-item>
+      </div>
 
-        <!--Magazijn -->
-        <div class="filter-item-wrapper" lazyRender #lazyRenderWarehouse="lazyRender">
-          <co-transaction-filter-item *ngIf="lazyRenderWarehouse.isShowing"
-                          [placeholder]="'WAREHOUSE'"
-                          [singleSelect]="true"
-                          [collection]="warehouses"
-                          (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'warehouse')">
-          </co-transaction-filter-item>
-        </div>
+      <!--Deellevering-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderPartialDelivery="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderPartialDelivery.isShowing"
+                                    [placeholder]="'PART_DELIVERY'"
+                                    [customContent]="true">
+          <co-input-checkbox
+            [model]="searchRequest.partialDelivery === 'J'"
+            (modelChange)="filterRequestService.handleCheckboxValueChangeForString($event, 'partialDelivery')"
+            [label]="'PART_DELIVERY' | localize">
+          </co-input-checkbox>
+        </co-transaction-filter-item>
+      </div>
 
-        <!--Bron magazijn-->
-        <div class="filter-item-wrapper" lazyRender #lazyRenderSourceWarehouse="lazyRender">
-          <co-transaction-filter-item *ngIf="lazyRenderSourceWarehouse.isShowing"
-                          [placeholder]="'SOURCE_WAREHOUSE'"
-                          [singleSelect]="true"
-                          [collection]="sourceWarehouses"
-                          (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'sourceWarehouse')">
-          </co-transaction-filter-item>
-        </div>
+      <!--Magazijn -->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderWarehouse="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderWarehouse.isShowing"
+                                    [placeholder]="'WAREHOUSE'"
+                                    [singleSelect]="true"
+                                    [collection]="warehouses"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.Warehouse"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'warehouse')">
+        </co-transaction-filter-item>
+      </div>
 
-        <!--Serienummer -->
-        <div class="filter-item-wrapper" lazyRender #lazyRenderSerialNumber="lazyRender">
-          <co-transaction-filter-item *ngIf="lazyRenderSerialNumber.isShowing"
-                          [placeholder]="'SERIAL_NUMBER'"
-                          [customContent]="true">
-            <co-input-text [(model)]="searchRequest.serialNumber"
-                           [placeholder]="searchPlaceholder | localize"></co-input-text>
-          </co-transaction-filter-item>
-        </div>
+      <!--Bron magazijn-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderSourceWarehouse="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderSourceWarehouse.isShowing"
+                                    [placeholder]="'SOURCE_WAREHOUSE'"
+                                    [singleSelect]="true"
+                                    [collection]="sourceWarehouses"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.SourceWarehouse"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'sourceWarehouse')">
+        </co-transaction-filter-item>
+      </div>
 
-        <!--Batchnummer -->
-        <div class="filter-item-wrapper" lazyRender #lazyRenderBatchNumber="lazyRender">
-          <co-transaction-filter-item *ngIf="lazyRenderBatchNumber.isShowing"
-                          [placeholder]="'BATCH_NUMBER'"
-                          [customContent]="true">
-            <co-input-text [(model)]="searchRequest.batchNumber"
-                           [placeholder]="searchPlaceholder | localize"></co-input-text>
-          </co-transaction-filter-item>
-        </div>
+      <!--Serienummer -->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderSerialNumber="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderSerialNumber.isShowing"
+                                    [placeholder]="'SERIAL_NUMBER'"
+                                    [customContent]="true">
+          <co-input-text [(model)]="searchRequest.serialNumber"
+                         [placeholder]="searchPlaceholder.SerialNumber | localize"></co-input-text>
+        </co-transaction-filter-item>
+      </div>
 
-        <!--Inclusief retouren-->
-        <div class="filter-item-wrapper" lazyRender #lazyRenderIncludingReturns="lazyRender">
-          <co-transaction-filter-item *ngIf="lazyRenderIncludingReturns.isShowing"
-                          [placeholder]="'INCLUDING_RETURNS'"
-                          [customContent]="true">
-            <co-input-checkbox
-              [label]="'INCLUDING_RETURNS' | localize"
-              [model]="searchRequest.includingReturns === 1"
-              (modelChange)="filterRequestService.handleCheckboxValueChangeForNumber($event, 'includingReturns')"
-            >
-            </co-input-checkbox>
-          </co-transaction-filter-item>
-        </div>
+      <!--Batchnummer -->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderBatchNumber="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderBatchNumber.isShowing"
+                                    [placeholder]="'BATCH_NUMBER'"
+                                    [customContent]="true">
+          <co-input-text [(model)]="searchRequest.batchNumber"
+                         [placeholder]="searchPlaceholder.BatchNumber | localize"></co-input-text>
+        </co-transaction-filter-item>
+      </div>
 
-        <!--Levermethode op (regel/header): todo: nog uitzoeken welke filter dit is-->
+      <!--Inclusief retouren-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderIncludingReturns="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderIncludingReturns.isShowing"
+                                    [placeholder]="'INCLUDING_RETURNS'"
+                                    [customContent]="true">
+          <co-input-checkbox
+            [label]="'INCLUDING_RETURNS' | localize"
+            [model]="searchRequest.includingReturns === 1"
+            (modelChange)="filterRequestService.handleCheckboxValueChangeForNumber($event, 'includingReturns')"
+          >
+          </co-input-checkbox>
+        </co-transaction-filter-item>
       </div>
+
+      <!--Levermethode op (regel/header): todo: nog uitzoeken welke filter dit is-->
+    </div>
   `
             },] }
 ];
@@ -24605,8 +24880,8 @@ TransactionSalesOrderFilterContentOrderComponent.decorators = [
       <!--Orderdatum-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderOrderDate="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderOrderDate.isShowing"
-                        [placeholder]="'ORDER_DATE'"
-                        [customContent]="true">
+                                    [placeholder]="'ORDER_DATE'"
+                                    [customContent]="true">
           <co-input-date-range
             [startDate]="transStartDate"
             [endDate]="transEndDate"
@@ -24620,8 +24895,8 @@ TransactionSalesOrderFilterContentOrderComponent.decorators = [
       <!--Leverdatum-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderDeliveryDate="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderDeliveryDate.isShowing"
-                        [placeholder]="'DELIVERY_DATE'"
-                        [customContent]="true">
+                                    [placeholder]="'DELIVERY_DATE'"
+                                    [customContent]="true">
           <co-input-date-range
             [startDate]="deliveryStartDate"
             [endDate]="deliveryEndDate"
@@ -24635,18 +24910,20 @@ TransactionSalesOrderFilterContentOrderComponent.decorators = [
       <!--Filiaal-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderBranch="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderBranch.isShowing"
-                        [placeholder]="'BRANCH'"
-                        [collection]="branches"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeBranchId')">
+                                    [placeholder]="'BRANCH'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.Branch"
+                                    [collection]="branches"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeBranchId')">
         </co-transaction-filter-item>
       </div>
 
       <!--Verkoper-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderHandledBy="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderHandledBy.isShowing"
-                        [placeholder]="'HANDLED_BY'"
-                        [collection]="salesPersons"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeSalesPerson')"
+                                    [placeholder]="'HANDLED_BY'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.SalesPerson"
+                                    [collection]="salesPersons"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeSalesPerson')"
         >
         </co-transaction-filter-item>
       </div>
@@ -24654,38 +24931,39 @@ TransactionSalesOrderFilterContentOrderComponent.decorators = [
       <!--Eigen referentie-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderUserReference="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderUserReference.isShowing"
-                        [placeholder]="'OWN_REFERENCE'"
-                        [customContent]="true">
+                                    [placeholder]="'OWN_REFERENCE'"
+                                    [customContent]="true">
           <co-input-text [(model)]="searchRequest.userReference"
-                         [placeholder]="'OWN_REFERENCE' | localize"></co-input-text>
+                         [placeholder]="searchPlaceholder.OwnReference | localize"></co-input-text>
         </co-transaction-filter-item>
       </div>
 
       <!--Tags-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderTags="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderTags.isShowing"
-                        [placeholder]="'TAGS'"
-                        [collection]="tags"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'tagRange')">
-          <co-input-text [(model)]="searchRequest.tagRange" [placeholder]="'TAGS' | localize"></co-input-text>
+                                    [placeholder]="'TAGS'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.Tags"
+                                    [collection]="tags"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'tagRange')">
+          <co-input-text [(model)]="searchRequest.tagRange" [placeholder]="searchPlaceholder.Tags | localize"></co-input-text>
         </co-transaction-filter-item>
       </div>
 
       <!--On hold codes-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderOnHold="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderOnHold.isShowing"
-                        [placeholder]="'ON_HOLD'"
-                        [collection]="onHoldCodes"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event,'rangeOnHoldCodes')">
-          <co-input-text [(model)]="searchRequest.tagRange" [placeholder]="'TAGS' | localize"></co-input-text>
+                                    [placeholder]="'ON_HOLD'"
+                                    [collection]="onHoldCodes"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForRange($event,'rangeOnHoldCodes')">
+          <co-input-text [(model)]="searchRequest.tagRange" [placeholder]="searchPlaceholder.OnHold | localize"></co-input-text>
         </co-transaction-filter-item>
       </div>
 
       <!--Order definitief-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderTransDef="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderTransDef.isShowing"
-                        [placeholder]="'ORDER_DEFINITIVE'"
-                        [customContent]="true">
+                                    [placeholder]="'ORDER_DEFINITIVE'"
+                                    [customContent]="true">
           <co-input-checkbox
             [model]="searchRequest.transactionDefinitive === 'J'"
             (modelChange)="filterRequestService.handleCheckboxValueChangeForString($event, 'transactionDefinitive')"
@@ -24696,9 +24974,10 @@ TransactionSalesOrderFilterContentOrderComponent.decorators = [
       <!--Commissiecode-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderCommissionCodes="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderCommissionCodes.isShowing"
-                        [placeholder]="'COMMISSION_CODE'"
-                        [collection]="commissionCodes"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'commissionCodes')"
+                                    [placeholder]="'COMMISSION_CODE'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.CommissionCode"
+                                    [collection]="commissionCodes"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'commissionCodes')"
         >
         </co-transaction-filter-item>
       </div>
@@ -24706,8 +24985,8 @@ TransactionSalesOrderFilterContentOrderComponent.decorators = [
       <!--Inactieve transacties-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderInactiveTrans="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderInactiveTrans.isShowing"
-                        [placeholder]="'INACTIVE_TRANSACTIONS'"
-                        [customContent]="true">
+                                    [placeholder]="'INACTIVE_TRANSACTIONS'"
+                                    [customContent]="true">
           <co-input-checkbox
             [model]="searchRequest.active === false"
             (modelChange)="searchRequest.active = !$event"
@@ -24719,21 +24998,23 @@ TransactionSalesOrderFilterContentOrderComponent.decorators = [
       <!--Klantnaam-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderRelationName="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderRelationName.isShowing"
-                        [placeholder]="'CUSTOMER_NAME'"
-                        [singleSelect]="true"
-                        [minSearchCharsToLoadCollection]="3"
-                        [collectionLoadFn]="loadCustomers"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'relationName' )">
+                                    [placeholder]="'CUSTOMER_NAME'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.CustomerName"
+                                    [singleSelect]="true"
+                                    [minSearchCharsToLoadCollection]="3"
+                                    [collectionLoadFn]="loadCustomers"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'relationName' )">
         </co-transaction-filter-item>
       </div>
 
       <!--Klantgroep-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderCustomerGroup="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderCustomerGroup.isShowing"
-                        [placeholder]="'CUSTOMER_GROUP'"
-                        [singleSelect]="true"
-                        [collection]="customerGroups"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'customerGroupId')">
+                                    [placeholder]="'CUSTOMER_GROUP'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.CustomerGroup"
+                                    [singleSelect]="true"
+                                    [collection]="customerGroups"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'customerGroupId')">
         </co-transaction-filter-item>
       </div>
     </div>