feat: bulk edit - update a field for multiple entities at once (#2565)

closes #2291

Author: Abhinegi2

src/app/core/entity-list/entity-list/entity-list.component.html

@@ -258,6 +258,15 @@ <h2>{{ title }}</h2>
       matTooltip="Select rows for an action on multiple records"
       i18n-matTooltip
     >
+      <button
+        mat-raised-button
+        (click)="editRecords()"
+        [disabled]="selectedRows.length === 0"
+        color="accent"
+        i18n="bulk action button"
+      >
+        Bulk Edit
+      </button>
       <button
         mat-raised-button
         (click)="archiveRecords()"

src/app/core/entity-list/entity-list/entity-list.component.ts

@@ -60,6 +60,7 @@ import {
   EntitySpecialLoaderService,
   LoaderMethod,
 } from "../../entity/entity-special-loader/entity-special-loader.service";
+import { EntityEditService } from "app/core/entity/entity-actions/entity-edit.service";
 
 /**
  * This component allows to create a full-blown table with pagination, filtering, searching and grouping.
@@ -181,6 +182,7 @@ export class EntityListComponent<T extends Entity>
     private dialog: MatDialog,
     private duplicateRecord: DuplicateRecordService,
     private entityActionsService: EntityActionsService,
+    private entityEditService: EntityEditService,
     @Optional() private entitySpecialLoader: EntitySpecialLoaderService,
   ) {
     this.screenWidthObserver
@@ -319,6 +321,13 @@ export class EntityListComponent<T extends Entity>
     this.selectedRows = undefined;
   }
 
+  async editRecords() {
+    await this.entityEditService.edit(
+      this.selectedRows,
+      this.entityConstructor,
+    );
+    this.selectedRows = undefined;
+  }
   async deleteRecords() {
     await this.entityActionsService.delete(this.selectedRows);
     this.selectedRows = undefined;

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

@@ -286,7 +286,7 @@ export class EntityActionsService {
     return true;
   }
 
-  private generateMessageForConfirmationWithUndo(
+  public generateMessageForConfirmationWithUndo(
     entities: Entity[],
     action: string,
   ): string {

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

@@ -0,0 +1,43 @@
+<h2 mat-dialog-title i18n>
+  Bulk edit {{ entitiesToEdit.length }} {{ entityConstructor.labelPlural }}
+</h2>
+<app-dialog-close mat-dialog-close></app-dialog-close>
+
+<mat-dialog-content>
+  <p i18n>
+    You are about to modify the selected records. This action will apply changes
+    across multiple entries. Make sure that the fields you are updating reflect
+    the correct information for all selected records.<br />
+    If you are unsure about making changes across all these records, review your
+    selection carefully before proceeding or edit the records individually.
+  </p>
+
+  <form>
+    <div class="entity-form-cell">
+      <mat-form-field appearance="fill">
+        <mat-label i18n>Property to update</mat-label>
+        <mat-select
+          [formControl]="selectedFieldFormControl"
+          (selectionChange)="onChangeProperty($event.value)"
+        >
+          <mat-option *ngFor="let field of entityFields" [value]="field.key">
+            {{ field.label }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div *ngIf="showValueForm" class="entity-form-cell">
+      <app-entity-field-edit
+        [field]="selectedField"
+        [entity]="entityData"
+        [form]="fieldValueForm"
+      ></app-entity-field-edit>
+    </div>
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+  <button mat-button (click)="save()" i18n="Button label">Save</button>
+  <button mat-button mat-dialog-close i18n="Button label">Cancel</button>
+</mat-dialog-actions>

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

@@ -0,0 +1,7 @@
+.entity-form-cell {
+  mat-form-field,
+  ::ng-deep .mat-mdc-form-field
+   {
+    width: 100%;
+  }
+}

src/app/core/entity/entity-actions/entity-bulk-edit/entity-bulk-edit.component.spec.ts

@@ -0,0 +1,91 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { EntityBulkEditComponent } from "./entity-bulk-edit.component";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
+import { AdminEntityService } from "app/core/admin/admin-entity.service";
+import { EntityFormService } from "app/core/common-components/entity-form/entity-form.service";
+
+describe("EntityBulkEditComponent", () => {
+  let component: EntityBulkEditComponent<any>;
+  let fixture: ComponentFixture<EntityBulkEditComponent<any>>;
+  let mockDialogRef: jasmine.SpyObj<MatDialogRef<EntityBulkEditComponent<any>>>;
+  let mockEntityFormService: jasmine.SpyObj<EntityFormService>;
+
+  const mockEntityConstructor = {
+    schema: new Map([
+      ["name", { label: "foo" }],
+      ["gender", { label: "Male" }],
+    ]),
+  };
+
+  const mockEntityData = {
+    getConstructor: () => mockEntityConstructor,
+    formData: {
+      name: "Value 1",
+      gender: "Value 2",
+    },
+  };
+
+  beforeEach(async () => {
+    mockDialogRef = jasmine.createSpyObj("MatDialogRef", ["close"]);
+    mockEntityFormService = jasmine.createSpyObj("EntityFormService", [
+      "createEntityForm",
+      "extendFormFieldConfig",
+    ]);
+
+    await TestBed.configureTestingModule({
+      imports: [
+        EntityBulkEditComponent,
+        FontAwesomeTestingModule,
+        NoopAnimationsModule,
+        ReactiveFormsModule,
+      ],
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            entitiesToEdit: [mockEntityData],
+            entityConstructor: mockEntityConstructor,
+          },
+        },
+        { provide: MatDialogRef, useValue: mockDialogRef },
+        { provide: EntityFormService, useValue: mockEntityFormService },
+        FormBuilder,
+        AdminEntityService,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EntityBulkEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create the component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should initialize selectedField with proper values", () => {
+    component.selectedField = { id: "foo", label: "Test Label" };
+
+    component.ngOnInit();
+    expect(component.selectedFieldFormControl.value).toBe("");
+  });
+
+  it("should fetch and populate entity fields", () => {
+    component.fetchEntityFieldsData();
+
+    expect(component.entityFields.length).toBe(2);
+    expect(component.entityFields[0].key).toBe("name");
+    expect(component.entityFields[0].label).toBe("foo");
+  });
+
+  it("should not save if the form is invalid", () => {
+    component.selectedFieldFormControl.setValue("");
+
+    component.save();
+
+    expect(mockDialogRef.close).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,147 @@
+import { Component, Inject, OnInit } from "@angular/core";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from "@angular/material/dialog";
+import { MatButtonModule } from "@angular/material/button";
+import { DialogCloseComponent } from "app/core/common-components/dialog-close/dialog-close.component";
+import { MatInputModule } from "@angular/material/input";
+import { ErrorHintComponent } from "app/core/common-components/error-hint/error-hint.component";
+import { EntityFieldEditComponent } from "app/core/common-components/entity-field-edit/entity-field-edit.component";
+import {
+  FormControl,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { FormFieldConfig } from "app/core/common-components/entity-form/FormConfig";
+import { Entity, EntityConstructor } from "../../model/entity";
+import { MatOption } from "@angular/material/core";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatSelectModule } from "@angular/material/select";
+import { CommonModule } from "@angular/common";
+import {
+  EntityForm,
+  EntityFormService,
+} from "app/core/common-components/entity-form/entity-form.service";
+
+@Component({
+  selector: "app-entity-bulk-edit",
+  standalone: true,
+  imports: [
+    MatDialogModule,
+    MatButtonModule,
+    DialogCloseComponent,
+    MatInputModule,
+    ErrorHintComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    FontAwesomeModule,
+    MatTooltipModule,
+    MatOption,
+    MatFormFieldModule,
+    MatSelectModule,
+    CommonModule,
+    EntityFieldEditComponent,
+  ],
+  templateUrl: "./entity-bulk-edit.component.html",
+  styleUrl: "./entity-bulk-edit.component.scss",
+})
+export class EntityBulkEditComponent<E extends Entity> implements OnInit {
+  entityConstructor: EntityConstructor;
+  entitiesToEdit: E[];
+
+  selectedFieldFormControl: FormControl;
+  fieldValueForm: EntityForm<E>;
+
+  /**
+   * The available fields of the entity, from which the user can choose.
+   */
+  entityFields: Array<{ key: string; label: string; field: any }> = [];
+
+  entityData: E;
+  showValueForm: boolean = false;
+  selectedField: FormFieldConfig;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    data: {
+      entitiesToEdit: E[];
+      entityConstructor: EntityConstructor;
+    },
+    private dialogRef: MatDialogRef<any>,
+    private entityFormService: EntityFormService,
+  ) {
+    this.entityConstructor = data.entityConstructor;
+    this.entityData = data.entitiesToEdit[0];
+    this.entitiesToEdit = data.entitiesToEdit;
+  }
+
+  ngOnInit(): void {
+    this.initForm();
+    this.fetchEntityFieldsData();
+  }
+
+  private initForm() {
+    this.selectedFieldFormControl = new FormControl("", Validators.required);
+  }
+
+  fetchEntityFieldsData() {
+    this.entityFields = Array.from(this.entityConstructor.schema.entries())
+      .filter(([key, field]) => field.label)
+      .map(([key, field]) => ({
+        key: key,
+        label: field.label,
+        field: field,
+      }));
+  }
+
+  async onChangeProperty(fieldId: string) {
+    this.selectedField = this.entityFormService.extendFormFieldConfig(
+      fieldId,
+      this.entityConstructor,
+    );
+
+    this.fetchEntityFieldsData();
+
+    const fieldKeys = this.entityFields.map((item) => item.key);
+    await this.createEntityForm(fieldKeys);
+
+    this.showValueForm = true;
+  }
+
+  private async createEntityForm(fieldKeys: string[]) {
+    this.fieldValueForm = await this.entityFormService.createEntityForm(
+      fieldKeys,
+      this.entityData,
+    );
+
+    const selectedField = this.selectedFieldFormControl.value;
+    if (this.fieldValueForm.formGroup.controls[selectedField]) {
+      this.fieldValueForm.formGroup.controls[selectedField].setValue("");
+    }
+  }
+
+  save() {
+    this.selectedFieldFormControl.markAsTouched();
+    if (this.selectedFieldFormControl.invalid) return;
+
+    const selectedField = this.selectedFieldFormControl.value;
+    const value =
+      this.fieldValueForm?.formGroup.controls[selectedField]?.value || "";
+
+    const returnValue: BulkEditAction = {
+      selectedField,
+      value,
+    };
+    this.dialogRef.close(returnValue);
+  }
+}
+
+export interface BulkEditAction {
+  selectedField: string;
+  value: any;
+}