Working bulk editor component

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

@@ -35,7 +35,7 @@ export class FilterableDropdownButtonComponent implements OnInit {
   getSelectedIconName() {
     let iconName = ''
     if (this.selectableItem?.state == SelectableItemState.Selected) iconName = 'check'
-    else if (this.selectableItem?.state == SelectableItemState.PartiallySelected) iconName = 'minus'
+    else if (this.selectableItem?.state == SelectableItemState.PartiallySelected) iconName = 'dash'
     return iconName
   }
 }

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

@@ -1,12 +1,12 @@
 <div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
-  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
+  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="type !== 'actions' && itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
     <div class="d-none d-md-inline">{{title}}</div>
     <div class="d-inline-block d-md-none">
       <svg class="toolbaricon" fill="currentColor">
         <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
       </svg>
     </div>
-    <ng-container *ngIf="itemsSelected?.length > 0">
+    <ng-container *ngIf="type !== 'actions' && itemsSelected?.length > 0">
       <div class="badge bg-secondary text-light rounded-pill badge-corner">
         {{itemsSelected?.length}}
       </div>

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

@@ -17,6 +17,11 @@ export enum SelectableItemState {
   PartiallySelected = 2
 }
 
+export enum FilterableDropdownType {
+  Filtering = 'filtering',
+  Actions = 'actions'
+}
+
 @Component({
   selector: 'app-filterable-dropdown',
   templateUrl: './filterable-dropdown.component.html',
@@ -24,7 +29,10 @@ export enum SelectableItemState {
 })
 export class FilterableDropdownComponent {
 
-  constructor(private filterPipe: FilterPipe) { }
+  @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
+  @ViewChild('dropdown') dropdown: NgbDropdown
+
+  filterText: string
 
   @Input()
   set items(items: ObjectWithId[]) {
@@ -35,7 +43,17 @@ export class FilterableDropdownComponent {
     }
   }
 
-  selectableItems: SelectableItem[] = []
+  _selectableItems: SelectableItem[] = []
+
+  @Input()
+  set selectableItems (selectableItems: SelectableItem[]) {
+    if (this.type == FilterableDropdownType.Actions && this.dropdown?.isOpen()) return
+    else this._selectableItems = selectableItems
+  }
+
+  get selectableItems(): SelectableItem[] {
+    return this._selectableItems
+  }
 
   @Input()
   set itemsSelected(itemsSelected: ObjectWithId[]) {
@@ -54,18 +72,26 @@ export class FilterableDropdownComponent {
   @Input()
   icon: string
 
+  @Input()
+  type: FilterableDropdownType = FilterableDropdownType.Filtering
+
+  @Input()
+  singular: boolean = false
+
   @Output()
   toggle = new EventEmitter()
 
   @Output()
   close = new EventEmitter()
 
-  @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
-  @ViewChild('dropdown') dropdown: NgbDropdown
-
-  filterText: string
+  constructor(private filterPipe: FilterPipe) { }
 
   toggleItem(selectableItem: SelectableItem): void {
+    if (this.singular && selectableItem.state == SelectableItemState.Selected) {
+      this._selectableItems.forEach(si => {
+        if (si.state == SelectableItemState.Selected && si.item.id !== selectableItem.item.id) si.state = SelectableItemState.NotSelected
+      })
+    }
     this.toggle.emit(selectableItem.item)
   }
 
@@ -76,7 +102,7 @@ export class FilterableDropdownComponent {
       }, 0);
     } else {
       this.filterText = ''
-      this.close.next()
+      this.close.emit(this.itemsSelected)
     }
   }