sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Aktuallisierung des Breadcrumbs wenn sie der Suchparameter ändert

Browse Source
This commit is contained in:
Lorenz Hilpert
2024-05-13 17:28:29 +02:00
parent 23b2a05d47
commit 93c050f09a
5 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/page/retoure/src/lib/guards/can-deactivate-retoure-list.guard.ts
View File

@@ -1,11 +1,14 @@
import { CanDeactivateFn } from '@angular/router';
import { ListPageComponent } from '../pages/list-page/list-page.component';
import { hash } from '@utils/common';
export const canDeactivateRetoureList: CanDeactivateFn<ListPageComponent> = (component: ListPageComponent) => {
const scrollPosition = component.scrollContainer.scrollPosition;
const queryParams = component.activatedRoute.snapshot.queryParams;
const { main_qs, filter_receipt_type, filter_receipt_date } = component.activatedRoute.snapshot.queryParams;
const processId = component.processId();
localStorage.setItem(`retoure-list-scroll-${processId}-${hash(queryParams)}`, JSON.stringify(scrollPosition));
localStorage.setItem(
`retoure-list-scroll-${processId}-${[processId, main_qs, filter_receipt_type, filter_receipt_date].join('&')}`,
JSON.stringify(scrollPosition)
);
return true;
};

9
apps/page/retoure/src/lib/guards/retoure-list-scroll-position.resolver.ts
View File

@@ -1,11 +1,12 @@
import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
import { hash } from '@utils/common';
export const retoureListScrollPositionResolver: ResolveFn<number> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
const processId = route.params.processId;
const queryParams = route.queryParams;
const { main_qs, filter_receipt_type, filter_receipt_date } = route.queryParams;
const scrollPosition = localStorage.getItem(`retoure-list-scroll-${processId}-${hash(queryParams)}`);
localStorage.removeItem(`retoure-list-scroll-${processId}-${hash(queryParams)}`);
const scrollPosition = localStorage.getItem(
`retoure-list-scroll-${processId}-${[processId, main_qs, filter_receipt_type, filter_receipt_date].join('&')}`
);
localStorage.removeItem(`retoure-list-scroll-${processId}-${[processId, main_qs, filter_receipt_type, filter_receipt_date].join('&')}`);
return scrollPosition ? JSON.parse(scrollPosition) : 0;
};

1
apps/page/retoure/src/lib/pages/list-page/list-page.component.html
View File

@@ -29,6 +29,7 @@
*ngFor="let item of items$ | async; trackBy: trackItemById"
[routerLink]="[item?.id]"
[queryParams]="{ receiptNumber: item.receiptNumber }"
[queryParamsHandling]="'merge'"
>
<page-retoure-list-item class="mb-2" [item]="item" [attr.data-receipt-id]="item?.id"></page-retoure-list-item>
</a>

8
apps/page/retoure/src/lib/pages/list-page/list-page.component.ts
View File

@@ -48,8 +48,6 @@ import { RetoureListItemLoaderComponent } from '../../shared/retoure-list-item/r
export class ListPageComponent implements OnInit {
destroyRef = inject(DestroyRef);
snapshot = inject(ActivatedRoute).snapshot;
retoureBreadcrumbService = inject(RetoureBreadcrumbService);
@ViewChild(ScrollContainerDirective, { static: true }) scrollContainer: ScrollContainerDirective;
@@ -96,8 +94,8 @@ export class ListPageComponent implements OnInit {
applyFilterFn = injectApplyFilter();
ngOnInit(): void {
this.retoureBreadcrumbService.createOrUpdateListBreadcrumb(this.snapshot);
this.retoureBreadcrumbService.removeDetailBreadcrumb(this.snapshot);
this.retoureBreadcrumbService.createOrUpdateListBreadcrumb(this.activatedRoute.snapshot);
this.retoureBreadcrumbService.removeDetailBreadcrumb(this.activatedRoute.snapshot);
this.scrollContainer.scrolledToBottom.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
if (this.fetchingRetoure()) return;
@@ -120,6 +118,8 @@ export class ListPageComponent implements OnInit {
const message = await this.applyFilterFn(filter);
this.retoureBreadcrumbService.createOrUpdateListBreadcrumb(this.activatedRoute.snapshot);
if (message) {
this.resultHint.set(message);
}

6
apps/page/retoure/src/lib/retoure-breadcrumb.service.ts
View File

@@ -86,8 +86,9 @@ export class RetoureBreadcrumbService {
section: 'customer',
});
} else {
if (!isEqual(crumbs[0].params, queryParams)) {
if (!isEqual(crumbs[0].params, queryParams) || crumbs[0].name !== queryParams['main_qs']) {
await this.breadcrumbService.patchBreadcrumb(crumbs[0].id, {
name: queryParams['main_qs'] ?? 'Alle',
params: queryParams,
});
}
@@ -138,8 +139,9 @@ export class RetoureBreadcrumbService {
section: 'customer',
});
} else {
if (!isEqual(crumbs[0].params, queryParams)) {
if (!isEqual(crumbs[0].params, queryParams) || crumbs[0].name !== queryParams?.receiptNumber) {
await this.breadcrumbService.patchBreadcrumb(crumbs[0].id, {
name: queryParams?.receiptNumber || 'Details',
params: queryParams,
});
}