Feature: custom fields filtering & bulk editing (#6484)

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html

@@ -74,6 +74,20 @@
               (apply)="setStoragePaths($event)">
             </pngx-filterable-dropdown>
           }
+          @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.CustomField)) {
+            <pngx-filterable-dropdown title="Custom fields" icon="ui-radios" i18n-title
+              filterPlaceholder="Filter custom fields" i18n-filterPlaceholder
+              [items]="customFields"
+              [disabled]="!userCanEditAll"
+              [editing]="true"
+              [applyOnClose]="applyOnClose"
+              [createRef]="createCustomField.bind(this)"
+              (opened)="openCustomFieldsDropdown()"
+              [(selectionModel)]="customFieldsSelectionModel"
+              [documentCounts]="customFieldDocumentCounts"
+              (apply)="setCustomFields($event)">
+            </pngx-filterable-dropdown>
+          }
         </div>
         <div class="d-flex align-items-center gap-2 ms-auto">
           <div class="btn-toolbar">

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts

@@ -55,6 +55,9 @@ import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage
 import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
 import { RotateConfirmDialogComponent } from '../../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { MergeConfirmDialogComponent } from '../../common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 
 const selectionData: SelectionData = {
   selected_tags: [
@@ -68,6 +71,10 @@ const selectionData: SelectionData = {
     { id: 66, document_count: 3 },
     { id: 55, document_count: 0 },
   ],
+  selected_custom_fields: [
+    { id: 77, document_count: 3 },
+    { id: 88, document_count: 0 },
+  ],
 }
 
 describe('BulkEditorComponent', () => {
@@ -82,6 +89,7 @@ describe('BulkEditorComponent', () => {
   let correspondentsService: CorrespondentService
   let documentTypeService: DocumentTypeService
   let storagePathService: StoragePathService
+  let customFieldsService: CustomFieldsService
   let httpTestingController: HttpTestingController
 
   beforeEach(async () => {
@@ -148,6 +156,18 @@ describe('BulkEditorComponent', () => {
               }),
           },
         },
+        {
+          provide: CustomFieldsService,
+          useValue: {
+            listAll: () =>
+              of({
+                results: [
+                  { id: 77, name: 'customfield1' },
+                  { id: 88, name: 'customfield2' },
+                ],
+              }),
+          },
+        },
         FilterPipe,
         SettingsService,
         {
@@ -189,6 +209,7 @@ describe('BulkEditorComponent', () => {
     correspondentsService = TestBed.inject(CorrespondentService)
     documentTypeService = TestBed.inject(DocumentTypeService)
     storagePathService = TestBed.inject(StoragePathService)
+    customFieldsService = TestBed.inject(CustomFieldsService)
     httpTestingController = TestBed.inject(HttpTestingController)
 
     fixture = TestBed.createComponent(BulkEditorComponent)
@@ -262,6 +283,22 @@ describe('BulkEditorComponent', () => {
     expect(component.storagePathsSelectionModel.selectionSize()).toEqual(1)
   })
 
+  it('should apply selection data to custom fields menu', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    fixture.detectChanges()
+    expect(
+      component.customFieldsSelectionModel.getSelectedItems()
+    ).toHaveLength(0)
+    jest
+      .spyOn(documentListViewService, 'selected', 'get')
+      .mockReturnValue(new Set([3, 5, 7]))
+    jest
+      .spyOn(documentService, 'getSelectionData')
+      .mockReturnValue(of(selectionData))
+    component.openCustomFieldsDropdown()
+    expect(component.customFieldsSelectionModel.selectionSize()).toEqual(1)
+  })
+
   it('should execute modify tags bulk operation', () => {
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
     jest
@@ -679,6 +716,122 @@ describe('BulkEditorComponent', () => {
     )
   })
 
+  it('should execute modify custom fields bulk operation', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    jest
+      .spyOn(documentListViewService, 'documents', 'get')
+      .mockReturnValue([{ id: 3 }, { id: 4 }])
+    jest
+      .spyOn(documentListViewService, 'selected', 'get')
+      .mockReturnValue(new Set([3, 4]))
+    jest
+      .spyOn(permissionsService, 'currentUserHasObjectPermissions')
+      .mockReturnValue(true)
+    component.showConfirmationDialogs = false
+    fixture.detectChanges()
+    component.setCustomFields({
+      itemsToAdd: [{ id: 101 }],
+      itemsToRemove: [{ id: 102 }],
+    })
+    let req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    req.flush(true)
+    expect(req.request.body).toEqual({
+      documents: [3, 4],
+      method: 'modify_custom_fields',
+      parameters: { add_custom_fields: [101], remove_custom_fields: [102] },
+    })
+    httpTestingController.match(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true`
+    ) // list reload
+    httpTestingController.match(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=100000&fields=id`
+    ) // listAllFilteredIds
+  })
+
+  it('should execute modify custom fields bulk operation with confirmation dialog if enabled', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[0]))
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    jest
+      .spyOn(documentListViewService, 'documents', 'get')
+      .mockReturnValue([{ id: 3 }, { id: 4 }])
+    jest
+      .spyOn(documentListViewService, 'selected', 'get')
+      .mockReturnValue(new Set([3, 4]))
+    jest
+      .spyOn(permissionsService, 'currentUserHasObjectPermissions')
+      .mockReturnValue(true)
+    component.showConfirmationDialogs = true
+    fixture.detectChanges()
+    component.setCustomFields({
+      itemsToAdd: [{ id: 101 }],
+      itemsToRemove: [{ id: 102 }],
+    })
+    expect(modal).not.toBeUndefined()
+    modal.componentInstance.confirm()
+    httpTestingController
+      .expectOne(`${environment.apiBaseUrl}documents/bulk_edit/`)
+      .flush(true)
+    httpTestingController.match(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true`
+    ) // list reload
+    httpTestingController.match(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=100000&fields=id`
+    ) // listAllFilteredIds
+
+    // coverage for modal messages
+    component.setCustomFields({
+      itemsToAdd: [{ id: 101 }],
+      itemsToRemove: [],
+    })
+    component.setCustomFields({
+      itemsToAdd: [{ id: 101 }, { id: 102 }],
+      itemsToRemove: [],
+    })
+    component.setCustomFields({
+      itemsToAdd: [],
+      itemsToRemove: [{ id: 101 }, { id: 102 }],
+    })
+    component.setCustomFields({
+      itemsToAdd: [{ id: 100 }],
+      itemsToRemove: [{ id: 101 }, { id: 102 }],
+    })
+  })
+
+  it('should set modal dialog text accordingly for custom fields edit confirmation', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    jest
+      .spyOn(documentListViewService, 'documents', 'get')
+      .mockReturnValue([{ id: 3 }, { id: 4 }])
+    jest
+      .spyOn(documentListViewService, 'selected', 'get')
+      .mockReturnValue(new Set([3, 4]))
+    jest
+      .spyOn(permissionsService, 'currentUserHasObjectPermissions')
+      .mockReturnValue(true)
+    component.showConfirmationDialogs = true
+    fixture.detectChanges()
+    component.setCustomFields({
+      itemsToAdd: [],
+      itemsToRemove: [{ id: 101, name: 'CustomField 101' }],
+    })
+    expect(modal.componentInstance.message).toEqual(
+      'This operation will remove the custom field "CustomField 101" from 2 selected document(s).'
+    )
+    modal.close()
+    component.setCustomFields({
+      itemsToAdd: [{ id: 101, name: 'CustomField 101' }],
+      itemsToRemove: [],
+    })
+    expect(modal.componentInstance.message).toEqual(
+      'This operation will assign the custom field "CustomField 101" to 2 selected document(s).'
+    )
+  })
+
   it('should only execute bulk operations when changes are detected', () => {
     component.setTags({
       itemsToAdd: [],
@@ -696,6 +849,10 @@ describe('BulkEditorComponent', () => {
       itemsToAdd: [],
       itemsToRemove: [],
     })
+    component.setCustomFields({
+      itemsToAdd: [],
+      itemsToRemove: [],
+    })
     httpTestingController.expectNone(
       `${environment.apiBaseUrl}documents/bulk_edit/`
     )
@@ -1179,4 +1336,56 @@ describe('BulkEditorComponent', () => {
     )
     expect(component.storagePaths).toEqual(storagePaths.results)
   })
+
+  it('should support create new custom field', () => {
+    const name = 'New Custom Field'
+    const newCustomField = { id: 101, name: 'New Custom Field' }
+    const customFields: Results<CustomField> = {
+      results: [
+        {
+          id: 1,
+          name: 'Custom Field 1',
+          data_type: CustomFieldDataType.String,
+        },
+        {
+          id: 2,
+          name: 'Custom Field 2',
+          data_type: CustomFieldDataType.String,
+        },
+      ],
+      count: 2,
+      all: [1, 2],
+    }
+
+    const modalInstance = {
+      componentInstance: {
+        dialogMode: EditDialogMode.CREATE,
+        object: { name },
+        succeeded: of(newCustomField),
+      },
+    }
+    const customFieldsListAllSpy = jest.spyOn(customFieldsService, 'listAll')
+    customFieldsListAllSpy.mockReturnValue(of(customFields))
+
+    const customFieldsSelectionModelToggleSpy = jest.spyOn(
+      component.customFieldsSelectionModel,
+      'toggle'
+    )
+
+    const modalServiceOpenSpy = jest.spyOn(modalService, 'open')
+    modalServiceOpenSpy.mockReturnValue(modalInstance as any)
+
+    component.createCustomField(name)
+
+    expect(modalServiceOpenSpy).toHaveBeenCalledWith(
+      CustomFieldEditDialogComponent,
+      { backdrop: 'static' }
+    )
+    expect(customFieldsListAllSpy).toHaveBeenCalled()
+
+    expect(customFieldsSelectionModelToggleSpy).toHaveBeenCalledWith(
+      newCustomField.id
+    )
+    expect(component.customFields).toEqual(customFields.results)
+  })
 })

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -41,6 +41,9 @@ import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/docume
 import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
 import { RotateConfirmDialogComponent } from '../../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { MergeConfirmDialogComponent } from '../../common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
+import { CustomField } from 'src/app/data/custom-field'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 
 @Component({
   selector: 'pngx-bulk-editor',
@@ -55,15 +58,18 @@ export class BulkEditorComponent
   correspondents: Correspondent[]
   documentTypes: DocumentType[]
   storagePaths: StoragePath[]
+  customFields: CustomField[]
 
   tagSelectionModel = new FilterableDropdownSelectionModel()
   correspondentSelectionModel = new FilterableDropdownSelectionModel()
   documentTypeSelectionModel = new FilterableDropdownSelectionModel()
   storagePathsSelectionModel = new FilterableDropdownSelectionModel()
+  customFieldsSelectionModel = new FilterableDropdownSelectionModel()
   tagDocumentCounts: SelectionDataItem[]
   correspondentDocumentCounts: SelectionDataItem[]
   documentTypeDocumentCounts: SelectionDataItem[]
   storagePathDocumentCounts: SelectionDataItem[]
+  customFieldDocumentCounts: SelectionDataItem[]
   awaitingDownload: boolean
 
   unsubscribeNotifier: Subject<any> = new Subject()
@@ -85,6 +91,7 @@ export class BulkEditorComponent
     private settings: SettingsService,
     private toastService: ToastService,
     private storagePathService: StoragePathService,
+    private customFieldService: CustomFieldsService,
     private permissionService: PermissionsService
   ) {
     super()
@@ -166,6 +173,17 @@ export class BulkEditorComponent
         .pipe(first())
         .subscribe((result) => (this.storagePaths = result.results))
     }
+    if (
+      this.permissionService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.CustomField
+      )
+    ) {
+      this.customFieldService
+        .listAll()
+        .pipe(first())
+        .subscribe((result) => (this.customFields = result.results))
+    }
 
     this.downloadForm
       .get('downloadFileTypeArchive')
@@ -297,6 +315,19 @@ export class BulkEditorComponent
       })
   }
 
+  openCustomFieldsDropdown() {
+    this.documentService
+      .getSelectionData(Array.from(this.list.selected))
+      .pipe(first())
+      .subscribe((s) => {
+        this.customFieldDocumentCounts = s.selected_custom_fields
+        this.applySelectionData(
+          s.selected_custom_fields,
+          this.customFieldsSelectionModel
+        )
+      })
+  }
+
   private _localizeList(items: MatchingModel[]) {
     if (items.length == 0) {
       return ''
@@ -495,6 +526,74 @@ export class BulkEditorComponent
     }
   }
 
+  setCustomFields(changedCustomFields: ChangedItems) {
+    if (
+      changedCustomFields.itemsToAdd.length == 0 &&
+      changedCustomFields.itemsToRemove.length == 0
+    )
+      return
+
+    if (this.showConfirmationDialogs) {
+      let modal = this.modalService.open(ConfirmDialogComponent, {
+        backdrop: 'static',
+      })
+      modal.componentInstance.title = $localize`Confirm custom field assignment`
+      if (
+        changedCustomFields.itemsToAdd.length == 1 &&
+        changedCustomFields.itemsToRemove.length == 0
+      ) {
+        let customField = changedCustomFields.itemsToAdd[0]
+        modal.componentInstance.message = $localize`This operation will assign the custom field "${customField.name}" to ${this.list.selected.size} selected document(s).`
+      } else if (
+        changedCustomFields.itemsToAdd.length > 1 &&
+        changedCustomFields.itemsToRemove.length == 0
+      ) {
+        modal.componentInstance.message = $localize`This operation will assign the custom fields ${this._localizeList(
+          changedCustomFields.itemsToAdd
+        )} to ${this.list.selected.size} selected document(s).`
+      } else if (
+        changedCustomFields.itemsToAdd.length == 0 &&
+        changedCustomFields.itemsToRemove.length == 1
+      ) {
+        let customField = changedCustomFields.itemsToRemove[0]
+        modal.componentInstance.message = $localize`This operation will remove the custom field "${customField.name}" from ${this.list.selected.size} selected document(s).`
+      } else if (
+        changedCustomFields.itemsToAdd.length == 0 &&
+        changedCustomFields.itemsToRemove.length > 1
+      ) {
+        modal.componentInstance.message = $localize`This operation will remove the custom fields ${this._localizeList(
+          changedCustomFields.itemsToRemove
+        )} from ${this.list.selected.size} selected document(s).`
+      } else {
+        modal.componentInstance.message = $localize`This operation will assign the custom fields ${this._localizeList(
+          changedCustomFields.itemsToAdd
+        )} and remove the custom fields ${this._localizeList(
+          changedCustomFields.itemsToRemove
+        )} on ${this.list.selected.size} selected document(s).`
+      }
+
+      modal.componentInstance.btnClass = 'btn-warning'
+      modal.componentInstance.btnCaption = $localize`Confirm`
+      modal.componentInstance.confirmClicked
+        .pipe(takeUntil(this.unsubscribeNotifier))
+        .subscribe(() => {
+          this.executeBulkOperation(modal, 'modify_custom_fields', {
+            add_custom_fields: changedCustomFields.itemsToAdd.map((f) => f.id),
+            remove_custom_fields: changedCustomFields.itemsToRemove.map(
+              (f) => f.id
+            ),
+          })
+        })
+    } else {
+      this.executeBulkOperation(null, 'modify_custom_fields', {
+        add_custom_fields: changedCustomFields.itemsToAdd.map((f) => f.id),
+        remove_custom_fields: changedCustomFields.itemsToRemove.map(
+          (f) => f.id
+        ),
+      })
+    }
+  }
+
   createTag(name: string) {
     let modal = this.modalService.open(TagEditDialogComponent, {
       backdrop: 'static',
@@ -581,6 +680,27 @@ export class BulkEditorComponent
       })
   }
 
+  createCustomField(name: string) {
+    let modal = this.modalService.open(CustomFieldEditDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.dialogMode = EditDialogMode.CREATE
+    modal.componentInstance.object = { name }
+    modal.componentInstance.succeeded
+      .pipe(
+        switchMap((newCustomField) => {
+          return this.customFieldService
+            .listAll()
+            .pipe(map((customFields) => ({ newCustomField, customFields })))
+        })
+      )
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(({ newCustomField, customFields }) => {
+        this.customFields = customFields.results
+        this.customFieldsSelectionModel.toggle(newCustomField.id)
+      })
+  }
+
   applyDelete() {
     let modal = this.modalService.open(ConfirmDialogComponent, {
       backdrop: 'static',