Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 2x 2x 2x | /**
* @module module:lib/components/crud-form/crud-form.component
* @description CRUD form component module.
* @summary Provides `CrudFormComponent` — a wrapper that composes dynamic form
* fields and layout to produce create/read/update/delete forms with validation
* and submission handling.
*
* @link {@link CrudFormComponent}
*/
import { Component, Input, OnInit } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { IonButton, IonIcon } from '@ionic/angular/standalone';
import { TranslatePipe } from '@ngx-translate/core';
import { OperationKeys } from '@decaf-ts/db-decorators';
import { ComponentEventNames } from '@decaf-ts/ui-decorators';
import { Dynamic } from '../../engine/decorators';
import { DefaultFormReactiveOptions } from '../../engine/constants';
import { NgxFormDirective } from '../../engine/NgxFormDirective';
import { LayoutComponent } from '../layout/layout.component';
import { getModelAndRepository } from '../../engine/helpers';
@Dynamic()
@Component({
standalone: true,
selector: 'ngx-decaf-crud-form',
templateUrl: './crud-form.component.html',
styleUrls: ['./crud-form.component.scss'],
imports: [TranslatePipe, ReactiveFormsModule, LayoutComponent, IonButton, IonIcon],
host: { '[attr.id]': 'uid' },
})
export class CrudFormComponent extends NgxFormDirective implements OnInit {
@Input()
showCancelButton = true;
constructor() {
super('CrudFormComponent');
}
/**
* @description Component initialization lifecycle method.
* @summary Initializes the component by setting up the logger, configuring form state
* based on the operation type, and merging configuration options. For READ and DELETE
* operations, the formGroup is set to undefined since these operations don't require
* form input. Configuration options are merged with default settings.
*
* @returns {Promise<void>}
* @memberOf CrudFormComponent
*/
async ngOnInit(): Promise<void> {
this.options = Object.assign(
{},
DefaultFormReactiveOptions,
{ buttons: { submit: { text: this.operation.toLowerCase() } } },
this.options || {},
);
Iif (!this.pk && this.modelName) {
const repo = getModelAndRepository(this.modelName);
Iif (repo) {
this.pk = repo.pk;
}
}
await super.initialize();
}
/**
* @description Handles delete operations by emitting delete events.
* @summary Processes delete requests by emitting a submit event with the
* record's unique identifier as data. This allows parent components to
* handle the actual deletion logic while maintaining separation of concerns.
* The event includes the uid and standard component identification.
*
* @returns {void}
* @memberOf CrudFormComponent
*/
handleDelete(): void {
super.submitEventEmit(
this.model,
'CrudFormComponent',
ComponentEventNames.Submit,
this.handlers,
OperationKeys.DELETE,
);
}
}
|