File

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

Index

Properties

Properties

selectedField
selectedField: string
Type : string
value
value: any
Type : any
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 { 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",
  imports: [
    MatDialogModule,
    MatButtonModule,
    DialogCloseComponent,
    MatInputModule,
    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;
}

results matching ""

    No results matching ""