Tweak: use anchor element for filter documents list

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts

@@ -1,6 +1,7 @@
 import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
 import {
   NgbDropdownModule,
   NgbPaginationModule,
@@ -29,6 +30,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
     TitleCasePipe,
     FormsModule,
     ReactiveFormsModule,
+    RouterModule,
     NgClass,
     NgTemplateOutlet,
     NgbDropdownModule,

src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts

@@ -1,6 +1,7 @@
 import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
 import {
   NgbDropdownModule,
   NgbPaginationModule,
@@ -27,6 +28,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
     IfPermissionsDirective,
     FormsModule,
     ReactiveFormsModule,
+    RouterModule,
     NgClass,
     NgTemplateOutlet,
     NgbDropdownModule,

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -120,7 +120,14 @@
               <button (click)="openEditDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" ngbDropdownItem i18n>Edit</button>
               <button class="text-danger" (click)="openDeleteDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" ngbDropdownItem i18n>Delete</button>
               @if (getDocumentCount(object) > 0) {
-                <button (click)="filterDocuments(object)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents ({{ getDocumentCount(object) }})</button>
+                  <a
+                    *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
+                    ngbDropdownItem
+                    [routerLink]="getDocumentFilterUrl(object)"
+                    (click)="$event?.stopPropagation()"
+                    i18n
+                    >Filter Documents ({{ getDocumentCount(object) }})</a
+                  >
               }
             </div>
           </div>
@@ -135,9 +142,15 @@
         </div>
         @if (getDocumentCount(object) > 0) {
           <div class="btn-group d-none d-sm-inline-block">
-            <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+            <a
-              <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container><span class="badge bg-light text-secondary ms-2">{{ getDocumentCount(object) }}</span>
+              class="btn btn-sm btn-outline-secondary"
-            </button>
+              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
+              [routerLink]="getDocumentFilterUrl(object)"
+              (click)="$event?.stopPropagation()"
+            >
+              <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container
+              ><span class="badge bg-light text-secondary ms-2">{{ getDocumentCount(object) }}</span>
+            </a>
           </div>
         }
       </div>

src-ui/src/app/components/manage/management-list/management-list.component.ts

@@ -230,8 +230,8 @@ export abstract class ManagementListComponent<T extends MatchingModel>
 
   abstract getDeleteMessage(object: T)
 
-  filterDocuments(object: MatchingModel) {
+  getDocumentFilterUrl(object: MatchingModel) {
-    this.documentListViewService.quickFilter([
+    return this.documentListViewService.getQuickFilterUrl([
       { rule_type: this.filterRuleType, value: object.id.toString() },
     ])
   }

src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts

@@ -1,6 +1,7 @@
 import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
 import {
   NgbDropdownModule,
   NgbPaginationModule,
@@ -27,6 +28,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
     IfPermissionsDirective,
     FormsModule,
     ReactiveFormsModule,
+    RouterModule,
     NgClass,
     NgTemplateOutlet,
     NgbDropdownModule,

src-ui/src/app/components/manage/tag-list/tag-list.component.ts

@@ -1,6 +1,7 @@
 import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
 import {
   NgbDropdownModule,
   NgbPaginationModule,
@@ -27,6 +28,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
     IfPermissionsDirective,
     FormsModule,
     ReactiveFormsModule,
+    RouterModule,
     NgClass,
     NgTemplateOutlet,
     NgbDropdownModule,

src-ui/src/app/services/document-list-view.service.spec.ts

@@ -651,4 +651,25 @@ describe('DocumentListViewService', () => {
     documentListViewService.displayFields = customFields as any
     expect(documentListViewService.displayFields).toEqual(['custom_field_1'])
   })
+
+  it('should generate quick filter URL with filter rules', () => {
+    const routerSpy = jest.spyOn(router, 'createUrlTree')
+    const urlTree = documentListViewService.getQuickFilterUrl(filterRules)
+    expect(routerSpy).toHaveBeenCalledWith(['/documents'], {
+      queryParams: expect.objectContaining({
+        tags__id__all: tags__id__all,
+      }),
+    })
+    expect(urlTree).toBeDefined()
+  })
+
+  it('should generate quick filter URL preserving default state', () => {
+    documentListViewService.reload()
+    httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true`
+    )
+    const urlTree = documentListViewService.getQuickFilterUrl(filterRules)
+    expect(urlTree).toBeDefined()
+    expect(router.createUrlTree).toBeDefined()
+  })
 })

src-ui/src/app/services/document-list-view.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, inject } from '@angular/core'
-import { ParamMap, Router } from '@angular/router'
+import { ParamMap, Router, UrlTree } from '@angular/router'
 import { Observable, Subject, first, takeUntil } from 'rxjs'
 import {
   DEFAULT_DISPLAY_FIELDS,
@@ -483,6 +483,18 @@ export class DocumentListViewService {
     this.router.navigate(['documents'])
   }
 
+  getQuickFilterUrl(filterRules: FilterRule[]): UrlTree {
+    const defaultState = {
+      ...this.defaultListViewState(),
+      ...(this.listViewStates.get(null) ?? {}),
+      filterRules,
+    }
+    const params = paramsFromViewState(defaultState)
+    return this.router.createUrlTree(['/documents'], {
+      queryParams: params,
+    })
+  }
+
   getLastPage(): number {
     return Math.ceil(this.collectionSize / this.pageSize)
   }