tuain-ng-forms-lib 13.0.15 → 14.0.1

package/src/lib/classes/forms/table/table.ts

@@ -0,0 +1,438 @@
+import { Subject } from 'rxjs';
+import { elementTypes } from '../form.constants';
+import { FormElement } from '../element';
+import { RecordTableColumn } from './column';
+import { TableAction } from './action';
+import { TableRecordData } from './row-data';
+
+const TABLE_SORT_ASCENDING = 'asc';
+const TABLE_SORT_DESCENDING = 'desc';
+
+export interface TableActionEvent {
+  actionCode: string;
+  recordId: any;
+  recordData: any;
+}
+
+export interface TableEvent {
+  tableCode: string;
+  actionCode: string;
+  actionDetail: any;
+}
+
+export class RecordTable extends FormElement {
+  private readonly _inlineActionTrigger = new Subject<TableEvent>();
+  private readonly _globalActionTrigger = new Subject<TableEvent>();
+  private readonly _recordSelectionTrigger = new Subject<TableEvent>();
+  private readonly _selectionActionTrigger = new Subject<TableEvent>();
+  private readonly _getDataTrigger = new Subject<TableEvent>();
+  private readonly _attributeChange = new Subject<any>();
+  private _tableColumnObj = {};
+  private _appendPages: boolean;
+  private _actions: TableAction[];
+  private _actionsObj = {};
+
+  // Mecanismos de filtrado nueva versión
+  private globalFilterStrings: string[] = [];
+  private selectedRecords: any;
+  private globalSearch: boolean;
+  private restrictedId: any;
+  private layout: string;
+
+  tableRecords: TableRecordData[];
+  tableRecordObj = {};
+  visibleRecords: TableRecordData[];
+  columns: RecordTableColumn[];
+  selectable: boolean;
+  selectionBackend: boolean;
+  selectionField: string;
+  allSelected = false;
+
+  tableCode: string;
+  tableTitle: string;
+  currentPage: number;
+  totalPages: number;
+  requestedPage: number;
+  recordsPerPage: number;
+  totalRecordsNumber: number;
+  recordsNumber: number;
+  sorting: any;
+
+  waiting: boolean;
+  clientPaging: boolean;
+  sortable: boolean;
+
+  constructor(tableReceived, formConfig) {
+    super(tableReceived, formConfig);
+    this.elementType = elementTypes.table;
+    this.waiting = false;
+    this.currentPage = 1;
+    this.totalPages = 1;
+    this.requestedPage = 1;
+    this.columns = [];
+    this._tableColumnObj = {};
+    this._actions = [];
+    this._actionsObj = {};
+    this.tableRecords = [];
+    this.globalSearch = false;
+    this.restrictedId = null;
+
+    this.tableTitle = tableReceived.tableTitle;
+    this._appendPages = tableReceived?.append ?? false;
+    this.selectable = tableReceived?.selectable ?? false;
+    this.selectionBackend = tableReceived?.selectionBackend ?? false;
+    this.sortable = tableReceived?.sortable ?? false;
+
+    this.setAttr('allSelected', false);
+    this.setAttr('tableCode', tableReceived.tableCode);
+    this.setAttr('clientPaging', tableReceived?.clientPaging ?? true);
+    this.setAttr('globalSearch', tableReceived?.simpleFilter ?? false);
+    this.setAttr('sorting', { columnName: '', direction: '' });
+    this.setAttr('recordsPerPage', formConfig.defaultRecordsPerPage);
+    this.setAttr('layout', '');
+
+    if (tableReceived.fields) {
+      const columns = [];
+      for (const columnReceived of tableReceived.fields) {
+        const columnDefinition = new RecordTableColumn(columnReceived, this._formConfig);
+        columns.push(columnDefinition);
+        this._tableColumnObj[columnDefinition.fieldCode] = columnDefinition;
+      }
+      this.setAttr('columns', columns);
+    }
+    if (tableReceived.actions) {
+      const tableActions = tableReceived.actions.map(objDef => {
+        let visibleStates = objDef.visibleStates;
+        let enabledStates = objDef.enabledStates;
+        if (!visibleStates) {
+          visibleStates = (objDef.actionModes || '').split(',')
+            .map(state => state.trim())
+            .filter(state => state.length > 0);
+          enabledStates = (objDef.actionModes || '').split(',')
+            .map(state => state.trim())
+            .filter(state => state.length > 0);
+        }
+        return { ...objDef, visibleStates, enabledStates };
+      });
+      for (const actionReceived of tableActions) {
+        const inlineAction = new TableAction(actionReceived);
+        this._actions.push(inlineAction);
+        this._actionsObj[inlineAction.actionCode] = inlineAction;
+      }
+    }
+    this.selectionField = (this.selectable) ? tableReceived?.selectionField : null;
+    // Filtros predefinidos en el formulario
+    if (tableReceived.filters) {
+      for (let index = 0; index < tableReceived.filters.length; index++) {
+        this.addFilterDefinition(tableReceived.filters[index].fieldCode, tableReceived.filters[index]);
+      }
+    }
+  }
+
+  get columnNames() { return Object.keys(this._tableColumnObj); }
+  get inlineActionTrigger() { return this._inlineActionTrigger; }
+  get globalActionTrigger() { return this._globalActionTrigger; }
+  get selectionActionTrigger() { return this._selectionActionTrigger; }
+  get recordSelectionTrigger() { return this._recordSelectionTrigger; }
+  get getDataTrigger() { return this._getDataTrigger; }
+  get attributeChange() { return this._attributeChange; }
+
+  getLayout() { return this.layout; }
+  setLayout(layout) { this.setAttr('layout', layout); }
+  hasActions() { return (this._actions.length > 0); }
+  getSelectedRecords() { return this.tableRecords.filter(rec => rec.selected).map(rec => rec.recordId); }
+  activateGlobalSearch() { this.globalSearch = true; }
+  inactivateGlobalSearch() { this.globalSearch = false; }
+  columnDefinition(fieldCode) { return this._tableColumnObj[fieldCode]; }
+  putOnWait() { this.waiting = true; }
+  freeWaiting() { this.waiting = false; }
+
+  setAttr(name: string, value: any) {
+    this[name] = value;
+    if (this._formConfig.monitoredTableAttributes.includes(name)) {
+      this._attributeChange.next({ name, value });
+    }
+  }
+
+  notifyGlobalAction(actionCode) {
+    const tableEvent: TableEvent = {
+      tableCode: this.tableCode,
+      actionCode,
+      actionDetail: null
+    };
+    this._globalActionTrigger.next(tableEvent);
+  }
+
+  notifyInlineAction(tableActionEvent: TableActionEvent) {
+    const tableEvent: TableEvent = {
+      tableCode: this.tableCode,
+      actionCode: tableActionEvent.actionCode,
+      actionDetail: {
+        recordId: tableActionEvent.recordId,
+        recordData: tableActionEvent.recordData
+      }
+    };
+    this._inlineActionTrigger.next(tableEvent);
+  }
+
+  notifyRecordSelection(recordId) {
+    const record = this.getTableRecord(recordId);
+    if (!record) { return; }
+    record.toggleSelect();
+    const tableEvent: TableEvent = {
+      tableCode: this.tableCode,
+      actionCode: null,
+      actionDetail: {
+        recordId: record.recordId,
+        recordData: record.recordData
+      }
+    };
+    this.recordSelectionTrigger.next(tableEvent);
+  }
+
+  notifySelectionAction(actionCode) {
+    const tableEvent: TableEvent = {
+      tableCode: this.tableCode,
+      actionCode,
+      actionDetail: {
+        selectedRecords: this.selectedRecords
+      }
+    };
+    this._selectionActionTrigger.next(tableEvent);
+  }
+
+  notifyGetDataAction(requestedPage = null) {
+    this.updateVisibleRecords();
+    this.requestedPage = requestedPage || this.currentPage;
+    const tableEvent: TableEvent = {
+      tableCode: this.tableCode,
+      actionCode: null,
+      actionDetail: null,
+    };
+    this._getDataTrigger.next(tableEvent);
+    return null;
+  }
+
+  clean() {
+    this.tableRecords = [];
+    this.unSelectAll();
+    this.tableRecordObj = {};
+    this.updateVisibleRecords();
+  }
+
+  selectAll() {
+    this.setAttr('allSelected', true);
+    this.tableRecords.forEach(record => record.select());
+    this.setAttr('selectedRecords', this.getSelectedRecords());
+    return true;
+
+  }
+
+  unSelectAll() {
+    this.setAttr('allSelected', false);
+    this.tableRecords.forEach(record => record.unselect());
+    this.setAttr('selectedRecords', this.getSelectedRecords());
+    return true;
+  }
+
+  setTableRecords(tableRecords, append) {
+    if (!append) { this.clean(); }
+    const newRecordsObj = { ...this.tableRecordObj };
+    const newRecords = [...this.tableRecords];
+    for (const tableRecord of tableRecords) {
+      const recordReceived: TableRecordData = new TableRecordData(tableRecord, this.columns, this.selectionField);
+      const recordIdKey = recordReceived.recordIdKey;
+      newRecords.push(recordReceived);
+      newRecordsObj[recordIdKey] = recordReceived;
+    }
+    this.tableRecords = newRecords;
+    this.setAttr('selectedRecords', this.getSelectedRecords());
+    this.tableRecordObj = newRecordsObj;
+    this.updateVisibleRecords();
+  }
+
+  appendRecords(records) { this.setTableRecords(records, true); }
+  replaceRecords(records) { this.setTableRecords(records, false); }
+
+  changePage(requestedPage) {
+    if (this.clientPaging) {
+      this.setAttr('currentPage', requestedPage);
+      this.updateVisibleRecords();
+    } else {
+      this.notifyGetDataAction(requestedPage);
+    }
+  }
+
+  updateVisibleRecords() {
+    // updateView const changeViewAttributes = ['currentPage', 'recordsPerPage', 'sorting'];
+    let visibleRecords: any[];
+    if (this.clientPaging) {
+      let filteredRecords = this.getFilteredRecords();
+      this.setAttr('totalRecordsNumber', filteredRecords.length);
+      visibleRecords = filteredRecords.slice((this.currentPage - 1) * this.recordsPerPage,
+        (this.currentPage - 1) * this.recordsPerPage + this.recordsPerPage);
+    } else {
+      visibleRecords = this.tableRecords;
+    }
+    this.setAttr('visibleRecords', visibleRecords);
+  }
+
+  updateFromServer(tableReceived) {
+    this.requestedPage = 1;
+    this.clean();
+    this.visible = tableReceived?.visible || true;
+    this.totalPages = tableReceived.totalPages || 1;
+    this.recordsNumber = tableReceived.recordsNumber;
+    this.setAttr('currentPage', +tableReceived?.currentPage ?? 1);
+    this.setAttr('recordsPerPage', +tableReceived.recordsPerPage);
+    this.setAttr('totalRecordsNumber', (this.clientPaging) ? tableReceived.tableRecords.length : +tableReceived.totalRecordsNumber);
+    this.setAttr('sorting', {
+      columnName: tableReceived.sortingColumn || '',
+      direction: tableReceived.sortingDirection || ''
+    });
+    this.waiting = false;
+    if (this._appendPages) {
+      this.replaceRecords(tableReceived.tableRecords);
+    } else {
+      this.appendRecords(tableReceived.tableRecords);
+    }
+    this.updateVisibleRecords();
+  }
+
+  getTableRecord(recordId) {
+    const recordIdKey = (typeof recordId === 'object') ? JSON.stringify(recordId) : recordId;
+    return (this.tableRecordObj && recordId && this.tableRecordObj[recordId])
+      ? this.tableRecordObj[recordId] : null;
+  }
+
+  getAction(actionCode) {
+    return (this._actionsObj && actionCode && this._actionsObj[actionCode])
+      ? this._actionsObj[actionCode] : null;
+  }
+
+  getActions(actionClass: string = this._formConfig.tableActions.inline, actionTypes: string[] = null) {
+    return this._actions.filter(actionDef => {
+      const typeIncluded = (actionTypes) ? actionTypes.includes(actionDef.actionType) : true;
+      return actionDef.actionClass === actionClass && typeIncluded;
+    });
+  }
+
+  // Filtros
+
+  setFilterById(id) {
+    if (this.restrictedId === id) { return; }
+    this.restrictedId = id;
+    this.updateVisibleRecords();
+  }
+
+  cleanIdFilter() {
+    if (this.restrictedId === null) { return; }
+    this.restrictedId = null;
+    this.updateVisibleRecords();
+  }
+
+  setGlobalFilterString(text) {
+    this.globalFilterStrings = text.split(' ').filter(t => t && t.trim().length > 0).map(t => t.trim()) ?? [];
+    if (this.clientPaging) {
+      this.changePage(1);
+    }
+  }
+
+  addFilterDefinition(columnName, filterDefinition) {
+    const tableColumn = this.columnDefinition(columnName);
+    tableColumn && tableColumn.addFilterDefinition(filterDefinition);
+  }
+
+  getFilteredRecords() {
+    let filteredRecords = this.tableRecords;
+    if (this.restrictedId) {
+      filteredRecords = filteredRecords.filter(record => record.recordId === this.restrictedId);
+    }
+    if (this.globalFilterStrings.length > 0) {
+      filteredRecords = filteredRecords.filter(record => record.hasPattern(this.globalFilterStrings, this._tableColumnObj));
+    }
+    const columnFilters = this.columns.filter(column => column.filter).map(column => column.filter);
+    if (columnFilters.length > 0) {
+      filteredRecords = filteredRecords.filter(record => record.hasCondition(columnFilters));
+    }
+    return filteredRecords;
+  }
+
+  getColumnFilter(columnName: string) {
+    const tableColumn = this.columnDefinition(columnName);
+    return tableColumn?.filter ?? null;
+  }
+
+  addColumnFilter(columnName: string, columnValues: any | any[], operator: string = null) {
+    const tableColumn = this.columnDefinition(columnName);
+    const columnFilterDefinition = tableColumn?.filterDefinition ?? null;
+    if (!columnFilterDefinition) {
+      return null;
+    }
+    tableColumn && tableColumn.addFilter(columnValues, operator);
+    this.updateVisibleRecords();
+  }
+
+  removeColumnFilter(columnName: string) {
+    const tableColumn = this.columnDefinition(columnName);
+    tableColumn && tableColumn.removeFilter();
+    this.updateVisibleRecords();
+  }
+
+  get currentFilter() {
+    const compactFilter: any = {
+      simpleFilterWords: this.globalFilterStrings,
+      advancedFilter: [],
+    };
+    const columnFilters = this.columns.filter(column => column.filter).map(column => column.filter);
+    for (let index = 0; index < columnFilters.length; index++) {
+      const columnFilter = columnFilters[index];
+      compactFilter.advancedFilter.push({
+        fieldCode: columnFilter.fieldCode,
+        operator: columnFilter.operator,
+        fieldValue1: columnFilter.values[0],
+        fieldValue2: columnFilter.values[1],
+      });
+    }
+    return compactFilter;
+  }
+
+  // Ordenamiento de registros local
+
+  sort(columnName, direction) {
+    this.setRequiredOrder(columnName, direction);
+    if (this.clientPaging) {
+      this.localSortData()
+    } else {
+      this.notifyGetDataAction();
+    }
+  }
+
+  setRequiredOrder(columnField, direction = null) {
+    this.setAttr('sorting', {
+      columnName: columnField,
+      direction: (direction === 'ascend') ? TABLE_SORT_ASCENDING : TABLE_SORT_DESCENDING,
+    });
+  }
+
+  localSortData() {
+    if (!this.sorting.columnName || !this.sorting.direction) { return; }
+    this.tableRecords.sort((a, b) => this.recordCompare(a, b, this.sorting.columnName, this.sorting.direction));
+    //this.unSelectAll();
+    this.updateVisibleRecords();
+  }
+
+  recordCompare(recordA: TableRecordData, recordB: TableRecordData, columnCompare, direction) {
+    const recordAValue = recordA.getFieldValue(columnCompare);
+    const recordBValue = recordB.getFieldValue(columnCompare);
+    const recordAColumn = isNaN(recordAValue) ? recordAValue.toLocaleLowerCase() : recordAValue;
+    const recordBColumn = isNaN(recordBValue) ? recordBValue.toLocaleLowerCase() : recordBValue;
+    let result = 0;
+    if (recordAColumn < recordBColumn) {
+      result = -1;
+    } else if (recordAColumn > recordBColumn) {
+      result = 1;
+    }
+    return direction === TABLE_SORT_ASCENDING ? result : -result;
+  }
+}

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

@@ -0,0 +1,53 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormAction } from '../../classes/forms/action';
+
+@Component({
+  selector: 'lib-action',
+  template: `<ng-content></ng-content>`
+})
+
+export class ActionComponent implements OnInit {
+  formConfig: any;
+  inProgress: boolean;
+  @Input() action: FormAction;
+  @Input() busy: any;
+  @Input() relatedField: any;
+  @Input() state: any;
+
+  @Input() style = 'primary';
+  @Input() showLabel = true;
+
+  ngOnInit() {
+    this.formConfig = this.action?._formConfig;
+    this.start();
+  }
+
+  start() { }
+
+  activate() {
+    if (this.action?.notifyActivation) {
+      this.action.notifyActivation();
+    }
+  }
+
+  visibleOnRestriction() {
+    if (!this.action?.restrictedOnField) {
+      return true;
+    }
+    if ((this.action?.restrictedOnOperator === '=='
+      && this.relatedField === this.action?.restrictedOnValue)
+      || (this.action?.restrictedOnOperator === '!='
+        && this.relatedField !== this.action?.restrictedOnValue)) {
+      return true;
+    }
+    return false;
+  }
+
+  get visible() {
+    return this.action?.visibleOn(this.state) && this.visibleOnRestriction();
+  }
+
+  get disabled() {
+    return !(this.action?.enabledOn(this.state));
+  }
+}

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

@@ -0,0 +1,118 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FieldDescriptor } from '../../classes/forms/field';
+
+const VALUE = 'value';
+const FOCUS = 'focus';
+@Component({
+  selector: 'lib-field',
+  template: `<ng-content></ng-content>`
+})
+export class FieldComponent implements OnInit {
+  formConfig: any;
+  // Atributos obtenidos estáticamente
+  code: string;
+  value: any;
+  fieldInfo: string;
+  fieldAlignment: string;
+  tooltipText: string;
+
+  // Atributos actualizados por subscripción
+  maxLength: any;
+  minValue: any;
+  maxValue: any;
+  onValidation: any;
+  captureType: any;
+  title: any;
+  type: any;
+  visibleLabel: any;
+  required: any;
+  options: any;
+
+  errorType: any;
+  errorCode: any;
+  errorMessage: any;
+
+  @Input() field: FieldDescriptor;
+  @Input() state: any;
+
+  ngOnInit() {
+    if (this.field) {
+      this.formConfig = this.field?._formConfig;
+      // Inicialización
+      const mapping = Object.entries(this.formConfig.componentFieldAttrMap);
+      for (let index = 0; index < mapping.length; index++) {
+        const [fieldAttr1, compAttr1] = mapping[index];
+        const compAttr = compAttr1.toString();
+        const fieldAttr = fieldAttr1.toString();
+        const attributeValue = this.field?.[fieldAttr]
+        this.dafaultProcessFieldChange(compAttr, attributeValue);
+        this.processFieldChange(compAttr, attributeValue);
+      }
+      // Subscripción a cambios en atributos
+      this.field.attributeChange.subscribe(event => {
+        const { name: fieldAttr, value } = event;
+        const compAttr = this.formConfig.componentFieldAttrMap[fieldAttr];
+        this.dafaultProcessFieldChange(compAttr, value);
+        this.processFieldChange(compAttr, value);
+      });
+    }
+    this.start();
+  }
+
+  dafaultProcessFieldChange(attribute: string, value?: any) {
+    if (attribute === VALUE) {
+      this.updateValue();
+    } else if (attribute === FOCUS) {
+      this.focus();
+    } else {
+      this[attribute] = value;
+    }
+  }
+
+  processFieldChange(attribute: string, value?: any) { }
+  start() { }
+  focus() { }
+
+  updateObject() {
+    this.field.setValue(this.value);
+  }
+
+  inputChanged() {
+    this.field.setValue(this.value);
+    this.onChangeContent();
+  }
+
+  inputTyped() {
+    this.field.setValue(this.value);
+    this.onInputChange();
+  }
+
+  updateValue() {
+    this.value = this.field.getValue();
+  }
+
+  onInputChange() {
+    setTimeout(() => this.field.notifyEditionPartial(), 50);
+  }
+
+  onChangeContent() {
+    setTimeout(() => this.field.notifyEditionFinish(), 50);
+  }
+
+  onShowInfo(detail = null) {
+    setTimeout(() => this.field.notifyEditionDetailRequest(detail), 50);
+  }
+
+  numberInputValidation(event) {
+    const k = event.charCode;
+    return (k > 47 && k < 58);
+  }
+
+  get visible() {
+    return this.field?.visibleOn(this.state);
+  }
+
+  get disabled() {
+    return !this.field?.enabledOn(this.state);
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-element',
+  template: `<ng-content></ng-content>`
+})
+export class ElementComponent implements OnInit {
+  formConfig: any;
+
+  @Input() element: any;
+  @Input() form: any;
+  @Input() state: any;
+
+  ngOnInit() {
+    this.formConfig = this.element?._formConfig;
+    this.start();
+  }
+
+  start() { }
+
+  get visible() {
+    return this.element?.visibleOn(this.state);
+  }
+
+  get disabled() {
+    return !this.element?.enabledOn(this.state);
+  }
+}

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,17 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'lib-form-header',
+  template: `<ng-content></ng-content>`
+})
+export class FormHeaderComponent {
+  @Input() formManager: any;
+  @Input() goBackAction: boolean;
+  @Input() showTitle: any;
+  @Input() headerActions: any;
+  @Output() goBackEvent: EventEmitter<object> = new EventEmitter<object>();
+
+  goBackForm() {
+    this.goBackEvent.emit();
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-section',
+  template: `<ng-content></ng-content>`
+})
+export class SectionComponent implements OnInit {
+  @Input() section: any;
+  @Input() formManager: any;
+
+  ngOnInit() {
+    this.start();
+  }
+
+  start() { }
+}

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

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-subsection',
+  template: `<ng-content></ng-content>`
+})
+export class SubSectionComponent implements OnInit {
+  @Input() subSection: any;
+  @Input() showHeader: any;
+  @Input() formManager: any;
+
+  ngOnInit() {
+    this.start();
+  }
+
+  start() { }
+}