sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Performance und caching in Kundensuche angepasst

Browse Source
This commit is contained in:
Lorenz Hilpert
2023-07-13 23:32:50 +02:00
parent 9ec34b07c4
commit 109999d66f
10 changed files with 47 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.html
View File

@@ -17,7 +17,7 @@
</cdk-virtual-scroll-viewport>
<cdk-virtual-scroll-viewport
itemSize="98"
itemSize="181"
class="h-[calc(100vh-20.75rem)]"
*ngIf="compact"
(scrolledIndexChange)="scrolledIndexChange($event)"

2
apps/page/customer-rd/src/lib/customer-page.component.html
View File

@@ -1,3 +1,3 @@
<shared-breadcrumb [key]="processId$ | async" [tags]="['customer']" class="mb-9"></shared-breadcrumb>
<shared-breadcrumb [key]="processId$ | async" [tags]="['customer']" class="mb-6"></shared-breadcrumb>
<router-outlet></router-outlet>

17
apps/page/customer-rd/src/lib/customer-search/customer-search.component.ts
View File

@@ -77,7 +77,7 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
}
});
this._store.customerListResponse$.pipe(takeUntil(this._onDestroy$)).subscribe(async ([response, filter, processId]) => {
this._store.customerListResponse$.pipe(takeUntil(this._onDestroy$)).subscribe(async ([response, filter, processId, restored]) => {
if (this._store.processId === processId) {
if (response.hits === 1) {
// Navigate to details page
@@ -94,20 +94,7 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
} else if (response.hits > 1) {
const route = this._navigation.listRoute({ processId, filter });
if (
[
'details',
'history',
'edit',
'add-billing-address',
'edit-billing-address',
'add-shipping-address',
'edit-shipping-address',
'orders',
'order-details',
'order-details-history',
].includes(this._breadcrumb)
) {
if (restored) {
await this._router.navigate([], { queryParams: route.queryParams });
} else {
await this._router.navigate(route.path, { queryParams: route.queryParams });

2
apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.ts
View File

@@ -261,7 +261,7 @@ export class CustomerDetailsViewMainComponent extends ComponentStore<CustomerDet
private _checkoutNavigation: CheckoutNavigationService,
private _router: Router
) {
super({ isBusy: true, shoppingCart: undefined, shippingAddress: undefined, payer: undefined });
super({ isBusy: false, shoppingCart: undefined, shippingAddress: undefined, payer: undefined });
}
setIsBusy(isBusy: boolean) {

6
apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.css
View File

@@ -1,3 +1,7 @@
:host {
@apply block bg-surface text-surface-content rounded-[0.313rem] mb-3;
@apply block bg-surface text-surface-content rounded-[0.313rem] mb-3 h-full;
}
::ng-deep .page-customer-filter-main-view shared-filter shared-filter-input-group-main {
@apply hidden px-16 desktop-large:visible;
}

2
apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.html
View File

@@ -12,7 +12,7 @@
<h1 class="text-[1.625rem] font-bold">Filter</h1>
</div>
</div>
<div class="px-3 bg-surface-2 text-surface-2-content">
<div class="px-3 bg-surface text-surface-content">
<shared-filter
*ngIf="filter$ | async; let filter"
[filter]="filter"

1
apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.ts
View File

@@ -11,6 +11,7 @@ import { Filter } from '@shared/components/filter';
templateUrl: 'filter-main-view.component.html',
styleUrls: ['filter-main-view.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'page-customer-filter-main-view' },
})
export class CustomerFilterMainViewComponent {
fetchingFilterSettings$ = this._store.fetchingFilter$;

46
apps/page/customer-rd/src/lib/customer-search/store/customer-search.store.ts
View File

@@ -3,7 +3,18 @@ import { CustomerSearchState } from './customer-search.state';
import * as S from './selectors';
import { Injectable, OnDestroy } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { distinctUntilChanged, filter, switchMap, takeUntil, tap, withLatestFrom, delayWhen, delay, debounceTime } from 'rxjs/operators';
import {
distinctUntilChanged,
filter,
switchMap,
takeUntil,
tap,
withLatestFrom,
delayWhen,
delay,
debounceTime,
take,
} from 'rxjs/operators';
import { CrmCustomerService } from '@domain/crm';
import { Result } from '@domain/defs';
import { CustomerDTO, ListResponseArgsOfCustomerInfoDTO, QuerySettingsDTO } from '@swagger/crm';
@@ -136,7 +147,7 @@ export class CustomerSearchStore extends ComponentStore<CustomerSearchState> imp
fetchingCustomerOrders$ = this.select(S.selectFetchingCustomerOrders);
private _customerListResponse = new Subject<[ListResponseArgsOfCustomerInfoDTO, Filter, number]>();
private _customerListResponse = new Subject<[ListResponseArgsOfCustomerInfoDTO, Filter, number, boolean]>();
customerListResponse$ = this._customerListResponse.asObservable();
@@ -266,13 +277,12 @@ export class CustomerSearchStore extends ComponentStore<CustomerSearchState> imp
search = this.effect(($: Observable<void>) =>
$.pipe(
delayWhen(() => this.filter$.pipe(filter((filter) => !!filter))),
withLatestFrom(this.filter$, this.processId$),
tap(() => {
this.patchState({ fetchingCustomerList: true, customerList: [], customerListCount: 0 });
this.restoreSearchResult();
}),
withLatestFrom(this.filter$, this.processId$, this.restoreSearchResult()),
delay(1),
switchMap(([_, filter, processId]) =>
switchMap(([_, filter, processId, restored]) =>
this._customerService
.getCustomersWithQueryToken({
...filter.getQueryToken(),
@@ -280,15 +290,15 @@ export class CustomerSearchStore extends ComponentStore<CustomerSearchState> imp
})
.pipe(
takeUntil(this._cancelSearch),
tapResponse(this.handleSearchResponse(filter, processId), this.handleSearchError, this.handleSearchComplete)
tapResponse(this.handleSearchResponse(filter, processId, restored), this.handleSearchError, this.handleSearchComplete)
)
)
)
);
handleSearchResponse = (filter: Filter, processId: number) => (result: ListResponseArgsOfCustomerInfoDTO) => {
handleSearchResponse = (filter: Filter, processId: number, restored: boolean) => (result: ListResponseArgsOfCustomerInfoDTO) => {
this.patchState({ customerList: result.result, customerListCount: result.hits });
this._customerListResponse.next([result, filter, processId]);
this._customerListResponse.next([result, filter, processId, restored]);
this.cacheSearchResult();
};
@@ -322,15 +332,14 @@ export class CustomerSearchStore extends ComponentStore<CustomerSearchState> imp
})
.pipe(
takeUntil(this._cancelSearch),
tapResponse(this.handlePaginateResponse(filter, processId), this.handlePaginateError, this.handlePaginateComplete)
tapResponse(this.handlePaginateResponse, this.handlePaginateError, this.handlePaginateComplete)
)
)
)
);
handlePaginateResponse = (filter: Filter, processId: number) => (result: ListResponseArgsOfCustomerInfoDTO) => {
handlePaginateResponse = (result: ListResponseArgsOfCustomerInfoDTO) => {
this.patchState({ customerList: [...this.customerList, ...result.result], customerListCount: result.hits });
this._customerListResponse.next([result, filter, processId]);
this.cacheSearchResult();
};
@@ -357,7 +366,14 @@ export class CustomerSearchStore extends ComponentStore<CustomerSearchState> imp
}
async _getSearchResultKey() {
const queryParams = this.filter.getQueryParams();
const _filter = await this.filter$
.pipe(
filter((f) => !!f),
take(1)
)
.toPromise();
console.log('_getSearchResultKey', _filter);
const queryParams = _filter.getQueryParams();
const encoder = new TextEncoder();
const data = encoder.encode(JSON.stringify(queryParams));
@@ -384,14 +400,16 @@ export class CustomerSearchStore extends ComponentStore<CustomerSearchState> imp
}
restoreSearchResult() {
this._getSearchResultKey().then((key) => {
return this._getSearchResultKey().then((key) => {
const cache = window.sessionStorage.getItem(String(key));
if (cache) {
const { customerList, customerListCount } = JSON.parse(cache);
this.patchState({ customerList, customerListCount });
this.patchState({ customerList, customerListCount, fetchingCustomerList: false });
return true;
}
return false;
});
}

2
apps/shared/shell/src/lib/shell.component.html
View File

@@ -14,7 +14,7 @@
</div>
<main
class="ml-0 desktop-small:ml-[10.5rem] desktop-x-large:ml-[16.5rem] p-4 desktop-small:px-6 desktop:px-10 remove-padding"
class="ml-0 desktop-small:ml-[10.5rem] desktop-x-large:ml-[16.5rem] px-4 py-2 desktop-small:px-6 desktop:px-10 remove-padding"
(click)="closeSideMenu()"
>
<div class="mx-auto w-full">

3
tailwind.config.js
View File

@@ -5,7 +5,8 @@ module.exports = {
theme: {
screens: {
'desktop-small': '1024px',
desktop: '1440px',
desktop: '1280px',
'desktop-large': '1440px',
'desktop-x-large': '1920px',
'desktop-xx-large': '2736px',
},