Tweakhancement: use anchor element for management list quick filter buttons (#11692)

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/custom-fields/custom-fields.component.html

@@ -42,7 +42,13 @@
                 <button (click)="editField(field)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" ngbDropdownItem i18n>Edit</button>
                 <button class="text-danger" (click)="deleteField(field)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }" ngbDropdownItem i18n>Delete</button>
                 @if (field.document_count > 0) {
-                  <button (click)="filterDocuments(field)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents ({{ field.document_count }})</button>
+                  <a
+                    *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
+                    ngbDropdownItem
+                    [routerLink]="getDocumentFilterUrl(field)"
+                    i18n
+                    >Filter Documents ({{ field.document_count }})</a
+                  >
                 }
               </div>
             </div>
@@ -57,9 +63,13 @@
           </div>
           @if (field.document_count > 0) {
             <div class="btn-group d-none d-sm-inline-block ms-2">
-              <button class="btn btn-sm btn-outline-secondary" type="button" (click)="filterDocuments(field)">
+              <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">{{ field.document_count }}</span>
+                class="btn btn-sm btn-outline-secondary"
-              </button>
+                [routerLink]="getDocumentFilterUrl(field)"
+              >
+                <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">{{ field.document_count }}</span>
+              </a>
             </div>
           }
         </div>

src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts

@@ -4,6 +4,7 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
+import { RouterTestingModule } from '@angular/router/testing'
 import {
   NgbModal,
   NgbModalModule,
@@ -61,6 +62,7 @@ describe('CustomFieldsComponent', () => {
         NgbModalModule,
         NgbPopoverModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        RouterTestingModule,
         CustomFieldsComponent,
         IfPermissionsDirective,
         PageHeaderComponent,
@@ -108,7 +110,9 @@ describe('CustomFieldsComponent', () => {
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const createButton = fixture.debugElement.queryAll(By.css('button'))[1]
+    const createButton = fixture.debugElement
+      .queryAll(By.css('button'))
+      .find((btn) => btn.nativeElement.textContent.trim().includes('Add Field'))
     createButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -133,7 +137,11 @@ describe('CustomFieldsComponent', () => {
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const editButton = fixture.debugElement.queryAll(By.css('button'))[2]
+    const editButton = fixture.debugElement
+      .queryAll(By.css('button'))
+      .find((btn) =>
+        btn.nativeElement.textContent.trim().includes(fields[0].name)
+      )
     editButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -158,7 +166,9 @@ describe('CustomFieldsComponent', () => {
     const deleteSpy = jest.spyOn(customFieldsService, 'delete')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[5]
+    const deleteButton = fixture.debugElement
+      .queryAll(By.css('button'))
+      .find((btn) => btn.nativeElement.textContent.trim().includes('Delete'))
     deleteButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -176,10 +186,10 @@ describe('CustomFieldsComponent', () => {
     expect(reloadSpy).toHaveBeenCalled()
   })
 
-  it('should support filter documents', () => {
+  it('should provide document filter url', () => {
-    const filterSpy = jest.spyOn(listViewService, 'quickFilter')
+    const urlSpy = jest.spyOn(listViewService, 'getQuickFilterUrl')
-    component.filterDocuments(fields[0])
+    component.getDocumentFilterUrl(fields[0])
-    expect(filterSpy).toHaveBeenCalledWith([
+    expect(urlSpy).toHaveBeenCalledWith([
       {
         rule_type: FILTER_CUSTOM_FIELDS_QUERY,
         value: JSON.stringify([

src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, inject } from '@angular/core'
+import { RouterModule } from '@angular/router'
 import {
   NgbDropdownModule,
   NgbModal,
@@ -36,6 +37,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
     NgbDropdownModule,
     NgbPaginationModule,
     NgxBootstrapIconsModule,
+    RouterModule,
   ],
 })
 export class CustomFieldsComponent
@@ -130,8 +132,8 @@ export class CustomFieldsComponent
     return DATA_TYPE_LABELS.find((l) => l.id === field.data_type).name
   }
 
-  filterDocuments(field: CustomField) {
+  getDocumentFilterUrl(field: CustomField) {
-    this.documentListViewService.quickFilter([
+    return this.documentListViewService.getQuickFilterUrl([
       {
         rule_type: FILTER_CUSTOM_FIELDS_QUERY,
         value: JSON.stringify([

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.spec.ts

@@ -13,6 +13,7 @@ import {
 } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
+import { RouterLinkWithHref } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import {
   NgbModal,
@@ -230,12 +231,15 @@ describe('ManagementListComponent', () => {
   })
 
   it('should support quick filter for objects', () => {
-    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
+    const expectedUrl = documentListViewService.getQuickFilterUrl([
-    const filterButton = fixture.debugElement.queryAll(By.css('button'))[9]
-    filterButton.triggerEventHandler('click')
-    expect(qfSpy).toHaveBeenCalledWith([
       { rule_type: FILTER_HAS_TAGS_ALL, value: tags[0].id.toString() },
-    ]) // subclasses set the filter rule type
+    ])
+    const filterLink = fixture.debugElement.query(
+      By.css('a.btn-outline-secondary')
+    )
+    expect(filterLink).toBeTruthy()
+    const routerLink = filterLink.injector.get(RouterLinkWithHref)
+    expect(routerLink.urlTree).toEqual(expectedUrl)
   })
 
   it('should reload on sort', () => {

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)
   }