@colijnit/sharedcomponents 1.0.54 → 1.0.56

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,
+  ) {
+  }
+}

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

@@ -0,0 +1,276 @@
+import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, 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 {StockManagementWarehouses} from "@colijnit/articleapi/build/model/stock-management-warehouses.bo";
+import {ArticleStockManagement} from "@colijnit/articleapi/build/model/article-stock-management";
+import {ArticleDetailsBo} from "@colijnit/articleapi/build/model/article-details.bo";
+import {StockLocation} from "@colijnit/articleapi/build/model/stock-location.bo";
+import {PrintPriceStickers} from "@colijnit/sharedapi/build/model/print-price-stickers.bo";
+import {StockStatus} from "@colijnit/articleapi/build/model/stock-status.bo";
+import {Subscription} from "rxjs";
+import {ArticleExtended} from "@colijnit/articleapi/build/model/article-extended.bo";
+import {ArticleFlat} from "@colijnit/articleapi/build/model/article-flat.bo";
+
+@Component({
+  selector: "co-stock-location",
+  template: `
+    <div class="stock-grid">
+      <co-dialog *ngIf="showConfirmationDialog" [showCloseIcon]="true" [modal]="true" [headerTemplate]="headerTemplate"
+                 [footerTemplate]="footerTemplate">
+        <ng-template #headerTemplate>
+          <div class="header-wrapper">
+            <span [textContent]="'CONFIRM_STOCK_CHANGE' | localize"></span>
+          </div>
+        </ng-template>
+        <div class="dialog-wrapper">
+          <co-list-of-values [label]="'STATUS' | localize"
+                             [model]="statusForId(selectedArticleDetailsData.stockStateId)"
+                             [collection]="stockStatus"
+                             [displayField]="'stateDescription'"
+                             (modelChange)="handleStockStatusChange($event)"
+          ></co-list-of-values>
+          <co-input-text [placeholder]="'REMARK' | localize"
+                         (modelChange)="handleStockStatusRemarkChange($event)"></co-input-text>
+        </div>
+        <ng-template #footerTemplate>
+          <div class="button-wrapper">
+            <co-button (click)="handleOkClick()" [label]="'OK'| localize" [disabled]="disabled()"></co-button>
+            <co-button class="cancel-button" (click)="showConfirmationDialog = false"
+                       [label]="'CANCEL'| localize "></co-button>
+          </div>
+        </ng-template>
+      </co-dialog>
+      <co-simple-grid [data]="articleStockInfo"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+                      [showAdd]="true"
+                      [inlineEdit]="true"
+                      (dblClickRow)="lockSelectedRow($event)"
+                      [showToolbar]="true"
+                      (keydown.enter)="onOkClickSendLocations()"
+
+      >
+        <co-simple-grid-column [headerText]="'STOCK' | localize" [field]="'amountInStock'">
+          <ng-template #editTemplate let-row="row">
+            <co-input-text [(model)]="row['amountInStock']"
+                           [label]="'STOCK' | localize"
+                           (modelChange)="amountInStockChanged($event)"
+            ></co-input-text>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column *ngIf="articleFlat?.locationRegistered" [headerText]="'LOCATION' | localize" [field]="'locationNo'">
+          <ng-template #editTemplate let-row="row">
+            <co-list-of-values
+                               [model]="locationForNumber(row['locationNo'])"
+                               [collection]="stockLocations"
+                               [displayField]="'description'"
+                               [label]="'LOCATION' | localize"
+                               (click)="onLocationDropdownClick()"
+                               [required]="true"
+                               (modelChange)="locationChanged(row, $event)"
+            ></co-list-of-values>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'BATCH' | localize" [field]="'batchNo'">
+          <ng-template #editTemplate let-row="row">
+            <co-input-text *ngIf="articleFlat?.batch" [model]="selectedArticleDetailsData.batchNo"
+                           [placeholder]="'BATCH' | localize"
+                           (modelChange)="row['batchNo'] = $event"
+            ></co-input-text>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'SERIAL_NO' | localize" [field]="'serialNo'">
+          <ng-template #editTemplate let-row="row">
+            <co-input-text *ngIf="articleFlat?.serial" [model]="selectedArticleDetailsData.serialNo"
+                           [placeholder]="'SERIAL_NO' | localize"
+                           (modelChange)="row['serialNo'] = $event"
+            ></co-input-text>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'ALLOCATED' | localize" [field]="'stockAssigned'">
+          <ng-template #editTemplate let-row="row">
+            <span [textContent]="row['stockAssigned']"></span>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AVAILABLE_STOCK' | localize" [field]="'amountInStockFree'">
+          <ng-template #editTemplate let-row="row">
+            <span [textContent]="row['amountInStockFree']"></span>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'VALUTA' | localize" [field]="'currency'">
+          <ng-template #editTemplate let-row="row">
+            <span [textContent]="row['currency']"></span>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'PURCHASE_PRICE' | localize" [field]="'purchasePrice'">
+          <ng-template #editTemplate let-row="row">
+            <span [textContent]="row['purchasePrice']"></span>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'SUPPLIERNR' | localize" [field]="'supplierNo'">
+          <ng-template #editTemplate let-row="row">
+            <span [textContent]="row['supplierNo']"></span>
+          </ng-template>
+        </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>
+          <ng-template #editTemplate></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>
+          <ng-template #editTemplate></ng-template>
+        </co-simple-grid-column>
+      </co-simple-grid>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockLocationComponent implements OnInit {
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public articleStockInfo: ArticleDetailsBo[] = [];
+
+  @Input()
+  public articleStockInformation: ArticleStockBo[] = [];
+
+  @Input()
+  public set article(article: ArticleExtended) {
+
+  };
+
+  @Input()
+  public articleFlat: ArticleFlat;
+
+
+  @Input()
+  public dataWareHouseCode: StockManagementWarehouses[] = [];
+
+  @Output()
+  public readonly transferIconClicked: EventEmitter<ArticleStockBo> = new EventEmitter();
+
+  @Output()
+  public readonly sendMethodDialogClicked: EventEmitter<PrintPriceStickers> = new EventEmitter();
+
+  @Input()
+  public selectedWarehouse: StockManagementWarehouses;
+
+
+  public articleDetails: ArticleDetailsBo;
+  public showConfirmationDialog:boolean = false;
+
+
+  public articleDetailsInformation: ArticleStockManagement = new ArticleStockManagement()
+  public stockLocations: StockLocation[] = [];
+
+  public stockStatus: StockStatus[] = [];
+  public selectedArticleDetailsData: ArticleDetailsBo = new ArticleDetailsBo();
+
+  public selectedLocationNo: string;
+
+  private _subs: Subscription[] = [];
+  constructor(
+    public iconCacheService: IconCacheService,
+    private _stockService: StockService,
+    private _changeDetector: ChangeDetectorRef,
+
+  ) {
+  }
+
+   ngOnInit() {
+    this._stockService.getStockState().then( result => {
+      this.stockStatus = result;
+    });
+    this._subs.push( this._stockService.warehouseSelected.subscribe(  selectedWarehouse => {
+      this._stockService.getStockManagementLocations(selectedWarehouse.warehouseNo).then( result => {
+        this.stockLocations = result;
+      });
+    }));
+
+  }
+
+  public lockSelectedRow(row): void {
+    this._stockService.getStockManagementLocations(this.selectedWarehouse.warehouseNo).then( result => {
+      this.stockLocations = result;
+      this.selectedLocationNo = row.locationNo;
+      this._stockService.lockArticleDetails(row);
+      this.selectedArticleDetailsData = row;
+    });
+
+  }
+
+  public onLocationDropdownClick(): void {
+    this._stockService.getStockManagementLocations(this.selectedWarehouse.warehouseNo).then((locations) => {
+      this.stockLocations = locations;
+    });
+  }
+
+  public locationChanged(row: ArticleDetailsBo, event: StockLocation): void {
+    this.selectedLocationNo = event.locationNo;
+    row.locationNo = event.locationNo;
+  }
+
+  public amountInStockChanged(data): void {
+    this.selectedArticleDetailsData.amountInStock = data;
+  }
+
+  public openSendMethodDialog(data): void {
+    this.sendMethodDialogClicked.emit(data);
+  }
+
+  public handleStockTransferClick(event): void {
+    this.transferIconClicked.emit(event);
+  }
+  public onOkClickSendLocations(): void {
+    this.showConfirmationDialog = true;
+  }
+
+  public handleOkClick() {
+    this.selectedArticleDetailsData.selected = true;
+    this.selectedArticleDetailsData.goodId = this.articleFlat.goodId;
+    this.selectedArticleDetailsData.entryDate = new Date();
+    this.selectedArticleDetailsData.warehouseNo = this.selectedWarehouse.warehouseNo;
+    this.selectedArticleDetailsData.locationNo = this.selectedLocationNo?.toString();
+    this._stockService.updateArticleDetails(this.selectedArticleDetailsData).then( result => {
+
+      this.articleDetailsInformation.goodId = this.selectedArticleDetailsData.goodId?.toString();
+      this.articleDetailsInformation.warehouseNumber = this.selectedArticleDetailsData.warehouseNo;
+      this._stockService.getArticleDetails(this.articleDetailsInformation).then((details) => {
+        this.showConfirmationDialog = false;
+        this._changeDetector.detectChanges();
+        this.articleStockInfo = details;
+      });
+      }
+    );
+  }
+
+  public handleStockStatusChange(status: StockStatus) {
+     this.selectedArticleDetailsData.stockStateId = status.stockStateId;
+  }
+
+  public handleStockStatusRemarkChange(remark: string) {
+    this.selectedArticleDetailsData.stockStateRemark = remark;
+  }
+
+  public disabled() {
+    return (!this.selectedArticleDetailsData?.stockStateId && this.selectedArticleDetailsData?.stockStateRemark?.length <= 1);
+  }
+
+
+  public statusForId(id: number) {
+    return this.stockStatus.find( status => status.stockStateId === id);
+  }
+
+  public locationForNumber(number: number) {
+    return this.stockLocations?.find( location => location.locationNo === number?.toString());
+  }
+
+}

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

@@ -0,0 +1,49 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+import {StockService} from "../../../../service/stock.service";
+import {Icon} from "../../../../enum/icon.enum";
+import {StockForecast} from "@colijnit/articleapi/build/model/stock-forecast.bo";
+
+@Component({
+  selector: "co-stock-prognose",
+  template: `
+    <co-simple-grid [data]="stockPrognose"
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'AVAILABILITY' | localize" [field]="'available'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'FREE_STOCK' | localize" [field]="'freeStock'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'IN_ORDER' | localize" [field]="'inOrder'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'PURCHASE_ORDER' | localize" [field]="'transNr'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'PURCHASE_ORDER_DATE' | localize" [field]="'transactionDate'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DELIVERY_DATE' | localize">
+        <ng-template #template let-row="row">
+          <span [textContent]="row['arrivalDate'] | date:'dd-MM-yyyy'"></span>
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'REFERENCE' | localize" [field]="'reference'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DELIVERY_DATE_CONFIRMED' | localize" [field]="'transConfirmedDate'">
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DATE_DELIVERED' | localize">
+        <ng-template #template let-row="row">
+          <span [textContent]="row['transDeliveryDate'] | date:'dd-MM-yyyy'"></span>
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'FUTURE_FREE_STOCK' | localize" [field]="'laterAvailable'"></co-simple-grid-column>
+    </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockPrognoseComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public stockPrognose: StockForecast[] = [];
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    private _stockService: StockService,
+  ) {
+  }
+
+}

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

@@ -0,0 +1,40 @@
+import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {ArticleStock as ArticleStockBo} from "@colijnit/articleapi/build/model/article-stock.bo";
+import {StockManagementWarehouses} from "@colijnit/articleapi/build/model/stock-management-warehouses.bo";
+
+@Component({
+  selector: "co-stock-tab",
+  template: `
+    <co-simple-grid [data]="articleStockInformation"a
+                    class="simple-grid"
+                    [rowsPerPage]="20"
+    >
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [field]="'warehouseNo'" [order]="10"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DESCRIPTION' | localize" [field]="'warehouseName'" [order]="11"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK' | localize" [field]="'technicalStock'" [order]="12"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AVAILABLE_STOCK' | localize" [field]="'availableStock'" [order]="13"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'ECONOMICAL_STOCK' | localize" [field]="'economicalStock'" [order]="14"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LOCATION' | localize" [field]="'locationNo'" [order]="15">
+        <ng-template #template let-row="row">
+          <span class="location-link" [textContent]="'LOOK_AT' | localize" (click)="onLocationClick(row)"></span>
+        </ng-template>
+      </co-simple-grid-column>
+    </co-simple-grid>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockTabComponent {
+
+  @Input()
+  public articleStockInformation: ArticleStockBo[] = [];
+
+  @Output()
+  public locationClicked: EventEmitter<StockManagementWarehouses> = new EventEmitter<StockManagementWarehouses>();
+
+  public warehouseToShow: StockManagementWarehouses = new StockManagementWarehouses();
+
+  public onLocationClick(data: ArticleStockBo): void {
+    this.warehouseToShow.warehouseNo = +data.warehouseNo;
+    this.locationClicked.emit(this.warehouseToShow);
+  }
+}

package/projects/sharedcomponents/src/lib/components/stock/localization/translation.ts

@@ -0,0 +1,60 @@
+export class Translation {
+    public ALLOCATED?: string = 'ALLOCATED';
+    public ALLOCATION?: string = 'ALLOCATION';
+    public ALREADY_IN_ORDER?: string = 'ALREADY_IN_ORDER';
+    public AMOUNT?: string = 'AMOUNT';
+    public AMOUNT_AVAILABLE?: string = 'AMOUNT_AVAILABLE';
+    public AMOUNT_IN_STOCK?: string = 'AMOUNT_IN_STOCK';
+    public AMOUNT_LATER_AVAILABLE?: string = 'AMOUNT_LATER_AVAILABLE';
+    public AVAILABILITY?: string = 'AVAILABILITY';
+    public AVAILABLE_STOCK?: string = 'AVAILABLE_STOCK';
+    public BACK_TO_STOCK_LINES?: string = 'BACK_TO_STOCK_LINES';
+    public BATCH?: string = 'BATCH';
+    public CANCEL?: string = 'CANCEL';
+    public CHOICES?: string = 'CHOICES';
+    public CUSTOMER?: string = 'CUSTOMER';
+    public DATE?: string = 'DATE';
+    public DATE_DELIVERED?: string = 'DATE_DELIVERED';
+    public DELIVERY_DATE?: string = 'DELIVERY_DATE';
+    public DELIVERY_DATE_CONFIRMED?: string = 'DELIVERY_DATE_CONFIRMED';
+    public DESCRIPTION?: string = 'DESCRIPTION';
+    public DOCUMENT_NUMBER?: string = 'DOCUMENT_NUMBER';
+    public ECONOMICAL_STOCK?: string = 'ECONOMICAL_STOCK';
+    public FREE_STOCK?: string = 'FREE_STOCK';
+    public FUTURE_FREE_STOCK?: string = 'FUTURE_FREE_STOCK';
+    public HISTORY?: string = 'HISTORY';
+    public IN_ORDER?: string = 'IN_ORDER';
+    public LINE?: string = 'LINE';
+    public LOCATION?: string = 'LOCATION';
+    public LOOK_AT?: string = 'LOOK_AT';
+    public MUTATION_DATE?: string = 'MUTATION_DATE';
+    public MUTATION_TIME?: string = 'MUTATION_TIME';
+    public MUTATION_TYPE?: string = 'MUTATION_TYPE';
+    public OK?: string = 'OK';
+    public ORDER?: string = 'ORDER';
+    public ORDER_COMMISSION?: string = 'ORDER_COMMISSION';
+    public ORDER_STOCK?: string = 'ORDER_STOCK';
+    public OVERVIEW?: string = 'OVERVIEW';
+    public PURCHASE_ORDER?: string = 'PURCHASE_ORDER';
+    public PURCHASE_ORDER_DATE?: string = 'PURCHASE_ORDER_DATE';
+    public PURCHASE_ORDER_NR?: string = 'PURCHASE_ORDER_NR';
+    public PURCHASE_PRICE?: string = 'PURCHASE_PRICE';
+    public REFERENCE?: string = 'REFERENCE';
+    public RELATION_ID?: string = 'RELATION_ID';
+    public RELATION_NR?: string = 'RELATION_NR';
+    public RESERVED?: string = 'RESERVED';
+    public SEARCH?: string = 'SEARCH';
+    public SERIAL_NO?: string = 'SERIAL_NO';
+    public STICKER?: string = 'STICKER';
+    public STOCK?: string = 'STOCK';
+    public STOCK_DETAILS?: string = 'STOCK_DETAILS';
+    public STOCK_FORECAST?: string = 'STOCK_FORECAST';
+    public STOCK_REMARK?: string = 'STOCK_REMARK';
+    public STOCK_STATE?: string = 'STOCK_STATE';
+    public STOCK_STATUS?: string = 'STOCK_STATUS';
+    public SUPPLIER_NUMBER?: string = 'SUPPLIER_NUMBER';
+    public TRANSFER?: string = 'TRANSFER';
+    public USER?: string = 'USER';
+    public VALUTA?: string = 'VALUTA';
+    public WAREHOUSE?: string = 'WAREHOUSE';
+}