@colijnit/sharedcomponents 1.0.4 → 1.0.7

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

@@ -0,0 +1,215 @@
+import {Component, EventEmitter, HostBinding, Input, OnInit, 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/printer.bo";
+import {StockService} from "../../service/stock.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">
+              <div class="lov-wrapper">
+                <co-input-combo-box
+                  [(model)]="selectedLayout"
+                  [collection]="layouts"
+                  [forceReadonly]="true"
+                  placeholder="Layout"
+                ></co-input-combo-box>
+              </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">
+                      <span class="printer-name" [textContent]="defaultPrinter"></span>
+                      <span class="printer-status" [textContent]="'Online'"></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)]="amountToPrint" [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)="togglePrinterSelection()">
+              <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]="'Online'"></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 {
+  public readonly icons: typeof Icon = Icon;
+  public readonly sendOption: typeof SendOption = SendOption;
+
+  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 amountToPrint: number = 1;
+  public showStandardPrinterOptions: boolean = false;
+  public showPrinterSelections: boolean = false;
+  public showExitButton = true;
+  public defaultPrinter: string;
+
+  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[];
+
+  @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;
+  }
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    private _stockService: StockService
+  ) { }
+
+  public closeDialogClick(): void {
+    this.showDialog = false;
+  }
+
+  public handleSignatureStart(): void {
+    this.startSignatureClicked.emit();
+  }
+
+  public handlePrintClicked(): void {
+    this.printButtonClicked.emit();
+  }
+
+  public togglePrinterSelection(): void {
+    if (!this.showPrinterSelections) {
+      this.showPrinterSelections = true;
+      this.headerTitle = 'Printer selectie';
+    } else {
+      this.showPrinterSelections = false;
+      this.headerTitle = 'Verzendopties';
+    }
+  }
+}

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

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

package/src/lib/components/send-method-dialog/style/_layout.scss

@@ -0,0 +1,186 @@
+@import "../../../style/mixin";
+@import "../../../style/variables";
+
+@include export-module('ione-send-method-dialog-layout') {
+  .ione-send-method-dialog {
+    .send-method-dialog-wrapper {
+      font-family: $sc-font-family;
+    }
+
+    .dialog-content-wrapper {
+      padding: 0 20px 0 20px;
+      min-width: 350px;
+      min-height: 415px;
+      overflow: hidden;
+    }
+
+    .send-options-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    .custom-button-wrapper {
+      width: 45px;
+      height: 45px;
+      background-color: #f5f5fa;
+      padding: 5px;
+      margin: 5px;
+      border-radius: 10px;
+      cursor: pointer;
+
+      co-icon {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .selected-option {
+      background-color: #3e7eff;
+
+      co-icon svg {
+        path {
+          fill: white
+        }
+        rect {
+          fill: white
+        }
+      }
+    }
+
+    .email-option-content {
+      display: flex;
+      flex-direction: column;
+      margin: 10px 0 10px;
+    }
+
+    .emails-container {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .lov-wrapper {
+      margin: 15px 0 10px;
+      border: 1px solid #f6f6f8;
+      border-radius: 10px;
+      padding: 10px;
+    }
+
+    .input-checkbox-wrapper {
+      padding: 5px;
+    }
+
+    .input-number-wrapper {
+      width: 85px;
+      height: 52px;
+      margin: 5px;
+    }
+
+    .print-footer-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    .print-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 120px;
+    }
+
+    .number-picker {
+      height: 52px;
+    }
+
+    .signature-button-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    .signature-button {
+      width: 75px;
+    }
+
+    .standard-printer-wrapper {
+      width: 100%;
+      margin: 15px 0 15px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .standard-printer-link {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      co-icon svg {
+        polygon {
+          fill: #3e7eff
+        }
+      }
+    }
+
+    .arrow-icon {
+      width: 30px;
+      height: 40px;
+    }
+
+    .standard-printer-message {
+      font-family: $sc-font-family;
+      font-weight: bold;
+      color: #3e7eff;
+      font-size: 0.9em;
+    }
+
+    .standard-printer-selections {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .printer-content-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 20px;
+    }
+
+    .selected-printer-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .printer-option-list-item {
+      display: flex;
+      align-items: center;
+    }
+
+    .printer-details {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .printer-name {
+      font-weight: bold;
+    }
+
+    .printer-icon {
+      height: 50px;
+      width: 50px;
+      margin-right: 10px;
+    }
+
+    .select-printer-arrow {
+      width: 25px;
+      height: 25px;
+    }
+
+    .clickable {
+      cursor: pointer;
+    }
+
+    .selection {
+      padding: 10px;
+    }
+  }
+}

package/src/lib/components/send-method-dialog/style/_material-definition.scss

@@ -0,0 +1 @@
+$cc-co-input-number-picker-border-color: #757575;

package/src/lib/components/send-method-dialog/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../style/mixin";
+
+@include export-module('ione-send-method-dialog-theme') {
+  .ione-send-method-dialog {
+
+  }
+}

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

@@ -0,0 +1,59 @@
+import {Component, Input, OnInit, ViewEncapsulation} from "@angular/core";
+
+@Component({
+  selector: "co-stock-information",
+  template: `
+      <div class="stock-info">
+        <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?.name"></span>
+            </div>
+            <div>
+              <span [textContent]="article?.articleNumber"></span>
+            </div>
+          </div>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="article?.stockStatus"></label>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'STOCK'"></label>
+          <span></span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="article?.stockAvailable"></label>
+          <span>totalAmountAvailable</span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'ECONOMICAL_STOCK'"></label>
+          <span></span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'PHYSICAL_STOCK'"></label>
+          <span></span>
+        </div>
+      </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockInformationComponent {
+
+  public stockStatus: string = "medium";
+  public image: string;
+  public show: boolean = false;
+  public hideOrShowLocationTab: boolean = false;
+
+  @Input()
+  public article: any;
+
+  constructor(
+  ) {
+  }
+
+}