@colijnit/configurator 1.0.20 → 1.0.21

package/src/app/components/selections/selections.component.ts

@@ -0,0 +1,131 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Selection} from "@colijnit/configuratorapi/build/model/selection";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {ImageCacheService} from '../../services/image-cache.service';
+
+class SelectionViewModel {
+    public selection: Selection;
+    public children: Selection[] = [];
+    public expanded: boolean = false;
+    public thumbnail: string = '';
+}
+
+@Component({
+    selector: "selections",
+    template: `
+        <div class="ione-configurator">
+            <div class="rp-selections-summary">
+                <header class="drawer__header">
+                    <h2 class="mat-title" [textContent]="'Configuratie'"></h2>
+                    <!--<button>-->
+                    <!---->
+                    <!--</button>-->
+                </header>
+                <div class="selections-content">
+                    <ng-container *ngFor="let selectionViewModel of selectionViewModels">
+
+                        <div class="co-summary-line" (click)="selectSelection(selectionViewModel.selection, $event)">
+                            <div class="selection-thumbnail">
+                                <rp-loader *ngIf="selectionViewModel.thumbnail === ''"></rp-loader>
+                                <img visibilityObserver *ngIf="selectionViewModel.thumbnail !== '' && selectionViewModel.thumbnail !== null" class="selection-img" [src]="selectionViewModel.thumbnail">
+                            </div>
+                            <div class="titles">
+                                <div class="title-wrapper">
+                                    <label class="question" [textContent]="selectionViewModel.selection.question"></label>
+                                    <span class="answer" [textContent]="selectionViewModel.selection.answer"></span>
+                                    <div *ngIf="selectionViewModel.children.length > 0 && selectionViewModel.expanded" @showHideChildren>
+                                        <div class="child-selection" *ngFor="let selection of selectionViewModel.children"
+                                             (click)="selectSelection(selection, $event)"
+                                        >
+                                            <label class="question" [textContent]="selection.commercialQuestion"></label>
+                                            <span class="answer" [textContent]="selection.answer"></span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="price-wrapper">
+                                <span class="price-value"></span>
+                            </div>
+
+                            <div class="collapse-wrapper">
+                                <div class="collapse-content">
+                                    <div class="collapse-handle" [class.expanded]="selectionViewModel.expanded"
+                                         *ngIf="selectionViewModel.children.length > 0" (click)="expandClicked(selectionViewModel, $event)"></div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </ng-container>
+                </div>
+            </div>
+        </div>
+    `,
+    styleUrls: [
+        '../../../style/shared.scss'
+    ],
+    animations: [
+        trigger('showHideChildren', [
+            state('void', style({'height': '0'})),
+            state('*', style({'height': '*'})),
+            transition('void <=> *', animate(200))
+        ])
+    ]
+})
+
+export class SelectionsComponent implements OnInit {
+    @Input()
+    public set selections(value: Selection[]) {
+        this._prepareSelections(value);
+        this._loadThumbnails();
+    }
+
+    public selectionViewModels: SelectionViewModel[] = [];
+
+    @Output()
+    public selectionClick: EventEmitter<Selection> = new EventEmitter<Selection>();
+
+    constructor(private _imageCacheService: ImageCacheService) {}
+
+    public ngOnInit(): void {
+
+    }
+
+    public expandClicked(selectionViewModel: SelectionViewModel, mouseEvent: MouseEvent): void {
+        mouseEvent.preventDefault();
+        mouseEvent.stopImmediatePropagation();
+        selectionViewModel.expanded = !selectionViewModel.expanded;
+    }
+
+    public selectSelection(selection: Selection, mouseEvent: MouseEvent): void {
+        mouseEvent.preventDefault();
+        mouseEvent.stopImmediatePropagation();
+        this.selectionClick.next(selection);
+    }
+
+    private async _loadThumbnails(): Promise<void> {
+        if (this.selectionViewModels.length > 0) {
+            this.selectionViewModels.forEach(async (viewModel: SelectionViewModel) => {
+                await this._imageCacheService.getImageForSelectionOrAnswer(viewModel.selection).then((imageSrc: string) => {
+                    viewModel.thumbnail = imageSrc === "" ? null : imageSrc;
+                });
+            });
+        }
+    }
+
+    private _prepareSelections(value: Selection[]): void {
+        this.selectionViewModels.length = 0;
+        let selectionViewModel: SelectionViewModel;
+        value.forEach(s => {
+            if (s.presentationLevel === 1) {
+                selectionViewModel = new SelectionViewModel();
+                selectionViewModel.selection = s;
+                this.selectionViewModels.push(selectionViewModel);
+            } else if (s.presentationLevel > 1) {
+                if (selectionViewModel) {
+                    selectionViewModel.children.push(s);
+                }
+            }
+        });
+    }
+}

package/src/app/components/selections/selections.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {SelectionsComponent} from "./selections.component";
+import {SharedModule} from '../shared/shared.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        SharedModule
+    ],
+    declarations: [
+        SelectionsComponent
+    ],
+    exports: [
+        SelectionsComponent
+    ]
+})
+export class SelectionsModule {
+
+}

package/src/app/components/shared/loader/loader.component.scss

@@ -0,0 +1,33 @@
+:host {
+  user-select: none;
+  pointer-events: none;
+  .loader-wrapper {
+    z-index: 1100; // above dialogs
+    position: absolute;
+    width: 54px;
+    height: 54px;
+    svg {
+      width: 100%;
+      height: 100%;
+      .ripple1 {
+        transform-origin: center;
+        animation: ripple 1.5s infinite;
+      }
+      .ripple2 {
+        transform-origin: center;
+        animation: ripple 1.5s infinite .4s;
+      }
+    }
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

package/src/app/components/shared/loader/loader.component.ts

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'rp-loader',
+  template: `
+    <div class="loader-wrapper">
+      <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" stroke="#3760a1">
+        <g fill="none" fill-rule="evenodd" stroke-width="3">
+          <circle class="ripple1" cx="22" cy="22" r="19">
+          </circle>
+          <circle class="ripple2" cx="22" cy="22" r="19">
+          </circle>
+        </g>
+      </svg>
+    </div>
+  `,
+  styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent {
+}

package/src/app/components/shared/shared.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {LoaderComponent} from './loader/loader.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    LoaderComponent
+  ],
+  exports: [
+    LoaderComponent
+  ]
+})
+export class SharedModule { }

package/src/app/directives/visibility-observer-master.directive.ts

@@ -0,0 +1,71 @@
+// Import the core angular services.
+import {Directive, OnDestroy} from '@angular/core';
+
+@Directive({
+  selector: '[visibilityObserverMaster]'
+})
+export class VisibilityObserverMasterDirective implements OnDestroy {
+
+  private _mapping: Map<Element, Function>;
+  private _observer: IntersectionObserver;
+
+  // I initialize the intersection observer parent directive.
+  constructor() {
+
+    // As each observable child attaches itself to the parent observer, we need to
+    // map Elements to Callbacks so that when an Element's intersection changes,
+    // we'll know which callback to invoke. For this, we'll use an ES6 Map.
+    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.
+          rootMargin: '300px 0px 300px 0px'
+        }
+    );
+
+  }
+
+  // I get called once when the host element is being destroyed.
+  public ngOnDestroy(): void {
+
+    this._mapping.clear();
+    this._observer.disconnect();
+
+  }
+
+  // ---
+  // PUBLIC METHODS.
+  // ---
+
+  // I add the given Element for intersection observation. When the intersection status
+  // changes, the given callback is invoked with the new status.
+  public add(element: HTMLElement, callback: Function): void {
+
+    this._mapping.set(element, callback);
+    this._observer.observe(element);
+
+  }
+
+  // I remove the given Element from intersection observation.
+  public remove(element: HTMLElement): void {
+
+    this._mapping.delete(element);
+    this._observer.unobserve(element);
+
+  }
+
+}

package/src/app/directives/visibility-observer.directive.ts

@@ -0,0 +1,74 @@
+import {Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {VisibilityObserverMasterDirective} from './visibility-observer-master.directive';
+
+@Directive({
+  selector: '[visibilityObserver]',
+  exportAs: 'intersection'
+})
+export class VisibilityObserverDirective implements OnDestroy, OnInit {
+
+  @Input()
+  public observerEnabled: boolean = false;
+
+  public isIntersecting: boolean;
+  // These are just some human-friendly constants to make the HTML template a bit more
+  // readable when being consumed as part of SWTCH/CASE statements.
+  public IS_INTERSECTING: boolean = true;
+  public IS_NOT_INTERSECTING: boolean = false;
+
+  private _elementRef: ElementRef;
+  private _parent: VisibilityObserverMasterDirective;
+
+  // I initialize the intersection observer directive.
+  constructor(
+      parent: VisibilityObserverMasterDirective,
+      elementRef: ElementRef
+  ) {
+
+    this._parent = parent;
+    this._elementRef = elementRef;
+
+    // By default, we're going to assume that the host element is NOT intersecting.
+    // Then, we'll use the IntersectionObserver to asynchronously check for changes
+    // in viewport visibility.
+    this.isIntersecting = false;
+
+  }
+
+  // ---
+  // PUBLIC METHODS.
+  // ---
+
+  // I get called once when the host element is being destroyed.
+  public ngOnDestroy(): void {
+
+    this._parent.remove(this._elementRef.nativeElement);
+    this._elementRef = undefined;
+
+  }
+
+
+  // I get called once after the inputs have been bound for the first time.
+  public ngOnInit(): void {
+
+    // In this demo, instead of using an IntersectionObserver per Element, we're
+    // going to use a shared observer in the parent element. However, we're still
+    // going to use a CALLBACK style approach so that we're only reducing the number
+    // of IntersectionObserver instances, not the number of Function calls.
+    if (this.observerEnabled) {
+      this._parent.add(
+          this._elementRef.nativeElement,
+          (isIntersecting: boolean) => {
+
+            this.isIntersecting = isIntersecting;
+            if (this.isIntersecting) {
+              this._parent.remove(this._elementRef.nativeElement);
+            }
+
+          }
+      );
+    }
+
+  }
+
+}

package/src/app/services/configurator.service.ts

@@ -0,0 +1,86 @@
+import {Injectable, Injector, OnDestroy} from '@angular/core';
+import {Configurator} from '@colijnit/configuratorapi/build/configurator';
+import {Subscription} from 'rxjs';
+import {Selection} from '@colijnit/configuratorapi/build/model/selection';
+import {Answer} from '@colijnit/configuratorapi/build/model/answer';
+import {DataServiceResponseData} from '@colijnit/ioneconnector/build/model/data-service-response-data';
+import {Options} from "@colijnit/ioneconnector/build/model/options";
+import {QuestionAndAnswers} from "@colijnit/configuratorapi/build/model/question-and-answers";
+import {ServiceLocator} from './locator.service';
+import {notNill} from '@colijnit/configuratorapi/build/utils/function/not-nill.function';
+import {NodeType} from '@colijnit/configuratorapi/build/enum/node-type.enum';
+import {isNill} from '@colijnit/configuratorapi/build/utils/function/is-nill.function';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfiguratorService {
+
+  private _configuratorApi: Configurator;
+
+  constructor(private _injector: Injector) {
+    if (!ServiceLocator.injector) {
+      ServiceLocator.injector = _injector;
+    }
+  }
+
+  public initApi(options: Options): void {
+    this._configuratorApi = new Configurator(options);
+  }
+
+  public async initNodeInstance(goodId: number): Promise<DataServiceResponseData> {
+    return await this._configuratorApi.initNodeInstance(goodId);
+  }
+
+  public async setInstanceToConfigure(id: string, showLoader: boolean = false): Promise<DataServiceResponseData> {
+    return await this._configuratorApi.setInstanceToConfigure(id, showLoader);
+  }
+
+  public async getGoodIdFromSku(sku: string, showLoader: boolean = false): Promise<DataServiceResponseData> {
+    return await this._configuratorApi.getGoodIdFromSku(sku, showLoader);
+  }
+
+  public async getArticleQuickSel(goodId: number, showLoader: boolean = false): Promise<DataServiceResponseData> {
+    return await this._configuratorApi.getArticleQuickSel(goodId, showLoader);
+  }
+
+  public async getSelections(showLoader: boolean = false, publicationCode: number = 2): Promise<DataServiceResponseData> {
+    const selections: DataServiceResponseData = await this._configuratorApi.getSelections(showLoader);
+    selections.resultObjects.filter((s: Selection) => {
+      (isNill(s.hierarchicalPublicationCode) || ((s.hierarchicalPublicationCode & publicationCode) > 0)) && (
+          (s.nodeType === NodeType.Question && (((s.questionPublicationCode & publicationCode) > 0) || isNill(s.questionPublicationCode))) ||
+          (s.nodeType === NodeType.Answer && (((s.answerPublicationCode & publicationCode) > 0) || isNill(s.answerPublicationCode))));
+    });
+    return selections;
+  }
+
+  public async getDecos(showLoader: boolean = false): Promise<DataServiceResponseData> {
+    return await this._configuratorApi.getDecos(showLoader);
+  }
+
+  public async getQuestionAndAnswers(showLoader: boolean = false, publicationCode: number = 2): Promise<QuestionAndAnswers> {
+    const questionAndAnswers: QuestionAndAnswers = await this._configuratorApi.getQuestionAndAnswers(showLoader);
+    questionAndAnswers.answers.filter((answer: Answer) => {
+      (notNill(answer.hierarchicalPublicationCode) && (answer.hierarchicalPublicationCode & publicationCode) === 0) ||
+      (answer.type === NodeType.Question && (answer.questionPublicationCode & publicationCode) === 0 && notNill(answer.questionPublicationCode)) ||
+      (answer.type === NodeType.Answer && (answer.publicationCode & publicationCode) === 0 && notNill(answer.publicationCode));
+    });
+    return questionAndAnswers;
+  }
+
+  public async getSingleImage(nodeId: number | string, publication: number, includeMimetype: boolean, thumb: boolean, showLoader: boolean): Promise<DataServiceResponseData> {
+    if (!nodeId) {
+      return null;
+    }
+    return await this._configuratorApi.getSingleImage(nodeId, publication, includeMimetype, thumb, showLoader);
+  }
+
+  public async selectSelection(selection: Selection, showLoader: boolean = false): Promise<DataServiceResponseData> {
+    return await this._configuratorApi.selectSelection(selection, showLoader);
+  }
+
+  public async selectAnswer(answer: Answer, showLoader: boolean = false): Promise<DataServiceResponseData> {
+    return await this._configuratorApi.selectAnswer(answer, showLoader);
+  }
+
+}

package/src/app/services/image-cache.service.ts

@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+import {DataServiceResponseData} from '@colijnit/ioneconnector/build/model/data-service-response-data';
+import {ImageUtils} from '../../utils/image.utils';
+import {Answer} from '@colijnit/configuratorapi/build/model/answer';
+import {Selection} from '@colijnit/configuratorapi/build/model/selection';
+import {ConfiguratorService} from './configurator.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ImageCacheService {
+
+  // Map containing the retrieved images, @number = nodeId, @string = base64 string
+  private _imageCache: Map<number, string> = new Map();
+
+  constructor(private _configuratorService: ConfiguratorService) { }
+
+  private static _handleResponseData(includeMimetype: boolean, thumb: boolean, responseData: DataServiceResponseData): string {
+    if (responseData && responseData.resultObject) {
+      if (responseData.resultObject.filePath !== null && responseData.resultObject.filePath !== "") {
+        return ImageUtils.getFixedImageFilepathUrl(responseData.resultObject.filePath);
+      } else {
+        if (includeMimetype) {
+          return ImageUtils.getDocBodyWithMimeTypeDefinition(responseData.resultObject.fileName,
+              thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody);
+        } else {
+          return thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody;
+        }
+      }
+    } else {
+      return '';
+    }
+  }
+
+  public getImageForSelectionOrAnswer(object: Selection | Answer): Promise<string> {
+    const includeMimeType: boolean = true, thumb: boolean = true;
+    return new Promise((resolve: Function, reject: Function) => {
+      if (object && object.nodeId) {
+        if (!this._imageCache.has(object.nodeId)) {
+          return this._configuratorService.getSingleImage(object.nodeId, 4, includeMimeType, thumb, true)
+              .then((responseData: DataServiceResponseData) => {
+                const base64: string = ImageCacheService._handleResponseData(includeMimeType, thumb, responseData);
+                this._imageCache.set(object.nodeId, base64);
+                resolve(base64);
+              }).catch(() => {
+                  reject();
+              });
+        } else {
+          resolve(this._imageCache.get(object.nodeId));
+        }
+      } else {
+        reject();
+      }
+    });
+  }
+}

package/src/app/services/locator.service.ts

@@ -0,0 +1,6 @@
+import {Injectable, Injector} from '@angular/core';
+
+@Injectable()
+export class ServiceLocator {
+  static injector: Injector = undefined;
+}

package/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

package/src/environments/environment.ts

@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};