@michalrakus/x-react-web-lib 1.0.0 → 1.1.0

package/lib/components/XFormBase.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -38,7 +40,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -275,12 +277,33 @@ var XFormBase = /** @class */ (function (_super) {
     XFormBase.prototype.addXFormComponent = function (xFormComponent) {
         this.xFormComponentList.push(xFormComponent);
     };
+    XFormBase.prototype.findXFormComponent = function (field) {
+        var e_2, _a;
+        try {
+            // TODO - vytvorit mapu (field, ref(xFormComponent)), bude to rychlejsie
+            // vytvorit len mapu (a list zrusit) je problem - mozme mat pre jeden field viacero (napr. asociacnych) componentov
+            for (var _b = __values(this.xFormComponentList), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var xFormComponent = _c.value;
+                if (xFormComponent.getField() === field) {
+                    return xFormComponent;
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        return undefined;
+    };
     XFormBase.prototype.addXFormDataTable = function (xFormDataTable) {
         this.xFormDataTableList.push(xFormDataTable);
     };
     XFormBase.prototype.onClickSave = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var isAddRow, object, e_2;
+            var isAddRow, object, e_3;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -310,8 +333,8 @@ var XFormBase = /** @class */ (function (_super) {
                         object = _a.sent();
                         return [3 /*break*/, 4];
                     case 3:
-                        e_2 = _a.sent();
-                        XUtils_1.XUtils.showErrorMessage("Save row failed.", e_2);
+                        e_3 = _a.sent();
+                        XUtils_1.XUtils.showErrorMessage("Save row failed.", e_3);
                         return [2 /*return*/]; // zostavame vo formulari
                     case 4:
                         if (this.props.onSaveOrCancel !== undefined) {
@@ -338,26 +361,28 @@ var XFormBase = /** @class */ (function (_super) {
         }
     };
     XFormBase.prototype.validateSave = function () {
-        var e_3, _a;
+        var e_4, _a;
+        var _b;
         var xErrorMap = this.validateForm();
         // zatial takto
         var msg = "";
         try {
-            for (var _b = __values(Object.entries(xErrorMap)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read(_c.value, 2), field = _d[0], xError = _d[1];
+            for (var _c = __values(Object.entries(xErrorMap)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var _e = __read(_d.value, 2), field = _e[0], xError = _e[1];
                 if (xError) {
-                    if (xError.onChange || xError.onBlur || xError.form) {
-                        msg += field + ": " + xError.onChange + ", " + xError.onBlur + ", " + xError.form + XUtilsCommon_1.XUtilsCommon.newLine;
+                    var errorMessage = XUtils_1.XUtils.getXErrorMessage(xError);
+                    if (errorMessage) {
+                        msg += "".concat((_b = xError.fieldLabel) !== null && _b !== void 0 ? _b : field, ": ").concat(errorMessage).concat(XUtilsCommon_1.XUtilsCommon.newLine);
                     }
                 }
             }
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_4) throw e_4.error; }
         }
         var ok = true;
         if (msg !== "") {
@@ -367,7 +392,7 @@ var XFormBase = /** @class */ (function (_super) {
         return ok;
     };
     XFormBase.prototype.validateForm = function () {
-        var e_4, _a;
+        var e_5, _a;
         var xErrorMap = this.fieldValidation();
         // form validation
         var xErrors = this.validate(this.getXObject());
@@ -375,23 +400,26 @@ var XFormBase = /** @class */ (function (_super) {
             for (var _b = __values(Object.entries(xErrors)), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var _d = __read(_c.value, 2), field = _d[0], error = _d[1];
                 if (error) {
-                    xErrorMap[field] = __assign(__assign({}, xErrorMap[field]), { form: error });
+                    // skusime zistit label
+                    var xFormComponent = this.findXFormComponent(field);
+                    var fieldLabel = xFormComponent ? xFormComponent.getLabel() : undefined;
+                    xErrorMap[field] = __assign(__assign({}, xErrorMap[field]), { form: error, fieldLabel: fieldLabel });
                 }
             }
         }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_4) throw e_4.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         // TODO - optimalizacia - netreba setovat stav ak by sme sli prec z formulara (ak by zbehla validacia aj save a isli by sme naspet do browsu)
         this.setState({ errorMap: xErrorMap });
         return xErrorMap;
     };
     XFormBase.prototype.fieldValidation = function () {
-        var e_5, _a, e_6, _b;
+        var e_6, _a, e_7, _b;
         var xErrorMap = {};
         try {
             for (var _c = __values(this.xFormComponentList), _d = _c.next(); !_d.done; _d = _c.next()) {
@@ -403,12 +431,12 @@ var XFormBase = /** @class */ (function (_super) {
                 }
             }
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_6) throw e_6.error; }
         }
         try {
             for (var _e = __values(this.xFormDataTableList), _f = _e.next(); !_f.done; _f = _e.next()) {
@@ -416,12 +444,12 @@ var XFormBase = /** @class */ (function (_super) {
                 // TODO - validate table
             }
         }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
         finally {
             try {
                 if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_7) throw e_7.error; }
         }
         return xErrorMap;
     };

package/lib/components/XFormBaseT.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

package/lib/components/XFormComponent.d.ts

@@ -8,17 +8,21 @@ export interface XFormComponentProps {
     labelStyle?: React.CSSProperties;
     inline?: boolean;
 }
-export declare class XFormComponent<P extends XFormComponentProps> extends Component<P> {
-    constructor(props: P);
-    getFieldForEdit(): string | undefined;
+export declare abstract class XFormComponent<P extends XFormComponentProps> extends Component<P> {
+    protected constructor(props: P);
+    abstract getField(): string;
+    getValueFromObject(): any;
+    onValueChangeBase(value: any): void;
+    abstract isNotNull(): boolean;
+    isReadOnly(): boolean;
+    getLabel(): string;
+    getLabelStyle(): React.CSSProperties;
     validate(): {
         field: string;
         xError: XError;
     } | undefined;
     validateOnChange(value: any): string | undefined;
     validateNotNull(value: any): string | undefined;
-    checkNotNull(): boolean;
-    getValueFromObject(): any;
-    getError(): string | undefined;
     getClassNameTooltip(): {};
+    getError(): string | undefined;
 }

package/lib/components/XFormComponent.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -15,6 +17,8 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormComponent = void 0;
 var react_1 = require("react");
+var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
+var XUtils_1 = require("./XUtils");
 var XFormComponent = /** @class */ (function (_super) {
     __extends(XFormComponent, _super);
     function XFormComponent(props) {
@@ -22,24 +26,64 @@ var XFormComponent = /** @class */ (function (_super) {
         props.form.addXFormComponent(_this);
         return _this;
     }
-    // pomocna metodka, sluzi napr. na validaciu not null atributov
-    // should be overriden
-    XFormComponent.prototype.getFieldForEdit = function () {
-        return undefined;
+    // ******** read and write from/into form.state.object ***********
+    // reads value from form.state.object
+    // can be overridden, but this should work for every component
+    XFormComponent.prototype.getValueFromObject = function () {
+        var objectValue = null;
+        var object = this.props.form.state.object;
+        if (object !== null) {
+            objectValue = XUtilsCommon_1.XUtilsCommon.getValueByPath(object, this.getField());
+            //  pre istotu dame na null, null je standard
+            if (objectValue === undefined) {
+                objectValue = null;
+            }
+        }
+        return objectValue;
+    };
+    // writes value into form.state.object
+    XFormComponent.prototype.onValueChangeBase = function (value) {
+        var error = this.validateOnChange(value);
+        this.props.form.onFieldChange(this.getField(), value, error);
+    };
+    XFormComponent.prototype.isReadOnly = function () {
+        // tuto do buducna planujeme pridat aj dynamicky readOnly, bude ho treba ukladat do form.state podobne ako sa ukladaju errory do form.state.errorMap
+        return XUtils_1.XUtils.isReadOnly(this.getField(), this.props.readOnly);
     };
+    XFormComponent.prototype.getLabel = function () {
+        var _a;
+        var label = (_a = this.props.label) !== null && _a !== void 0 ? _a : this.getField();
+        // test na readOnly je tu hlavne koli tomu aby sme nemali * pri ID atribute, ktory sa pri inserte generuje az pri zapise do DB
+        if (this.isNotNull() && !this.isReadOnly()) {
+            label = XUtils_1.XUtils.markNotNull(label);
+        }
+        return label;
+    };
+    XFormComponent.prototype.getLabelStyle = function () {
+        var _a, _b;
+        var labelStyle = (_a = this.props.labelStyle) !== null && _a !== void 0 ? _a : {};
+        var inline = (_b = this.props.inline) !== null && _b !== void 0 ? _b : false;
+        if (!inline) {
+            XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { width: XUtils_1.XUtils.FIELD_LABEL_WIDTH });
+        }
+        else {
+            XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { width: 'auto' }); // podla dlzky labelu
+            XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { marginLeft: '1rem' });
+        }
+        return labelStyle;
+    };
+    // *********** validation support ************
     // volane po kliknuti na Save
-    // vrati error message ak nezbehne "field validacia", ak zbehne, vrati undefined
+    // vrati (field, XError) ak nezbehne "field validacia", ak zbehne, vrati undefined
     XFormComponent.prototype.validate = function () {
+        // TODO - FILOZOFICKA OTAZKA - volat validaciu aj ked je field readOnly (this.isReadOnly() === true)? zatial dame ze hej...
         var value = this.getValueFromObject();
         // not null validacia + custom field validacia volana na onChange
         var errorOnChange = this.validateOnChange(value);
         // custom field validacia volana na onBlur (focus lost)
         // TODO
         if (errorOnChange) {
-            var field = this.getFieldForEdit();
-            if (field) {
-                return { field: field, xError: { onChange: errorOnChange } };
-            }
+            return { field: this.getField(), xError: { onChange: errorOnChange, fieldLabel: this.getLabel() } };
         }
         return undefined;
     };
@@ -53,49 +97,14 @@ var XFormComponent = /** @class */ (function (_super) {
         return undefined;
     };
     XFormComponent.prototype.validateNotNull = function (value) {
-        if (this.checkNotNull() && value === null) {
+        // validacia by mala sediet s metodou getLabel(), kde sa pridava * , preto tu mame aj test !this.isReadOnly() - id fieldy pri inserte nechceme testovat
+        // otazka je ci nevypinat validaciu pre readOnly fieldy vzdy (aj ked napr. readOnly vznikne dynamicky)
+        if (this.isNotNull() && !this.isReadOnly() && value === null) {
             return "Field is required.";
         }
         return undefined;
     };
-    // should be overriden
-    XFormComponent.prototype.checkNotNull = function () {
-        return false;
-    };
-    // should be overriden
-    XFormComponent.prototype.getValueFromObject = function () {
-        return null;
-    };
-    // vrati error message z form.state.errorMap
-    XFormComponent.prototype.getError = function () {
-        var field = this.getFieldForEdit();
-        if (field) {
-            var error = this.props.form.state.errorMap[field];
-            if (error) {
-                if (error.onChange || error.onBlur || error.form) {
-                    var message = '';
-                    if (error.onChange) {
-                        message += error.onChange;
-                    }
-                    if (error.onBlur) {
-                        if (message !== '') {
-                            message += ' ';
-                        }
-                        message += error.onBlur;
-                    }
-                    if (error.form) {
-                        if (message !== '') {
-                            message += ' ';
-                        }
-                        message += error.form;
-                    }
-                    return message;
-                }
-            }
-        }
-        return undefined;
-    };
-    // deprecated - nie je to pekne riesenie - do komponentu treba posielat error message (string) a nie props
+    // deprecated - nie je to pekne riesenie - do komponentu treba posielat error message (string) a nie props (asi ako v XAutoComplete)
     XFormComponent.prototype.getClassNameTooltip = function () {
         var error = this.getError();
         return error ? {
@@ -104,6 +113,11 @@ var XFormComponent = /** @class */ (function (_super) {
             tooltipOptions: { className: 'pink-tooltip', position: 'bottom' }
         } : {};
     };
+    // vrati error message z form.state.errorMap
+    XFormComponent.prototype.getError = function () {
+        var error = this.props.form.state.errorMap[this.getField()];
+        return error ? XUtils_1.XUtils.getXErrorMessage(error) : undefined;
+    };
     return XFormComponent;
 }(react_1.Component));
 exports.XFormComponent = XFormComponent;

package/lib/components/XFormDataTable2.d.ts

@@ -1,7 +1,8 @@
 import { XFormBase } from "./XFormBase";
 import { Component, ReactChild } from "react";
-import { Filters } from "../serverApi/FindParam";
+import { DataTableFilterMeta } from "primereact/datatable";
 import { XEntity, XField } from "../serverApi/XEntityMetadata";
+import { FilterMatchMode } from "primereact/api";
 export interface XDropdownOptionsMap {
     [assocField: string]: any[];
 }
@@ -11,6 +12,7 @@ export interface XFormDataTableProps {
     dataKey?: string;
     paginator?: boolean;
     rows?: number;
+    filterDisplay: "menu" | "row";
     scrollable: boolean;
     scrollWidth?: string;
     scrollHeight?: string;
@@ -24,6 +26,7 @@ export interface XFormDataTableProps {
 }
 export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     static defaultProps: {
+        filterDisplay: string;
         scrollable: boolean;
         scrollWidth: string;
         scrollHeight: string;
@@ -36,12 +39,14 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     state: {
         selectedRow: {} | undefined;
         dropdownOptionsMap: XDropdownOptionsMap;
-        filters: Filters;
+        filters: DataTableFilterMeta;
     };
     constructor(props: XFormDataTableProps);
     static getPathForColumn(columnProps: XFormColumnProps): string;
     static getHeader(columnProps: XFormColumnProps, xEntity: XEntity, field: string, xField: XField): string;
     getEntity(): string;
+    createInitFilters(): DataTableFilterMeta;
+    getFilterMatchMode(xField: XField): FilterMatchMode;
     onSelectionChange(event: any): void;
     onDropdownOptionsMapChange(dropdownOptionsMap: XDropdownOptionsMap): void;
     onFilter(event: any): void;
@@ -49,7 +54,6 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     getCheckboxFilterValue(field: string): boolean | null;
     onDropdownFilterChange(field: string, displayValue: any): void;
     getDropdownFilterValue(field: string): any;
-    onBodyValueChange(field: string, rowData: any, newValue: any): void;
     bodyTemplate(columnProps: XFormColumnProps, rowData: any, xEntity: XEntity): any;
     onClickAddRowDefault(): void;
     onClickRemoveRowDefault(): void;
@@ -60,6 +64,7 @@ export interface XFormColumnProps {
     header?: any;
     readOnly?: boolean;
     dropdownInFilter?: boolean;
+    showFilterMenu?: boolean;
     width?: string;
 }
 export interface XFormInputSimpleColumnProps extends XFormColumnProps {