@colijnit/sharedcomponents 261.1.0 → 261.1.2

package/projects/sharedcomponents/src/lib/components/stock/components/allocation-stock-history/allocation-stock-history.component.ts

@@ -0,0 +1,77 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {StockHistoryBo} from '@colijnit/articleapi/build/model/stock-history.bo';
+import {Icon} from '../../../../enum/icon.enum';
+import {BaseStockComponent} from '../../base/base-stock.component';
+import {GetStockHistoryRequest} from '@colijnit/articleapi/build/model/get-stock-history-request';
+import {StockService} from '../../../../service/stock.service';
+import {SharedEventService} from "../../../../service/shared-event.service";
+
+@Component({
+  selector: 'co-allocation-stock-history',
+  template: `
+    <co-simple-grid [data]="data"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'MUTATION_DATE' | sharedLocalize">
+        <ng-template #template let-row="row">
+          <span [textContent]="row.mutationDate | date:'dd-MM-yyyy'"></span>
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'MUTATION_TIME' | sharedLocalize"
+                             [field]="'mutationTime'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AMOUNT' | sharedLocalize" [field]="'amount'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | sharedLocalize"
+                             [field]="'wareHouseNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LOCATION' | sharedLocalize" [field]="'locationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER' | sharedLocalize">
+        <ng-template #template let-row="row">
+          <div class="clickable-link" [textContent]="row.docNr" (click)="handleTransactionNavigation(row.docNr)"></div>
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LINE' | sharedLocalize" [field]="'transLineNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_STATE' | sharedLocalize"
+                             [field]="'stockStateId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_REMARK' | sharedLocalize"
+                             [field]="'stockStateRemarkId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'VALUTA' | sharedLocalize" [field]="'currencyCode'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'RELATION_NR' | sharedLocalize"
+                             [field]="'relationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'USER' | sharedLocalize" [field]="'user'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'MUTATION_TYPE' | sharedLocalize"
+                             [field]="'mutationType'"></co-simple-grid-column>
+    </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AllocationStockHistoryComponent extends BaseStockComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  public data: StockHistoryBo[] = [];
+
+  constructor(
+    private _stockService: StockService,
+
+    public sharedEventService: SharedEventService
+  ) {
+    super();
+  }
+
+  protected async getData(): Promise<void> {
+    const stockHistoryInformation: GetStockHistoryRequest = new GetStockHistoryRequest();
+    stockHistoryInformation.type = 'T';
+    stockHistoryInformation.goodId = this.goodId.toString();
+    this._stockService.getStockHistory(stockHistoryInformation).then(result => {
+      this.data = result;
+    });
+  }
+  public handleTransactionNavigation(docNr: string): void {
+    const transNr: string[] = docNr.split(' ');
+    if (transNr && transNr.length > 1) {
+      if (transNr[0].toLowerCase() === 'v') {
+        this.sharedEventService.salesOrderNavigation.next(transNr[1]);
+      }
+    }
+  }
+
+}

package/projects/sharedcomponents/src/lib/components/stock/components/order-commission-stock-history/order-commission-stock-history.component.ts

@@ -0,0 +1,56 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {StockHistoryBo} from '@colijnit/articleapi/build/model/stock-history.bo';
+import {Icon} from '../../../../enum/icon.enum';
+import {BaseStockComponent} from '../../base/base-stock.component';
+import {GetStockHistoryRequest} from '@colijnit/articleapi/build/model/get-stock-history-request';
+import {StockService} from '../../../../service/stock.service';
+
+@Component({
+  selector: "co-order-stock-commission-history",
+  template: `
+      <co-simple-grid [data]="data"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+      >
+          <co-simple-grid-column [headerText]="'MUTATION_DATE' | sharedLocalize">
+              <ng-template #template let-row="row">
+                  <span [textContent]="row.mutationDate | date:'dd-MM-yyyy'"></span>
+              </ng-template>
+          </co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'MUTATION_TIME' | sharedLocalize" [field]="'mutationTime'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'AMOUNT' | sharedLocalize" [field]="'amount'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'WAREHOUSE' | sharedLocalize" [field]="'wareHouseNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'LOCATION' | sharedLocalize" [field]="'locationNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER' | sharedLocalize" [field]="'docNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'LINE' | sharedLocalize" [field]="'transLineNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'STOCK_STATE' | sharedLocalize" [field]="'stockStateId'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'STOCK_REMARK' | sharedLocalize" [field]="'stockStateRemarkId'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'VALUTA' | sharedLocalize" [field]="'currencyCode'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'RELATION_NR' | sharedLocalize" [field]="'relationNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'USER' | sharedLocalize" [field]="'user'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'MUTATION_TYPE' | sharedLocalize" [field]="'mutationType'"></co-simple-grid-column>
+      </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class OrderCommissionStockHistoryComponent extends BaseStockComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  public data: StockHistoryBo[] = [];
+
+  constructor(
+    private _stockService: StockService
+  ) {
+    super();
+  }
+
+  protected async getData(): Promise<void> {
+    const stockHistoryInformation: GetStockHistoryRequest = new GetStockHistoryRequest();
+    stockHistoryInformation.type = "C";
+    stockHistoryInformation.goodId = this.goodId.toString();
+    this._stockService.getStockHistory(stockHistoryInformation).then(result => {
+      this.data = result;
+    });
+  }
+
+}

package/projects/sharedcomponents/src/lib/components/stock/components/order-stock-history/order-stock-history.component.ts

@@ -0,0 +1,55 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {StockHistoryBo} from '@colijnit/articleapi/build/model/stock-history.bo';
+import {Icon} from '../../../../enum/icon.enum';
+import {BaseStockComponent} from '../../base/base-stock.component';
+import {GetStockHistoryRequest} from '@colijnit/articleapi/build/model/get-stock-history-request';
+import {StockService} from '../../../../service/stock.service';
+
+@Component({
+  selector: 'co-order-stock-history',
+  template: `
+      <co-simple-grid [data]="data"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+      >
+          <co-simple-grid-column [headerText]="'MUTATION_DATE' | sharedLocalize">
+              <ng-template #template let-row="row">
+                  <span [textContent]="row.mutationDate | date:'dd-MM-yyyy'"></span>
+              </ng-template>
+          </co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'MUTATION_TIME' | sharedLocalize" [field]="'mutationTime'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'AMOUNT' | sharedLocalize" [field]="'amount'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'WAREHOUSE' | sharedLocalize" [field]="'wareHouseNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'LOCATION' | sharedLocalize" [field]="'locationNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER' | sharedLocalize" [field]="'docNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'LINE' | sharedLocalize" [field]="'transLineNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'STOCK_STATE' | sharedLocalize" [field]="'stockStateId'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'STOCK_REMARK' | sharedLocalize" [field]="'stockStateRemarkId'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'VALUTA' | sharedLocalize" [field]="'currencyCode'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'RELATION_NR' | sharedLocalize" [field]="'relationNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'USER' | sharedLocalize" [field]="'user'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'MUTATION_TYPE' | sharedLocalize" [field]="'mutationType'"></co-simple-grid-column>
+      </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class OrderStockHistoryComponent extends BaseStockComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  public data: StockHistoryBo[] = [];
+
+  constructor(
+    private _stockService: StockService
+  ) {
+    super();
+  }
+
+  protected async getData(): Promise<void> {
+    const stockHistoryInformation: GetStockHistoryRequest = new GetStockHistoryRequest();
+    stockHistoryInformation.type = 'B';
+    stockHistoryInformation.goodId = this.goodId.toString();
+    this._stockService.getStockHistory(stockHistoryInformation).then(result => {
+      this.data = result;
+    });
+  }
+}

package/projects/sharedcomponents/src/lib/components/stock/components/order-stock-tab/order-stock-tab.component.ts

@@ -0,0 +1,54 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+import {Icon} from "../../../../enum/icon.enum";
+import {StockService} from "../../../../service/stock.service";
+import {ArticleTransaction as ArticleTransactionBo} from "@colijnit/articleapi/build/model/article-transaction.bo";
+import {BaseStockComponent} from '../../base/base-stock.component';
+import {ArticleTransaction} from '@colijnit/articleapi/build/model/article-transaction';
+
+@Component({
+  selector: "co-order-stock-tab",
+  template: `
+    <co-simple-grid [data]="data"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'PURCHASE_ORDER_NR' | sharedLocalize" [field]="'transactionNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DATE' | sharedLocalize">
+        <ng-template #template let-row="row">
+          <span [textContent]="row.transactionDate | date:'dd-MM-yyyy'"></span>
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AMOUNT' | sharedLocalize" [field]="'amountInOrder'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'RESERVED' | sharedLocalize" [field]="'reserved'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'FREE_STOCK' | sharedLocalize" [field]="'InOrderForStock'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DELIVERY_DATE' | sharedLocalize">
+        <ng-template #template let-row="row">
+          <span [textContent]="row.deliveryDate | date:'dd-MM-yyyy'"></span>
+        </ng-template>
+      </co-simple-grid-column>
+    </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class OrderStockTabComponent extends BaseStockComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  public data: ArticleTransactionBo[]  = [];
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    private _stockService: StockService,
+  ) {
+    super();
+  }
+
+  protected async getData(): Promise<void> {
+    const orderData: ArticleTransaction = new ArticleTransaction();
+    orderData.type = "I";
+    orderData.goodId = this.goodId.toString();
+    this._stockService.getArticleTransaction(orderData).then(result => {
+      this.data = result;
+    });
+  }
+}

package/projects/sharedcomponents/src/lib/components/stock/components/order-supply-stock-history/order-supply-stock-history.component.ts

@@ -0,0 +1,55 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {StockHistoryBo} from '@colijnit/articleapi/build/model/stock-history.bo';
+import {Icon} from '../../../../enum/icon.enum';
+import {BaseStockComponent} from '../../base/base-stock.component';
+import {GetStockHistoryRequest} from '@colijnit/articleapi/build/model/get-stock-history-request';
+import {StockService} from '../../../../service/stock.service';
+
+@Component({
+  selector: 'co-order-supply-stock-history',
+  template: `
+      <co-simple-grid [data]="data"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+      >
+          <co-simple-grid-column [headerText]="'MUTATION_DATE' | sharedLocalize">
+              <ng-template #template let-row="row">
+                  <span [textContent]="row.mutationDate | date:'dd-MM-yyyy'"></span>
+              </ng-template>
+          </co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'MUTATION_TIME' | sharedLocalize" [field]="'mutationTime'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'AMOUNT' | sharedLocalize" [field]="'amount'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'WAREHOUSE' | sharedLocalize" [field]="'wareHouseNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'LOCATION' | sharedLocalize" [field]="'locationNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER' | sharedLocalize" [field]="'docNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'LINE' | sharedLocalize" [field]="'transLineNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'STOCK_STATE' | sharedLocalize" [field]="'stockStateId'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'STOCK_REMARK' | sharedLocalize" [field]="'stockStateRemarkId'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'VALUTA' | sharedLocalize" [field]="'currencyCode'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'RELATION_NR' | sharedLocalize" [field]="'relationNr'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'USER' | sharedLocalize" [field]="'user'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'MUTATION_TYPE' | sharedLocalize" [field]="'mutationType'"></co-simple-grid-column>
+      </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class OrderSupplyStockHistoryComponent extends BaseStockComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  public data: StockHistoryBo[] = [];
+
+  constructor(
+    private _stockService: StockService
+  ) {
+    super();
+  }
+
+  protected async getData(): Promise<void> {
+    const stockHistoryInformation: GetStockHistoryRequest = new GetStockHistoryRequest();
+    stockHistoryInformation.type = 'O';
+    stockHistoryInformation.goodId = this.goodId.toString();
+    this._stockService.getStockHistory(stockHistoryInformation).then(result => {
+      this.data = result;
+    });
+  }
+}

package/projects/sharedcomponents/src/lib/components/stock/components/order-tab/order-tab.component.ts

@@ -0,0 +1,180 @@
+import {ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewEncapsulation} from '@angular/core';
+import {ArticleStock as ArticleStockBo} from "@colijnit/articleapi/build/model/article-stock.bo";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+import {Icon} from "../../../../enum/icon.enum";
+import {StockService} from "../../../../service/stock.service";
+import {ArticleTransaction as ArticleTransactionBo} from "@colijnit/articleapi/build/model/article-transaction.bo";
+import {PrintPriceStickers} from "@colijnit/sharedapi/build/model/print-price-stickers.bo";
+import {BaseStockComponent} from '../../base/base-stock.component';
+import {ArticleTransaction} from '@colijnit/articleapi/build/model/article-transaction';
+import {ArticleDetailsBo} from "@colijnit/articleapi/build/model/article-details.bo";
+import {StockLocation} from "@colijnit/articleapi/build/model/stock-location.bo";
+import {ArticleFlat} from "@colijnit/articleapi/build/model/article-flat.bo";
+
+@Component({
+  selector: "co-order-tab",
+  template: `
+    <div class="stock-transfer-wrapper">
+      <co-stock-transfer-allocated *ngIf="showStockTransfer"
+                         class="stock-transfer-dialog"
+                         [articleToTransfer]="articleDetails"
+                         (handleStickerClicked)="handleStickerClicked.emit($event)"
+                         [allWarehouses]="allWarehouses"
+                         [stockLocations]="stockLocations"
+                         [articleFlat]="articleFlat" 
+                         [articleTransaction]="selectedRow"
+                         [showStockTransfer]="showStockTransfer"
+                         (showStockTransferChange)="onShowStockTransferChange($event)">
+      </co-stock-transfer-allocated>
+    </div>
+    <div class="stock-transfer-add">
+      <co-icon *ngIf="selectedRow" class="menu-icon" [iconData]="iconCacheService.getIcon(icons.ArrowRightArrowLeftRegular)"
+               (click)="handleStockTransferClick()"></co-icon>
+      <co-icon *ngIf="selectedRow" class="menu-icon" [iconData]="iconCacheService.getIcon(icons.SolidBarcodeReadTag)"
+               (click)="openSendMethodDialog(selectedRow)"></co-icon>
+    </div>
+    <co-simple-grid [data]="data"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+                    [showAdd]="false"
+                    [inlineEdit]="false"
+                    [showGridSettings]="false"
+                    [showColumnSort]="true"
+                    [showToolbar]="true"
+                    (selectRow)="onRowSelected($event)">
+      <co-simple-grid-column [headerText]="'ORDER' | sharedLocalize" [field]="'transactionNr'">
+        <ng-template #template let-row="row">
+          <div class="double-data link">
+            <co-icon
+              [iconData]="iconCacheService.getIcon(icons.DetailView)"
+              (click)="handleTransactionNavigationClick($event, row.transactionNr.toString())"
+            ></co-icon>
+            <span
+              [textContent]="row.transactionNr"
+              (click)="handleTransactionNavigationClick($event, row.transactionNr.toString())">
+            </span>
+          </div>
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'CUSTOMER' | sharedLocalize" [field]="'customerName'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'ORDER_DATE' | sharedLocalize" [field]="'transactionDate'">
+        <ng-template #template let-row="row">
+          <span [textContent]="row.transactionDate | date:'dd-MM-yyyy'"></span>
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DELIVERY_DATE' | sharedLocalize" [field]="'deliveryDate'">
+        <ng-template #template let-row="row">
+          <span [textContent]="row.deliveryDate | date:'dd-MM-yyyy'"></span>
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'SERIAL_NO' | sharedLocalize" [field]="'serialNo'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'BATCH_NO' | sharedLocalize" [field]="'batchNo'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AMOUNT' | sharedLocalize" [field]="'amountInOrder'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'ALLOCATED' | sharedLocalize" [field]="'reserved'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | sharedLocalize" [field]="'warehouseNumber'">
+        <ng-template #template let-row="row">
+          <div class="double-data">
+            <span [textContent]="row.warehouseNumber"></span>
+            <span [textContent]="row.warehouseDescription"></span>
+          </div>
+        </ng-template>
+      </co-simple-grid-column>
+    </co-simple-grid>
+    <co-send-method-dialog *ngIf="showSendMethodDialog"
+                           (closeClick)="showSendMethodDialog = false">
+
+    </co-send-method-dialog>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class OrderTabComponent extends BaseStockComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  public stockLocations: StockLocation[] = [];
+
+  @Input()
+  public showStockTransfer: boolean;
+
+  @Input()
+  public allWarehouses: any[] = [];
+
+  @Input()
+  public articleFlat: ArticleFlat;
+
+  @Output()
+  public locationClicked: EventEmitter<ArticleStockBo> = new EventEmitter<ArticleStockBo>();
+
+  @Output()
+  public readonly transferIconClicked: EventEmitter<ArticleStockBo> = new EventEmitter();
+
+  @Output()
+  public readonly sendMethodDialogClicked: EventEmitter<PrintPriceStickers> = new EventEmitter();
+
+  @Output()
+  public handleStickerClicked: EventEmitter<any> = new EventEmitter();
+
+  @Output() showStockTransferChange = new EventEmitter<boolean>();
+
+  @Output()
+  public handleTransactionClick: EventEmitter<any> = new EventEmitter();
+
+  public data: ArticleTransactionBo[] = [];
+
+  public selectedRow: ArticleTransactionBo | null = null;
+  public articleDetails: ArticleDetailsBo;
+  public showSendMethodDialog: boolean = false;
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    private _stockService: StockService,
+    private _changeDetector: ChangeDetectorRef
+  ) {
+    super();
+  }
+
+  public openSendMethodDialog(data): void {
+    this.showSendMethodDialog = true;
+    this.sendMethodDialogClicked.emit(data);
+  }
+
+  public handleStockTransferClick(): void {
+    this.showStockTransfer = true;
+  }
+
+  public onRowSelected(row: ArticleTransactionBo): void {
+    this.selectedRow = row;
+  }
+
+  public onShowStockTransferChange(update: boolean) {
+    if(update) {
+      this.updateData();
+    }
+    this.showStockTransfer = false;
+  }
+  protected async getData(): Promise<void> {
+    this.getGridData();
+  }
+  public handleTransactionNavigationClick(event: Event, transNr: string): void {
+    event.stopPropagation();
+    this.handleTransactionNavigation(transNr);
+  }
+
+  public updateData() {
+    this.getGridData();
+  }
+
+  public handleTransactionNavigation(transNr: string): void {
+    this.handleTransactionClick.emit(transNr);
+  }
+
+  public getGridData() {
+    const inOrderData: ArticleTransaction = new ArticleTransaction();
+    inOrderData.type = "V";
+    inOrderData.goodId = this.goodId.toString();
+
+    this._stockService.getArticleTransaction(inOrderData).then(result => {
+      this.data = result.filter( (articleTransaction: ArticleTransactionBo) => articleTransaction.status === "Toegewezen");
+      this._changeDetector.detectChanges();
+    });
+  }
+}

package/projects/sharedcomponents/src/lib/components/stock/components/stock-history/stock-history.component.ts

@@ -0,0 +1,63 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {IconCacheService} from "../../../../service/icon-cache.service";
+import {StockService} from "../../../../service/stock.service";
+import {StockHistoryBo} from "@colijnit/articleapi/build/model/stock-history.bo";
+import {Icon} from "../../../../enum/icon.enum";
+import {BaseStockComponent} from '../../base/base-stock.component';
+import {GetStockHistoryRequest} from '@colijnit/articleapi/build/model/get-stock-history-request';
+
+@Component({
+  selector: "co-stock-history",
+  template: `
+    <co-simple-grid [data]="data"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'MUTATION_DATE' | sharedLocalize">
+        <ng-template #template let-row="row">
+          <span [textContent]="row.mutationDate | date:'dd-MM-yyyy'"></span>
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'MUTATION_TIME' | sharedLocalize" [field]="'mutationTime'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AMOUNT' | sharedLocalize" [field]="'amount'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | sharedLocalize" [field]="'wareHouseNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LOCATION' | sharedLocalize" [field]="'locationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER' | sharedLocalize" [field]="'docNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LINE' | sharedLocalize" [field]="'transLineNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_STATE' | sharedLocalize" [field]="'stockStateId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_REMARK' | sharedLocalize" [field]="'stockStateRemarkId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'VALUTA' | sharedLocalize" [field]="'currencyCode'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'RELATION_NR' | sharedLocalize" [field]="'relationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'USER' | sharedLocalize" [field]="'user'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'MUTATION_TYPE' | sharedLocalize" [field]="'mutationType'"></co-simple-grid-column>
+    </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockHistoryComponent extends BaseStockComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public stockHistoryInformation: StockHistoryBo[] = [];
+
+  @Input()
+  public articleGoodId: string;
+
+  public data: StockHistoryBo[] = [];
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    private _stockService: StockService,
+  ) {
+    super();
+  }
+
+  protected async getData(): Promise<void> {
+    const stockHistoryInformation: GetStockHistoryRequest = new GetStockHistoryRequest();
+    stockHistoryInformation.type = "V";
+    stockHistoryInformation.goodId = this.goodId.toString();
+    this._stockService.getStockHistory(stockHistoryInformation).then(result => {
+      this.data = result
+    });
+  }
+}