Frontend use all option for bulk edit objects instead of sending IDs

2026-03-30 12:52:46 +00:00 · 2026-03-12 01:10:01 -07:00
parent b329581111
commit 7b430e27c6
6 changed files with 140 additions and 74 deletions
--- a/src-ui/src/app/components/manage/document-attributes/document-attributes.component.html
+++ b/src-ui/src/app/components/manage/document-attributes/document-attributes.component.html
@@ -9,8 +9,8 @@
    <div ngbDropdown class="btn-group flex-fill d-sm-none">
      <button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle>
        <i-bs name="text-indent-left"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Select</ng-container></div>
-        @if (activeManagementList.selectedObjects.size > 0) {
-          <pngx-clearable-badge [selected]="activeManagementList.selectedObjects.size > 0" [number]="activeManagementList.selectedObjects.size" (cleared)="activeManagementList.selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
+        @if (activeManagementList.hasSelection) {
+          <pngx-clearable-badge [selected]="activeManagementList.hasSelection" [number]="activeManagementList.selectedCount" (cleared)="activeManagementList.selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
        }
      </button>
      <div ngbDropdownMenu aria-labelledby="dropdownSelectMobile" class="shadow">
@@ -25,7 +25,7 @@
        <span class="input-group-text border-0" i18n>Select:</span>
      </div>
      <div class="btn-group btn-group-sm flex-nowrap">
-        @if (activeManagementList.selectedObjects.size > 0) {
+        @if (activeManagementList.hasSelection) {
          <button class="btn btn-sm btn-outline-secondary" (click)="activeManagementList.selectNone()">
            <i-bs name="slash-circle" class="me-1"></i-bs><ng-container i18n>None</ng-container>
          </button>
@@ -40,11 +40,11 @@
    </div>

    <button type="button" class="btn btn-sm btn-outline-primary" (click)="activeManagementList.setPermissions()"
-      [disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Change) || activeManagementList.selectedObjects.size === 0">
+      [disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Change) || !activeManagementList.hasSelection">
      <i-bs name="person-fill-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
    </button>
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="activeManagementList.delete()"
-      [disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Delete) || activeManagementList.selectedObjects.size === 0">
+      [disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Delete) || !activeManagementList.hasSelection">
      <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
    </button>
    <button type="button" class="btn btn-sm btn-outline-primary ms-md-5" (click)="activeManagementList.openCreateDialog()"
--- a/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.html
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.html
@@ -65,8 +65,8 @@
    @if (displayCollectionSize > 0) {
      <div>
        <ng-container i18n>{displayCollectionSize, plural, =1 {One {{typeName}}} other {{{displayCollectionSize || 0}} total {{typeNamePlural}}}}</ng-container>
-        @if (selectedObjects.size > 0) {
-          &nbsp;({{selectedObjects.size}} selected)
+        @if (hasSelection) {
+          &nbsp;({{selectedCount}} selected)
        }
      </div>
    }
--- a/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.spec.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.spec.ts
@@ -314,33 +314,17 @@ describe('ManagementListComponent', () => {
    expect(component.togggleAll).toBe(false)
  })

-  it('selectAll should use all IDs when collection size exists', () => {
-    ;(component as any).allIDs = [1, 2, 3, 4]
-    component.collectionSize = 4
-
-    component.selectAll()
-
-    expect(component.selectedObjects).toEqual(new Set([1, 2, 3, 4]))
-    expect(component.togggleAll).toBe(true)
-  })
-
-  it('selectAll should fetch IDs when clicked', () => {
+  it('selectAll should activate all-selection mode', () => {
    ;(tagService.listFiltered as jest.Mock).mockClear()
-    ;(component as any).allIDs = []
    component.collectionSize = tags.length

    component.selectAll()

-    expect(tagService.listFiltered).toHaveBeenCalledWith(
-      1,
-      100000,
-      undefined,
-      undefined,
-      undefined,
-      true,
-      { is_root: true }
-    )
+    expect(tagService.listFiltered).not.toHaveBeenCalled()
    expect(component.selectedObjects).toEqual(new Set(tags.map((t) => t.id)))
+    expect((component as any).allSelectionActive).toBe(true)
+    expect(component.hasSelection).toBe(true)
+    expect(component.selectedCount).toBe(tags.length)
    expect(component.togggleAll).toBe(true)
  })

@@ -414,6 +398,33 @@ describe('ManagementListComponent', () => {
    expect(successToastSpy).toHaveBeenCalled()
  })

+  it('should support bulk edit permissions for all filtered items', () => {
+    const bulkEditPermsSpy = jest
+      .spyOn(tagService, 'bulk_edit_objects')
+      .mockReturnValue(of('OK'))
+    component.selectAll()
+
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+    fixture.detectChanges()
+    component.setPermissions()
+    expect(modal).not.toBeUndefined()
+
+    modal.componentInstance.confirmClicked.emit({
+      permissions: {},
+      merge: true,
+    })
+
+    expect(bulkEditPermsSpy).toHaveBeenCalledWith(
+      [],
+      BulkEditObjectOperation.SetPermissions,
+      {},
+      true,
+      true,
+      { is_root: true }
+    )
+  })
+
  it('should support bulk delete objects', () => {
    const bulkEditSpy = jest.spyOn(tagService, 'bulk_edit_objects')
    component.toggleSelected(tags[0])
@@ -434,7 +445,11 @@ describe('ManagementListComponent', () => {
    modal.componentInstance.confirmClicked.emit(null)
    expect(bulkEditSpy).toHaveBeenCalledWith(
      Array.from(selected),
-      BulkEditObjectOperation.Delete
+      BulkEditObjectOperation.Delete,
+      null,
+      null,
+      false,
+      null
    )
    expect(errorToastSpy).toHaveBeenCalled()

@@ -445,6 +460,29 @@ describe('ManagementListComponent', () => {
    expect(successToastSpy).toHaveBeenCalled()
  })

+  it('should support bulk delete for all filtered items', () => {
+    const bulkEditSpy = jest
+      .spyOn(tagService, 'bulk_edit_objects')
+      .mockReturnValue(of('OK'))
+
+    component.selectAll()
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+    fixture.detectChanges()
+    component.delete()
+    expect(modal).not.toBeUndefined()
+
+    modal.componentInstance.confirmClicked.emit(null)
+    expect(bulkEditSpy).toHaveBeenCalledWith(
+      [],
+      BulkEditObjectOperation.Delete,
+      null,
+      null,
+      true,
+      { is_root: true }
+    )
+  })
+
  it('should disallow bulk permissions or delete objects if no global perms', () => {
    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(false)
    expect(component.userCanBulkEdit(PermissionAction.Delete)).toBeFalsy()
--- a/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.ts
+++ b/src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.ts
@@ -13,7 +13,6 @@ import {
  debounceTime,
  delay,
  distinctUntilChanged,
-  map,
  takeUntil,
  tap,
 } from 'rxjs/operators'
@@ -91,8 +90,8 @@ export abstract class ManagementListComponent<T extends MatchingModel>

  public data: T[] = []
  private unfilteredData: T[] = []
-  private allIDs: number[] = []
  private currentExtraParams: { [key: string]: any } = null
+  private allSelectionActive = false

  public page = 1

@@ -109,6 +108,16 @@ export abstract class ManagementListComponent<T extends MatchingModel>
  public selectedObjects: Set<number> = new Set()
  public togggleAll: boolean = false

+  public get hasSelection(): boolean {
+    return this.selectedObjects.size > 0 || this.allSelectionActive
+  }
+
+  public get selectedCount(): number {
+    return this.allSelectionActive
+      ? this.displayCollectionSize
+      : this.selectedObjects.size
+  }
+
  ngOnInit(): void {
    this.reloadData()

@@ -192,7 +201,6 @@ export abstract class ManagementListComponent<T extends MatchingModel>
          this.data = this.filterData(c.results)
          this.collectionSize = this.getCollectionSize(c)
          this.displayCollectionSize = this.getDisplayCollectionSize(c)
-          this.allIDs = []
        }),
        delay(100)
      )
@@ -349,7 +357,16 @@ export abstract class ManagementListComponent<T extends MatchingModel>
    return objects.map((o) => o.id)
  }

+  private getBulkEditFilters(): { [key: string]: any } {
+    const filters = { ...(this.currentExtraParams ?? {}) }
+    if (this._nameFilter?.length) {
+      filters['name__icontains'] = this._nameFilter
+    }
+    return filters
+  }
+
  clearSelection() {
+    this.allSelectionActive = false
    this.togggleAll = false
    this.selectedObjects.clear()
  }
@@ -359,6 +376,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
  }

  selectPage() {
+    this.allSelectionActive = false
    this.selectedObjects = new Set(this.getSelectableIDs(this.data))
    this.togggleAll = this.areAllPageItemsSelected()
  }
@@ -369,44 +387,15 @@ export abstract class ManagementListComponent<T extends MatchingModel>
      return
    }

-    if (this.allIDs.length > 0) {
-      this.selectedObjects = new Set(this.allIDs)
-      this.togggleAll = this.areAllPageItemsSelected()
-      return
-    }
-
-    this.fetchAllFilteredIds((ids) => {
-      this.selectedObjects = new Set(ids)
-      this.togggleAll = this.areAllPageItemsSelected()
-    })
-  }
-
-  private fetchAllFilteredIds(onLoaded?: (ids: number[]) => void): void {
-    this.service
-      .listFiltered(
-        1,
-        100000,
-        this.sortField,
-        this.sortReverse,
-        this._nameFilter,
-        true,
-        this.currentExtraParams
-      )
-      .pipe(
-        takeUntil(this.unsubscribeNotifier),
-        map((results) =>
-          Array.from(
-            new Set(this.getSelectableIDs(this.filterData(results.results)))
-          )
-        )
-      )
-      .subscribe((ids) => {
-        this.allIDs = ids
-        onLoaded?.(ids)
-      })
+    this.allSelectionActive = true
+    this.selectedObjects = new Set(this.getSelectableIDs(this.data))
+    this.togggleAll = this.areAllPageItemsSelected()
  }

  toggleSelected(object) {
+    if (this.allSelectionActive) {
+      this.allSelectionActive = false
+    }
    this.selectedObjects.has(object.id)
      ? this.selectedObjects.delete(object.id)
      : this.selectedObjects.add(object.id)
@@ -414,6 +403,9 @@ export abstract class ManagementListComponent<T extends MatchingModel>
  }

  protected areAllPageItemsSelected(): boolean {
+    if (this.allSelectionActive) {
+      return this.data.length > 0
+    }
    const ids = this.getSelectableIDs(this.data)
    return ids.length > 0 && ids.every((id) => this.selectedObjects.has(id))
  }
@@ -427,10 +419,12 @@ export abstract class ManagementListComponent<T extends MatchingModel>
        modal.componentInstance.buttonsEnabled = false
        this.service
          .bulk_edit_objects(
-            Array.from(this.selectedObjects),
+            this.allSelectionActive ? [] : Array.from(this.selectedObjects),
            BulkEditObjectOperation.SetPermissions,
            permissions,
-            merge
+            merge,
+            this.allSelectionActive,
+            this.allSelectionActive ? this.getBulkEditFilters() : null
          )
          .subscribe({
            next: () => {
@@ -465,8 +459,12 @@ export abstract class ManagementListComponent<T extends MatchingModel>
      modal.componentInstance.buttonsEnabled = false
      this.service
        .bulk_edit_objects(
-          Array.from(this.selectedObjects),
-          BulkEditObjectOperation.Delete
+          this.allSelectionActive ? [] : Array.from(this.selectedObjects),
+          BulkEditObjectOperation.Delete,
+          null,
+          null,
+          this.allSelectionActive,
+          this.allSelectionActive ? this.getBulkEditFilters() : null
        )
        .subscribe({
          next: () => {
--- a/src-ui/src/app/services/rest/abstract-name-filter-service.spec.ts
+++ b/src-ui/src/app/services/rest/abstract-name-filter-service.spec.ts
@@ -96,6 +96,30 @@ export const commonAbstractNameFilterPaperlessServiceTests = (
      })
      req.flush([])
    })
+
+    test('should call appropriate api endpoint for bulk delete on all filtered objects', () => {
+      subscription = service
+        .bulk_edit_objects(
+          [],
+          BulkEditObjectOperation.Delete,
+          null,
+          null,
+          true,
+          { name__icontains: 'hello' }
+        )
+        .subscribe()
+      const req = httpTestingController.expectOne(
+        `${environment.apiBaseUrl}bulk_edit_objects/`
+      )
+      expect(req.request.method).toEqual('POST')
+      expect(req.request.body).toEqual({
+        object_type: endpoint,
+        operation: BulkEditObjectOperation.Delete,
+        all: true,
+        filters: { name__icontains: 'hello' },
+      })
+      req.flush([])
+    })
  })

  beforeEach(() => {
--- a/src-ui/src/app/services/rest/abstract-name-filter-service.ts
+++ b/src-ui/src/app/services/rest/abstract-name-filter-service.ts
@@ -37,13 +37,19 @@ export abstract class AbstractNameFilterService<
    objects: Array<number>,
    operation: BulkEditObjectOperation,
    permissions: { owner: number; set_permissions: PermissionsObject } = null,
-    merge: boolean = null
+    merge: boolean = null,
+    all: boolean = false,
+    filters: { [key: string]: any } = null
  ): Observable<string> {
-    const params = {
-      objects,
+    const params: any = {
      object_type: this.resourceName,
      operation,
    }
+    if (all) {
+      params['all'] = true
+      params['filters'] = filters
+    }
+    params['objects'] = objects
    if (operation === BulkEditObjectOperation.SetPermissions) {
      params['owner'] = permissions?.owner
      params['permissions'] = permissions?.set_permissions