File

src/app/core/common-components/entity-field-edit/entity-field-edit.component.ts

Description

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.

Implements

OnChanges

Metadata

Index

Properties
Inputs

Constructor

constructor(entityFormService: EntityFormService, entitySchemaService: EntitySchemaService)
Parameters :
Name Type Optional
entityFormService EntityFormService No
entitySchemaService EntitySchemaService No

Inputs

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.

Properties

_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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""