@colijnit/sharedcomponents 1.0.24 → 1.0.25

package/projects/sharedcomponents/src/lib/components/layout-switcher/layout-switcher.component.ts

@@ -0,0 +1,98 @@
+import {Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, ViewEncapsulation} from "@angular/core";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {Icon} from "../../enum/icon.enum";
+import {IconCacheService} from "../../service/icon-cache.service";
+
+
+@Component({
+  selector: "layout-switcher",
+  template: `
+    <div class="mask-wrapper" [class.mask-wrapper-active]='showMaskSidebar' @showHideSidebar>
+      <div class="icon-wrapper" (click)="toggleMaskSidebar()">
+        <co-icon class="icon-mask" [iconData]="iconCacheService.getIcon(icon.BringForwardRegular)" [@positionIcon]="showMaskSidebar"></co-icon>
+
+        <co-icon class='icon-mask-sidebar-handle' [@positionHandle]='showMaskSidebar' [iconData]="showMaskSidebar ? iconCacheService.getIcon(this.icon.AngleLeftSolid) : iconCacheService.getIcon(this.icon.AngleRightSolid)"></co-icon>
+      </div>
+
+      <div class="mask-content" *ngIf="showMaskSidebar" @showHideSidebar>
+        <span *ngFor='let item of this.layoutItems' [class.active]="this.activeIndex === this.layoutItems.indexOf(item)" [textContent]="item" (click)='activeIndex = this.layoutItems.indexOf(item)' ></span>
+      </div>
+    </div>
+
+  `,
+  animations: [
+    trigger("showHideSidebar", [
+      state("void", style({"width": "0"})),
+      state("*", style({"width": "*"})),
+      transition("void <=> *", animate(200))
+    ]),
+    trigger("positionIcon", [
+      state("true", style({"left": "70px"})),
+      state("false", style({"left": "10px"})),
+      transition("true <=> false", animate(200))
+    ]),
+    trigger("positionHandle", [
+      state("true", style({"left": "15px"})),
+      state("false", style({"left": "75px"})),
+      transition("true <=> false", animate(200))
+    ])
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class LayoutSwitcherComponent {
+  public readonly icon: typeof Icon = Icon;
+
+  @HostBinding('class.layout-switcher')
+  public showClass() {
+    return true;
+  }
+
+  @Input()
+  public layoutItems: string[] = [];
+
+  @Output()
+  public layoutSwitchEmit:EventEmitter<string> = new EventEmitter<string>();
+
+  public get activeIndex(): number {
+    return this._activeIndex;
+  }
+
+  public set activeIndex(index) {
+    this._activeIndex = index;
+    this.toggleMaskSidebar();
+    this.layoutSwitchEmit.emit(this.layoutItems[index]);
+  }
+
+  public showMaskSidebar: boolean = false;
+
+  private _activeIndex: number = 0;
+
+
+  constructor(public iconCacheService: IconCacheService) {
+  }
+
+  public toggleMaskSidebar(): void {
+    this.showMaskSidebar = !this.showMaskSidebar;
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+}

package/projects/sharedcomponents/src/lib/components/layout-switcher/layout-switcher.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {LayoutSwitcherComponent} from "./layout-switcher.component";
+import {IconModule} from "@colijnit/corecomponents_v12";
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IconModule
+  ],
+  declarations: [
+    LayoutSwitcherComponent,
+  ],
+  exports: [
+    LayoutSwitcherComponent
+  ]
+})
+export class LayoutSwitcherModule {
+
+}

package/projects/sharedcomponents/src/lib/components/layout-switcher/style/material.scss

@@ -0,0 +1,5 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+
+

package/projects/sharedcomponents/src/lib/components/linear-gauge/co-linear-gauge.component.ts

@@ -0,0 +1,56 @@
+import { Component, HostBinding, Input, ViewEncapsulation } from "@angular/core";
+
+enum GaugeColor {
+  Low = '#E0E0E0',
+  Medium = '#F88952',
+  High = '#5FDCB3',
+}
+
+@Component({
+  selector: "co-linear-gauge",
+  template: `
+    <div class="linear-gauge"
+         [style.background]="getStyle()"
+         [style.border-color]="color"
+         [textContent]="count ? count : ''"
+    ></div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class CoLinearGaugeComponent {
+
+  @Input()
+  public set value(value: number) {
+    this._value = value;
+    this._setColor();
+  }
+
+  public get value(): number {
+    return this._value;
+  }
+
+  @Input()
+  public count: number;
+
+  @HostBinding("class.co-linear-gauge")
+  public showClass() {
+    return true;
+  }
+
+  private _value: number;
+  public color: GaugeColor = GaugeColor.Low;
+
+  public getStyle(): string {
+    return `linear-gradient(90deg, ${this.color} 0 ${this.value}%, white ${this.value}% 100%`;
+  }
+
+  private _setColor(): void {
+    if (this.value == 0) {
+      this.color = GaugeColor.Low;
+    } else if (this.value >= 0 && this.value < 100) {
+      this.color = GaugeColor.Medium;
+    } else if (this.value == 100) {
+      this.color = GaugeColor.High;
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/components/linear-gauge/co-linear-gauge.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { CoLinearGaugeComponent } from "./co-linear-gauge.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    CoLinearGaugeComponent
+  ],
+  exports: [
+    CoLinearGaugeComponent
+  ]
+})
+export class CoLinearGaugeModule {
+}

package/projects/sharedcomponents/src/lib/components/linear-gauge/style/material.scss

@@ -0,0 +1,5 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+
+

package/projects/sharedcomponents/src/lib/components/send-method-dialog/enums/send-option.ts

@@ -0,0 +1,6 @@
+export enum SendOption {
+  Email,
+  Print,
+  Pdf,
+  Xml
+}

package/projects/sharedcomponents/src/lib/components/send-method-dialog/send-method-dialog.component.ts

@@ -0,0 +1,342 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input, OnDestroy,
+  Output,
+  ViewEncapsulation
+} from "@angular/core";
+import {Icon} from "../../enum/icon.enum";
+import {IconCacheService} from "../../service/icon-cache.service";
+import {SendOption} from "./enums/send-option";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {Printer} from "@colijnit/sharedapi/build/model/report/printer.bo";
+import {StockService} from "../../service/stock.service";
+import {StockStickersPrintLayouts} from "@colijnit/sharedapi/build/model/report/stock-stickers-print-layouts.bo";
+import {CoDropDownListFields} from "../stock/stock-transfer/co-drop-down-list-fields.interface";
+import {Subscription} from "rxjs";
+import {OptionsService} from "../../service/options.service";
+import {DictionaryService} from "../../service/dictionary.service";
+
+@Component({
+  selector: "ione-send-method-dialog",
+  template: `
+    <div class="send-method-dialog-wrapper">
+      <co-dialog-wizard id="sendOptionsDialog" *ngIf="showDialog" [showCloseIcon]="showExitButton" (closeClick)="closeDialogClick()">
+        <ng-container header>
+          <span [textContent]="headerTitle"></span>
+        </ng-container>
+        <div class="dialog-content-wrapper">
+          <div class="main-content-container" *ngIf="!showPrinterSelections">
+            <div class="send-options-wrapper">
+              <div class="custom-button-wrapper"
+                   *ngFor="let sendOption of sendOptions"
+                   [class.selected-option]="sendOption.option === activeSendOption"
+                   (click)="activeSendOption = sendOption.option">
+                <co-icon [iconData]="iconCacheService.getIcon(sendOption.iconName)"></co-icon>
+              </div>
+            </div>
+
+            <div class="email-option-content" *ngIf="activeSendOption === sendOption.Email || activeSendOption === sendOption.Pdf">
+              <div class="emails-container" *ngIf="activeSendOption === sendOption.Email">
+                <co-input-checkbox
+                  *ngFor="let email, let index of emails"
+                  [name]="email"
+                  [(model)]="models[index]"
+                  [label]="email"
+                  [cssClass]="'input-checkbox-wrapper'"
+                ></co-input-checkbox>
+              </div>
+
+              <div class="lov-wrapper">
+                <co-input-combo-box
+                  [(model)]="selectedLayout"
+                  [collection]="layouts"
+                  [forceReadonly]="true"
+                  placeholder="Layout"
+                ></co-input-combo-box>
+              </div>
+
+              <div class="signature-button-wrapper">
+                <div class="custom-button-wrapper signature-button" (click)="handleSignatureStart()">
+                  <co-icon [iconData]="iconCacheService.getIcon(icons.SignatureField)"></co-icon>
+                </div>
+              </div>
+            </div>
+
+            <div class="email-option-content" *ngIf="activeSendOption === sendOption.Print" (click)="getPrintTemplates()">
+              <div *ngIf="showPrintPriceStickers">
+                <div class="lov-wrapper">
+                  <co-input-combo-box
+                    [(model)]="stockService.printPriceSticker.reportId"
+                    [collection]="printTemplates"
+                    [fields]="printTemplatesField"
+                    placeholder="Layout"
+                  ></co-input-combo-box>
+                </div>
+                <div class="lov-wrapper" *ngIf="priceListCodeData">
+                  <co-input-combo-box
+                    [(model)]="stockService.printPriceSticker.priceListCode"
+                    [collection]="priceListCodeData"
+                    [fields]="priceListDataField"
+                    placeholder="Layout"
+                  ></co-input-combo-box>
+                </div>
+              </div>
+
+              <div *ngIf="showPrintStockStickers">
+                <div class="lov-wrapper">
+                  <co-input-combo-box
+                    [(model)]="stockService.printSticker.reportId"
+                    [collection]="printTemplates"
+                    [fields]="printTemplatesField"
+                    placeholder="Layout"
+                  ></co-input-combo-box>
+                </div>
+              </div>
+
+              <div class="lov-wrapper clickable" (click)="togglePrinterSelection()">
+                <div class="selected-printer-wrapper">
+                  <div class="printer-option-list-item">
+                    <co-icon class="printer-icon" [iconData]="iconCacheService.getIcon(icons.Print)"></co-icon>
+                    <div class="printer-details" *ngIf="printerList">
+                      <span class="printer-name" [textContent]="defaultPrinter"></span>
+                      <span class="printer-status" [textContent]="defaultPrinter.acceptingJobs"></span>
+                    </div>
+                  </div>
+                  <co-icon class="select-printer-arrow" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)"></co-icon>
+                </div>
+              </div>
+
+              <div class="standard-printer-wrapper">
+                <div class="standard-printer-link" (click)="showStandardPrinterOptions = !showStandardPrinterOptions">
+                  <co-icon class="arrow-icon" [iconData]="iconCacheService.getIcon(icons.ArrowFatRight)"></co-icon>
+                  <span class="standard-printer-message" [textContent]="'Standaard printer voor lay-out instellen'"></span>
+                </div>
+
+                <div class="standard-printer-selections" *ngIf="showStandardPrinterOptions">
+                  <co-input-checkbox
+                    [(model)]="models[0]"
+                    [label]="'Per gebruiker instellen'"
+                    [cssClass]="'input-checkbox-wrapper'"
+                  ></co-input-checkbox>
+                  <co-input-checkbox
+                    [(model)]="models[1]"
+                    [label]="'Voor alle gebruikers instellen'"
+                    [cssClass]="'input-checkbox-wrapper'"
+                  ></co-input-checkbox>
+                </div>
+              </div>
+
+              <div class="print-footer-wrapper">
+                <div class="input-number-wrapper">
+                  <co-input-number-picker class="number-picker"
+                                          [step]="1" [(model)]="stockService.printSticker.amount" [min]="1"
+                                          [ngModelOptions]="{debounce: 1}">
+                  </co-input-number-picker>
+                </div>
+                <div class="custom-button-wrapper print-button" (click)="handlePrintClicked()">
+                  <span [textContent]="'Print'"></span>
+                </div>
+                <div class="custom-button-wrapper signature-button" (click)="handleSignatureStart()">
+                  <co-icon [iconData]="iconCacheService.getIcon(icons.SignatureField)"></co-icon>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="printer-content-container" @slideInOut *ngIf="showPrinterSelections">
+            <div class="selected-printer-wrapper selection clickable" *ngFor="let printers of printerList" (click)="onPrinterClicked(printers)">
+              <div class="printer-option-list-item">
+                <co-icon class="printer-icon" [iconData]="iconCacheService.getIcon(icons.Print)"></co-icon>
+                <div class="printer-details">
+                  <span class="printer-name" [textContent]="printers.name"></span>
+                  <span class="printer-status" [textContent]="printers.acceptingJobs"></span>
+                </div>
+              </div>
+              <co-icon class="select-printer-arrow" *ngIf="!showPrinterSelections"
+                       [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)"></co-icon>
+            </div>
+          </div>
+        </div>
+      </co-dialog-wizard>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  animations: [
+    trigger('slideInOut', [
+      state('*', style({transform: 'translateX(0%)', width: '100%', opacity: '1'})),
+      state('void', style({transform: 'translateX(150%)', opacity: '0'})),
+      transition('void => *', animate(250))
+    ])
+  ]
+})
+
+export class SendMethodDialogComponent implements OnDestroy {
+  public readonly icons: typeof Icon = Icon;
+  public readonly sendOption: typeof SendOption = SendOption;
+
+  @Input()
+  public showEmailOption: boolean = true;
+
+  @Input()
+  public showPrintOption: boolean = true;
+
+  @Input()
+  public showPdfOption: boolean = true;
+
+  @Input()
+  public showXmlOption: boolean = true;
+
+  @Input()
+  public showPrintPriceStickers: boolean = false;
+
+  @Input()
+  public showPrintStockStickers: boolean = true;
+
+  @Input()
+  public priceListCodeData: any
+
+  public sendOptions: {option: SendOption, iconName: Icon}[] = [
+    { option: SendOption.Email,
+      iconName: this.icons.Email,
+    },
+    { option: SendOption.Print,
+      iconName: this.icons.Print,
+    },
+    { option: SendOption.Pdf,
+      iconName: this.icons.Pdf,
+    },
+    { option: SendOption.Xml,
+      iconName: this.icons.Xml,
+    }
+  ]
+
+  public activeSendOption: SendOption = SendOption.Email;
+  public showStandardPrinterOptions: boolean = false;
+  public showPrinterSelections: boolean = false;
+  public showExitButton = true;
+  public defaultPrinter: Printer;
+  public printTemplates: StockStickersPrintLayouts[];
+  public printTemplatesField: CoDropDownListFields = {text: "name", value: "reportId"};
+  public priceListDataField: CoDropDownListFields = {text: "name", value: "priceListCode"};
+  public upAndLoaded: boolean = false;
+
+  public emails: any[] = ['lars.vdv@colijn-it.nl', 'david@colijn-it.nl', 'ruben@colijn-it.nl'];
+  public models: boolean[] = [false, false, true];
+
+  public layouts: any[] = ['Layout 1', 'Layout 2', 'Layout 3'];
+  public selectedLayout: 'Layout 1';
+
+  @Input()
+  public showDialog: boolean = false;
+
+  @Input()
+  public headerTitle: string;
+
+  @Input()
+  public printerList: Printer[];
+
+  @Input()
+  public set articleData(data: any) {
+    this.stockService.printSticker.goodId = data.goodId;
+    this.stockService.printSticker.warehouse = data.warehouseNo;
+  };
+
+  @Output()
+  public startSignatureClicked: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  public printButtonClicked: EventEmitter<any> = new EventEmitter<any>();
+
+  @HostBinding("class.ione-send-method-dialog")
+  public showClass(): boolean {
+    return true;
+  }
+
+  private _subscriptions: Subscription[] = [];
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    public stockService: StockService,
+    private _optionsService: OptionsService,
+    private _dictionary: DictionaryService,
+    private _changeDetector: ChangeDetectorRef,
+  ) {
+    this._subscriptions.push(
+      this._optionsService.optionsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)),
+    )
+  }
+
+  ngOnDestroy(): void {
+    this._subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
+
+  public async getPrinters(): Promise<void> {
+    return this.stockService.getAllPrinters(true).then((list) => {
+      this.printerList = list;
+    });
+  }
+
+  public closeDialogClick(): void {
+    this.showDialog = false;
+  }
+
+  public handleSignatureStart(): void {
+    this.startSignatureClicked.emit();
+  }
+
+  public handlePrintClicked(): void {
+    // this.printButtonClicked.emit();
+    if (this.stockService.printSticker.printerName) {
+      this.stockService.getPrintStockStickers(this.stockService.printSticker);
+    }
+  }
+
+  public togglePrinterSelection(): void {
+    this.getPrinters();
+    if (!this.showPrinterSelections) {
+      this.showPrinterSelections = true;
+      this.headerTitle = 'Printer selectie';
+    } else {
+      this.showPrinterSelections = false;
+      this.headerTitle = 'Verzendopties';
+    }
+  }
+
+  public onPrinterClicked(printer): void {
+    this.defaultPrinter = printer.name;
+    this.stockService.printSticker.printerName = printer.name;
+    this.showPrinterSelections =! this.showPrinterSelections;
+  }
+
+  public getPrintTemplates(): any {
+    if (!this.printTemplates) {
+      const data = new StockStickersPrintLayouts();
+      this.stockService.getStockStickerTemplates(data).then((templates: StockStickersPrintLayouts[]) => {
+        this.printTemplates = templates;
+      });
+    }
+  }
+
+  private async _handleSettingsLoaded(loaded: boolean): Promise<void> {
+    if (loaded) {
+      await this._initConnection().then();
+      this.upAndLoaded = true;
+    }
+  }
+
+  private async _initConnection(): Promise<void> {
+    // await this._connector.connect(this._optionsService.options);
+
+    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();
+    });
+  }
+
+}

package/projects/sharedcomponents/src/lib/components/send-method-dialog/send-method-dialog.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  ButtonModule,
+  CoDialogPromptModule, CoDialogWizardModule, IconModule,
+  InputCheckboxModule,
+  InputComboBoxModule, InputNumberPickerModule
+} from "@colijnit/corecomponents_v12";
+import {SendMethodDialogComponent} from "./send-method-dialog.component";
+import {StockService} from "../../service/stock.service";
+
+@NgModule({
+  declarations: [
+    SendMethodDialogComponent
+  ],
+  imports: [
+    CommonModule,
+    CoDialogPromptModule,
+    InputCheckboxModule,
+    InputComboBoxModule,
+    IconModule,
+    InputNumberPickerModule,
+    CoDialogWizardModule,
+    ButtonModule
+  ],
+  exports: [
+    SendMethodDialogComponent
+  ],
+  providers: [
+    StockService
+  ]
+})
+export class SendMethodDialogModule { }