tuain-ng-forms-lib 17.2.21 → 17.2.22

package/src/lib/components/elements/action.component.ts

@@ -0,0 +1,70 @@
+import { Component, signal, Input, OnInit } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { FormAction } from '../../classes/forms/action';
+import { ElementComponent } from './layout/element.component';
+
+const CUSTOM_ATTRIBUTES = 'customAttributes';
+
+const signaledAttributes = [
+  'actionCode', 'actionName', 'iconName', 'inProgress', 'restrictedOnField', 'restrictedOnOperator',
+  'restrictedOnValue', 'visible', 'disabled',
+];
+
+@Component({
+  selector: 'lib-action',
+  template: `<ng-content></ng-content>`
+})
+
+export class ActionComponent extends ElementComponent implements OnInit {
+  private destroy$ = new Subject<void>();
+
+  actionCode: any = signal(null);
+  actionName: any = signal(null);
+  iconName: any = signal(null);
+  inProgress: any = signal(false);
+  restrictedOnField: any = signal(null);
+  restrictedOnOperator: any = signal(null);
+  restrictedOnValue: any = signal(null);
+
+  @Input() action: FormAction | null = null;
+
+  updatePropagatedAttributes() {
+    this.updatePieceAttributes(this.action, signaledAttributes)
+  }
+
+  ngOnInit() {
+    if (!this.action) { return; }
+    this.action.widget = this;
+    this.formConfig = this.action?._formConfig;
+    this.updatePropagatedAttributes();
+    this.replaceCustomAttributes(this.action?.customAttributes);
+    this.action?.attributeChange
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(event => {
+        const { name: attribute, value = null } = event ?? {};
+        const attributeParts = attribute?.split('.') ?? [];
+        if (signaledAttributes.includes(attribute)) {
+          this.updatePieceAttribute(signaledAttributes, attribute, value);
+        } else if (attributeParts?.length > 1 && attributeParts?.[0] === CUSTOM_ATTRIBUTES) {
+          const subAttribute = attributeParts?.[1] ?? null;
+          this.updateCustomAttribute(subAttribute, value);
+        }
+      });
+    this.start();
+  }
+
+  override start() {
+    this.setForm(this.action?._form);
+  }
+
+  activate() {
+    if (this.action?.notifyActivation) {
+      this.action.notifyActivation();
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

package/src/lib/components/elements/field.component.ts

@@ -0,0 +1,115 @@
+import { Component, signal, Input, input, model, OnInit } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { FieldDescriptor } from '../../classes/forms/field';
+import { ElementComponent } from './layout/element.component'
+
+const CUSTOM_ATTRIBUTES = 'customAttributes';
+
+const signaledAttributes = ['captureType', 'errorCode', 'errorMessage', 'errorType', 'defaultValue',
+  'defaultEditable', 'alignment', 'code', 'info', 'required', 'title', 'type', 'format', 'options',
+  'hasChanged', 'maxLength', 'maxValue', 'minLength', 'minValue', 'onValidation', 'outputOnly',
+  'placeholder', 'tooltip', 'validateOnServer', 'visibleLabel', 'visible', 'disabled', 'value',
+];
+
+const VALUE = 'value';
+const FOCUS = 'focus';
+@Component({
+  selector: 'lib-field',
+  template: `<ng-content></ng-content>`
+})
+export class FieldComponent extends ElementComponent implements OnInit {
+  private destroy$ = new Subject<void>();
+
+  // Atributos propagados desde el campo
+  captureType: any = signal<string>('');
+  errorCode: any = signal<string>('');
+  errorMessage: any = signal<string>('');
+  errorType: any = signal<string>('');
+  defaultValue: any = signal<any>(null);
+  defaultEditable: any = signal<boolean>(false);
+  alignment: any = signal<string>('');
+  code: any = signal<string>('');
+  info: any = signal<any>(null);
+  required: any = signal<boolean>(false);
+  title: any = signal<string>('');
+  type: any = signal<string>('');
+  format: any = signal<any>(null);
+  options: any = signal<any[]>([]);
+  hasChanged: any = signal<boolean>(false);
+  minLength: any = signal<number>(0);
+  maxLength: any = signal<number>(0);
+  minValue: any = signal<any>(null);
+  maxValue: any = signal<any>(null);
+  onValidation: any = signal<boolean>(false);
+  outputOnly: any = signal<boolean>(false);
+  placeholder: any = signal<string>('');
+  tooltip: any = signal<string>('');
+  validateOnServer: any = signal<boolean>(false);
+  visibleLabel: any = signal<boolean>(true);
+
+  // value: any;  // Valor del componente relacionado con el campo (pueden diferir en formato y tipo)
+  value = model<any>();  // Valor del componente relacionado con el campo (pueden diferir en formato y tipo)
+  @Input() field: FieldDescriptor | null = null;
+  // field = input.required<FieldDescriptor>();
+
+  updatePropagatedAttributes() {
+    this.updatePieceAttributes(this.field, signaledAttributes)
+  }
+
+  ngOnInit() {
+    if (!this.field) { return; }
+    this.field.widget = this;
+    this.formConfig = this.field?._formConfig;
+    this.updatePropagatedAttributes();
+    this.updateValue();
+    this.replaceCustomAttributes(this.field?.customAttributes);
+    this.field?.attributeChange
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(event => {
+        const { name: attribute, value = null } = event ?? {};
+        const attributeParts = attribute?.split('.') ?? [];
+        if (attribute === VALUE) {
+          this.updateValue();
+        } else if (attribute === FOCUS) {
+          this.focus();
+        } else if (signaledAttributes.includes(attribute)) {
+          this.updatePieceAttribute(signaledAttributes, attribute, value);
+        } else if (attributeParts?.length > 1 && attributeParts?.[0] === CUSTOM_ATTRIBUTES) {
+          const subAttribute = attributeParts?.[1] ?? null;
+          this.updateCustomAttribute(subAttribute, value);
+        }
+      });
+    this.start();
+  }
+
+  updateValue() {
+    try {
+      this.value.set(this.field?.value);
+    } catch (e) {
+      console.log(`Excepción en componente de campo ${e}`);
+    }
+  }
+
+  onInputChange() { setTimeout(() => this.field?.notifyEditionPartial(), 50); }
+  onChangeContent() { setTimeout(() => this.field?.notifyEditionFinish(), 50); }
+  onShowInfo(detail = null) { setTimeout(() => this.field?.notifyEditionDetailRequest(detail), 50); }
+
+  focus() { }
+
+  updateObject(widgetUpdate = true) { this.field?.setValue(this.value(), widgetUpdate); }
+
+  inputChanged() {
+    this.updateObject();
+    this.onChangeContent();
+  }
+
+  inputTyped() {
+    this.updateObject(false);
+    this.onInputChange();
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

package/src/lib/components/elements/layout/element.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { PieceComponent } from './piece.component';
+
+@Component({
+  selector: 'lib-element',
+  template: `<ng-content></ng-content>`
+})
+export class ElementComponent extends PieceComponent {
+  @Input() element: any;
+
+  start() {
+    this.setForm(this.element?._form);
+  }
+}

package/src/lib/components/elements/layout/form-error.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'lib-form-error',
+  template: `<ng-content></ng-content>`
+})
+export class FormErrorComponent {
+  @Input() errorTitle: any;
+  @Input() errorMessage: any;
+  @Input() errorType: any;
+}

package/src/lib/components/elements/layout/form-header.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'lib-form-header',
+  template: `<ng-content></ng-content>`
+})
+export class FormHeaderComponent {
+  @Input() form: any;
+  @Output() goBackEvent: EventEmitter<void> = new EventEmitter<void>();
+
+  goBackForm() {
+    this.goBackEvent.emit();
+  }
+}

package/src/lib/components/elements/layout/piece.component.ts

@@ -0,0 +1,60 @@
+import { Component, signal, computed } from '@angular/core';
+
+const CUSTOM_ATTRIBUTES = 'customAttributes';
+@Component({
+  selector: 'lib-piece',
+  template: `<ng-content></ng-content>`
+})
+export class PieceComponent {
+  form: any;
+  formConfig: any;
+  visible: any = signal(false);
+  disabled: any = signal(false);
+  enabled: any = computed(() => !this.disabled());
+  customAttributes: any = signal({});
+
+  setForm(form) { this.form = form; }
+
+  propagatedAttributeChange(attribute: string, value?: any) { }
+
+  updatePieceAttribute(signaledAttributes, signaledAttribute, value) {
+    if (!signaledAttributes.includes(signaledAttribute)) { return; }
+    this[signaledAttribute]?.set(value);
+    this.propagatedAttributeChange(signaledAttribute, value);
+  }
+
+  updatePieceAttributes(piece, signaledAttributes) {
+    if (!piece) { return; }
+    // Se recore el conjunto de los atributos propagados desde el piece y se asigna el valor respectivo
+    for (let index = 0; index < signaledAttributes.length; index++) {
+      const signaledAttribute = signaledAttributes[index];
+      try {
+        this[signaledAttribute]?.set(piece?.[signaledAttribute]);
+        this.propagatedAttributeChange(signaledAttribute, piece?.[signaledAttribute]);
+      } catch (e) {
+        console.log(`Señal ${signaledAttribute} invalida en el componente. ${e}`);
+      }
+    }
+  }
+
+  // Función que las subclases pueden sobrecargar para manejar un comportamiento específico
+  customAttributeChange(subAttribute: string, value?: any) { }
+
+  updateCustomAttribute(attrName, attrValue) {
+    this.customAttributes.update(oldCustomAttr => {
+      oldCustomAttr[attrName] = attrValue;
+      return oldCustomAttr;
+    });
+    // Ejecución de función personalizada ante un cambio de atributo personalizado
+    this.customAttributeChange(attrName, attrValue);
+  }
+
+  replaceCustomAttributes(customAttributes) {
+    this.customAttributes.set(customAttributes ?? {});
+    Object.keys(customAttributes).forEach(attrName => {
+      const attrValue = customAttributes[attrName];
+      // Ejecución de función personalizada ante un cambio de atributo personalizado
+      this.customAttributeChange(attrName, attrValue);
+    });
+  }
+}

package/src/lib/components/elements/layout/section.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { PieceComponent } from './piece.component';
+
+const CUSTOM_ATTRIBUTES = 'customAttributes';
+
+const signaledAttributes = [
+  'visible', 'disabled',
+];
+
+@Component({
+  selector: 'lib-section',
+  template: `<ng-content></ng-content>`
+})
+export class SectionComponent extends PieceComponent implements OnInit {
+  private destroy$ = new Subject<void>();
+
+  @Input() section: any;
+
+  updatePropagatedAttributes() {
+    this.updatePieceAttributes(this.section, signaledAttributes)
+  }
+
+  ngOnInit() {
+    if (!this.section) { return; }
+    this.formConfig = this.section?._formConfig;
+    this.updatePropagatedAttributes();
+    this.replaceCustomAttributes(this.section?.customAttributes);
+    this.section?.attributeChange
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(event => {
+        const { name: attribute, value = null } = event ?? {};
+        const attributeParts = attribute?.split('.') ?? [];
+        if (signaledAttributes.includes(attribute)) {
+          this.updatePieceAttribute(signaledAttributes, attribute, value);
+        } else if (attributeParts?.length > 1 && attributeParts?.[0] === CUSTOM_ATTRIBUTES) {
+          const subAttribute = attributeParts?.[1] ?? null;
+          this.updateCustomAttribute(subAttribute, value);
+        }
+      });
+    this.start();
+  }
+
+  start() {
+    this.setForm(this.section?._form);
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

package/src/lib/components/elements/layout/sub-section.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { PieceComponent } from './piece.component';
+
+const CUSTOM_ATTRIBUTES = 'customAttributes';
+
+const signaledAttributes = [
+  'visible', 'disabled',
+];
+
+@Component({
+  selector: 'lib-subsection',
+  template: `<ng-content></ng-content>`
+})
+export class SubSectionComponent extends PieceComponent implements OnInit {
+  private destroy$ = new Subject<void>();
+
+  @Input() subSection: any;
+
+  updatePropagatedAttributes() {
+    this.updatePieceAttributes(this.subSection, signaledAttributes)
+  }
+
+  ngOnInit() {
+    if (!this.subSection) { return; }
+    this.formConfig = this.subSection?._formConfig;
+    this.updatePropagatedAttributes();
+    this.replaceCustomAttributes(this.subSection?.customAttributes);
+    this.subSection?.attributeChange
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(event => {
+        const { name: attribute, value = null } = event ?? {};
+        const attributeParts = attribute?.split('.') ?? [];
+        if (signaledAttributes.includes(attribute)) {
+          this.updatePieceAttribute(signaledAttributes, attribute, value);
+        } else if (attributeParts?.length > 1 && attributeParts?.[0] === CUSTOM_ATTRIBUTES) {
+          const subAttribute = attributeParts?.[1] ?? null;
+          this.updateCustomAttribute(subAttribute, value);
+        }
+      });
+    this.start();
+  }
+
+  start() {
+    this.setForm(this.subSection?._form);
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

package/src/lib/components/elements/tables/table-record-action.component.ts

@@ -0,0 +1,66 @@
+import { Component, Input, Output, OnInit, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { PieceComponent } from '../layout/piece.component';
+import { TableEvent, TableActionEvent } from '../../../classes/forms/table/table';
+import { TableAction } from '../../../classes/forms/table/action';
+
+const INLINE_ACTION = 'INLINE';
+const CUSTOM_ATTRIBUTES = 'customAttributes';
+
+const signaledAttributes = [
+  'visible', 'disabled',
+];
+
+@Component({
+  selector: 'lib-table-record-action',
+  template: `<ng-content></ng-content>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class LibTableRecordActionComponent extends PieceComponent implements OnInit {
+  @Input() recordId: any;
+  @Input() recordData: any;
+  @Input() action: TableAction | undefined;
+
+  @Output() actionSelected: EventEmitter<TableActionEvent> = new EventEmitter<TableActionEvent>();
+
+  updatePropagatedAttributes() {
+    this.updatePieceAttributes(this.action, signaledAttributes)
+  }
+
+  ngOnInit() {
+    if (!this.action) { return; }
+    this.formConfig = this.action?._formConfig;
+    this.updatePropagatedAttributes();
+    this.replaceCustomAttributes(this.action?.customAttributes);
+    this.start();
+  }
+
+  start() {
+    if (this.action && this.action.restrictedOnField && this.recordData) {
+      const relatedField = this.action.restrictedOnField;
+      if (relatedField) {
+        const relatedFieldValue = this.recordData[relatedField];
+        const restrictionOper = this.action.restrictedOnOperator;
+        const restrictionValue = this.action.restrictedOnValue;
+        let visibility = false;
+        if ((restrictionOper === '==' || restrictionOper === '===') && relatedFieldValue === restrictionValue) {
+          visibility = true;
+        } else if ((restrictionOper === '!=' || restrictionOper === '!==') && relatedFieldValue !== restrictionValue) {
+          visibility = true;
+        }
+        this.visible.set(visibility);
+      }
+    }
+  }
+
+  onActivate() {
+    const tableEvent: TableActionEvent = {
+      actionCode: this.action?.actionCode ?? '',
+      recordId: this.recordId,
+      recordData: this.recordData,
+    };
+    this.actionSelected.emit(tableEvent);
+  }
+
+  class() { }
+}

package/src/lib/components/elements/tables/table-record-field.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'lib-table-record-field',
+  template: `<ng-content></ng-content>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class LibTableRecordFieldComponent implements OnInit {
+  @Input() fieldCode: any;
+  @Input() fieldType: any;
+  @Input() fieldValue: any;
+  @Input() column: any = null;
+
+  ngOnInit() {
+    this.start();
+  }
+
+  start() { }
+}

package/src/lib/components/elements/tables/table.component.ts

@@ -0,0 +1,112 @@
+import { Component, signal, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { TableRecordData } from '../../../classes/forms/table/row-data';
+import { TableActionEvent } from '../../../classes/forms/table/table';
+import { RecordTable, TableEvent } from '../../../classes/forms/table/table';
+import { ElementComponent } from '../layout/element.component';
+
+const CUSTOM_ATTRIBUTES = 'customAttributes';
+
+const signaledAttributes = [
+  'allSelected', 'code', 'globalSearch', 'recordsPerPage', 'layout',
+  'columns', 'selectedRecords', 'currentPage', 'totalRecordsNumber', 'visibleRecords',
+  'waiting', 'visible', 'disabled',
+];
+
+@Component({
+  selector: 'lib-table',
+  template: `<ng-content></ng-content>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class LibTableComponent extends ElementComponent implements OnInit {
+  private destroy$ = new Subject<void>();
+
+  // Atributos sincronizados del objeto
+  allSelected: any = signal<any>(null);
+  code: any = signal<string>('');
+  globalSearch: any = signal<any>(null);
+  recordsPerPage: any = signal<any>(null);
+  layout: any = signal<any>(null);
+  columns: any = signal<any>(null);
+  selectedRecords: any = signal<any>(null);
+  currentPage: any = signal<any>(null);
+  totalRecordsNumber: any = signal<any>(null);
+  visibleRecords: any = signal<any[]>([]);
+  waiting: any = signal<boolean>(false);
+
+  globalFilterString: string = '';
+
+  tableFieldStyles: any;
+  loaded = false;
+  selectable = false;
+  hasActions = false;
+  inlineActions: any;
+  globalActions: any;
+  selectionActions: any;
+
+  @Input() table: RecordTable | null = null;
+
+  ngOnInit() {
+    if (!this.table) { return; }
+    this.table.setWidget(this);
+    this.formConfig = this.table?._formConfig;
+
+    this.tableFieldStyles = this.formConfig?.tableFieldStyles;
+    this.selectable = this.table?.selectable;
+    this.hasActions = this.table?.hasActions();
+    this.inlineActions = this.table?.getActions(this.formConfig?.tableActions.inline);
+    this.globalActions = this.table?.getActions(this.formConfig?.tableActions.global);
+    this.selectionActions = this.table?.getActions(this.formConfig?.tableActions.selection);
+    this.globalFilterString = this.table?.globalFilterString;
+    this.updatePropagatedAttributes();
+    this.replaceCustomAttributes(this.table?.customAttributes);
+
+    this.table?.attributeChange
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(event => {
+        const { name: attribute, value = null } = event ?? {};
+        const attributeParts = attribute?.split('.') ?? [];
+        if (attribute === 'visibleRecords') {
+          this.visibleRecords.set(value ?? []);
+          this.updateTableData();
+        } else if (attribute === 'globalFilterString') {
+          this.globalFilterString = value;
+        } else if (signaledAttributes.includes(attribute)) {
+          this.updatePieceAttribute(signaledAttributes, attribute, value);
+        } else if (attributeParts?.length > 1 && attributeParts?.[0] === CUSTOM_ATTRIBUTES) {
+          const subAttribute = attributeParts?.[1] ?? null;
+          this.updateCustomAttribute(subAttribute, value);
+        }
+      });
+    this.start();
+  }
+
+  updatePropagatedAttributes() {
+    this.updatePieceAttributes(this.table, signaledAttributes)
+  }
+
+  updateTableData() { }
+  tableGlobalAction(actionCode: string) { this.table?.notifyGlobalAction(actionCode); }
+  tableSelectionAction(actionCode: string) { this.table?.notifySelectionAction(actionCode); }
+  tableActionSelected(actionEvent: TableActionEvent) { this.table?.notifyInlineAction(actionEvent); }
+  tableSelectionToggle(recordId: any) { this.table?.notifyRecordSelection(recordId); }
+  toggleSelectAll() { return (this.table?.allSelected) ? this.table?.unSelectAll() : this.table?.selectAll(); }
+  globalFilterCompleted() { this.changePage(1); }
+  changePage(requestedPage: number) { this.table?.changePage(requestedPage); }
+  tableColumnSort(columnName: string, direction = null) { this.table?.sort(columnName, direction ?? 'ascend'); }
+  globalFilterChanged() { this.table?.setGlobalFilterString(this.globalFilterString?.trim() ?? '', false); }
+
+  filterHasChanged(column, values) {
+    if (!values || values.length === 0) {
+      this.table?.removeColumnFilter(column.fieldCode);
+    } else {
+      this.table?.addColumnFilter(column.fieldCode, values);
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}