mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
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:
committed by
Nino Righi
parent
fe5f0ef2eb
commit
8e32b15f26
@@ -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');
|
||||
|
||||
@@ -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);
|
||||
// }
|
||||
// )
|
||||
// )
|
||||
// )
|
||||
// )
|
||||
// );
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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({});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user