@colijnit/transaction 12.1.77 → 12.1.78

package/projects/transaction/src/lib/component/core/base/transaction-search-tile-base.component.ts

@@ -0,0 +1,30 @@
+import { Directive, EventEmitter, HostBinding, Input, Output } from "@angular/core";
+import { TransactionSearchView } from "@colijnit/transactionapi/build/model/transaction-search-view.bo";
+import { Icon } from "../../../enum/icon.enum";
+import { IconCacheService } from "../../../service/icon-cache.service";
+
+@Directive()
+export abstract class TransactionSearchTileBaseComponent {
+  public readonly icons: typeof Icon = Icon;
+
+  @Input()
+  public transaction: TransactionSearchView;
+
+  @Output()
+  public transactionClick: EventEmitter<TransactionSearchView> = new EventEmitter<TransactionSearchView>();
+
+
+  @HostBinding("class.co-transaction-search-tile-content")
+  public showClass(): boolean {
+    return true;
+  }
+
+  constructor(
+    public iconCacheService: IconCacheService
+  ) {
+  }
+
+  public onTransactionClick(transaction: TransactionSearchView): void {
+    this.transactionClick.emit(transaction);
+  }
+}

package/projects/transaction/src/lib/component/core/characteristic-answer/characteristic-answer.component.ts

@@ -0,0 +1,104 @@
+import {Component, EventEmitter, Input, Output, ViewChild} from "@angular/core";
+import {CoDialogComponent} from "@colijnit/corecomponents_v12";
+import {TransactionLineCharacteristicChoice} from "@colijnit/transactionapi/build/model/transactionLineCharacteristicChoice.bo";
+import {DictionaryService} from "../../../service/dictionary.service";
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: "characteristic-answer",
+  template: `
+    <co-dialog
+      #characteristic *ngIf="showDialog"
+      [showCloseIcon]="false"
+    >
+      <ng-container>
+        <div>
+          <div class="characteristic-header">
+          <span  class="characteristic-title"
+                 [textContent]="getTranslationWithColon('CHARACTERISTIC_QUESTION')"
+          ></span>
+          </div>
+          <div class="characteristic-header">
+            <span [textContent]="question | localize"></span>
+          </div>
+          <div *ngIf="characteristicOptions" class="npm characteristic-options">
+            <co-input-combo-box [(model)]="value"
+                                [collection]="characteristics"
+                                [fields]="characteristicsFields"
+                                [placeholder]="'VALUE' | localize"
+                                [required]="true"
+            ></co-input-combo-box>
+          </div>
+          <div *ngIf="!characteristicOptions" class="characteristic-value">
+            <co-input-text
+              [(model)]="value"
+              [placeholder]="'VALUE' | localize "
+              required
+            ></co-input-text>
+          </div>
+        </div>
+      </ng-container>
+
+      <ng-container footer>
+        <div class="flex-center">
+          <co-button [label]="'OK' | localize" (click)="onCharacteristicOkClick()"></co-button>
+        </div>
+      </ng-container>
+    </co-dialog>
+    <ng-container header>
+      <div>
+          <span class="characteristic-title"
+                [textContent]="getTranslationWithColon('ARTICLE')"
+          ></span>
+        <span [textContent]="title"></span>
+      </div>
+    </ng-container>
+  `,
+  styleUrls: ["./characteristic-answer.component.scss"]
+})
+export class CharacteristicAnswerComponent {
+  @ViewChild("characteristic")
+  public characteristicDialog: CoDialogComponent;
+
+  @Input()
+  public title: string = "";
+
+  @Input()
+  public question: string = "";
+
+  @Output()
+  public readonly okClick: EventEmitter<string> = new EventEmitter<string>();
+
+  public get characteristicOptions(): boolean {
+    return this.characteristics.length > 0;
+  }
+  public value: string;
+
+  public characteristics: TransactionLineCharacteristicChoice[] = [];
+
+  public characteristicsCodes: TransactionLineCharacteristicChoice[] = [];
+  public characteristicsFields: Object = { text: "value", value: "value" };
+
+  public showDialog: boolean = false;
+
+  constructor(
+    private _dictionaryService: DictionaryService,
+  ) { }
+
+  public getTranslationWithColon(text: string): string {
+    return this._dictionaryService.get(text) + ":";
+  }
+
+  public open(): void {
+    // this.characteristicDialog.open();
+  }
+
+  public close(): void {
+    // this.characteristicDialog.close();
+  }
+
+  public async onCharacteristicOkClick(): Promise<void> {
+    this.close();
+    this.okClick.emit(this.value);
+  }
+}

package/projects/transaction/src/lib/component/core/core.module.ts

@@ -0,0 +1,47 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {ImageDisplayComponent} from "./image-display/image-display.component";
+import {IconComponent} from "./icon/icon.component";
+import {CustomerGroupsComponent} from "./relation/customer-groups.component";
+import {ButtonModule, CoDialogModule, InputCheckboxModule, InputComboBoxModule, InputTextModule} from "@colijnit/corecomponents_v12";
+import {StockStatusIndicatorComponent} from "./stock-status-indicator/stock-status-indicator.component";
+import {ConfirmationDialogModule} from "../confirmation-dialog/confirmation-dialog.module";
+import {PipeModule} from "../../pipe/pipe.module";
+import {CharacteristicAnswerModule} from "./base/components/characteristic-answer/characteristic-answer.module";
+import {WarehouseModule} from "./base/components/warehouse/warehouse.module";
+import {LazyRenderMasterDirective} from "./directive/lazy-render-master.directive";
+import {LazyRenderDirective} from "./directive/lazy-render.directive";
+import {ToastModule} from "../toast/toast.module";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    InputComboBoxModule,
+    CoDialogModule,
+    ButtonModule,
+    ConfirmationDialogModule,
+    PipeModule,
+    InputTextModule,
+    InputCheckboxModule,
+    CharacteristicAnswerModule,
+    WarehouseModule,
+    ToastModule
+  ],
+  declarations: [
+    ImageDisplayComponent,
+    IconComponent,
+    CustomerGroupsComponent,
+    StockStatusIndicatorComponent,
+    LazyRenderMasterDirective,
+    LazyRenderDirective
+  ],
+  exports: [
+    ImageDisplayComponent,
+    IconComponent,
+    CustomerGroupsComponent,
+    StockStatusIndicatorComponent,
+    LazyRenderMasterDirective,
+    LazyRenderDirective
+  ]
+})
+export class CoreModule { }

package/projects/transaction/src/lib/component/core/directive/lazy-render-master.directive.ts

@@ -0,0 +1,47 @@
+// Import the core angular services.
+import {Directive, ElementRef, OnDestroy} from "@angular/core";
+
+@Directive({
+  selector: '[lazyRenderMaster]'
+})
+export class LazyRenderMasterDirective implements OnDestroy {
+
+  private _mapping: Map<Element, Function>;
+  private _observer: IntersectionObserver;
+
+  constructor(private _element: ElementRef) {
+    this._mapping = new Map();
+    this._observer = new IntersectionObserver(
+      (entries: IntersectionObserverEntry[]) => {
+        for (const entry of entries) {
+          const callback = this._mapping.get(entry.target);
+          if (callback) {
+            callback(entry.isIntersecting);
+          }
+        }
+      },
+      {
+        // This classifies the "intersection" as being a bit outside the
+        // viewport. The intent here is give the elements a little time to react
+        // to the change before the element is actually visible to the user.
+        // root: this._element.nativeElement,
+        rootMargin: '700px 0px 700px 0px'
+      }
+    );
+  }
+
+  public ngOnDestroy(): void {
+    this._mapping.clear();
+    this._observer.disconnect();
+  }
+
+  public add(element: HTMLElement, callback: Function): void {
+    this._mapping.set(element, callback);
+    this._observer.observe(element);
+  }
+
+  public remove(element: HTMLElement): void {
+    this._mapping.delete(element);
+    this._observer.unobserve(element);
+  }
+}

package/projects/transaction/src/lib/component/core/directive/lazy-render.directive.ts

@@ -0,0 +1,37 @@
+import {Directive, ElementRef, OnDestroy, OnInit} from "@angular/core";
+import {LazyRenderMasterDirective} from "./lazy-render-master.directive";
+
+@Directive({
+  selector: '[lazyRender]',
+  exportAs: 'lazyRender'
+})
+export class LazyRenderDirective implements OnDestroy, OnInit {
+
+  public isShowing: boolean;
+
+  private _elementRef: ElementRef;
+  private _parent: LazyRenderMasterDirective;
+
+  constructor(
+    parent: LazyRenderMasterDirective,
+    elementRef: ElementRef
+  ) {
+    this._parent = parent;
+    this._elementRef = elementRef;
+    this.isShowing = false;
+  }
+
+  public ngOnDestroy(): void {
+    this._parent.remove(this._elementRef.nativeElement);
+    this._elementRef = undefined;
+  }
+
+  public ngOnInit(): void {
+    this._parent.add(
+      this._elementRef.nativeElement,
+      (isIntersecting: boolean) => {
+        this.isShowing = isIntersecting;
+      }
+    );
+  }
+}

package/projects/transaction/src/lib/component/core/directive/template-wrapper.directive.ts

@@ -0,0 +1,72 @@
+import {Directive, Input, OnChanges, OnDestroy, SimpleChange, SimpleChanges, TemplateRef, ViewContainerRef, ViewRef} from "@angular/core";
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: "[templateWrapper]"
+})
+export class TemplateWrapperDirective implements OnDestroy, OnChanges {
+  @Input()
+  public templateWrapper: TemplateRef<any> | null = null;
+
+  @Input()
+  public templateWrapperContext: Object | null = null;
+
+  private _viewRef: ViewRef;
+
+  constructor(protected viewContainer: ViewContainerRef) {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const recreateView: boolean = this._shouldRecreateView(changes);
+
+    if (recreateView) {
+      if (this._viewRef) {
+        this.viewContainer.remove(this.viewContainer.indexOf(this._viewRef));
+      }
+
+      if (this.templateWrapper) {
+        this._viewRef = this.viewContainer.createEmbeddedView(
+          this.templateWrapper, this.templateWrapperContext);
+      }
+    } else {
+      if (this._viewRef && this.templateWrapperContext) {
+        this._updateExistingContext(this.templateWrapperContext);
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this._viewRef) {
+      this.viewContainer.remove(this.viewContainer.indexOf(this._viewRef));
+      this._viewRef = undefined;
+    }
+    this.templateWrapper = undefined;
+  }
+
+  private _shouldRecreateView(changes: SimpleChanges): boolean {
+    const ctxChange: any = changes["templateWrapperContext"];
+    return !!changes["templateWrapper"] || (ctxChange && this._hasContextShapeChanged(ctxChange));
+  }
+
+  private _hasContextShapeChanged(ctxChange: SimpleChange): boolean {
+    const prevCtxKeys: any = Object.keys(ctxChange.previousValue || {});
+    const currCtxKeys: any = Object.keys(ctxChange.currentValue || {});
+
+    if (prevCtxKeys.length === currCtxKeys.length) {
+      for (const propName of currCtxKeys) {
+        if (prevCtxKeys.indexOf(propName) === -1) {
+          return true;
+        }
+      }
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  private _updateExistingContext(ctx: Object): void {
+    for (const propName of Object.keys(ctx)) {
+      (<any>this._viewRef).context[propName] = (<any>this.templateWrapperContext)[propName];
+    }
+  }
+}

package/projects/transaction/src/lib/component/core/enum/app-popup-button-type.enum.ts

@@ -0,0 +1,9 @@
+export enum AppPopupButtonType {
+  Ok,
+  Open,
+  Save,
+  Cancel,
+  Yes,
+  No,
+  NoButton
+}

package/projects/transaction/src/lib/component/core/enum/app-popup-type.enum.ts

@@ -0,0 +1,6 @@
+export enum AppPopupType {
+  Error,
+  Warning,
+  Information,
+  Confirmation
+}

package/projects/transaction/src/lib/component/core/icon/icon.component.ts

@@ -0,0 +1,33 @@
+import {Component, HostBinding, Input, OnDestroy} from "@angular/core";
+import {SafeHtml} from "@angular/platform-browser";
+import {IconCacheService} from "../../../service/icon-cache.service";
+import {Icon} from "../../../enum/icon.enum";
+
+@Component({
+  selector: "icon",
+  template: "",
+  styleUrls: [
+    "./icon.component.scss"
+  ]
+})
+export class IconComponent implements OnDestroy {
+
+  @Input()
+  public set icon(icon: Icon) {
+    this._setSvg(icon);
+  }
+
+  @HostBinding("innerHtml")
+  public svg?: SafeHtml;
+
+  constructor(private _iconCacheService: IconCacheService) {
+  }
+
+  ngOnDestroy(): void {
+    this.svg = undefined;
+  }
+
+  private _setSvg(icon: Icon): void {
+    this.svg = this._iconCacheService.getIcon(icon);
+  }
+}

package/projects/transaction/src/lib/component/core/image-display/image-display.component.ts

@@ -0,0 +1,27 @@
+import {Component, HostBinding, Input, ViewEncapsulation} from "@angular/core";
+
+@Component({
+  selector: "co-image-display",
+  template: `
+    <img class="image" *ngIf="!!model" [src]="model">
+    <div class="no-image" *ngIf="!model">
+      <div class="img"></div>
+      <div class="no-image-label" [textContent]="label | localize"></div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class ImageDisplayComponent {
+  // Image data URI string. Meant for direct use in [src] attribute of an <img> tag.
+  @Input()
+  public model: string;
+
+  // The (localized) text to show when there is no image. Defaults to 'NO_IMAGE'.
+  @Input()
+  public label: string = "NO_IMAGE";
+
+  @HostBinding('class.co-image-display')
+  public showClass() {
+    return true;
+  }
+}

package/projects/transaction/src/lib/component/core/relation/customer-groups.component.ts

@@ -0,0 +1,47 @@
+import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import {TransactionConnectorService} from "../../../service/transaction-connector.service";
+import {CustomerGroup} from "@colijnit/transactionapi/build/model/customer-group.bo";
+
+@Component({
+  selector: "relation-customer-groups",
+  template: `
+    <co-input-combo-box [model]="model"
+                        [readonly]="readonly"
+                        (modelChange)="modelChange.emit($event)"
+                        [collection]="customerGroups"
+                        [fields]="fields"
+                        [placeholder]="'CUSTOMER_GROUP' | localize"
+                        [required]="required"
+    ></co-input-combo-box>
+  `,
+  styleUrls: [
+    './relation-customer-groups.component.scss'
+  ]
+})
+export class CustomerGroupsComponent implements OnInit {
+
+  @Input()
+  public readonly: boolean = false;
+
+  @Input()
+  public required: boolean = false;
+
+  @Input()
+  public model: string;
+
+  @Output()
+  public modelChange: EventEmitter<string> = new EventEmitter<string>();
+
+  public customerGroups: CustomerGroup[] = [];
+  public fields: Object = { text: "naam", value: "groepsnummer" };
+
+  public constructor(
+    private _connector: TransactionConnectorService
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    this._connector.getCustomerGroups().then((groups: CustomerGroup[]) => {
+      this.customerGroups = groups;
+    });
+  }
+}

package/projects/transaction/src/lib/component/core/stock-status-indicator/stock-status-indicator.component.ts

@@ -0,0 +1,25 @@
+import {Component, Input} from "@angular/core";
+import {StockStatus} from "@colijnit/transactionapi/build/enum/refcode/stock-status.enum";
+
+@Component({
+  selector: "stock-status-indicator",
+  template: `
+        <div [class]="stockClass">
+            <div class="square-1"></div>
+            <div class="square-2"></div>
+            <div class="square-3"></div>
+        </div>
+    `,
+  styleUrls: [
+    "./stock-status-indicator.component.scss"
+  ]
+})
+// Component that visually shows a stock status with three colored boxes.
+export class StockStatusIndicatorComponent {
+  @Input()
+  public model: StockStatus;
+
+  public get stockClass(): string {
+    return this.model;
+  }
+}

package/projects/transaction/src/lib/component/delivery-type-tile/delivery-type-tile.component.ts

@@ -0,0 +1,48 @@
+import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from "@angular/core";
+import {DeliveryMethod} from "@colijnit/transactionapi/build/model/delivery-method.bo";
+
+@Component({
+  selector: "co-delivery-type-tile",
+  template: `
+    <co-tile [selected]="selected" (selectedChange)="selectedChange.emit(method)">
+      <div class="delivery-type-content-wrapper">
+        <div class="delivery-type-title" [textContent]="method.description"></div>
+        <div class="delivery-type-icon">
+          <!--
+                    <icon [icon]="method.icon"></icon>
+          -->
+        </div>
+        <div *ngIf="method.factor" class="delivery-type-price" [textContent]="method.factor | priceDisplay"></div>
+      </div>
+    </co-tile>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class DeliveryTypeTileComponent {
+
+  @Input()
+  public set selected(value: boolean) {
+    this._selected = value;
+    // if (this._selected) {
+    //   this.selectedChange.emit(this.method);
+    // }
+  }
+
+  public get selected(): boolean {
+    return this._selected;
+  }
+
+  @Input()
+  public method: DeliveryMethod = new DeliveryMethod();
+
+  @Output()
+  public selectedChange: EventEmitter<DeliveryMethod> = new EventEmitter<DeliveryMethod>();
+
+  @HostBinding("class.co-delivery-type-tile")
+  public showClass(): boolean {
+    return true;
+  }
+
+  private _selected: boolean = false;
+
+}

package/projects/transaction/src/lib/component/delivery-type-tile/delivery-type-tile.module.ts

@@ -0,0 +1,25 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {CoreModule} from "../core/core.module";
+import {DeliveryTypeTileComponent} from "./delivery-type-tile.component";
+import {InputRadioButtonModule, PriceDisplayPipeModule} from "@colijnit/corecomponents_v12";
+import {TileModule} from "../tile/tile.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule,
+        InputRadioButtonModule,
+        PriceDisplayPipeModule,
+        TileModule
+    ],
+  declarations: [
+    DeliveryTypeTileComponent
+  ],
+  exports: [
+    DeliveryTypeTileComponent
+  ]
+})
+export class DeliveryTypeTileModule {
+
+}

package/projects/transaction/src/lib/component/dialog/catalog/dialog-catalog/dialog-catalog.component.ts

@@ -0,0 +1,53 @@
+import {Component, EventEmitter, HostBinding, Input, OnInit, Output, ViewEncapsulation} from "@angular/core";
+import {ArticleExtended} from "@colijnit/articleapi/build/model/article-extended.bo";
+import {TransactionService} from "../../../../service/transaction.service";
+
+@Component({
+  selector: "co-dialog-catalog",
+  template: `
+    <co-dialog (closeClick)="closeClick.emit($event)">
+      <app-ione-catalog-navigation *ngIf="showNavigation"></app-ione-catalog-navigation>
+      <app-ione-catalog
+        [settings]="catalogSettings"
+        [parameters]="parameters"
+        (onArticleClick)="articleClicked.emit($event)"
+      ></app-ione-catalog>
+    </co-dialog>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class DialogCatalogComponent implements OnInit {
+
+  @Input()
+  public options: any;
+
+  @Input()
+  public parameters: any;
+
+  @Input()
+  public showNavigation: boolean = true;
+
+  @Output()
+  public closeClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  @Output()
+  public articleClicked: EventEmitter<ArticleExtended> = new EventEmitter<ArticleExtended>();
+
+  @HostBinding("class.co-dialog-catalog")
+  public showClass() {
+    return true;
+  }
+
+  public catalogSettings: any;
+
+  constructor(private _transactionService: TransactionService) {
+  }
+
+  ngOnInit(): void {
+    this.catalogSettings = this._transactionService.options.options;
+    if (this.catalogSettings) {
+      this.catalogSettings.options = this.options;
+    }
+  }
+
+}

package/projects/transaction/src/lib/component/dialog/catalog/dialog-catalog/dialog-catalog.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {DialogCatalogComponent} from "./dialog-catalog.component";
+import {CoDialogModule} from "@colijnit/corecomponents_v12";
+import {IoneCatalogModule} from "@colijnit/catalog";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoDialogModule,
+        IoneCatalogModule
+    ],
+  declarations: [
+    DialogCatalogComponent
+  ],
+  exports: [
+    DialogCatalogComponent
+  ]
+})
+export class DialogCatalogModule {
+}