Add fix for back button navigation on filtering (#1292)

valtimo-platform · Nov 27, 2024 · 8f9066e · 8f9066e
1 parent 3ba9854
commit 8f9066e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/dossier-detail.component.ts b/projects/valtimo/dossier/src/lib/components/dossier-detail/dossier-detail.component.ts
@@ -61,6 +61,7 @@ import {
   of,
   startWith,
   Subject,
+  Subscription,
   switchMap,
   take,
   tap,
@@ -254,7 +255,7 @@ export class DossierDetailComponent
   private _pendingTab: TabImpl;
   private _observer!: ResizeObserver;
   private _tabsInit = false;
-  private _prevQueryParams: Params | undefined | null;
+  private readonly _subscriptions = new Subscription();
 
   constructor(
     private readonly breadcrumbService: BreadcrumbService,
@@ -292,13 +293,14 @@ export class DossierDetailComponent
     this.pageTitleService.disableReset();
     this.iconService.registerAll([ChevronDown16]);
     this.setDocumentStyle();
-    this.handleBackNavigation();
+    this.enableResetOnBackNavigation();
   }
 
   public ngOnDestroy(): void {
     this.breadcrumbService.clearSecondBreadcrumb();
     this.pageTitleService.enableReset();
     this.removeDocumentStyle();
+    this._subscriptions.unsubscribe();
   }
 
   public getAllAssociatedProcessDefinitions(): void {
@@ -504,22 +506,18 @@ export class DossierDetailComponent
     );
   }
 
-  private handleBackNavigation(): void {
-    this._prevQueryParams =
-      this.router.lastSuccessfulNavigation?.previousNavigation?.extras.queryParams;
-    this.router.events
-      .pipe(
-        filter(event => event instanceof NavigationStart && event.navigationTrigger === 'popstate'),
-        take(1)
-      )
-      .subscribe(() => {
-        this.pageTitleService.enableReset();
-        if (!this._prevQueryParams) return;
-        this.router.navigate([`dossiers/${this.documentDefinitionName}`], {
-          queryParams: this._prevQueryParams,
-          replaceUrl: true
-        });
-      });
+  private enableResetOnBackNavigation(): void {
+    this._subscriptions.add(
+      this.router.events
+        .pipe(
+          filter(
+            event => event instanceof NavigationStart && event.navigationTrigger === 'popstate'
+          )
+        )
+        .subscribe(() => {
+          this.pageTitleService.enableReset();
+        })
+    );
   }
 
   private setBreadcrumb(): void {

diff --git a/projects/valtimo/dossier/src/lib/components/dossier-list/dossier-list.component.ts b/projects/valtimo/dossier/src/lib/components/dossier-list/dossier-list.component.ts
@@ -1,4 +1,4 @@
- /*
+/*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
@@ -501,7 +501,7 @@ export class DossierListComponent implements OnInit, OnDestroy {
         `/dossiers/${documentDefinitionName}`,
         this.route.snapshot.queryParams
       );
-      this.router.navigate([`/dossiers/${documentDefinitionName}/document/${item.id}`], {replaceUrl: true});
+      this.router.navigate([`/dossiers/${documentDefinitionName}/document/${item.id}`]);
     });
   }
 

diff --git a/projects/valtimo/dossier/src/lib/models/tabs.model.ts b/projects/valtimo/dossier/src/lib/models/tabs.model.ts
@@ -106,8 +106,8 @@ export class TabLoaderImpl implements TabLoader<TabImpl> {
         this._router.navigate([`${urlBeforeDocumentId}${currentDocumentId}/${nextTab.name}`], {
           ...(nextTab.name === 'documents' && {
             queryParams,
-            replaceUrl: true
           }),
+          replaceUrl: true,
         });
       });
   }