src/app/features/inherited-field/automated-field-update/automated-field-update.component.ts

Description

A confirmation dialog for the user to review and confirm the automated updates of fields in related entities, after a triggering entity has been updated.

(also see AutomatedFieldUpdateConfigService)

Implements

OnInit

Example

Metadata

Relationships

Used by

No results matching.

Index

Properties
Methods

Methods

onConfirm
onConfirm()
Returns : void

Properties

data
Type : unknown
Default value : inject<{ entities: AffectedEntity[]; }>(MAT_DIALOG_DATA)
entityConstructor
Type : EntityConstructor
import { EntityForm } from "#src/app/core/common-components/entity-form/entity-form";
import { EntityFieldEditComponent } from "#src/app/core/entity/entity-field-edit/entity-field-edit.component";
import { EntitySchemaService } from "#src/app/core/entity/schema/entity-schema.service";
import {
  Component,
  DestroyRef,
  inject,
  OnInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
} from "@angular/core";
import { MatButton } from "@angular/material/button";
import {
  MAT_DIALOG_DATA,
  MatDialogModule,
  MatDialogRef,
} from "@angular/material/dialog";
import { EntityBlockComponent } from "#src/app/core/basic-datatypes/entity/entity-block/entity-block.component";
import { DialogCloseComponent } from "#src/app/core/common-components/dialog-close/dialog-close.component";
import { EntityFormService } from "#src/app/core/common-components/entity-form/entity-form.service";
import { FormFieldConfig } from "#src/app/core/common-components/entity-form/FormConfig";
import { EntityFieldLabelPipe } from "#src/app/core/entity/entity-field-label/entity-field-label.pipe";
import { Entity, EntityConstructor } from "#src/app/core/entity/model/entity";

/**
 * Represents an entity that will be affected by a status update.
 * This interface is used to define the structure of the data
 * that will be passed to the
 * AutomatedFieldUpdateComponent for processing.
 */
export interface AffectedEntity {
  /** entityId of the affected entity */
  id: string;

  /** New value to be applied to the target field */
  newValue: string;

  /** Field Id that will receive the status update */
  targetFieldId: string;

  /** Entity type constructor for the target entity */
  targetEntityType: EntityConstructor;

  /** Actual entity which is being modified through automatedconfig rule */
  affectedEntity?: Entity;

  /** Reference field name that triggered the status update */
  relatedReferenceField: string;

  /** Entity type where the related reference field is defined */
  relatedReferenceFieldEntityType?: EntityConstructor;

  form?: EntityForm<Entity>;
  selectedField?: FormFieldConfig;
}

/**
 * A confirmation dialog for the user to review and confirm
 * the automated updates of fields in related entities,
 * after a triggering entity has been updated.
 *
 * (also see AutomatedFieldUpdateConfigService)
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "app-automated-field-update",
  imports: [
    DialogCloseComponent,
    EntityFieldEditComponent,
    EntityBlockComponent,
    EntityFieldLabelPipe,
    MatButton,
    MatDialogModule,
  ],
  templateUrl: "./automated-field-update.component.html",
  styleUrl: "./automated-field-update.component.scss",
})
export class AutomatedFieldUpdateComponent implements OnInit {
  data = inject<{
    entities: AffectedEntity[];
  }>(MAT_DIALOG_DATA);
  private dialogRef =
    inject<MatDialogRef<AutomatedFieldUpdateComponent>>(MatDialogRef);
  private readonly entityFormService = inject(EntityFormService);
  private readonly entitySchemaService = inject(EntitySchemaService);
  private readonly cdr = inject(ChangeDetectorRef);
  private readonly destroyRef = inject(DestroyRef);

  entityConstructor: EntityConstructor;

  async ngOnInit(): Promise<void> {
    for (const entity of this.data.entities) {
      const fieldId = entity.targetFieldId;
      const entityConstructor = entity.targetEntityType;

      entity.selectedField = this.entityFormService.extendFormFieldConfig(
        fieldId,
        entityConstructor,
      );

      const entityForm = await this.entityFormService.createEntityForm(
        [fieldId],
        entity.affectedEntity,
        this.destroyRef,
      );

      entity.form = entityForm;

      const formattedValue = this.entitySchemaService.valueToEntityFormat(
        entity.newValue,
        entity.selectedField,
      );
      entity.form.formGroup.controls[fieldId].setValue(formattedValue);
    }
    this.cdr.markForCheck();
  }

  onConfirm(): void {
    for (const entity of this.data.entities) {
      const fieldId = entity.targetFieldId;
      const formControl = entity.form?.formGroup.controls[fieldId];
      if (formControl) {
        entity.newValue = formControl.value;
      }
    }
    this.dialogRef.close(this.data.entities);
  }
}
<h2 mat-dialog-title i18n>Update related records</h2>
<app-dialog-close mat-dialog-close></app-dialog-close>

<mat-dialog-content>
  <p i18n>
    You have made changes to a field that is linked to other records and can
    automatically update them. The following records are linked through the
    <b>
      "{{
        data.entities[0]?.relatedReferenceField
          | entityFieldLabel: data.entities[0]?.relatedReferenceFieldEntityType
      }}"
    </b>
    field. Please review these affected records below. You can manually change
    the new value if the automatically suggested value is not matching what you
    need.
  </p>

  <table class="full-width">
    @for (entity of data.entities; track entity.id) {
      <tr>
        <td>
          <app-entity-block [entityId]="entity.id"></app-entity-block>
        </td>
        <td>
          <app-entity-field-edit
            [field]="entity.selectedField"
            [entity]="entity.affectedEntity"
            [form]="entity.form"
            [hideInheritButton]="true"
          ></app-entity-field-edit>
        </td>
      </tr>
    }
  </table>
</mat-dialog-content>

<mat-dialog-actions>
  <button mat-button (click)="onConfirm()" i18n>Update related records</button>
  <button mat-button mat-dialog-close i18n>Do not update</button>
</mat-dialog-actions>

./automated-field-update.component.scss

:host ::ng-deep .mat-mdc-form-field {
  width: 100%;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""