@colijnit/sharedcomponents 1.0.24 → 1.0.25

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

@@ -0,0 +1,97 @@
+import { animate, state, style, transition, trigger } from "@angular/animations";
+import { Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation } from "@angular/core";
+
+export interface StatusbarData {
+  label: string,
+  percentage: number,
+  count?: number,
+}
+
+@Component({
+  selector: "co-statusbar",
+  template: `
+    <div class="co-statusbar-wrapper"
+         *ngIf="statusbarData"
+         (mouseover)="onHover($event)"
+         (mouseleave)="onLeave()"
+         (click)="onStatusbarClick()">
+      <div class="statuses">
+        <div *ngFor="let data of statusbarData; let index = index" class="status">
+          <co-linear-gauge [value]="data.percentage" [count]="!!data.count ? data.count : undefined"></co-linear-gauge>
+        </div>
+      </div>
+      <div class=status-description-popup *ngIf="showPopup" @showHidePopup [ngClass]="popupClass">
+        <div class="status-descriptions">
+          <div *ngFor="let data of statusbarData; let index = index" class="status-description">
+            <co-circular-gauge [value]="data.percentage"></co-circular-gauge>
+            <span [textContent]="data.label"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  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;
+  }
+
+  public get statusbarData() {
+    return this._statusbarData;
+  }
+
+  @Output()
+  statusbarClick: EventEmitter<void> = new EventEmitter<void>();
+
+  @HostBinding("class.co-statusbar")
+  public showClass() {
+    return true;
+  }
+
+  constructor() {
+  }
+
+  public showPopup: boolean = false;
+  public popupClass: string = 'dropdown';
+  private _statusbarData: StatusbarData[];
+  private _mouseY: number;
+  private _windowHeight: number;
+
+  public onHover(event): void {
+    this.showPopup = true;
+
+    this._mouseY = event.screenY;
+    this._windowHeight = window.innerHeight;
+    this.setPopupClass();
+  }
+
+  public onLeave(): void {
+    this.showPopup = false;
+  }
+
+  public onStatusbarClick(): void {
+    this.statusbarClick.emit();
+  }
+
+  public setPopupClass(): void {
+    const popupHeight = this.statusbarData.length * 30;
+    let dropdownInScreen = (this._mouseY + popupHeight) <= this._windowHeight;
+
+    if (dropdownInScreen) {
+      this.popupClass = 'dropdown';
+    } else {
+      this.popupClass = 'dropup'
+    }
+  }
+
+}

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

@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { CoCircularGaugeModule } from "../circular-gauge/co-circular-gauge.module";
+import { CoLinearGaugeModule } from "../linear-gauge/co-linear-gauge.module";
+import { StatusbarComponent } from "./statusbar.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoCircularGaugeModule,
+    CoLinearGaugeModule
+  ],
+  declarations: [
+    StatusbarComponent
+  ],
+  exports: [
+    StatusbarComponent
+  ]
+})
+export class StatusbarModule {
+}

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

@@ -0,0 +1,64 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+import {ArticleStock as ArticleStockBo} from "@colijnit/articleapi/build/model/article-stock.bo";
+import {ArticleExtended} from "@colijnit/articleapi/build/model/article-extended.bo";
+
+@Component({
+  selector: "co-stock-information",
+  template: `
+      <div class="stock-info" *ngIf="article">
+        <div class="stock-info-row" >
+          <div class="stock-info-row-image">
+            <div class="stock-image">
+              <co-image class="stock-image" [source]="article.imageData"></co-image>
+            </div>
+          </div>
+          <div class="stock-good-info">
+            <div>
+              <span [textContent]="article.description"></span>
+            </div>
+            <div>
+              <span [textContent]="article.articleNumber"></span>
+            </div>
+          </div>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'STOCK_STATUS'"></label>
+          <span [textContent]="article.stockStatus"></span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'AMOUNT_IN_STOCK'"></label>
+          <span [textContent]="allTechnicalStockInformation"></span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'AMOUNT_AVAILABLE'"></label>
+          <span [textContent]="allAvailableStockInformation"></span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'AMOUNT_LATER_AVAILABLE'"></label>
+          <span [textContent]=""></span>
+        </div>
+      </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockInformationComponent {
+
+  public image: string;
+
+  @Input()
+  public article: ArticleExtended;
+
+  @Input()
+  public articleStock: ArticleStockBo;
+
+  @Input()
+  public allAvailableStockInformation: number;
+
+  @Input()
+  public allTechnicalStockInformation: number;
+
+  constructor(
+  ) {
+  }
+
+}

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

@@ -0,0 +1,384 @@
+import {Component, Output, ViewChild, ViewEncapsulation, EventEmitter, Input} from "@angular/core";
+import {StockService} from "../../../service/stock.service";
+import {IconCacheService} from "../../../service/icon-cache.service";
+import {Icon} from "../../../enum/icon.enum";
+import {ArticleStock as ArticleStockBo} from "@colijnit/articleapi/build/model/article-stock.bo";
+import {ArticleStock} from "@colijnit/articleapi/build/model/article-stock";
+import {StockHistoryBo} from "@colijnit/articleapi/build/model/stock-history.bo";
+import {ArticleStockManagement} from "@colijnit/articleapi/build/model/article-stock-management";
+import {ArticleDetailsBo} from "@colijnit/articleapi/build/model/article-details.bo";
+import {StockManagementWarehouses} from "@colijnit/articleapi/build/model/stock-management-warehouses.bo";
+import {CoDropDownListFields} from "../stock-transfer/co-drop-down-list-fields.interface";
+import {ArticleTransaction} from "@colijnit/articleapi/build/model/article-transaction";
+import {ArticleTransaction as ArticleTransactionBo} from "@colijnit/articleapi/build/model/article-transaction.bo";
+
+@Component({
+  selector: "co-stock-information-grid",
+  template: `
+    <div class="tab-link show" *ngIf="hideOrShowTabs">
+      <span class="tab-link-buttons"
+            *ngFor="let tab of tabs"
+            (click)="handleTabClick(tab)"
+            [textContent]="tab"
+            [class.active]="tab === activeTab"
+      ></span>
+    </div>
+
+    <div class="stock-line">
+      <div [textContent]="activeTabText"></div>
+
+    </div>
+
+    <div class="stock-grid">
+      <co-simple-grid *ngIf="activeTab === tabs[0] && hideOrShowTabs"
+                      [data]="articleStockInformation"
+                      class="simple-grid"
+                      [showAdd]="true"
+                      [showToolbar]="true"
+                      (addRow)="addNewRow()"
+                      [inlineEdit]="true"
+                      [rowsPerPage]="20"
+      >
+          <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'warehouseNo'" [order]="10"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'DESCRIPTION'" [field]="'warehouseName'" [order]="11"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'STOCK'" [field]="'technicalStock'" [order]="12"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'availableStock'" [order]="13"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'ECONOMICAL_STOCK'" [field]="'economicalStock'" [order]="14"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'LOCATION'" [field]="'locationNo'" [order]="15">
+            <ng-template #template let-row="row">
+              <span [textContent]="'Bekijken'" (click)="onLocationClick(row)"></span>
+            </ng-template>
+          </co-simple-grid-column>
+      </co-simple-grid>
+
+      <co-simple-grid *ngIf="activeTab === tabs[1]"
+                      [data]="inOrderInformation"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+      >
+        <co-simple-grid-column [headerText]="'IN_ORDER2'" [field]="'transactionNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'CUSTOMER'" [field]="'user'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DATE'" [field]="'transactionDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'amountInOrder'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'wareHouseNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DESCRIPTION'" [field]="'locationNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSFER'" [field]="'transfer'">
+          <ng-template #template let-row="row">
+            <co-icon class="menu-icon" [iconData]="iconCacheService.getIcon(icons.DeliveryTruck)" (click)="handleStockTransferClick($event)"></co-icon>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STICKER'" [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>
+
+      <co-simple-grid *ngIf="activeTab === tabs[2]"
+                      [data]="orderInformation"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+      >
+        <co-simple-grid-column [headerText]="'PURCHASE_ORDER_NR'" [field]="'transactionNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DATE'" [field]="'transactionDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'amountInOrder'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'RESERVED'" [field]="'reserved'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'FREE_STOCK'" [field]="'freeStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DELIVERY_DATE1'" [field]="'deliveryDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'RESERVE'" [field]="'reservation'"></co-simple-grid-column>
+      </co-simple-grid>
+    </div>
+
+    <div class="stock-grid" *ngIf="hideOrShowLocationTab">
+      <div class="stock-location-group">
+        <div class="stock-location-left-group">
+          <span class="stock-button-back" [textContent]="'BACK_TO_STOCK_LINES'" (click)="handleBackToStockClick()"></span>
+        </div>
+        <div class="stock-location-right-group">
+          <co-drop-down-list  [(model)]="selectedWarehouse"
+                              [collection]="dataWareHouseCode"
+                              [fields]="dataWareHouseFields"
+                              [placeholder]="'WAREHOUSE'"
+                              (modelChange)="onSelectWarehouse($event)"
+                              [required]="true"
+          ></co-drop-down-list>
+        </div>
+      </div>
+
+<!--      TODO move to own component stock-location-->
+      <co-simple-grid [data]="articleDetails"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+      >
+        <div class="stock-location-group">
+          <div class="stock-location-left-group">
+            <co-button class="stock-lines-button" [textContent]="'BACK_TO_STOCK_LINES'" (click)="handleBackToStockClick()"></co-button>
+          </div>
+        </div>
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'warehouseDescription'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'BATCH'" [field]="'batchNo'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'SERIAL_NO'" [field]="'serialNo'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'">
+          <ng-template #template let-row="row">
+            <co-input-number-picker (keyup.enter)="openDialogClick(row)" [(model)]="row['amountInStock']">
+
+            </co-input-number-picker>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'ALLOCATED'" [field]="'amountInStockFree'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'perceptibleStorage'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'PHYSICAL_STOCK'" [field]="'amountInStockOriginal'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'VALUTA'" [field]="'currency'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'PURCHASE_PRICE'" [field]="'purchasePrice'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'SUPPLIER_NUMBER'" [field]="'supplierNo'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSFER'" [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'" [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>
+    </div>
+
+    <co-stock-change-amount *ngIf="showChangeStockDetails"
+                            (closeStockChangeAmount)="showChangeStockDetails = false"
+                            [selectedArticleDetailsData]="selectedArticleDetailsData"
+    >
+    </co-stock-change-amount>
+
+    <div class="stock-grid" *ngIf="showStockHistory">
+      <div class="stock-button-left-group">
+        <span class="stock-button-back" [textContent]="'BACK_TO_STOCK_LINES'" (click)="backToStockInformation()"></span>
+      </div>
+      <co-simple-grid [data]="stockHistoryInformation"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+      >
+        <co-simple-grid-column [headerText]="'MUTATION_DATE'" [field]="'mutationDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'MUTATION_TIME'" [field]="'mutationTime'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'amount'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'wareHouseNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'LOCATION'" [field]="'locationNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSACTION_TYPE'" [field]="'transType'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER'" [field]="'docNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'LINE'" [field]="'posLineNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK_STATE'" [field]="'stockStateId'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK_REMARK'" [field]="'stockStateRemarkId'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'VALUTA'" [field]="'currencyCode'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'RELATION_ID'" [field]="'relationId'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'USER'" [field]="'user'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'MUTATION_TYPE'" [field]="'mutationType'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STICKER'" [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>
+    </div>
+
+    <div class="stock-button-toolbar">
+      <div class="stock-button-left-group">
+        <co-button *ngIf="activeTab === tabs[0]" [label]="'HISTORY'" (click)="handleHistoryClick()"></co-button>
+      </div>
+      <div class="stock-button-middle-group">
+        <div class="button-left">
+          <co-button [textContent]="'Ok'" (click)="onOkClick()"></co-button>
+        </div>
+        <div class="button-right">
+          <co-button [textContent]="'Annuleren'" (click)="onCancelClick()"></co-button>
+        </div>
+      </div>
+    </div>
+    <ione-send-method-dialog
+      *ngIf="showSendMethodDialog"
+      [showDialog]="showSendMethodDialog"
+      (printButtonClicked)="printStockStickers()"
+    ></ione-send-method-dialog>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+
+export class StockInformationGridComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  @ViewChild(StockInformationGridComponent)
+  public stock: StockInformationGridComponent;
+
+  @Input()
+  public articleStockInformation: ArticleStockBo[];
+
+  @Input()
+  public stockLocationData: ArticleStockBo[];
+
+  @Input()
+  public stockHistoryInformation: StockHistoryBo[];
+
+  @Output()
+  public readonly transferIconClicked: EventEmitter<ArticleStockBo> = new EventEmitter();
+
+  @Output()
+  public readonly historyClicked: EventEmitter<any> = new EventEmitter();
+
+  public image: string;
+  public show: boolean = false;
+  public hideOrShowLocationTab: boolean = false;
+  public showStockHistory: boolean = false;
+  public showSendMethodDialog: boolean = false;
+
+  public inOrderInformation: ArticleTransactionBo[];
+  public orderInformation: ArticleTransactionBo[]
+  public hideOrShowTabs: boolean = true;
+  public dataWareHouseCode: StockManagementWarehouses[];
+  public dataWareHouseFields: CoDropDownListFields = { text: "warehouseDescription", value: "warehouseNo" };
+  public selectedWarehouse: any;
+  public articleStockSearchInfo: ArticleStock = new ArticleStock();
+  public articleDetails: ArticleDetailsBo[];
+  public selectedArticleDetailsData: ArticleDetailsBo;
+  public showChangeStockDetails: boolean = false;
+  public articleDetailsInformation: ArticleStockManagement = new ArticleStockManagement()
+
+  public tabs: string[] = [
+    "STOCK",
+    "IN_ORDER2",
+    "ORDERS1"
+  ];
+  public activeTab: string = this.tabs[0];
+
+  public get activeTabText(): string {
+    switch (this.activeTab) {
+      case this.tabs[0]:
+        return "Voorraadregels";
+      case this.tabs[1]:
+        return "Gevonden in order(s)";
+      case this.tabs[2]:
+        return "Gevonden in bestellingen";
+      default:
+        return "Voorraadlocatie regels";
+    }
+  }
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    private _stockService: StockService,
+  ) {
+  }
+
+  public handleTabClick(tabData): void {
+    this.activeTab = tabData;
+    if (this.activeTab === "IN_ORDER2") {
+      this.getInOrderData();
+    } if (this.activeTab === "ORDERS1") {
+      this.getOrderData();
+    }
+  }
+
+  public onLocationClick(data: ArticleStockBo): void {
+    this.articleStockSearchInfo.goodId = data.goodId.toString();
+    this.articleStockSearchInfo.wareHouseNo = data.warehouseNo.toString();
+    this.articleStockSearchInfo.viewKind = "D";
+    this.selectedWarehouse = data.warehouseNo;
+    if (!this.dataWareHouseCode) {
+      this.getStockManagementWarehouses(data);
+    }
+    this.getArticleDetails(data);
+    this.hideOrShowTabs = false;
+    this.hideOrShowLocationTab = true;
+    this._stockService.lockArticleDetails(this.articleDetailsInformation);
+  }
+
+  public handleHistoryClick(): void {
+    this.historyClicked.emit()
+    this.hideOrShowLocationTab = false;
+    this.showChangeStockDetails = false;
+    this.hideOrShowTabs = false;
+    this.showStockHistory = true;
+  }
+
+  public backToStockInformation(): void {
+    this.showStockHistory = false;
+    this.hideOrShowTabs = true;
+  }
+
+  public handleStockTransferClick(event): void {
+    this.transferIconClicked.emit(event);
+  }
+
+  public async handleBackToStockClick(): Promise<void> {
+    this.activeTab = this.tabs[0];
+    this.hideOrShowTabs = true;
+    this.hideOrShowLocationTab = false;
+    this.articleDetails = undefined;
+  }
+
+  public openSendMethodDialog(data): void {
+    this._stockService.printSticker.goodId = data.goodId;
+    this._stockService.printSticker.warehouse = data.warehouseNo;
+    this.showSendMethodDialog =! this.showSendMethodDialog;
+  }
+
+  public printStockStickers(): void {
+    this._stockService.getPrintStockStickers(this._stockService.printSticker);
+  }
+
+  public onOkClick(): void {
+
+  }
+
+  public onCancelClick(): void {
+
+  }
+
+  public openDialogClick(data): void {
+    this.selectedArticleDetailsData = data;
+    this.showChangeStockDetails = true;
+  }
+
+  public getArticleDetails(data: any): void {
+    // const info = new ArticleStockManagement();
+    this.articleDetailsInformation.goodId = data.goodId;
+    this.articleDetailsInformation.lineId = data.lineId;
+    this.articleDetailsInformation.warehouseNumber = data.warehouseNo;
+    this._stockService.getArticleDetails(this.articleDetailsInformation).then((details) => {
+      this.articleDetails = details;
+    });
+  }
+
+  public getStockManagementWarehouses(data: ArticleStockBo): void {
+    this._stockService.getStockManagementWarehouses().then((warehouses) => {
+      this.dataWareHouseCode = warehouses;
+      this.selectedWarehouse = data.warehouseNo;
+    })
+  }
+
+  public onSelectWarehouse(event): void {
+    this.articleDetailsInformation.warehouseNumber = event;
+    if (this.selectedWarehouse || this.selectedWarehouse === 0) {
+      this._stockService.getArticleDetails(this.articleDetailsInformation).then((details) => {
+        this.articleDetails = details;
+      });
+    }
+  }
+
+  public async getInOrderData(): Promise<void> {
+    const inOrderData: ArticleTransaction = new ArticleTransaction();
+    inOrderData.type = "V";
+    inOrderData.goodId = this.articleStockInformation[0].goodId.toString();
+    this.inOrderInformation = await this._stockService.getArticleTransaction(inOrderData);
+  }
+
+  public async getOrderData(): Promise<void> {
+    const orderData: ArticleTransaction = new ArticleTransaction();
+    orderData.type = "V";
+    orderData.goodId = this.articleStockInformation[0].goodId.toString();
+    this.orderInformation = await this._stockService.getArticleTransaction(orderData);
+  }
+
+  public addNewRow(): void {
+
+  }
+}

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

@@ -0,0 +1,84 @@
+import {AfterViewInit, Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {ArticleStock} from "@colijnit/articleapi/build/model/article-stock";
+import {StockService} from "../../../service/stock.service";
+
+@Component({
+  selector: "co-stock-location",
+  template: `
+    <div class="stock-location-wrapper">
+      <div class="buttons-wrapper">
+        <div class="stock-button-left-group">
+          <span class="stock-button-back" [textContent]="'BACK_TO_STOCK_LINES'" (click)="backToStockInformation()"></span>
+        </div>
+        <div class="dropdown-wrapper">
+          <co-drop-down-list
+            [collection]="allWarehouses"
+            [placeholder]="'WAREHOUSES'"
+            (modelChange)="onSelectWarehouse($event)"
+          ></co-drop-down-list>
+        </div>
+      </div>
+
+      <div class="stock-grid">
+
+      </div>
+      <div class="button-wrapper">
+        <div class="button-left">
+          <co-button (click)="onOkClick()"></co-button>
+        </div>
+        <div class="button-right">
+          <co-button (click)="onCancelClick()"></co-button>
+        </div>
+      </div>
+    </div>
+
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockLocationComponent {
+
+  @Input()
+  public stockLocationInformation: ArticleStock;
+
+  @Output()
+  public backToStockLines: EventEmitter<any> = new EventEmitter();
+
+  public allWarehouses: any;
+
+  public stockLocationColumns: any[] = [];
+
+  constructor(
+    private _stockService: StockService
+  ) {
+    this.stockLocationColumns.push(
+      {field: "location", headerText: "WAREHOUSE", editType: "none"},
+      {field: "batch", headerText: "BATCH"},
+      {field: "serieNo", headerText: "SERIAL_NO"},
+      {field: "amountInStock", headerText: "STOCK", textAlign: "Right", editType: "numericEdit"},
+      {field: "allocated", headerText: "ALLOCATED", textAlign: "Right"},
+      {field: "amountAvailable", headerText: "AVAILABLE_STOCK", textAlign: "Right"},
+      {field: "PhysicalStock", headerText: "PHYSICAL_STOCK", textAlign: "Right"},
+      {field: "Valuta", headerText: "VALUTA", textAlign: "Right"},
+      {field: "PurchasePrice", headerText: "PURSCHASE_PRICE", textAlign: "Right"},
+      {field: "SupplierNo", headerText: "SUPPLIER_NO", textAlign: "Right"},
+      {field: "Transfer", headerText: "TRANSFER"},
+      {field: "sticker", headerText: "STICKER"},
+    );
+  }
+
+  public backToStockInformation(): void {
+    this.backToStockLines.emit();
+  }
+
+  public onOkClick(): void {
+
+  }
+
+  public onCancelClick(): void {
+
+  }
+
+  public onSelectWarehouse(event): void {
+
+  }
+}

package/{lib/components/stock/stock-transfer/co-drop-down-list-fields.interface.d.ts → projects/sharedcomponents/src/lib/components/stock/stock-transfer/co-drop-down-list-fields.interface.ts}

@@ -1,4 +1,4 @@
 export interface CoDropDownListFields {
-    text: string;
-    value: string;
+  text: string;
+  value: string;
 }