Feature: bulk edit custom field values (#8428)

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html

@@ -60,12 +60,18 @@
           </button>
         }
         @if ((selectionModel.items | filter: filterText:'name').length > 0) {
-          <button class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
+          <button class="list-group-item list-group-item-action bg-light d-flex align-items-center" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
             <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
             <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
           </button>
         }
       }
+      @if (extraButtonTitle) {
+        <button class="list-group-item list-group-item-action bg-light d-flex align-items-center" (click)="extraButtonClicked($event)" [disabled]="disabled">
+          <small class="ms-2 fw-bold">{{extraButtonTitle}}</small>
+          <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
+        </button>
+      }
       @if (!editing && manyToOne) {
         <div class="list-group-item list-group-item-note pt-1 pb-2">
           <small i18n>Click again to exclude items.</small>

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts

@@ -616,4 +616,24 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     document.dispatchEvent(new KeyboardEvent('keydown', { key: 't' }))
     expect(openSpy).toHaveBeenCalled()
   })
+
+  it('should support an extra button and not apply changes when clicked', () => {
+    component.items = items
+    component.icon = 'tag-fill'
+    component.extraButtonTitle = 'Extra'
+    component.selectionModel = selectionModel
+    component.applyOnClose = true
+    let extraButtonClicked,
+      applied = false
+    component.extraButton.subscribe(() => (extraButtonClicked = true))
+    component.apply.subscribe(() => (applied = true))
+    fixture.nativeElement
+      .querySelector('button')
+      .dispatchEvent(new MouseEvent('click')) // open
+    fixture.detectChanges()
+    expect(fixture.debugElement.nativeElement.textContent).toContain('Extra')
+    component.extraButtonClicked()
+    expect(extraButtonClicked).toBeTruthy()
+    expect(applied).toBeFalsy()
+  })
 })

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -437,21 +437,6 @@ export class FilterableDropdownComponent
   @Input()
   createRef: (name) => void
 
-  creating: boolean = false
-
-  @Output()
-  apply = new EventEmitter<ChangedItems>()
-
-  @Output()
-  opened = new EventEmitter()
-
-  get modifierToggleEnabled(): boolean {
-    return this.manyToOne
-      ? this.selectionModel.selectionSize() > 1 &&
-          this.selectionModel.getExcludedItems().length == 0
-      : !this.selectionModel.isNoneSelected()
-  }
-
   @Input()
   set documentCounts(counts: SelectionDataItem[]) {
     if (counts) {
@@ -462,6 +447,27 @@ export class FilterableDropdownComponent
   @Input()
   shortcutKey: string
 
+  @Input()
+  extraButtonTitle: string
+
+  creating: boolean = false
+
+  @Output()
+  apply = new EventEmitter<ChangedItems>()
+
+  @Output()
+  opened = new EventEmitter()
+
+  @Output()
+  extraButton = new EventEmitter<ChangedItems>()
+
+  get modifierToggleEnabled(): boolean {
+    return this.manyToOne
+      ? this.selectionModel.selectionSize() > 1 &&
+          this.selectionModel.getExcludedItems().length == 0
+      : !this.selectionModel.isNoneSelected()
+  }
+
   get name(): string {
     return this.title ? this.title.replace(/\s/g, '_').toLowerCase() : null
   }
@@ -641,4 +647,13 @@ export class FilterableDropdownComponent
       this.selectionModel.get(item.id) !== ToggleableItemState.Selected
     )
   }
+
+  extraButtonClicked() {
+    // don't apply changes when clicking the extra button
+    const applyOnClose = this.applyOnClose
+    this.applyOnClose = false
+    this.dropdown.close()
+    this.extraButton.emit(this.selectionModel.diff())
+    this.applyOnClose = applyOnClose
+  }
 }