#2450 piad6 ui fehler - Filter Groeße

apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.html

@@ -6,10 +6,15 @@
 
     <div class="catalog-search-filter-content-main">
       <h1 class="title">Filter</h1>
-      <ui-filter [filter]="filter" [loading]="fetching$ | async" (search)="applyFilter(filter)" [hint]="searchboxHint$ | async"></ui-filter>
+      <ui-filter
+        [filter]="filter"
+        [loading]="fetching$ | async"
+        (search)="applyFilter(filter)"
+        [hint]="searchboxHint$ | async"
+        resizeInputOptionsToElement="page-article-search-filter .cta-wrapper"
+      ></ui-filter>
     </div>
   </div>
-
   <div class="cta-wrapper">
     <button class="cta-reset-filter" (click)="resetFilter(filter)">
       Filter zurücksetzen

apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.scss

@@ -17,10 +17,6 @@
   }
 }
 
-::ng-deep ui-filter-input-options .input-options {
-  max-height: calc(100vh - 555px);
-}
-
 .cta-wrapper {
   @apply fixed bottom-8 whitespace-nowrap;
   left: 50%;

apps/page/goods-in/src/lib/goods-in-search/goods-in-search-filter/goods-in-search-filter.component.html

@@ -5,7 +5,13 @@
 
   <div class="goods-in-search-filter-content-main">
     <h1 class="title">Filter</h1>
-    <ui-filter [filter]="filter" [loading]="loading$ | async" (search)="applyFilter()" [hint]="message"></ui-filter>
+    <ui-filter
+      [filter]="filter"
+      [loading]="loading$ | async"
+      (search)="applyFilter()"
+      [hint]="message"
+      resizeInputOptionsToElement="page-goods-in-search-filter .cta-wrapper"
+    ></ui-filter>
   </div>
 </div>
 

apps/page/goods-out/src/lib/goods-out-search/goods-out-search-filter/goods-out-search-filter.component.html

@@ -5,7 +5,13 @@
 
   <div class="goods-out-search-filter-content-main">
     <h1 class="title">Filter</h1>
-    <ui-filter [filter]="filter" [loading]="loading$ | async" (search)="applyFilter()" [hint]="message"></ui-filter>
+    <ui-filter
+      [filter]="filter"
+      [loading]="loading$ | async"
+      (search)="applyFilter()"
+      [hint]="message"
+      resizeInputOptionsToElement="page-goods-out-search-filter .cta-wrapper"
+    ></ui-filter>
   </div>
 </div>
 

apps/ui/filter/src/lib/next/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss

@@ -40,7 +40,7 @@ ui-icon {
 }
 
 ::ng-deep ui-filter-filter-group-filter .input-options-wrapper {
-  min-height: 300px;
+  min-height: 150px;
 }
 
 ::ng-deep ui-filter-filter-group-filter .remove-rounded-top-left .input-options-wrapper {

apps/ui/filter/src/lib/next/ui-filter.component.ts

@@ -1,4 +1,18 @@
-import { Component, ChangeDetectionStrategy, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  Output,
+  EventEmitter,
+  ElementRef,
+  Renderer2,
+  Inject,
+  AfterViewInit,
+  HostListener,
+} from '@angular/core';
 import { IUiFilter, UiFilter } from './tree/ui-filter';
 
 @Component({
@@ -7,7 +21,7 @@ import { IUiFilter, UiFilter } from './tree/ui-filter';
   styleUrls: ['ui-filter.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class UiFilterComponent implements OnChanges {
+export class UiFilterComponent implements OnChanges, AfterViewInit {
   @Input()
   loading: boolean;
 
@@ -20,11 +34,14 @@ export class UiFilterComponent implements OnChanges {
   @Input()
   filter: IUiFilter;
 
+  @Input()
+  resizeInputOptionsToElement: string | HTMLElement;
+
   get uiFilter() {
     return this.filter instanceof UiFilter && this.filter;
   }
 
-  constructor() {}
+  constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) {}
 
   ngOnChanges({ filter }: SimpleChanges): void {
     if (filter) {
@@ -33,4 +50,34 @@ export class UiFilterComponent implements OnChanges {
       }
     }
   }
+
+  ngAfterViewInit() {
+    setTimeout(() => this.resizeInputOptions(), 500);
+  }
+
+  getHtmlElement(element: string | HTMLElement): HTMLElement {
+    return typeof element === 'string' ? this.document.querySelector(element) : element;
+  }
+
+  @HostListener('window:resize', ['$event'])
+  @HostListener('window:click', ['$event'])
+  resizeInputOptions() {
+    if (this.resizeInputOptionsToElement) {
+      const inputOptions = this.elementRef.nativeElement.querySelector('.input-options');
+      const targetElement = this.getHtmlElement(this.resizeInputOptionsToElement);
+
+      // set the max-height of the input-options to the height of the actions, depending on the distance between the two
+      if (inputOptions && targetElement) {
+        const distanceBetweenElements = this.getDistanceBetweenElements(inputOptions, targetElement) - 15;
+        this.renderer.setStyle(inputOptions, 'max-height', `${distanceBetweenElements}px`);
+      }
+    }
+  }
+
+  getDistanceBetweenElements(element1: HTMLElement, element2: HTMLElement) {
+    const rect1 = element1.getBoundingClientRect();
+    const rect2 = element2.getBoundingClientRect();
+
+    return Math.abs(rect1.top - rect2.top);
+  }
 }