@colijnit/sharedcomponents 1.0.54 → 1.0.56

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

@@ -0,0 +1,228 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input, OnDestroy, OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from "@angular/core";
+import {StockService} from "../../service/stock.service";
+import {PrintStockStickers} from "@colijnit/sharedapi/build/model/print-stock-stickers";
+import {ArticleStock as ArticleStockBo} from "@colijnit/articleapi/build/model/article-stock.bo";
+import {ArticleExtended} from "@colijnit/articleapi/build/model/article-extended.bo";
+import {ArticleStock} from "@colijnit/articleapi/build/model/article-stock";
+import {StockHistoryBo} from "@colijnit/articleapi/build/model/stock-history.bo";
+import {ArticleDetailsBo} from "@colijnit/articleapi/build/model/article-details.bo";
+import {OptionsService} from "../../service/options.service";
+import {Subscription} from "rxjs";
+import {DictionaryService} from "../../service/dictionary.service";
+import {StockManagementWarehouses} from "@colijnit/articleapi/build/model/stock-management-warehouses.bo";
+import {Translation} from './localization/translation';
+import {LocalizeService} from '../../localization/localize.service';
+import {ArticleExtendedRequest} from "@colijnit/articleapi/build/model/article-extended-request";
+import {SharedConnectorService} from "../../service/shared-connector.service";
+import {ArticleFlat} from "@colijnit/articleapi/build/model/article-flat.bo";
+
+@Component({
+  selector: "co-stock",
+  template: `
+      <div class="stock-info-container" *ngIf="loaded && articleExtended">
+        <co-stock-information [article]="articleExtended"
+                              [articleStockState]="articleStockState"
+                              [allAvailableStockInformation]="allAvailableStock"
+                              [allTechnicalStockInformation]="allTechnicalStock"
+        >
+        </co-stock-information>
+        <hr>
+        <co-stock-tabs [stockInformation]="stockInformation"
+                       [article]="articleExtended"
+                       [articleFlat]="articleFlat"
+                       (transferIconClicked)="handleStockTransferClick($event)"
+                       (sendMethodDialogClicked)="handleSendMethodClick($event)"
+                       [warehouses]="warehouses"
+        ></co-stock-tabs>
+
+        <co-dialog *ngIf="showStockTransfer" (closeClick)="showStockTransfer = false">
+          <co-stock-transfer (handleClick)="backToStock()"
+                             class="stock-transfer-dialog"
+                             [article]="stockTransferArticle"
+                             [articleToTransfer]="stockTransferArticleDetails"
+                             (handleStickerClicked)="handleStickerClicked.emit($event)"
+                             [articleWarehouse]="articleWarehouse"
+                             [allWarehouses]="allWarehouses"
+          >
+          </co-stock-transfer>
+        </co-dialog>
+
+        <co-send-method-dialog *ngIf="showSendMethodDialog">
+
+        </co-send-method-dialog>
+      </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockComponent implements OnDestroy, OnInit {
+
+  @Input()
+  public set translation(value: Translation) {
+    this._localizeService.translation = value;
+    this._changeDetector.markForCheck();
+  }
+
+  @Output()
+  public handleStickerClicked: EventEmitter<any> = new EventEmitter();
+
+  @Input()
+  public set article(articleOrGoodId: ArticleExtended | number) {
+    if(articleOrGoodId instanceof ArticleExtended) {
+      this.articleExtended = articleOrGoodId;
+      this._goodId = articleOrGoodId.goodId;
+
+    } else if(typeof articleOrGoodId === "number" ) {
+      this._goodId = articleOrGoodId;
+    }
+
+  };
+
+  @Input()
+  public articleWarehouse: any[] = [];
+
+  @Input()
+  public allWarehouses: any[] = [];
+
+  @Output()
+  public readonly okButtonClicked: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  public readonly cancelButtonClicked: EventEmitter<any> = new EventEmitter();
+
+  @HostBinding("class.co-stock")
+  public showClass() {
+    return true;
+  }
+
+  public loaded: boolean = false;
+
+  public showStockInformationGrid: boolean = true;
+  public showStockTransfer: boolean = false;
+  public stockInformation: ArticleStockBo[] = [];
+  public stockTransferArticle: ArticleStockBo;
+  public stockTransferArticleDetails: ArticleDetailsBo;
+  public articleExtended: ArticleExtended;
+
+  public articleFlat:ArticleFlat;
+  public stockHistory: StockHistoryBo[] = [];
+  public allAvailableStock: number = 0;
+  public allTechnicalStock: number = 0;
+  public showSendMethodDialog: boolean = false;
+  public articleStockState: number;
+  public warehouses: StockManagementWarehouses[] = [];
+
+  private _subscriptions: Subscription[] = [];
+  private _goodId: number;
+
+  constructor(
+    private _stockService: StockService,
+    private _optionsService: OptionsService,
+    private _dictionary: DictionaryService,
+    private _changeDetector: ChangeDetectorRef,
+    private _localizeService: LocalizeService,
+    private _connector: SharedConnectorService
+  ) {
+    this._subscriptions.push(
+      this._optionsService.optionsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)),
+    )
+  }
+
+  ngOnDestroy(): void {
+    this.articleExtended = undefined;
+    this.articleFlat = undefined;
+    this._subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
+
+  ngOnInit() {
+  }
+
+  public handleStockTransferClick(event): void {
+    this.stockTransferArticleDetails = event;
+    this.showStockTransfer = !this.showStockTransfer;
+    this.showStockInformationGrid = !this.showStockInformationGrid;
+    this._stockService.stockStickers = new PrintStockStickers();
+  }
+
+  public handleSendMethodClick(event): void {
+    this.showSendMethodDialog = true;
+  }
+
+  public backToStock(): void {
+    this.showStockTransfer = !this.showStockTransfer;
+    this.showStockInformationGrid = !this.showStockInformationGrid;
+  }
+
+  public getStockInformation(goodId: number): void {
+    const articleData: ArticleStock = new ArticleStock();
+    articleData.goodId = goodId.toString();
+    articleData.viewKind = "M";
+    this._stockService.getStockInformation(articleData).then(result => {
+      this.stockInformation = result;
+      this.stockInformation.forEach((articleStock) => this.allAvailableStock += articleStock.availableStock);
+      this.stockInformation.forEach((articleStock) => this.allTechnicalStock += articleStock.technicalStock);
+    });
+
+  }
+
+  public getArtStockStatus(): void {
+    this._stockService.getArtStockStatus(this.articleExtended ? this.articleExtended.goodId : this._goodId).then(result => {
+      this.articleStockState = result;
+    });
+  }
+
+  public getStockManagementWarehouses(): void {
+    this._stockService.getStockManagementWarehouses().then((warehouses) => {
+      this.warehouses = warehouses;
+    })
+  }
+
+  private async _handleSettingsLoaded(loaded: boolean): Promise<void> {
+    if (loaded) {
+      await this._initConnection().then();
+    }
+  }
+
+  private async _initConnection(): Promise<void> {
+    await this._connector.connect();
+    if (this._optionsService.options.url) {
+      this._dictionary.rootUrl = this._optionsService.options.url.replace("/ajaxservice", "");
+    }
+    await this._dictionary.setDictionary(this._optionsService.options.languageCode);
+    setTimeout(() => {
+      this._changeDetector.detectChanges();
+    });
+    this.loaded = true;
+    this.loadData();
+  }
+
+
+  public loadData() {
+    if(this.loaded) {
+      if(this._goodId && !this.articleExtended) {
+        let request: ArticleExtendedRequest = new ArticleExtendedRequest();
+        request.goodId = this._goodId;
+        this._stockService.searchArticles(request).then((articleExtended: ArticleExtended[]) => {
+          this.articleExtended = articleExtended[0];
+        });
+      }
+      this._stockService.getArticleFlat(this.articleExtended.articleNumber).then(result => {
+        this.articleFlat = result;
+      })
+        this.getArtStockStatus();
+        this.getStockManagementWarehouses();
+        this.getStockInformation(this.articleExtended ? this.articleExtended.goodId : this._goodId);
+    }
+    this._changeDetector.markForCheck();
+    this._changeDetector.detectChanges();
+  }
+
+}

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

@@ -0,0 +1,97 @@
+import {NgModule} from '@angular/core';
+import {StockComponent} from './stock.component';
+import {
+  ButtonModule,
+  CoDialogModule,
+  CoDialogWizardModule,
+  IconModule,
+  ImageModule,
+  InputNumberPickerModule,
+  InputRadioButtonModule,
+  InputTextareaModule,
+  InputTextModule,
+  ListOfValuesModule,
+  SimpleGridModule,
+  PopupModule,
+} 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 {StockService} from '../../service/stock.service';
+import {StockTransferComponent} from './stock-transfer/stock-transfer.component';
+import {SendMethodDialogModule} from '../send-method-dialog/send-method-dialog.module';
+import {StockChangeAmountComponent} from './stock-transfer/stock-change-amount.component';
+import {StockTabComponent} from './components/stock-tab/stock-tab.component';
+import {OrderTabComponent} from './components/order-tab/order-tab.component';
+import {StockTabsComponent} from './stock-tabs/stock-tabs.component';
+import {StockHistoryTabsComponent} from './stock-history-tabs/stock-history-tabs.component';
+import {OrderStockTabComponent} from './components/order-stock-tab/order-stock-tab.component';
+import {StockLocationComponent} from './components/stock-location/stock-location.component';
+import {StockHistoryComponent} from './components/stock-history/stock-history.component';
+import {TabBarModule} from '../tab-bar/tab-bar.module';
+import {
+  OrderSupplyStockHistoryComponent
+} from './components/order-supply-stock-history/order-supply-stock-history.component';
+import {
+  OrderCommissionStockHistoryComponent
+} from './components/order-commission-stock-history/order-commission-stock-history.component';
+import {OrderStockHistoryComponent} from './components/order-stock-history/order-stock-history.component';
+import {
+  AllocationStockHistoryComponent
+} from './components/allocation-stock-history/allocation-stock-history.component';
+import {StatusbarModule} from '../statusbar/statusbar.module';
+import {StockStatusbarModule} from '../stock-statusbar/stock-statusbar.module';
+import {StockPrognoseComponent} from './components/stock-prognose/stock-prognose.component';
+import {LocalizationModule} from '../../localization/localization.module';
+import {LocalizeService} from '../../localization/localize.service';
+
+@NgModule({
+  imports: [
+    ButtonModule,
+    CommonModule,
+    InputRadioButtonModule,
+    SimpleGridModule,
+    ImageModule,
+    InputTextModule,
+    SendMethodDialogModule,
+    IconModule,
+    InputNumberPickerModule,
+    CoDialogWizardModule,
+    InputTextareaModule,
+    TabBarModule,
+    CoDialogModule,
+    StatusbarModule,
+    StockStatusbarModule,
+    ListOfValuesModule,
+    LocalizationModule,
+    PopupModule
+  ],
+  declarations: [
+    StockComponent,
+    StockInformationComponent,
+    StockInformationGridComponent,
+    StockTransferComponent,
+    StockChangeAmountComponent,
+    StockTabComponent,
+    OrderTabComponent,
+    StockTabsComponent,
+    StockHistoryTabsComponent,
+    OrderStockTabComponent,
+    StockLocationComponent,
+    StockHistoryComponent,
+    OrderSupplyStockHistoryComponent,
+    OrderCommissionStockHistoryComponent,
+    OrderStockHistoryComponent,
+    AllocationStockHistoryComponent,
+    StockPrognoseComponent
+  ],
+  exports: [
+    StockComponent
+  ],
+  providers: [
+    StockService,
+    LocalizeService
+  ]
+})
+export class StockModule {
+}

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

@@ -0,0 +1,23 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+
+@Component({
+  selector: "co-stock-statusbar",
+  template: `
+    <div class="status-bar">
+      <div class="status-bar-block" [ngClass]="{'red': value === 0, 'orange': value === 1, 'green': value === 2}"></div>
+      <div class="status-bar-block" [ngClass]="{'orange': value === 1, 'green': value === 2}"></div>
+      <div class="status-bar-block" [ngClass]="{'green': value === 2}"></div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockStatusbarComponent {
+
+  @Input()
+  public value: number;
+
+  constructor(
+  ) {
+  }
+
+}

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

@@ -0,0 +1,17 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {StockStatusbarComponent} from "./stock-statusbar.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    StockStatusbarComponent
+  ],
+  exports: [
+    StockStatusbarComponent
+  ]
+})
+export class StockStatusbarModule {
+}

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

@@ -0,0 +1,106 @@
+import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {Tab} from "./tab.interface";
+import {CoDropDownListFields} from "../stock/stock-transfer/co-drop-down-list-fields.interface";
+import {StockManagementWarehouses} from "@colijnit/articleapi/build/model/stock-management-warehouses.bo";
+import {ArticleStockManagement} from "@colijnit/articleapi/build/model/article-stock-management";
+import {StockService} from "../../service/stock.service";
+import {ArticleDetailsBo} from "@colijnit/articleapi/build/model/article-details.bo";
+
+@Component({
+  selector: "co-tab-bar",
+  template: `
+    <div class="tab-bar-wrapper">
+      <div class="tab-bar-warehouse-wrapper">
+        <div class="stock-location-group">
+          <div class="stock-location-right-group">
+            <co-list-of-values *ngIf="showWarehouseSelection"
+                               [label]="wareHouseLabel"
+                               [displayField]="'warehouseDescription'"
+                               [collection]="dataWareHouseCode"
+                               [multiselect]="false"
+                               [required]="false"
+                               [readonly]="false"
+                               [customCssClass]="'mini-scrollbar'"
+                               [searchPlaceholder]="wareHouseSearchLabel"
+                               [model]="selectedWarehouse"
+                               (modelChange)="onSelectWarehouse($event)"
+                               class="custom-height"
+            >
+            </co-list-of-values>
+          </div>
+        </div>
+      </div>
+      <div class="tab-bar">
+        <div class="tab-bar-primary">
+          <button *ngFor="let tab of tabs" [class.active]="tab.active" (click)="selectTab(tab)">
+            {{tab.title}}
+          </button>
+        </div>
+        <div class="secondary-tab-bar" *ngIf="ActivateSecondaryTabs">
+          <button *ngFor="let tab of secondaryTabs" [class.active]="tab.active" (click)="selectSecondaryTab(tab)">
+            {{tab.title}}
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class TabBarComponent {
+
+  @Input()
+  public wareHouseLabel: string;
+
+  @Input()
+  public wareHouseSearchLabel: string;
+
+  @Input()
+  public tabs: Tab[] = [];
+
+  @Input()
+  public secondaryTabs: Tab[] = [];
+
+  @Input()
+  public ActivateSecondaryTabs: boolean = false;
+
+  @Input()
+  public dataWareHouseCode: StockManagementWarehouses[] = [];
+
+  @Input()
+  public article: any;
+
+  @Input()
+  public showWarehouseSelection: boolean = false;
+
+  @Output()
+  public warehouseSelected: EventEmitter<StockManagementWarehouses> = new EventEmitter<StockManagementWarehouses>();
+
+  @Input()
+  public selectedWarehouse: any;
+
+  constructor(
+    private _stockService: StockService,
+  ) {
+  }
+
+  public selectTab(tab: Tab): void {
+    if (tab.clickHandler) {
+      tab.clickHandler();
+    }
+    this.tabs.forEach(t => t.active = false);
+    tab.active = true;
+  }
+
+  public selectSecondaryTab(secondaryTab: Tab): void {
+    if (secondaryTab.clickHandler) {
+      secondaryTab.clickHandler();
+    }
+    this.secondaryTabs.forEach(t => t.active = false);
+    secondaryTab.active = true;
+  }
+
+  public onSelectWarehouse(event): void {
+    this.warehouseSelected.emit(event);
+  }
+
+}

package/projects/sharedcomponents/src/lib/components/tab-bar/tab-bar.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {TabBarComponent} from "./tab-bar.component";
+import {ListOfValuesModule} from "@colijnit/corecomponents_v12";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        ListOfValuesModule,
+    ],
+  declarations: [
+    TabBarComponent
+  ],
+  exports: [
+    TabBarComponent
+  ]
+})
+export class TabBarModule {
+
+}

package/projects/sharedcomponents/src/lib/components/tab-bar/tab.interface.ts

@@ -0,0 +1,5 @@
+export interface Tab {
+  title: string;
+  active: boolean;
+  clickHandler?: () => void;
+}

package/projects/sharedcomponents/src/lib/components/tags/component/tag-join-label/tag-join-label.component.ts

@@ -0,0 +1,61 @@
+import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {CssUtils} from "../../../../utils/css-utils";
+import {TagTreeItem} from "../../../../model/tag-tree-item.bo";
+
+@Component({
+    selector: "tag-join-label",
+    template: `
+        <div class="labelgroup" [ngStyle]="styles()" [class.custom-colors]="tag.color != null" [class.focus-item]="selected">
+            <co-image *ngIf="tag.image" [source]="tagImage"></co-image>
+            <div class="tag-icon" *ngIf="!tag.image">
+                <icon icon="tag"
+                      [class.dark]="tag.color == null && !selected"
+                      [class.light]="tag.color != null || selected"
+                ></icon>
+            </div>
+            <div class="labeltext">
+                <span class="parentText" [class.custom-colors]="tag.color != null" [class.focus-item]="selected" *ngIf="tag.parentDescription" [textContent]="tag.parentDescription"></span>
+                <span class="mainText value-text" [class.custom-colors]="tag.color != null" [class.focus-item]="selected" [textContent]="tag.description"></span>
+            </div>
+        </div>
+        <co-button class="circle transparent small"
+                   (click)="onCrossClick($event)"
+        ></co-button>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+// Component to show a fancy tag label for a raw label text.
+export class TagJoinLabelComponent {
+    // The tag description text to show.
+    @Input()
+    public tag: TagTreeItem;
+
+    @Input()
+    public selected: boolean;
+
+    @Input()
+    public tagImage: string;
+
+    @Output()
+    public readonly tagCrossClicked: EventEmitter<TagTreeItem> = new EventEmitter<TagTreeItem>();
+
+    constructor() {
+    }
+
+    public styles(): any {
+        if (!this.selected && this.tag.color != null) {
+            return {
+                "background-color": "" + CssUtils.DbRgbColorStringToCssRgbColor(this.tag.color)
+            };
+        } else {
+            return "";
+        }
+    }
+
+    public onCrossClick(event: MouseEvent): void {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        this.tagCrossClicked.emit(this.tag);
+    }
+}

package/projects/sharedcomponents/src/lib/components/tags/component/tag-label/tag-label.component.ts

@@ -0,0 +1,47 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+
+@Component({
+    selector: "sc-tag-label",
+    template: `
+        <!--icon icon="label" [ngStyle]="fills()"></icon-->
+        <div class="labelgroup" [ngStyle]="styles()">
+            <div class="labeltext" [class.custom-colors]="this.customColor != null">
+                <span [textContent]="model"></span>
+            </div>
+        </div>
+    `,
+     encapsulation: ViewEncapsulation.None
+})
+
+export class TagLabelComponent {
+    // The tag description text to show.
+    @Input()
+    public model: string;
+
+    public get customColor(): string {
+        return this._customColor;
+    }
+
+    private _customColor: string;
+
+    constructor() {
+    }
+
+    public fills(): any {
+        return this._getColorStyleObject("fill");
+    }
+
+    public styles(): any {
+        return this._getColorStyleObject("background-color");
+    }
+
+    private _getColorStyleObject(cssStyleType: string): any {
+        if (this._customColor != null) {
+            const styleObj: any = {};
+            styleObj[cssStyleType] = "" + this._customColor;
+            return styleObj;
+        } else {
+            return "";
+        }
+    }
+}