@michalrakus/x-react-web-lib 1.8.0 → 1.9.0

package/lib/components/XFormDataTable2.js

@@ -1,686 +1,686 @@
-"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 __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-var column_1 = require("primereact/column");
-var XButton_1 = require("./XButton");
-var XInputTextDT_1 = require("./XInputTextDT");
-var XSearchButtonDT_1 = require("./XSearchButtonDT");
-var XUtilsMetadata_1 = require("./XUtilsMetadata");
-var XUtils_1 = require("./XUtils");
-var XDropdownDTFilter_1 = require("./XDropdownDTFilter");
-var XInputDecimalDT_1 = require("./XInputDecimalDT");
-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 XLocale_1 = require("./XLocale");
-var XFormDataTable2 = /** @class */ (function (_super) {
-    __extends(XFormDataTable2, _super);
-    function XFormDataTable2(props) {
-        var e_1, _a;
-        var _this = _super.call(this, props) || this;
-        _this.props = props;
-        _this.dataKey = props.dataKey;
-        var xEntityForm = XUtilsMetadata_1.XUtilsMetadata.getXEntity(props.form.getEntity());
-        var xAssocToMany = XUtilsMetadata_1.XUtilsMetadata.getXAssocToMany(xEntityForm, props.assocField);
-        _this.entity = xAssocToMany.entityName;
-        if (_this.dataKey === undefined) {
-            _this.dataKey = XUtilsMetadata_1.XUtilsMetadata.getXEntity(_this.entity).idField;
-        }
-        _this.state = {
-            selectedRow: undefined,
-            dropdownOptionsMap: {},
-            filters: _this.createInitFilters()
-        };
-        _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);
-        _this.onCheckboxFilterChange = _this.onCheckboxFilterChange.bind(_this);
-        _this.getCheckboxFilterValue = _this.getCheckboxFilterValue.bind(_this);
-        _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 + '.' + _this.getPathForColumn(childColumn.props);
-                props.form.addField(field);
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        return _this;
-    }
-    XFormDataTable2.prototype.getPathForColumn = function (columnProps) {
-        if (columnProps.type === "inputSimple") {
-            var columnPropsInputSimple = columnProps;
-            return columnPropsInputSimple.field;
-        }
-        else if (columnProps.type === "dropdown") {
-            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;
-        }
-        else {
-            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, _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;
-        var readOnly = false;
-        if (columnProps.type === "inputSimple") {
-            var columnPropsInputSimple = columnProps;
-            isNullable = xField.isNullable;
-            readOnly = XUtils_1.XUtils.isReadOnly(columnPropsInputSimple.field, columnProps.readOnly);
-        }
-        else if (columnProps.type === "dropdown") {
-            var columnPropsDropdown = columnProps;
-            var xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(xEntity, columnPropsDropdown.assocField);
-            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 = (_c = columnProps.readOnly) !== null && _c !== void 0 ? _c : false;
-        }
-        else {
-            throw "Unknown prop type = " + columnProps.type;
-        }
-        var header = (_d = columnProps.header) !== null && _d !== void 0 ? _d : field;
-        if (!isNullable && !readOnly) {
-            header = XUtils_1.XUtils.markNotNull(header);
-        }
-        return header;
-    };
-    XFormDataTable2.prototype.getEntity = function () {
-        if (this.entity === undefined) {
-            throw "Unexpected error: this.entity is undefined";
-        }
-        return this.entity;
-    };
-    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 = 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);
-                var filterItem = void 0;
-                if (this.props.filterDisplay === "menu") {
-                    // DataTableOperatorFilterMetaData: operator + filter values
-                    filterItem = {
-                        operator: api_1.FilterOperator.OR,
-                        constraints: [{ value: null, matchMode: filterMatchMode }]
-                    };
-                }
-                else {
-                    // props.filterDisplay === "row"
-                    // DataTableFilterMetaData: filter value
-                    filterItem = { value: null, matchMode: filterMatchMode };
-                }
-                initFilters[field] = filterItem;
-            }
-        }
-        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 initFilters;
-    };
-    XFormDataTable2.prototype.getFilterMatchMode = function (xField) {
-        var filterMatchMode;
-        if (xField.type === "string") {
-            filterMatchMode = api_1.FilterMatchMode.STARTS_WITH;
-        }
-        // zatial vsetky ostatne EQUALS
-        else if (xField.type === "decimal" || xField.type === "number" || xField.type === "date" || xField.type === "datetime" || xField.type === "boolean") {
-            filterMatchMode = api_1.FilterMatchMode.EQUALS;
-        }
-        else {
-            throw "XField ".concat(xField.name, ": unknown xField.type = ").concat(xField.type);
-        }
-        return filterMatchMode;
-    };
-    XFormDataTable2.prototype.onSelectionChange = function (event) {
-        //console.log("zavolany onSelectionChange");
-        //console.log(event.value);
-        this.setState({ selectedRow: event.value });
-    };
-    XFormDataTable2.prototype.onDropdownOptionsMapChange = function (dropdownOptionsMap) {
-        this.setState({ dropdownOptionsMap: dropdownOptionsMap });
-    };
-    XFormDataTable2.prototype.onFilter = function (event) {
-        //console.log("zavolany onFilter - this.state.filters = " + JSON.stringify(this.state.filters));
-        //console.log("zavolany onFilter - event.filters = " + JSON.stringify(event.filters));
-        // tymto zavolanim sa zapise znak zapisany klavesnicou do inputu filtra (ak prikaz zakomentujeme, input filtra zostane prazdny)
-        this.setState({ filters: event.filters });
-    };
-    XFormDataTable2.prototype.onCheckboxFilterChange = function (field, checkboxValue) {
-        // TODO - treba vyklonovat?
-        var filtersCloned = __assign({}, this.state.filters);
-        if (checkboxValue !== null) {
-            filtersCloned[field] = { value: checkboxValue ? "true" : "false", matchMode: api_1.FilterMatchMode.EQUALS };
-        }
-        else {
-            // pouzivatel zrusil hodnotu vo filtri (vybral prazdny stav v checkboxe), zrusime polozku z filtra
-            //delete filtersCloned[field];
-            filtersCloned[field] = { value: null, matchMode: api_1.FilterMatchMode.EQUALS };
-        }
-        this.setState({ filters: filtersCloned });
-    };
-    XFormDataTable2.prototype.getCheckboxFilterValue = function (field) {
-        var checkboxValue = null;
-        var filterValue = this.state.filters[field];
-        if (filterValue !== undefined && filterValue !== null) {
-            if (filterValue.value === 'true') {
-                checkboxValue = true;
-            }
-            else if (filterValue.value === 'false') {
-                checkboxValue = false;
-            }
-        }
-        return checkboxValue;
-    };
-    XFormDataTable2.prototype.onDropdownFilterChange = function (field, displayValue) {
-        // TODO - treba vyklonovat?
-        var filtersCloned = __assign({}, this.state.filters);
-        if (displayValue !== XUtils_1.XUtils.dropdownEmptyOptionValue) {
-            filtersCloned[field] = { value: displayValue, matchMode: api_1.FilterMatchMode.EQUALS };
-        }
-        else {
-            // pouzivatel zrusil hodnotu vo filtri (vybral prazdny riadok), zrusime polozku z filtra
-            //delete filtersCloned[field];
-            filtersCloned[field] = { value: null, matchMode: api_1.FilterMatchMode.EQUALS };
-        }
-        this.setState({ filters: filtersCloned });
-    };
-    XFormDataTable2.prototype.getDropdownFilterValue = function (field) {
-        var dropdownValue = XUtils_1.XUtils.dropdownEmptyOptionValue;
-        var filterValue = this.state.filters[field];
-        if (filterValue !== undefined && filterValue !== null) {
-            if (filterValue.value !== null) {
-                dropdownValue = filterValue.value;
-            }
-        }
-        return dropdownValue;
-    };
-    /*  pravdepodobne zombie
-        onBodyValueChange (field: string, rowData: any, newValue: any) {
-            //console.log("onBodyValueChange");
-    
-            // zmenime hodnotu v modeli (odtial sa hodnota cita)
-            rowData[field] = newValue;
-            // kedze "rowData" je sucastou "props.form.state.object", tak nam staci zavolat setState({object: object}), aby sa zmena prejavila
-            this.props.form.onObjectDataChange();
-        }
-    */
-    // body={(rowData: any) => bodyTemplate(childColumn.props.field, rowData)}
-    XFormDataTable2.prototype.bodyTemplate = function (columnProps, tableReadOnly, rowData, xEntity) {
-        var _a, _b;
-        var body;
-        if (columnProps.type === "inputSimple") {
-            var columnPropsInputSimple = columnProps;
-            // tableReadOnly has higher prio then property readOnly
-            var readOnly = tableReadOnly || ((_a = columnPropsInputSimple.readOnly) !== null && _a !== void 0 ? _a : false);
-            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: 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: readOnly });
-            }
-            else if (xField.type === "boolean") {
-                body = react_1.default.createElement(XCheckboxDT_1.XCheckboxDT, { form: this.props.form, xField: xField, field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
-            }
-            else {
-                // xField.type === "string", pripadne ine jednoduche typy
-                body = react_1.default.createElement(XInputTextDT_1.XInputTextDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
-            }
-        }
-        else if (columnProps.type === "dropdown") {
-            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;
-            // tableReadOnly has higher prio then property readOnly
-            var readOnly = tableReadOnly || ((_b = columnPropsAutoComplete.readOnly) !== null && _b !== void 0 ? _b : false);
-            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, readOnly: readOnly });
-        }
-        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 });
-        }
-        else {
-            throw "Unknown prop type = " + columnProps.type;
-        }
-        return body;
-    };
-    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.onClickRemoveRowBySelection = function () {
-        if (this.state.selectedRow !== undefined) {
-            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;
-    };
-    // TODO - velmi podobna funkcia ako XFormComponent.isReadOnly() - zjednotit ak sa da
-    XFormDataTable2.prototype.isReadOnly = function () {
-        var readOnly;
-        // the purpose of formReadOnly is to put the whole form to read only mode,
-        // that's why the formReadOnly has higher prio then property this.props.readOnly
-        if (this.props.form.formReadOnlyBase(this.props.assocField)) {
-            readOnly = true;
-        }
-        else if (typeof this.props.readOnly === 'boolean') {
-            readOnly = this.props.readOnly;
-        }
-        // TODO
-        // else if (typeof this.props.readOnly === 'function') {
-        //     // TODO - tazko povedat ci niekedy bude object === null (asi ano vid metodu getFilterBase)
-        //     const object: XObject = this.props.form.state.object;
-        //     if (object) {
-        //         readOnly = this.props.readOnly(this.props.form.getXObject());
-        //     }
-        //     else {
-        //         readOnly = true;
-        //     }
-        // }
-        else {
-            // readOnly is undefined
-            readOnly = false;
-        }
-        return readOnly;
-    };
-    XFormDataTable2.prototype.render = function () {
-        var _this = this;
-        var _a, _b;
-        var paginator = this.props.paginator !== undefined ? this.props.paginator : false;
-        var rows = undefined;
-        if (paginator) {
-            if (this.props.rows !== undefined) {
-                rows = this.props.rows;
-            }
-            else {
-                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.isReadOnly();
-        // v bloku function (child) nejde pouzit priamo this, thisLocal uz ide pouzit
-        var thisLocal = this;
-        var object = this.props.form.state.object;
-        var valueList = object !== null ? object[this.props.assocField] : [];
-        var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.getEntity());
-        var scrollWidth = undefined; // vypnute horizontalne scrollovanie
-        var scrollHeight = undefined; // vypnute vertikalne scrollovanie
-        if (this.props.scrollable) {
-            if (this.props.scrollWidth !== "none") {
-                scrollWidth = this.props.scrollWidth;
-            }
-            if (this.props.scrollHeight !== "none") {
-                scrollHeight = this.props.scrollHeight;
-            }
-        }
-        var style = {};
-        if (scrollWidth !== undefined) {
-            style.width = scrollWidth;
-        }
-        if (this.props.shrinkWidth) {
-            style.maxWidth = 'min-content'; // ak nic nedame (nechame auto), tak (v pripade ak nebudeme mat horizontalny scrollbar) natiahne tabulku na celu sirku stranky, co nechceme
-        }
-        // pri prechode z Primereact 6.x na 9.x sa tableLayout zmenil z fixed na auto a nefungovalo nastavenie sirok stlpcov - docasne teda takto
-        var tableStyle = { tableLayout: 'fixed' };
-        if (this.props.width !== undefined) {
-            var width = this.props.width;
-            if (!isNaN(Number(width))) { // if width is number
-                width = width + 'rem';
-            }
-            tableStyle = __assign(__assign({}, tableStyle), { width: width });
-        }
-        // pre lepsiu citatelnost vytvarame stlpce uz tu
-        var columnElemList = react_1.default.Children.map(this.props.children, function (child) {
-            // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
-            // priklad je na https://soshace.com/building-react-components-using-children-props-and-context-api/
-            // (vzdy musime robit manipulacie so stlpcom, lebo potrebujeme pridat filter={true} sortable={true}
-            var childColumn = child; // nevedel som to krajsie...
-            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 = 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 (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 = 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;
-                        }
-                    }
-                }
-            }
-            // *********** showClearButton ***********
-            // pre filterDisplay = "row" nechceme clear button, chceme setrit miesto
-            var showClearButton = thisLocal.props.filterDisplay === "menu";
-            // *********** width/headerStyle ***********
-            var width = XUtils_1.XUtils.processPropWidth(childColumn.props.width);
-            if (width === undefined || width === "default") {
-                var filterMenuInFilterRow = thisLocal.props.filterDisplay === "row" && showFilterMenu;
-                var sortableButtonInHeader = thisLocal.props.sortable;
-                var filterButtonInHeader = thisLocal.props.filterDisplay === "menu";
-                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, undefined, filterMenuInFilterRow, childColumnProps.type, header, sortableButtonInHeader, filterButtonInHeader);
-            }
-            var headerStyle = {};
-            if (width !== undefined) {
-                headerStyle = { width: width };
-            }
-            // *********** align ***********
-            var align = undefined; // default undefined (left)
-            // do buducna
-            // if (childColumnProps.align !== undefined) {
-            //     align = childColumnProps.align;
-            // }
-            // else {
-            // decimal defaultne zarovnavame doprava
-            // if (xField.type === "decimal") {
-            //     align = "right";
-            // }
-            // else
-            if (xField.type === "boolean") {
-                align = "center";
-            }
-            // }
-            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, readOnly, rowData, xEntity); } });
-        });
-        if (this.props.showAddRemoveButtons && 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); }, disabled: readOnly, addMargin: false }); } }));
-        }
-        var addRowLabel = undefined;
-        var removeRowLabel = undefined;
-        if (this.props.showAddRemoveButtons) {
-            // calling xLocaleOption does not work in standard default values initialisation place (public static defaultProps)
-            addRowLabel = (_a = this.props.addRowLabel) !== null && _a !== void 0 ? _a : (0, XLocale_1.xLocaleOption)('addRow');
-            removeRowLabel = (_b = this.props.removeRowLabel) !== null && _b !== void 0 ? _b : (0, XLocale_1.xLocaleOption)('removeRow');
-        }
-        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: filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: this.props.sortField !== undefined ? [{ field: this.props.sortField, order: 1 }] : undefined, 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)),
-            this.props.showAddRemoveButtons ?
-                react_1.default.createElement("div", { className: "flex justify-content-center" },
-                    react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: addRowLabel, onClick: this.onClickAddRow, disabled: readOnly }),
-                    this.props.removeButtonInRow ? undefined : react_1.default.createElement(XButton_1.XButton, { icon: this.props.removeRowIcon, label: removeRowLabel, onClick: this.onClickRemoveRowBySelection, disabled: readOnly }))
-                : undefined));
-    };
-    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,
-        showAddRemoveButtons: true,
-        removeButtonInRow: true,
-        addRowIcon: "pi pi-plus",
-        removeRowIcon: "pi pi-times"
-    };
-    return XFormDataTable2;
-}(react_1.Component));
-exports.XFormDataTable2 = XFormDataTable2;
-var XFormColumn = 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.XFormColumn = XFormColumn;
-exports.XFormColumn.defaultProps = {
-    type: "inputSimple"
-};
-var XFormDropdownColumn = 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.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);
-};
-exports.XFormSearchButtonColumn = XFormSearchButtonColumn;
-exports.XFormSearchButtonColumn.defaultProps = {
-    type: "searchButton"
-};
+"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 __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+var column_1 = require("primereact/column");
+var XButton_1 = require("./XButton");
+var XInputTextDT_1 = require("./XInputTextDT");
+var XSearchButtonDT_1 = require("./XSearchButtonDT");
+var XUtilsMetadata_1 = require("./XUtilsMetadata");
+var XUtils_1 = require("./XUtils");
+var XDropdownDTFilter_1 = require("./XDropdownDTFilter");
+var XInputDecimalDT_1 = require("./XInputDecimalDT");
+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 XLocale_1 = require("./XLocale");
+var XFormDataTable2 = /** @class */ (function (_super) {
+    __extends(XFormDataTable2, _super);
+    function XFormDataTable2(props) {
+        var e_1, _a;
+        var _this = _super.call(this, props) || this;
+        _this.props = props;
+        _this.dataKey = props.dataKey;
+        var xEntityForm = XUtilsMetadata_1.XUtilsMetadata.getXEntity(props.form.getEntity());
+        var xAssocToMany = XUtilsMetadata_1.XUtilsMetadata.getXAssocToMany(xEntityForm, props.assocField);
+        _this.entity = xAssocToMany.entityName;
+        if (_this.dataKey === undefined) {
+            _this.dataKey = XUtilsMetadata_1.XUtilsMetadata.getXEntity(_this.entity).idField;
+        }
+        _this.state = {
+            selectedRow: undefined,
+            dropdownOptionsMap: {},
+            filters: _this.createInitFilters()
+        };
+        _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);
+        _this.onCheckboxFilterChange = _this.onCheckboxFilterChange.bind(_this);
+        _this.getCheckboxFilterValue = _this.getCheckboxFilterValue.bind(_this);
+        _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 + '.' + _this.getPathForColumn(childColumn.props);
+                props.form.addField(field);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return _this;
+    }
+    XFormDataTable2.prototype.getPathForColumn = function (columnProps) {
+        if (columnProps.type === "inputSimple") {
+            var columnPropsInputSimple = columnProps;
+            return columnPropsInputSimple.field;
+        }
+        else if (columnProps.type === "dropdown") {
+            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;
+        }
+        else {
+            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, _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;
+        var readOnly = false;
+        if (columnProps.type === "inputSimple") {
+            var columnPropsInputSimple = columnProps;
+            isNullable = xField.isNullable;
+            readOnly = XUtils_1.XUtils.isReadOnly(columnPropsInputSimple.field, columnProps.readOnly);
+        }
+        else if (columnProps.type === "dropdown") {
+            var columnPropsDropdown = columnProps;
+            var xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(xEntity, columnPropsDropdown.assocField);
+            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 = (_c = columnProps.readOnly) !== null && _c !== void 0 ? _c : false;
+        }
+        else {
+            throw "Unknown prop type = " + columnProps.type;
+        }
+        var header = (_d = columnProps.header) !== null && _d !== void 0 ? _d : field;
+        if (!isNullable && !readOnly) {
+            header = XUtils_1.XUtils.markNotNull(header);
+        }
+        return header;
+    };
+    XFormDataTable2.prototype.getEntity = function () {
+        if (this.entity === undefined) {
+            throw "Unexpected error: this.entity is undefined";
+        }
+        return this.entity;
+    };
+    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 = 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);
+                var filterItem = void 0;
+                if (this.props.filterDisplay === "menu") {
+                    // DataTableOperatorFilterMetaData: operator + filter values
+                    filterItem = {
+                        operator: api_1.FilterOperator.OR,
+                        constraints: [{ value: null, matchMode: filterMatchMode }]
+                    };
+                }
+                else {
+                    // props.filterDisplay === "row"
+                    // DataTableFilterMetaData: filter value
+                    filterItem = { value: null, matchMode: filterMatchMode };
+                }
+                initFilters[field] = filterItem;
+            }
+        }
+        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 initFilters;
+    };
+    XFormDataTable2.prototype.getFilterMatchMode = function (xField) {
+        var filterMatchMode;
+        if (xField.type === "string") {
+            filterMatchMode = api_1.FilterMatchMode.STARTS_WITH;
+        }
+        // zatial vsetky ostatne EQUALS
+        else if (xField.type === "decimal" || xField.type === "number" || xField.type === "date" || xField.type === "datetime" || xField.type === "boolean") {
+            filterMatchMode = api_1.FilterMatchMode.EQUALS;
+        }
+        else {
+            throw "XField ".concat(xField.name, ": unknown xField.type = ").concat(xField.type);
+        }
+        return filterMatchMode;
+    };
+    XFormDataTable2.prototype.onSelectionChange = function (event) {
+        //console.log("zavolany onSelectionChange");
+        //console.log(event.value);
+        this.setState({ selectedRow: event.value });
+    };
+    XFormDataTable2.prototype.onDropdownOptionsMapChange = function (dropdownOptionsMap) {
+        this.setState({ dropdownOptionsMap: dropdownOptionsMap });
+    };
+    XFormDataTable2.prototype.onFilter = function (event) {
+        //console.log("zavolany onFilter - this.state.filters = " + JSON.stringify(this.state.filters));
+        //console.log("zavolany onFilter - event.filters = " + JSON.stringify(event.filters));
+        // tymto zavolanim sa zapise znak zapisany klavesnicou do inputu filtra (ak prikaz zakomentujeme, input filtra zostane prazdny)
+        this.setState({ filters: event.filters });
+    };
+    XFormDataTable2.prototype.onCheckboxFilterChange = function (field, checkboxValue) {
+        // TODO - treba vyklonovat?
+        var filtersCloned = __assign({}, this.state.filters);
+        if (checkboxValue !== null) {
+            filtersCloned[field] = { value: checkboxValue ? "true" : "false", matchMode: api_1.FilterMatchMode.EQUALS };
+        }
+        else {
+            // pouzivatel zrusil hodnotu vo filtri (vybral prazdny stav v checkboxe), zrusime polozku z filtra
+            //delete filtersCloned[field];
+            filtersCloned[field] = { value: null, matchMode: api_1.FilterMatchMode.EQUALS };
+        }
+        this.setState({ filters: filtersCloned });
+    };
+    XFormDataTable2.prototype.getCheckboxFilterValue = function (field) {
+        var checkboxValue = null;
+        var filterValue = this.state.filters[field];
+        if (filterValue !== undefined && filterValue !== null) {
+            if (filterValue.value === 'true') {
+                checkboxValue = true;
+            }
+            else if (filterValue.value === 'false') {
+                checkboxValue = false;
+            }
+        }
+        return checkboxValue;
+    };
+    XFormDataTable2.prototype.onDropdownFilterChange = function (field, displayValue) {
+        // TODO - treba vyklonovat?
+        var filtersCloned = __assign({}, this.state.filters);
+        if (displayValue !== XUtils_1.XUtils.dropdownEmptyOptionValue) {
+            filtersCloned[field] = { value: displayValue, matchMode: api_1.FilterMatchMode.EQUALS };
+        }
+        else {
+            // pouzivatel zrusil hodnotu vo filtri (vybral prazdny riadok), zrusime polozku z filtra
+            //delete filtersCloned[field];
+            filtersCloned[field] = { value: null, matchMode: api_1.FilterMatchMode.EQUALS };
+        }
+        this.setState({ filters: filtersCloned });
+    };
+    XFormDataTable2.prototype.getDropdownFilterValue = function (field) {
+        var dropdownValue = XUtils_1.XUtils.dropdownEmptyOptionValue;
+        var filterValue = this.state.filters[field];
+        if (filterValue !== undefined && filterValue !== null) {
+            if (filterValue.value !== null) {
+                dropdownValue = filterValue.value;
+            }
+        }
+        return dropdownValue;
+    };
+    /*  pravdepodobne zombie
+        onBodyValueChange (field: string, rowData: any, newValue: any) {
+            //console.log("onBodyValueChange");
+    
+            // zmenime hodnotu v modeli (odtial sa hodnota cita)
+            rowData[field] = newValue;
+            // kedze "rowData" je sucastou "props.form.state.object", tak nam staci zavolat setState({object: object}), aby sa zmena prejavila
+            this.props.form.onObjectDataChange();
+        }
+    */
+    // body={(rowData: any) => bodyTemplate(childColumn.props.field, rowData)}
+    XFormDataTable2.prototype.bodyTemplate = function (columnProps, tableReadOnly, rowData, xEntity) {
+        var _a, _b;
+        var body;
+        if (columnProps.type === "inputSimple") {
+            var columnPropsInputSimple = columnProps;
+            // tableReadOnly has higher prio then property readOnly
+            var readOnly = tableReadOnly || ((_a = columnPropsInputSimple.readOnly) !== null && _a !== void 0 ? _a : false);
+            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: 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: readOnly });
+            }
+            else if (xField.type === "boolean") {
+                body = react_1.default.createElement(XCheckboxDT_1.XCheckboxDT, { form: this.props.form, xField: xField, field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
+            }
+            else {
+                // xField.type === "string", pripadne ine jednoduche typy
+                body = react_1.default.createElement(XInputTextDT_1.XInputTextDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
+            }
+        }
+        else if (columnProps.type === "dropdown") {
+            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;
+            // tableReadOnly has higher prio then property readOnly
+            var readOnly = tableReadOnly || ((_b = columnPropsAutoComplete.readOnly) !== null && _b !== void 0 ? _b : false);
+            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, readOnly: readOnly });
+        }
+        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 });
+        }
+        else {
+            throw "Unknown prop type = " + columnProps.type;
+        }
+        return body;
+    };
+    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.onClickRemoveRowBySelection = function () {
+        if (this.state.selectedRow !== undefined) {
+            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;
+    };
+    // TODO - velmi podobna funkcia ako XFormComponent.isReadOnly() - zjednotit ak sa da
+    XFormDataTable2.prototype.isReadOnly = function () {
+        var readOnly;
+        // the purpose of formReadOnly is to put the whole form to read only mode,
+        // that's why the formReadOnly has higher prio then property this.props.readOnly
+        if (this.props.form.formReadOnlyBase(this.props.assocField)) {
+            readOnly = true;
+        }
+        else if (typeof this.props.readOnly === 'boolean') {
+            readOnly = this.props.readOnly;
+        }
+        // TODO
+        // else if (typeof this.props.readOnly === 'function') {
+        //     // TODO - tazko povedat ci niekedy bude object === null (asi ano vid metodu getFilterBase)
+        //     const object: XObject = this.props.form.state.object;
+        //     if (object) {
+        //         readOnly = this.props.readOnly(this.props.form.getXObject());
+        //     }
+        //     else {
+        //         readOnly = true;
+        //     }
+        // }
+        else {
+            // readOnly is undefined
+            readOnly = false;
+        }
+        return readOnly;
+    };
+    XFormDataTable2.prototype.render = function () {
+        var _this = this;
+        var _a, _b;
+        var paginator = this.props.paginator !== undefined ? this.props.paginator : false;
+        var rows = undefined;
+        if (paginator) {
+            if (this.props.rows !== undefined) {
+                rows = this.props.rows;
+            }
+            else {
+                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.isReadOnly();
+        // v bloku function (child) nejde pouzit priamo this, thisLocal uz ide pouzit
+        var thisLocal = this;
+        var object = this.props.form.state.object;
+        var valueList = object !== null ? object[this.props.assocField] : [];
+        var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.getEntity());
+        var scrollWidth = undefined; // vypnute horizontalne scrollovanie
+        var scrollHeight = undefined; // vypnute vertikalne scrollovanie
+        if (this.props.scrollable) {
+            if (this.props.scrollWidth !== "none") {
+                scrollWidth = this.props.scrollWidth;
+            }
+            if (this.props.scrollHeight !== "none") {
+                scrollHeight = this.props.scrollHeight;
+            }
+        }
+        var style = {};
+        if (scrollWidth !== undefined) {
+            style.width = scrollWidth;
+        }
+        if (this.props.shrinkWidth) {
+            style.maxWidth = 'min-content'; // ak nic nedame (nechame auto), tak (v pripade ak nebudeme mat horizontalny scrollbar) natiahne tabulku na celu sirku stranky, co nechceme
+        }
+        // pri prechode z Primereact 6.x na 9.x sa tableLayout zmenil z fixed na auto a nefungovalo nastavenie sirok stlpcov - docasne teda takto
+        var tableStyle = { tableLayout: 'fixed' };
+        if (this.props.width !== undefined) {
+            var width = this.props.width;
+            if (!isNaN(Number(width))) { // if width is number
+                width = width + 'rem';
+            }
+            tableStyle = __assign(__assign({}, tableStyle), { width: width });
+        }
+        // pre lepsiu citatelnost vytvarame stlpce uz tu
+        var columnElemList = react_1.default.Children.map(this.props.children, function (child) {
+            // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
+            // priklad je na https://soshace.com/building-react-components-using-children-props-and-context-api/
+            // (vzdy musime robit manipulacie so stlpcom, lebo potrebujeme pridat filter={true} sortable={true}
+            var childColumn = child; // nevedel som to krajsie...
+            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 = 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 (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 = 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;
+                        }
+                    }
+                }
+            }
+            // *********** showClearButton ***********
+            // pre filterDisplay = "row" nechceme clear button, chceme setrit miesto
+            var showClearButton = thisLocal.props.filterDisplay === "menu";
+            // *********** width/headerStyle ***********
+            var width = XUtils_1.XUtils.processPropWidth(childColumn.props.width);
+            if (width === undefined || width === "default") {
+                var filterMenuInFilterRow = thisLocal.props.filterDisplay === "row" && showFilterMenu;
+                var sortableButtonInHeader = thisLocal.props.sortable;
+                var filterButtonInHeader = thisLocal.props.filterDisplay === "menu";
+                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, undefined, filterMenuInFilterRow, childColumnProps.type, header, sortableButtonInHeader, filterButtonInHeader);
+            }
+            var headerStyle = {};
+            if (width !== undefined) {
+                headerStyle = { width: width };
+            }
+            // *********** align ***********
+            var align = undefined; // default undefined (left)
+            // do buducna
+            // if (childColumnProps.align !== undefined) {
+            //     align = childColumnProps.align;
+            // }
+            // else {
+            // decimal defaultne zarovnavame doprava
+            // if (xField.type === "decimal") {
+            //     align = "right";
+            // }
+            // else
+            if (xField.type === "boolean") {
+                align = "center";
+            }
+            // }
+            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, readOnly, rowData, xEntity); } });
+        });
+        if (this.props.showAddRemoveButtons && 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); }, disabled: readOnly, addMargin: false }); } }));
+        }
+        var addRowLabel = undefined;
+        var removeRowLabel = undefined;
+        if (this.props.showAddRemoveButtons) {
+            // calling xLocaleOption does not work in standard default values initialisation place (public static defaultProps)
+            addRowLabel = (_a = this.props.addRowLabel) !== null && _a !== void 0 ? _a : (0, XLocale_1.xLocaleOption)('addRow');
+            removeRowLabel = (_b = this.props.removeRowLabel) !== null && _b !== void 0 ? _b : (0, XLocale_1.xLocaleOption)('removeRow');
+        }
+        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: filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: this.props.sortField !== undefined ? [{ field: this.props.sortField, order: 1 }] : undefined, 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)),
+            this.props.showAddRemoveButtons ?
+                react_1.default.createElement("div", { className: "flex justify-content-center" },
+                    react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: addRowLabel, onClick: this.onClickAddRow, disabled: readOnly }),
+                    this.props.removeButtonInRow ? undefined : react_1.default.createElement(XButton_1.XButton, { icon: this.props.removeRowIcon, label: removeRowLabel, onClick: this.onClickRemoveRowBySelection, disabled: readOnly }))
+                : undefined));
+    };
+    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,
+        showAddRemoveButtons: true,
+        removeButtonInRow: true,
+        addRowIcon: "pi pi-plus",
+        removeRowIcon: "pi pi-times"
+    };
+    return XFormDataTable2;
+}(react_1.Component));
+exports.XFormDataTable2 = XFormDataTable2;
+var XFormColumn = 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.XFormColumn = XFormColumn;
+exports.XFormColumn.defaultProps = {
+    type: "inputSimple"
+};
+var XFormDropdownColumn = 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.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);
+};
+exports.XFormSearchButtonColumn = XFormSearchButtonColumn;
+exports.XFormSearchButtonColumn.defaultProps = {
+    type: "searchButton"
+};