tuain-ng-forms-lib 0.12.18 → 0.12.22

package/fesm2015/tuain-ng-forms-lib.js

@@ -871,17 +871,17 @@ class RecordTable extends FormElement {
         if (!this.sorting.columnName || !this.sorting.direction) {
             return;
         }
-        this.tableRecords = this.tableRecords
-            .sort((a, b) => this.recordCompare(a, b, this.sorting.columnName, this.sorting.direction));
+        this.tableRecords.sort((a, b) => this.recordCompare(a, b, this.sorting.columnName, this.sorting.direction));
+        this.updateVisibleRecords();
     }
     recordCompare(recordA, recordB, columnCompare, direction) {
         const recordAColumn = recordA.getFieldValue(columnCompare);
         const recordBColumn = recordB.getFieldValue(columnCompare);
         let result = 0;
-        if (recordAColumn.fieldValue < recordBColumn.fieldValue) {
+        if (recordAColumn < recordBColumn) {
             result = -1;
         }
-        else if (recordAColumn.fieldValue > recordBColumn.fieldValue) {
+        else if (recordAColumn > recordBColumn) {
             result = 1;
         }
         return direction === componentConstants.TABLE_SORT_ASCENDING ? result : -result;
@@ -1349,11 +1349,39 @@ const FIELD_ERR_MSG = 'errorMessage';
 const FIELD_TOOLTIP = 'tooltipText';
 const FIELD_INFO = 'info';
 const FIELD_EDITABLE = 'editable';
+const FIELD_TYPES = {
+    array: 'ARRAY',
+    check: 'CHECK',
+    date: 'DATE',
+    daterange: 'DATERANGE',
+    time: 'TIME',
+    timerange: 'TIMERANGE',
+    map: 'MAP',
+    number: 'NUMBER',
+    decimal: 'DECIMAL',
+    currency: 'CURRENCY',
+    select: 'SELECT',
+    typeahead: 'TYPEAHEAD',
+    text: 'TEXT',
+    password: 'PASSWORD',
+    label: 'LABEL',
+    html: 'HTML',
+    title: 'TITLE',
+    message: 'MESSAGE',
+    link: 'LINK',
+    warning: 'WARNING',
+    avatar: 'AVATAR',
+    email: 'EMAIL',
+    phone: 'PHONE',
+};
+const FIELD_TYPES_FORMATS = {
+    EMAIL: '^\\w+([\\.-]?\\w+)@\\w+([\\.-]?\\w+)(\\.\\w{2,3})+$',
+};
 const STD_MAX_LENGTH = 50;
 const BIG_MAX_LENGTH = 500;
 class FieldDescriptor extends FormElement {
     constructor(inputFieldReceived) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         super(inputFieldReceived);
         this._editionFinish = new Subject();
         this._editionPartial = new Subject();
@@ -1371,7 +1399,7 @@ class FieldDescriptor extends FormElement {
         const defaultTypeAlignment = (tableFieldStyles[this.fieldType] != null) ? tableFieldStyles[this.fieldType]['text-align'] : 'left';
         this.fieldAlignment = (fieldReceived.alignment != null) ? fieldReceived.alignment.toLowerCase() : defaultTypeAlignment;
         this.fieldInfo = fieldReceived.info || '';
-        this.fieldFormat = fieldReceived.format || '';
+        this.fieldFormat = fieldReceived.format || null;
         this.validateOnServer = (_c = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.serverAction) !== null && _c !== void 0 ? _c : false;
         this.customAttributes = (_d = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.customAttributes) !== null && _d !== void 0 ? _d : null;
         this.setVisibility(fieldReceived.visible);
@@ -1380,14 +1408,21 @@ class FieldDescriptor extends FormElement {
         this.defaultEditable = this.enabled;
         this.fieldRequired = (_f = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.required) !== null && _f !== void 0 ? _f : false;
         this.errorMessage = fieldReceived.errorMessage || '';
-        this.errorCode = fieldReceived.errorCode || '00';
-        this.outputOnly = (_g = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.outputOnly) !== null && _g !== void 0 ? _g : false;
+        this.errorCode = (_g = fieldReceived.errorCode) !== null && _g !== void 0 ? _g : '00';
+        this.outputOnly = (_h = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.outputOnly) !== null && _h !== void 0 ? _h : false;
         this.setFieldOptions(fieldReceived.fieldOptions);
+        this._intrinsicErrorMessage = (this.fieldType === FIELD_TYPES.email)
+            ? `El valor de ${this.fieldTitle} no corresponde a un correo válido`
+            : `El valor de ${this.fieldTitle} no se ajusta al formato establecido`;
     }
     get name() { return this.fieldCode; }
     get editionFinish() { return this._editionFinish; }
     get editionPartial() { return this._editionPartial; }
     get detailRequest() { return this._detailRequest; }
+    get validating() { return this._onValidation; }
+    set validating(isValidating) { this._onValidation = isValidating; }
+    setIntrinsicErrorMessage(message) { this._intrinsicErrorMessage = message; }
+    set intrinsicErrorMessage(message) { this.setIntrinsicErrorMessage(message); }
     get fieldValue() { return this.getValue(); }
     get required() { return this.fieldRequired; }
     set required(required) { this.fieldRequired = required !== null && required !== void 0 ? required : false; }
@@ -1402,9 +1437,29 @@ class FieldDescriptor extends FormElement {
     }
     get value() { return this.getValue(); }
     set value(newValue) { this.setValue(newValue); }
-    notifyEditionPartial() { this._editionPartial.next(this.fieldCode); }
-    notifyEditionFinish() { this._editionFinish.next(this.fieldCode); }
-    notifyEditionDetailRequest() { this._detailRequest.next(this.fieldCode); }
+    notifyEditionPartial() {
+        const intrinsicValidation = true;
+        this._editionPartial.next({ code: this.fieldCode, intrinsicValidation });
+    }
+    notifyEditionFinish() {
+        var _a, _b;
+        let intrinsicValidation = true;
+        const fieldDefaultFormat = (FIELD_TYPES_FORMATS === null || FIELD_TYPES_FORMATS === void 0 ? void 0 : FIELD_TYPES_FORMATS[this.fieldType])
+            ? new RegExp(FIELD_TYPES_FORMATS === null || FIELD_TYPES_FORMATS === void 0 ? void 0 : FIELD_TYPES_FORMATS[this.fieldType]) : null;
+        const fieldFormat = (this.fieldFormat) ? new RegExp(this.fieldFormat) : null;
+        const fieldValue = this.getValue();
+        if (fieldValue && (fieldDefaultFormat || fieldFormat)) {
+            intrinsicValidation = ((_a = fieldDefaultFormat === null || fieldDefaultFormat === void 0 ? void 0 : fieldDefaultFormat.test(fieldValue)) !== null && _a !== void 0 ? _a : true)
+                && ((_b = fieldFormat === null || fieldFormat === void 0 ? void 0 : fieldFormat.test(fieldValue)) !== null && _b !== void 0 ? _b : true);
+            if (!intrinsicValidation) {
+                this.setError('99', this._intrinsicErrorMessage);
+            }
+        }
+        this._editionFinish.next({ code: this.fieldCode, intrinsicValidation });
+    }
+    notifyEditionDetailRequest() {
+        this._detailRequest.next(this.fieldCode);
+    }
     showLabel() { this.visibleLabel = true; }
     hideLabel() { this.visibleLabel = false; }
     changed() { this.hasChanged = true; }
@@ -1414,11 +1469,30 @@ class FieldDescriptor extends FormElement {
     get backend() { return this.validateOnServer; }
     setVisibleLabel(visibleLabel) { this.visibleLabel = visibleLabel; }
     setEditable(editable = true) { (editable) ? this.enable() : this.disable(); }
-    isEmpty() { return this.getValue() === '' || this.getValue() === undefined || this.getValue() === null; }
-    getErrorCode() { return this.errorCode; }
-    setErrorCode(code) { this.errorCode = code; }
-    getErrorMessage() { return this.errorMessage; }
-    setErrorMessage(msg) { this.errorMessage = msg; }
+    setError(code, message, type = 'error') {
+        this.errorType = (code === '00') ? '' : type;
+        this.errorCode = code;
+        this.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); }
+    getErrorCode() { return this.getError().code; }
+    setErrorCode(code) { this.setError(code, this.errorMessage); }
+    getErrorMessage() { return this.getError().message; }
+    setErrorMessage(msg) { this.setError(this.errorCode, msg); }
+    isEmpty() {
+        const fieldCurrentValue = this.getValue();
+        if (fieldCurrentValue === undefined || fieldCurrentValue === null) {
+            return true;
+        }
+        if ((this.fieldType === FIELD_TYPES.array || this.fieldType === FIELD_TYPES.phone)
+            && Array.isArray(fieldCurrentValue) && fieldCurrentValue.length === 0) {
+            return true;
+        }
+        ;
+        return fieldCurrentValue === '';
+    }
     getValue() {
         var _a;
         switch (this.fieldType) {
@@ -1976,6 +2050,18 @@ class FormStructureAndData {
         const fieldObject = this.getFieldObject(fieldCode);
         return (fieldObject) ? fieldObject.setValue(fieldValue) : null;
     }
+    setFieldError(code, message, type = 'error') {
+        const fieldObject = this.getFieldObject(code);
+        return (fieldObject) ? fieldObject.setError(code, message, type) : null;
+    }
+    setFieldIntrinsicErrorMessage(code, message) {
+        const fieldObject = this.getFieldObject(code);
+        return (fieldObject) ? fieldObject.setIntrinsicErrorMessage(message) : null;
+    }
+    setFieldRequired(fieldCode, required) {
+        const fieldObject = this.getFieldObject(fieldCode);
+        return (fieldObject) ? fieldObject.required = required : null;
+    }
     setFieldErrorMessage(fieldCode, errorMessage) {
         const fieldObject = this.getFieldObject(fieldCode);
         return (fieldObject) ? fieldObject.setErrorMessage(errorMessage) : null;
@@ -2350,7 +2436,10 @@ class BasicFormComponent {
     getFieldsValues(fieldCodesArray) { return this.formStructure.getFieldsValues(fieldCodesArray); }
     getFieldOptions(fieldCode) { return this.formStructure.getFieldOptions(fieldCode); }
     setFieldValue(fieldCode, fieldValue) { return this.formStructure.setFieldValue(fieldCode, fieldValue); }
+    setFieldRequired(fieldCode, required) { return this.formStructure.setFieldRequired(fieldCode, required); }
     setFieldErrorMessage(fieldCode, errorMessage) { return this.formStructure.setFieldErrorMessage(fieldCode, errorMessage); }
+    setFieldError(code, message, type = 'error') { return this.formStructure.setFieldError(code, message, type); }
+    setFieldIntrinsicErrorMessage(code, message) { return this.formStructure.setFieldIntrinsicErrorMessage(code, message); }
     setFieldOptions(fieldCode, optionsArray, idAttribute, nameAttribute) {
         return this.formStructure.setFieldOptions(fieldCode, optionsArray, idAttribute, nameAttribute);
     }
@@ -2543,8 +2632,14 @@ class BasicFormComponent {
         const formFields = this.formStructure.getFields();
         if (Array.isArray(formFields)) {
             formFields.forEach(field => {
-                field.editionFinish.subscribe(code => this.startFieldValidation(code));
-                field.editionPartial.subscribe(code => this.startFieldInputValidation(code));
+                field.editionFinish.subscribe(event => {
+                    const { code, intrinsicValidation } = event;
+                    this.startFieldValidation(code, intrinsicValidation);
+                });
+                field.editionPartial.subscribe(event => {
+                    const { code, intrinsicValidation } = event;
+                    this.startFieldInputValidation(code, intrinsicValidation);
+                });
                 field.detailRequest.subscribe(code => this.showFieldInfo(code));
             });
         }
@@ -2855,7 +2950,7 @@ class BasicFormComponent {
             this.fieldValidationsFinish[fieldCode].push(callbackMethod);
         });
     }
-    startFieldInputValidation(fieldCode) {
+    startFieldInputValidation(fieldCode, intrinsicValidation = true) {
         return __awaiter(this, void 0, void 0, function* () {
             const fieldToValidate = this.getFieldObject(fieldCode);
             if (!fieldToValidate) {
@@ -2874,10 +2969,10 @@ class BasicFormComponent {
             }
         });
     }
-    startFieldValidation(fieldCode) {
+    startFieldValidation(fieldCode, intrinsicValidation = true) {
         return __awaiter(this, void 0, void 0, function* () {
             const fieldToValidate = this.getField(fieldCode);
-            if (!fieldToValidate) {
+            if (!fieldToValidate || !intrinsicValidation) {
                 return;
             }
             fieldToValidate.setErrorMessage('');
@@ -2905,6 +3000,7 @@ class BasicFormComponent {
             let finish = true;
             let validationResult = null;
             if (fieldObj.backend) {
+                fieldObj.validating = true;
                 validationResult = yield this
                     .requestFormAction(componentConstants.FORMACTION_VALIDATE, fieldObj.fieldCode);
                 finish = !this.errorOccured();
@@ -2917,6 +3013,7 @@ class BasicFormComponent {
                 fieldObj.setErrorMessage(this.errorMessage);
                 this.displayValidationServerError();
             }
+            fieldObj.validating = false;
         });
     }
     finishFieldValidation(fieldObject, validationResult) {