From 483bf387f429f60557bb0bc1c0eef98e0aaebc6c Mon Sep 17 00:00:00 2001 From: Mikuta Aleksandras Date: Wed, 1 Apr 2020 17:22:16 +0200 Subject: [PATCH] [HIMA-1044] Remission // Filter Dropdown functionality adjustments --- .../remission-filter-item.component.html | 4 +- .../remission-filter-item.component.scss | 21 ++--- .../remission-filter-item.component.ts | 76 ++++++++++++++++--- .../remission-list-create.component.html | 2 +- .../remission-list-create.component.ts | 14 +--- .../services/remission-helper.service.ts | 2 + 6 files changed, 87 insertions(+), 32 deletions(-) diff --git a/apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.html b/apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.html index 0947c2af7..b8019dde5 100644 --- a/apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.html +++ b/apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.html @@ -1,4 +1,4 @@ -
+
{{ filter.name }} @@ -6,7 +6,7 @@
-
+
diff --git a/apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.scss b/apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.scss index c4dfa27ac..f2c7202d7 100644 --- a/apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.scss +++ b/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; + } } diff --git a/apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.ts b/apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.ts index 32b023afe..4d853b39c 100644 --- a/apps/sales/src/app/modules/remission/components/remission-filter-item/remission-filter-item.component.ts +++ b/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(); @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; - this.remissionHelper.setFilterHeight(height); - } else { - this.remissionHelper.setFilterHeight(0); + const h = options.getBoundingClientRect().height; + this.remissionHelper.setFilterHeight(h); + return; } - } 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(); diff --git a/apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.html b/apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.html index 175f08887..8f73322f3 100644 --- a/apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.html +++ b/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()" >
@@ -70,7 +71,6 @@ *ngIf="remissionProcess" [remissionProcessId]="remissionProcess.id" [remissionResourceType]="selectedRemissionResourceType" - (toggleChange)="filterToggled($event)" >
{ - // 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 diff --git a/apps/sales/src/app/modules/remission/services/remission-helper.service.ts b/apps/sales/src/app/modules/remission/services/remission-helper.service.ts index 55ddfa5f6..17ef11989 100644 --- a/apps/sales/src/app/modules/remission/services/remission-helper.service.ts +++ b/apps/sales/src/app/modules/remission/services/remission-helper.service.ts @@ -19,6 +19,7 @@ export class RemissionHelperService { addRemissionListItem$ = new Subject(); updateRemissionListItem$ = new Subject<{ quantity: number; product: RemissionProduct }>(); filterHeight$ = new BehaviorSubject(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(); }