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 1444cec80..0947c2af7 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,45 +1,25 @@ -
-
-
+
+
+
{{ filter.name }} - +
-
+
-
- +
+
- +
- +
-
{{ option.name }}
- +
{{ option.name }}
+
-
-
+
+
-
+
- +
- +
{{ subOption.name }}
@@ -73,14 +46,11 @@
-
+
- Filtern - + Filtern
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 b0f555fea..36adc7be4 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 @@ -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; } 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 848f4c9b6..32b023afe 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,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(); @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(); 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 0b2548d5d..f33bf0cff 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,9 +2,7 @@ #remissionListContainer id="remission-list-container" class="remission-list-container" - [perfectScrollbar]="{minScrollbarLength: 20}" - [disabled]="filtersExpanded" - (scroll)="onScroll()"> +>
{ + // 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 diff --git a/apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.html b/apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.html index 20669e817..0d00067de 100644 --- a/apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.html +++ b/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" +>
@@ -88,7 +87,7 @@ *ngIf="remissionProcess" [remissionProcessId]="remissionProcess.id" [remissionResourceType]="selectedRemissionResourceType" - (toggleChange)="filtersExpanded = $event" + (toggleChange)="filterToggled($event)" >
{ + // 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()) { 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 17ef11989..55ddfa5f6 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,7 +19,6 @@ 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); @@ -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(); }