@colijnit/transaction 12.1.77 → 12.1.79

package/projects/transaction/src/lib/component/transaction-search/transaction-filter-content/sales-order-filter-content/transaction-sales-order-filter-content-order/transaction-sales-order-filter-content-order.component.ts

@@ -0,0 +1,274 @@
+import {Component, HostBinding} from "@angular/core";
+import {CoDomainValue} from "@colijnit/mainapi/build/model/co-domain-value.bo";
+import {CustomerGroup} from "@colijnit/transactionapi/build/model/customer-group.bo";
+import {OnHoldCode} from "@colijnit/transactionapi/build/model/on-hold-code.bo";
+import {RelationRequest} from "@colijnit/relationapi/build/model/relation-request";
+import {FilterItemViewmodel} from "../../../../../model/filter-item.viewmodel";
+import {FilterViewmodel} from "../../../../../model/filter-viewmodel";
+import {TransactionService} from "../../../../../service/transaction.service";
+import {TransactionFilterContentBaseComponent} from "../../../../core/base/transaction-filter-content-base.component";
+import {FilterRequestService} from "../../../service/filter-request.service";
+import {TransactionSearchService} from "../../../service/transaction-search.service";
+import {Tag} from "@colijnit/mainapi/build/model/tag";
+import {SalesPerson} from "@colijnit/relationapi/build/model/sales-person.bo";
+import {RelationListObject} from "@colijnit/relationapi/build/model/relation-list-object.bo";
+import {RelationService} from "../../../../../service/relation.service";
+import {RelationKind} from "@colijnit/relationapi/build/enum/relation-kind.enum";
+
+@Component({
+  selector: 'co-transaction-sales-order-filter-content-order',
+  template: `
+    <div class="transaction-filter-content-order-wrapper transaction-filter-content-wrapper" lazyRenderMaster>
+
+      <!--Orderdatum-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderOrderDate="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderOrderDate.isShowing"
+                                    [placeholder]="'ORDER_DATE'"
+                                    [customContent]="true">
+          <co-input-date-range
+            [startDate]="transStartDate"
+            [endDate]="transEndDate"
+            (dateRangeChange)="onDateRangeChange($event, 'rangeTransDate')"
+            (cleared)="onClearedDateRangeChange('rangeTransDate')"
+            [placeholder]="'SELECT_DATE' | localize">
+          </co-input-date-range>
+        </co-transaction-filter-item>
+      </div>
+
+      <!--Leverdatum-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderDeliveryDate="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderDeliveryDate.isShowing"
+                                    [placeholder]="'DELIVERY_DATE'"
+                                    [customContent]="true">
+          <co-input-date-range
+            [startDate]="deliveryStartDate"
+            [endDate]="deliveryEndDate"
+            (dateRangeChange)="onDateRangeChange($event, 'deliveryDateRange')"
+            (cleared)="onClearedDateRangeChange('deliveryDateRange')"
+            [placeholder]="'SELECT_DATE' | localize">
+          </co-input-date-range>
+        </co-transaction-filter-item>
+      </div>
+
+      <!--Filiaal-->
+      <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>
+      </div>
+
+      <!--Verkoper-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderHandledBy="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderHandledBy.isShowing"
+                                    [placeholder]="'HANDLED_BY'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.SalesPerson"
+                                    [collection]="salesPersons"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeSalesPerson')"
+        >
+        </co-transaction-filter-item>
+      </div>
+
+      <!--Eigen referentie-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderUserReference="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderUserReference.isShowing"
+                                    [placeholder]="'OWN_REFERENCE'"
+                                    [customContent]="true">
+          <co-input-text [(model)]="searchRequest.userReference"
+                         [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'"
+                                    [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]="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">
+          <co-input-checkbox
+            [model]="searchRequest.transactionDefinitive === 'J'"
+            (modelChange)="filterRequestService.handleCheckboxValueChangeForString($event, 'transactionDefinitive')"
+            [label]="'ORDER_DEFINITIVE' | localize"></co-input-checkbox>
+        </co-transaction-filter-item>
+      </div>
+
+      <!--Commissiecode-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderCommissionCodes="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderCommissionCodes.isShowing"
+                                    [placeholder]="'COMMISSION_CODE'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.CommissionCode"
+                                    [collection]="commissionCodes"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'commissionCodes')"
+        >
+        </co-transaction-filter-item>
+      </div>
+
+      <!--Inactieve transacties-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderInactiveTrans="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderInactiveTrans.isShowing"
+                                    [placeholder]="'INACTIVE_TRANSACTIONS'"
+                                    [customContent]="true">
+          <co-input-checkbox
+            [model]="searchRequest.active === false"
+            (modelChange)="searchRequest.active = !$event"
+            [label]="'INACTIVE_TRANSACTIONS' | localize"
+          ></co-input-checkbox>
+        </co-transaction-filter-item>
+      </div>
+
+      <!--Klantnaam-->
+      <div class="filter-item-wrapper" lazyRender #lazyRenderRelationName="lazyRender">
+        <co-transaction-filter-item *ngIf="lazyRenderRelationName.isShowing"
+                                    [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'"
+                                    [searchCollectionPlaceholder]="searchPlaceholder.CustomerGroup"
+                                    [singleSelect]="true"
+                                    [collection]="customerGroups"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'customerGroupId')">
+        </co-transaction-filter-item>
+      </div>
+    </div>
+  `
+})
+export class TransactionSalesOrderFilterContentOrderComponent extends TransactionFilterContentBaseComponent {
+
+  @HostBinding("class.co-transaction-search-filter-content")
+  public showClass(): boolean {
+    return true;
+  }
+
+  public salesPersons: FilterItemViewmodel[];
+  public salesPersonsFields: { text, value } = {text: "name", value: "relationId"};
+
+  public tags: FilterItemViewmodel[];
+  public tagsFields: { text, value } = {text: "description", value: "tagValueId"};
+
+  public branches: FilterItemViewmodel[];
+  public branchFields: { text, value } = {text: "familyName", value: "relationId"};
+
+  public onHoldCodes: FilterItemViewmodel[];
+  public onHoldCodeFields: { text, value } = {text: "description", value: "onHoldCode"};
+
+  public commissionCodes: FilterItemViewmodel[];
+  public commissionCodeFields: { text, value } = {text: "description", value: "code"};
+
+  public customerGroups: FilterItemViewmodel[];
+  public customerGroupFields: { text, value } = {text: "naam", value: "groepsnummer"};
+
+  public transStartDate: Date;
+  public transEndDate: Date;
+  public deliveryStartDate: Date;
+  public deliveryEndDate: Date;
+
+  constructor(
+    public searchService: TransactionSearchService,
+    public filterRequestService: FilterRequestService,
+    public transactionService: TransactionService,
+    public relationService: RelationService,
+  ) {
+    super(searchService, filterRequestService, transactionService)
+  }
+
+  public ngOnInit(): void {
+    this._setRangeDates();
+    this._setSalesPersons();
+    this._setTags();
+    this._setBranches();
+    this._setOnHoldCodes();
+    this._setCommissionCodes();
+    this._setCustomerGroups();
+  }
+
+
+  public loadCustomers = async (nameFilter: string) => {
+    const request: RelationRequest = new RelationRequest();
+    request.familyName = nameFilter;
+    return this.relationService.getRelationListObjects(request).then((relations: RelationListObject[]) => {
+      return new FilterViewmodel(relations, {text: 'familyName', value: 'familyName'}).filterItems;
+    });
+  }
+
+  private _setRangeDates(): void {
+    this.transStartDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.rangeTransDate, 0);
+    this.transEndDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.rangeTransDate, 1);
+    this.deliveryStartDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.deliveryDateRange, 0);
+    this.deliveryEndDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.deliveryDateRange, 1);
+  }
+
+  //Verkoper
+  private _setSalesPersons(): void {
+    this.transactionService.getSalesPersons().then((salesPersons: SalesPerson[]) => {
+      this.salesPersons = new FilterViewmodel(salesPersons, this.salesPersonsFields).filterItems;
+    });
+  }
+
+  // Tags
+  private _setTags(): void {
+    this.transactionService.getTags(1).then((tags: Tag[]) => {
+      this.tags = new FilterViewmodel(tags, this.tagsFields).filterItems;
+    });
+  }
+
+  //Branches
+  private _setBranches(): void {
+    const request: RelationRequest = new RelationRequest();
+    request.relationType = RelationKind.Branch;
+    this.relationService.getRelationListObjects(request).then((branches: RelationListObject[]) => {
+      this.branches = new FilterViewmodel(branches, this.branchFields).filterItems;
+    });
+  }
+
+  //OnHoldCodes
+  private _setOnHoldCodes(): void {
+    this.transactionService.getOnHoldCodes().then((onHoldCodes: OnHoldCode[]) => {
+      this.onHoldCodes = new FilterViewmodel(onHoldCodes, this.onHoldCodeFields).filterItems;
+    });
+  }
+
+  //CommissionCodes
+  private _setCommissionCodes(): void {
+    this.transactionService.getCommissionCodes("NL").then((commissionCodes: CoDomainValue[]) => {
+      this.commissionCodes = new FilterViewmodel(commissionCodes, this.commissionCodeFields).filterItems;
+    });
+  }
+
+  //CustomerGroups
+  private _setCustomerGroups(): void {
+    this.transactionService.getCustomerGroups().then((customerGroups: CustomerGroup[]) => {
+      this.customerGroups = new FilterViewmodel(customerGroups, this.customerGroupFields).filterItems;
+    });
+  }
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-filter-content/sales-order-filter-content/transaction-sales-order-filter-content-order/transaction-sales-order-filter-content-order.module.ts

@@ -0,0 +1,38 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {
+  InputDatePickerModule,
+  InputListboxModule,
+  InputTextModule,
+  MultiSelectListModule,
+  FilterItemModule, InputDateRangePickerModule, ButtonModule, InputCheckboxModule
+} from "@colijnit/corecomponents_v12";
+import { PipeModule } from "../../../../../pipe/pipe.module";
+import { CoreModule } from "../../../../core/core.module";
+import { TransactionFilterItemModule } from "../../../transaction-filter-item/transaction-filter-item.module";
+import {TransactionSalesOrderFilterContentOrderComponent} from "./transaction-sales-order-filter-content-order.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    InputDatePickerModule,
+    PipeModule,
+    MultiSelectListModule,
+    InputTextModule,
+    InputListboxModule,
+    FilterItemModule,
+    InputDateRangePickerModule,
+    ButtonModule,
+    InputCheckboxModule,
+    CoreModule,
+    TransactionFilterItemModule
+  ],
+  declarations: [
+    TransactionSalesOrderFilterContentOrderComponent
+  ],
+  exports: [
+    TransactionSalesOrderFilterContentOrderComponent
+  ]
+})
+export class TransactionSalesOrderFilterContentOrderModule {
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-filter-historic-state/transaction-filter-historic-state.component.ts

@@ -0,0 +1,70 @@
+import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from "@angular/core";
+import {QuantityInHistoricState} from "@colijnit/transactionapi/build/enum/quantity-in-historic-state.enum";
+import { DictionaryService } from "../../../service/dictionary.service";
+
+export interface HistoricStates {
+  description: string;
+  code: QuantityInHistoricState;
+  checked: boolean;
+}
+
+@Component({
+  selector: "co-transaction-filter-historic-state",
+  template: `
+    <co-transaction-filter-item
+      [placeholder]="label"
+      [collection]="states"
+      (collectionChange)="collectionChange.emit($event)">
+    </co-transaction-filter-item>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class TransactionFilterHistoricStateComponent {
+
+  @Input()
+  public set label(value: string) {
+    this._label = value;
+    this.groupName = this._label.toLowerCase() + "_group";
+    this.labelNothing = "NOTHING_" + this._label.toUpperCase();
+    this.labelPartly = "PARTLY_" + this._label.toUpperCase();
+    this.labelFully = "FULLY_" + this._label.toUpperCase();
+    this._setStates();
+  }
+
+  public get label(): string {
+    return this._label;
+  }
+
+  @Input()
+  public expanded: boolean = true;
+
+  @Output()
+  public collectionChange: EventEmitter<any> = new EventEmitter<any>();
+
+  @HostBinding("class.co-transaction-filter-historic-state")
+  public showClass() {
+    return true;
+  }
+
+  private _label: string;
+
+  public groupName: string;
+  public labelNothing: string;
+  public labelPartly: string;
+  public labelFully: string;
+
+  public states: HistoricStates[] = [];
+
+  constructor (
+    private _dictionary: DictionaryService
+  ){
+  }
+
+  private _setStates(): void {
+    this.states = [
+      {description: this._dictionary.get(this.labelNothing), code: QuantityInHistoricState.Nothing, checked: false},
+      {description: this._dictionary.get(this.labelPartly), code: QuantityInHistoricState.Partly, checked: false},
+      {description: this._dictionary.get(this.labelFully), code: QuantityInHistoricState.Fully, checked: false}
+    ];
+  }
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-filter-historic-state/transaction-filter-historic-state.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import { TransactionFilterItemModule } from "../transaction-filter-item/transaction-filter-item.module";
+import {TransactionFilterHistoricStateComponent} from "./transaction-filter-historic-state.component";
+import {FilterItemModule, InputRadioButtonModule} from "@colijnit/corecomponents_v12";
+import {PipeModule} from "../../../pipe/pipe.module";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FilterItemModule,
+    PipeModule,
+    InputRadioButtonModule,
+    TransactionFilterItemModule
+  ],
+  declarations: [
+    TransactionFilterHistoricStateComponent
+  ],
+  exports: [
+    TransactionFilterHistoricStateComponent
+  ]
+})
+export class TransactionFilterHistoricStateModule {
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-filter-item/transaction-filter-item.component.ts

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core";
+import { TransactionSearchService } from "../service/transaction-search.service";
+
+
+@Component({
+  selector: "co-transaction-filter-item",
+  template: `
+    <co-filter-item [placeholder]="placeholder | localize"
+                    [expanded]="true"
+                    [singleSelect]="singleSelect"
+                    [customContent]="customContent"
+                    [collection]="collection"
+                    [minSearchCharsToLoadCollection]="minSearchCharsToLoadCollection"
+                    [collectionLoadFn]="collectionLoadFn"
+                    [searchPlaceholder]="searchCollectionPlaceholder | localize"
+                    [noResultsLabel]="noResultsLabel | localize"
+                    [showMoreLabel]="showMoreLabel | localize"
+                    [showLessLabel]="showLessLabel | localize"
+                    [filterButtonLabel]="filterButtonLabel | localize"
+                    (collectionChange)="collectionChange.emit($event)"
+                    (filterButtonClicked)="onFilterButtonClicked()"
+    >
+      <ng-content></ng-content>
+    </co-filter-item>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class TransactionFilterItemComponent {
+
+  @Input()
+  public collection: any[] = [];
+
+  @Input()
+  public placeholder: string = '';
+
+  @Input()
+  public customContent: boolean = false;
+
+  @Input()
+  public singleSelect: boolean = false;
+
+  @Input()
+  public minSearchCharsToLoadCollection: number;
+
+  @Input()
+  public searchCollectionPlaceholder: string = "SEARCH_IN_COLLECTION";
+
+  @Input()
+  public collectionLoadFn: Function;
+
+  @Output()
+  public collectionChange: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(public searchService: TransactionSearchService){}
+
+  public searchPlaceholder: string = "SEARCH";
+  public noResultsLabel: string = "NO_RESULTS";
+  public showMoreLabel: string = "SHOW_MORE";
+  public showLessLabel: string = "SHOW_LESS"
+  public filterButtonLabel: string = "SEARCH_IMPERATIVE";
+
+  public onFilterButtonClicked(): void{
+    this.searchService.searchTransactions();
+    this._scrollToTop();
+  }
+
+  private _scrollToTop(): void {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-filter-item/transaction-filter-item.module.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FilterItemModule } from "@colijnit/corecomponents_v12";
+import { PipeModule } from "../../../pipe/pipe.module";
+import { TransactionFilterItemComponent } from "./transaction-filter-item.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FilterItemModule,
+    PipeModule,
+  ],
+  declarations: [
+    TransactionFilterItemComponent
+  ],
+  exports: [
+    TransactionFilterItemComponent
+  ]
+})
+export class TransactionFilterItemModule {
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-search-grid/transaction-search-grid/transaction-search-grid.component.ts

@@ -0,0 +1,104 @@
+import {
+  ApplicationRef,
+  Component,
+  ComponentFactoryResolver,
+  ElementRef,
+  EmbeddedViewRef,
+  EventEmitter,
+  HostBinding,
+  Injector,
+  Input,
+  Output,
+  Type,
+  ViewChild,
+  ViewEncapsulation
+} from "@angular/core";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+import { TransactionSearchView } from "@colijnit/transactionapi/build/model/transaction-search-view.bo";
+import { TransactionMappingService } from "../../../../service/transaction-mapping.service";
+import { TransactionSearchGridBaseComponent } from "../../../core/base/transaction-search-grid-base.component";
+import { TransactionSearchService } from "../../service/transaction-search.service";
+
+@Component({
+  selector: "co-transaction-search-grid",
+  template: `
+    <div #transactionSearchGrid class="transaction-search-grid-wrapper">
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class TransactionSearchGridComponent {
+  @ViewChild('transactionSearchGrid', {read: ElementRef}) set container(content) {
+    if (content) {
+      this._transactionSearchGridContainer = content;
+      this._prepareContent();
+    }
+  }
+
+  @Input()
+  public set transactionType(value: TransactionKind) {
+    this._transactionType = value;
+    this._prepareContent();
+  }
+
+  public get transactionType(): TransactionKind {
+    return this._transactionType;
+  }
+
+  @Output()
+  public transactionClick:  EventEmitter<TransactionSearchView> = new EventEmitter<TransactionSearchView>();
+
+  @HostBinding("class.co-transaction-search-grid")
+  public showClass() {
+    return true;
+  }
+
+  private _transactionSearchGridContainer: ElementRef;
+  private _transactionType: TransactionKind;
+  private _componentRef: any;
+
+  constructor(
+    private _mappingService: TransactionMappingService,
+    private _compFactoryResolver: ComponentFactoryResolver,
+    private appRef: ApplicationRef,
+    private injector: Injector,
+    public searchService: TransactionSearchService
+  ) {
+  }
+
+  private _prepareContent(): void {
+    if (!this._transactionType || !this._transactionSearchGridContainer) {
+      return;
+    }
+    const componentClass: Type<TransactionSearchGridBaseComponent> = this._mappingService.getTransactionSearchGridComponent(this.transactionType);
+
+    if (this._componentRef) {
+      this._componentRef.destroy();
+    }
+    if (!componentClass) {
+      return;
+    }
+
+    this._componentRef = this._compFactoryResolver
+      .resolveComponentFactory(componentClass)
+      .create(this.injector);
+
+    this.appRef.attachView(this._componentRef.hostView);
+
+    //inputs
+    this._componentRef.instance.transactions = this.searchService.transactions;
+
+    //outputs
+    this._componentRef.instance.transactionClick.subscribe(transaction => {
+      this.transactionClick.emit(transaction);
+    })
+
+    const domElem = (this._componentRef.hostView as EmbeddedViewRef<any>)
+      .rootNodes[0] as HTMLElement;
+
+    this._transactionSearchGridContainer.nativeElement.appendChild(domElem);
+    this._componentRef.onDestroy(() => {
+      this.appRef.detachView(this._componentRef.hostView);
+    });
+  }
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-search-grid/transaction-search-grid/transaction-search-grid.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TransactionSearchGridComponent } from "./transaction-search-grid.component";
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    TransactionSearchGridComponent
+  ],
+  exports: [
+    TransactionSearchGridComponent
+  ]
+})
+export class TransactionSearchGridModule {
+}