refactor: bulk actions to use a dynamic service registering available actions (#3366)

and use a dropdown UI
closes #2894

---------

Co-authored-by: Sebastian Leidig <[email protected]>
Co-authored-by: Abhishek Negi <[email protected]>

Author: 3 people

src/app/core/common-components/entities-table/entities-table.component.ts

@@ -3,11 +3,11 @@ import {
   Component,
   ContentChildren,
   EventEmitter,
+  inject,
   Input,
   Output,
   QueryList,
   ViewChild,
-  inject,
 } from "@angular/core";
 import {
   MatCheckboxChange,
@@ -312,13 +312,12 @@ export class EntitiesTableComponent<T extends Entity>
   selectRow(row: TableRow<T>, checked: boolean) {
     if (checked) {
       if (!this.selectedRecords.includes(row.record)) {
-        this.selectedRecords.push(row.record);
-      }
-    } else {
-      const index = this.selectedRecords.indexOf(row.record);
-      if (index > -1) {
-        this.selectedRecords.splice(index, 1);
+        this.selectedRecords = [...this.selectedRecords, row.record];
       }
+    } else if (this.selectedRecords.includes(row.record)) {
+      this.selectedRecords = this.selectedRecords.filter(
+        (r) => r !== row.record,
+      );
     }
     this.selectedRecordsChange.emit(this.selectedRecords);
   }

src/app/core/entity-details/entity-actions-menu/entity-action.interface.ts

@@ -5,6 +5,14 @@ import { EntityActionPermission } from "../../permissions/permission-types";
  * Details of an action that users can trigger for a specific entity, displayed in the context menu.
  */
 export interface EntityAction {
+  /**
+   * Determines where this action is available:
+   * - 'all': available for both individual and bulk actions (default)
+   * - 'bulk-only': only available as a bulk action
+   * - 'individual-only': only available for single entity actions
+   */
+  availableFor?: "all" | "bulk-only" | "individual-only";
+
   /**
    * ID for identifying this action in analytics, etc.
    */
@@ -31,11 +39,14 @@ export interface EntityAction {
    * The method being executed when the action is triggered.
    * @param e The entity on which the action is executed
    */
-  execute: (entity: Entity, navigateOnDelete?: boolean) => Promise<boolean>;
+  execute: (
+    entity: Entity | Entity[],
+    navigateOnDelete?: boolean,
+  ) => Promise<boolean>;
 
   /**
    * Controls visibility of the action based on the given entity.
    * Should return a Promise resolving to true if visible.
    */
-  visible?: (entity: Entity) => Promise<boolean>;
+  visible?: (entity: Entity | Entity[]) => Promise<boolean>;
 }

src/app/core/entity-details/entity-actions-menu/entity-actions-menu.component.spec.ts

@@ -35,6 +35,7 @@ describe("EntityActionsMenuComponent", () => {
       label: "Test Action",
       icon: "test_icon",
       execute: () => null,
+      availableFor: "all",
     };
     spyOn(testAction, "execute").and.resolveTo(true);
 

src/app/core/entity-details/entity-actions-menu/entity-actions-menu.component.ts

@@ -1,11 +1,11 @@
 import {
   Component,
   EventEmitter,
+  inject,
   Input,
   OnChanges,
   Output,
   SimpleChanges,
-  inject,
 } from "@angular/core";
 import { Entity } from "../../entity/model/entity";
 import { MatButtonModule } from "@angular/material/button";
@@ -55,9 +55,9 @@ export class EntityActionsMenuComponent implements OnChanges {
    */
   @Input() showExpanded?: boolean;
 
-  ngOnChanges(changes: SimpleChanges): void {
+  async ngOnChanges(changes: SimpleChanges): Promise<void> {
     if (changes.entity) {
-      this.filterAvailableActions();
+      await this.filterAvailableActions();
     }
   }
 
@@ -66,23 +66,11 @@ export class EntityActionsMenuComponent implements OnChanges {
       this.actions = [];
       return;
     }
-    const allActions: EntityAction[] = this.entityActionsMenuService.getActions(
+
+    const allActions = await this.entityActionsMenuService.getActionsForSingle(
       this.entity,
     );
-
-    // check each action’s `visible` property to hide actions not applicable to the current entity
-    const visibleActions = (
-      await Promise.all(
-        allActions.map(async (action) => {
-          const isVisible = action.visible
-            ? await action.visible(this.entity)
-            : true;
-          return isVisible ? action : null;
-        }),
-      )
-    ).filter(Boolean) as EntityAction[];
-
-    this.actions = visibleActions;
+    this.actions = allActions;
   }
 
   async executeAction(action: EntityAction) {

src/app/core/entity-details/entity-actions-menu/entity-actions-menu.service.ts

@@ -24,6 +24,45 @@ export class EntityActionsMenuService {
     ];
   }
 
+  /**
+   * Get only actions available for bulk operations.
+   */
+  async getVisibleActions(
+    entities: Entity | Entity[],
+    availableFor: "bulk-only" | "individual-only" | "all",
+  ): Promise<EntityAction[]> {
+    const entity = Array.isArray(entities) ? entities[0] : entities;
+    const actions = this.getActions(entity).filter((action) => {
+      const avail = action.availableFor ?? "all";
+      return avail === availableFor || avail === "all";
+    });
+    const visibleActions: EntityAction[] = [];
+    for (const action of actions) {
+      let isVisible: boolean;
+      if (action.visible) {
+        isVisible = await action.visible(entities);
+      } else {
+        isVisible = true;
+      }
+      if (isVisible) {
+        visibleActions.push(action);
+      }
+    }
+    return visibleActions;
+  }
+
+  async getActionsForBulk(entities?: Entity[]): Promise<EntityAction[]> {
+    return this.getVisibleActions(entities ?? [], "bulk-only");
+  }
+
+  /**
+   * Get only actions available for single entity operations.
+   * @param entity
+   */
+  async getActionsForSingle(entity?: Entity): Promise<EntityAction[]> {
+    return this.getVisibleActions(entity, "individual-only");
+  }
+
   /**
    * Add (static) actions to be shown for all entity actions context menus.
    */

src/app/core/entity-details/entity-bulk-actions/entity-bulk-actions.component.html

@@ -0,0 +1,25 @@
+<div class="flex-row gap-regular overall-box">
+  <div class="bulk-action-select-wrapper">
+    <mat-form-field class="bulk-action-autocomplete full-width">
+      <mat-label i18n>Select Bulk Action</mat-label>
+
+      <app-basic-autocomplete
+        [formControl]="actionControl"
+        [options]="bulkActions.value()"
+        [optionToString]="actionToString"
+        display="text"
+      ></app-basic-autocomplete>
+
+      @if (!entities() || entities().length === 0) {
+        <mat-hint i18n>
+          Please select one or more rows to enable bulk actions.
+        </mat-hint>
+      } @else {
+        <mat-hint i18n>
+          Action will execute on {{ entities().length }} selected records.
+        </mat-hint>
+      }
+    </mat-form-field>
+  </div>
+  <button mat-raised-button (click)="cancel()" i18n>Cancel</button>
+</div>

src/app/core/entity-details/entity-bulk-actions/entity-bulk-actions.component.scss

@@ -0,0 +1,26 @@
+@use "@angular/material/core/style/elevation" as mat-elevation;
+
+.overall-box {
+  @include mat-elevation.elevation(3);
+  padding: 1em;
+  margin: 1em;
+}
+
+.bulk-action-select-wrapper {
+  position: relative;
+  flex: 1 1 0%;
+  min-width: 320px;
+  max-width: 700px;
+  width: 400px; /* Fixed width for stability */
+}
+
+.bulk-action-autocomplete {
+  /* remove form-field bottom spacing */
+  margin-bottom: 0;
+}
+.bulk-action-autocomplete.full-width {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+}

src/app/core/entity-details/entity-bulk-actions/entity-bulk-actions.component.ts

@@ -0,0 +1,111 @@
+import {
+  Component,
+  inject,
+  input,
+  output,
+  resource,
+  effect,
+} from "@angular/core";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { Entity } from "../../entity/model/entity";
+import { EntityActionsMenuService } from "../entity-actions-menu/entity-actions-menu.service";
+import { EntityAction } from "../entity-actions-menu/entity-action.interface";
+import {
+  BASIC_AUTOCOMPLETE_COMPONENT_IMPORTS,
+  BasicAutocompleteComponent,
+} from "../../common-components/basic-autocomplete/basic-autocomplete.component";
+import { MatButtonModule } from "@angular/material/button";
+
+/**
+ * Allow users to select among the registered bulk actions
+ * that are available in the current context.
+ * Also executes the action.
+ */
+@Component({
+  selector: "app-entity-bulk-actions",
+  templateUrl: "./entity-bulk-actions.component.html",
+  styleUrls: ["./entity-bulk-actions.component.scss"],
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    ReactiveFormsModule,
+    BasicAutocompleteComponent,
+    ...BASIC_AUTOCOMPLETE_COMPONENT_IMPORTS,
+  ],
+})
+export class EntityBulkActionsComponent {
+  /**
+   * List of selected entities for bulk actions
+   */
+  entities = input.required<Entity[]>();
+  private isExecutingAction = false;
+
+  /**
+   * Event emitted when the bulk action mode should be exited
+   * after an action was executed or the user cancelled the bulk actions.
+   */
+  resetBulkActionMode = output();
+
+  private readonly actionsService = inject(EntityActionsMenuService);
+
+  /**
+   * Available bulk actions for the current selection
+   */
+  bulkActions = resource({
+    params: () => ({ entities: this.entities() }),
+    loader: async ({ params }) => {
+      const bulkActions = await this.actionsService.getActionsForBulk(
+        params.entities,
+      );
+      return bulkActions
+        .map((action) => {
+          if (action.action === "merge") {
+            return {
+              ...action,
+              disabled: !this.entities() || this.entities().length !== 2,
+            };
+          }
+          return action;
+        })
+        .filter((action) => !!action);
+    },
+    defaultValue: [],
+  });
+
+  actionControl = new FormControl();
+  actionToString = (action: EntityAction) => action?.label || "";
+
+  constructor() {
+    this.actionControl.valueChanges.subscribe((action) => {
+      if (action) this.onActionSelected(action);
+    });
+    // Enable/disable actionControl based on entities selection
+    effect(() => {
+      const entities = this.entities();
+      if (!entities || entities.length === 0) {
+        this.actionControl.disable({ emitEvent: false });
+      } else {
+        this.actionControl.enable({ emitEvent: false });
+      }
+    });
+  }
+
+  async onActionSelected(action: EntityAction) {
+    if (this.isExecutingAction) {
+      return;
+    }
+
+    this.isExecutingAction = true;
+    if (action && typeof action.execute === "function") {
+      await action.execute(this.entities());
+    }
+
+    this.resetBulkActionMode.emit();
+    this.actionControl.setValue(null, { emitEvent: false });
+    this.isExecutingAction = false;
+  }
+
+  cancel() {
+    this.resetBulkActionMode.emit();
+  }
+}