fabrikantencore 2.0.5 → 2.0.7

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

@@ -0,0 +1,89 @@
+.card {
+  all: unset;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  background-color: #fafafa;
+  height: 40px;
+  width: 200px;
+  margin: 0 8px 16px;
+  padding: 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  line-height: 24px;
+  cursor: pointer;
+}
+
+.card.card-small {
+  height: 16px;
+  width: 168px;
+}
+
+.card:not(.highlight-card):hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
+}
+
+.card-container .card:not(.highlight-card):hover .material-icons path {
+  fill: rgb(105, 103, 103);
+}
+
+.card.highlight-card {
+  background-color: #1976d2;
+  color: white;
+  font-weight: 600;
+  border: none;
+  width: auto;
+  min-width: 30%;
+  position: relative;
+}
+
+.card.card.highlight-card span {
+  margin-left: 60px;
+}
+
+a,
+a:visited,
+a:hover {
+  color: #1976d2;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #125699;
+}
+
+.terminal {
+  position: relative;
+  width: 80%;
+  max-width: 600px;
+  border-radius: 6px;
+  padding-top: 45px;
+  margin-top: 8px;
+  overflow: hidden;
+  background-color: rgb(15, 15, 16);
+}
+
+.terminal::before {
+  content: "\2022 \2022 \2022";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 4px;
+  background: rgb(58, 58, 58);
+  color: #c2c3c4;
+  width: 100%;
+  font-size: 2rem;
+  line-height: 0;
+  padding: 14px 0;
+  text-indent: 4px;
+}
+
+.terminal pre {
+  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  color: white;
+  padding: 0 1rem 1rem;
+  margin: 0;
+}

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

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

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

@@ -0,0 +1,20 @@
+//import { Component, OnInit, Input } from '@angular/core';
+
+//@Component({
+//  selector: 'fab-button',
+//  templateUrl: './fab-button.component.html',
+//  styleUrls: ['./fab-button.component.scss']
+//})
+
+//export class FabButtonComponent implements OnInit {
+
+//  @Input() text: string; 
+//  @Input() icon: string; 
+//  @Input() clickfunction: () => void;
+
+//  constructor() { }
+
+//  ngOnInit(): void {
+//  }
+
+//}

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

@@ -0,0 +1,10 @@
+<div class="loader" *ngIf="FabrikantenService.Loading">
+  <app-fab-loader></app-fab-loader>
+</div>
+
+<app-fab-header [showfiltermenubutton]="false"></app-fab-header>
+
+<div *ngIf="FabrikantenService.GetFirstOpenCategoryLayer() != null" class="main-block">
+  <fab-category-tile *ngFor="let category of FabrikantenService.GetFirstOpenCategoryLayer().categories" [category]="category"></fab-category-tile>
+</div>
+

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

@@ -0,0 +1,16 @@
+.main-block {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.loader {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  z-index: 20;
+  background-color: rgb(255,255,255,0.7);
+  top: 0px;
+  left: 0px;
+}

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

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

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

@@ -0,0 +1,30 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { FabrikantenService } from '../../services/fabrikanten.service';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '../../services/translate.service';
+
+@Component({
+  selector: 'fab-categories',
+  templateUrl: './fab-categories.component.html',
+  styleUrls: ['./fab-categories.component.scss']
+})
+export class FabCategoriesComponent implements OnInit {
+
+  constructor(
+    public FabrikantenService: FabrikantenService,
+    public TranslateService: TranslateService,
+    private ActivatedRoute: ActivatedRoute,
+    private ChangeDetectorRef: ChangeDetectorRef) {
+    this.TranslateService.ProcessParameters(this.ActivatedRoute);
+
+    if (!this.FabrikantenService.ShowCategories()) {
+      this.FabrikantenService.ResetAllCategories(this.ChangeDetectorRef);
+    }
+  }
+
+  ngOnInit(): void {
+    this.FabrikantenService.LoadFabrikantenViewModel(this.ChangeDetectorRef);
+    this.TranslateService.LoadTranslations(this.ChangeDetectorRef);
+  }
+
+}

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

@@ -0,0 +1,10 @@
+<mat-card *ngIf="!DisplayNoPhoto()" class="tile" (click)="Select()" [style.backgroundImage]="getSafeUrl()">
+  <mat-card-title class="title">
+    {{ TranslateService.GetActiveValueCategory(category.id) }}
+  </mat-card-title>
+</mat-card>
+<mat-card *ngIf="DisplayNoPhoto()" class="tile no-photo" (click)="Select()">
+  <mat-card-title class="title">
+    {{ TranslateService.GetActiveValueCategory(category.id) }}
+  </mat-card-title>
+</mat-card>

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

@@ -0,0 +1,38 @@
+.tile {
+  margin: 5px;
+  width: 150px;
+  height: 250px;
+  cursor: pointer;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+  border: 1px solid #EEE;
+}
+
+.no-photo {
+  background-image: url(./no-photo.png);
+}
+
+.tile:hover {
+  border: 1px solid #000;
+
+  .title {
+      text-decoration: underline;
+  }
+}
+
+.title {
+  background-color: rgb(255,255,255, 0.7);
+  padding: 4px;
+  text-align: center;
+  position: absolute;
+  bottom: 0px;
+  width: calc(100% - 8px);
+  left: 0px;
+  font-size: 16px;
+}
+
+.title:first-letter {
+  text-transform: capitalize;
+}

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

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

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

@@ -0,0 +1,46 @@
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { FabrikantenService } from '../../services/fabrikanten.service';
+import { TranslateService } from '../../services/translate.service';
+import { FabrikantenCategoryViewModel } from '../../swagger/SwaggerClient';
+
+@Component({
+  selector: 'fab-category-tile',
+  templateUrl: './fab-category-tile.component.html',
+  styleUrls: ['./fab-category-tile.component.scss']
+})
+export class FabCategoryTileComponent implements OnInit {
+
+  @Input() category: FabrikantenCategoryViewModel;
+
+  constructor(
+    public FabrikantenService: FabrikantenService,
+    private sanitization: DomSanitizer,
+    private ChangeDetectorRef: ChangeDetectorRef,
+    public TranslateService: TranslateService) { }
+
+  ngOnInit(): void {
+  }
+
+  public Select(): void {
+    this.FabrikantenService.SelectCategory(this.category, this.ChangeDetectorRef);
+  }
+
+  public DisplayNoPhoto(): boolean {
+    var path = this.category.imagePath as string;
+
+    return path == "";
+  }
+
+  public getSafeUrl() {
+
+    var path = this.category.imagePath as string;
+
+    if (path != "") {
+      return this.sanitization.bypassSecurityTrustStyle('url(\'' + (this.category.imagePath as string) + '\')');
+    }
+    else {
+      return "";
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+<div class="row" *ngIf="!filter.hidden">
+  <div class="select">
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label class="select-mat-label">
+      {{ TranslateService.GetActiveValueFilter(filter.id) }}<span *ngIf="filter.blocksProductSelect">*</span>
+      </mat-label>
+      <mat-select [(ngModel)]="SelectedOptionId" (selectionChange)="SelectOption()" [disabled]="IsDisabled()">
+        <mat-option *ngFor="let option of filter.options" [value]="option.id" class="select-mat-option">
+          <ng-container *ngIf="option.colour != null && option.colour != ''">
+            <span [ngStyle]="{'background-color': option.colour}" class="colour-preview">
+              &nbsp;
+              &nbsp;
+            </span>
+          </ng-container>
+          
+          {{ TranslateService.GetActiveValueFilterOption(option.id) }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div class="reset" *ngIf="filter.selectedOption != 0" (click)="ResetSelection()">
+    <mat-icon class="icon-position" [inline]="true">clear</mat-icon>
+  </div>
+</div>

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

@@ -0,0 +1,57 @@
+app-fab-filter {
+  .select-mat-label:first-letter {
+    text-transform: capitalize;
+  }
+
+  .mat-select-min-line:first-letter {
+    text-transform: capitalize;
+  }
+
+  .row {
+    display: flex;
+  }
+
+  .full-width {
+    width: 100%;
+  }
+
+  .icon-position {
+    margin-top: 14px;
+  }
+
+  .select {
+    flex: auto;
+  }
+
+  .reset {
+    cursor: pointer;
+    font-size: 26px;
+  }
+}
+
+.colour-preview {
+  padding: 5px;
+  margin: 2px;
+  border: 1px solid #000;
+}
+
+.select-mat-option {
+  .mat-option-text:first-letter {
+    text-transform: capitalize;
+  }
+}
+
+.mat-select-disabled .mat-select-arrow {
+  display: none;
+}
+
+.mat-select-panel-wrap {
+  top: 15px;
+  position: relative;
+}
+
+.mat-select-panel {
+    max-width: 100% !important;
+}
+
+

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

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

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

@@ -0,0 +1,63 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { FabrikantenService } from '../../services/fabrikanten.service';
+import { TranslateService } from '../../services/translate.service';
+import { FabrikantenFilterViewModel } from '../../swagger/SwaggerClient';
+
+@Component({
+  selector: 'app-fab-filter',
+  templateUrl: './fab-filter.component.html',
+  styleUrls: ['./fab-filter.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class FabFilterComponent implements OnInit {
+  public SelectedOptionId: number;
+
+  _filter: FabrikantenFilterViewModel;
+  get filter(): FabrikantenFilterViewModel {
+    return this._filter;
+  }
+
+  @Input() set filter(value: FabrikantenFilterViewModel) {
+    this._filter = value;
+    this.SelectedOptionId = this._filter.selectedOption;
+
+    if (this.SelectedOptionId == 0) {
+      var options = this._filter.options;
+      if (options != null && options.length == 1) {
+        this.SelectedOptionId = options[0].id;
+      }
+    }
+  }
+
+  @Output() filterchanged: EventEmitter<void> = new EventEmitter<void>();
+
+  constructor(
+    private FabrikantenService: FabrikantenService,
+    public TranslateService: TranslateService,
+    private ChangeDetectorRef: ChangeDetectorRef) { }
+
+  ngOnInit(): void {
+  }
+
+  public SelectOption(): void {
+    this.FabrikantenService.SelectOption(this.filter.id, this.SelectedOptionId, this.ChangeDetectorRef);
+  }
+
+  public ResetSelection(): void {
+    this.FabrikantenService.ResetSelectionFilter(this.filter, this.ChangeDetectorRef);
+  }
+
+  public IsDisabled(): boolean {
+
+    if (this.filter.selectedOption != 0) {
+      return true;
+    }
+
+    if (this.filter.options?.length == 1) {
+      return true;
+    }
+
+    return false;
+  }
+
+}

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

@@ -0,0 +1,23 @@
+<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.FabrikantenViewModel != null">
+  <mat-drawer #drawer [mode]="MobileService.NavMode" [(opened)]="MobileService.NavOpened">
+    <div class="filter-view">
+      <fab-filters-input></fab-filters-input>
+    </div>
+  </mat-drawer>
+  <mat-drawer-content class="view-content">
+    <div class="product-view">
+      <fab-filters-overview></fab-filters-overview>
+    </div>
+  </mat-drawer-content>
+</mat-drawer-container>

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

@@ -0,0 +1,44 @@
+.row {
+  display: flex;
+}
+
+.loader-card {
+  margin: auto;
+  width: 300px;
+}
+
+.loader-subtitle {
+  text-align: center;
+}
+
+.loader-spinner {
+  margin: auto;
+}
+
+.view-container {
+    
+}
+
+.view-content {
+  background-color: #FFF;
+}
+
+.loader {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  z-index: 20;
+  background-color: rgb(255,255,255,0.7);
+  top: 0px;
+  left: 0px;
+}
+
+.filter-view {
+  width: 300px;
+  min-width: 300px;
+  background-color: rgb(250,250,250);
+}
+
+.product-view {
+  flex: auto;
+}

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

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

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

@@ -0,0 +1,41 @@
+import { ChangeDetectorRef, Component, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { BestekService } from '../../services/bestek.service';
+
+import { FabrikantenService } from '../../services/fabrikanten.service';
+import { MobileService } from '../../services/mobile.service';
+import { TranslateService } from '../../services/translate.service';
+
+@Component({
+  selector: 'fab-filters',
+  templateUrl: './fab-filters.component.html',
+  styleUrls: ['./fab-filters.component.scss']
+})
+
+export class FabFiltersComponent {
+
+  constructor(
+    public MobileService: MobileService,
+    public FabrikantenService: FabrikantenService,
+    public BestekService: BestekService,
+    public TranslateService: TranslateService,
+    private ActivatedRoute: ActivatedRoute,
+    private ChangeDetectorRef: ChangeDetectorRef) {
+    this.TranslateService.ProcessParameters(this.ActivatedRoute);
+  }
+
+  ngOnInit() {
+    this.MobileService.UpdateScreenSize(window.innerWidth, window.innerHeight, this.ChangeDetectorRef);
+    this.FabrikantenService.LoadFabrikantenViewModel(this.ChangeDetectorRef);
+    this.TranslateService.LoadTranslations(this.ChangeDetectorRef);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    this.MobileService.UpdateScreenSize(window.innerWidth, window.innerHeight, this.ChangeDetectorRef);
+  }
+
+  public IsLoading(): boolean {
+    return this.FabrikantenService.Loading || this.TranslateService.Loading;
+  }
+}

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

@@ -0,0 +1,13 @@
+<div class="filter-view-margin">
+  <div class="filter-view-header">
+    <div class="filter-view-header-h1">
+      <h1>{{ TranslateService.GetActiveValue("Common", "Filters") }}</h1>
+    </div>
+    <div class="filter-view-header-reset" (click)="ResetAllFilters()">
+      {{ TranslateService.GetActiveValue("Common", "Reset filters") }}
+    </div>
+  </div>
+
+  <app-fab-filter *ngFor="let filterviewmodel of FabrikantenService.FabrikantenViewModel.filters" [filter]="filterviewmodel"></app-fab-filter>
+  <app-fab-range-input *ngFor="let rangeinputviewmodel of FabrikantenService.FabrikantenViewModel.rangeInputs" [rangeinput]="rangeinputviewmodel"></app-fab-range-input>
+</div>

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

@@ -0,0 +1,16 @@
+
+.filter-view-header {
+  display: flex;
+}
+
+.filter-view-header-h1 {
+  flex: auto;
+}
+
+.filter-view-margin {
+  padding: 10px;
+}
+
+.filter-view-header-reset {
+  cursor: pointer;
+}