Merged PR 1329: #3265 Warenausgabe Tabwechsel fixes

#3265 Warenausgabe Tabwechsel fixes
- Fehlermeldung ScrollPosition
- Suche wird trotz Cache ausgeführt
- Scroll Top bei erneuter Suche im gleichen Tab oder über Filter
- Beim Vorgangswechsel wurde der Filter nicht korrekt resetted

Related work items: #3265
This commit is contained in:
Andreas Schickinger
2022-07-18 09:37:27 +00:00
committed by Nino Righi
parent fe5f0ef2eb
commit 8e32b15f26
4 changed files with 48 additions and 98 deletions

View File

@@ -46,8 +46,6 @@ export class GoodsOutSearchComponent implements OnInit, OnDestroy {
) {}
ngOnInit() {
this._goodsOutSearchStore.loadSettings();
this.processId$.pipe(takeUntil(this._onDestroy$), withLatestFrom(this._activatedRoute.queryParams)).subscribe(([processId]) => {
// if (params && Object.keys(params).length === 0) {
// console.log('params is empty');

View File

@@ -6,8 +6,8 @@ import { ComponentStore, tapResponse } from '@ngrx/component-store';
import { ListResponseArgsOfOrderItemListItemDTO, OrderItemListItemDTO, QuerySettingsDTO } from '@swagger/oms';
import { UiFilter } from '@ui/filter';
import { isResponseArgs } from '@utils/object';
import { combineLatest, Observable, Subject } from 'rxjs';
import { switchMap, mergeMap, withLatestFrom, filter, take, tap, debounceTime, first, map } from 'rxjs/operators';
import { NEVER, Observable, Subject } from 'rxjs';
import { switchMap, filter, tap, first, map } from 'rxjs/operators';
export interface GoodsOutSearchState {
defaultSettings?: QuerySettingsDTO;
@@ -75,31 +75,20 @@ export class GoodsOutSearchStore extends ComponentStore<GoodsOutSearchState> {
hits: 0,
results: [],
});
this.loadDefaultSettings();
}
loadSettings = this.effect(($) =>
$.pipe(
switchMap(() =>
this._domainGoodsInService.goodsOutQuerySettings().pipe(
tapResponse(
(res) => {
this.setDefaultSettings(res.result);
const filter = UiFilter.create(res.result);
if (this.queryParams) {
filter.fromQueryParams(this.queryParams);
}
this.setFilter(filter);
},
(err) => {
console.error('GoodsInSearchStore.loadSettings()', err);
}
)
)
)
)
);
async loadDefaultSettings() {
const defaultSettings = await this._domainGoodsInService
.goodsOutQuerySettings()
.pipe(map((res) => res?.result))
.toPromise();
setDefaultSettings(defaultSettings: QuerySettingsDTO) {
const filter = UiFilter.create(defaultSettings);
if (this.queryParams) {
filter.fromQueryParams(this.queryParams);
}
this.setFilter(filter);
this.patchState({ defaultSettings });
}
@@ -111,26 +100,16 @@ export class GoodsOutSearchStore extends ComponentStore<GoodsOutSearchState> {
}
}
resetFilter(defaultQueryParams?: Record<string, string>) {
resetFilter(queryParams?: Record<string, string>) {
const filter = UiFilter.create(this.defaultSettings);
if (!!defaultQueryParams) {
filter?.fromQueryParams(defaultQueryParams);
if (!!queryParams) {
filter?.fromQueryParams(queryParams);
}
this.patchState({ queryParams });
this.setFilter(filter);
}
// clearResults() {
// this.patchState({
// fetching: false,
// hits: 0,
// message: undefined,
// results: [],
// });
// this._searchResultClearedSubject.next();
// }
setQueryParams(queryParams: Record<string, string>) {
this.patchState({ queryParams });
if (this.filter instanceof UiFilter) {
@@ -170,7 +149,7 @@ export class GoodsOutSearchStore extends ComponentStore<GoodsOutSearchState> {
first()
);
}),
tap(([options, results, filter]: [{ clear?: boolean; siletReload?: boolean }, OrderItemListItemDTO[], UiFilter]) => {
tap(([options]: [{ clear?: boolean; siletReload?: boolean }, OrderItemListItemDTO[], UiFilter]) => {
if (!options?.siletReload) {
this.patchState({ fetching: true });
}
@@ -190,6 +169,7 @@ export class GoodsOutSearchStore extends ComponentStore<GoodsOutSearchState> {
cachedResultCount = cachedResults.results.length;
this._searchResultFromCacheSubject.next({ hits: cachedResults.hits, results: cachedResults.results });
return NEVER;
}
}
@@ -247,38 +227,4 @@ export class GoodsOutSearchStore extends ComponentStore<GoodsOutSearchState> {
})
)
);
// reload = this.effect(($) =>
// $.pipe(
// tap((_) => this.patchState({ fetching: true })),
// withLatestFrom(this.results$),
// switchMap(([_, results]) =>
// this.searchRequest({ reload: true }).pipe(
// tapResponse(
// (res) => {
// this.patchState({
// hits: res.hits,
// results: res.result,
// fetching: false,
// });
// this._searchResultSubject.next(res);
// },
// (err: Error) => {
// if (err instanceof HttpErrorResponse && isResponseArgs(err.error)) {
// this._searchResultSubject.next(err.error);
// } else {
// this._searchResultSubject.next({
// error: true,
// message: err.message,
// });
// }
// this.patchState({ fetching: false });
// console.error('GoodsInSearchStore.reload()', err);
// }
// )
// )
// )
// )
// );
}

View File

@@ -40,6 +40,9 @@ export class GoodsOutSearchMainComponent implements OnInit, OnDestroy {
) {}
ngOnInit() {
// Clear scroll position
localStorage.removeItem(`SCROLL_POSITION_${this.processId}`);
this._subscriptions.add(
this._goodsOutSearchStore.filter$.subscribe((f) => {
this._cdr.markForCheck();

View File

@@ -1,5 +1,5 @@
import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { debounceTime, first, map, shareReplay, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
import { debounceTime, first, map, shareReplay, takeUntil, withLatestFrom } from 'rxjs/operators';
import { KeyValueDTOOfStringAndString, OrderItemListItemDTO } from '@swagger/oms';
import { ActivatedRoute, Router } from '@angular/router';
import { GoodsOutSearchStore } from '../goods-out-search.store';
@@ -10,6 +10,7 @@ import { CommandService } from '@core/command';
import { OrderItemsContext } from '@domain/oms';
import { UiErrorModalComponent, UiModalService } from '@ui/modal';
import { UiScrollContainerComponent } from '@ui/scroll-container';
import { UiFilter } from '@ui/filter';
export interface GoodsOutSearchResultsState {
selectedOrderItemSubsetIds: number[];
@@ -92,7 +93,9 @@ export class GoodsOutSearchResultsComponent extends ComponentStore<GoodsOutSearc
}
saveScrollPosition(processId: number, scrollPosition: number) {
localStorage.setItem(`SCROLL_POSITION_${processId}`, JSON.stringify(scrollPosition));
if (scrollPosition > 0) {
localStorage.setItem(`SCROLL_POSITION_${processId}`, JSON.stringify(scrollPosition));
}
}
getScrollPosition(processId: number): number | undefined {
@@ -107,16 +110,20 @@ export class GoodsOutSearchResultsComponent extends ComponentStore<GoodsOutSearc
ngOnInit() {
this.processId$
.pipe(takeUntil(this._onDestroy$), debounceTime(10), withLatestFrom(this._activatedRoute.queryParams))
.subscribe(([processId, params]) => {
.subscribe(async ([processId, params]) => {
if (this.previousProcessId && this.previousProcessId !== processId) {
this.saveScrollPosition(this.previousProcessId, this.scrollContainer.scrollPos);
this.saveScrollPosition(this.previousProcessId, this.scrollContainer?.scrollPos);
}
this._goodsOutSearchStore.setQueryParams(params);
if (!(this._goodsOutSearchStore.filter instanceof UiFilter)) {
await this._goodsOutSearchStore.loadDefaultSettings();
}
this._goodsOutSearchStore.resetFilter(params);
this.updateBreadcrumb(processId, params);
if (this.previousProcessId !== processId) {
this.initInitialSearch(processId, params);
this.initInitialSearch(processId);
this.createBreadcrumb(processId, params);
this.removeBreadcrumbs(processId);
@@ -138,7 +145,7 @@ export class GoodsOutSearchResultsComponent extends ComponentStore<GoodsOutSearc
}
this.updateBreadcrumb(this.previousProcessId, this._goodsOutSearchStore.filter?.getQueryParams());
this.saveScrollPosition(this.previousProcessId, this.scrollContainer.scrollPos);
this.saveScrollPosition(this.previousProcessId, this.scrollContainer?.scrollPos);
}
async removeBreadcrumbs(processId: number) {
@@ -191,7 +198,7 @@ export class GoodsOutSearchResultsComponent extends ComponentStore<GoodsOutSearc
return input?.replace('ORD:', '') ?? 'Alle';
}
initInitialSearch(processId: number, params: Record<string, string>) {
initInitialSearch(processId: number) {
if (this._searchResultSubscription) {
this._searchResultSubscription.unsubscribe();
}
@@ -200,21 +207,19 @@ export class GoodsOutSearchResultsComponent extends ComponentStore<GoodsOutSearc
this._searchResultSubscription.add(
this._goodsOutSearchStore.searchResult$.subscribe(async (result) => {
const queryParams = this._goodsOutSearchStore.filter?.getQueryParams();
if (result.hits === 0) {
await this._router.navigate([`/kunde/${processId}/goods/out`], {
queryParams: this._goodsOutSearchStore.filter.getQueryParams(),
queryParams,
});
} else {
await this.createBreadcrumb(processId, params);
await this.createBreadcrumb(processId, queryParams);
if (result.hits === 1) {
await this.navigateToDetails(processId, result.result[0]);
} else {
const scrollPos = this.getScrollPosition(processId);
if (scrollPos) {
this.scrollTo = scrollPos;
this.scrollContainer?.scrollTo(scrollPos);
this.removeScrollPosition(processId);
}
this.scrollTo = 0;
this.scrollContainer?.scrollTo(0);
this.removeScrollPosition(processId);
}
}
})
@@ -223,12 +228,10 @@ export class GoodsOutSearchResultsComponent extends ComponentStore<GoodsOutSearc
this._searchResultSubscription.add(
this._goodsOutSearchStore.searchResultFromCache$.pipe(takeUntil(this._onDestroy$)).subscribe(async (result) => {
if (result?.hits > 0) {
const scrollPos = this.getScrollPosition(processId);
if (scrollPos) {
this.scrollTo = scrollPos;
this.scrollContainer?.scrollTo(scrollPos);
this.removeScrollPosition(processId);
}
const scrollPos = this.getScrollPosition(processId) || 0;
this.scrollTo = scrollPos;
this.scrollContainer?.scrollTo(scrollPos);
this.removeScrollPosition(processId);
}
})
);
@@ -236,7 +239,7 @@ export class GoodsOutSearchResultsComponent extends ComponentStore<GoodsOutSearc
async loadMore() {
if (this._goodsOutSearchStore.hits > this._goodsOutSearchStore.results.length && !this._goodsOutSearchStore.fetching) {
this.saveScrollPosition(this.previousProcessId, this.scrollContainer.scrollPos);
this.saveScrollPosition(this.previousProcessId, this.scrollContainer?.scrollPos);
this._goodsOutSearchStore.search({});
}
}