fabrikantencore 2.4.1 → 2.4.4

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

@@ -0,0 +1,72 @@
+<div class="filter-name">
+  <div class="flexauto">
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>Name</mat-label>
+      <input matInput [(ngModel)]="filter.name">
+    </mat-form-field>
+  </div>
+  <div class="save-div">
+    <button mat-raised-button (click)="Save()">Save</button>
+  </div>
+</div>
+<div>
+  <div class="filter-name">
+    <div class="flexauto">
+      Requires
+    </div>
+    <button mat-raised-button (click)="RequireFilter()">Filter</button>
+    <button mat-raised-button (click)="RequireFilterOption()">FilterOption</button>
+  </div>
+
+  <div *ngFor="let option of filter.requiresFilterOptions" class="required-option" [ngClass]="{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }">
+    {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}
+    <button mat-raised-button (click)="RemoveRequireFilterOption(option)">Remove</button>
+  </div>
+  <div *ngFor="let filter of filter.requiresFilters" class="required-option">
+    {{ filter.requiredFilterName }}
+    <button mat-raised-button>Remove</button>
+  </div>
+</div>
+<div>
+  <button mat-raised-button (click)="Sort()">Sort</button>
+</div>
+<div class="filter-options-container">
+  <div cdkDropList class="input-list" (cdkDropListDropped)="drop($event)">
+    <div class="input-item" *ngFor="let option of GetFilterOptions()" cdkDrag>
+      <span [ngClass]="{'selected': option.id == FilterOptionViewModel?.id }">
+        {{ option.name }}
+      </span>
+
+      <button (click)="Open(option)">Select</button>
+    </div>
+  </div>
+</div>
+
+<mat-card *ngIf="FilterOptionViewModel != null">
+  <mat-card-content>
+    <div class="displayflex">
+      <div class="filter-option-name flexauto">
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>Name (#{{ FilterOptionViewModel.id }})</mat-label>
+          <input matInput [(ngModel)]="FilterOptionViewModel.name">
+        </mat-form-field>
+      </div>
+      <button mat-raised-button (click)="SaveFilterOption(FilterOptionViewModel)">Save</button>
+      <button mat-raised-button (click)="RemoveFilterOption(FilterOptionViewModel)">Remove</button>
+    </div>
+    <div>
+      <div class="filter-name">
+        <div class="flexauto">
+          Requires
+        </div>
+        <button mat-raised-button (click)="RequireFilterOptionFilterOption()">FilterOption</button>
+      </div>
+
+      <div *ngFor="let option of FilterOptionViewModel.required" class="required-option">
+        {{ option.filterName }}: {{ option.filterOptionName }}
+        <button mat-raised-button (click)="RemoveRequireFilterOptionFilterOption(option)">Remove</button>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
+

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

@@ -0,0 +1,111 @@
+.displayflex {
+  display: flex;
+  gap: 10px;
+}
+
+.save-div {
+    padding-left: 10px;
+}
+
+.required-option {
+  border: 1px solid #000;
+  border-radius: 2px;
+  padding: 2px;
+  margin: 2px;
+}
+
+.AND {
+  border-color: #F00;
+}
+
+.OR {
+  border-color: #0F0;
+}
+
+.filter-row {
+  font-size: 20px;
+  line-height: 30px;
+  margin-bottom: 10px;
+}
+
+.flexauto {
+  flex: auto;
+}
+
+.main-content {
+  padding: 10px;
+}
+
+.filter-name {
+  font-size: 20px;
+  padding: 10px;
+  border-bottom: 1px solid #000;
+  display: flex;
+}
+
+.filter-option:hover {
+  background-color: grey;
+}
+
+.filter-options-container {
+  border: 1px solid #000;
+  padding: 10px;
+  margin: 10px;
+}
+
+.filter-option {
+  padding: 5px;
+  border-bottom: 1px solid #000;
+  display: flex;
+  gap: 5px;
+}
+
+.filter-option-name {
+  flex: auto;
+  line-height: 30px;
+  font-size: 20px;
+}
+
+.input-list {
+  border: solid 1px #ccc;
+  display: block;
+  background: white;
+  border-radius: 4px;
+}
+
+.input-item {
+  padding: 5px 10px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: white;
+  font-size: 14px;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.input-item:last-child {
+  border: none;
+}
+
+.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+

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

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

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

@@ -0,0 +1,249 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { FilterOptionFilterOptionRequiredViewModel, FilterOptionRequiredViewModel, FilterOptionViewModel, FiltersApiClient, FilterViewModel, MoveFilterRequest, SetFilterOptionRequiredRequest, SetFilterRequiredRequest } from '../../../swagger/SwaggerClient';
+import { BeheerSelectFilterDialogComponent } from '../beheer-select-filter-dialog/beheer-select-filter-dialog.component';
+import { BeheerSelectFilteroptionDialogComponent } from '../beheer-select-filteroption-dialog/beheer-select-filteroption-dialog.component';
+
+@Component({
+  selector: 'app-beheer-filter',
+  templateUrl: './beheer-filter.component.html',
+  styleUrls: ['./beheer-filter.component.scss']
+})
+export class BeheerFilterComponent {
+  @Input() filter: FilterViewModel;
+
+  @Output() reload: EventEmitter<void> = new EventEmitter<void>();
+
+  public FilterOptionViewModel: FilterOptionViewModel | null = null;
+
+  constructor(private FiltersApiClient: FiltersApiClient,
+    public dialog: MatDialog,
+    private ChangeDetectorRef: ChangeDetectorRef) { }
+
+  drop(event: CdkDragDrop<string[]>) {
+    if (this.filter.filterOptionViewModels != null) {
+      moveItemInArray(this.filter.filterOptionViewModels, event.previousIndex, event.currentIndex);
+
+      for (var i = 0; i < this.filter.filterOptionViewModels.length; i++) {
+        this.filter.filterOptionViewModels[i].position = i;
+      }
+
+      this.Save();
+    }
+  }
+
+  public Open(option: FilterOptionViewModel) {
+    this.FilterOptionViewModel = option;
+  }
+
+  public Sort(): void {
+    if (this.filter != null) {
+      var request = new MoveFilterRequest();
+
+      request.filterId = this.filter.id;
+
+      this.FiltersApiClient.sortFilter(request).subscribe(() => {
+        this.reload.emit();
+      }, (error: Response) => {
+        if (error.status == 400)
+          console.log(error.json());
+        else {
+          console.log('An unexpected error occured');
+          console.log(error);
+        }
+      });
+    }
+  }
+
+  public RequireFilter(): void {
+    var dialogRef = this.dialog.open(BeheerSelectFilterDialogComponent);
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result?.filter != null && this.filter != null) {
+        if (result.filter > 0) {
+          if (confirm("Weet je het zeker?")) {
+
+            this.ChangeDetectorRef.detectChanges();
+
+            var request = new SetFilterRequiredRequest();
+
+            request.filterAffectsId = this.filter.id;
+            request.filterRequiredId = result.filter;
+
+            this.FiltersApiClient.setFilterRequired(request).subscribe(() => {
+              this.reload.emit();
+            }, (error: Response) => {
+              if (error.status == 400)
+                console.log(error.json());
+              else {
+                console.log('An unexpected error occured');
+                console.log(error);
+              }
+            });
+          }
+        }
+      }
+    });
+  }
+
+  public RequireFilterOption(): void {
+    var dialogRef = this.dialog.open(BeheerSelectFilteroptionDialogComponent);
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result?.filteroption != null && this.filter) {
+        if (result.filteroption > 0) {
+          if (confirm("Weet je het zeker?")) {
+
+            this.ChangeDetectorRef.detectChanges();
+
+            var request = new SetFilterOptionRequiredRequest();
+
+            request.filterId = this.filter.id;
+            request.rangeInputId = 0;
+            request.filterOptionId = result.filteroption;
+
+            this.FiltersApiClient.setFilterOptionRequired(request).subscribe(() => {
+              this.reload.emit();
+            }, (error: Response) => {
+              if (error.status == 400)
+                console.log(error.json());
+              else {
+                console.log('An unexpected error occured');
+                console.log(error);
+              }
+            });
+          }
+        }
+      }
+    });
+  }
+
+  public RequireFilterOptionFilterOption(): void {
+    var dialogRef = this.dialog.open(BeheerSelectFilteroptionDialogComponent);
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result?.filteroption != null && this.filter) {
+        if (result.filteroption > 0) {
+          if (confirm("Weet je het zeker?")) {
+
+            this.ChangeDetectorRef.detectChanges();
+
+            //var request = new SetFilterOptionRequiredRequest();
+
+            //request.filterId = this.filter.id;
+            //request.rangeInputId = 0;
+            //request.filterOptionId = result.filteroption;
+
+            //this.FiltersApiClient.setFilterOptionRequired(request).subscribe(() => {
+            //  this.reload.emit();
+            //}, (error: Response) => {
+            //  if (error.status == 400)
+            //    console.log(error.json());
+            //  else {
+            //    console.log('An unexpected error occured');
+            //    console.log(error);
+            //  }
+            //});
+          }
+        }
+      }
+    });
+  }
+
+  public RemoveRequireFilterOption(require: FilterOptionRequiredViewModel): void {
+    if (confirm("Weet je het zeker?")) {
+
+      this.ChangeDetectorRef.detectChanges();
+
+      var request = new SetFilterOptionRequiredRequest();
+
+      request.filterId = require.affectedFilterId;
+      request.rangeInputId = 0;
+      request.filterOptionId = require.requiredFilterOptionId;
+
+      this.FiltersApiClient.removeFilterOptionRequired(request).subscribe(() => {
+        this.reload.emit();
+      }, (error: Response) => {
+        if (error.status == 400)
+          console.log(error.json());
+        else {
+          console.log('An unexpected error occured');
+          console.log(error);
+        }
+      });
+    }
+  }
+
+  public RemoveRequireFilterOptionFilterOption(require: FilterOptionFilterOptionRequiredViewModel): void {
+    if (confirm("Weet je het zeker?")) {
+
+      this.ChangeDetectorRef.detectChanges();
+
+      //var request = new SetFilterOptionRequiredRequest();
+
+      //request.filterId = require.affectedFilterId;
+      //request.rangeInputId = 0;
+      //request.filterOptionId = require.requiredFilterOptionId;
+
+      //this.FiltersApiClient.removeFilterOptionRequired(request).subscribe(() => {
+      //  this.reload.emit();
+      //}, (error: Response) => {
+      //  if (error.status == 400)
+      //    console.log(error.json());
+      //  else {
+      //    console.log('An unexpected error occured');
+      //    console.log(error);
+      //  }
+      //});
+    }
+  }
+
+  public RemoveFilterOption(option: FilterOptionViewModel): void {
+    this.FiltersApiClient.removeFilterOption(option).subscribe(() => {
+      this.reload.emit();
+    }, (error: Response) => {
+      if (error.status == 400)
+        console.log(error.json());
+      else {
+        console.log('An unexpected error occured');
+        console.log(error);
+      }
+    });
+  }
+
+  public SaveFilterOption(option: FilterOptionViewModel): void {
+    this.FiltersApiClient.saveFilterOption(option).subscribe(() => {
+      this.reload.emit();
+    }, (error: Response) => {
+      if (error.status == 400)
+        console.log(error.json());
+      else {
+        console.log('An unexpected error occured');
+        console.log(error);
+      }
+    });
+  }
+
+  public GetFilterOptions(): FilterOptionViewModel[] {
+    if (this.filter?.filterOptionViewModels != undefined) {
+      return this.filter.filterOptionViewModels;
+    }
+    else {
+      return new Array<FilterOptionViewModel>();
+    }
+  }
+
+  public Save(): void {
+    this.FiltersApiClient.saveFilterViewModel(this.filter).subscribe(() => {
+      this.reload.emit();
+    }, (error: Response) => {
+      if (error.status == 400)
+        console.log(error.json());
+      else {
+        console.log('An unexpected error occured');
+        console.log(error);
+      }
+    });
+  }
+}

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

@@ -0,0 +1,54 @@
+<app-beheer-nav></app-beheer-nav>
+
+<div *ngIf="Loading" class="loader">
+  <app-fab-loader></app-fab-loader>
+</div>
+
+<div *ngIf="InputsViewModel" class="main-content">
+  <mat-card>
+    <mat-card-content>
+      <button mat-raised-button (click)="AddCategory()">Categorie toevoegen</button>
+    </mat-card-content>
+  </mat-card>
+  <br />
+  <div class="displayflex">
+    <div>
+      <mat-card>
+        <mat-card-content>
+          <div cdkDropList class="input-list" (cdkDropListDropped)="drop($event)">
+            <div class="input-item" *ngFor="let input of InputsViewModel.inputs" cdkDrag>
+              <ng-container *ngIf="input.filter">
+                <span [ngClass]="{'selected': input.filter?.id == InputViewModel?.filter?.id }">
+                  {{ input.filter.name }} (#{{ input.filter.id }})
+                </span>
+              </ng-container>
+              <ng-container *ngIf="input.range">
+                <span [ngClass]="{'selected': input.range?.id == InputViewModel?.range?.id }">
+                  {{ input.range.name }} (#{{ input.range.id }})
+                </span>
+                
+              </ng-container>
+              <button (click)="Open(input)">Select</button>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="flexauto">
+      <mat-card>
+        <mat-card-content>
+         <div *ngIf="InputViewModel != undefined">
+           <ng-container *ngIf="InputViewModel.filter">
+             <app-beheer-filter [filter]="InputViewModel.filter" (reload)="LoadInputs()"></app-beheer-filter>
+           </ng-container>
+
+           <ng-container *ngIf="InputViewModel.range">
+            <app-beheer-rangeinput [rangeinput]="InputViewModel.range" (reload)="LoadInputs()"></app-beheer-rangeinput>
+           </ng-container>
+         </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,123 @@
+.displayflex {
+  display: flex;
+  gap: 10px;
+}
+
+.required-option {
+  border: 1px solid #000;
+  border-radius: 2px;
+  padding: 2px;
+  margin: 2px;
+}
+
+.loader {
+  position: fixed;
+  z-index: 100;
+  width: 100%;
+  background-color: #FFFFFFAA;
+  top: 0px;
+  height: 100%;
+}
+
+.AND {
+  border-color: #F00;
+}
+
+.OR {
+  border-color: #0F0;
+}
+
+.filter-row {
+  font-size: 20px;
+  line-height: 30px;
+  margin-bottom: 10px;
+}
+
+.flexauto {
+  flex: auto;
+}
+
+.main-content {
+  padding: 10px;
+}
+
+.filter-name {
+  font-size: 20px;
+  padding: 10px;
+  border-bottom: 1px solid #000;
+  display: flex;
+}
+
+.filter-option:hover {
+  background-color: grey;
+}
+
+.filter-options-container {
+  border: 1px solid #000;
+  padding: 10px;
+  margin: 10px;
+}
+
+.filter-option {
+  padding: 5px;
+  border-bottom: 1px solid #000;
+  display: flex;
+  gap: 5px;
+}
+
+.filter-option-name {
+  flex: auto;
+  line-height: 30px;
+  font-size: 20px;
+}
+
+.selected {
+    font-weight: bold;
+}
+
+.input-list {
+  max-width: 100%;
+  border: solid 1px #ccc;
+  min-height: 60px;
+  display: block;
+  background: white;
+  border-radius: 4px;
+  overflow-y: scroll;
+  height: calc(100vH - 188px);
+}
+
+.input-item {
+  padding: 5px 10px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: white;
+  font-size: 14px;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.input-item:last-child {
+  border: none;
+}
+
+.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

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

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