src/app/features/inherited-field/automated-field-update/automated-field-update.component.ts
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)
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-automated-field-update |
| standalone | true |
| imports |
MatButton
MatDialogModule
|
| styleUrls | ./automated-field-update.component.scss |
| templateUrl | ./automated-field-update.component.html |
| styleUrl | ./automated-field-update.component.scss |
No results matching.
DialogCloseComponent
EntityFieldEditComponent
EntityBlockComponent
EntityFieldLabelPipe
MatButton
MatDialogModule
OnInit
Properties |
Methods |
| onConfirm |
onConfirm()
|
|
Returns :
void
|
| 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%;
}