@colijnit/sharedcomponents 1.0.1 → 1.0.2

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

@@ -0,0 +1,279 @@
+import {Component, Output, ViewChild, ViewEncapsulation, EventEmitter} from "@angular/core";
+import {StockService} from "../../../service/stock.service";
+
+@Component({
+  selector: "co-stock-information-grid",
+  template: `
+  <div class="tab-link" [ngClass]="hideOrShowTabs">
+    <co-input-radio-button *ngFor="let tab of tabs"
+                           (click)="handleTabClick(tab)"
+                           [textContent]="tab"
+    ></co-input-radio-button>
+  </div>
+
+  <div class="stock-line">
+    <div [textContent]="activeTabText"></div>
+
+  </div>
+
+  <div class="stock-grid">
+    <co-simple-grid *ngIf="activeTab === tabs[0] && hideOrShowTabs === 'show'"
+                    [data]="stockInformation"
+    >
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'warehouseNumber'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DESCRIPTION'" [field]="'warehouseDescription'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'amountAvailable'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'ECONOMICAL_STOCK'" [field]="'amountLaterAvailable'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'LOCATION'" [field]="'location'">
+          <ng-template let-row="row">
+            <a [textContent]="'bekijken'" (click)="onLocationClick($event)"></a>
+          </ng-template>
+        </co-simple-grid-column>
+    </co-simple-grid>
+
+    <co-simple-grid *ngIf="activeTab === tabs[1]"
+                    [data]="inOrderInformation"
+    >
+      <co-simple-grid-column [headerText]="'IN_ORDER2'" [field]="'inOrder'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'CUSTOMER'" [field]="'customer'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DATE'" [field]="'orderDate'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'orderAmount'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'warehouseNumber'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DESCRIPTION'" [field]="'warehouseDescription'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'COMMISSION2'" [field]="'commission'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'TRANSFER'" [field]="'transfer'">
+        <ng-template let-row="row">
+
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+        <ng-template let-row="row">
+
+        </ng-template>
+      </co-simple-grid-column>
+    </co-simple-grid>
+
+    <co-simple-grid *ngIf="activeTab === tabs[2]"
+                    [data]="orderInformation"
+    >
+      <co-simple-grid-column [headerText]="'PURCHASE_ORDER_NR'" [field]="'purchaseOrderNo'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DATE'" [field]="'orderDate'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'orderAmount'"></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">
+        <co-button class="stock-lines-button" [textContent]="'BACK_TO_STOCK_LINES'" (click)="handleBackToStockClick()"></co-button>
+      </div>
+      <div class="stock-location-right-group">
+        <co-input-combo-box [(model)]="dataWareHouseCode"
+                            [source]=""
+                            [fields]="dataWareHouseFields"
+                            [placeholder]="'WAREHOUSE'"
+                            [required]="true"
+        ></co-input-combo-box>
+      </div>
+    </div>
+
+    <co-simple-grid [data]="stockLocationInformation"
+    >
+      <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]="'location'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'BATCH'" [field]="'batch'"></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'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'ALLOCATED'" [field]="'allocated'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'amountAvailable'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'TRANSFER'" [field]="'transfer'">
+        <ng-template let-row="row">
+            <span [textContent]="'Transfer'" (click)="handleStockTransferClick($event)"></span>
+        </ng-template>
+      </co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+        <ng-template let-row="row">
+
+        </ng-template>
+      </co-simple-grid-column>
+    </co-simple-grid>
+  </div>
+
+  <div class="stock-grid" *ngIf="showStockHistory">
+    <co-simple-grid [data]="stockHistoryInformation"
+    >
+      <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'location'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'BATCH'" [field]="'batch'"></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'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'ALLOCATED'" [field]="'allocated'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'amountAvailable'"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+        <ng-template let-row="row">
+
+        </ng-template>
+      </co-simple-grid-column>
+    </co-simple-grid>
+  </div>
+
+  <div class="stock-button-toolbar">
+    <div class="stock-button-left-group">
+      <co-button [label]="'HISTORY'" (click)="handleHistoryClick()"></co-button>
+    </div>
+    <div class="stock-button-middle-group">
+      <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 StockInformationGridComponent {
+
+  @ViewChild(StockInformationGridComponent)
+  public stock: StockInformationGridComponent;
+
+  @Output()
+  public readonly locationLineClicked: EventEmitter<[]> = new EventEmitter();
+
+  @Output()
+  public readonly transferIconClicked: EventEmitter<[]> = new EventEmitter();
+
+  public readonly MAX_GRID_ROWS: number = 10;
+
+  public stockStatus: string = "medium";
+  public image: string;
+  public show: boolean = false;
+  public hideOrShowLocationTab: boolean = false;
+  public showStockHistory: boolean = false;
+
+  public data: any[] = [
+    {test: "test"}
+  ];
+
+  public stockInformation: Object[] = [
+    {warehouseNumber: "1", warehouseDescription: "Colijn IT Warehouse", amountInStock: "17", amountAvailable: "13", amountLaterAvailable: "4", location: "test"},
+    {warehouseNumber: "2", warehouseDescription: "Colijn IT Warehouse", amountInStock: "17", amountAvailable: "13", amountLaterAvailable: "4", location: "Test nummer 2"},
+    {warehouseNumber: "3", warehouseDescription: "Colijn IT Warehouse", amountInStock: "17", amountAvailable: "13", amountLaterAvailable: "4", location: "Amundsenweg"},
+  ];
+  public stockLocationInformation: Object[] = [
+    {location: "title 1", batch: "1", serialNo: "1", amountInStock: "1", allocated: "1", amountAvailable: "1"},
+    {location: "title 2", amountInStock: "2"},
+    {location: "title 3", amountInStock: "3"},
+    {location: "title 4", amountInStock: "4"},
+    {location: "title 5", amountInStock: "5"},
+  ];
+  public inOrderInformation: Object[] = [
+    {inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321"},
+    {inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321"},
+    {inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321"},
+    {inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321"},
+    {inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321"},
+  ];
+  public stockHistoryInformation: Object[] = [
+
+  ];
+  public orderInformation: any[] = [];
+
+  public stockColumns: any[] = [];
+  public stockLocationColumns: any[] = [];
+  public inOrderColumns: any[] = [];
+  public orderColumns: any[] = [];
+
+  public hideOrShowTabs: string = "show";
+  public hideOrShowStockLocation: string = "hide";
+
+  public dataWareHouseCode: number = 0;
+  public dataWareHouseFields: Object = { text: "warehouseDescription", value: "warehouseNumber" };
+
+  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(
+    private _stockService: StockService
+  ) {
+  }
+
+  public handleTabClick(tabData): void {
+    this.activeTab = tabData;
+  }
+
+  public onLocationClick(event): void {
+    // this.locationLineClicked.emit(event[0].location);
+    this.activeTab = "";
+    this.hideOrShowLocationTab = true;
+  }
+
+  public onRowClick(args: any): void {
+  }
+
+  public onPopupClose(): void {
+    this.show = false;
+  }
+
+  public handleHistoryClick(): void {
+    this.showStockHistory = true;
+  }
+
+  public handleCloseClick(): void {
+    this.onPopupClose();
+  }
+
+  public handleStockTransferClick(event): void {
+    this.transferIconClicked.emit(event);
+  }
+
+  public async handleBackToStockClick(): Promise<void> {
+    this.activeTab = this.tabs[0];
+    this.hideOrShowTabs = "show";
+    this.hideOrShowStockLocation = "hide";
+    this.hideOrShowLocationTab = false;
+  }
+
+  public handleStickerClick(): void {
+
+  }
+
+  public handleTransferClick(): void {
+
+  }
+
+  public onOkClick(): void {
+
+  }
+
+  public onCancelClick(): void {
+
+  }
+}

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

@@ -0,0 +1,82 @@
+import {Component, EventEmitter,Output, ViewEncapsulation} from "@angular/core";
+
+@Component({
+  selector: "co-stock-location",
+  template: `
+    <div class="stock-location-wrapper">
+      <div class="buttons-wrapper">
+        <div class="stock-button-left-group">
+          <co-button [textContent]="'BACK_TO_STOCK_LINES'" (onClick)="backToStockInformation()"></co-button>
+        </div>
+        <div class="dropdown-wrapper">
+          <co-drop-down-list></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 {
+
+  @Output()
+  public backToStockLines: EventEmitter<any> = new EventEmitter();
+
+  public readonly MAX_GRID_ROWS: number = 10;
+
+  public stockLocationColumns: any[] = [];
+
+  public stockLocation: Object[] = [
+    {location: "title 1", batch: "1", serieNo: "1", amountInStock: "1", allocated: "1", amountAvailable: "1"},
+    {location: "title 2", amountInStock: "2"},
+    {location: "title 3", amountInStock: "3"},
+    {location: "title 4", amountInStock: "4"},
+    {location: "title 5", amountInStock: "5"},
+  ];
+
+  constructor(
+  ) {
+    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 onStickerClick(event): void {
+    console.log('test');
+  }
+
+  public onOkClick(): void {
+
+  }
+
+  public onCancelClick(): void {
+
+  }
+}

package/projects/sharedcomponents/src/lib/components/stock/stock-location/style/_layout.scss

@@ -0,0 +1,11 @@
+@import "../../../../../style/mixin";
+
+@include export-module('co-stock-location-layout') {
+  .co-stock {
+    font-family: $tp-stock-font-family;
+
+    .button-wrapper {
+      display: flex;
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/components/stock/stock-location/style/_material-definition.scss

@@ -0,0 +1 @@
+$tp-stock-font-family: $tp-font-family !default;

package/projects/sharedcomponents/src/lib/components/stock/stock-location/style/_theme.scss

@@ -0,0 +1,18 @@
+@import "../../../../style/mixin";
+@import "./material-definition";
+
+@include export-module('co-stock-location-theme') {
+  .co-stock {
+
+  }
+  .stock-grid {
+    margin-top: 50px;
+  }
+  .buttons-wrapper {
+    display: flex;
+  }
+  .dropdown-wrapper {
+    float: right;
+    max-width: 20%;
+  }
+}

package/projects/sharedcomponents/src/lib/components/stock/stock-location/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

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

@@ -0,0 +1,52 @@
+import {Component, ViewEncapsulation} from "@angular/core";
+
+@Component({
+  selector: "co-stock-transfer",
+  template: `
+      <div class="stock-transfer">
+        <div class="stock-transfer-left-column">
+          <co-input-text [placeholder]="'Standaard magazijn'">
+
+          </co-input-text>
+          <co-input-text>
+
+          </co-input-text>
+          <co-input-text >
+
+          </co-input-text>
+          <co-input-text >
+
+          </co-input-text>
+          <co-input-text >
+
+          </co-input-text>
+        </div>
+
+        <div class="stock-transfer-right-column">
+          <co-input-text [placeholder]="'Standaard magazijn'">
+
+          </co-input-text>
+          <co-input-text>
+
+          </co-input-text>
+          <co-input-text >
+
+          </co-input-text>
+          <co-input-text >
+
+          </co-input-text>
+          <co-input-text >
+
+          </co-input-text>
+        </div>
+      </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockTransferComponent {
+
+  constructor(
+  ) {
+  }
+
+}

package/projects/sharedcomponents/src/lib/components/stock/stock-transfer/style/_layout.scss

@@ -0,0 +1,18 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-stock-transfer-layout') {
+
+  .stock-transfer-right-column {
+    display: flex;
+    flex-direction: column;
+    width: 25%;
+    float: right;
+  }
+
+  .stock-transfer-left-column {
+    display: flex;
+    flex-direction: column;
+    width: 25%;
+    float: left;
+  }
+}

package/projects/sharedcomponents/src/lib/components/stock/stock-transfer/style/_material-definition.scss

@@ -0,0 +1 @@
+

package/projects/sharedcomponents/src/lib/components/stock/stock-transfer/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+@import "./material-definition";
+
+@include export-module('co-stock-location-theme') {
+
+}

package/projects/sharedcomponents/src/lib/components/stock/stock-transfer/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

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

@@ -0,0 +1,56 @@
+import {Component, HostBinding, Input, ViewChild, ViewEncapsulation} from "@angular/core";
+import {StockService} from "../../service/stock.service";
+
+@Component({
+  selector: "co-stock",
+  template: `
+      <div class="stock-info-container">
+        <co-stock-information></co-stock-information>
+        <hr>
+        <co-stock-information-grid *ngIf="showStockInformationGrid" (transferIconClicked)="handleStockTransferClick($event)"></co-stock-information-grid>
+        <co-stock-location *ngIf="showStockLocation" (backToStockLines)="backToStockLinesClicked()"></co-stock-location>
+        <co-stock-transfer *ngIf="showStockTransfer"></co-stock-transfer>
+        <co-button (click)="handleStockLocationClick()"></co-button>
+      </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockComponent {
+
+  @ViewChild(StockComponent)
+  public stock: StockComponent;
+
+  @Input()
+  public set options(value: any) {
+    this._stockService.connectConnector(value);
+  }
+
+  @HostBinding("class.co-stock")
+  public showClass() {
+    return true;
+  }
+
+  public showStockInformationGrid: boolean = true;
+  public showStockLocation: boolean = false;
+  public showStockTransfer: boolean = false;
+
+  constructor(
+    private _stockService: StockService
+  ) {
+  }
+
+  public backToStockLinesClicked(): void {
+    this.showStockLocation = false;
+    this.showStockInformationGrid = true;
+  }
+
+  public handleStockTransferClick(event): void {
+    this.showStockTransfer = !this.showStockTransfer;
+    this.showStockInformationGrid = !this.showStockInformationGrid;
+  }
+
+  public async handleStockLocationClick(): Promise<void> {
+    await this._stockService.loadStockLocations(10);
+  }
+
+}

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

@@ -0,0 +1,45 @@
+import {NgModule} from "@angular/core";
+import {StockComponent} from "./stock.component";
+import {
+  ButtonModule,
+  CoGridModule,
+  DropDownModule, ImageModule,
+  InputComboBoxModule,
+  InputRadioButtonModule, InputTextModule, SimpleGridModule
+} from "@colijnit/corecomponents_v12";
+import {CommonModule} from "@angular/common";
+import {StockInformationComponent} from "./stock-information/stock-information.component";
+import {StockInformationGridComponent} from "./stock-information-grid/stock-information-grid.component";
+import {StockLocationComponent} from "./stock-location/stock-location.component";
+import {StockService} from "../../service/stock.service";
+import {IoneConnectorAdapterService} from "../../service/ione-connector-adapter.service";
+import {StockTransferComponent} from "./stock-transfer/stock-transfer.component";
+
+@NgModule({
+  imports: [
+    InputComboBoxModule,
+    CoGridModule,
+    ButtonModule,
+    CommonModule,
+    InputRadioButtonModule,
+    DropDownModule,
+    SimpleGridModule,
+    ImageModule,
+    InputTextModule
+  ],
+  declarations: [
+    StockComponent,
+    StockInformationComponent,
+    StockInformationGridComponent,
+    StockLocationComponent,
+    StockTransferComponent
+  ],
+    exports: [
+        StockComponent
+    ],
+    providers: [
+      StockService,
+      IoneConnectorAdapterService
+    ]
+})
+export class StockModule {}