File

src/app/core/common-components/entities-table/entity-inline-edit-actions/entity-inline-edit-actions.component.ts

Description

Buttons to edit an (entities-table) row inline, handling the necessary logic and UI buttons.

Metadata

Index

Properties
Methods
Inputs

Inputs

row
Type : TableRow<T>

Methods

Async delete
delete()
Returns : Promise<void>
Async edit
edit()
Returns : any
resetChanges
resetChanges()

Discard any changes to the given entity and reset it to the state before the user started editing.

Returns : void
Async save
save()

Save an edited record to the database (if validation succeeds).

Returns : Promise<void>

Properties

form
Type : EntityForm<T>
import { Component, inject, Input } from "@angular/core";
import { Angulartics2OnModule } from "angulartics2";
import { DisableEntityOperationDirective } from "../../../permissions/permission-directive/disable-entity-operation.directive";
import { FaIconComponent } from "@fortawesome/angular-fontawesome";
import { MatButtonModule } from "@angular/material/button";
import { TableRow } from "../table-row";
import { Entity } from "../../../entity/model/entity";
import { InvalidFormFieldError } from "../../entity-form/invalid-form-field.error";
import { EntityFormService } from "../../entity-form/entity-form.service";
import { EntityForm } from "#src/app/core/common-components/entity-form/entity-form";
import { AlertService } from "../../../alerts/alert.service";
import { EntityActionsService } from "../../../entity/entity-actions/entity-actions.service";
import { UnsavedChangesService } from "../../../entity-details/form/unsaved-changes.service";

/**
 * Buttons to edit an (entities-table) row inline, handling the necessary logic and UI buttons.
 */
@Component({
  selector: "app-entity-inline-edit-actions",
  imports: [
    Angulartics2OnModule,
    DisableEntityOperationDirective,
    FaIconComponent,
    MatButtonModule,
  ],
  templateUrl: "./entity-inline-edit-actions.component.html",
  styleUrl: "./entity-inline-edit-actions.component.scss",
})
export class EntityInlineEditActionsComponent<T extends Entity = Entity> {
  private entityFormService = inject(EntityFormService);
  private alertService = inject(AlertService);
  private entityRemoveService = inject(EntityActionsService);
  private unsavedChanges = inject(UnsavedChangesService);

  @Input() row: TableRow<T>;

  form: EntityForm<T>;

  async edit() {
    this.form = await this.entityFormService.createEntityForm(
      Array.from(this.row.record.getSchema().keys()),
      this.row.record,
      true,
    );

    this.row.formGroup = this.form.formGroup;

    this.row.formGroup.enable();
  }

  /**
   * Save an edited record to the database (if validation succeeds).
   */
  async save(): Promise<void> {
    try {
      this.row.record = await this.entityFormService.saveChanges(
        this.form,
        this.row.record,
      );
      delete this.row.formGroup;
    } catch (err) {
      if (!(err instanceof InvalidFormFieldError)) {
        this.alertService.addDanger(err.message);
      }
    }
  }

  async delete(): Promise<void> {
    await this.entityRemoveService.delete(this.row.record);
  }

  /**
   * Discard any changes to the given entity and reset it to the state before the user started editing.
   */
  resetChanges() {
    delete this.row.formGroup;
    this.unsavedChanges.pending = false;
  }
}
@if (row && (!row.formGroup || row.formGroup.disabled)) {
  <button
    mat-icon-button
    *appDisabledEntityOperation="{
      entity: row.record,
      operation: 'update',
    }"
    (click)="edit(); $event.stopPropagation()"
  >
    <fa-icon aria-label="edit" icon="pen"></fa-icon>
  </button>
}

@if (row?.formGroup?.enabled) {
  <div class="flex-row">
    <button
      mat-icon-button
      (click)="save(); $event.stopPropagation()"
      angulartics2On="click"
      [angularticsCategory]="row?.record?.getType()"
      angularticsAction="subrecord_inlineedit_save"
    >
      <fa-icon aria-label="save" icon="check-circle"></fa-icon>
    </button>
    <button
      mat-icon-button
      (click)="resetChanges(); $event.stopPropagation()"
      angulartics2On="click"
      [angularticsCategory]="row?.record?.getType()"
      angularticsAction="subrecord_inlineedit_cancel"
    >
      <fa-icon aria-label="cancel" icon="times-circle"></fa-icon>
    </button>
    <button
      mat-icon-button
      *appDisabledEntityOperation="{
        entity: row.record,
        operation: 'delete',
      }"
      (click)="delete(); $event.stopPropagation()"
      angulartics2On="click"
      [angularticsCategory]="row?.record?.getType()"
      angularticsAction="subrecord_inlineedit_delete"
    >
      <fa-icon aria-label="delete" icon="trash"></fa-icon>
    </button>
  </div>
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""