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

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

@@ -1,4 +1,4 @@
-<div class="remission-filter-item">
+<div class="remission-filter-item" #filterItem>
   <div class="filter" (click)="toggle()">
     <div id="filter" class="filter-title" [ngClass]="{ expanded: expanded }">
       <span>{{ filter.name }}</span>
@@ -6,7 +6,7 @@
     </div>
   </div>
   <ng-container *ngIf="expanded">
-    <div id="options" class="options" [@fadeIn]="expanded">
+    <div id="options" class="options" [@fadeIn]="expanded" #filterList>
       <div class="options__container">
         <ng-container *ngFor="let option of filter.options">
           <div class="option" [ngClass]="{ selected: isFirstLevelItemSelected(option) }">

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

@@ -1,10 +1,6 @@
 $device-height: 500px;
 $tablet-height: 283px;
 
-.remission-filter-item {
-  position: relative;
-}
-
 .filter {
   .filter-title {
     cursor: pointer;
@@ -28,19 +24,21 @@ $tablet-height: 283px;
 
 .options {
   position: absolute;
-  top: 35px;
+  margin-top: 2px;
   z-index: 999;
   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;
-  z-index: 10;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
   &__container {
-    max-height: 305px;
+    flex-grow: 1;
     overflow: scroll;
   }
   .option {
@@ -86,5 +84,10 @@ $tablet-height: 283px;
 .action {
   display: flex;
   justify-content: center;
-  padding-top: 10px;
+  flex-shrink: 0;
+
+  app-button {
+    display: block;
+    margin: 10px 0;
+  }
 }

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

@@ -1,4 +1,15 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  OnDestroy,
+  ChangeDetectorRef,
+  ViewChild,
+  ElementRef,
+  HostListener, AfterViewInit, Renderer2
+} from '@angular/core';
 import { Filter, FilterOption } from '@isa/remission';
 import { fadeInAnimation } from '../../animations/fadeIn.animation';
 import { growShrinkAnimation } from '../../animations/grow-shrink.animation';
@@ -17,15 +28,18 @@ import isEqual from 'lodash/isEqual';
   styleUrls: ['./remission-filter-item.component.scss'],
   animations: [fadeInAnimation, growShrinkAnimation]
 })
-export class RemissionFilterItemComponent implements OnInit, OnDestroy {
+export class RemissionFilterItemComponent implements OnInit, OnDestroy, AfterViewInit {
   @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();
 
@@ -42,7 +56,21 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy {
   private previousSelectedOptions: FilterOption[] = [];
   private _remissionResourceType: RemissionResourceType;
 
-  constructor(private store: Store, private remissionHelper: RemissionHelperService, private cdrf: ChangeDetectorRef) {}
+  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
+  ) {}
 
   ngOnInit() {
     this.areFilterOptionsGoups(this.filter);
@@ -52,6 +80,10 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy {
     }
   }
 
+  public ngAfterViewInit() {
+    this.windowHeight = window.innerHeight;
+  }
+
   ngOnDestroy() {
     this.destroy$.next();
   }
@@ -66,7 +98,7 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy {
       )
       .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 => {
@@ -121,6 +153,17 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy {
     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() {
@@ -346,6 +389,7 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy {
     }
     this.toggleChange.emit(this.expanded);
     this.setFilterHeight(this.expanded);
+    this.setFilterListHeight();
   }
 
   setFilterHeight(expanded: boolean) {
@@ -354,17 +398,29 @@ export class RemissionFilterItemComponent implements OnInit, OnDestroy {
       if (expanded) {
         const options = document.getElementById('options');
         if (options) {
-          const height = options.getBoundingClientRect().height;
+          const h = options.getBoundingClientRect().height;
-          this.remissionHelper.setFilterHeight(height);
+          this.remissionHelper.setFilterHeight(h);
-        } else {
+          return;
-          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, 'top', `${b}px`);
+      this.renderer.setStyle(this.filterList.nativeElement, 'height', `${h}px`);
+      return;
+    }
+    this.renderer.removeStyle(this.filterList.nativeElement, '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,6 +2,7 @@
   #remissionListContainer
   id="remission-list-container"
   class="remission-list-container scrollbar-visible"
+  (scroll)="onScroll()"
 >
   <div class="headers" *ngIf="resourceTypeSwitch">
     <div class="header-item resource-type">
@@ -70,7 +71,6 @@
           *ngIf="remissionProcess"
           [remissionProcessId]="remissionProcess.id"
           [remissionResourceType]="selectedRemissionResourceType"
-          (toggleChange)="filterToggled($event)"
         ></app-remission-filters>
       </div>
       <div

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

@@ -528,16 +528,6 @@ 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(
@@ -643,6 +633,10 @@ 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/services/remission-helper.service.ts

@@ -19,6 +19,7 @@ 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);
@@ -33,4 +34,5 @@ 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();
 }