@colijnit/sharedcomponents 1.0.55 → 1.0.56

package/projects/sharedcomponents/src/lib/components/simple-tags/simple-tags.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {SimpleTagsComponent} from "./simple-tags.component";
+import {ButtonModule, CoDialogModule, IconModule, InputSearchModule} from "@colijnit/corecomponents_v12";
+import {DragDropModule} from "@angular/cdk/drag-drop";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoDialogModule,
+    InputSearchModule,
+    IconModule,
+    DragDropModule,
+    ButtonModule
+  ],
+  declarations: [
+    SimpleTagsComponent
+  ],
+  exports: [
+    SimpleTagsComponent
+  ]
+})
+export class SimpleTagsModule {
+}

package/projects/sharedcomponents/src/lib/components/statusbar/statusbar-popup.component.ts

@@ -0,0 +1,100 @@
+import {Component, ElementRef, HostBinding, Input, OnInit, ViewChild, ViewChildren, ViewEncapsulation} from '@angular/core';
+import {StatusbarData} from './statusbar.component';
+import {ArcElement, Chart, DoughnutController} from 'chart.js';
+
+Chart.register(
+    DoughnutController,
+    ArcElement
+);
+
+export enum GaugeColor {
+    Lowest = '#E0E0E0',
+    Low = '#fff7b8',
+    MediumLow = '#ffe367',
+    MediumHigh = '#ffc15b',
+    High = '#F88952',
+    Highest = '#5FDCB3',
+}
+
+@Component({
+    selector: "co-statusbar-popup",
+    template: `
+        <div class="co-statusbar-popup-wrapper" [overlay]="parentForOverlay">
+            <div class="status-descriptions">
+                <div *ngFor="let data of statusbarData; let index = index" class="status-description">
+                    <div class="statusbar-canvas-wrapper">
+                        <canvas #doughnutCanvas class="chart-canvas"></canvas>
+                        <span class="statusbar-inner-canvas-label" [textContent]="data.percentage"></span>
+                    </div>
+                    <span class="statusbar-description" [textContent]="data.label"></span>
+                </div>
+            </div>
+        </div>
+    `,
+    encapsulation: ViewEncapsulation.None
+})
+export class StatusbarPopupComponent implements OnInit {
+    @ViewChildren('doughnutCanvas', { read: ElementRef }) set content(content) {
+        this.doughnutCharts = content.toArray();
+        this._prepareChartData();
+    }
+
+    @Input()
+    public defaultColor: '#e0e0e0';
+
+    @Input()
+    public statusbarData: StatusbarData[] = [];
+
+    @Input()
+    public parentForOverlay: ElementRef;
+
+    @HostBinding("class.co-statusbar-popup")
+    public showClass: boolean = true;
+
+    public doughnutCharts: ElementRef[] = [];
+
+    ngOnInit() {
+        this._prepareChartData();
+    }
+
+    private _prepareChartData(): void {
+        if (!this.doughnutCharts || this.doughnutCharts.length === 0) {
+            return;
+        }
+        this.doughnutCharts.forEach((chart: ElementRef, index: number) => {
+            new Chart(chart.nativeElement, {
+                type: 'doughnut',
+                data: {
+                    datasets: [{
+                        label: this.statusbarData[index].label,
+                        data: [Math.max(0.0001, this.statusbarData[index].percentage), 100 - Math.max(0.0001, this.statusbarData[index].percentage)],
+                        backgroundColor: [
+                            this._getColor(this.statusbarData[index].percentage),
+                            this._getColor(-1),
+                        ],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    cutout: '70%'
+                }
+            });
+        })
+    }
+
+    private _getColor(value: number): string {
+        if (value <= 0) {
+            return GaugeColor.Lowest;
+        } else if (value >= 1 && value < 25) {
+            return GaugeColor.Low;
+        } else if (value >= 25 && value < 50) {
+            return GaugeColor.MediumLow;
+        } else if (value >= 50 && value < 75) {
+            return GaugeColor.MediumHigh;
+        } else if (value >= 75 && value < 100) {
+            return GaugeColor.High;
+        } else if (value >= 100) {
+            return GaugeColor.Highest;
+        }
+    }
+}

package/projects/sharedcomponents/src/lib/components/statusbar/statusbar.component.ts

@@ -0,0 +1,107 @@
+import { animate, state, style, transition, trigger } from "@angular/animations";
+import {
+  Component,
+  ComponentRef,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
+import {OverlayService} from '@colijnit/corecomponents_v12';
+import {StatusbarPopupComponent} from './statusbar-popup.component';
+
+export interface StatusbarData {
+  label: string,
+  percentage: number,
+  count?: number,
+  totalCount?: number,
+}
+
+@Component({
+  selector: "co-statusbar",
+  template: `
+    <div class="co-statusbar-wrapper" *ngIf="statusbarData" [clickOutside]="popupShowing"
+         (clickOutside)="handleHidePopup()">
+      <div class="statuses">
+        <div *ngFor="let data of statusbarData; let index = index" class="status">
+          <co-linear-gauge [class.focused-status]="focusedStatusIndex !== undefined && focusedStatusIndex === index"
+                           [value]="data.percentage" [count]="data.count ? data.count : undefined"></co-linear-gauge>
+        </div>
+      </div>
+    </div>
+  `,
+  providers: [
+      OverlayService
+  ],
+  animations: [
+    trigger("showHidePopup", [
+      state("void", style({opacity: 0})),
+      state("*", style({opacity: 1})),
+      transition("void <=> *", animate("250ms ease-in-out")),
+    ])
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class StatusbarComponent {
+
+  @Input()
+  public set statusbarData(value: StatusbarData[]) {
+    this._statusbarData = value;
+    this.adjustTooHighPercentages();
+  }
+
+  public get statusbarData() {
+    return this._statusbarData;
+  }
+
+  @Input()
+  public defaultColor: '#e0e0e0';
+
+  @Input()
+  public focusedStatusIndex: number;
+
+  @Output()
+  statusbarClick: EventEmitter<void> = new EventEmitter<void>();
+
+  @HostBinding("class.co-statusbar")
+  public showClass() {
+    return true;
+  }
+
+  @HostListener("click", ["$event"])
+  public handleClick(event: MouseEvent) {
+    this.handleShowPopup(event);
+  }
+
+  public popupShowing: boolean = false;
+
+  private _statusbarData: StatusbarData[];
+  private _statusbarPopupComponentRef: ComponentRef<any>;
+
+  constructor(
+      private _elementRef: ElementRef,
+      private _overlayService: OverlayService) {
+  }
+
+  public handleShowPopup(event: MouseEvent): void {
+    if (this.popupShowing) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this._statusbarPopupComponentRef = this._overlayService.createComponent(StatusbarPopupComponent, {parentForOverlay: this._elementRef, statusbarData: this.statusbarData, defaultColor: this.defaultColor});
+    this.popupShowing = true;
+  }
+
+  public handleHidePopup(): void {
+    this._overlayService.removeComponent(this._statusbarPopupComponentRef);
+    this.popupShowing = false;
+  }
+
+  public adjustTooHighPercentages(): void {
+    this._statusbarData.forEach(data => data.percentage > 100 ? data.percentage = 100 : false);
+  }
+}

package/projects/sharedcomponents/src/lib/components/statusbar/statusbar.module.ts

@@ -0,0 +1,25 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ClickoutsideModule, OverlayModule} from '@colijnit/corecomponents_v12';
+import {CoLinearGaugeModule} from '../linear-gauge/co-linear-gauge.module';
+import {StatusbarComponent} from './statusbar.component';
+import {StatusbarPopupComponent} from './statusbar-popup.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoLinearGaugeModule,
+        ClickoutsideModule,
+        OverlayModule
+    ],
+    declarations: [
+        StatusbarComponent,
+        StatusbarPopupComponent
+    ],
+    exports: [
+        StatusbarComponent,
+        StatusbarPopupComponent
+    ]
+})
+export class StatusbarModule {
+}

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

@@ -0,0 +1,45 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+import {StockHistoryBo} from "@colijnit/articleapi/build/model/stock-history.bo";
+import {Icon} from "../../../../enum/icon.enum";
+
+@Component({
+  selector: "co-allocation-stock-history",
+  template: `
+    <co-simple-grid [data]="allocationStockHistory"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'MUTATION_DATE' | localize">
+        <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' | localize" [field]="'mutationTime'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AMOUNT' | localize" [field]="'amount'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [field]="'wareHouseNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LOCATION' | localize" [field]="'locationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER' | localize" [field]="'docNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LINE' | localize" [field]="'transLineNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_STATE' | localize" [field]="'stockStateId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_REMARK' | localize" [field]="'stockStateRemarkId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'VALUTA' | localize" [field]="'currencyCode'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'RELATION_NR' | localize" [field]="'relationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'USER' | localize" [field]="'user'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'MUTATION_TYPE' | localize" [field]="'mutationType'"></co-simple-grid-column>
+    </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AllocationStockHistoryComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public allocationStockHistory: StockHistoryBo[] = [];
+
+  constructor(
+    public iconCacheService: IconCacheService,
+  ) {
+  }
+
+}

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

@@ -0,0 +1,45 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+import {StockHistoryBo} from "@colijnit/articleapi/build/model/stock-history.bo";
+import {Icon} from "../../../../enum/icon.enum";
+
+@Component({
+  selector: "co-order-stock-commission-history",
+  template: `
+    <co-simple-grid [data]="orderStockCommissionHistory"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'MUTATION_DATE' | localize">
+        <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' | localize" [field]="'mutationTime'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AMOUNT' | localize" [field]="'amount'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [field]="'wareHouseNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LOCATION' | localize" [field]="'locationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER' | localize" [field]="'docNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LINE' | localize" [field]="'transLineNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_STATE' | localize" [field]="'stockStateId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_REMARK' | localize" [field]="'stockStateRemarkId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'VALUTA' | localize" [field]="'currencyCode'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'RELATION_NR' | localize" [field]="'relationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'USER' | localize" [field]="'user'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'MUTATION_TYPE' | localize" [field]="'mutationType'"></co-simple-grid-column>
+    </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class OrderCommissionStockHistoryComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public orderStockCommissionHistory: StockHistoryBo[] = [];
+
+  constructor(
+    public iconCacheService: IconCacheService,
+  ) {
+  }
+
+}

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

@@ -0,0 +1,45 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+import {StockHistoryBo} from "@colijnit/articleapi/build/model/stock-history.bo";
+import {Icon} from "../../../../enum/icon.enum";
+
+@Component({
+  selector: "co-order-stock-history",
+  template: `
+    <co-simple-grid [data]="orderStockHistory"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'MUTATION_DATE' | localize">
+        <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' | localize" [field]="'mutationTime'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AMOUNT' | localize" [field]="'amount'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [field]="'wareHouseNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LOCATION' | localize" [field]="'locationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER' | localize" [field]="'docNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LINE' | localize" [field]="'transLineNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_STATE' | localize" [field]="'stockStateId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_REMARK' | localize" [field]="'stockStateRemarkId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'VALUTA' | localize" [field]="'currencyCode'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'RELATION_NR' | localize" [field]="'relationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'USER' | localize" [field]="'user'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'MUTATION_TYPE' | localize" [field]="'mutationType'"></co-simple-grid-column>
+    </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class OrderStockHistoryComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public orderStockHistory: StockHistoryBo[] = [];
+
+  constructor(
+    public iconCacheService: IconCacheService,
+  ) {
+  }
+
+}

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

@@ -0,0 +1,43 @@
+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";
+
+@Component({
+  selector: "co-order-stock-tab",
+  template: `
+    <co-simple-grid [data]="orderInformation"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'PURCHASE_ORDER_NR' | localize" [field]="'transactionNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DATE' | localize">
+        <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' | localize" [field]="'amountInOrder'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'RESERVED' | localize" [field]="'reserved'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'FREE_STOCK' | localize" [field]="'InOrderForStock'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DELIVERY_DATE' | localize">
+        <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 {
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public orderInformation: ArticleTransactionBo[]  = [];
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    private _stockService: StockService,
+  ) {
+  }
+}

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

@@ -0,0 +1,45 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+import {StockHistoryBo} from "@colijnit/articleapi/build/model/stock-history.bo";
+import {Icon} from "../../../../enum/icon.enum";
+
+@Component({
+  selector: "co-order-supply-stock-history",
+  template: `
+    <co-simple-grid [data]="orderSupplyStockHistory"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'MUTATION_DATE' | localize">
+        <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' | localize" [field]="'mutationTime'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AMOUNT' | localize" [field]="'amount'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [field]="'wareHouseNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LOCATION' | localize" [field]="'locationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER' | localize" [field]="'docNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LINE' | localize" [field]="'transLineNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_STATE' | localize" [field]="'stockStateId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_REMARK' | localize" [field]="'stockStateRemarkId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'VALUTA' | localize" [field]="'currencyCode'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'RELATION_NR' | localize" [field]="'relationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'USER' | localize" [field]="'user'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'MUTATION_TYPE' | localize" [field]="'mutationType'"></co-simple-grid-column>
+    </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class OrderSupplyStockHistoryComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public orderSupplyStockHistory: StockHistoryBo[] = [];
+
+  constructor(
+    public iconCacheService: IconCacheService,
+  ) {
+  }
+
+}

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

@@ -0,0 +1,71 @@
+import {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";
+
+@Component({
+  selector: "co-order-tab",
+  template: `
+    <co-simple-grid [data]="inOrderInformation"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'IN_ORDER' | localize" [field]="'transactionNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'CUSTOMER' | localize" [field]="'customerName'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DATE' | localize">
+        <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' | localize" [field]="'amountInOrder'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [field]="'warehouseNumber'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DESCRIPTION' | localize" [field]="'warehouseDescription'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'TRANSFER' | localize" [field]="'transfer'">
+        <ng-template #template let-row="row">
+          <co-icon class="menu-icon" [iconData]="iconCacheService.getIcon(icons.DeliveryTruck)" (click)="handleStockTransferClick(row)"></co-icon>
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STICKER' | localize" [field]="'sticker'">
+        <ng-template #template let-row="row">
+          <co-icon class="menu-icon" [iconData]="iconCacheService.getIcon(icons.Print)" (click)="openSendMethodDialog(row)"></co-icon>
+        </ng-template>
+      </co-simple-grid-column>
+    </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class OrderTabComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public articleStockInformation: ArticleStockBo[] = [];
+
+  @Input()
+  public inOrderInformation: ArticleTransactionBo[] = [];
+
+  @Output()
+  public locationClicked: EventEmitter<ArticleStockBo> = new EventEmitter<ArticleStockBo>();
+
+  @Output()
+  public readonly transferIconClicked: EventEmitter<ArticleStockBo> = new EventEmitter();
+
+  @Output()
+  public readonly sendMethodDialogClicked: EventEmitter<PrintPriceStickers> = new EventEmitter();
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    private _stockService: StockService,
+  ) {
+  }
+
+  public openSendMethodDialog(data): void {
+    this.sendMethodDialogClicked.emit(data);
+  }
+
+  public handleStockTransferClick(event): void {
+    this.transferIconClicked.emit(event);
+  }
+}

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

@@ -0,0 +1,52 @@
+import {Component, Input, 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";
+
+@Component({
+  selector: "co-stock-history",
+  template: `
+    <co-simple-grid [data]="stockHistory"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'MUTATION_DATE' | localize">
+        <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' | localize" [field]="'mutationTime'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AMOUNT' | localize" [field]="'amount'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [field]="'wareHouseNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LOCATION' | localize" [field]="'locationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER' | localize" [field]="'docNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LINE' | localize" [field]="'transLineNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_STATE' | localize" [field]="'stockStateId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK_REMARK' | localize" [field]="'stockStateRemarkId'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'VALUTA' | localize" [field]="'currencyCode'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'RELATION_NR' | localize" [field]="'relationNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'USER' | localize" [field]="'user'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'MUTATION_TYPE' | localize" [field]="'mutationType'"></co-simple-grid-column>
+    </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockHistoryComponent  {
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public stockHistoryInformation: StockHistoryBo[] = [];
+
+  @Input()
+  public articleGoodId: string;
+
+  @Input()
+  public stockHistory: StockHistoryBo[] = [];
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    private _stockService: StockService,
+  ) {
+  }
+}