@michalrakus/x-react-web-lib 1.21.0 → 1.23.0

package/lib/components/XLazyDataTable/XExportRowsDialog.js

@@ -87,46 +87,65 @@ var XUtils_1 = require("../XUtils");
 var XUtilsConversions_1 = require("../../serverApi/XUtilsConversions");
 var XLocale_1 = require("../XLocale");
 var XExportRowsDialog = function (props) {
-    var _a, _b;
-    var _c = __read((0, react_1.useState)(ExportImportParam_1.ExportType.Csv), 2), exportType = _c[0], setExportType = _c[1];
-    var _d = __read((0, react_1.useState)(true), 2), createHeaderLine = _d[0], setCreateHeaderLine = _d[1];
-    var _e = __read((0, react_1.useState)(ExportImportParam_1.CsvSeparator.Semicolon), 2), csvSeparator = _e[0], setCsvSeparator = _e[1];
-    var _f = __read((0, react_1.useState)(ExportImportParam_1.CsvDecimalFormat.Comma), 2), decimalFormat = _f[0], setDecimalFormat = _f[1];
-    var _g = __read((0, react_1.useState)(ExportImportParam_1.CsvEncoding.Win1250), 2), csvEncoding = _g[0], setCsvEncoding = _g[1];
+    var _a, _b, _c, _d, _e;
+    var _f = __read((0, react_1.useState)(ExportImportParam_1.ExportType.Excel), 2), exportType = _f[0], setExportType = _f[1];
+    var _g = __read((0, react_1.useState)(true), 2), createHeaderLine = _g[0], setCreateHeaderLine = _g[1];
+    var _h = __read((0, react_1.useState)(ExportImportParam_1.XMultilineExportType.Multiline), 2), detailRowsExport = _h[0], setDetailRowsExport = _h[1];
+    var _j = __read((0, react_1.useState)(ExportImportParam_1.CsvSeparator.Semicolon), 2), csvSeparator = _j[0], setCsvSeparator = _j[1];
+    var _k = __read((0, react_1.useState)(ExportImportParam_1.CsvDecimalFormat.Comma), 2), decimalFormat = _k[0], setDecimalFormat = _k[1];
+    var _l = __read((0, react_1.useState)(ExportImportParam_1.CsvEncoding.Win1250), 2), csvEncoding = _l[0], setCsvEncoding = _l[1];
     // bez tejto metody by pri opetovnom otvoreni dialogu ponechal povodne hodnoty
     var onShow = function () {
-        setExportType(ExportImportParam_1.ExportType.Csv);
-        setCreateHeaderLine(true); // excel hadze hlasky koli prvemu riadku header-ov
+        setExportType(ExportImportParam_1.ExportType.Excel);
+        setCreateHeaderLine(true);
+        setDetailRowsExport(ExportImportParam_1.XMultilineExportType.Multiline);
         setCsvSeparator(ExportImportParam_1.CsvSeparator.Semicolon);
         setDecimalFormat(ExportImportParam_1.CsvDecimalFormat.Comma);
         setCsvEncoding(ExportImportParam_1.CsvEncoding.Win1250);
     };
     var onExport = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var exportParams, csvParam, exportParam, response, e_1, fileExt, fileName, respBlob, url, a;
+        var exportParams, apiPath, requestPayload, exportExcelParam, exportCsvParam, exportJsonParam, response, e_1, fileExt, fileName, respBlob, url, a;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     // export vykoname az po zatvoreni dialogu - moze dlho trvat a pobezi asynchronne (user zatial moze pracovat s aplikaciou)
                     // zavrieme dialog
                     props.hideDialog();
-                    if (typeof props.exportParams === 'function') {
-                        exportParams = props.exportParams();
+                    exportParams = props.dialogState.exportParams;
+                    if (exportType === ExportImportParam_1.ExportType.Excel) {
+                        apiPath = "x-lazy-data-table-export-excel";
+                        exportExcelParam = {
+                            queryParam: exportParams.queryParam,
+                            excelCsvParam: createExcelCsvParam(exportParams),
+                            widths: exportParams.widths
+                        };
+                        requestPayload = exportExcelParam;
                     }
-                    else {
-                        exportParams = props.exportParams;
+                    else if (exportType === ExportImportParam_1.ExportType.Csv) {
+                        apiPath = "x-lazy-data-table-export-csv";
+                        exportCsvParam = {
+                            queryParam: exportParams.queryParam,
+                            excelCsvParam: createExcelCsvParam(exportParams),
+                            csvParam: {
+                                csvSeparator: csvSeparator, csvDecimalFormat: decimalFormat, csvEncoding: csvEncoding
+                            }
+                        };
+                        requestPayload = exportCsvParam;
+                    }
+                    else if (exportType === ExportImportParam_1.ExportType.Json) {
+                        apiPath = "x-lazy-data-table-export-json";
+                        exportJsonParam = {
+                            queryParam: exportParams.queryParam
+                        };
+                        requestPayload = exportJsonParam;
                     }
-                    csvParam = undefined;
-                    if (exportType === ExportImportParam_1.ExportType.Csv) {
-                        csvParam = { useHeaderLine: createHeaderLine, csvSeparator: csvSeparator, csvDecimalFormat: decimalFormat, csvEncoding: csvEncoding };
-                        if (csvParam.useHeaderLine) {
-                            csvParam.headers = exportParams.headers;
-                        }
+                    else {
+                        throw "Unimplemented exportType = ".concat(exportType);
                     }
-                    exportParam = { exportType: exportType, csvParam: csvParam, queryParam: exportParams.queryParam };
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, XUtils_1.XUtils.fetchBasicJson(exportParams.path, exportParam)];
+                    return [4 /*yield*/, XUtils_1.XUtils.fetchBasicJson(apiPath, requestPayload)];
                 case 2:
                     response = _a.sent();
                     return [3 /*break*/, 4];
@@ -135,7 +154,7 @@ var XExportRowsDialog = function (props) {
                     XUtils_1.XUtils.showErrorMessage("Export failed.", e_1);
                     return [2 /*return*/];
                 case 4:
-                    fileExt = exportType;
+                    fileExt = exportType === ExportImportParam_1.ExportType.Excel ? "xlsx" : exportType;
                     fileName = "".concat(exportParams.fileName, ".").concat(fileExt);
                     return [4 /*yield*/, response.blob()];
                 case 5:
@@ -149,36 +168,52 @@ var XExportRowsDialog = function (props) {
             }
         });
     }); };
-    var elem = null;
-    if (props.dialogOpened) {
+    var createExcelCsvParam = function (exportParams) {
+        return {
+            headers: createHeaderLine ? exportParams.headers : undefined,
+            fieldsToDuplicateValues: exportParams.fieldsToDuplicateValues,
+            toManyAssocExport: detailRowsExport,
+            multilineTextExport: ExportImportParam_1.XMultilineExportType.Multiline // TODO - dorobit aj tuto dropdown kde si uzivatel vyberie ci chce mat v texte \n alebo nechce - aj na backende treba dorobit
+        };
+    };
+    var elem = [];
+    if (props.dialogState.dialogOpened) {
+        if (exportType === ExportImportParam_1.ExportType.Excel || exportType === ExportImportParam_1.ExportType.Csv) {
+            elem.push(react_1.default.createElement("div", { key: "expCreateHeaderLine", className: "field grid" },
+                react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expCreateHeaderLine')),
+                react_1.default.createElement(checkbox_1.Checkbox, { checked: createHeaderLine, onChange: function (e) { return setCreateHeaderLine(e.checked); } })));
+            if ((_a = props.dialogState.exportParams) === null || _a === void 0 ? void 0 : _a.existsToManyAssoc) {
+                elem.push(react_1.default.createElement("div", { key: "expDetailRowsExport", className: "field grid" },
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expDetailRowsExport')),
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: detailRowsExport, options: XUtils_1.XUtils.multilineExportTypeOptions, onChange: function (e) { return setDetailRowsExport(e.value); } })));
+            }
+        }
         if (exportType === ExportImportParam_1.ExportType.Csv) {
-            elem = react_1.default.createElement("span", null,
-                react_1.default.createElement("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expCreateHeaderLine')),
-                    react_1.default.createElement(checkbox_1.Checkbox, { checked: createHeaderLine, onChange: function (e) { return setCreateHeaderLine(e.checked); } })),
-                react_1.default.createElement("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expCsvSeparator')),
+            elem.push([
+                react_1.default.createElement("div", { key: "expCsvSeparator", className: "field grid" },
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expCsvSeparator')),
                     react_1.default.createElement(dropdown_1.Dropdown, { value: csvSeparator, options: XUtils_1.XUtils.csvSeparatorOptions, onChange: function (e) { return setCsvSeparator(e.value); } })),
-                react_1.default.createElement("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expDecimalFormat')),
+                react_1.default.createElement("div", { key: "expDecimalFormat", className: "field grid" },
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expDecimalFormat')),
                     react_1.default.createElement(dropdown_1.Dropdown, { value: decimalFormat, options: XUtils_1.XUtils.decimalFormatOptions, onChange: function (e) { return setDecimalFormat(e.value); } })),
-                react_1.default.createElement("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expEncoding')),
-                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvEncoding, options: XUtils_1.XUtils.csvEncodingOptions, onChange: function (e) { return setCsvEncoding(e.value); } })));
+                react_1.default.createElement("div", { key: "expEncoding", className: "field grid" },
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expEncoding')),
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvEncoding, options: XUtils_1.XUtils.csvEncodingOptions, onChange: function (e) { return setCsvEncoding(e.value); } }))
+            ]);
         }
     }
     // poznamka: renderovanie vnutornych komponentov Dialogu sa zavola az po otvoreni dialogu
-    return (react_1.default.createElement(dialog_1.Dialog, { visible: props.dialogOpened, onShow: onShow, onHide: function () { return props.hideDialog(); } },
-        props.rowCount ?
-            react_1.default.createElement("div", { className: "field grid" },
-                react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expRowCount')),
-                react_1.default.createElement(inputtext_1.InputText, { value: (0, XUtilsConversions_1.numberAsUI)((_a = props.rowCount) !== null && _a !== void 0 ? _a : null, 0), readOnly: true }))
+    return (react_1.default.createElement(dialog_1.Dialog, { visible: props.dialogState.dialogOpened, onShow: onShow, onHide: function () { return props.hideDialog(); } },
+        ((_b = props.dialogState.exportParams) === null || _b === void 0 ? void 0 : _b.rowCount) ?
+            react_1.default.createElement("div", { key: "expRowCount", className: "field grid" },
+                react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expRowCount')),
+                react_1.default.createElement(inputtext_1.InputText, { value: (0, XUtilsConversions_1.numberAsUI)((_d = (_c = props.dialogState.exportParams) === null || _c === void 0 ? void 0 : _c.rowCount) !== null && _d !== void 0 ? _d : null, 0), readOnly: true }))
             : null,
-        react_1.default.createElement("div", { className: "field grid" },
-            react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expExportType')),
-            react_1.default.createElement(dropdown_1.Dropdown, { value: exportType, options: (_b = props.exportTypeOptions) !== null && _b !== void 0 ? _b : XUtils_1.XUtils.exportTypeOptions, onChange: function (e) { return setExportType(e.value); } })),
+        react_1.default.createElement("div", { key: "expExportType", className: "field grid" },
+            react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expExportType')),
+            react_1.default.createElement(dropdown_1.Dropdown, { value: exportType, options: (_e = props.exportTypeOptions) !== null && _e !== void 0 ? _e : XUtils_1.XUtils.exportTypeOptions, onChange: function (e) { return setExportType(e.value); } })),
         elem,
-        react_1.default.createElement("div", { className: "flex justify-content-center" },
+        react_1.default.createElement("div", { key: "exportRows", className: "flex justify-content-center" },
             react_1.default.createElement(XButton_1.XButton, { label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onExport }))));
 };
 exports.XExportRowsDialog = XExportRowsDialog;

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

@@ -38,6 +38,7 @@ export interface XSearchBrowseProps {
 }
 export interface XLazyDataTableProps {
     entity: string;
+    label?: string;
     dataKey?: string;
     paginator: boolean;
     rows: number;
@@ -74,7 +75,7 @@ export interface XLazyDataTableProps {
     children: ReactChild[];
 }
 export declare const XLazyDataTable: {
-    (props: XLazyDataTableProps): JSX.Element;
+    (props: XLazyDataTableProps): React.JSX.Element;
     defaultProps: {
         paginator: boolean;
         rows: number;

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -245,11 +245,11 @@ var XLazyDataTable = function (props) {
     var _k = __read((0, react_1.useState)(XUtils_1.XUtils.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)(false), 2), exportRowsDialogOpened = _o[0], setExportRowsDialogOpened = _o[1];
-    var _p = __read((0, react_1.useState)(), 2), exportRowsDialogRowCount = _p[0], setExportRowsDialogRowCount = _p[1]; // param pre dialog
-    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
+    var _o = __read((0, react_1.useState)({ dialogOpened: false }), 2), exportRowsDialogState = _o[0], setExportRowsDialogState = _o[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
     // 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
@@ -430,6 +430,28 @@ var XLazyDataTable = function (props) {
         }
         return headers;
     };
+    var getWidths = function () {
+        var e_5, _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
+        var widths = [];
+        var columns = dataTableEl.current.props.children;
+        try {
+            for (var columns_5 = __values(columns), columns_5_1 = columns_5.next(); !columns_5_1.done; columns_5_1 = columns_5.next()) {
+                var column = columns_5_1.value;
+                widths.push((_b = column.props.headerStyle) === null || _b === void 0 ? void 0 : _b.width);
+            }
+        }
+        catch (e_5_1) { e_5 = { error: e_5_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; }
+        }
+        return widths;
+    };
     var hasContentTypeHtml = function () {
         var columns = props.children;
         return columns.some(function (column) { return column.props.contentType === "html"; });
@@ -467,7 +489,7 @@ var XLazyDataTable = function (props) {
         }
     };
     var onClickRemoveRow = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var reread, e_5, e_6;
+        var reread, e_6, e_7;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -482,8 +504,8 @@ var XLazyDataTable = function (props) {
                     reread = _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    e_5 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_5);
+                    e_6 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_6);
                     return [3 /*break*/, 4];
                 case 4:
                     if (reread) {
@@ -505,8 +527,8 @@ var XLazyDataTable = function (props) {
                     _a.sent();
                     return [3 /*break*/, 9];
                 case 8:
-                    e_6 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_6);
+                    e_7 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_7);
                     return [3 /*break*/, 9];
                 case 9:
                     loadData();
@@ -531,10 +553,11 @@ var XLazyDataTable = function (props) {
         }
     };
     var onClickExport = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var findParam, findResult;
+        var fields, findParam, findResult, exportParams;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    fields = getFields(false);
                     findParam = {
                         resultType: FindParam_1.ResultType.OnlyRowCount,
                         first: first,
@@ -544,36 +567,41 @@ var XLazyDataTable = function (props) {
                         customFilterItems: createXCustomFilterItems(customFilterItems, optionalCustomFilterAfterFiltering),
                         multiSortMeta: multiSortMeta,
                         entity: props.entity,
-                        fields: getFields(false),
+                        fields: fields,
                         aggregateItems: aggregateItems
                     };
                     return [4 /*yield*/, findByFilter(findParam)];
                 case 1:
                     findResult = _a.sent();
-                    //setLoading(false);
-                    setExportRowsDialogRowCount(findResult.totalRecords); // param pre dialog
-                    setExportRowsDialogOpened(true);
+                    exportParams = createExportParams(fields, findResult.totalRecords);
+                    setExportRowsDialogState({ dialogOpened: true, exportParams: exportParams });
                     return [2 /*return*/];
             }
         });
     }); };
-    var createExportParams = function () {
+    var createExportParams = function (fields, rowCount) {
         var queryParam = {
             filters: filtersAfterFiltering,
             fullTextSearch: createXFullTextSearch(ftsInputValueAfterFiltering),
             customFilterItems: createXCustomFilterItems(customFilterItems, optionalCustomFilterAfterFiltering),
             multiSortMeta: multiSortMeta,
             entity: props.entity,
-            fields: getFields(false),
-            fieldsToDuplicateValues: props.exportFieldsToDuplicateValues
+            fields: fields
         };
         return {
-            path: "x-lazy-data-table-export",
+            rowCount: rowCount,
+            existsToManyAssoc: existsToManyAssoc(fields),
             queryParam: queryParam,
             headers: getHeaders(),
+            widths: getWidths(),
+            fieldsToDuplicateValues: props.exportFieldsToDuplicateValues,
             fileName: "".concat(props.entity)
         };
     };
+    var existsToManyAssoc = function (fields) {
+        var xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.entity);
+        return fields.some(function (value) { return XUtilsMetadataCommon_1.XUtilsMetadataCommon.hasPathToManyAssoc(xEntity, value); });
+    };
     var onClickChoose = function () {
         //console.log("zavolany onClickChoose");
         if (selectedRow !== null) {
@@ -852,12 +880,12 @@ var XLazyDataTable = function (props) {
                     // display: 'flex' umiestni XCalendar elementy vedla seba
                     filterElement =
                         react_1.default.createElement("div", { style: betweenFilter === "row" ? { display: 'flex' } : undefined },
-                            react_1.default.createElement(XCalendar_1.XCalendar, { value: getFilterValue1(childColumn.props.field), onChange: function (value) { return setFilterValue1(childColumn.props.field, value); }, datetime: xField.type === "datetime" }),
-                            react_1.default.createElement(XCalendar_1.XCalendar, { value: getFilterValue2(childColumn.props.field), onChange: function (value) { return setFilterValue2(childColumn.props.field, value); }, datetime: xField.type === "datetime" }));
+                            react_1.default.createElement(XCalendar_1.XCalendar, { value: getFilterValue1(childColumn.props.field), onChange: function (value) { return setFilterValue1(childColumn.props.field, value); }, scale: xField.scale, datetime: xField.type === "datetime" }),
+                            react_1.default.createElement(XCalendar_1.XCalendar, { value: getFilterValue2(childColumn.props.field), onChange: function (value) { return setFilterValue2(childColumn.props.field, value); }, scale: xField.scale, datetime: xField.type === "datetime" }));
                 }
                 else {
                     var dateValue = getFilterValue(childColumn.props.field);
-                    filterElement = react_1.default.createElement(XCalendar_1.XCalendar, { value: dateValue, onChange: function (value) { return setFilterValue(childColumn.props.field, value); }, datetime: xField.type === "datetime" });
+                    filterElement = react_1.default.createElement(XCalendar_1.XCalendar, { value: dateValue, onChange: function (value) { return setFilterValue(childColumn.props.field, value); }, scale: xField.scale, datetime: xField.type === "datetime" });
                 }
             }
             else if (xField.type === "decimal" || xField.type === "number") {
@@ -953,13 +981,16 @@ var XLazyDataTable = function (props) {
         return react_1.default.createElement(column_1.Column, { field: childColumn.props.field, header: header, footer: footer, filter: true, sortable: true, filterElement: filterElement, dataType: dataType, showFilterMenu: showFilterMenu, showClearButton: showClearButton, body: body, headerStyle: headerStyle, align: align });
     });
     // align-items-center centruje vertikalne (posuva smerom dolu do stredu)
+    // x-lazy-datatable-label-right-compensation - vyvazuje label, aby item-y v strede isli aspon priblizne do stredu
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "flex justify-content-center align-items-center" },
+            props.label ? react_1.default.createElement("div", { className: "x-lazy-datatable-label" }, props.label) : null,
             ftsInputValue ? react_1.default.createElement(XFtsInput_1.XFtsInput, { value: ftsInputValue, onChange: function (value) { return setFtsInputValue(value); } }) : null,
             react_1.default.createElement(XButton_1.XButton, { key: "filter", label: (0, XLocale_1.xLocaleOption)('filter'), onClick: onClickFilter }),
             react_1.default.createElement(XButton_1.XButton, { key: "clearFilter", label: (0, XLocale_1.xLocaleOption)('clearFilter'), onClick: onClickClearFilter }),
             props.optionalCustomFilters ? react_1.default.createElement(XOcfDropdown_1.XOcfDropdown, { optionalCustomFilters: props.optionalCustomFilters, value: optionalCustomFilter, onChange: function (value) { return setOptionalCustomFilter(value); }, className: "m-1" }) : null,
-            props.multilineSwitch ? react_1.default.createElement(XMultilineSwitch_1.XMultilineSwitch, { value: multilineSwitchValue, onChange: function (value) { return setMultilineSwitchValue(value); }, className: "m-1" }) : null),
+            props.multilineSwitch ? react_1.default.createElement(XMultilineSwitch_1.XMultilineSwitch, { value: multilineSwitchValue, onChange: function (value) { return setMultilineSwitchValue(value); }, className: "m-1" }) : null,
+            props.label ? react_1.default.createElement("div", { className: "x-lazy-datatable-label-right-compensation" }) : null),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
             react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: props.paginator, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filterDisplay: props.filterDisplay, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, rowClassName: props.rowClassName, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
@@ -970,7 +1001,7 @@ var XLazyDataTable = function (props) {
             props.appButtonsForRow ? props.appButtonsForRow.map(function (xAppButton) { return react_1.default.createElement(XButton_1.XButton, { key: xAppButton.key, icon: xAppButton.icon, label: xAppButton.label, onClick: function () { return onClickAppButtonForRow(xAppButton.onClick); } }); }) : null,
             props.appButtons,
             props.searchBrowseParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "choose", label: (0, XLocale_1.xLocaleOption)('chooseRow'), onClick: onClickChoose }) : null,
-            exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { key: "exportRowsDialog", dialogOpened: exportRowsDialogOpened, hideDialog: function () { return setExportRowsDialogOpened(false); }, rowCount: exportRowsDialogRowCount, exportParams: createExportParams }) : null),
+            exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { key: "exportRowsDialog", dialogState: exportRowsDialogState, hideDialog: function () { return setExportRowsDialogState({ dialogOpened: false }); } }) : null),
         hasContentTypeHtml() ? react_1.default.createElement(editor_1.Editor, { style: { display: 'none' }, showHeader: false }) : null /* we want to import css if needed (<style type="text/css" data-primereact-style-id="editor">) */));
 };
 exports.XLazyDataTable = XLazyDataTable;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { XMultilineRenderType } from "./XLazyDataTable";
 export declare const XMultilineSwitch: (props: {
     value: XMultilineRenderType;
     onChange: (value: XMultilineRenderType) => void;
     className?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XLazyDataTable/XMultilineSwitch.js

@@ -15,6 +15,6 @@ var XMultilineSwitch = function (props) {
     var itemTemplate = function (option) {
         return react_1.default.createElement("i", { className: option.icon });
     };
-    return (react_1.default.createElement(selectbutton_1.SelectButton, { value: props.value, onChange: function (e) { return props.onChange(e.value); }, options: options, optionValue: "value", itemTemplate: itemTemplate, className: props.className }));
+    return (react_1.default.createElement(selectbutton_1.SelectButton, { value: props.value, onChange: function (e) { return props.onChange(e.value); }, options: options, optionValue: "value", itemTemplate: itemTemplate, allowEmpty: false, className: props.className }));
 };
 exports.XMultilineSwitch = XMultilineSwitch;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 import { XOptionalCustomFilter } from "./XLazyDataTable";
 export declare const XOcfDropdown: (props: {
     optionalCustomFilters: XOptionalCustomFilter[];
     value: XOptionalCustomFilter | undefined;
     onChange: (value: XOptionalCustomFilter | undefined) => void;
     className?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XLazyDataTable/XOcfDropdown.js

@@ -31,6 +31,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.XOcfDropdown = void 0;
 var react_1 = __importDefault(require("react"));
 var dropdown_1 = require("primereact/dropdown");
+// dropdown for optional custom filter (ocf)
 var XOcfDropdown = function (props) {
     var onChange = function (e) {
         var value;

package/lib/components/XLoginDialog.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { XToken } from "./XToken";
 export declare const XLoginDialog: (props: {
     dialogOpened: boolean;
     setXToken: (xToken: XToken | null) => void;
     onHideDialog: (ok: boolean) => void;
     customUserService?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XLoginForm.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { XToken } from "./XToken";
+import React from "react";
 export declare const XLoginForm: (props: {
     setXToken: (xToken: XToken | null) => void;
     onLogin?: (() => void) | undefined;
     customUserService?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XMultiSelect.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { XFilterProp, XFormComponent, XFormComponentProps } from "./XFormComponent";
+import { XAssoc } from "../serverApi/XEntityMetadata";
+import { XObject } from "./XObject";
+import { DataTableSortMeta } from "primereact/datatable";
+export interface XMultiSelectProps extends XFormComponentProps<XObject> {
+    assocToMany: string;
+    assocManyToOne?: string;
+    displayField: string;
+    filter?: XFilterProp;
+    sortField?: string | DataTableSortMeta[];
+    fields?: string[];
+    width?: string;
+    scrollHeight?: string;
+}
+export declare class XMultiSelect extends XFormComponent<XObject, XMultiSelectProps> {
+    protected xAssocToMany: XAssoc;
+    protected xAssocManyToOne?: XAssoc;
+    constructor(props: XMultiSelectProps);
+    getField(): string;
+    isNotNull(): boolean;
+    getValue(): any[];
+    onChange(value: any[]): void;
+    render(): React.JSX.Element;
+}

package/lib/components/XMultiSelect.js

@@ -0,0 +1,97 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XMultiSelect = void 0;
+var react_1 = __importDefault(require("react"));
+var XFormComponent_1 = require("./XFormComponent");
+var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
+var XMultiSelectBase_1 = require("./XMultiSelectBase");
+var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
+var XMultiSelect = /** @class */ (function (_super) {
+    __extends(XMultiSelect, _super);
+    function XMultiSelect(props) {
+        var _this = _super.call(this, props) || this;
+        _this.xAssocToMany = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToManyByPath(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.form.getEntity()), props.assocToMany);
+        if (props.assocManyToOne) {
+            _this.xAssocManyToOne = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOneByPath(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(_this.xAssocToMany.entityName), props.assocManyToOne);
+        }
+        if (props.assocManyToOne) {
+            props.form.addField(props.assocToMany + '.' + props.assocManyToOne + '.' + props.displayField);
+        }
+        else {
+            props.form.addField(props.assocToMany + '.' + props.displayField);
+        }
+        _this.onChange = _this.onChange.bind(_this);
+        return _this;
+    }
+    XMultiSelect.prototype.getField = function () {
+        return this.props.assocToMany;
+    };
+    XMultiSelect.prototype.isNotNull = function () {
+        return !this.xAssocToMany.isNullable;
+    };
+    XMultiSelect.prototype.getValue = function () {
+        var _this = this;
+        var optionRowList;
+        var rowList = this.getValueFromObject();
+        if (this.props.assocManyToOne) {
+            // assoc "assocToMany" contains link rows - these link rows have to be transformed to option rows
+            if (rowList !== null) {
+                optionRowList = rowList.map(function (linkRow) { return XUtilsCommon_1.XUtilsCommon.getValueByPath(linkRow, _this.props.assocManyToOne); });
+            }
+            else {
+                // this.props.form.state.object was not initialised yet
+                optionRowList = [];
+            }
+        }
+        else {
+            // assoc "assocToMany" contains option rows - no transformation needed
+            optionRowList = rowList !== null && rowList !== void 0 ? rowList : [];
+        }
+        return optionRowList;
+    };
+    XMultiSelect.prototype.onChange = function (value) {
+        var _this = this;
+        // value coming from XMultiSelectBase is list of selected option rows
+        var rowList;
+        if (this.props.assocManyToOne) {
+            // assoc "assocToMany" expects link rows - we wrap options row into link rows, id is left undefined,
+            // during save will be all old links deleted and these new links will be inserted (because id is undefined)
+            rowList = value.map(function (optionRow) {
+                var linkRow = {};
+                linkRow[_this.props.assocManyToOne] = optionRow;
+                return linkRow;
+            });
+        }
+        else {
+            // assoc "assocToMany" expects option rows - no transformation needed
+            rowList = value;
+        }
+        this.onValueChangeBase(rowList, this.props.onChange);
+    };
+    XMultiSelect.prototype.render = function () {
+        var _this = this;
+        return (react_1.default.createElement("div", { className: "field grid" },
+            react_1.default.createElement("label", { htmlFor: this.props.assocToMany, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
+            react_1.default.createElement(XMultiSelectBase_1.XMultiSelectBase, { value: this.getValue(), onChange: this.onChange, displayField: this.props.displayField, optionsQuery: { entity: this.xAssocManyToOne ? this.xAssocManyToOne.entityName : this.xAssocToMany.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, width: this.props.width, scrollHeight: this.props.scrollHeight, readOnly: this.isReadOnly(), error: this.getError() })));
+    };
+    return XMultiSelect;
+}(XFormComponent_1.XFormComponent));
+exports.XMultiSelect = XMultiSelect;

package/lib/components/XMultiSelectBase.d.ts

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import { XQuery } from "./XUtils";
+import { DataTableSortMeta } from "primereact/datatable";
+import { XDropdownForEntityProps } from "./XDropdownForEntity";
+export interface XMultiSelectBaseProps {
+    value: any[];
+    onChange: (value: any[]) => void;
+    optionsQuery?: XQuery;
+    displayField: string;
+    maxSelectedLabels?: number;
+    width?: string;
+    scrollHeight?: string;
+    readOnly?: boolean;
+    error?: string;
+}
+export declare class XMultiSelectBase extends Component<XMultiSelectBaseProps> {
+    static defaultProps: {};
+    protected idField: string;
+    state: {
+        options: any[];
+    };
+    constructor(props: XDropdownForEntityProps);
+    componentDidMount(): void;
+    loadOptions(): Promise<void>;
+    getSortField(): string | DataTableSortMeta[] | undefined;
+    render(): React.JSX.Element;
+}