fabrikantencore 2.4.3 → 2.4.4

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

@@ -0,0 +1,34 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewEncapsulation } 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-fold',
+  templateUrl: './fab-multiselect-fold.component.html',
+  styleUrls: ['./fab-multiselect-fold.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class FabMultiselectFoldComponent {
+  _filter: FabrikantenFilterViewModel;
+  get filter(): FabrikantenFilterViewModel {
+    return this._filter;
+  }
+
+  @Input() set filter(value: FabrikantenFilterViewModel) {
+    this._filter = value;
+
+  }
+
+  public Opened: boolean = false;
+
+  constructor(private FabrikantenService: FabrikantenService,
+    public TranslateService: TranslateService,
+    private ChangeDetectorRef: ChangeDetectorRef) {
+
+  }
+
+  public ChangeState(): void {
+    this.Opened = !this.Opened;
+  }
+}

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

@@ -0,0 +1,21 @@
+<div class="main-window" [ngClass]="{'tinybutton': this.MobileService.MobileInterfaceTiny}">
+  <div *ngIf="FabrikantenService.ShowVariants()" class="multiplevariants">
+    <app-fab-select-bcbproduct></app-fab-select-bcbproduct> 
+  </div>
+  <app-fab-loader *ngIf="BestekService.Loading"></app-fab-loader>
+  <div *ngIf="ShowBestek()">
+    <div *ngIf="!BestekService.Loading">
+
+      <div class="bestek-viewer" #fabProductBestek [innerHTML]="BestekService.GetBestekTekst()">
+      </div>
+
+      <div class="bestek-settings" *ngIf="MobileService.ShowActionMenu()">
+        <mat-card>
+          <mat-card-content>
+            <app-fab-actionmenu [display]="'Bestek'"></app-fab-actionmenu>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,65 @@
+app-fab-product-bestek {
+  .multiplevariants {
+    padding: 10px;
+  }
+
+  .bestek-settings {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: flex;
+  }
+
+  .tinybutton {
+      font-size: 9px;
+  }
+
+  .row-title {
+    flex: auto;
+  }
+
+  .main-window {
+    margin: 10px;
+  }
+
+  .bestek-type-select {
+    text-align: right;
+  }
+
+  .bestek-type-select-mobile {
+    padding-top: 10px;
+  }
+
+  .button {
+    margin: 5px;
+    width: 100%;
+  }
+
+  .bestek-style2 {
+    width: 80px;
+  }
+
+  .bestek-style3 {
+    width: 50px;
+  }
+
+  .bestek-style4 {
+    width: 20px;
+  }
+
+  .bestek-style5 {
+    color: #f00;
+  }
+
+  .bestek-style6 {
+    color: #808080;
+  }
+
+  .bestek-style7 {
+    color: #000;
+  }
+
+  .bestek-style8 {
+    width: 25px;
+  }
+}

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

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

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

@@ -0,0 +1,50 @@
+import { AfterViewInit, ChangeDetectorRef, Component, DoCheck, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatButtonToggleChange } from '@angular/material/button-toggle';
+import { BestekService } from '../../../services/bestek.service';
+import { FabrikantenService } from '../../../services/fabrikanten.service';
+import { MobileService } from '../../../services/mobile.service';
+import { TranslateService } from '../../../services/translate.service';
+
+import {
+  FabrikantenBCBProductViewModel
+} from '../../../swagger/SwaggerClient';
+
+@Component({
+  selector: 'app-fab-product-bestek',
+  templateUrl: './fab-product-bestek.component.html',
+  styleUrls: ['./fab-product-bestek.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class FabProductBestekComponent implements DoCheck {
+
+  @ViewChild('fabProductBestek') fabProductBestek: ElementRef;
+
+  constructor(
+    public MobileService: MobileService,
+    public FabrikantenService: FabrikantenService,
+    public TranslateService: TranslateService,
+    public BestekService: BestekService,
+    public ChangeDetectorRef: ChangeDetectorRef) { }
+
+  ngDoCheck(): void {
+    this.BestekService.fabProductBestek = this.fabProductBestek;
+  }
+
+  public Select(bcbproduct: FabrikantenBCBProductViewModel) {
+
+  }
+
+  public SelectedTabChange(event: MatButtonToggleChange) {
+    this.BestekService.TypeBestek = event.value;
+  }
+
+  public ShowBestek(): boolean {
+    if (!this.FabrikantenService.ShowVariants()) {
+      if (this.BestekService.FabrikantenBestekViewModel != undefined) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+}

package/src/app/modules/fabrikantencore/components/fab-product/fab-product-info/fab-product-info-photo/fab-product-info-photo.component.html

@@ -0,0 +1,15 @@
+<div class="image-container" [ngClass]="{'tinybutton': this.MobileService.MobileInterfaceTiny}">
+  <div class="image-toolbar">
+    <div *ngIf="PhotoService.ShouldDisplayLeft()" (click)="PhotoService.Left()" class="arrow">
+      <mat-icon class="arrow_back">arrow_back</mat-icon>
+    </div>
+    <div class="filler">
+      {{ PhotoService.GetSelectedDescription() }}
+    </div>
+    <div *ngIf="PhotoService.ShouldDisplayRight()" (click)="PhotoService.Right()" class="arrow">
+      <mat-icon class="arrow_forward">arrow_forward</mat-icon>
+    </div>
+  </div>
+
+  <img class="image" src="{{ PhotoService.GetSelectedPhoto() }}" (click)="Open()" />
+</div>

package/src/app/modules/fabrikantencore/components/fab-product/fab-product-info/fab-product-info-photo/fab-product-info-photo.component.scss

@@ -0,0 +1,28 @@
+.image-container {
+  width: 300px;
+  margin: auto;
+}
+
+.image {
+  width: 100%;
+  cursor: pointer;
+}
+
+.tinybutton {
+    width: 100% !important; 
+}
+
+.image-toolbar {
+  display: flex;
+}
+
+.filler {
+  flex: auto;
+  text-align: center;
+  line-height: 24px;
+  font-size: 13px;
+}
+
+.arrow {
+  cursor: pointer;
+}

package/src/app/modules/fabrikantencore/components/fab-product/fab-product-info/fab-product-info-photo/fab-product-info-photo.component.spec.ts

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

package/src/app/modules/fabrikantencore/components/fab-product/fab-product-info/fab-product-info-photo/fab-product-info-photo.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { MobileService } from '../../../../services/mobile.service';
+import { PhotoService } from '../../../../services/photo.service';
+import { FabProductInfoPhotoDialogComponent } from '../fab-product-info-photo-dialog/fab-product-info-photo-dialog.component';
+
+@Component({
+  selector: 'app-fab-product-info-photo',
+  templateUrl: './fab-product-info-photo.component.html',
+  styleUrls: ['./fab-product-info-photo.component.scss']
+})
+export class FabProductInfoPhotoComponent implements OnInit {
+  constructor(public MobileService: MobileService, public PhotoService: PhotoService, public dialog: MatDialog) { }
+
+  ngOnInit(): void {
+  }
+
+  public Open(): void {
+    const mdc = new MatDialogConfig();
+
+    mdc.position = {
+      'top': '100px',
+    };
+
+    var dialogRef = this.dialog.open(FabProductInfoPhotoDialogComponent, mdc);
+  }
+}

package/src/app/modules/fabrikantencore/components/fab-product/fab-product-info/fab-product-info-photo-dialog/fab-product-info-photo-dialog.component.html

@@ -0,0 +1,15 @@
+<div class="image-container">
+  <div class="image-toolbar">
+    <div *ngIf="PhotoService.ShouldDisplayLeft()" (click)="PhotoService.Left()" class="arrow">
+      <mat-icon class="arrow_back">arrow_back</mat-icon>
+    </div>
+    <div class="filler">
+      {{ PhotoService.GetSelectedDescription() }}
+    </div>
+    <div *ngIf="PhotoService.ShouldDisplayRight()" (click)="PhotoService.Right()" class="arrow">
+      <mat-icon class="arrow_forward">arrow_forward</mat-icon>
+    </div>
+  </div>
+
+  <img class="image" src="{{ PhotoService.GetSelectedPhoto() }}" />
+</div>

package/src/app/modules/fabrikantencore/components/fab-product/fab-product-info/fab-product-info-photo-dialog/fab-product-info-photo-dialog.component.scss

@@ -0,0 +1,20 @@
+
+.image {
+  width: 100%;
+  cursor: pointer;
+}
+
+.image-toolbar {
+  display: flex;
+}
+
+.filler {
+  flex: auto;
+  text-align: center;
+  line-height: 24px;
+  font-size: 13px;
+}
+
+.arrow {
+  cursor: pointer;
+}

package/src/app/modules/fabrikantencore/components/fab-product/fab-product-info/fab-product-info-photo-dialog/fab-product-info-photo-dialog.component.spec.ts

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

package/src/app/modules/fabrikantencore/components/fab-product/fab-product-info/fab-product-info-photo-dialog/fab-product-info-photo-dialog.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { PhotoService } from '../../../../services/photo.service';
+
+@Component({
+  selector: 'app-fab-product-info-photo-dialog',
+  templateUrl: './fab-product-info-photo-dialog.component.html',
+  styleUrls: ['./fab-product-info-photo-dialog.component.scss']
+})
+export class FabProductInfoPhotoDialogComponent implements OnInit {
+
+  constructor(public dialogRef: MatDialogRef<FabProductInfoPhotoDialogComponent>, public PhotoService: PhotoService) { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,17 @@
+<div class="description-normal" *ngIf="!MobileService.MobileInterface">
+  <div class="text" [innerHTML]="GetDescription()">
+
+  </div>
+  <div class="photo">
+    <app-fab-product-info-photo></app-fab-product-info-photo>
+  </div>
+</div>
+
+<div class="mobile" *ngIf="MobileService.MobileInterface">
+  <div class="photo">
+    <app-fab-product-info-photo></app-fab-product-info-photo>
+  </div>
+  <div class="text" [innerHTML]="GetDescription()">
+
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+.description-normal {
+  margin: 10px;
+  display: flex;
+
+  .text {
+    flex: auto;
+    margin-right: 10px;
+  }
+}
+
+.mobile {
+    padding: 10px;
+}

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

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

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

@@ -0,0 +1,40 @@
+import { ChangeDetectorRef, Component, HostListener, 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-product-info',
+  templateUrl: './fab-product-info.component.html',
+  styleUrls: ['./fab-product-info.component.scss']
+})
+export class FabProductInfoComponent implements OnInit {
+
+  constructor(
+    public MobileService: MobileService,
+    public TranslateService: TranslateService,
+    private FabrikantenService: FabrikantenService,
+    private ChangeDetectorRef: ChangeDetectorRef) { }
+
+  ngOnInit() {
+    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 GetDescription(): string {
+    var bcbproducts = this.FabrikantenService.FabrikantenViewModel?.selectedProduct?.fabrikantenBCBProductViewModels;
+
+    if (bcbproducts != null) {
+      for (var i = 0; i < bcbproducts.length; i++) {
+        if (bcbproducts[i].description != null)
+          return this.TranslateService.GetActiveValueDescription(bcbproducts[i].id);
+      }
+    }
+
+    return "";
+  }
+}

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

@@ -0,0 +1,77 @@
+<div *ngIf="FabrikantenService.Loading" class="loader">
+  <mat-card class="loader-card">
+    <mat-card-content>
+      <mat-spinner class="loader-spinner" [diameter]="80"></mat-spinner>
+    </mat-card-content>
+    <mat-card-subtitle class="loader-subtitle">
+      {{ TranslateService.GetActiveValue("Common", "Products loading") }}
+    </mat-card-subtitle>
+  </mat-card>
+</div>
+
+<mat-drawer-container class="view-container" *ngIf="FabrikantenService.Loaded">
+  <mat-drawer #drawer [mode]="MobileService.NavMode" [(opened)]="MobileService.NavOpened" *ngIf="FabrikantenService.FabrikantenViewModel != null">
+    <div class="filter-view">
+      <fab-filters-input></fab-filters-input>
+    </div>
+  </mat-drawer>
+  <mat-drawer mode="over" position="end" [(opened)]="MobileService.ActionOpened">
+    <div class="actionwrapper">
+      <app-fab-actionmenu [display]="FabrikantenService.SelectedTab"></app-fab-actionmenu>
+    </div>
+  </mat-drawer>
+  <mat-drawer-content class="view-content">
+    <div #header>
+      <app-fab-header [showfiltermenubutton]="true"></app-fab-header>
+    </div>
+
+    <ng-container *ngIf="FabrikantenService.ShowRequired()">
+      <div class="required-div">{{ TranslateService.GetActiveValue("Common", "Not all required filled") }}</div>
+    </ng-container>
+
+    <ng-container *ngIf="!FabrikantenService.ShowRequired()">
+      <div [style.height]="Height" *ngIf="FabrikantenService.FabrikantenViewModel != null">
+        <mat-tab-group class="view-container" [selectedIndex]="FabrikantenService.SelectedTabIndex" (selectedTabChange)="SelectedTabChange($event)">
+          <mat-tab label="Informatie" *ngIf="ShowInformation()">
+            <ng-template mat-tab-label>
+              <span>{{ TranslateService.GetActiveValue("Common", "Information") }}</span>
+            </ng-template>
+            <app-fab-product-info></app-fab-product-info>
+          </mat-tab>
+          <mat-tab label="3D" *ngIf="Show3D()">
+            <ng-template mat-tab-label>
+              <span>{{ TranslateService.GetActiveValue("Common", "3D") }}</span>
+            </ng-template>
+            <app-fab-webgl-viewer></app-fab-webgl-viewer>
+          </mat-tab>
+          <mat-tab label="2D" *ngIf="Show2D()" style="height: 100%;">
+            <ng-template mat-tab-label>
+              <span>{{ TranslateService.GetActiveValue("Common", "2D") }}</span>
+            </ng-template>
+            <app-fab-svg-viewer></app-fab-svg-viewer>
+          </mat-tab>
+          <mat-tab label="Bestek" *ngIf="TranslateService.ShowSpecification()">
+            <ng-template mat-tab-label>
+              <span>{{ TranslateService.GetActiveValue("Common", "Specification") }}</span>
+            </ng-template>
+            <app-fab-product-bestek></app-fab-product-bestek>
+          </mat-tab>
+          <mat-tab label="Texture" *ngIf="FabrikantenService.ShowTexture()">
+            <ng-template mat-tab-label>
+              <span>{{ TranslateService.GetActiveValue("Common", "Texture") }}</span>
+            </ng-template>
+            <app-fab-texture></app-fab-texture>
+          </mat-tab>
+          <mat-tab label="Toebehoren" *ngIf="FabrikantenService.ShowToebehoren()">
+            <ng-template mat-tab-label>
+              <span>{{ TranslateService.GetActiveValue("Common", "Toebehoren") }}</span>
+            </ng-template>
+            <app-fab-toebehoren></app-fab-toebehoren>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+    </ng-container>
+  </mat-drawer-content>
+</mat-drawer-container>
+
+

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

@@ -0,0 +1,70 @@
+app-fab-product {
+  .tabs {
+    height: 100%;
+  }
+
+  .required-div {
+    padding: 40px;
+  }
+
+  .row {
+    display: flex;
+  }
+
+  .loader-card {
+    margin: auto;
+    width: 300px;
+  }
+
+  .loader-subtitle {
+    text-align: center;
+  }
+
+  .actionwrapper {
+    width: 250px;
+    padding: 20px;
+  }
+
+  .loader-spinner {
+    margin: auto;
+  }
+
+  .view-container {
+    height: 100%;
+  }
+
+  .view-content {
+    background-color: #FFF;
+  }
+
+  .loader {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    z-index: 20;
+    background-color: rgb(255,255,255,0.7);
+    top: 0px;
+    left: 0px;
+  }
+
+  .filter-view {
+    height: 100%;
+    width: 300px;
+    min-width: 300px;
+    background-color: rgb(250,250,250);
+  }
+
+  .product-view {
+    flex: auto;
+  }
+
+  .mat-drawer-inner-container {
+    overflow-y: scroll;
+  }
+}
+
+.mat-tab-body-wrapper {
+  height: 100%;
+}

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

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