tuain-ng-forms-lib 14.4.91 → 14.4.93

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

@@ -0,0 +1,152 @@
+import { Subject } from 'rxjs';
+import { FormPiecePropagate } from './piece-propagate';
+import { FormAction } from './action';
+import { RecordFormSubSection } from './subsection';
+
+const ACTIVE = 'active';
+
+export class RecordFormSection extends FormPiecePropagate {
+  private readonly _activation = new Subject<string>();
+  private readonly _inactivation = new Subject<string>();
+
+  active = false;
+  sectionId: string | null = null;
+  sectionCode: string | null = null;
+  sectionTitle: string | null = null;
+  subSections: RecordFormSubSection[] = [];
+  subSectionsObj: any;
+  private _exclusiveSubSectionsByAttr = {};
+
+  constructor(sectionReceived, formObject, formConfig) {
+    super(sectionReceived, formConfig);
+    this.propagationCustomAttributes = this._formConfig?.propagationCustomAttributes?.sections ?? [];
+    if (!sectionReceived) { return; }
+    this.sectionId = (sectionReceived.sectionId) ? sectionReceived.sectionId.toString() : '';
+    this.sectionCode = (sectionReceived.sectionCode) ? sectionReceived.sectionCode : '';
+    this.sectionTitle = (sectionReceived.sectionTitle) ? sectionReceived.sectionTitle : '';
+    this.subSections = [];
+    this.subSectionsObj = {};
+    if (sectionReceived.subsections) {
+      const subsections = sectionReceived.subsections.map(subSecDef => {
+        const visibleStates = subSecDef.visibleStates ?? [];
+        if (subSecDef.elements && Array.isArray(subSecDef.elements)) {
+          subSecDef.elements = subSecDef.elements.map(elm => ({ code: elm.elementCode, type: elm.elementTypeName }));
+        }
+        return { ...subSecDef, visibleStates };
+      });
+      for (const subsectionReceived of subsections) {
+        const subSectionToAdd = new RecordFormSubSection(subsectionReceived, formObject, formConfig);
+        const subsectionCode = subSectionToAdd.subsectionCode;
+        if (subsectionCode) {
+          this.subSections.push(subSectionToAdd);
+          this.subSectionsObj[subsectionCode] = subSectionToAdd;
+        }
+      }
+    }
+  }
+
+  get code() { return this.sectionCode; }
+  get activation() { return this._activation; }
+  get inactivation() { return this._inactivation; }
+
+  activate() {
+    if (!this.active) {
+      this.active = true;
+      this.sectionCode && this._activation.next(this.sectionCode);
+    }
+  }
+
+  inactivate() {
+    if (this.active) {
+      this.active = false;
+      this.sectionCode && this._inactivation.next(this.sectionCode);
+    }
+  }
+
+  get title() { return this.sectionTitle; }
+  set title(title) { this.sectionTitle = title; }
+
+  getVisibleSubsections(state) {
+    return this.subSections.filter(subSection => subSection.visible);
+  }
+
+  getSubsection(subSectionCode) {
+    return (this.subSectionsObj && this.subSectionsObj[subSectionCode])
+      ? this.subSectionsObj[subSectionCode] : null;
+  }
+
+  activateSubSection(subSectionCode) {
+    if (subSectionCode === this._exclusiveSubSectionsByAttr[ACTIVE]) { return; }
+    const subSection = (this.subSectionsObj && this.subSectionsObj[subSectionCode])
+      ? this.subSectionsObj[subSectionCode] : null;
+    if (subSection) {
+      subSection?.activate();
+      this._exclusiveSubSectionsByAttr[ACTIVE] = subSectionCode;
+    }
+  }
+
+  getFields() {
+    let fieldsArray: any[] = [];
+    if (this.subSections && this.subSections.length > 0) {
+      for (const subSection of this.subSections) {
+        const subsectionFields: any[] = subSection.getFields() ?? [];
+        if (subsectionFields?.length > 0) {
+          fieldsArray = fieldsArray.concat(subsectionFields);
+        }
+      }
+    }
+    return fieldsArray;
+  }
+
+  getActions(): FormAction[] {
+    let actionArray: any[] = [];
+    if (this.subSections && this.subSections.length > 0) {
+      for (const subSection of this.subSections) {
+        const subSectionActions = subSection.getActions() ?? [];
+        if (subSectionActions?.length > 0) {
+          actionArray = actionArray.concat(subSectionActions);
+        }
+      }
+    }
+    return actionArray;
+  }
+
+  getActionNames(): string[] {
+    let actionArray: string[] = [];
+    if (this.subSections && this.subSections.length > 0) {
+      for (const subSection of this.subSections) {
+        actionArray = actionArray.concat(subSection.getActionNames());
+      }
+    }
+    return actionArray;
+  }
+
+  getFieldNames() {
+    let fieldsArray: string[] = [];
+    if (this.subSections && this.subSections.length > 0) {
+      for (const subSection of this.subSections) {
+        fieldsArray = fieldsArray.concat(subSection.getFieldNames());
+      }
+    }
+    return fieldsArray;
+  }
+
+  getField(name) {
+    let field = null;
+    if (this.subSections && this.subSections.length > 0) {
+      for (const subSection of this.subSections) {
+        field = subSection.getField(name);
+        if (field) {
+          return field;
+        }
+      }
+    }
+    return null;
+  }
+
+  override formStateChangeCustomSubscribe(formChangeSubject) {
+    this.subSections?.forEach(subsection => {
+      subsection?.subscribeFormStateChange(formChangeSubject);
+    });
+  }
+}

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

@@ -0,0 +1,90 @@
+import { FormPiecePropagate } from './piece-propagate';
+import { FormAction } from './action';
+import { elementTypes } from './form.constants';
+
+export class RecordFormSubSection extends FormPiecePropagate {
+  _customRender: string | null = null;
+  subsectionId: string | null = null;
+  subsectionCode: string | null = null;
+  subsectionTitle: string | null = null;
+
+  subSectionElements: any[] = [];
+  subSectionFields: any[] = [];
+  subSectionTables: any[] = [];
+  subSectionActions: any[] = [];
+  elementsArray: any = {};
+  active = false;
+
+  constructor(subsectionReceived, formObject, formConfig) {
+    super(subsectionReceived, formConfig);
+    this.propagationCustomAttributes = this._formConfig?.propagationCustomAttributes?.subsections ?? [];
+    if (!subsectionReceived) { return; }
+    this.subsectionId = (subsectionReceived.subsectionId) ? subsectionReceived.subsectionId.toString() : '';
+    this.subsectionCode = (subsectionReceived.subsectionCode) ? subsectionReceived.subsectionCode : '';
+    this.subsectionTitle = (subsectionReceived.subsectionTitle) ? subsectionReceived.subsectionTitle : '';
+    if (subsectionReceived.elements) {
+      for (const receivedElement of subsectionReceived.elements) {
+        let elementObject: any = null;
+        let arrayToAdd: any[] = [];
+        const { type, code } = receivedElement;
+        switch (type) {
+          case elementTypes.field:
+            elementObject = formObject.getField(code);
+            arrayToAdd = this.subSectionFields;
+            break;
+          case elementTypes.table:
+            elementObject = formObject.getTable(code);
+            arrayToAdd = this.subSectionTables;
+            break;
+          case elementTypes.action:
+            elementObject = formObject.getAction(code);
+            arrayToAdd = this.subSectionActions;
+            break;
+        }
+        if (elementObject) {
+          elementObject.elementType = type;
+          arrayToAdd.push(elementObject);
+          this.subSectionElements.push(elementObject);
+          this.elementsArray[code] = elementObject;
+        }
+      }
+    }
+  }
+
+  get customRender() { return this._customRender; }
+  set customRender(customRenderName) { this._customRender = customRenderName; }
+
+  getField(name) {
+    return this.subSectionFields.find(fld => fld.name === name);
+  }
+
+  getFields() {
+    return this.subSectionFields;
+  }
+
+  getFieldNames() {
+    return this.subSectionFields.map(field => field.code);
+  }
+
+  getActions(): FormAction[] {
+    return this.subSectionActions;
+  }
+
+  getActionNames(): string[] {
+    return this.subSectionActions.map(action => action.actionCode);
+  }
+
+  activate() {
+    if (!this.active) {
+      this.active = true;
+      // this.subsectionCode && this._activation.next(this.subsectionCode);
+    }
+  }
+
+  inactivate() {
+    if (this.active) {
+      this.active = false;
+      // this.subsectionCode && this._inactivation.next(this.subsectionCode);
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+import { FormPiece } from '../piece';
+export class TableAction extends FormPiece {
+  newState: string;
+
+  actionCode: string;
+  actionTitle: string;
+  iconName: string;
+  actionType: string;
+  actionClass: string;
+  stateField: string;
+
+  backend: boolean;
+  restrictedOnField: string;
+  restrictedOnValue: string;
+  restrictedOnOperator: string;
+
+  constructor(actionDefinition, formConfig) {
+    super(actionDefinition, formConfig);
+
+    this.actionCode = actionDefinition.actionCode;
+    this.actionTitle = actionDefinition.actionTitle;
+    this.iconName = actionDefinition.iconName || this.actionCode;
+    this.actionType = actionDefinition.actionType || 'STANDARD';
+    this.actionClass = actionDefinition.actionClass || 'INLINE';
+    this.newState = actionDefinition.newState;
+    this.stateField = actionDefinition.stateField || '';
+    this.backend = actionDefinition?.serverAction ?? false;
+    this.restrictedOnField = actionDefinition.fieldRestrictedCode || '';
+    this.restrictedOnValue = actionDefinition.valueRestricted ?? '';
+    this.restrictedOnOperator = actionDefinition.operatorRestricted || '';
+  }
+}

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

@@ -0,0 +1,94 @@
+import { FormPiece } from '../piece';
+
+export interface FilterDef {
+  operators: string[];
+  options: any[];
+}
+
+export interface FilterSetup {
+  fieldCode: string;
+  operator: string;
+  values: any[];
+}
+export class RecordTableColumn extends FormPiece {
+  fieldCode: string = '';
+  fieldTitle: string = '';
+  fieldType: string = '';
+  fieldAlignment: string = '';
+  fieldFormat: string = '';
+  sortable: boolean = true;
+  searchable: boolean = true;
+  sortDirections: string[] = [];
+  // Filtros
+  filterVisible: boolean = false;
+  filterDef: FilterDef | null = null;
+  filterSetup: FilterSetup | null = null;
+
+  constructor(recTableColReceived, formConfig) {
+    super(recTableColReceived, formConfig);
+    this.filterDef = null;
+    if (recTableColReceived) {
+      this.fieldCode = recTableColReceived.fieldCode;
+      this.fieldTitle = recTableColReceived.fieldTitle;
+      this.fieldType = recTableColReceived.fieldTypeCode || this._formConfig.fieldTypes.text;
+      const defaultTypeAlignment = (this._formConfig.tableFieldStyles[this.fieldType] != null) ? this._formConfig.tableFieldStyles[this.fieldType]['text-align'] : 'left';
+      this.fieldAlignment = (recTableColReceived.alignment != null) ? recTableColReceived.alignment.toLowerCase() : defaultTypeAlignment;
+      this._absoluteVisible = recTableColReceived?.visible ?? true;
+      this.sortable = recTableColReceived?.sortable ?? false;
+      this.searchable = recTableColReceived?.searchable ?? true;
+      this.sortDirections = (this.sortable) ? ['ascend', 'descend'] : [];
+      this.fieldFormat = recTableColReceived.format || '';
+      this.customAttributes = recTableColReceived?.customAttributes ?? {};
+    }
+  }
+
+  setSearchable(searchable = true) { this.searchable = searchable; }
+
+  hideFilter() {
+    this.filterVisible = false;
+  }
+
+  addFilterDefinition(filterDefinition) {
+    this.filterDef = {
+      operators: filterDefinition.operators,
+      options: filterDefinition.options ?? null,
+    };
+  }
+
+  get filterDefinition() {
+    return this.filterDef;
+  }
+
+  addFilter(columnValues, operator) {
+    this.filterSetup = {
+      fieldCode: this.fieldCode,
+      operator: operator ?? this.filterDef?.operators[0],
+      values: columnValues,
+    }
+  }
+
+  get filter() {
+    return this.filterSetup;
+  }
+
+  removeFilter() {
+    this.filterSetup = null;
+  }
+
+  get options() {
+    if (this.filterDef?.operators?.length === 1 && this.filterDef?.operators[0] === 'IN') {
+      return this.filterDef?.options;
+    }
+    return null;
+  }
+
+  serSortDirections(ascend: boolean, descend: boolean) {
+    this.sortDirections = [];
+    if (ascend) {
+      this.sortDirections.unshift('ascend');
+    }
+    if (descend) {
+      this.sortDirections.unshift('descend');
+    }
+  }
+}

package/src/lib/classes/forms/table/row-data.ts

@@ -0,0 +1,121 @@
+import { RecordTableColumn } from './column';
+import { operators } from '../form.constants';
+
+export class TableRecordData {
+  recordId: string | null = null;
+  selected: boolean = false;
+  recordData: any = {};
+
+  constructor(recordReceived, recordDefinition: RecordTableColumn[], selectionFieldName = null) {
+    const { tableRecordId, recordData } = recordReceived;
+    this.recordId = tableRecordId;
+    if (!recordDefinition || recordDefinition.length === 0 || !recordData || recordData.length === 0) {
+      return;
+    }
+    const fieldNames = recordDefinition.map(column => column.fieldCode);
+    if (Array.isArray(recordData)) {
+      const rawRecordData = recordData.filter(fieldData => fieldData.fieldCode && fieldNames.includes(fieldData.fieldCode));
+      rawRecordData.forEach(fieldData => {
+        const { fieldCode, fieldValue } = fieldData;
+        const fieldDef = recordDefinition.find(column => column.fieldCode === fieldCode);
+        this.recordData[fieldCode] = fieldValue ?? '';
+        if (fieldCode === selectionFieldName) {
+          this.selected = fieldValue;
+        }
+      });
+    } else {
+      const fields = Object.keys(recordData);
+      fields.forEach(fieldCode => {
+        const fieldValue = recordData[fieldCode];
+        const fieldDef = recordDefinition.find(column => column.fieldCode === fieldCode);
+        this.recordData[fieldCode] = fieldValue ?? '';
+      });
+    }
+  }
+
+  toggleSelect() { this.selected = !this.selected; }
+  select() { this.selected = true; }
+  unselect() { this.selected = false; }
+
+  get recordIdKey() {
+    return (typeof this.recordId === 'object')
+      ? JSON.stringify(this.recordId) : this.recordId;
+  }
+
+  getFieldValue(fieldCode): any {
+    return (fieldCode && this.recordData) ? this.recordData[fieldCode] : null;
+  }
+
+  hasPattern(words, columnObj) {
+    if (!words || words.length === 0) {
+      return true;
+    }
+    for (const word of words) {
+      let wordIsPresent = false;
+      for (const fieldCode in this.recordData) {
+        const columnDef = columnObj?.[fieldCode];
+        if (columnDef?.searchable && this.recordData.hasOwnProperty(fieldCode)) {
+          const term = word.toUpperCase();
+          let fieldValue;
+          if (columnDef.fieldType.toUpperCase().includes('DATE')) {
+            fieldValue = this.recordData[fieldCode].substring(0, 16);
+          } else {
+            fieldValue = this.recordData[fieldCode];
+          }
+          if (fieldValue.toString().toUpperCase().includes(term)) {
+            wordIsPresent = true;
+            break;
+          }
+        }
+      }
+      if (!wordIsPresent) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  hasCondition(columnFilters) {
+    if (!columnFilters || columnFilters.length === 0) {
+      return true;
+    }
+    for (const condition of columnFilters) {
+      const { fieldCode, operator, values } = condition;
+      if (this.recordData.hasOwnProperty(fieldCode)) {
+        const fieldValue = this.recordData[fieldCode];
+        const stringValue = fieldValue.toString().toUpperCase();
+        if (operator === operators.G && fieldValue <= values[0]) {
+          return false;
+        }
+        if (operator === operators.L && fieldValue >= values[0]) {
+          return false;
+        }
+        if (operator === operators.GE && fieldValue < values[0]) {
+          return false;
+        }
+        if (operator === operators.LE && fieldValue > values[0]) {
+          return false;
+        }
+        if (operator === operators.IN && !values.includes(fieldValue)) {
+          return false;
+        }
+        if (operator === operators.EQ) {
+          return fieldValue === values[0];
+        }
+        if (operator === operators.NEQ && fieldValue === values[0]) {
+          return false;
+        }
+        if (operator === operators.HAS && !stringValue.includes(values[0].toString().toUpperCase())) {
+          return false;
+        }
+        if (operator === operators.NOTHAS && stringValue.includes(values[0].toString().toUpperCase())) {
+          return false;
+        }
+        if (operator === operators.BETWEEN && (fieldValue < values[0] || fieldValue > values[1])) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+}