tuain-ng-forms-lib 14.4.91 → 14.4.93

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

@@ -0,0 +1,500 @@
+import { Subject } from 'rxjs';
+import yn from 'yn';
+import { elementTypes, NO_ERROR } from './form.constants';
+import { FormElement } from './element';
+
+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 directChanges = [
+  'defaultEditable', 'defaultValue', 'alignment', 'required', 'errorCode', 'errorMessage', 'errorType',
+  'tooltip', 'info', 'format', 'intrinsicErrorMessage', 'outputOnly', 'captureType', 'title', 'type',
+  'maxLength', 'maxValue', 'minLength', 'minValue', 'validateOnServer', 'serverAction', 'visibleLabel',
+  'options',
+];
+
+const attrs = {
+  _captureType: { name: '_captureType', propagate: 'captureType' },
+  _errorCode: { name: '_errorCode', propagate: 'errorCode' },
+  _errorMessage: { name: '_errorMessage', propagate: 'errorMessage' },
+  _errorType: { name: '_errorType', propagate: 'errorType' },
+  _defaultValue: { name: '_defaultValue', propagate: 'defaultValue' },
+  _defaultEditable: { name: '_defaultEditable', propagate: 'defaultEditable' },
+  _fieldAlignment: { name: '_fieldAlignment', propagate: 'alignment' },
+  _fieldCode: { name: '_fieldCode', propagate: 'code' },
+  _fieldInfo: { name: '_fieldInfo', propagate: 'info' },
+  _fieldRequired: { name: '_fieldRequired', propagate: 'required' },
+  _fieldTitle: { name: '_fieldTitle', propagate: 'title' },
+  _fieldType: { name: '_fieldType', propagate: 'type' },
+  _fieldFormat: { name: '_fieldFormat', propagate: 'format' },
+  _fieldOptions: { name: '_fieldOptions', propagate: 'options' },
+  _focus: { name: '_focus', propagate: 'focus' },
+  _hasChanged: { name: '_hasChanged', propagate: 'hasChanged' },
+  _intrinsicErrorMessage: { name: '_intrinsicErrorMessage', propagate: null },
+  _maxLength: { name: '_maxLength', propagate: 'maxLength' },
+  _maxValue: { name: '_maxValue', propagate: 'maxValue' },
+  _minLength: { name: '_minLength', propagate: 'minLength' },
+  _minValue: { name: '_minValue', propagate: 'minValue' },
+  _onValidation: { name: '_onValidation', propagate: 'onValidation' },
+  _outputOnly: { name: '_outputOnly', propagate: 'outputOnly' },
+  _tooltipText: { name: '_tooltipText', propagate: 'tooltip' },
+  _validateOnServer: { name: '_validateOnServer', propagate: 'validateOnServer' },
+  _value: { name: '_value', propagate: 'value' },
+  _visibleLabel: { name: '_visibleLabel', propagate: 'visibleLabel' },
+};
+
+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 _errorType: string = '';
+  private _errorCode: string = '';
+  private _errorMessage: string = '';
+  private _fieldCode: string = '';
+  private _intrinsicErrorMessage: string = '';
+  private _minValue: any;
+  private _maxValue: any;
+  private _maxLength: number = 0;
+  private _minLength: number = 0;
+  private _focus: boolean = false;
+  private _onValidation: boolean = false;
+  private _validateOnServer: boolean = false;
+  private _value: any;
+  private _visibleLabel: boolean = false;
+
+  private _captureType: string = '';
+  private _defaultValue: string = '';
+  private _defaultEditable: boolean = false;
+  private _externalValue: any;
+  private _fieldAlignment: string = '';
+  private _fieldInfo: string = '';
+  private _fieldRequired: boolean = false;
+  private _fieldTitle: string = '';
+  private _fieldType: string = '';
+  private _fieldFormat: RegExp | null = null;
+  private _fieldOptions: FieldOption[] | null = null;
+  private _hasChanged: boolean = false;
+  private _outputOnly: boolean = false;
+  private _tooltipText: string = '';
+
+  constructor(inputFieldReceived, formConfig) {
+    super(inputFieldReceived, formConfig);
+    this.propagationCustomAttributes = this._formConfig?.propagationCustomAttributes?.fields ?? [];
+    this.elementType = elementTypes.field;
+    const fld = (inputFieldReceived) ? inputFieldReceived : {};
+    this.setAttr(attrs._fieldCode, fld.fieldCode);
+    this.title = fld.fieldTitle ?? this._fieldCode;
+    this.type = fld.fieldTypeCode;
+    this.captureType = fld.captureType ?? DEFAULT_CAPTURE_TYPE;
+
+    const defaultValue = fld.defaultValue ?? null;
+    if (this._fieldType === this._formConfig.fieldTypes.boolean) {
+      this.defaultValue = defaultValue ?? false;
+    } else {
+      this.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.alignment = fieldAlignment;
+    this.info = fld.info || '';
+    let fieldFormat;
+    try {
+      fieldFormat = (fld.format) ? new RegExp(fld.format) : null;
+    } catch (e) {
+      fieldFormat = null;
+    }
+    this.format = fieldFormat;
+    this.validateOnServer = fld.serverAction ?? false;
+    this.tooltip = fld.tooltip || '';
+    this.defaultEditable = this.enabled;
+    this.required = fld.required ?? false;
+    this.outputOnly = fld.outputOnly ?? false;
+    this.maxLength = fld.maxLength || (this._captureType === 'TEXTAREA' ? BIG_MAX_LENGTH : STD_MAX_LENGTH);
+    this.intrinsicErrorMessage = this._formConfig?.fieldValidations?.[this._fieldType]?.message
+      ?? this._formConfig?.fieldValidations?.DEFAULT?.message ?? '';
+
+    this.setError(fld.errorCode, fld.errorMessage, fld.errorType ?? DEFAULT_ERROR_TYPE);
+    this.setEditable(fld.editable ?? true);
+    this.visibleLabel = fld.visibleLabel ?? true;
+    this.setVisibility(fld.visible);
+    this.options = fld.fieldOptions;
+    this._setValue(fld.fieldValue ?? this._defaultValue ?? '');
+  }
+
+  get alignment() { return this._fieldAlignment; }
+  set alignment(alignment) { this.setAttr(attrs._fieldAlignment, alignment); }
+  get backend() { return this._validateOnServer; }
+
+  get captureType() { return this._captureType; }
+  set captureType(captureType) { this.setAttr(attrs._captureType, captureType); }
+  get code() { return this._fieldCode; }
+  get fieldCode() { return this._fieldCode; }
+  get defaultValue() { return this._defaultValue; }
+  set defaultValue(defaultValue) { this.setAttr(attrs._defaultValue, defaultValue); }
+  get defaultEditable() { return this._defaultEditable; }
+  set defaultEditable(editable) { this.setAttr(attrs._defaultEditable, editable); }
+  get detailRequest() { return this._detailRequest; }
+  get editionFinish() { return this._editionFinish; }
+  get editionPartial() { return this._editionPartial; }
+
+  get empty(): boolean {
+    const fieldCurrentValue = this.value;
+    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 === '';
+  }
+
+
+
+  get error() { return { type: this._errorType, code: this._errorCode, message: this._errorMessage }; }
+  set error(errorObj) { this.setError(errorObj.code, errorObj.message, errorObj.type ?? DEFAULT_ERROR_TYPE) }
+  get errorCode() { return this._errorCode; }
+  set errorCode(code) { this.setError(code, this._errorMessage); }
+  get errorMessage() { return this._errorMessage; }
+  set errorMessage(msg) { this.setError(this._errorCode, msg); }
+  get errorType() { return this._errorType; }
+  get externalValue() { return this._externalValue; }
+  get format() { return this._fieldFormat; }
+  set format(format) { this.setAttr(attrs._fieldFormat, format); }
+  get hasChanged() { return this._hasChanged; }
+  set hasChanged(hasChanged) { this.setAttr(attrs._hasChanged, hasChanged); }
+
+  get info() { return this._fieldInfo; }
+  set info(newInfo: string) { this.setAttr(attrs._fieldInfo, newInfo); }
+  set intrinsicErrorMessage(message: string) { this.setAttr(attrs._intrinsicErrorMessage, message); }
+  get maxLength() { return (this._maxLength > 0) ? this._maxLength.toString() : ''; }
+  set maxLength(requiredMaxLength: any) { this.setAttr(attrs._maxLength, requiredMaxLength ? +requiredMaxLength : null); }
+  get maxValue() { return this._maxValue; }
+
+  set maxValue(inputMaxValue) {
+    let maxValue = inputMaxValue;
+    if (this._fieldType === this._formConfig.fieldTypes.date) {
+      maxValue = new Date(maxValue);
+    }
+    this.setAttr(attrs._maxValue, maxValue);
+  }
+
+  get minLength() { return this._minLength; }
+  set minLength(requiredMinLength: number) { this.setAttr(attrs._minLength, requiredMinLength ? +requiredMinLength : null); }
+  get minValue() { return this._minValue; }
+
+  set minValue(inputMinValue) {
+    let minValue = inputMinValue;
+    if (this._fieldType === this._formConfig.fieldTypes.date) {
+      minValue = new Date(minValue);
+    }
+    this.setAttr(attrs._minValue, minValue);
+  }
+
+  get name() { return this._fieldCode; }
+
+  get options(): FieldOption[] | null {
+    return this._fieldOptions?.map(option => {
+      const optionCopy: FieldOption = { ...option };
+      return optionCopy;
+    }) ?? null;
+  }
+
+  set options(newOptions) {
+    if ((!this._formConfig.captureTypesWithOptions.includes(this._captureType))
+      || typeof newOptions === UNDEFINED || !newOptions
+      || !Array.isArray(newOptions)) {
+      return;
+    }
+    let fieldOptions = newOptions.map((option: any) => {
+      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(attrs._fieldOptions, 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(attrs._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._value !== this._fieldOptions?.[0].fieldOptionId) {
+      this._setValue(this._fieldOptions?.[0].fieldOptionId);
+      this.notifyEditionFinish();
+    }
+  }
+
+  get optionText() { return this._fieldOptions?.find(item => item.fieldOptionId === this._value)?.fieldOptionValue ?? null; }
+  get outputOnly() { return this._outputOnly; }
+  set outputOnly(outputOnly) { this.setAttr(attrs._outputOnly, outputOnly); }
+  get required(): boolean { return this._fieldRequired; }
+  set required(required: boolean) { this.setAttr(attrs._fieldRequired, required ?? false); }
+  get title() { return this._fieldTitle; }
+  set title(title) { this.setAttr(attrs._fieldTitle, title?.toString() ?? ''); }
+  get tooltip() { return this._tooltipText; }
+  set tooltip(tooltip) { this.setAttr(attrs._tooltipText, tooltip); }
+  get type() { return this._fieldType; }
+  set type(fieldType) { this.setAttr(attrs._fieldType, fieldType); }
+  get validating() { return this._onValidation; }
+  set validating(isValidating: boolean) { this.setAttr(attrs._onValidation, isValidating); }
+  get value() {
+    return (this._fieldType === this._formConfig.fieldTypes.boolean
+      || this._fieldType === this._formConfig.fieldTypes.check) ? yn(this._value) : this._value;
+  }
+  get validateOnServer() { return this._validateOnServer; }
+  set validateOnServer(validateOnServer) { this.setAttr(attrs._validateOnServer, validateOnServer); }
+  get serverAction() { return this._validateOnServer; }
+  set serverAction(validateOnServer: boolean) { this.validateOnServer = validateOnServer; }
+
+  set value(newValue) { this._setValue(newValue); }
+  get visibleLabel() { return this._visibleLabel; }
+  set visibleLabel(visibleLabel: boolean) { this.setAttr(attrs._visibleLabel, visibleLabel); }
+
+  /**
+   * @deprecated Use options
+   */
+  get fieldOptions() { return this._fieldOptions; }
+
+  /**
+   * @deprecated Use options
+   */
+  set fieldOptions(options) { this.options = options; }
+
+  /**
+   * @deprecated Use value
+   */
+  get fieldValue() { return this.value; }
+
+  /**
+   * @deprecated Use hasChanged
+   */
+  changed(hasChanged = true) { this.hasChanged = hasChanged; }
+
+  clean() { this._setValue(this._defaultValue || ''); this.resetError(); }
+  focus() { this.setAttr(attrs._focus, true); }
+  getErrorCode() { return this.error.code; }
+  setErrorCode(code) { this.setError(code, this._errorMessage); }
+  getErrorMessage() { return this.error.message; }
+  setErrorMessage(msg) { this.setError(this._errorCode, msg); }
+  getRequired() { return this.required; }
+  hasError() { return this._errorCode !== NO_ERROR; }
+  hideLabel() { this.visibleLabel = false; }
+  resetError() { (this._errorCode !== NO_ERROR) && this.setError(NO_ERROR, null); }
+  setEditable(editable: boolean = true) { (editable) ? this.enable() : this.disable(); }
+  setValue(newValue, widgetUpdate = true) { this._setValue(newValue, widgetUpdate); }
+  showLabel() { this.visibleLabel = true; }
+
+  /**
+   * @deprecated Use title
+   */
+  setLabel(label) { this.title = label; }
+
+  /**
+   * @deprecated Use required
+   */
+  setRequired(required: boolean) { this.required = required; }
+
+  /**
+   * @deprecated Use changed
+   */
+  setChanged(hasChanged: boolean) { this.changed(hasChanged); }
+
+  /**
+   * @deprecated Use value
+   */
+  getValue(): any { return this.value; }
+
+  /**
+   * @deprecated Use empty
+   */
+  isEmpty(): boolean { return this.empty }
+
+  /**
+   * @deprecated Use error
+   */
+  getError() { return this.error; }
+
+  /**
+   * @deprecated Use optionText
+   */
+  getOptionText() { return this.optionText; }
+
+  /**
+   * @deprecated Use options
+   */
+  getFieldOptions() { return this.options; }
+
+  /**
+   * @deprecated Use options
+   */
+  setFieldOptions(newOptions) { return this.options = newOptions; }
+
+  /**
+   * @deprecated Use intrinsicErrorMessage
+   */
+  setIntrinsicErrorMessage(message: string) { this.intrinsicErrorMessage = message; }
+
+  /**
+   * @deprecated Use maxValue
+   */
+  setMaxValue(inputMaxValue) { this.maxValue = inputMaxValue; }
+
+  /**
+   * @deprecated Use minValue
+   */
+  setMinValue(inputMinValue) { this.minValue = inputMinValue; }
+
+  /**
+   * @deprecated Use showLabel
+   */
+  setVisibleLabel(visibleLabel: boolean) { this.visibleLabel = visibleLabel; }
+
+
+  notifyEditionPartial() {
+    this.resetError();
+    this._editionPartial.next({ code: this._fieldCode, intrinsicValidation: true });
+  }
+
+  notifyEditionFinish() {
+    const fieldValue = this.value;
+    this.resetError();
+    const validationConfig = this._formConfig.fieldValidations?.[this._fieldType] ?? {};
+    const { type, validation } = validationConfig;
+    let message = validationConfig?.message;
+    let intrinsicValidation = true;
+    if (fieldValue && (validation || this._fieldFormat)) {
+      if (type === 'regexp') {
+        intrinsicValidation = (validation?.test(fieldValue) ?? true)
+          && (this._fieldFormat?.test(fieldValue) ?? true);
+      } else if (type === 'function' && typeof validation === 'function') {
+        const { valid, message: customMessage } = validation(fieldValue, this);
+        intrinsicValidation = valid;
+        message = customMessage;
+      }
+      if (!intrinsicValidation) {
+        this.setError('99', message ?? 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');
+    }
+    if (intrinsicValidation && fieldValue && typeof fieldValue === 'string'
+      && this._minLength && fieldValue?.length < this._minLength) {
+      intrinsicValidation = false;
+      this.setError('99', `Longitud de ${this._fieldTitle} debe ser de al menos ${this._minLength}`);
+    }
+    this._editionFinish.next({ code: this._fieldCode, intrinsicValidation });
+  }
+
+  notifyEditionDetailRequest(detail: any) {
+    const detailEvent: DetailEvent = { code: this._fieldCode, detail };
+    this._detailRequest.next(detailEvent);
+  }
+
+  setError(code, message, type = DEFAULT_ERROR_TYPE) {
+    this.setAttr(attrs._errorCode, code ?? NO_ERROR);
+    this.setAttr(attrs._errorType, (this._errorCode === NO_ERROR) ? '' : type);
+    this.setAttr(attrs._errorMessage, message ?? '');
+  }
+
+  updateFromServer(fld) {
+    const fieldKeys = Object.keys(fld);
+    for (let index = 0; index < fieldKeys.length; index++) {
+      const attrName = fieldKeys[index];
+      const attrValue = fld[attrName];
+      if (directChanges.includes(attrName)) {
+        this[attrName] = attrValue;
+      } else {
+        (attrName === 'label') && (this.title = attrValue);
+        (attrName === 'labelVisible') && (this.visibleLabel = attrValue);
+        (attrName === 'editable') && this.setEditable(attrValue);
+        (attrName === 'visible') && this.setVisibility(attrValue);
+        (attrName === 'value') && (this._setValue(attrValue) && (this.hasChanged = false));
+        (attrName === 'fieldValue') && (this._setValue(attrValue) && (this.hasChanged = false));
+
+        (attrName === 'fieldOptions') && (this.options = attrValue);
+        (attrName === 'fieldTitle') && (this.title = attrValue);
+        (attrName === 'fieldTypeCode') && (this.type = attrValue);
+        (attrName === 'fieldType') && (this.type = attrValue);
+        (attrName === 'tooltipText') && (this.tooltip = attrValue);
+      }
+    }
+  }
+
+  private _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.hasChanged = true;
+      if (widgetUpdate) {
+        this.setAttr(attrs._value, newFinalValue);
+      } else {
+        this._value = newFinalValue;
+      }
+    }
+    return true;
+  }
+}

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

@@ -0,0 +1,28 @@
+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',
+};