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

package/lib/components/XFormDataTable2.d.ts

@@ -3,6 +3,16 @@ import { Component, ReactChild } from "react";
 import { DataTableFilterMeta } from "primereact/datatable";
 import { XEntity, XField } from "../serverApi/XEntityMetadata";
 import { FilterMatchMode } from "primereact/api";
+import { XTableFieldChangeEvent } from "./XFieldChangeEvent";
+import { XCustomFilter } from "../serverApi/FindParam";
+import { XFormComponentDT } from "./XFormComponentDT";
+import { XErrorMap } from "./XErrors";
+import { IconType } from "primereact/utils";
+import { ButtonProps } from "primereact/button";
+export interface XRowTechData {
+    xFormComponentDTList: Array<XFormComponentDT<any>>;
+    errorMap: XErrorMap;
+}
 export interface XDropdownOptionsMap {
     [assocField: string]: any[];
 }
@@ -12,7 +22,8 @@ export interface XFormDataTableProps {
     dataKey?: string;
     paginator?: boolean;
     rows?: number;
-    filterDisplay: "menu" | "row";
+    filterDisplay: "menu" | "row" | "none";
+    sortable: boolean;
     scrollable: boolean;
     scrollWidth?: string;
     scrollHeight?: string;
@@ -20,17 +31,26 @@ export interface XFormDataTableProps {
     label?: string;
     readOnly?: boolean;
     onClickAddRow?: () => void;
-    onClickRemoveRow?: () => void;
+    onClickRemoveRow?: (row: any) => void;
+    removeButtonInRow: boolean;
+    addRowLabel: string;
+    addRowIcon?: IconType<ButtonProps>;
+    removeRowLabel: string;
+    removeRowIcon?: IconType<ButtonProps>;
     width?: string;
     children: ReactChild[];
 }
 export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     static defaultProps: {
         filterDisplay: string;
+        sortable: boolean;
         scrollable: boolean;
         scrollWidth: string;
         scrollHeight: string;
         shrinkWidth: boolean;
+        removeButtonInRow: boolean;
+        addRowLabel: string;
+        removeRowLabel: string;
     };
     props: XFormDataTableProps;
     entity?: string;
@@ -42,7 +62,8 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
         filters: DataTableFilterMeta;
     };
     constructor(props: XFormDataTableProps);
-    static getPathForColumn(columnProps: XFormColumnProps): string;
+    getPathForColumn(columnProps: XFormColumnProps): string;
+    getDisplayFieldOrId(columnPropsAutoComplete: XFormAutoCompleteColumnProps): string;
     static getHeader(columnProps: XFormColumnProps, xEntity: XEntity, field: string, xField: XField): string;
     getEntity(): string;
     createInitFilters(): DataTableFilterMeta;
@@ -55,17 +76,23 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     onDropdownFilterChange(field: string, displayValue: any): void;
     getDropdownFilterValue(field: string): any;
     bodyTemplate(columnProps: XFormColumnProps, rowData: any, xEntity: XEntity): any;
-    onClickAddRowDefault(): void;
-    onClickRemoveRowDefault(): void;
+    onClickAddRow(): void;
+    onClickRemoveRowBySelection(): void;
+    removeRow(row: any): void;
+    validate(): void;
+    getErrorMessages(): string;
     render(): JSX.Element;
 }
+export type TableFieldOnChange = (e: XTableFieldChangeEvent<any, any>) => void;
+export type XTableFieldFilterProp = XCustomFilter | ((object: any, rowData: any) => XCustomFilter | undefined);
 export interface XFormColumnProps {
-    type: string;
+    type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton";
     header?: any;
     readOnly?: boolean;
     dropdownInFilter?: boolean;
     showFilterMenu?: boolean;
     width?: string;
+    onChange?: TableFieldOnChange;
 }
 export interface XFormInputSimpleColumnProps extends XFormColumnProps {
     field: string;
@@ -74,6 +101,13 @@ export interface XFormDropdownColumnProps extends XFormColumnProps {
     assocField: string;
     displayField: string;
 }
+export interface XFormAutoCompleteColumnProps extends XFormColumnProps {
+    assocField: string;
+    displayField: string | ((suggestion: any) => string);
+    searchTable?: any;
+    assocForm?: any;
+    filter?: XTableFieldFilterProp;
+}
 export interface XFormSearchButtonColumnProps extends XFormColumnProps {
     assocField: string;
     displayField: string;
@@ -91,6 +125,12 @@ export declare const XFormDropdownColumn: {
         type: string;
     };
 };
+export declare const XFormAutoCompleteColumn: {
+    (props: XFormAutoCompleteColumnProps): null;
+    defaultProps: {
+        type: string;
+    };
+};
 export declare const XFormSearchButtonColumn: {
     (props: XFormSearchButtonColumnProps): null;
     defaultProps: {

package/lib/components/XFormDataTable2.js

@@ -60,7 +60,8 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XFormSearchButtonColumn = exports.XFormDropdownColumn = exports.XFormColumn = exports.XFormDataTable2 = void 0;
+exports.XFormSearchButtonColumn = exports.XFormAutoCompleteColumn = exports.XFormDropdownColumn = exports.XFormColumn = exports.XFormDataTable2 = void 0;
+var XFormBase_1 = require("./XFormBase");
 var react_1 = __importStar(require("react"));
 var XDropdownDT_1 = require("./XDropdownDT");
 var datatable_1 = require("primereact/datatable");
@@ -76,6 +77,8 @@ var XInputDateDT_1 = require("./XInputDateDT");
 var XCheckboxDT_1 = require("./XCheckboxDT");
 var tristatecheckbox_1 = require("primereact/tristatecheckbox");
 var api_1 = require("primereact/api");
+var XAutoCompleteDT_1 = require("./XAutoCompleteDT");
+var XButtonIconNarrow_1 = require("./XButtonIconNarrow");
 var XFormDataTable2 = /** @class */ (function (_super) {
     __extends(XFormDataTable2, _super);
     function XFormDataTable2(props) {
@@ -94,8 +97,9 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             dropdownOptionsMap: {},
             filters: _this.createInitFilters()
         };
-        _this.onClickAddRowDefault = _this.onClickAddRowDefault.bind(_this);
-        _this.onClickRemoveRowDefault = _this.onClickRemoveRowDefault.bind(_this);
+        _this.onClickAddRow = _this.onClickAddRow.bind(_this);
+        _this.onClickRemoveRowBySelection = _this.onClickRemoveRowBySelection.bind(_this);
+        _this.removeRow = _this.removeRow.bind(_this);
         _this.onSelectionChange = _this.onSelectionChange.bind(_this);
         _this.onDropdownOptionsMapChange = _this.onDropdownOptionsMapChange.bind(_this);
         _this.onFilter = _this.onFilter.bind(_this);
@@ -104,12 +108,13 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         _this.onDropdownFilterChange = _this.onDropdownFilterChange.bind(_this);
         _this.getDropdownFilterValue = _this.getDropdownFilterValue.bind(_this);
         _this.bodyTemplate = _this.bodyTemplate.bind(_this);
+        props.form.addXFormDataTable(_this);
         try {
             //props.form.addField(props.assocField + '.*FAKE*'); - vzdy mame aspon 1 field, nie je to potrebne
             for (var _b = __values(props.children), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var child = _c.value;
                 var childColumn = child; // nevedel som to krajsie...
-                var field = props.assocField + '.' + XFormDataTable2.getPathForColumn(childColumn.props);
+                var field = props.assocField + '.' + _this.getPathForColumn(childColumn.props);
                 props.form.addField(field);
             }
         }
@@ -122,7 +127,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         return _this;
     }
-    XFormDataTable2.getPathForColumn = function (columnProps) {
+    XFormDataTable2.prototype.getPathForColumn = function (columnProps) {
         if (columnProps.type === "inputSimple") {
             var columnPropsInputSimple = columnProps;
             return columnPropsInputSimple.field;
@@ -131,6 +136,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             var columnPropsDropdown = columnProps;
             return columnPropsDropdown.assocField + '.' + columnPropsDropdown.displayField;
         }
+        else if (columnProps.type === "autoComplete") {
+            var columnPropsAutoComplete = columnProps;
+            return columnPropsAutoComplete.assocField + '.' + this.getDisplayFieldOrId(columnPropsAutoComplete);
+        }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
             return columnPropsSearchButton.assocField + '.' + columnPropsSearchButton.displayField;
@@ -139,8 +148,21 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             throw "Unknown prop type = " + columnProps.type;
         }
     };
+    XFormDataTable2.prototype.getDisplayFieldOrId = function (columnPropsAutoComplete) {
+        // toto je hack - ak ratame displayField cez funkciu, tak nam potom v kode chyba (hociaky) atribut asociovaneho objektu
+        // aby sme nemuseli robit nejake velke prerabky a zmeny, tak podsunieme id-ckovy atribut
+        if (typeof columnPropsAutoComplete.displayField === 'string') {
+            return columnPropsAutoComplete.displayField; // vsetko ok
+        }
+        else {
+            // v displayField mame funkciu, zistime id-ckovy atribut
+            // TODO - problem - sortovanie/filtrovanie bude fungovat podla tohto id atributu
+            var xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.getEntity()), columnPropsAutoComplete.assocField);
+            return XUtilsMetadata_1.XUtilsMetadata.getXEntity(xAssoc.entityName).idField;
+        }
+    };
     XFormDataTable2.getHeader = function (columnProps, xEntity, field, xField) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         // poznamky - parametre field a xField by sme mohli vyratavat na zaklade columnProps ale kedze ich uz mame, setrime performance a neduplikujeme vypocet
         // nie je to tu uplne idealne nakodene, ale je to pomerne prehladne
         var isNullable = true;
@@ -156,16 +178,22 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             isNullable = xAssoc.isNullable;
             readOnly = (_a = columnProps.readOnly) !== null && _a !== void 0 ? _a : false;
         }
+        else if (columnProps.type === "autoComplete") {
+            var columnPropsAutoComplete = columnProps;
+            var xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(xEntity, columnPropsAutoComplete.assocField);
+            isNullable = xAssoc.isNullable;
+            readOnly = (_b = columnProps.readOnly) !== null && _b !== void 0 ? _b : false;
+        }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
             var xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(xEntity, columnPropsSearchButton.assocField);
             isNullable = xAssoc.isNullable;
-            readOnly = (_b = columnProps.readOnly) !== null && _b !== void 0 ? _b : false;
+            readOnly = (_c = columnProps.readOnly) !== null && _c !== void 0 ? _c : false;
         }
         else {
             throw "Unknown prop type = " + columnProps.type;
         }
-        var header = (_c = columnProps.header) !== null && _c !== void 0 ? _c : field;
+        var header = (_d = columnProps.header) !== null && _d !== void 0 ? _d : field;
         if (!isNullable && !readOnly) {
             header = XUtils_1.XUtils.markNotNull(header);
         }
@@ -180,13 +208,16 @@ var XFormDataTable2 = /** @class */ (function (_super) {
     XFormDataTable2.prototype.createInitFilters = function () {
         var e_2, _a;
         var initFilters = {};
+        if (this.props.filterDisplay === "none") {
+            return initFilters;
+        }
         var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.getEntity());
         try {
             // TODO - asi by bolo fajn si tieto field, xField niekam ulozit a iterovat ulozene hodnoty, pouziva sa to na viacerych miestach
             for (var _b = __values(this.props.children), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var child = _c.value;
                 var childColumn = child; // nevedel som to krajsie...
-                var field = XFormDataTable2.getPathForColumn(childColumn.props);
+                var field = this.getPathForColumn(childColumn.props);
                 var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPath(xEntity, field);
                 // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
                 var filterMatchMode = this.getFilterMatchMode(xField);
@@ -309,7 +340,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             var columnPropsInputSimple = columnProps;
             var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPath(xEntity, columnPropsInputSimple.field);
             if (xField.type === "decimal" || xField.type === "number") {
-                body = react_1.default.createElement(XInputDecimalDT_1.XInputDecimalDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: columnPropsInputSimple.readOnly });
+                body = react_1.default.createElement(XInputDecimalDT_1.XInputDecimalDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: columnPropsInputSimple.readOnly, onChange: columnPropsInputSimple.onChange });
             }
             else if (xField.type === "date" || xField.type === "datetime") {
                 body = react_1.default.createElement(XInputDateDT_1.XInputDateDT, { form: this.props.form, xField: xField, field: columnPropsInputSimple.field, rowData: rowData, readOnly: columnPropsInputSimple.readOnly });
@@ -326,6 +357,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             var columnPropsDropdown = columnProps;
             body = react_1.default.createElement(XDropdownDT_1.XDropdownDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsDropdown.assocField, displayField: columnPropsDropdown.displayField, dropdownOptionsMap: this.state.dropdownOptionsMap, onDropdownOptionsMapChange: this.onDropdownOptionsMapChange, rowData: rowData });
         }
+        else if (columnProps.type === "autoComplete") {
+            var columnPropsAutoComplete = columnProps;
+            body = react_1.default.createElement(XAutoCompleteDT_1.XAutoCompleteDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsAutoComplete.assocField, displayField: columnPropsAutoComplete.displayField, searchTable: columnPropsAutoComplete.searchTable, assocForm: columnPropsAutoComplete.assocForm, filter: columnPropsAutoComplete.filter, rowData: rowData });
+        }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
             body = react_1.default.createElement(XSearchButtonDT_1.XSearchButtonDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsSearchButton.assocField, displayField: columnPropsSearchButton.displayField, searchTable: columnPropsSearchButton.searchTable, rowData: rowData, readOnly: columnPropsSearchButton.readOnly });
@@ -335,19 +370,95 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         return body;
     };
-    XFormDataTable2.prototype.onClickAddRowDefault = function () {
-        this.props.form.onTableAddRow(this.props.assocField, {}, this.dataKey, this.state.selectedRow);
+    XFormDataTable2.prototype.onClickAddRow = function () {
+        if (this.props.onClickAddRow) {
+            // custom add row
+            this.props.onClickAddRow();
+        }
+        else {
+            // default add row
+            this.props.form.onTableAddRow(this.props.assocField, {}, this.dataKey, this.state.selectedRow);
+        }
     };
     ;
-    XFormDataTable2.prototype.onClickRemoveRowDefault = function () {
+    XFormDataTable2.prototype.onClickRemoveRowBySelection = function () {
         if (this.state.selectedRow !== undefined) {
-            this.props.form.onTableRemoveRow(this.props.assocField, this.state.selectedRow);
+            this.removeRow(this.state.selectedRow);
         }
         else {
             alert("Please select the row.");
         }
     };
     ;
+    XFormDataTable2.prototype.removeRow = function (row) {
+        if (this.props.onClickRemoveRow) {
+            // custom remove
+            this.props.onClickRemoveRow(row);
+        }
+        else {
+            // default remove
+            this.props.form.onTableRemoveRow(this.props.assocField, row);
+        }
+    };
+    XFormDataTable2.prototype.validate = function () {
+        var e_3, _a, e_4, _b;
+        // zvalidujeme vsetky rows a pripadne chyby zapiseme do specialneho fieldu __x_rowTechData
+        var object = this.props.form.getXObject();
+        var rowList = object[this.props.assocField];
+        try {
+            for (var rowList_1 = __values(rowList), rowList_1_1 = rowList_1.next(); !rowList_1_1.done; rowList_1_1 = rowList_1.next()) {
+                var row = rowList_1_1.value;
+                var xRowTechData = XFormBase_1.XFormBase.getXRowTechData(row);
+                var xErrorMap = {};
+                try {
+                    for (var _c = (e_4 = void 0, __values(xRowTechData.xFormComponentDTList)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var xFormComponentDT = _d.value;
+                        var errorItem = xFormComponentDT.validate();
+                        if (errorItem) {
+                            //console.log("Mame field = " + errorItem.field);
+                            xErrorMap[errorItem.field] = errorItem.xError;
+                        }
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
+                xRowTechData.errorMap = xErrorMap;
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (rowList_1_1 && !rowList_1_1.done && (_a = rowList_1.return)) _a.call(rowList_1);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+    };
+    XFormDataTable2.prototype.getErrorMessages = function () {
+        var e_5, _a;
+        var msg = "";
+        var object = this.props.form.getXObject();
+        var rowList = object[this.props.assocField];
+        try {
+            for (var rowList_2 = __values(rowList), rowList_2_1 = rowList_2.next(); !rowList_2_1.done; rowList_2_1 = rowList_2.next()) {
+                var row = rowList_2_1.value;
+                var xRowTechData = XFormBase_1.XFormBase.getXRowTechData(row);
+                msg += XUtils_1.XUtils.getErrorMessages(xRowTechData.errorMap);
+            }
+        }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        finally {
+            try {
+                if (rowList_2_1 && !rowList_2_1.done && (_a = rowList_2.return)) _a.call(rowList_2);
+            }
+            finally { if (e_5) throw e_5.error; }
+        }
+        return msg;
+    };
     XFormDataTable2.prototype.render = function () {
         var _this = this;
         var paginator = this.props.paginator !== undefined ? this.props.paginator : false;
@@ -360,12 +471,11 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 rows = 5; // default
             }
         }
+        var filterDisplay = this.props.filterDisplay !== "none" ? this.props.filterDisplay : undefined;
         var label = this.props.label !== undefined ? this.props.label : this.props.assocField;
         var readOnly = this.props.readOnly !== undefined ? this.props.readOnly : false;
         // v bloku function (child) nejde pouzit priamo this, thisLocal uz ide pouzit
         var thisLocal = this;
-        var onClickAddRow = this.props.onClickAddRow !== undefined ? this.props.onClickAddRow : this.onClickAddRowDefault;
-        var onClickRemoveRow = this.props.onClickRemoveRow !== undefined ? this.props.onClickRemoveRow : this.onClickRemoveRowDefault;
         var object = this.props.form.state.object;
         var valueList = object !== null ? object[this.props.assocField] : [];
         var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.getEntity());
@@ -404,31 +514,35 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             var childColumnProps = childColumn.props;
             // je dolezite, aby field obsahoval cely path az po zobrazovany atribut, lebo podla neho sa vykonava filtrovanie a sortovanie
             // (aj ked, da sa to prebit na stlpcoch (na elemente Column), su na to atributy)
-            var field = XFormDataTable2.getPathForColumn(childColumnProps);
+            var field = thisLocal.getPathForColumn(childColumnProps);
             // TODO - toto by sa mohlo vytiahnut vyssie, aj v bodyTemplate sa vola metoda XUtilsMetadata.getXFieldByPath
             var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPath(xEntity, field);
             // *********** header ***********
             var header = XFormDataTable2.getHeader(childColumnProps, xEntity, field, xField);
             // *********** filterElement ***********
             var filterElement;
-            if (xField.type === "boolean") {
-                var checkboxValue = thisLocal.getCheckboxFilterValue(field);
-                filterElement = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: checkboxValue, onChange: function (e) { return thisLocal.onCheckboxFilterChange(field, e.value); } });
-            }
-            else if (childColumnProps.dropdownInFilter) {
-                var dropdownValue = thisLocal.getDropdownFilterValue(field);
-                filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: thisLocal.getEntity(), path: field, value: dropdownValue, onValueChange: thisLocal.onDropdownFilterChange });
+            if (thisLocal.props.filterDisplay !== "none") {
+                if (xField.type === "boolean") {
+                    var checkboxValue = thisLocal.getCheckboxFilterValue(field);
+                    filterElement = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: checkboxValue, onChange: function (e) { return thisLocal.onCheckboxFilterChange(field, e.value); } });
+                }
+                else if (childColumnProps.dropdownInFilter) {
+                    var dropdownValue = thisLocal.getDropdownFilterValue(field);
+                    filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: thisLocal.getEntity(), path: field, value: dropdownValue, onValueChange: thisLocal.onDropdownFilterChange });
+                }
             }
             // *********** showFilterMenu ***********
-            var showFilterMenu;
-            if (childColumnProps.showFilterMenu !== undefined) {
-                showFilterMenu = childColumnProps.showFilterMenu;
-            }
-            else {
-                showFilterMenu = true; // default
-                if (thisLocal.props.filterDisplay === "row") {
-                    if (xField.type === "boolean" || childColumnProps.dropdownInFilter) {
-                        showFilterMenu = false;
+            var showFilterMenu = false;
+            if (thisLocal.props.filterDisplay !== "none") {
+                if (childColumnProps.showFilterMenu !== undefined) {
+                    showFilterMenu = childColumnProps.showFilterMenu;
+                }
+                else {
+                    showFilterMenu = true; // default
+                    if (thisLocal.props.filterDisplay === "row") {
+                        if (xField.type === "boolean" || childColumnProps.dropdownInFilter) {
+                            showFilterMenu = false;
+                        }
                     }
                 }
             }
@@ -438,10 +552,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             // *********** width/headerStyle ***********
             var width = XUtils_1.XUtils.processPropWidth(childColumn.props.width);
             if (width === undefined || width === "default") {
-                // TODO - if filter not used at all, then buttons flags should be false
                 var filterMenuInFilterRow = thisLocal.props.filterDisplay === "row" && showFilterMenu;
+                var sortableButtonInHeader = thisLocal.props.sortable;
                 var filterButtonInHeader = thisLocal.props.filterDisplay === "menu";
-                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, filterMenuInFilterRow, childColumnProps.type, header, filterButtonInHeader);
+                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, filterMenuInFilterRow, childColumnProps.type, header, sortableButtonInHeader, filterButtonInHeader);
             }
             var headerStyle = {};
             if (width !== undefined) {
@@ -463,24 +577,32 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 align = "center";
             }
             // }
-            return react_1.default.createElement(column_1.Column, { field: field, header: header, filter: true, sortable: true, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, headerStyle: headerStyle, align: align, body: function (rowData) { return thisLocal.bodyTemplate(childColumnProps, rowData, xEntity); } });
+            return react_1.default.createElement(column_1.Column, { field: field, header: header, filter: thisLocal.props.filterDisplay !== "none", sortable: thisLocal.props.sortable, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, headerStyle: headerStyle, align: align, body: function (rowData) { return thisLocal.bodyTemplate(childColumnProps, rowData, xEntity); } });
         });
+        if (this.props.removeButtonInRow) {
+            // je dolezite nastavit sirku header-a, lebo inac ma stlpec sirku 0 a nevidno ho
+            columnElemList.push(react_1.default.createElement(column_1.Column, { key: "removeButton", headerStyle: { width: '2rem' }, body: function (rowData) { return react_1.default.createElement(XButtonIconNarrow_1.XButtonIconNarrow, { icon: "pi pi-times", onClick: function () { return _this.removeRow(rowData); }, addMargin: false }); } }));
+        }
         return (react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: "flex justify-content-center" },
                 react_1.default.createElement("label", null, label)),
             react_1.default.createElement("div", { className: "flex justify-content-center" },
-                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filterDisplay: this.props.filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
+                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filterDisplay: filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
             react_1.default.createElement("div", { className: "flex justify-content-center" },
-                react_1.default.createElement(XButton_1.XButton, { label: "Add row", onClick: onClickAddRow }),
-                react_1.default.createElement(XButton_1.XButton, { label: "Remove row", onClick: onClickRemoveRow }))));
+                react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: this.props.addRowLabel, onClick: this.onClickAddRow }),
+                this.props.removeButtonInRow ? undefined : react_1.default.createElement(XButton_1.XButton, { icon: this.props.removeRowIcon, label: this.props.removeRowLabel, onClick: this.onClickRemoveRowBySelection }))));
     };
     XFormDataTable2.defaultProps = {
         filterDisplay: "row",
+        sortable: true,
         scrollable: true,
         scrollWidth: '100%',
         scrollHeight: '200vh',
         // tym ze pouzivame 200vh (max-height pre body), tak realne scrollovanie sa zapne az pri velmi vela riadkoch
-        shrinkWidth: true
+        shrinkWidth: true,
+        removeButtonInRow: false,
+        addRowLabel: 'Add row',
+        removeRowLabel: 'Remove row'
     };
     return XFormDataTable2;
 }(react_1.Component));
@@ -501,6 +623,14 @@ exports.XFormDropdownColumn = XFormDropdownColumn;
 exports.XFormDropdownColumn.defaultProps = {
     type: "dropdown"
 };
+var XFormAutoCompleteColumn = function (props) {
+    // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
+    return (null);
+};
+exports.XFormAutoCompleteColumn = XFormAutoCompleteColumn;
+exports.XFormAutoCompleteColumn.defaultProps = {
+    type: "autoComplete"
+};
 var XFormSearchButtonColumn = function (props) {
     // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
     return (null);

package/lib/components/XInput.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { XFormComponent, XFormComponentProps } from "./XFormComponent";
 import { XField } from "../serverApi/XEntityMetadata";
-export interface XInputProps extends XFormComponentProps {
+export interface XInputProps<T> extends XFormComponentProps<T> {
     field: string;
     inputStyle?: React.CSSProperties;
 }
-export declare abstract class XInput<P extends XInputProps> extends XFormComponent<P> {
+export declare abstract class XInput<T, P extends XInputProps<T>> extends XFormComponent<T, P> {
     protected xField: XField;
     protected constructor(props: P);
     getField(): string;

package/lib/components/XInputDT.d.ts

@@ -0,0 +1,11 @@
+import { XField } from "../serverApi/XEntityMetadata";
+import { XFormComponentDT, XFormComponentDTProps } from "./XFormComponentDT";
+export interface XInputDTProps extends XFormComponentDTProps {
+    field: string;
+}
+export declare abstract class XInputDT<P extends XInputDTProps> extends XFormComponentDT<P> {
+    protected xField: XField;
+    protected constructor(props: P);
+    getField(): string;
+    isNotNull(): boolean;
+}

package/lib/components/XInputDT.js

@@ -0,0 +1,37 @@
+"use strict";
+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 (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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XInputDT = void 0;
+var XUtilsMetadata_1 = require("./XUtilsMetadata");
+var XFormComponentDT_1 = require("./XFormComponentDT");
+// spolocna nadtrieda pre jednoduche inputy (nie asociacne)
+var XInputDT = /** @class */ (function (_super) {
+    __extends(XInputDT, _super);
+    function XInputDT(props) {
+        var _this = _super.call(this, props) || this;
+        _this.xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPathStr(props.entity, props.field);
+        return _this;
+    }
+    XInputDT.prototype.getField = function () {
+        return this.props.field;
+    };
+    XInputDT.prototype.isNotNull = function () {
+        return !this.xField.isNullable;
+    };
+    return XInputDT;
+}(XFormComponentDT_1.XFormComponentDT));
+exports.XInputDT = XInputDT;

package/lib/components/XInputDate.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
 import { XFormBase } from "./XFormBase";
+import React from "react";
 export declare const XInputDate: (props: {
     form: XFormBase;
     field: string;
     label?: string | undefined;
     readOnly?: boolean | undefined;
+    labelStyle?: React.CSSProperties | undefined;
 }) => JSX.Element;

package/lib/components/XInputDate.js

@@ -11,7 +11,7 @@ var XUtilsMetadata_1 = require("./XUtilsMetadata");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XUtils_1 = require("./XUtils");
 var XInputDate = function (props) {
-    var _a;
+    var _a, _b;
     props.form.addField(props.field);
     var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPathStr(props.form.getEntity(), props.field);
     var showTime = (xField.type === 'datetime');
@@ -49,8 +49,10 @@ var XInputDate = function (props) {
         }
         // fieldValue zostalo undefined (konvertujeme null -> undefined) - Calendar pozaduje undefined, nechce null
     }
+    var labelStyle = (_b = props.labelStyle) !== null && _b !== void 0 ? _b : {};
+    XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { width: XUtils_1.XUtils.FIELD_LABEL_WIDTH });
     return (react_1.default.createElement("div", { className: "field grid" },
-        react_1.default.createElement("label", { htmlFor: props.field, className: "col-fixed", style: { width: XUtils_1.XUtils.FIELD_LABEL_WIDTH } }, label),
+        react_1.default.createElement("label", { htmlFor: props.field, className: "col-fixed", style: labelStyle }, label),
         react_1.default.createElement(calendar_1.Calendar, { id: props.field, value: fieldValue, onChange: onValueChange, disabled: readOnly, showIcon: true, dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(), showTime: showTime, showSeconds: showTime, inputClassName: cssClassName, showOnFocus: false })));
 };
 exports.XInputDate = XInputDate;

package/lib/components/XInputDecimal.d.ts

@@ -1,8 +1,15 @@
 import React from "react";
 import { XFormComponentProps } from "./XFormComponent";
-export interface XInputDecimalProps extends XFormComponentProps {
+import { XInput } from "./XInput";
+export interface XInputDecimalProps extends XFormComponentProps<number> {
     field: string;
     size?: number;
     inputStyle?: React.CSSProperties;
 }
-export declare const XInputDecimal: (props: XInputDecimalProps) => JSX.Element;
+export declare class XInputDecimal extends XInput<number, XInputDecimalProps> {
+    constructor(props: XInputDecimalProps);
+    getValue(): number | undefined;
+    onValueChange(e: any): void;
+    onBlur(e: any): void;
+    render(): JSX.Element;
+}