fabrikantencore 2.4.3 → 2.4.4

package/src/app/modules/fabrikantencore/components/fab-flag/fab-flag.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FabFlagComponent } from './fab-flag.component';
+
+describe('FabFlagComponent', () => {
+  let component: FabFlagComponent;
+  let fixture: ComponentFixture<FabFlagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FabFlagComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FabFlagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/fabrikantencore/components/fab-flag/fab-flag.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'fab-flag',
+  templateUrl: './fab-flag.component.html',
+  styleUrls: ['./fab-flag.component.scss']
+})
+export class FabFlagComponent implements OnInit {
+
+  @Input() country: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/app/modules/fabrikantencore/components/fab-header/fab-header.component.html

@@ -0,0 +1,11 @@
+<div class="header-row" *ngIf="ShowHeader()">
+  <app-fab-breadcrumb *ngIf="ShowBreadcrumb()" [showfiltermenubutton]="showfiltermenubutton"></app-fab-breadcrumb>
+  <app-fab-language-select *ngIf="ShowLanguageSelect()"></app-fab-language-select>
+</div>
+<ng-container *ngIf="FabrikantenService.GetDynamicDisplayValues().length > 0">
+  <div class="display-values-box">
+    <div class="display-value-item" *ngFor="let displayvalue of FabrikantenService.GetDynamicDisplayValues()">
+      <span class="display-value-name">{{ displayvalue.name }}</span>: {{ displayvalue.value }}mm
+    </div>
+  </div>
+</ng-container>

package/src/app/modules/fabrikantencore/components/fab-header/fab-header.component.scss

@@ -0,0 +1,24 @@
+.header-row {
+  display: flex;
+}
+
+app-fab-language-select {
+  margin: auto;
+  margin-right: 5px;
+}
+
+app-fab-breadcrumb {
+  width: 100%;
+}
+
+.display-values-box {
+  display: flex;
+}
+
+.display-value-name {
+  text-transform: capitalize;
+}
+
+.display-value-item {
+  padding: 4px;
+}

package/src/app/modules/fabrikantencore/components/fab-header/fab-header.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FabHeaderComponent } from './fab-header.component';
+
+describe('FabHeaderComponent', () => {
+  let component: FabHeaderComponent;
+  let fixture: ComponentFixture<FabHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FabHeaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FabHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/fabrikantencore/components/fab-header/fab-header.component.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectorRef, Component, HostListener, Input, OnInit } from '@angular/core';
+import { FabrikantenService } from '../../services/fabrikanten.service';
+import { MobileService } from '../../services/mobile.service';
+import { TranslateService } from '../../services/translate.service';
+
+@Component({
+  selector: 'app-fab-header',
+  templateUrl: './fab-header.component.html',
+  styleUrls: ['./fab-header.component.scss']
+})
+export class FabHeaderComponent implements OnInit {
+
+  @Input() showfiltermenubutton: boolean;
+
+  constructor(
+    public MobileService: MobileService,
+    public FabrikantenService: FabrikantenService,
+    public TranslateService: TranslateService,
+    private ChangeDetectorRef: ChangeDetectorRef) { }
+
+  ngOnInit(): void {
+    this.MobileService.UpdateScreenSize(window.innerWidth, window.innerHeight, this.ChangeDetectorRef);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    this.MobileService.UpdateScreenSize(window.innerWidth, window.innerHeight, this.ChangeDetectorRef);
+  }
+
+  public ShowHeader(): boolean {
+    return this.ShowBreadcrumb() || this.ShowLanguageSelect();
+  }
+
+  public ShowBreadcrumb(): boolean {
+    if (!this.MobileService.MobileInterface) {
+      if (this.FabrikantenService.FabrikantenViewModel?.selectedProduct == null) {
+        if (this.FabrikantenService.GetSteps().length == 0) {
+          return false;
+        }
+      }
+    }
+
+    return true;
+  }
+
+  public ShowLanguageSelect(): boolean {
+    if (this.FabrikantenService.FabrikantenSettingsViewModel != null) {
+      if (this.FabrikantenService.FabrikantenSettingsViewModel.hideBreadcrumbInIframe) {
+        if (window.self !== window.top) {
+          return false;
+        }
+      }
+    }
+
+    return this.TranslateService.Show();
+  }
+
+}

package/src/app/modules/fabrikantencore/components/fab-iframe/fab-iframe.component.html

@@ -0,0 +1,15 @@
+<div class="main-content">
+  <div class="row">
+    <div class="flexauto">
+      <mat-form-field class="full-width">
+        <mat-label>URL</mat-label>
+        <input matInput [(ngModel)]="URL">
+      </mat-form-field>
+    </div>
+    <div>
+      <button mat-raised-button (click)="Open()">Open</button>
+    </div>
+  </div>
+
+  <iframe [src]="GetSafeURL()" style="width: 100%; height: calc(100vH - 100px);"></iframe>
+</div>

package/src/app/modules/fabrikantencore/components/fab-iframe/fab-iframe.component.scss

@@ -0,0 +1,16 @@
+.main-content
+{
+    padding: 10px;
+}
+
+.full-width {
+    width: 100%;
+}
+
+.row {
+    display: flex;
+}
+
+.flexauto {
+    flex: auto;
+}

package/src/app/modules/fabrikantencore/components/fab-iframe/fab-iframe.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FabIframeComponent } from './fab-iframe.component';
+
+describe('FabIframeComponent', () => {
+  let component: FabIframeComponent;
+  let fixture: ComponentFixture<FabIframeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FabIframeComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FabIframeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/fabrikantencore/components/fab-iframe/fab-iframe.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-fab-iframe',
+  templateUrl: './fab-iframe.component.html',
+  styleUrls: ['./fab-iframe.component.scss']
+})
+export class FabIframeComponent {
+  public URL: string = "";
+  public ActiveURL: string = "";
+
+  constructor(private sanitization: DomSanitizer) {
+    this.URL = window.location.origin;
+    this.ActiveURL = window.location.origin;
+  }
+
+  public Open(): void {
+    this.ActiveURL = this.URL;
+  }
+
+  public GetSafeURL(): SafeResourceUrl {
+    return this.sanitization.bypassSecurityTrustResourceUrl(this.ActiveURL);
+  }
+}

package/src/app/modules/fabrikantencore/components/fab-input/fab-input.component.html

@@ -0,0 +1,32 @@
+<ng-container *ngIf="input.filter && !input.filter.hidden">
+  <ng-container *ngIf="input.filter.filterType == 1">
+    <app-fab-filter [filter]="input.filter"></app-fab-filter>
+  </ng-container>
+  <ng-container *ngIf="input.filter.filterType == 4">
+    <app-fab-filter-fold [filter]="input.filter"></app-fab-filter-fold>
+  </ng-container>
+  <ng-container *ngIf="input.filter.filterType == 2">
+    <app-fab-filter-colour [filter]="input.filter"></app-fab-filter-colour>
+  </ng-container>
+  <ng-container *ngIf="input.filter.filterType == 3">
+    <app-fab-multiselect [filter]="input.filter"></app-fab-multiselect>
+  </ng-container>
+  <ng-container *ngIf="input.filter.filterType == 5">
+    <app-fab-multiselect-fold [filter]="input.filter"></app-fab-multiselect-fold>
+  </ng-container>
+  <ng-container *ngIf="input.filter.filterType == 6">
+    <app-fab-filter-label [filter]="input.filter"></app-fab-filter-label>
+  </ng-container>
+  <ng-container *ngIf="input.filter.filterType == 7">
+    <app-fab-filter-colour-label [filter]="input.filter"></app-fab-filter-colour-label>
+  </ng-container>
+</ng-container>
+
+<ng-container *ngIf="input.range && !input.range.hidden">
+  <ng-container *ngIf="input.range.rangeInputType == 0">
+    <app-fab-range-input [rangeinput]="input.range"></app-fab-range-input>
+  </ng-container>
+  <ng-container *ngIf="input.range.rangeInputType == 1">
+    <app-fab-range-input-fold [rangeinput]="input.range"></app-fab-range-input-fold>
+  </ng-container>  
+</ng-container>

package/src/app/modules/fabrikantencore/components/fab-input/fab-input.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FabInputComponent } from './fab-input.component';
+
+describe('FabInputComponent', () => {
+  let component: FabInputComponent;
+  let fixture: ComponentFixture<FabInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FabInputComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FabInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/fabrikantencore/components/fab-input/fab-input.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { FabrikantenInputViewModel } from '../../swagger/SwaggerClient';
+
+@Component({
+  selector: 'app-fab-input',
+  templateUrl: './fab-input.component.html',
+  styleUrls: ['./fab-input.component.scss']
+})
+export class FabInputComponent {
+
+  _input: FabrikantenInputViewModel;
+  get input(): FabrikantenInputViewModel {
+    return this._input;
+  }
+
+  @Input() set input(value: FabrikantenInputViewModel) {
+    this._input = value;
+  }
+
+
+}

package/src/app/modules/fabrikantencore/components/fab-language-select/fab-language-select.component.html

@@ -0,0 +1,5 @@
+<div class="row" *ngIf="TranslateService.Show()">
+  <div class="item" (click)="SelectLanguage(language)" *ngFor="let language of TranslateService.LanguagesViewModel.languages">
+    <fab-flag [country]="language.flag"></fab-flag>
+  </div>
+</div>

package/src/app/modules/fabrikantencore/components/fab-language-select/fab-language-select.component.scss

@@ -0,0 +1,8 @@
+.row {
+  display: flex;
+}
+
+.item {
+  padding: 2px;
+  cursor: pointer;
+}

package/src/app/modules/fabrikantencore/components/fab-language-select/fab-language-select.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FabLanguageSelectComponent } from './fab-language-select.component';
+
+describe('FabLanguageSelectComponent', () => {
+  let component: FabLanguageSelectComponent;
+  let fixture: ComponentFixture<FabLanguageSelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FabLanguageSelectComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FabLanguageSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/fabrikantencore/components/fab-language-select/fab-language-select.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { TranslateService } from '../../services/translate.service';
+import { LanguageViewModel } from '../../swagger/SwaggerClient';
+
+@Component({
+  selector: 'app-fab-language-select',
+  templateUrl: './fab-language-select.component.html',
+  styleUrls: ['./fab-language-select.component.scss']
+})
+export class FabLanguageSelectComponent implements OnInit {
+
+  constructor(public TranslateService: TranslateService, private ChangeDetectorRef: ChangeDetectorRef) { }
+
+  ngOnInit(): void {
+  }
+
+  public SelectLanguage(language: LanguageViewModel) {
+    this.TranslateService.SelectLanguage(language, this.ChangeDetectorRef);
+  }
+}

package/src/app/modules/fabrikantencore/components/fab-loader/fab-loader.component.html

@@ -0,0 +1,3 @@
+<div class="main-div">
+  <mat-spinner></mat-spinner>
+</div>

package/src/app/modules/fabrikantencore/components/fab-loader/fab-loader.component.scss

@@ -0,0 +1,7 @@
+.main-div {
+  padding-top: 50px;
+
+  mat-spinner {
+    margin: auto;
+  }
+}

package/src/app/modules/fabrikantencore/components/fab-loader/fab-loader.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FabLoaderComponent } from './fab-loader.component';
+
+describe('FabLoaderComponent', () => {
+  let component: FabLoaderComponent;
+  let fixture: ComponentFixture<FabLoaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FabLoaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FabLoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/fabrikantencore/components/fab-loader/fab-loader.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-fab-loader',
+  templateUrl: './fab-loader.component.html',
+  styleUrls: ['./fab-loader.component.scss']
+})
+export class FabLoaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/app/modules/fabrikantencore/components/fab-multiselect/fab-multiselect.component.html

@@ -0,0 +1,9 @@
+<div class="multiselect-name">
+  {{ TranslateService.GetActiveValueFilter(filter.id) }}
+  <span *ngIf="filter.blocksProductSelect || filter.required">*</span>
+</div>
+<ng-container *ngFor="let option of filter.options">
+  <div *ngIf="!option.hidden" class="disableoverflow">
+    <mat-checkbox [checked]="IsChecked(option.id)" (change)="SelectOption(option.id)">{{ TranslateService.GetActiveValueFilterOption(option.id) }}</mat-checkbox>
+  </div>
+</ng-container>

package/src/app/modules/fabrikantencore/components/fab-multiselect/fab-multiselect.component.scss

@@ -0,0 +1,5 @@
+.disableoverflow {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

package/src/app/modules/fabrikantencore/components/fab-multiselect/fab-multiselect.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FabMultiselectComponent } from './fab-multiselect.component';
+
+describe('FabMultiselectComponent', () => {
+  let component: FabMultiselectComponent;
+  let fixture: ComponentFixture<FabMultiselectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FabMultiselectComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FabMultiselectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/fabrikantencore/components/fab-multiselect/fab-multiselect.component.ts

@@ -0,0 +1,43 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { FabrikantenService } from '../../services/fabrikanten.service';
+import { TranslateService } from '../../services/translate.service';
+import { FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel } from '../../swagger/SwaggerClient';
+
+@Component({
+  selector: 'app-fab-multiselect',
+  templateUrl: './fab-multiselect.component.html',
+  styleUrls: ['./fab-multiselect.component.scss']
+})
+export class FabMultiselectComponent {
+  _filter: FabrikantenFilterViewModel;
+  get filter(): FabrikantenFilterViewModel {
+    return this._filter;
+  }
+
+  @Input() set filter(value: FabrikantenFilterViewModel) {
+    this._filter = value;
+
+  }
+
+  constructor(private FabrikantenService: FabrikantenService,
+    public TranslateService: TranslateService,
+    private ChangeDetectorRef: ChangeDetectorRef) {
+
+  }
+
+  public SelectOption(id: number) {
+    this.FabrikantenService.SelectOption(this.filter.id, id, this.ChangeDetectorRef);
+  }
+
+  public IsChecked(id: number) {
+    if (this._filter.selectedOptions != null) {
+      for (var i = 0; i < this._filter.selectedOptions.length; i++) {
+        if (this._filter.selectedOptions[i] == id) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+}

package/src/app/modules/fabrikantencore/components/fab-multiselect-fold/fab-multiselect-fold.component.html

@@ -0,0 +1,21 @@
+<ng-container *ngIf="!filter.hidden">
+  <div class="main-fold">
+    <div class="row selectbar" (click)="ChangeState()">
+      <div class="flexauto namebar">
+        {{ TranslateService.GetActiveValueFilter(filter.id) }}
+        <span *ngIf="filter.blocksProductSelect || filter.required">*</span>
+      </div>
+      <div>
+        <mat-icon *ngIf="!Opened" class="expand_more">add</mat-icon>
+        <mat-icon *ngIf="Opened" class="expand_less">remove</mat-icon>
+      </div>
+    </div>
+    <div class="collapsible-wrapper" [ngClass]="{'collapsed': !Opened}">
+      <div class="collapsible">
+        <div class="content">
+          <app-fab-multiselect [filter]="filter"></app-fab-multiselect>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-container>

package/src/app/modules/fabrikantencore/components/fab-multiselect-fold/fab-multiselect-fold.component.scss

@@ -0,0 +1,61 @@
+app-fab-multiselect-fold {
+  .multiselect-name {
+    display: none;
+  }
+
+  .flexauto {
+    flex: auto;
+  }
+
+  .namebar {
+    font-size: 14px;
+    line-height: 24px;
+  }
+
+  .main-fold {
+    overflow: hidden;
+    border: 1px solid #AAA;
+    border-radius: 2px;
+    margin-bottom: 5px;
+  }
+
+  .selectbar {
+    cursor: pointer;
+    padding: 5px;
+  }
+
+  .content {
+    padding: 5px;
+  }
+
+  .collapsible-wrapper {
+    display: flex;
+    overflow: hidden;
+  }
+
+  .collapsible-wrapper:after {
+    content: '';
+    height: 50px;
+    transition: height 0.3s linear, max-height 0s 0.3s linear;
+    max-height: 0px;
+  }
+
+  .collapsible {
+    transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
+    margin-bottom: 0;
+    max-height: 1000000px;
+  }
+
+  .collapsible-wrapper.collapsed > .collapsible {
+    margin-bottom: -2000px;
+    transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1), visibility 0s 0.3s, max-height 0s 0.3s;
+    visibility: hidden;
+    max-height: 0;
+  }
+
+  .collapsible-wrapper.collapsed:after {
+    height: 0;
+    transition: height 0.3s linear;
+    max-height: 50px;
+  }
+}

package/src/app/modules/fabrikantencore/components/fab-multiselect-fold/fab-multiselect-fold.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FabMultiselectFoldComponent } from './fab-multiselect-fold.component';
+
+describe('FabMultiselectFoldComponent', () => {
+  let component: FabMultiselectFoldComponent;
+  let fixture: ComponentFixture<FabMultiselectFoldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FabMultiselectFoldComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FabMultiselectFoldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});