@michalrakus/x-react-web-lib 1.29.0 → 1.31.0

package/lib/components/XFieldSet/XFieldSetBase.d.ts

@@ -0,0 +1,79 @@
+/// <reference types="react" />
+export interface XFieldSetMeta {
+    id?: number;
+    fieldSetId: string;
+    xFieldMetaRoot: XFieldMeta;
+    modifDate: Date | null;
+    modifXUser: any | null;
+    version: number;
+}
+export declare enum XFieldType {
+    rootField = "rootField",
+    fieldGroup = "fieldGroup",
+    fieldGroupWithCheckbox = "fieldGroupWithCheckbox",
+    checkbox = "checkbox",
+    checkboxNullable = "checkboxNullable",
+    inputText = "inputText",
+    inputDecimal = "inputDecimal"
+}
+export declare enum XChildrenLayout {
+    column = "column",
+    row = "row",
+    tabView = "tabView",
+    tabViewWithHeaderGroup = "tabViewWithHeaderGroup"
+}
+export declare enum XFieldPropValuesFrom {
+    parent = "parent",
+    this = "this"
+}
+export interface XFieldMeta {
+    type?: XFieldType;
+    childrenLayout?: XChildrenLayout;
+    width?: string;
+    labelWidth?: string;
+    inputWidth?: string;
+    suppressFieldGroupPanel?: true;
+    field: string;
+    label: string;
+    tooltip?: string;
+    decimalProps?: {
+        scale: number;
+    };
+    dateFrom?: Date;
+    dateTo?: Date;
+    xFieldMetaList?: XFieldMeta[];
+    fieldPropValuesMapForEdit?: XFieldPropValuesMapForEdit;
+    fieldPropValuesMapCached?: XFieldPropValuesMap;
+    xFieldMetaParentCached?: XFieldMeta;
+}
+export interface XFieldPropValuesMapForEdit {
+    [field: string]: XFieldPropValuesForEdit;
+}
+export interface XFieldPropValuesMap {
+    [field: string]: XFieldPropValues;
+}
+export interface XFieldPropValuesForEdit {
+    valuesFrom: XFieldPropValuesFrom;
+    values?: XFieldPropValues;
+    error?: string;
+}
+export type XFieldPropValues = any | undefined;
+export interface XFieldProp {
+    id: string;
+    label: string;
+    fieldPropEdit?: JSX.Element;
+}
+export interface XFieldPropEditProps {
+    value?: XFieldPropValues;
+    onChange?: (value: XFieldPropValues) => void;
+    onErrorChange?: (error: (string | undefined)) => void;
+}
+export interface XFieldSetValues {
+    [field: string]: any;
+}
+export type XFieldXFieldMetaMap = Map<string, XFieldMeta>;
+export declare class XFieldSetBase {
+    static createXFieldXFieldMetaMap(xFieldSetMeta: XFieldSetMeta, filterFromParent?: string): XFieldXFieldMetaMap;
+    static xFieldSetValuesAsUI(xFieldSetValues: XFieldSetValues, xFieldXFieldMetaMap: XFieldXFieldMetaMap): string;
+    private static createMapForXFieldMeta;
+}

package/lib/components/XFieldSet/XFieldSetBase.js

@@ -0,0 +1,144 @@
+"use strict";
+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.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFieldSetBase = exports.XFieldPropValuesFrom = exports.XChildrenLayout = exports.XFieldType = void 0;
+var XUtilsConversions_1 = require("../../serverApi/XUtilsConversions");
+var XFieldType;
+(function (XFieldType) {
+    XFieldType["rootField"] = "rootField";
+    XFieldType["fieldGroup"] = "fieldGroup";
+    XFieldType["fieldGroupWithCheckbox"] = "fieldGroupWithCheckbox";
+    XFieldType["checkbox"] = "checkbox";
+    XFieldType["checkboxNullable"] = "checkboxNullable";
+    XFieldType["inputText"] = "inputText";
+    XFieldType["inputDecimal"] = "inputDecimal";
+})(XFieldType = exports.XFieldType || (exports.XFieldType = {}));
+// children layout sa da nastavit len na type, ktory ma children - rootField, fieldGroup
+var XChildrenLayout;
+(function (XChildrenLayout) {
+    XChildrenLayout["column"] = "column";
+    XChildrenLayout["row"] = "row";
+    XChildrenLayout["tabView"] = "tabView";
+    XChildrenLayout["tabViewWithHeaderGroup"] = "tabViewWithHeaderGroup"; // to iste co tabView ale prvy fieldGroup (0-ty tab) zobrazi nad tabView (aby bol vzdy pristupny)
+})(XChildrenLayout = exports.XChildrenLayout || (exports.XChildrenLayout = {}));
+// poznamka - tabView a tabViewWithHeaderGroup odignoruju bezne simple children - ak take budu existovat, zobrazi sa uzivatelovi warning pri nastaveni tabView
+// pouzijeme len checkbox supressFieldGroupPanel
+// pouziva sa len pre typ fieldGroup a len v pripade ak dany fieldGroup nie je vyrenderovany v nejakej tab-ke (jeho parent ma nastaveny layout tabView*)
+// export enum XFieldGroupPanelViewStatus {
+//     show = "show",  // default - vyrenderuje Panel aj s labelom a vo vnutri panelu umiestni children
+//     hide = "hide"   // nerenderuje Panel, children umiestni do div elementu (label sa nepouzije) - pouziva sa na vytvorenie stlpcov v (parent) fieldGroup-e
+// }
+var XFieldPropValuesFrom;
+(function (XFieldPropValuesFrom) {
+    XFieldPropValuesFrom["parent"] = "parent";
+    XFieldPropValuesFrom["this"] = "this"; // field prop values preberame z current fieldu
+})(XFieldPropValuesFrom = exports.XFieldPropValuesFrom || (exports.XFieldPropValuesFrom = {}));
+// zatial provizorne len na staticke metody
+var XFieldSetBase = /** @class */ (function () {
+    function XFieldSetBase() {
+    }
+    // api metoda na vytvorenie Map instancie, ktora sluzi na rychle najdenie prislusneho XFieldMeta podla nazvu fieldu
+    // ak je zadany filterFromParent, tak vracia len children/subchildren/... fieldu s field = filterFromParent
+    // (filterFromParent je casto groupField)
+    XFieldSetBase.createXFieldXFieldMetaMap = function (xFieldSetMeta, filterFromParent) {
+        var xFieldXFieldMetaMap = new Map();
+        XFieldSetBase.createMapForXFieldMeta(xFieldSetMeta.xFieldMetaRoot, filterFromParent, xFieldXFieldMetaMap);
+        return xFieldXFieldMetaMap;
+    };
+    // api metoda na vyrenderovanie field set atributu
+    // logicky patri do src/serverApi/XUtilsConversions.ts a zisla by sa aj pri exporte do excelu ale XFieldXFieldMetaMap (a jeho "parent"-a XFieldSetBase) mame len na frontende
+    XFieldSetBase.xFieldSetValuesAsUI = function (xFieldSetValues, xFieldXFieldMetaMap) {
+        var e_1, _a;
+        var _b;
+        // budeme mat vzdy spravne poradie? nebudeme... asi najjednoduchsie zosortovat tu "valueUIList" podla abecedy
+        var valueUIList = [];
+        try {
+            for (var _c = __values(Object.entries(xFieldSetValues)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var _e = __read(_d.value, 2), field = _e[0], value = _e[1];
+                var xFieldMeta = xFieldXFieldMetaMap.get(field);
+                if (xFieldMeta) {
+                    if (xFieldMeta.type === XFieldType.checkbox) {
+                        valueUIList.push(xFieldMeta.label);
+                    }
+                    else if (xFieldMeta.type === XFieldType.inputText) {
+                        valueUIList.push("".concat(xFieldMeta.label, ": \"").concat(value, "\""));
+                    }
+                    else if (xFieldMeta.type === XFieldType.inputDecimal) {
+                        valueUIList.push("".concat(xFieldMeta.label, ": ").concat((0, XUtilsConversions_1.numberAsUI)((0, XUtilsConversions_1.numberFromModel)(value), (_b = xFieldMeta.decimalProps) === null || _b === void 0 ? void 0 : _b.scale)));
+                    }
+                    else {
+                        // neznamy typ
+                        valueUIList.push("".concat(xFieldMeta.label, ": \"").concat(value, "\""));
+                    }
+                }
+                else {
+                    // field bol z formulara odstraneny (nemalo by sa to takto pouzivat, skor by sa mala datumom ohranicit platnost fieldu)
+                    // zobrazime v surovom stave
+                    valueUIList.push("".concat(field, ": ").concat(typeof value === 'string' ? '"' + value + '"' : value));
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return valueUIList.join(", ");
+    };
+    XFieldSetBase.createMapForXFieldMeta = function (xFieldMeta, filterFromParent, xFieldXFieldMetaMap) {
+        var e_2, _a;
+        if (filterFromParent === undefined) {
+            // no filter is used
+            xFieldXFieldMetaMap.set(xFieldMeta.field, xFieldMeta);
+        }
+        else if (filterFromParent === xFieldMeta.field) {
+            // the searched parent field has been found, all his children/subchildren/... will be added to the list (we remove the filter)
+            filterFromParent = undefined;
+        }
+        if (xFieldMeta.xFieldMetaList) {
+            try {
+                for (var _b = __values(xFieldMeta.xFieldMetaList), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var insideXFieldMeta = _c.value;
+                    XFieldSetBase.createMapForXFieldMeta(insideXFieldMeta, filterFromParent, xFieldXFieldMetaMap);
+                }
+            }
+            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 XFieldSetBase;
+}());
+exports.XFieldSetBase = XFieldSetBase;

package/lib/components/XFormComponentDT.d.ts

@@ -1,5 +1,5 @@
 import { XFormBase } from "./XFormBase";
-import { Component } from "react";
+import React, { Component } from "react";
 import { OperationType } from "./XUtils";
 import { XError } from "./XErrors";
 import { XCustomFilter } from "../serverApi/FindParam";
@@ -10,6 +10,11 @@ export interface XFormComponentDTProps {
     rowData: any;
     readOnly?: XTableFieldReadOnlyProp;
     onChange?: XTableFieldOnChange;
+    placeholder?: string;
+    label?: string;
+    tooltip?: string;
+    desc?: string;
+    labelStyle?: React.CSSProperties;
 }
 export declare abstract class XFormComponentDT<P extends XFormComponentDTProps> extends Component<P> {
     private valueChanged;
@@ -19,6 +24,8 @@ export declare abstract class XFormComponentDT<P extends XFormComponentDTProps>
     onValueChangeBase(value: any, onChange?: XTableFieldOnChange, assocObjectChange?: OperationType): void;
     abstract isNotNull(): boolean;
     isReadOnly(): boolean;
+    getLabel(): string | undefined;
+    getLabelStyle(): React.CSSProperties;
     validate(): {
         field: string;
         xError: XError;

package/lib/components/XFormComponentDT.js

@@ -78,6 +78,25 @@ var XFormComponentDT = /** @class */ (function (_super) {
         }
         return readOnly;
     };
+    // *********** label support - len pre ne-DT componenty pouzivany ************
+    // ak je label undefined, label element sa nevykresli
+    XFormComponentDT.prototype.getLabel = function () {
+        var label = this.props.label;
+        if (label !== undefined) {
+            // test na readOnly je tu hlavne koli tomu aby sme nemali * pri ID atribute, ktory sa pri inserte generuje az pri zapise do DB
+            if (this.isNotNull() && !this.isReadOnly()) {
+                label = XUtils_1.XUtils.markNotNull(label);
+            }
+        }
+        return label;
+    };
+    XFormComponentDT.prototype.getLabelStyle = function () {
+        var _a;
+        var labelStyle = (_a = this.props.labelStyle) !== null && _a !== void 0 ? _a : {};
+        // this.props.inline nepouzivame, lebo je to asi zombie
+        XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { width: XUtils_1.XUtils.FIELD_LABEL_WIDTH });
+        return labelStyle;
+    };
     // *********** validation support ************
     // volane po kliknuti na Save
     // vrati (field, XError) ak nezbehne "field validacia", ak zbehne, vrati undefined

package/lib/components/XFormDataTable2.d.ts

@@ -1,6 +1,6 @@
 import { XFormBase } from "./XFormBase";
 import React, { Component, ReactChild } from "react";
-import { DataTableFilterMeta } from "primereact/datatable";
+import { DataTableFilterMeta, DataTableSortMeta } from "primereact/datatable";
 import { ColumnBodyOptions } from "primereact/column";
 import { XEntity, XField } from "../serverApi/XEntityMetadata";
 import { XViewStatusOrBoolean } from "./XUtils";
@@ -117,6 +117,7 @@ export interface XFormAutoCompleteColumnProps extends XFormColumnBaseProps {
     searchBrowse?: JSX.Element;
     assocForm?: JSX.Element;
     filter?: XTableFieldFilterProp;
+    sortField?: string | DataTableSortMeta[];
     fields?: string[];
     suggestions?: any[];
 }

package/lib/components/XFormDataTable2.js

@@ -277,7 +277,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
     };
     XFormDataTable2.prototype.getFilterMatchMode = function (xField) {
         var filterMatchMode;
-        if (xField.type === "string") {
+        if (xField.type === "string" || xField.type === "jsonb") {
             filterMatchMode = api_1.FilterMatchMode.CONTAINS;
         }
         // zatial vsetky ostatne EQUALS
@@ -404,7 +404,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         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, searchBrowse: columnPropsAutoComplete.searchBrowse, assocForm: columnPropsAutoComplete.assocForm, filter: columnPropsAutoComplete.filter, fields: columnPropsAutoComplete.fields, suggestions: columnPropsAutoComplete.suggestions, rowData: rowData, readOnly: readOnly });
+            body = react_1.default.createElement(XAutoCompleteDT_1.XAutoCompleteDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsAutoComplete.assocField, displayField: columnPropsAutoComplete.displayField, searchBrowse: columnPropsAutoComplete.searchBrowse, assocForm: columnPropsAutoComplete.assocForm, filter: columnPropsAutoComplete.filter, sortField: columnPropsAutoComplete.sortField, fields: columnPropsAutoComplete.fields, suggestions: columnPropsAutoComplete.suggestions, rowData: rowData, readOnly: readOnly });
         }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;

package/lib/components/XInputDT.d.ts

@@ -1,7 +1,9 @@
 import { XField } from "../serverApi/XEntityMetadata";
 import { XFormComponentDT, XFormComponentDTProps } from "./XFormComponentDT";
+import React from "react";
 export interface XInputDTProps extends XFormComponentDTProps {
     field: string;
+    inputStyle?: React.CSSProperties;
 }
 export declare abstract class XInputDT<P extends XInputDTProps> extends XFormComponentDT<P> {
     protected xField: XField;

package/lib/components/XInputDate.js

@@ -40,7 +40,6 @@ var XInputDate = /** @class */ (function (_super) {
     };
     XInputDate.prototype.render = function () {
         var _a;
-        // note: style overrides size (width of the input according to character count)
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
             react_1.default.createElement(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), error: this.getError(), scale: (_a = this.props.scale) !== null && _a !== void 0 ? _a : this.xField.scale, datetime: this.xField.type === 'datetime' })));

package/lib/components/XLazyDataTable/XLazyDataTable.d.ts

@@ -110,6 +110,7 @@ export interface XLazyColumnProps {
     betweenFilter?: XBetweenFilterProp | "noBetween";
     width?: string;
     contentType?: XContentType;
+    fieldSetId?: string;
     aggregateType?: XAggregateFunction;
     columnViewStatus: XViewStatusOrBoolean;
     filterElement?: XFilterElementProp;

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -131,6 +131,7 @@ var XMultilineSwitch_1 = require("./XMultilineSwitch");
 var XMultilineRenderer_1 = require("./XMultilineRenderer");
 var XHtmlRenderer_1 = require("./XHtmlRenderer");
 var XOcfDropdown_1 = require("./XOcfDropdown");
+var XFieldSetBase_1 = require("../XFieldSet/XFieldSetBase");
 var XLazyDataTable = function (props) {
     var _a;
     // must be here, is used in createInitFilters()
@@ -184,7 +185,7 @@ var XLazyDataTable = function (props) {
     };
     var getFilterMatchMode = function (xField) {
         var filterMatchMode;
-        if (xField.type === "string") {
+        if (xField.type === "string" || xField.type === "jsonb") {
             filterMatchMode = api_1.FilterMatchMode.CONTAINS;
         }
         // zatial vsetky ostatne EQUALS
@@ -219,10 +220,14 @@ var XLazyDataTable = function (props) {
     var dataTableEl = (0, react_1.useRef)(null);
     var customFilterItems = XUtilsCommon_1.XUtilsCommon.createCustomFilterItems(props.customFilter);
     var aggregateItems = createAggregateItems();
-    var _b = __read((0, react_1.useState)({ rowList: [], totalRecords: 0, aggregateValues: [] }), 2), value = _b[0], setValue = _b[1];
-    var _c = __read((0, react_1.useState)(false), 2), loading = _c[0], setLoading = _c[1];
-    var _d = __read((0, react_1.useState)(0), 2), first = _d[0], setFirst = _d[1];
-    var _e = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rows = _e[0], setRows = _e[1];
+    // ak mame fieldSet stlpce (stlpce ktore maju zadany fieldSetId a zobrazuju hodnoty podla fieldSet-u),
+    // tak sem nacitame mapy umoznujuce ziskanie labelov zakliknutych field-ov
+    // poznamka: uz by sa zislo mat vytvorene objekty (instancie) pre stlpce a do nich zapisovat pripadny XFieldSetMap, filter (teraz je vo "filters")
+    var _b = __read((0, react_1.useState)({}), 2), xFieldSetMaps = _b[0], setXFieldSetMaps = _b[1];
+    var _c = __read((0, react_1.useState)({ rowList: [], totalRecords: 0, aggregateValues: [] }), 2), value = _c[0], setValue = _c[1];
+    var _d = __read((0, react_1.useState)(false), 2), loading = _d[0], setLoading = _d[1];
+    var _e = __read((0, react_1.useState)(0), 2), first = _e[0], setFirst = _e[1];
+    var _f = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rows = _f[0], setRows = _f[1];
     var filtersInit = createInitFilters();
     if (props.filters) {
         filtersInit = __assign(__assign({}, filtersInit), props.filters); // items from props.filters will replace existing items in filtersInit
@@ -237,19 +242,19 @@ var XLazyDataTable = function (props) {
             customFilterItems = XUtilsCommon_1.XUtilsCommon.filterAnd(customFilterItems, XUtils_1.XUtils.evalFilter(props.searchBrowseParams.customFilter));
         }
     }
-    var _f = __read((0, react_1.useState)(filtersInit), 2), filters = _f[0], setFilters = _f[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
+    var _g = __read((0, react_1.useState)(filtersInit), 2), filters = _g[0], setFilters = _g[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
     var initFtsInputValue = props.fullTextSearch ? createInitFtsInputValue() : undefined;
-    var _g = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValue = _g[0], setFtsInputValue = _g[1];
-    var _h = __read((0, react_1.useState)(undefined), 2), optionalCustomFilter = _h[0], setOptionalCustomFilter = _h[1];
-    var _j = __read((0, react_1.useState)(props.multilineSwitchInitValue), 2), multilineSwitchValue = _j[0], setMultilineSwitchValue = _j[1];
-    var _k = __read((0, react_1.useState)(XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _k[0], setMultiSortMeta = _k[1];
-    var _l = __read((0, react_1.useState)(null), 2), selectedRow = _l[0], setSelectedRow = _l[1];
-    var _m = __read((_a = props.dataLoadedState) !== null && _a !== void 0 ? _a : (0, react_1.useState)(false), 2), dataLoaded = _m[0], setDataLoaded = _m[1]; // priznak kde si zapiseme, ci uz sme nacitali data
-    var _o = __read((0, react_1.useState)({ dialogOpened: false }), 2), exportRowsDialogState = _o[0], setExportRowsDialogState = _o[1];
+    var _h = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValue = _h[0], setFtsInputValue = _h[1];
+    var _j = __read((0, react_1.useState)(undefined), 2), optionalCustomFilter = _j[0], setOptionalCustomFilter = _j[1];
+    var _k = __read((0, react_1.useState)(props.multilineSwitchInitValue), 2), multilineSwitchValue = _k[0], setMultilineSwitchValue = _k[1];
+    var _l = __read((0, react_1.useState)(XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _l[0], setMultiSortMeta = _l[1];
+    var _m = __read((0, react_1.useState)(null), 2), selectedRow = _m[0], setSelectedRow = _m[1];
+    var _o = __read((_a = props.dataLoadedState) !== null && _a !== void 0 ? _a : (0, react_1.useState)(false), 2), dataLoaded = _o[0], setDataLoaded = _o[1]; // priznak kde si zapiseme, ci uz sme nacitali data
+    var _p = __read((0, react_1.useState)({ dialogOpened: false }), 2), exportRowsDialogState = _p[0], setExportRowsDialogState = _p[1];
     //const [exportRowsDialogRowCount, setExportRowsDialogRowCount] = useState<number>(); // param pre dialog
-    var _p = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _p[0], setFiltersAfterFiltering = _p[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
-    var _q = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValueAfterFiltering = _q[0], setFtsInputValueAfterFiltering = _q[1]; // tak isto ako filtersAfterFiltering
-    var _r = __read((0, react_1.useState)(undefined), 2), optionalCustomFilterAfterFiltering = _r[0], setOptionalCustomFilterAfterFiltering = _r[1]; // tak isto ako filtersAfterFiltering
+    var _q = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _q[0], setFiltersAfterFiltering = _q[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
+    var _r = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValueAfterFiltering = _r[0], setFtsInputValueAfterFiltering = _r[1]; // tak isto ako filtersAfterFiltering
+    var _s = __read((0, react_1.useState)(undefined), 2), optionalCustomFilterAfterFiltering = _s[0], setOptionalCustomFilterAfterFiltering = _s[1]; // tak isto ako filtersAfterFiltering
     // parameter [] zabezpeci ze sa metoda zavola len po prvom renderingu (a nie po kazdej zmene stavu (zavolani setNieco()))
     (0, react_1.useEffect)(function () {
         // jednoduchy sposob - nepouzivame parameter props.displayed a priznak dataLoaded
@@ -318,9 +323,22 @@ var XLazyDataTable = function (props) {
             setOptionalCustomFilter(undefined);
         }
     };
-    var loadData = function () {
-        loadDataBase(createFindParam());
-    };
+    var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: 
+                // pre poriadok zaserializujeme obidve operacie (aj ked teoreticky by to malo fungovat aj bez serializovania)
+                return [4 /*yield*/, loadXFieldSetMaps()];
+                case 1:
+                    // pre poriadok zaserializujeme obidve operacie (aj ked teoreticky by to malo fungovat aj bez serializovania)
+                    _a.sent();
+                    return [4 /*yield*/, loadDataBase(createFindParam())];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     var createFindParam = function () {
         return {
             resultType: FindParam_1.ResultType.RowCountAndPagedRows,
@@ -335,6 +353,42 @@ var XLazyDataTable = function (props) {
             aggregateItems: aggregateItems
         };
     };
+    var loadXFieldSetMaps = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var fieldSetIds, xFieldSetMetaList, xFieldSetMapsLocal, xFieldSetMetaList_1, xFieldSetMetaList_1_1, xFieldSetMeta;
+        var e_3, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    fieldSetIds = getFieldSetIds();
+                    if (!(fieldSetIds.length > 0)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, XUtils_1.XUtils.fetchRows('XFieldSetMeta', { where: "[fieldSetId] IN (:...fieldSetIdList)", params: { fieldSetIdList: fieldSetIds } })];
+                case 1:
+                    xFieldSetMetaList = _b.sent();
+                    // check
+                    if (xFieldSetMetaList.length !== fieldSetIds.length) {
+                        throw "One or more of fieldSetIds \"".concat(fieldSetIds.join(", "), "\" was not found in DB in the table for Entity XFieldSetMeta");
+                    }
+                    xFieldSetMapsLocal = {};
+                    try {
+                        for (xFieldSetMetaList_1 = __values(xFieldSetMetaList), xFieldSetMetaList_1_1 = xFieldSetMetaList_1.next(); !xFieldSetMetaList_1_1.done; xFieldSetMetaList_1_1 = xFieldSetMetaList_1.next()) {
+                            xFieldSetMeta = xFieldSetMetaList_1_1.value;
+                            xFieldSetMapsLocal[xFieldSetMeta.fieldSetId] = XFieldSetBase_1.XFieldSetBase.createXFieldXFieldMetaMap(xFieldSetMeta);
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (xFieldSetMetaList_1_1 && !xFieldSetMetaList_1_1.done && (_a = xFieldSetMetaList_1.return)) _a.call(xFieldSetMetaList_1);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                    // save created structures
+                    setXFieldSetMaps(xFieldSetMapsLocal);
+                    _b.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
     var loadDataBase = function (findParam) { return __awaiter(void 0, void 0, void 0, function () {
         var findResult;
         return __generator(this, function (_a) {
@@ -385,7 +439,7 @@ var XLazyDataTable = function (props) {
     var getFields = function (addPropsFields) {
         // krasne zobrazi cely objekt!
         //console.log(dataTableEl.current);
-        var e_3, _a;
+        var e_4, _a;
         var fields = [];
         var columns = dataTableEl.current.props.children;
         try {
@@ -394,12 +448,12 @@ var XLazyDataTable = function (props) {
                 fields.push(column.props.field);
             }
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
                 if (columns_3_1 && !columns_3_1.done && (_a = columns_3.return)) _a.call(columns_3);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_4) throw e_4.error; }
         }
         if (addPropsFields) {
             if (props.fields) {
@@ -411,7 +465,7 @@ var XLazyDataTable = function (props) {
     var getHeaders = function () {
         // krasne zobrazi cely objekt!
         //console.log(dataTableEl.current);
-        var e_4, _a;
+        var e_5, _a;
         var headers = [];
         var columns = dataTableEl.current.props.children;
         try {
@@ -421,17 +475,17 @@ var XLazyDataTable = function (props) {
                 headers.push(column.props.header);
             }
         }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (columns_4_1 && !columns_4_1.done && (_a = columns_4.return)) _a.call(columns_4);
             }
-            finally { if (e_4) throw e_4.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         return headers;
     };
     var getWidths = function () {
-        var e_5, _a;
+        var e_6, _a;
         var _b;
         // vrati sirky stlpcov napr. ['7.75rem', '20rem', '8.5rem', '8.5rem', '6rem']
         // nevracia aktualne sirky stlpcov (po manualnom rozsireni) ale tie ktore boli nastavene/vypocitane v kode
@@ -443,15 +497,37 @@ var XLazyDataTable = function (props) {
                 widths.push((_b = column.props.headerStyle) === null || _b === void 0 ? void 0 : _b.width);
             }
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (columns_5_1 && !columns_5_1.done && (_a = columns_5.return)) _a.call(columns_5);
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_6) throw e_6.error; }
         }
         return widths;
     };
+    var getFieldSetIds = function () {
+        var e_7, _a;
+        var fieldSetIds = [];
+        // warning note: props.children are used to get props of XLazyColumn whereas dataTableEl.current.props.children are used to get props of Primereact DataTable
+        var columns = props.children;
+        try {
+            for (var columns_6 = __values(columns), columns_6_1 = columns_6.next(); !columns_6_1.done; columns_6_1 = columns_6.next()) {
+                var column = columns_6_1.value;
+                if (column.props.fieldSetId) {
+                    fieldSetIds.push(column.props.fieldSetId);
+                }
+            }
+        }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        finally {
+            try {
+                if (columns_6_1 && !columns_6_1.done && (_a = columns_6.return)) _a.call(columns_6);
+            }
+            finally { if (e_7) throw e_7.error; }
+        }
+        return fieldSetIds;
+    };
     var hasContentTypeHtml = function () {
         var columns = props.children;
         return columns.some(function (column) { return column.props.contentType === "html"; });
@@ -489,7 +565,7 @@ var XLazyDataTable = function (props) {
         }
     };
     var onClickRemoveRow = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var reread, e_6, e_7;
+        var reread, e_8, e_9;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -504,8 +580,8 @@ var XLazyDataTable = function (props) {
                     reread = _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    e_6 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_6);
+                    e_8 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_8);
                     return [3 /*break*/, 4];
                 case 4:
                     if (reread) {
@@ -527,8 +603,8 @@ var XLazyDataTable = function (props) {
                     _a.sent();
                     return [3 /*break*/, 9];
                 case 8:
-                    e_7 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_7);
+                    e_9 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_9);
                     return [3 /*break*/, 9];
                 case 9:
                     loadData();
@@ -702,12 +778,17 @@ var XLazyDataTable = function (props) {
         }
         return betweenFilter;
     };
-    var valueAsUI = function (value, xField, contentType) {
+    var valueAsUI = function (value, xField, contentType, fieldSetId) {
         var valueResult;
         if (xField.type === "boolean") {
             // TODO - efektivnejsie by bolo renderovat len prislusne ikonky
             valueResult = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: value, disabled: true });
         }
+        else if (xField.type === "jsonb" && fieldSetId) {
+            // zatial sem dame; este by sme mohli dat hlbsie do convertValue/convertValueBase (aby fungovalo aj pre excel) ale tam je problem ze nemame k dispozicii "xFieldSetMaps"
+            // poznamka: krajsie by bolo brat fieldSetId z xField ale to by sme museli vytvorit decorator na backend-e...
+            valueResult = XFieldSetBase_1.XFieldSetBase.xFieldSetValuesAsUI(value, xFieldSetMaps[fieldSetId]);
+        }
         else {
             if (contentType === "html") {
                 // value should be always string (xField.type === "string")
@@ -732,11 +813,11 @@ var XLazyDataTable = function (props) {
         var bodyValue;
         var rowDataValue = XUtilsCommon_1.XUtilsCommon.getValueOrValueListByPath(rowData, columnProps.field);
         if (Array.isArray(rowDataValue)) {
-            var elemList = rowDataValue.map(function (value) { return valueAsUI(value, xField, columnProps.contentType); });
+            var elemList = rowDataValue.map(function (value) { return valueAsUI(value, xField, columnProps.contentType, columnProps.fieldSetId); });
             bodyValue = react_1.default.createElement(XMultilineRenderer_1.XMultilineRenderer, { valueList: elemList, renderType: multilineSwitchValue, fewLinesCount: props.multilineSwitchFewLinesCount });
         }
         else {
-            bodyValue = valueAsUI(rowDataValue, xField, columnProps.contentType);
+            bodyValue = valueAsUI(rowDataValue, xField, columnProps.contentType, columnProps.fieldSetId);
         }
         return bodyValue;
     };

package/lib/components/locale/x-en.json

@@ -15,6 +15,7 @@
         "ok": "Ok",
         "save": "Save",
         "cancel": "Cancel",
+        "formRemoveRowConfirm": "Are you sure to remove the row?",
         "expRowCount": "Row count",
         "expExportType": "Export type",
         "expCreateHeaderLine": "Create header line",

package/lib/serverApi/XUtilsConversions.js

@@ -471,6 +471,12 @@ function convertValueBase(fieldType, scale, value, fromModel, asUI) {
             value = booleanAsUIText(value);
         }
     }
+    else if (fieldType === "jsonb") {
+        // konverziu z modelu (json objekt-u) netreba
+        if (asUI) {
+            value = XUtilsCommon_1.XUtilsCommon.objectAsJSON(value);
+        }
+    }
     else {
         // vsetko ostatne
         if (asUI && asUI !== AsUIType.Excel) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.29.0",
+  "version": "1.31.0",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",