@colijnit/sharedcomponents 261.1.0 → 261.1.2

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

@@ -0,0 +1,500 @@
+import {Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation} 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";
+import {PrintPriceStickers} from "@colijnit/sharedapi/build/model/print-price-stickers.bo";
+import {StockLocation} from "@colijnit/articleapi/build/model/stock-location.bo";
+import {ArticleExtended} from "@colijnit/articleapi/build/model/article-extended.bo";
+import {SendMethodType} from "@colijnit/mainapi/build/enum/send-method-type.enum";
+
+@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"
+                      [rowsPerPage]="20"
+      >
+          <co-simple-grid-column [headerText]="'WAREHOUSE' | sharedLocalize" [field]="'warehouseNo'" [order]="10"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'DESCRIPTION' | sharedLocalize" [field]="'warehouseName'" [order]="11"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'STOCK' | sharedLocalize" [field]="'technicalStock'" [order]="12"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'AVAILABLE_STOCK' | sharedLocalize" [field]="'availableStock'" [order]="13"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'ECONOMICAL_STOCK' | sharedLocalize" [field]="'economicalStock'" [order]="14"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'LOCATION' | sharedLocalize" [field]="'locationNo'" [order]="15">
+            <ng-template #template let-row="row">
+              <span class="location-link" [textContent]="'LOOK_AT' | sharedLocalize" (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_ORDER' | sharedLocalize" [field]="'transactionNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'CUSTOMER' | sharedLocalize" [field]="'customerName'"></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]="'WAREHOUSE' | sharedLocalize" [field]="'warehouseNumber'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DESCRIPTION' | sharedLocalize" [field]="'warehouseDescription'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSFER' | sharedLocalize" [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' | sharedLocalize" [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' | 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>
+    </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' | sharedLocalize" (click)="handleBackToStockClick()"></span>
+        </div>
+        <div class="stock-location-right-group">
+<!--
+          <co-drop-down-list  [(model)]="selectedWarehouse"
+                              [collection]="dataWareHouseCode"
+                              [fields]="dataWareHouseFields"
+                              [placeholder]="'WAREHOUSE' | sharedLocalize"
+                              (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"
+                      [showAdd]="true"
+                      [showToolbar]="true"
+                      [showDelete]="true"
+                      [inlineEdit]="true"
+                      (dblClickRow)="lockSelectedRow($event)"
+      >
+        <div class="stock-location-group">
+          <div class="stock-location-left-group">
+            <co-button class="stock-lines-button" [textContent]="'BACK_TO_STOCK_LINES' | sharedLocalize" (click)="handleBackToStockClick()"></co-button>
+          </div>
+        </div>
+        <co-simple-grid-column [headerText]="'LOCATION' | sharedLocalize" [field]="'locationNo'">
+          <ng-template #editTemplate let-row="row">
+<!--
+            <co-drop-down-list [(model)]="row.locationNo"
+                               [collection]="stockLocations"
+                               [fields]="dataLocationFields"
+                               [placeholder]="'LOCATION' | sharedLocalize"
+                               (click)="onLocationDropdownClick()"
+                               [required]="true"
+            ></co-drop-down-list>
+-->
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column *ngIf="articleDetails" [headerText]="'BATCH' | sharedLocalize" [field]="'batchNo'">
+          <ng-template #editTemplate let-row="row">
+            <co-input-text [(model)]="row.batchNo"
+                           [placeholder]="'BATCH' | sharedLocalize"
+            ></co-input-text>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column *ngIf="articleDetails" [headerText]="'SERIAL_NO' | sharedLocalize" [field]="'serialNo'">
+          <ng-template #editTemplate let-row="row">
+            <co-input-text [(model)]="row.serialNo"
+                           [placeholder]="'SERIAL_NO' | sharedLocalize"
+            ></co-input-text>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK' | sharedLocalize" [field]="'amountInStock'">
+          <ng-template #editTemplate let-row="row">
+            <co-input-text  [(model)]="row.amountInStock"
+                            [label]="'STOCK' | sharedLocalize"
+                            (modelChange)="amountInStockChanged($event)"
+            ></co-input-text>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'ALLOCATED' | sharedLocalize" [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' | sharedLocalize" [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' | sharedLocalize" [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' | sharedLocalize" [field]="'purchasePrice'">
+          <ng-template #editTemplate let-row="row">
+            <span [textContent]="row.purchasePrice"></span>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'SUPPLIER_NUMBER' | sharedLocalize" [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' | sharedLocalize" [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' | sharedLocalize" [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' | sharedLocalize" (click)="backToStockInformation()"></span>
+      </div>
+      <co-simple-grid [data]="stockHistoryInformation"
+                      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]="'TRANSACTION_TYPE' | sharedLocalize" [field]="'transType'"></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]="'posLineNr'"></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_ID' | sharedLocalize" [field]="'relationId'"></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-column [headerText]="'STICKER' | sharedLocalize" [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' | sharedLocalize" (click)="handleHistoryClick()"></co-button>
+      </div>
+      <div class="stock-button-middle-group" *ngIf="activeTab !== tabs[0]">
+        <div class="button-left">
+          <co-button [textContent]="'OK' | sharedLocalize" (click)="onOkClick()"></co-button>
+        </div>
+        <div class="button-right">
+          <co-button [textContent]="'CANCEL' | sharedLocalize" (click)="onCancelClick()"></co-button>
+        </div>
+      </div>
+
+      <div class="stock-button-middle-group" *ngIf="hideOrShowLocationTab">
+        <div class="button-left">
+          <co-button [textContent]="'OK' | sharedLocalize" (click)="onOkClickSendLocations()"></co-button>
+        </div>
+        <div class="button-right">
+          <co-button [textContent]="'CANCEL' | sharedLocalize" (click)="onCancelClickSendLocations()"></co-button>
+        </div>
+      </div>
+    </div>
+    <co-send-method-dialog *ngIf="showSendMethodDialog"
+                           (closeClick)="showSendMethodDialog = false"
+                           [visibleMethods]="sendMethod[1]"
+    ></co-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[];
+
+  @Input()
+  public article: ArticleExtended;
+
+  @Output()
+  public readonly transferIconClicked: EventEmitter<ArticleStockBo> = new EventEmitter();
+
+  @Output()
+  public readonly historyClicked: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  public readonly cancelButtonClicked: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  public readonly okButtonClicked: 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 dataLocationFields: CoDropDownListFields = {text: "locationNo", value: "locationNo"};
+  public selectedWarehouse: any;
+  public selectedLocation: StockLocation;
+  public stockLocations: StockLocation[];
+  public articleStockSearchInfo: ArticleStock = new ArticleStock();
+  public articleDetails: ArticleDetailsBo[];
+  public selectedArticleDetailsData: ArticleDetailsBo = new ArticleDetailsBo();
+  public showChangeStockDetails: boolean = false;
+  public articleDetailsInformation: ArticleStockManagement = new ArticleStockManagement();
+  public sendMethod: SendMethodType[];
+
+  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;
+  }
+
+  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 {
+    if (!(this._stockService.printLayoutParams instanceof PrintPriceStickers)) {
+      this._stockService.printLayoutParams.goodId = data.goodId;
+      this._stockService.printLayoutParams.warehouse = data.warehouseNo;
+    }
+    this.showSendMethodDialog = true;
+  }
+
+  public printStockStickers(): void {
+    // this._stockService.getPrintStockStickers(this._stockService.printLayoutParams);
+  }
+
+  public onOkClick(): void {
+    this.okButtonClicked.emit();
+  }
+
+  public onCancelClick(): void {
+    this.cancelButtonClicked.emit();
+  }
+
+  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 = "I";
+    orderData.goodId = this.articleStockInformation[0].goodId.toString();
+    this.orderInformation = await this._stockService.getArticleTransaction(orderData);
+  }
+
+  public onLocationDropdownClick(): void {
+    this._stockService.getStockManagementLocations(this.selectedWarehouse).then((locations) => {
+      this.stockLocations = locations;
+    })
+  }
+
+  public onLocationSelected(location): void {
+    this.selectedArticleDetailsData.locationNo = location;
+  }
+
+  public async onOkClickSendLocations(): Promise<void> {
+    this.selectedArticleDetailsData.selected = true;
+    this.selectedArticleDetailsData.goodId = this.article.goodId;
+    this.selectedArticleDetailsData.entryDate = new Date();
+    this.selectedArticleDetailsData.warehouseNo = this.selectedWarehouse;
+    await this._stockService.updateArticleDetails(this.selectedArticleDetailsData);
+    await this._stockService.getArticleDetails(this.articleDetailsInformation).then((details) => {
+      this.articleDetails = details;
+    });
+  }
+
+  public onCancelClickSendLocations(): void {
+
+  }
+
+  public amountInStockChanged(data): void {
+    this.selectedArticleDetailsData.amountInStock = data;
+  }
+
+  public lockSelectedRow(row): void {
+    this._stockService.lockArticleDetails(row);
+  }
+}