Revert "[HIMA-1044] Remission // Filter Dropdown functionality adjustments"

This reverts commits 483bf387, 60dd879f, 6f420636
Removes perfect scrollbar functionality from remission create, start lists

apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.html

@@ -1,45 +1,25 @@
-<div class="remission-filter-item"
-  #filterItem>
-  <div class="filter"
-    (click)="toggle()">
-    <div id="filter"
-      class="filter-title"
-      [ngClass]="{ expanded: expanded }">
+<div class="remission-filter-item">
+  <div class="filter" (click)="toggle()">
+    <div id="filter" class="filter-title" [ngClass]="{ expanded: expanded }">
       <span>{{ filter.name }}</span>
-      <lib-icon class="icon"
-        [rotateBackwards]="expanded"
-        transition="all 0.2s linear"
-        width="17px"
-        name="Arrow_Down_2_branch"></lib-icon>
+      <lib-icon class="icon" [rotateBackwards]="expanded" transition="all 0.2s linear" width="17px" name="Arrow_Down_2_branch"></lib-icon>
     </div>
   </div>
   <ng-container *ngIf="expanded">
-    <div id="options"
-      class="options"
-      [@fadeIn]="expanded"
-      #filterList>
+    <div id="options" class="options" [@fadeIn]="expanded">
       <div class="options__container">
         <ng-container *ngFor="let option of filter.options">
-          <div class="option"
-            [ngClass]="{ selected: isFirstLevelItemSelected(option) }">
-            <span class="check-icon"
-              (click)="toggleFirstLevelItem(option)">
+          <div class="option" [ngClass]="{ selected: isFirstLevelItemSelected(option) }">
+            <span class="check-icon" (click)="toggleFirstLevelItem(option)">
               <div class="check-box-wrapper">
-                <lib-icon class="check-box"
-                  height="22px"
-                  name="Check_box_b"></lib-icon>
+                <lib-icon class="check-box" height="22px" name="Check_box_b"></lib-icon>
               </div>
               <div class="check-mark-wrapper">
-                <lib-icon class="check-mark"
-                  name="Check_f_b"
-                  *ngIf="isFirstLevelItemSelected(option)"></lib-icon>
+                <lib-icon class="check-mark" name="Check_f_b" *ngIf="isFirstLevelItemSelected(option)"></lib-icon>
               </div>
             </span>
-            <div class="option-name"
-              (click)="toggleFirstLevelItem(option)">{{ option.name }}</div>
-            <span *ngIf="hasGrouping && !hideSubFilters"
-              class="grouping-arrow"
-              (click)="toggleExpandedGrouping(option)">
+            <div class="option-name" (click)="toggleFirstLevelItem(option)">{{ option.name }}</div>
+            <span *ngIf="hasGrouping && !hideSubFilters" class="grouping-arrow" (click)="toggleExpandedGrouping(option)">
               <lib-icon
                 [rotateBackwards]="isGroupExpanded(option)"
                 transition="all 0.2s linear"
@@ -49,23 +29,16 @@
             </span>
           </div>
           <ng-container *ngIf="hasGrouping && option.options && isGroupExpanded(option)">
-            <div class="sub-items-wrapper"
-              @growShrink>
-              <hr class="branch"/>
+            <div class="sub-items-wrapper" @growShrink>
+              <hr class="branch" />
               <ng-container *ngFor="let subOption of option.options">
-                <div class="option"
-                  [ngClass]="{ selected: isOptionsSelected(subOption) }"
-                  (click)="toggleOption(subOption, true, option)">
+                <div class="option" [ngClass]="{ selected: isOptionsSelected(subOption) }" (click)="toggleOption(subOption, true, option)">
                   <span class="check-icon">
                     <div class="check-box-wrapper">
-                      <lib-icon class="check-box"
-                        height="22px"
-                        name="Check_box_b"></lib-icon>
+                      <lib-icon class="check-box" height="22px" name="Check_box_b"></lib-icon>
                     </div>
                     <div class="check-mark-wrapper">
-                      <lib-icon class="check-mark"
-                        name="Check_f_b"
-                        *ngIf="isOptionsSelected(subOption)"></lib-icon>
+                      <lib-icon class="check-mark" name="Check_f_b" *ngIf="isOptionsSelected(subOption)"></lib-icon>
                     </div>
                   </span>
                   <div class="option-name">{{ subOption.name }}</div>
@@ -73,14 +46,11 @@
               </ng-container>
             </div>
           </ng-container>
-          <hr class="branch"/>
+          <hr class="branch" />
         </ng-container>
       </div>
       <div class="action">
-        <app-button primary="true"
-          [disabled]="updateInactive"
-          (action)="updateFilters()">Filtern
-        </app-button>
+        <app-button primary="true" [disabled]="updateInactive" (action)="updateFilters()">Filtern</app-button>
       </div>
     </div>
   </ng-container>

apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.scss

@@ -28,23 +28,20 @@ $tablet-height: 283px;
 
 .options {
   position: absolute;
-  margin-top: 2px;
-  z-index: 999;
+  top: 35px;
   background-color: white;
   -moz-box-shadow: 0 0 20px 1px #dde5ec;
   -webkit-box-shadow: 0 0 20px 1px #dde5ec;
   box-shadow: 0 0 20px 1px #dde5ec;
   border-radius: 4px;
+  padding-bottom: 10px;
   width: 307px;
   overflow: hidden;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
+  z-index: 10;
 
   &__container {
-    position: relative;
-    flex-grow: 1;
-    overflow: scroll;
+    max-height: 305px;
+    overflow: auto;
   }
   .option {
     display: flex;
@@ -89,10 +86,5 @@ $tablet-height: 283px;
 .action {
   display: flex;
   justify-content: center;
-  flex-shrink: 0;
-
-  app-button {
-    display: block;
-    margin: 10px 0;
-  }
+  padding-top: 10px;
 }

apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.ts

@@ -1,15 +1,4 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  Output,
-  EventEmitter,
-  OnDestroy,
-  ChangeDetectorRef,
-  ViewChild,
-  ElementRef,
-  HostListener, AfterViewInit, Renderer2
-} from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { Filter, FilterOption } from '@isa/remission';
 import { fadeInAnimation } from '../../animations/fadeIn.animation';
 import { growShrinkAnimation } from '../../animations/grow-shrink.animation';
@@ -28,18 +17,15 @@ import isEqual from 'lodash/isEqual';
   styleUrls: ['./remission-filter-item.component.scss'],
   animations: [fadeInAnimation, growShrinkAnimation]
 })
-export class RemissionFilterItemComponent implements OnInit, OnDestroy, AfterViewInit {
+export class RemissionFilterItemComponent implements OnInit, OnDestroy {
   @Input() filter: Filter;
-
   @Input()
   get remissionResourceType(): RemissionResourceType {
     return this._remissionResourceType;
   }
-
   set remissionResourceType(value: RemissionResourceType) {
     this._remissionResourceType = value;
   }
-
   @Output() closeOtherFilters = new EventEmitter<string>();
   @Output() toggleChange = new EventEmitter();
 
@@ -56,21 +42,7 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy, AfterVie
   private previousSelectedOptions: FilterOption[] = [];
   private _remissionResourceType: RemissionResourceType;
 
-  private windowHeight;
-  @ViewChild('filterItem') filterItem: ElementRef;
-  @ViewChild('filterList') filterList: ElementRef;
-
-  @HostListener('window:resize', [])
-  public onResize() {
-    this.windowHeight = window.innerHeight;
-  }
-
-  constructor(
-    private store: Store,
-    private remissionHelper: RemissionHelperService,
-    private cdrf: ChangeDetectorRef,
-    private renderer: Renderer2
-  ) {}
+  constructor(private store: Store, private remissionHelper: RemissionHelperService, private cdrf: ChangeDetectorRef) {}
 
   ngOnInit() {
     this.areFilterOptionsGoups(this.filter);
@@ -80,10 +52,6 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy, AfterVie
     }
   }
 
-  public ngAfterViewInit() {
-    this.windowHeight = window.innerHeight;
-  }
-
   ngOnDestroy() {
     this.destroy$.next();
   }
@@ -98,7 +66,7 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy, AfterVie
       )
       .subscribe(filterOptions => {
         const flatFilterOptions = [];
-        this.filter.options.forEach(({options}) => flatFilterOptions.push(...options));
+        this.filter.options.forEach(({ options }) => flatFilterOptions.push(...options));
         this.selectedOptions = flatFilterOptions.filter(item => filterOptions.includes(item.id));
 
         this.selectedGroups = this.filter.options.filter(groupOptions => {
@@ -153,17 +121,6 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy, AfterVie
     this.remissionHelper.closeFilters$.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.updateFilters();
     });
-    this.remissionHelper.closeDropdowns$.pipe(takeUntil(this.destroy$)).subscribe(() => {
-      if (!this.expanded) {
-        return;
-      }
-      this.expanded = false;
-      this.previousSelectedGroups = [...this.selectedGroups];
-      this.previousSelectedOptions = [...this.selectedOptions];
-      this.toggleChange.emit(this.expanded);
-      this.setFilterHeight(this.expanded);
-      this.setFilterListHeight();
-    });
   }
 
   updateFilters() {
@@ -389,7 +346,6 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy, AfterVie
     }
     this.toggleChange.emit(this.expanded);
     this.setFilterHeight(this.expanded);
-    this.setFilterListHeight();
   }
 
   setFilterHeight(expanded: boolean) {
@@ -398,28 +354,17 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy, AfterVie
       if (expanded) {
         const options = document.getElementById('options');
         if (options) {
-          const h = options.getBoundingClientRect().height;
-          this.remissionHelper.setFilterHeight(h);
-          return;
+          const height = options.getBoundingClientRect().height;
+          this.remissionHelper.setFilterHeight(height);
+        } else {
+          this.remissionHelper.setFilterHeight(0);
         }
+      } else {
+        this.remissionHelper.setFilterHeight(0);
       }
-      this.remissionHelper.setFilterHeight(0);
     });
   }
 
-  setFilterListHeight() {
-    if (!this.filterList) {
-      return;
-    }
-    if (this.expanded && this.windowHeight && this.filterItem) {
-      const b = this.filterItem.nativeElement.getBoundingClientRect().bottom;
-      const h = this.windowHeight - b - 85;
-      this.renderer.setStyle(this.filterList.nativeElement, 'max-height', `${h}px`);
-      return;
-    }
-    this.renderer.removeStyle(this.filterList.nativeElement, 'max-height');
-  }
-
   public closeNotCurrentFilters(id: string) {
     if (this.filter.id !== id) {
       this.updateFilters();

apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.html

@@ -2,9 +2,7 @@
   #remissionListContainer
   id="remission-list-container"
   class="remission-list-container"
-  [perfectScrollbar]="{minScrollbarLength: 20}"
-  [disabled]="filtersExpanded"
-  (scroll)="onScroll()">
+>
   <div class="headers" *ngIf="resourceTypeSwitch">
     <div class="header-item resource-type">
       <lib-double-choice-switch
@@ -72,7 +70,7 @@
           *ngIf="remissionProcess"
           [remissionProcessId]="remissionProcess.id"
           [remissionResourceType]="selectedRemissionResourceType"
-          (toggleChange)="filtersExpanded = $event"
+          (toggleChange)="filterToggled($event)"
         ></app-remission-filters>
       </div>
       <div

apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.ts

@@ -3,7 +3,6 @@ import {
   OnInit,
   OnDestroy,
   ViewChild,
-  ChangeDetectorRef,
   ElementRef
 } from '@angular/core';
 import { Subject, Observable, of } from 'rxjs';
@@ -529,6 +528,16 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
     this.navigateToAddProductToRemission();
   }
 
+  filterToggled(state: boolean) {
+    if (state) {
+      setTimeout(() => {
+        // HIMA-1045 smooth scroll the expanded options into view
+        const container = document.getElementById('options');
+        container.scrollIntoView({ block: 'end', behavior: 'smooth' });
+      }, 300);
+    }
+  }
+
   navigateToAddProductToRemission() {
     const path = '/remission/search';
     this.store.dispatch(
@@ -634,10 +643,6 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
     this.destroy$.next();
   }
 
-  onScroll() {
-    this.remissionHelper.closeDropdowns();
-  }
-
   private reinitializeFilters() {
     const resourceTarget =
       this.selectedSupplier === Side.LEFT

apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.html

@@ -25,10 +25,9 @@
   id="remission-list-container"
   #remissionListContainer
   class="remission-list-container"
-  [perfectScrollbar]="{minScrollbarLength: 20}"
-  [disabled]="filtersExpanded"
   (scroll)="scrollHandler($event)"
-  *ngIf="!shippingDocumentCreationPage && loaded">
+  *ngIf="!shippingDocumentCreationPage && loaded"
+>
   <div id="top-marker"></div>
   <div class="headers" *ngIf="resourceTypeSwitch">
     <div class="header-item resource-type">
@@ -88,7 +87,7 @@
           *ngIf="remissionProcess"
           [remissionProcessId]="remissionProcess.id"
           [remissionResourceType]="selectedRemissionResourceType"
-          (toggleChange)="filtersExpanded = $event"
+          (toggleChange)="filterToggled($event)"
         ></app-remission-filters>
       </div>
       <div

apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.ts

@@ -494,6 +494,16 @@ export class RemissionListStartedComponent implements OnInit, OnDestroy {
     this.navigateToFinishRemission();
   }
 
+  filterToggled(state: boolean) {
+    if (state) {
+      setTimeout(() => {
+        // HIMA-1045 smooth scroll the expanded options into view
+        const container = document.getElementById('options');
+        container.scrollIntoView({ block: 'end', behavior: 'smooth' });
+      }, 300);
+    }
+  }
+
   navigateToFinishRemission() {
     const path = '/remission/finish';
     this.store.dispatch(
@@ -510,8 +520,6 @@ export class RemissionListStartedComponent implements OnInit, OnDestroy {
   }
 
   scrollHandler(event) {
-    this.remissionHelper.closeDropdowns();
-
     const { clientHeight, scrollHeight, scrollTop } = event.target;
 
     if (this.refetchProductsOnScroll()) {

apps/sales/src/app/modules/remission/services/remission-helper.service.ts

@@ -19,7 +19,6 @@ export class RemissionHelperService {
   addRemissionListItem$ = new Subject<RemissionProduct>();
   updateRemissionListItem$ = new Subject<{ quantity: number; product: RemissionProduct }>();
   filterHeight$ = new BehaviorSubject<number>(null);
-  closeDropdowns$ = new Subject();
   constructor() {}
 
   public deleteFilterOption = (option: FilterOption) => this.filteOptionsDeleteEvents$.next(option);
@@ -34,5 +33,4 @@ export class RemissionHelperService {
   public updateRemissionListItem = (quantity: number, product: RemissionProduct) =>
     this.updateRemissionListItem$.next({ quantity: quantity, product: product });
   public setFilterHeight = (height: number) => this.filterHeight$.next(height);
-  public closeDropdowns = () => this.closeDropdowns$.next();
 }