src/app/core/common-components/entity-field-edit/entity-field-edit.component.ts
Generic component to display one entity property field's editComponent.
Dynamically extends field details from entity schema and loads the relevant, specific EditComponent implementation.
For viewComponent of a field, see EntityFieldViewComponent.
OnChanges
selector | app-entity-field-edit |
imports |
DynamicComponentDirective
HelpButtonComponent
NgIf
EntityFieldViewComponent
InheritedValueButtonComponent
NgClass
FontAwesomeModule
MatButtonModule
MatTooltipModule
|
styleUrls | ./entity-field-edit.component.scss |
templateUrl | ./entity-field-edit.component.html |
Properties |
Inputs |
constructor(entityFormService: EntityFormService, entitySchemaService: EntitySchemaService)
|
|||||||||
Parameters :
|
compactMode | |
Type : boolean
|
|
Whether to display the field in a limited space, hiding details like the help description button. |
entity | |
Type : T
|
|
field | |
Type : ColumnConfig
|
|
field id or full config |
form | |
Type : EntityForm<T>
|
|
hideLabel | |
Type : boolean
|
|
Whether to display the field label or not. |
_field |
Type : FormFieldConfig
|
full field config extended from schema (used internally and for template) |
import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
import { DynamicComponentDirective } from "../../config/dynamic-components/dynamic-component.directive";
import { HelpButtonComponent } from "../help-button/help-button.component";
import { Entity } from "../../entity/model/entity";
import {
EntityForm,
EntityFormService,
} from "../entity-form/entity-form.service";
import {
ColumnConfig,
FormFieldConfig,
toFormFieldConfig,
} from "../entity-form/FormConfig";
import { NgClass, NgIf } from "@angular/common";
import { EntityFieldViewComponent } from "../entity-field-view/entity-field-view.component";
import { InheritedValueButtonComponent } from "../../../features/default-value-inherited/inherited-value-button/inherited-value-button.component";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { MatButtonModule } from "@angular/material/button";
import { MatTooltipModule } from "@angular/material/tooltip";
import { EntitySchemaService } from "app/core/entity/schema/entity-schema.service";
/**
* Generic component to display one entity property field's editComponent.
*
* Dynamically extends field details from entity schema and
* loads the relevant, specific EditComponent implementation.
*
* For viewComponent of a field, see EntityFieldViewComponent.
*/
@Component({
selector: "app-entity-field-edit",
templateUrl: "./entity-field-edit.component.html",
styleUrls: ["./entity-field-edit.component.scss"],
imports: [
DynamicComponentDirective,
HelpButtonComponent,
NgIf,
EntityFieldViewComponent,
InheritedValueButtonComponent,
NgClass,
FontAwesomeModule,
MatButtonModule,
MatTooltipModule,
],
})
export class EntityFieldEditComponent<T extends Entity = Entity>
implements OnChanges
{
/** field id or full config */
@Input() field: ColumnConfig;
/** full field config extended from schema (used internally and for template) */
_field: FormFieldConfig;
@Input() entity: T;
@Input() form: EntityForm<T>;
/**
* Whether to display the field in a limited space, hiding details like the help description button.
*/
@Input() compactMode: boolean;
/**
* Whether to display the field label or not.
*/
@Input() hideLabel: boolean;
constructor(
private entityFormService: EntityFormService,
private entitySchemaService: EntitySchemaService,
) {}
ngOnChanges(changes: SimpleChanges): void {
if (changes.field || changes.entity) {
this.updateField();
}
}
private updateField() {
if (!this.field) {
this._field = undefined;
return;
}
if (this.entity?.getConstructor()) {
this._field = this.entityFormService.extendFormFieldConfig(
this.field,
this.entity.getConstructor(),
);
} else {
this._field = toFormFieldConfig(this.field);
// add editComponent (because we cannot rely on the entity's schema yet for a new field)
this._field.editComponent =
this._field.editComponent ??
this.entitySchemaService.getComponent(this._field, "edit");
}
}
}
<div
*ngIf="_field && form && _field.editComponent; else displayComponent"
class="flex-row"
[ngClass]="{
hidden: _field?.hideFromForm,
readonlyAfterSet:
_field?.validators?.readonlyAfterSet &&
form?.formGroup?.enabled &&
form?.formGroup?.get(_field.id)?.disabled,
}"
>
<div class="flex-grow">
<ng-container
[appDynamicComponent]="{
component: _field.editComponent,
config: {
formFieldConfig: _field,
formControl: form?.formGroup.get(_field.id),
entity: entity,
entityForm: form,
hideLabel: hideLabel,
},
}"
>
</ng-container>
</div>
<button
*ngIf="_field?.validators?.readonlyAfterSet && form?.formGroup?.enabled"
mat-icon-button
i18n-matTooltip
matTooltip="This field value can only be set when creating a record and cannot be changed afterwards"
type="button"
>
<fa-icon icon="warning"></fa-icon>
</button>
<app-help-button
*ngIf="!compactMode"
[text]="_field.description"
></app-help-button>
<app-inherited-value-button
[form]="form"
[field]="_field"
[entity]="entity"
></app-inherited-value-button>
</div>
<ng-template #displayComponent>
<app-entity-field-view
[field]="_field"
[entity]="entity"
></app-entity-field-view>
</ng-template>
./entity-field-edit.component.scss
.hidden {
display: none;
}
.readonlyAfterSet {
opacity: 0.5;
}