tuain-ng-forms-lib 14.0.1 → 14.0.3

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

@@ -1,55 +0,0 @@
-import { Subject } from 'rxjs';
-import { elementTypes } from './form.constants';
-import { FormElement } from './element';
-
-const HEADER = 'HEADER';
-
-export class FormAction extends FormElement {
-  private readonly _actionActivated = new Subject<string>();
-
-  inProgress = false;
-  newState: string;
-  backend: boolean;
-
-  actionCode: string;
-  actionName: string;
-  iconName: string;
-
-  restrictedOnField: string;
-  restrictedOnOperator: string;
-  restrictedOnValue: string;
-  customValidation: any;
-
-  constructor(actionDefinition, formConfig) {
-    super(actionDefinition, formConfig);
-    this.elementType = elementTypes.action;
-    this.actionCode = actionDefinition.actionCode ? actionDefinition.actionCode.toString() : '';
-    this.actionName = actionDefinition.actionTitle;
-    this.iconName = actionDefinition.iconName || this.actionCode;
-    this.setCustomAttribute('location', actionDefinition.position || HEADER);
-    this.backend = actionDefinition?.serverAction ?? false;
-    this.newState = actionDefinition?.newState;
-
-    this.restrictedOnField = actionDefinition.fieldRestrictedCode ? actionDefinition.fieldRestrictedCode.toString() : '';
-    this.restrictedOnOperator = actionDefinition.operatorRestricted || '';
-    this.restrictedOnValue = actionDefinition.valueRestricted ?? '';
-    this.customValidation = () => true;
-  }
-
-  get actionActivated() { return this._actionActivated; }
-
-  start() { this.inProgress = true; }
-  stop() { this.inProgress = false; }
-
-  notifyActivation() { this._actionActivated.next(this.actionCode); }
-
-  updateFromServer(receivedAction) {
-    for (const propertyName in receivedAction) {
-      if (propertyName !== 'actionCode' && propertyName !== 'actionId') {
-        this[propertyName] = receivedAction[propertyName];
-      }
-    }
-  }
-
-  setCustomValidation(callback) { this.customValidation = () => callback(); }
-}

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

@@ -1,98 +0,0 @@
-import { elementTypes } from './form.constants';
-export class FormElement {
-  protected _visible: boolean;
-  protected _visibleForced: boolean;
-  protected _isForced: boolean;
-  _formConfig: any;
-  disabled: boolean;
-  visibleStates: string[];
-  enabledStates: string[];
-  elementType: string;
-  customAttributes: any;
-
-  constructor(elementDefinition: any, formConfig: any) {
-    this._formConfig = formConfig;
-    this._isForced = false;
-    this.setVisibleStates(elementDefinition.visibleStates);
-    this.setEnabledStates(elementDefinition.enabledStates);
-    this._visibleForced = false;
-    this.disabled = elementDefinition?.disabled ?? false;
-    this.setVisibility(elementDefinition?.visible ?? true);
-    this.customAttributes = elementDefinition?.customAttributes ?? {};
-  }
-
-  getCustomAttribute(name: string): any { return this.customAttributes?.[name] ?? null; }
-  setCustomAttribute(name: string, value: any): void { if (name) { this.customAttributes[name] = value; } }
-  matchAttribute(name: string, value: string): boolean { return this.customAttributes?.[name] === value; }
-
-  isField(): boolean { return this.elementType === elementTypes.field; }
-  isAction(): boolean { return this.elementType === elementTypes.action; }
-  isTable(): boolean { return this.elementType === elementTypes.table; }
-
-  setVisibleStates(newStates: any): void {
-    const visibleStates = (!Array.isArray(newStates) && typeof newStates === 'string')
-      ? newStates.split(',').map(state => state.trim()).filter(state => state.length > 0)
-      : newStates;
-    this.visibleStates = (Array.isArray(visibleStates)) ? visibleStates : [];
-  }
-
-  setEnabledStates(newStates: any): void {
-    const enabledStates = (!Array.isArray(newStates) && typeof newStates === 'string')
-      ? newStates.split(',').map(state => state.trim()).filter(state => state.length > 0)
-      : newStates;
-    this.enabledStates = (Array.isArray(enabledStates)) ? enabledStates : [];
-  }
-
-  viewOnState(state: string): boolean { return (this.visibleStates && state) ? this.visibleStates.includes(state) : false; }
-  enabledOnState(state: string): boolean { return (this.enabledStates && state) ? this.enabledStates.includes(state) : false; }
-
-  /**
-   * @deprecated Utilizar viewOnState
-   */
-  supportState(state: string): boolean { return this.viewOnState(state); }
-
-  /**
-   * @deprecated Utilizar viewOnState
-   */
-  supportMode(state: string): boolean { return this.viewOnState(state); }
-
-  get visible(): boolean { return (this._isForced) ? this._visibleForced : this._visible; }
-  set visible(visible: boolean) { this.setVisibility(visible); }
-
-  visibleOn(state: string): boolean {
-    return this.visible && this.viewOnState(state);
-  }
-
-  enabledOn(state: string): boolean {
-    return !this.disabled && this.enabledOnState(state);
-  }
-
-  setVisibility(visible: boolean, forced: boolean = null): void {
-    this._visible = visible && true;
-    if (forced != null) {
-      this._isForced = forced;
-    }
-  }
-
-  show(forced?: boolean): void {
-    this._visible = true;
-    if (forced !== null) {
-      this._isForced = forced;
-      this._visibleForced = true;
-    }
-  }
-
-  hide(forced?: boolean): void {
-    this._visible = false;
-    if (forced !== null) {
-      this._isForced = forced;
-      this._visibleForced = false;
-    }
-  }
-
-  enable(): void { this.disabled = false; }
-  disable(): void { this.disabled = true; }
-
-  get enabled(): boolean { return !this.disabled; }
-  get editable(): boolean { return !this.disabled; }
-}

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

@@ -1,408 +0,0 @@
-import { Subject } from 'rxjs';
-import yn from 'yn';
-import { elementTypes, NO_ERROR } from './form.constants';
-import { FormElement } from './element';
-import { isNgTemplate } from '@angular/compiler';
-
-const UNDEFINED = 'undefined';
-
-const DEFAULT_ERROR_TYPE = 'error';
-const DEFAULT_CAPTURE_TYPE = 'INPUT';
-const DEFAULT_ALIGNMENT = 'left';
-
-const STD_MAX_LENGTH = 50;
-const BIG_MAX_LENGTH = 500;
-
-const fldAttr = {
-  validateOnServer: 'validateOnServer',
-  value: '_value',
-  minValue: '_minValue',
-  maxValue: '_maxValue',
-  maxLength: '_maxLength',
-  onValidation: '_onValidation',
-  focus: 'focus',
-  intrinsicErrorMessage: '_intrinsicErrorMessage',
-  code: 'fieldCode',
-  info: 'fieldInfo',
-  defaultValue: 'defaultValue',
-  defaultEditable: 'defaultEditable',
-  visibleLabel: 'visibleLabel',
-  required: 'fieldRequired',
-  hasChanged: 'hasChanged',
-  outputOnly: 'outputOnly',
-  captureType: 'captureType',
-  title: 'fieldTitle',
-  type: 'fieldType',
-  alignment: 'fieldAlignment',
-  format: 'fieldFormat',
-  externalValue: 'externalValue',
-  tooltipText: 'tooltipText',
-  errorType: 'errorType',
-  errorCode: 'errorCode',
-  errorMessage: 'errorMessage',
-  options: 'fieldOptions',
-};
-
-export interface DetailEvent {
-  code: string;
-  detail: any;
-}
-
-export interface FieldOption {
-  fieldOptionValue: string;
-  fieldOptionId: string;
-}
-
-export class FieldDescriptor extends FormElement {
-  private readonly _editionFinish = new Subject<any>();
-  private readonly _editionPartial = new Subject<any>();
-  private readonly _detailRequest = new Subject<DetailEvent>();
-  private readonly _attributeChange = new Subject<any>();
-
-  private validateOnServer: boolean;
-
-  private _value: any;
-  private _focus: boolean;
-
-  private _minValue: any;
-  private _maxValue: any;
-  private _maxLength: number;
-  _onValidation: boolean;
-  _intrinsicErrorMessage: string;
-
-  fieldCode: string;
-  fieldInfo: string;
-  defaultValue: string;
-  defaultEditable: boolean;
-
-  visibleLabel: boolean;
-  fieldRequired: boolean;
-  hasChanged: boolean;
-  outputOnly: boolean;
-  captureType: string;
-  fieldTitle: string;
-  fieldType: string;
-  fieldAlignment: string;
-  fieldFormat: RegExp;
-  externalValue: any;
-  tooltipText: string;
-
-  errorType: string;
-  errorCode: string;
-  errorMessage: string;
-
-  fieldOptions: FieldOption[];
-
-  constructor(inputFieldReceived, formConfig) {
-    super(inputFieldReceived, formConfig);
-    this.elementType = elementTypes.field;
-    const fld = (inputFieldReceived) ? inputFieldReceived : {};
-
-    this.setAttr(fldAttr.code, fld.fieldCode);
-    this.setAttr(fldAttr.title, fld.fieldTitle ?? this.fieldCode);
-    this.setAttr(fldAttr.type, fld.fieldTypeCode)
-    this.setAttr(fldAttr.captureType, fld.captureType ?? DEFAULT_CAPTURE_TYPE);
-    const defaultValue = fld.defaultValue ?? null;
-    if (this.fieldType === this._formConfig.fieldTypes.boolean) {
-      this.setAttr(fldAttr.defaultValue, defaultValue ?? false);
-    } else {
-      this.setAttr(fldAttr.defaultValue, defaultValue);
-    }
-    const defaultTypeAlignment = (this._formConfig.tableFieldStyles[this.fieldType] != null)
-      ? this._formConfig.tableFieldStyles[this.fieldType]['text-align'] : DEFAULT_ALIGNMENT;
-    const fieldAlignment = (fld.alignment != null) ? fld.alignment.toLowerCase() : defaultTypeAlignment;
-    this.setAttr(fldAttr.alignment, fieldAlignment);
-    this.setAttr(fldAttr.info, fld.info || '');
-    let fieldFormat;
-    try {
-      fieldFormat = (fld.format) ? new RegExp(fld.format) : null;
-    } catch (e) {
-      fieldFormat = null;
-    }
-    this.setAttr(fldAttr.format, fieldFormat);
-
-    this.setAttr(fldAttr.validateOnServer, fld.serverAction ?? false);
-
-    this.setAttr(fldAttr.tooltipText, fld.tooltip || '');
-    this.setAttr(fldAttr.defaultEditable, this.enabled);
-    this.setAttr(fldAttr.required, fld.required ?? false);
-    this.setError(fld.errorCode, fld.errorMessage, fld.errorType ?? DEFAULT_ERROR_TYPE);
-    this.setAttr(fldAttr.outputOnly, fld.outputOnly ?? false);
-    const maxLength = fld.maxLength ?? (this.captureType === 'TEXTAREA' ? BIG_MAX_LENGTH : STD_MAX_LENGTH);
-    this.setAttr(fldAttr.maxLength, maxLength);
-    this.setAttr(fldAttr.intrinsicErrorMessage, this._formConfig.fieldTypeErrMsg[this.fieldType] ?? this._formConfig.fieldTypeErrMsg.DEFAULT);
-
-    this.setEditable(fld.editable ?? true);
-    this.setVisibleLabel(fld.visibleLabel ?? true);
-    this.setVisibility(fld.visible);
-    this.setFieldOptions(fld.fieldOptions);
-    this.setValue(fld.fieldValue ?? this.defaultValue ?? '');
-  }
-
-  get name() { return this.fieldCode; }
-  get editionFinish() { return this._editionFinish; }
-  get attributeChange() { return this._attributeChange; }
-
-  get editionPartial() { return this._editionPartial; }
-  get detailRequest() { return this._detailRequest; }
-  get info() { return this.fieldInfo; }
-
-  get validating() { return this._onValidation; }
-  set validating(isValidating: boolean) { this.setAttr(fldAttr.onValidation, isValidating); }
-
-  focus() { this.setAttr(fldAttr.focus, true); }
-
-  setIntrinsicErrorMessage(message: string) { this.setAttr(fldAttr.intrinsicErrorMessage, message); }
-  set intrinsicErrorMessage(message: string) { this.setIntrinsicErrorMessage(message); }
-
-  get fieldValue() { return this.getValue(); }
-
-  getRequired() { return this.required; }
-  setRequired(required: boolean) { this.required = required; }
-
-  get required(): boolean { return this.fieldRequired; }
-  set required(required: boolean) { this.setAttr(fldAttr.required, required ?? false); }
-  get maxLength() { return (this._maxLength > 0) ? this._maxLength.toString() : ''; }
-  set maxLength(requiredMaxLength: any) {
-    if (typeof requiredMaxLength === 'string') {
-      this.setAttr(fldAttr.maxLength, parseInt(requiredMaxLength, 10));
-    } else if (typeof requiredMaxLength === 'number') {
-      this.setAttr(fldAttr.maxLength, requiredMaxLength);
-    }
-  }
-  get value() { return this.getValue(); }
-  set value(newValue) { this.setValue(newValue); }
-
-  notifyEditionPartial() {
-    this._editionPartial.next({ code: this.fieldCode, intrinsicValidation: true });
-  }
-
-  notifyEditionFinish() {
-    console.log('1. notifyEditionFinish');
-    let intrinsicValidation = true;
-    const fieldDefaultFormat = this._formConfig.fieldTypesPatterns?.[this.fieldType] ?? null;
-    const fieldValue = this.getValue();
-    console.log(`2. notifyEditionFinish fieldDefaultFormat: ${fieldDefaultFormat} fieldValue:${fieldValue}`);
-
-    if (fieldValue && (fieldDefaultFormat || this.fieldFormat)) {
-      console.log(`3. notifyEditionFinish this.fieldFormat: ${this.fieldFormat}`);
-
-
-      intrinsicValidation = (fieldDefaultFormat?.test(fieldValue) ?? true)
-        && (this.fieldFormat?.test(fieldValue) ?? true);
-
-      console.log(`4. notifyEditionFinish intrinsicValidation: ${intrinsicValidation}`);
-
-
-      if (!intrinsicValidation) {
-        this.setError('99', this._intrinsicErrorMessage);
-      }
-    }
-    if (intrinsicValidation && fieldValue && this._minValue && fieldValue < this._minValue) {
-      intrinsicValidation = false;
-      this.setError('99', 'Campo con valor inferior al mínimo');
-    }
-    if (intrinsicValidation && fieldValue && this._maxValue && fieldValue > this._maxValue) {
-      intrinsicValidation = false;
-      this.setError('99', 'Campo con valor superior al máximo');
-    }
-    console.log('5. notifyEditionFinish END');
-
-    this._editionFinish.next({ code: this.fieldCode, intrinsicValidation });
-  }
-
-  setAttr(name: string, value: any) {
-    this[name] = value;
-    if (this._formConfig.monitoredFieldAttributes.includes(name)) {
-      this._attributeChange.next({ name, value });
-    }
-  }
-
-  notifyEditionDetailRequest(detail: any) {
-    const detailEvent: DetailEvent = {
-      code: this.fieldCode,
-      detail,
-    };
-    this._detailRequest.next(detailEvent);
-  }
-
-  setVisibleLabel(visibleLabel: boolean) { this.setAttr(fldAttr.visibleLabel, visibleLabel); }
-  showLabel() { this.setVisibleLabel(true); }
-  hideLabel() { this.setVisibleLabel(false); }
-
-  setChanged(hasChanged: boolean) { this.setAttr(fldAttr.hasChanged, hasChanged); }
-  changed() { this.setChanged(true); }
-
-  setLabel(label) { this.setAttr(fldAttr.title, label); }
-  clean() { this.setValue(this.defaultValue || ''); this.resetError(); }
-  get backend() { return this.validateOnServer; }
-
-  setEditable(editable: boolean = true) { (editable) ? this.enable() : this.disable(); }
-
-  hasError() { return this.errorCode !== NO_ERROR; }
-  resetError() { (this.errorCode !== NO_ERROR) && this.setError(NO_ERROR, null); }
-  setError(code, message, type = DEFAULT_ERROR_TYPE) {
-    this.setAttr(fldAttr.errorCode, code ?? NO_ERROR);
-    this.setAttr(fldAttr.errorType, (this.errorCode === NO_ERROR) ? '' : type);
-    this.setAttr(fldAttr.errorMessage, message ?? '');
-  }
-
-  getError() { return { type: this.errorType, code: this.errorCode, message: this.errorMessage }; }
-  get error() { return this.getError(); }
-  set error(errorObj) { this.setError(errorObj.code, errorObj.message, errorObj.type ?? DEFAULT_ERROR_TYPE) }
-
-  getErrorCode() { return this.getError().code; }
-  setErrorCode(code) { this.setError(code, this.errorMessage); }
-  getErrorMessage() { return this.getError().message; }
-  setErrorMessage(msg) { this.setError(this.errorCode, msg); }
-
-  get empty(): boolean { return this.isEmpty(); }
-
-  isEmpty(): boolean {
-    const fieldCurrentValue = this.getValue();
-    if (fieldCurrentValue === undefined || fieldCurrentValue === null) {
-      return true;
-    }
-    if (this.fieldType === this._formConfig.fieldTypes.array
-      && Array.isArray(fieldCurrentValue) && fieldCurrentValue.length === 0) {
-      return true;
-    };
-    if (this.fieldType === this._formConfig.fieldTypes.phone) {
-      if (!Array.isArray(fieldCurrentValue)) {
-        return true;
-      }
-      if (fieldCurrentValue.length !== 2 || !fieldCurrentValue[0] || !fieldCurrentValue[1]) {
-        return true;
-      }
-      return false;
-    };
-    return fieldCurrentValue === '';
-  }
-
-  getValue(): any {
-    if (this.fieldType === this._formConfig.fieldTypes.boolean
-      || this.fieldType === this._formConfig.fieldTypes.check) {
-      return yn(this._value);
-    }
-    return this._value;
-  }
-
-  getOptionText() {
-    return this.fieldOptions?.find(item => item.fieldOptionId === this._value)?.fieldOptionValue ?? null;
-  }
-
-  updateFromServer(fld) {
-    const fieldKeys = Object.keys(fld);
-    for (let index = 0; index < fieldKeys.length; index++) {
-      const attrName = fieldKeys[index];
-      const attrValue = fld[attrName];
-      (attrName === this._formConfig.apiFieldAttrs.visible) && this.setVisibility(attrValue);
-      (attrName === this._formConfig.apiFieldAttrs.labelVisible) && this.setVisibleLabel(fld.visibleLabel);
-      (attrName === this._formConfig.apiFieldAttrs.required) && this.setAttr(fldAttr.required, fld.required ?? false);
-      (attrName === this._formConfig.apiFieldAttrs.errorCode) && this.setAttr(fldAttr.errorCode, fld.errorCode);
-      (attrName === this._formConfig.apiFieldAttrs.errorMessage) && this.setAttr(fldAttr.errorMessage, fld.errorMessage);
-      (attrName === this._formConfig.apiFieldAttrs.tooltip) && this.setAttr(fldAttr.tooltipText, fld.tooltip);
-      (attrName === this._formConfig.apiFieldAttrs.info) && this.setAttr(fldAttr.info, fld.info);
-      (attrName === this._formConfig.apiFieldAttrs.editable) && this.setEditable(fld.editable);
-      (attrName === this._formConfig.apiFieldAttrs.title) && this.setLabel(fld.fieldTitle.toString());
-      (attrName === this._formConfig.apiFieldAttrs.value) && (this.setValue(fld.fieldValue) && this.setChanged(false));
-      (attrName === this._formConfig.apiFieldAttrs.options) && this.setFieldOptions(fld.fieldOptions);
-      (attrName === this._formConfig.apiFieldAttrs.captureType) && this.setAttr(fldAttr.captureType, fld.captureType || 'INPUT');
-      (attrName === this._formConfig.apiFieldAttrs.type) && this.setAttr(fldAttr.type, fld.fieldTypeCode);
-      (attrName === this._formConfig.apiFieldAttrs.maxLength) && this.setAttr(fldAttr.maxLength, fld.maxLength);
-    }
-  }
-
-  setMinValue(inputMinValue) {
-    let minValue = inputMinValue;
-    if (this.fieldType === this._formConfig.fieldTypes.date) {
-      minValue = new Date(minValue);
-    }
-    this.setAttr(fldAttr.minValue, minValue);
-  }
-
-  setMaxValue(inputMaxValue) {
-    let maxValue = inputMaxValue;
-    if (this.fieldType === this._formConfig.fieldTypes.date) {
-      maxValue = new Date(maxValue);
-    }
-    this.setAttr(fldAttr.maxValue, maxValue);
-  }
-
-  getFieldOptions(): FieldOption[] {
-    return this.fieldOptions.map(option => {
-      const optionCopy: FieldOption = { ...option };
-      return optionCopy;
-    });
-  }
-
-
-  setFieldOptions(newOptions) {
-    if ((!this._formConfig.captureTypesWithOptions.includes(this.captureType))
-      || typeof newOptions === UNDEFINED || !newOptions
-      || !Array.isArray(newOptions)) {
-      return;
-    }
-    let fieldOptions = newOptions.map(option => {
-      if (option.text !== undefined && option.text !== null
-        && option.value !== undefined && option.value !== null) {
-        return { fieldOptionValue: option.text, fieldOptionId: option.value };
-      }
-      return { ...option };
-    });
-    fieldOptions = (fieldOptions && Array.isArray(fieldOptions)
-      && fieldOptions.length > 0) ? fieldOptions : [];
-    this.setAttr(fldAttr.options, fieldOptions);
-    if (this._value) {
-      if (this.fieldType === this._formConfig.fieldTypes.array && Array.isArray(this._value)) {
-        const fieldValue = this._value?.filter(item =>
-          this.fieldOptions.find(opt => opt.fieldOptionId === item)
-        );
-        this.setAttr(fldAttr.value, fieldValue);
-      } else {
-        const valInOptions = this.fieldOptions
-          .find(item => item.fieldOptionId === this._value);
-        if (!valInOptions) {
-          this.setValue('');
-        }
-      }
-    }
-    if (this.fieldRequired && this.fieldOptions.length === 1) {
-      this.setValue(this.fieldOptions[0].fieldOptionId);
-    }
-  }
-
-  setValue(newValue, widgetUpdate = true) {
-    if (typeof newValue === UNDEFINED) {
-      return true;
-    }
-    if (newValue === null && this.required) {
-      return true;
-    }
-    let newFinalValue;
-    if (this.fieldType === this._formConfig.fieldTypes.boolean
-      || this.fieldType === this._formConfig.fieldTypes.check) {
-      newFinalValue = yn(newValue) ?? false;
-    } else if (this.fieldType === this._formConfig.fieldTypes.array
-      || this.fieldType === this._formConfig.fieldTypes.map) {
-      if (newValue === null || newValue === '') {
-        newFinalValue = [];
-      } else if (Array.isArray(newValue)) {
-        newFinalValue = newValue;
-      } else {
-        newFinalValue = newValue.toString().split(',');
-      }
-    } else {
-      newFinalValue = newValue;
-    }
-    if (this._value !== newFinalValue) {
-      this.setChanged(true);
-      if (widgetUpdate) {
-        this.setAttr(fldAttr.value, newFinalValue);
-      } else {
-        this._value = newFinalValue;
-      }
-    }
-    return true;
-  }
-}

package/src/lib/classes/forms/form.constants.ts

@@ -1,28 +0,0 @@
-export const NO_ERROR = '00';
-export const HEADER = 'HEADER';
-
-export const elementTypes = {
-  action: 'ACTION',
-  field: 'FIELD',
-  table: 'TABLE',
-};
-
-export const formActions = {
-  tableAction: 'TABLEACTION',
-  getData: 'GETDATA',
-  getTableData: 'GETTABLEDATA',
-  validate: 'VALIDATE',
-};
-
-export const operators = {
-  G: 'G',
-  L: 'L',
-  GE: 'GE',
-  LE: 'LE',
-  EQ: 'EQ',
-  NEQ: 'NEQ',
-  HAS: 'HAS',
-  NOTHAS: 'NOTHAS',
-  BETWEEN: 'BETWEEN',
-  IN: 'IN',
-};