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

package/lib/components/XFormDataTable2.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -25,7 +27,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -38,7 +44,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -54,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");
@@ -69,6 +76,9 @@ 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 XFormDataTable2 = /** @class */ (function (_super) {
     __extends(XFormDataTable2, _super);
     function XFormDataTable2(props) {
@@ -85,10 +95,11 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         _this.state = {
             selectedRow: undefined,
             dropdownOptionsMap: {},
-            filters: {}
+            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);
@@ -97,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);
             }
         }
@@ -115,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;
@@ -124,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;
@@ -132,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;
@@ -149,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);
         }
@@ -170,6 +205,61 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         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);
@@ -188,11 +278,12 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         // TODO - treba vyklonovat?
         var filtersCloned = __assign({}, this.state.filters);
         if (checkboxValue !== null) {
-            filtersCloned[field] = { value: checkboxValue ? "true" : "false", matchMode: "equals" };
+            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];
+            //delete filtersCloned[field];
+            filtersCloned[field] = { value: null, matchMode: api_1.FilterMatchMode.EQUALS };
         }
         this.setState({ filters: filtersCloned });
     };
@@ -213,11 +304,12 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         // TODO - treba vyklonovat?
         var filtersCloned = __assign({}, this.state.filters);
         if (displayValue !== XUtils_1.XUtils.dropdownEmptyOptionValue) {
-            filtersCloned[field] = { value: displayValue, matchMode: "equals" };
+            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];
+            //delete filtersCloned[field];
+            filtersCloned[field] = { value: null, matchMode: api_1.FilterMatchMode.EQUALS };
         }
         this.setState({ filters: filtersCloned });
     };
@@ -225,17 +317,22 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         var dropdownValue = XUtils_1.XUtils.dropdownEmptyOptionValue;
         var filterValue = this.state.filters[field];
         if (filterValue !== undefined && filterValue !== null) {
-            dropdownValue = filterValue.value;
+            if (filterValue.value !== null) {
+                dropdownValue = filterValue.value;
+            }
         }
         return dropdownValue;
     };
-    XFormDataTable2.prototype.onBodyValueChange = function (field, rowData, newValue) {
-        //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();
-    };
+    /*  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, rowData, xEntity) {
         var body;
@@ -243,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 });
@@ -260,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 });
@@ -269,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;
@@ -294,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());
@@ -320,13 +496,14 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         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
         }
-        var tableStyle;
+        // 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 = { width: width };
+            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) {
@@ -337,32 +514,55 @@ 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); } });
+            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 });
+                }
             }
-            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") {
-                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, childColumnProps.type, header);
+                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, sortableButtonInHeader, filterButtonInHeader);
             }
             var headerStyle = {};
             if (width !== undefined) {
                 headerStyle = { width: width };
             }
             // *********** align ***********
-            var align = "left"; // default
+            var align = undefined; // default undefined (left)
             // do buducna
             // if (childColumnProps.align !== undefined) {
             //     align = childColumnProps.align;
@@ -377,52 +577,65 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 align = "center";
             }
             // }
-            // *********** style ***********
-            var style = {};
-            // TODO - pouzit className a nie style
-            if (align === "center" || align === "right") {
-                style = { textAlign: align };
-                headerStyle = __assign(__assign({}, headerStyle), style); // headerStyle overrides style in TH cell
-            }
-            return react_1.default.createElement(column_1.Column, { field: field, header: header, filter: true, sortable: true, filterElement: filterElement, headerStyle: headerStyle, style: style, 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, 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));
 exports.XFormDataTable2 = XFormDataTable2;
-exports.XFormColumn = function (props) {
+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"
 };
-exports.XFormDropdownColumn = function (props) {
+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"
 };
-exports.XFormSearchButtonColumn = function (props) {
+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"
 };

package/lib/components/XFormFooter.js

@@ -7,8 +7,9 @@ exports.XFormFooter = void 0;
 var react_1 = __importDefault(require("react"));
 var XButton_1 = require("./XButton");
 // helper wrapper
-exports.XFormFooter = function (props) {
+var XFormFooter = function (props) {
     return (react_1.default.createElement("div", { className: "flex justify-content-center" },
         react_1.default.createElement(XButton_1.XButton, { label: "Save", onClick: props.form.onClickSave }),
         react_1.default.createElement(XButton_1.XButton, { label: "Cancel", onClick: props.form.onClickCancel })));
 };
+exports.XFormFooter = XFormFooter;

package/lib/components/XFormNavigator3.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -14,7 +16,11 @@ var __extends = (this && this.__extends) || (function () {
 })();
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -27,7 +33,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -47,9 +53,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spread = (this && this.__spread) || function () {
-    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-    return ar;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormNavigator3 = void 0;
@@ -99,7 +110,7 @@ var XFormNavigator3 = /** @class */ (function (_super) {
     };
     XFormNavigator3.prototype.render = function () {
         var _this = this;
-        var formElements = this.props.rootFormElement !== null ? __spread([this.props.rootFormElement], this.state.formElements) : this.state.formElements;
+        var formElements = this.props.rootFormElement !== null ? __spreadArray([this.props.rootFormElement], __read(this.state.formElements), false) : this.state.formElements;
         var forms = formElements.map(function (formElement, index) {
             var displayed = (index === formElements.length - 1);
             // klonovanim elementu pridame atribut openForm={this.openForm} (nemusime tento atribut pridavat pri vytvarani elementu)