Merge branch 'dev' into feature-ai

2026-01-12 21:44:21 -06:00 · 2026-01-08 13:59:51 -08:00
parent 88228ba821 ba4d88c801
commit 8a5c52df29
47 changed files with 1582 additions and 196 deletions
--- a/src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.html
+++ b/src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.html
@@ -0,0 +1,75 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+  </button>
+</div>
+<div class="modal-body">
+  @if (message) {
+    <p class="mb-3" [innerHTML]="message"></p>
+  }
+  <div class="btn-group mb-3" role="group">
+    <input
+      type="radio"
+      class="btn-check"
+      name="passwordRemoveMode"
+      id="removeReplace"
+      [(ngModel)]="updateDocument"
+      [value]="true"
+      (ngModelChange)="onUpdateDocumentChange($event)"
+    />
+    <label class="btn btn-outline-primary btn-sm" for="removeReplace">
+      <i-bs name="pencil"></i-bs>
+      <span class="ms-2" i18n>Replace current document</span>
+    </label>
+    <input
+      type="radio"
+      class="btn-check"
+      name="passwordRemoveMode"
+      id="removeCreate"
+      [(ngModel)]="updateDocument"
+      [value]="false"
+      (ngModelChange)="onUpdateDocumentChange($event)"
+    />
+    <label class="btn btn-outline-primary btn-sm" for="removeCreate">
+      <i-bs name="plus"></i-bs>
+      <span class="ms-2" i18n>Create new document</span>
+    </label>
+  </div>
+  @if (!updateDocument) {
+    <div class="d-flex flex-column flex-md-row w-100 gap-3 align-items-center">
+      <div class="form-group d-flex">
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" id="copyMetaRemove" [(ngModel)]="includeMetadata" />
+          <label class="form-check-label" for="copyMetaRemove" i18n> Copy metadata
+          </label>
+        </div>
+        <div class="form-check ms-3">
+          <input class="form-check-input" type="checkbox" id="deleteOriginalRemove" [(ngModel)]="deleteOriginal" />
+          <label class="form-check-label" for="deleteOriginalRemove" i18n> Delete original</label>
+        </div>
+      </div>
+    </div>
+  }
+</div>
+<div class="modal-footer flex-nowrap gap-2">
+  <button
+    type="button"
+    class="btn"
+    [class]="cancelBtnClass"
+    (click)="cancel()"
+    [disabled]="!buttonsEnabled"
+  >
+    <span class="d-inline-block" style="padding-bottom: 1px;">
+      {{cancelBtnCaption}}
+    </span>
+  </button>
+  <button
+    type="button"
+    class="btn"
+    [class]="btnClass"
+    (click)="confirm()"
+    [disabled]="!confirmButtonEnabled || !buttonsEnabled"
+  >
+    {{btnCaption}}
+  </button>
+</div>
--- a/src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.scss
+++ b/src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.scss
--- a/src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.spec.ts
@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { PasswordRemovalConfirmDialogComponent } from './password-removal-confirm-dialog.component'
+
+describe('PasswordRemovalConfirmDialogComponent', () => {
+  let component: PasswordRemovalConfirmDialogComponent
+  let fixture: ComponentFixture<PasswordRemovalConfirmDialogComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: [NgbActiveModal],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        PasswordRemovalConfirmDialogComponent,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(PasswordRemovalConfirmDialogComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should default to replacing the document', () => {
+    expect(component.updateDocument).toBe(true)
+    expect(
+      fixture.debugElement.query(By.css('#removeReplace')).nativeElement.checked
+    ).toBe(true)
+  })
+
+  it('should allow creating a new document with metadata and delete toggle', () => {
+    component.onUpdateDocumentChange(false)
+    fixture.detectChanges()
+
+    expect(component.updateDocument).toBe(false)
+    expect(fixture.debugElement.query(By.css('#copyMetaRemove'))).not.toBeNull()
+
+    component.includeMetadata = false
+    component.deleteOriginal = true
+    component.onUpdateDocumentChange(true)
+    expect(component.updateDocument).toBe(true)
+    expect(component.includeMetadata).toBe(true)
+    expect(component.deleteOriginal).toBe(false)
+  })
+
+  it('should emit confirm when confirmed', () => {
+    let confirmed = false
+    component.confirmClicked.subscribe(() => (confirmed = true))
+    component.confirm()
+    expect(confirmed).toBe(true)
+  })
+})
--- a/src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.ts
@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-password-removal-confirm-dialog',
+  templateUrl: './password-removal-confirm-dialog.component.html',
+  styleUrls: ['./password-removal-confirm-dialog.component.scss'],
+  imports: [FormsModule, NgxBootstrapIconsModule],
+})
+export class PasswordRemovalConfirmDialogComponent extends ConfirmDialogComponent {
+  updateDocument: boolean = true
+  includeMetadata: boolean = true
+  deleteOriginal: boolean = false
+
+  @Input()
+  override title = $localize`Remove password protection`
+
+  @Input()
+  override message =
+    $localize`Create an unprotected copy or replace the existing file.`
+
+  @Input()
+  override btnCaption = $localize`Start`
+
+  constructor() {
+    super()
+  }
+
+  onUpdateDocumentChange(updateDocument: boolean) {
+    this.updateDocument = updateDocument
+    if (this.updateDocument) {
+      this.deleteOriginal = false
+      this.includeMetadata = true
+    }
+  }
+}
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -65,6 +65,12 @@
      <button ngbDropdownItem (click)="editPdf()" [disabled]="!userIsOwner || !userCanEdit || originalContentRenderType !== ContentRenderType.PDF">
        <i-bs name="pencil"></i-bs>&nbsp;<ng-container i18n>PDF Editor</ng-container>
      </button>
+
+      @if (userIsOwner && (requiresPassword || password)) {
+        <button ngbDropdownItem (click)="removePassword()" [disabled]="!password">
+          <i-bs name="unlock"></i-bs>&nbsp;<ng-container i18n>Remove Password</ng-container>
+        </button>
+      }
    </div>
  </div>

--- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
@@ -66,6 +66,7 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
 import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'
+import { PasswordRemovalConfirmDialogComponent } from '../common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component'
 import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
 import {
  DocumentDetailComponent,
@@ -1264,6 +1265,88 @@ describe('DocumentDetailComponent', () => {
    expect(closeSpy).toHaveBeenCalled()
  })

+  it('should support removing password protection from pdfs', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[0]))
+    initNormally()
+    component.password = 'secret'
+    component.removePassword()
+    const dialog =
+      modal.componentInstance as PasswordRemovalConfirmDialogComponent
+    dialog.updateDocument = false
+    dialog.includeMetadata = false
+    dialog.deleteOriginal = true
+    dialog.confirm()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    expect(req.request.body).toEqual({
+      documents: [doc.id],
+      method: 'remove_password',
+      parameters: {
+        password: 'secret',
+        update_document: false,
+        include_metadata: false,
+        delete_original: true,
+      },
+    })
+    req.flush(true)
+  })
+
+  it('should require the current password before removing it', () => {
+    initNormally()
+    const errorSpy = jest.spyOn(toastService, 'showError')
+    component.requiresPassword = true
+    component.password = ''
+
+    component.removePassword()
+
+    expect(errorSpy).toHaveBeenCalled()
+    httpTestingController.expectNone(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+  })
+
+  it('should handle failures when removing password protection', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[0]))
+    initNormally()
+    const errorSpy = jest.spyOn(toastService, 'showError')
+    component.password = 'secret'
+
+    component.removePassword()
+    const dialog =
+      modal.componentInstance as PasswordRemovalConfirmDialogComponent
+    dialog.confirm()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    req.error(new ErrorEvent('failed'))
+
+    expect(errorSpy).toHaveBeenCalled()
+    expect(component.networkActive).toBe(false)
+    expect(dialog.buttonsEnabled).toBe(true)
+  })
+
+  it('should refresh the document when removing password in update mode', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[0]))
+    const refreshSpy = jest.spyOn(openDocumentsService, 'refreshDocument')
+    initNormally()
+    component.password = 'secret'
+
+    component.removePassword()
+    const dialog =
+      modal.componentInstance as PasswordRemovalConfirmDialogComponent
+    dialog.confirm()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    req.flush(true)
+
+    expect(refreshSpy).toHaveBeenCalledWith(doc.id)
+  })
+
  it('should support keyboard shortcuts', () => {
    initNormally()

--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -85,6 +85,7 @@ import { getFilenameFromContentDisposition } from 'src/app/utils/http'
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 import * as UTIF from 'utif'
 import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'
+import { PasswordRemovalConfirmDialogComponent } from '../common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component'
 import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
 import { CorrespondentEditDialogComponent } from '../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from '../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
@@ -180,6 +181,7 @@ export enum ZoomSetting {
    NgxBootstrapIconsModule,
    PdfViewerModule,
    TextAreaComponent,
+    PasswordRemovalConfirmDialogComponent,
  ],
 })
 export class DocumentDetailComponent
@@ -1497,6 +1499,63 @@ export class DocumentDetailComponent
      })
  }

+  removePassword() {
+    if (this.requiresPassword || !this.password) {
+      this.toastService.showError(
+        $localize`Please enter the current password before attempting to remove it.`
+      )
+      return
+    }
+    const modal = this.modalService.open(
+      PasswordRemovalConfirmDialogComponent,
+      {
+        backdrop: 'static',
+      }
+    )
+    modal.componentInstance.title = $localize`Remove password protection`
+    modal.componentInstance.message = $localize`Create an unprotected copy or replace the existing file.`
+    modal.componentInstance.btnCaption = $localize`Start`
+
+    modal.componentInstance.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        const dialog =
+          modal.componentInstance as PasswordRemovalConfirmDialogComponent
+        dialog.buttonsEnabled = false
+        this.networkActive = true
+        this.documentsService
+          .bulkEdit([this.document.id], 'remove_password', {
+            password: this.password,
+            update_document: dialog.updateDocument,
+            include_metadata: dialog.includeMetadata,
+            delete_original: dialog.deleteOriginal,
+          })
+          .pipe(first(), takeUntil(this.unsubscribeNotifier))
+          .subscribe({
+            next: () => {
+              this.toastService.showInfo(
+                $localize`Password removal operation for "${this.document.title}" will begin in the background.`
+              )
+              this.networkActive = false
+              modal.close()
+              if (!dialog.updateDocument && dialog.deleteOriginal) {
+                this.openDocumentService.closeDocument(this.document)
+              } else if (dialog.updateDocument) {
+                this.openDocumentService.refreshDocument(this.documentId)
+              }
+            },
+            error: (error) => {
+              dialog.buttonsEnabled = true
+              this.networkActive = false
+              this.toastService.showError(
+                $localize`Error executing password removal operation`,
+                error
+              )
+            },
+          })
+      })
+  }
+
  printDocument() {
    const printUrl = this.documentsService.getDownloadUrl(
      this.document.id,
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
+++ b/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,
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
+++ b/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)">
-                <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>
-              </button>
+              <a
+                class="btn btn-sm btn-outline-secondary"
+                [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>
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts
+++ b/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', () => {
-    const filterSpy = jest.spyOn(listViewService, 'quickFilter')
-    component.filterDocuments(fields[0])
-    expect(filterSpy).toHaveBeenCalledWith([
+  it('should provide document filter url', () => {
+    const urlSpy = jest.spyOn(listViewService, 'getQuickFilterUrl')
+    component.getDocumentFilterUrl(fields[0])
+    expect(urlSpy).toHaveBeenCalledWith([
      {
        rule_type: FILTER_CUSTOM_FIELDS_QUERY,
        value: JSON.stringify([
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts
+++ b/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) {
-    this.documentListViewService.quickFilter([
+  getDocumentFilterUrl(field: CustomField) {
+    return this.documentListViewService.getQuickFilterUrl([
      {
        rule_type: FILTER_CUSTOM_FIELDS_QUERY,
        value: JSON.stringify([
--- a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts
+++ b/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,
--- a/src-ui/src/app/components/manage/management-list/management-list.component.html
+++ b/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 }">
-              <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>
-            </button>
+            <a
+              class="btn btn-sm btn-outline-secondary"
+              *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>
--- a/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts
+++ b/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 filterButton = fixture.debugElement.queryAll(By.css('button'))[9]
-    filterButton.triggerEventHandler('click')
-    expect(qfSpy).toHaveBeenCalledWith([
+    const expectedUrl = documentListViewService.getQuickFilterUrl([
      { 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', () => {
--- a/src-ui/src/app/components/manage/management-list/management-list.component.ts
+++ b/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) {
-    this.documentListViewService.quickFilter([
+  getDocumentFilterUrl(object: MatchingModel) {
+    return this.documentListViewService.getQuickFilterUrl([
      { rule_type: this.filterRuleType, value: object.id.toString() },
    ])
  }
--- a/src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts
+++ b/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,
--- a/src-ui/src/app/components/manage/tag-list/tag-list.component.ts
+++ b/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,
--- a/src-ui/src/app/services/document-list-view.service.spec.ts
+++ b/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()
+  })
 })
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/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)
  }
--- a/src-ui/src/main.ts
+++ b/src-ui/src/main.ts
@@ -135,6 +135,7 @@ import {
  threeDotsVertical,
  trash,
  uiRadios,
+  unlock,
  upcScan,
  windowStack,
  x,
@@ -353,6 +354,7 @@ const icons = {
  threeDotsVertical,
  trash,
  uiRadios,
+  unlock,
  upcScan,
  windowStack,
  x,