@michalrakus/x-react-web-lib 1.34.0 → 1.35.0

package/XDocTemplateButton.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/modules/docTemplates/XDocTemplateButton';

package/XDocTemplateButton.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/modules/docTemplates/XDocTemplateButton.js');

package/gulpfile.js

@@ -78,6 +78,9 @@ function generateApi(cb) {
         "./lib/components/XUtils",
         "./lib/components/XUtilsMetadata",
 
+        "./lib/modules/docTemplates/XDocTemplateButton",
+        "./lib/modules/docTemplates/xt-doc-template",
+
         "./lib/serverApi/ExportImportParam",
         "./lib/serverApi/FindParam",
         "./lib/serverApi/XUtilsCommon",

package/lib/administration/x-enum-enum.d.ts

@@ -0,0 +1,12 @@
+import { XUser } from "../serverApi/XUser";
+import { XEnum } from "./x-enum";
+export interface XEnumEnum {
+    id: number;
+    code: string;
+    name: string;
+    readOnly: boolean;
+    xEnumList: XEnum[];
+    modifDate: Date;
+    modifXUser: XUser;
+    version: number;
+}

package/lib/administration/x-enum-enum.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/administration/x-enum.d.ts

@@ -0,0 +1,10 @@
+import { XEnumEnum } from "./x-enum-enum";
+export interface XEnum {
+    id: number;
+    code: string;
+    name: string;
+    enabled: boolean;
+    readOnly: boolean;
+    enumOrder: number;
+    xEnumEnum: XEnumEnum;
+}

package/lib/administration/x-enum.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/components/XAutoComplete.d.ts

@@ -12,6 +12,7 @@ export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     itemTemplate?: (suggestion: any, index: number, createStringValue: boolean, defaultValue: (suggestion: any) => string) => React.ReactNode;
     searchBrowse?: JSX.Element;
     assocForm?: JSX.Element;
+    dropdownButtonEnabled?: boolean;
     suggestions?: any[];
     suggestionsLoad?: XSuggestionsLoadProp;
     lazyLoadMaxRows?: number;

package/lib/components/XAutoComplete.js

@@ -70,7 +70,7 @@ var XAutoComplete = /** @class */ (function (_super) {
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, itemTemplate: this.props.itemTemplate, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, width: this.props.width, scrollHeight: this.props.scrollHeight, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, inputClassName: this.props.inputClassName, setFocusOnCreate: this.props.setFocusOnCreate })));
+            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, itemTemplate: this.props.itemTemplate, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, dropdownButtonEnabled: this.props.dropdownButtonEnabled, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, width: this.props.width, scrollHeight: this.props.scrollHeight, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, inputClassName: this.props.inputClassName, setFocusOnCreate: this.props.setFocusOnCreate })));
     };
     return XAutoComplete;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XAutoCompleteBase.d.ts

@@ -28,6 +28,7 @@ export interface XAutoCompleteBaseProps {
     idField?: string;
     addRowEnabled: boolean;
     onAddRow?: (inputValue: string) => void;
+    dropdownButtonEnabled: boolean;
     insertButtonTooltip?: string;
     updateButtonTooltip?: string;
     searchButtonTooltip?: string;
@@ -48,6 +49,7 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
         lazyLoadMaxRows: number;
         splitQueryValue: boolean;
         addRowEnabled: boolean;
+        dropdownButtonEnabled: boolean;
         minLength: number;
         buttonsLayout: string;
         scrollHeight: string;

package/lib/components/XAutoCompleteBase.js

@@ -688,6 +688,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         var buttons;
         if (!readOnly) {
             var createInsertItem = (this.props.addRowEnabled && (this.props.valueForm !== undefined || this.props.onAddRow !== undefined));
+            // TODO - upratat koli split layuot-u (ak dropdownButtonEnabled = false tak moze vzniknut split button s jednym buttonom)
             if (createInsertItem || this.props.valueForm || this.props.searchBrowse) {
                 // mame searchBrowse alebo CRUD operacie, potrebujeme viac buttonov alebo SplitButton
                 var buttonItems = [];
@@ -700,7 +701,9 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                 if (this.props.searchBrowse) {
                     this.createSearchItem(buttonItems);
                 }
-                this.createDropdownItem(buttonItems);
+                if (this.props.dropdownButtonEnabled) {
+                    this.createDropdownItem(buttonItems);
+                }
                 if (this.props.buttonsLayout === "buttons") {
                     buttons = buttonItems.map(function (value, index) { return react_1.default.createElement(button_1.Button, { key: "button".concat(index), icon: value.icon, tooltip: value.tooltip, tooltipOptions: { position: 'top' }, onClick: function (e) { return value.command(e); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() }); });
                 }
@@ -713,7 +716,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             }
             else {
                 // mame len 1 operaciu - dame jednoduchy button
-                buttons = [react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.onOpenDropdown(e); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() })];
+                buttons = [react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.onOpenDropdown(e); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix(), disabled: !this.props.dropdownButtonEnabled })];
             }
         }
         else {
@@ -753,6 +756,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         lazyLoadMaxRows: 10,
         splitQueryValue: true,
         addRowEnabled: true,
+        dropdownButtonEnabled: true,
         minLength: 1,
         buttonsLayout: "buttons",
         scrollHeight: '15rem' // primereact has 200px

package/lib/components/XAutoCompleteDT.d.ts

@@ -12,6 +12,7 @@ export interface XAutoCompleteDTProps extends XFormComponentDTProps {
     itemTemplate?: (suggestion: any, index: number, createStringValue: boolean, defaultValue: (suggestion: any) => string) => React.ReactNode;
     searchBrowse?: JSX.Element;
     assocForm?: JSX.Element;
+    dropdownButtonEnabled?: boolean;
     suggestions?: any[];
     suggestionsLoad?: XSuggestionsLoadProp;
     lazyLoadMaxRows?: number;

package/lib/components/XAutoCompleteDT.js

@@ -68,7 +68,7 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
         // TODO - size
         //const size = this.props.size ?? xDisplayField.length;
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
-        return (react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, itemTemplate: this.props.itemTemplate, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, addRowEnabled: this.props.addRowEnabled, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, inputClassName: this.props.inputClassName }));
+        return (react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, itemTemplate: this.props.itemTemplate, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, dropdownButtonEnabled: this.props.dropdownButtonEnabled, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, addRowEnabled: this.props.addRowEnabled, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, inputClassName: this.props.inputClassName }));
     };
     return XAutoCompleteDT;
 }(XFormComponentDT_1.XFormComponentDT));

package/lib/components/XFormFooter.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
 import { XFormBase } from "./XFormBase";
+import { XtDocTemplate } from "../modules/docTemplates/xt-doc-template";
 export declare const xSaveButtonId: string;
 export declare const XFormFooter: (props: {
     form: XFormBase;
+    docTemplates?: true | ((entity: string) => Promise<XtDocTemplate[]>) | undefined;
+    bodyRight?: React.ReactNode;
+    indentWidth?: string | undefined;
 }) => React.JSX.Element;

package/lib/components/XFormFooter.js

@@ -7,13 +7,32 @@ exports.XFormFooter = exports.xSaveButtonId = void 0;
 var react_1 = __importDefault(require("react"));
 var XButton_1 = require("./XButton");
 var XLocale_1 = require("./XLocale");
+var XDocTemplateButton_1 = require("../modules/docTemplates/XDocTemplateButton");
+var XUtils_1 = require("./XUtils");
 // constant to be used in method formReadOnly to identify save button
 exports.xSaveButtonId = "x-save-button-id";
 // helper wrapper
 var XFormFooter = function (props) {
     var readOnly = props.form.formReadOnlyBase(exports.xSaveButtonId);
+    var leftCompensationElem = null;
+    var rightNodeList = [];
+    // template button is rendered only for update (id !== undefined; row must exist in DB), not for insert
+    if (props.docTemplates && !XUtils_1.XUtils.isMobile() && props.form.props.id !== undefined) {
+        rightNodeList.push(react_1.default.createElement(XDocTemplateButton_1.XDocTemplateButton, { key: "docTemplates", entity: props.form.getEntity(), rowId: props.form.props.id, docTemplates: typeof props.docTemplates === 'function' ? props.docTemplates : undefined }));
+    }
+    if (props.bodyRight) {
+        rightNodeList.push(props.bodyRight);
+    }
+    if (props.indentWidth && rightNodeList.length > 0) {
+        // used only to create some distance between buttons Cancel and XDocTemplateButton (all content is centered), because Cancel is frequently used
+        leftCompensationElem = react_1.default.createElement("div", { style: { width: props.indentWidth } });
+        rightNodeList =
+            [react_1.default.createElement("div", { className: "flex justify-content-end", style: { width: props.indentWidth } }, rightNodeList)];
+    }
     return (react_1.default.createElement("div", { className: "flex justify-content-center" },
+        leftCompensationElem,
         react_1.default.createElement(XButton_1.XButton, { icon: "pi pi-save", label: (0, XLocale_1.xLocaleOption)('save'), onClick: props.form.onClickSave, disabled: readOnly }),
-        react_1.default.createElement(XButton_1.XButton, { icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('cancel'), onClick: props.form.onClickCancel })));
+        react_1.default.createElement(XButton_1.XButton, { icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('cancel'), onClick: props.form.onClickCancel }),
+        rightNodeList));
 };
 exports.XFormFooter = XFormFooter;

package/lib/components/XInputFileList.js

@@ -75,6 +75,7 @@ var XButtonIconNarrow_1 = require("./XButtonIconNarrow");
 var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
 var XLocale_1 = require("./XLocale");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
+// notice: in skch there is new version XInputFileList2 and that version don´t use fetch api because fetch api does not support progress bar
 var XInputFileList = /** @class */ (function (_super) {
     __extends(XInputFileList, _super);
     function XInputFileList(props) {
@@ -168,31 +169,9 @@ var XInputFileList = /** @class */ (function (_super) {
     };
     XInputFileList.prototype.onDownloadFile = function (xFile) {
         return __awaiter(this, void 0, void 0, function () {
-            var response, e_3, fileName, respBlob, url, a;
             return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, XUtils_1.XUtils.fetchBasicJson('x-download-file', { xFileId: xFile.id })];
-                    case 1:
-                        response = _a.sent();
-                        return [3 /*break*/, 3];
-                    case 2:
-                        e_3 = _a.sent();
-                        XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('fileDownloadFailed'), e_3);
-                        return [2 /*return*/];
-                    case 3:
-                        fileName = xFile.name;
-                        return [4 /*yield*/, response.blob()];
-                    case 4:
-                        respBlob = _a.sent();
-                        url = window.URL.createObjectURL(respBlob);
-                        a = document.createElement('a');
-                        a.href = url;
-                        a.download = fileName;
-                        a.click();
-                        return [2 /*return*/];
-                }
+                XUtils_1.XUtils.downloadFile('x-download-file', { xFileId: xFile.id }, xFile.name);
+                return [2 /*return*/];
             });
         });
     };
@@ -207,7 +186,7 @@ var XInputFileList = /** @class */ (function (_super) {
         });
     };
     XInputFileList.prototype.render = function () {
-        var e_4, _a;
+        var e_3, _a;
         var _this = this;
         var _b, _c, _d;
         var label = (_b = this.props.label) !== null && _b !== void 0 ? _b : this.props.assocField;
@@ -230,12 +209,12 @@ var XInputFileList = /** @class */ (function (_super) {
                 _loop_1(fileItem);
             }
         }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
         finally {
             try {
                 if (fileItemList_1_1 && !fileItemList_1_1.done && (_a = fileItemList_1.return)) _a.call(fileItemList_1);
             }
-            finally { if (e_4) throw e_4.error; }
+            finally { if (e_3) throw e_3.error; }
         }
         // vrchny div uklada child elementy pod seba (standardny display:block), zarovnane su dolava
         return (react_1.default.createElement("div", null,

package/lib/components/XLazyDataTable/XExportRowsDialog.js

@@ -104,68 +104,46 @@ var XExportRowsDialog = function (props) {
         setCsvEncoding(ExportImportParam_1.CsvEncoding.Win1250);
     };
     var onExport = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var exportParams, apiPath, requestPayload, exportExcelParam, exportCsvParam, exportJsonParam, response, e_1, fileExt, fileName, respBlob, url, a;
+        var exportParams, apiPath, requestPayload, exportExcelParam, exportCsvParam, exportJsonParam, fileExt, fileName;
         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();
-                    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 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;
-                    }
-                    else {
-                        throw "Unimplemented exportType = ".concat(exportType);
+            // export vykoname az po zatvoreni dialogu - moze dlho trvat a pobezi asynchronne (user zatial moze pracovat s aplikaciou)
+            // zavrieme dialog
+            props.hideDialog();
+            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 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
                     }
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, XUtils_1.XUtils.fetchBasicJson(apiPath, requestPayload)];
-                case 2:
-                    response = _a.sent();
-                    return [3 /*break*/, 4];
-                case 3:
-                    e_1 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage("Export failed.", e_1);
-                    return [2 /*return*/];
-                case 4:
-                    fileExt = exportType === ExportImportParam_1.ExportType.Excel ? "xlsx" : exportType;
-                    fileName = "".concat(exportParams.fileName, ".").concat(fileExt);
-                    return [4 /*yield*/, response.blob()];
-                case 5:
-                    respBlob = _a.sent();
-                    url = window.URL.createObjectURL(respBlob);
-                    a = document.createElement('a');
-                    a.href = url;
-                    a.download = fileName;
-                    a.click();
-                    return [2 /*return*/];
+                };
+                requestPayload = exportCsvParam;
+            }
+            else if (exportType === ExportImportParam_1.ExportType.Json) {
+                apiPath = "x-lazy-data-table-export-json";
+                exportJsonParam = {
+                    queryParam: exportParams.queryParam
+                };
+                requestPayload = exportJsonParam;
+            }
+            else {
+                throw "Unimplemented exportType = ".concat(exportType);
             }
+            fileExt = exportType === ExportImportParam_1.ExportType.Excel ? "xlsx" : exportType;
+            fileName = "".concat(exportParams.fileName, ".").concat(fileExt);
+            XUtils_1.XUtils.downloadFile(apiPath, requestPayload, fileName);
+            return [2 /*return*/];
         });
     }); };
     var createExcelCsvParam = function (exportParams) {

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

@@ -7,6 +7,7 @@ import { XAggregateFunction, XCustomFilter } from "../../serverApi/FindParam";
 import { XOnSaveOrCancelProp } from "../XFormBase";
 import { IconType } from "primereact/utils";
 import { ButtonProps } from "primereact/button";
+import { XtDocTemplate } from "../../modules/docTemplates/xt-doc-template";
 export type XBetweenFilterProp = "row" | "column" | undefined;
 export type XMultilineRenderType = "singleLine" | "fewLines" | "allLines";
 export interface XAppButtonForRow {
@@ -67,10 +68,11 @@ export interface XLazyDataTableProps {
     formFooterHeight?: string;
     shrinkWidth: boolean;
     onResetTable?: () => void;
-    onAddRow?: () => void;
+    onAddRow?: (filters: DataTableFilterMeta) => void;
     onEdit?: (selectedRow: any) => void;
     removeRow?: ((selectedRow: any) => Promise<boolean>) | boolean;
     onRemoveRow?: XOnSaveOrCancelProp;
+    docTemplates?: true | ((entity: string) => Promise<XtDocTemplate[]>);
     appButtonsForRow?: XAppButtonForRow[];
     appButtons?: any;
     filters?: DataTableFilterMeta;
@@ -83,7 +85,7 @@ export interface XLazyDataTableProps {
     multilineSwitchInitValue: XMultilineRenderType;
     multilineSwitchFewLinesCount: number;
     multilineSwitchValue?: [XMultilineRenderType, React.Dispatch<React.SetStateAction<XMultilineRenderType>>];
-    headerElementRight?: React.ReactNode;
+    headerBodyRight?: React.ReactNode;
     searchBrowseParams?: XSearchBrowseParams;
     width?: string;
     rowClassName?: (data: any) => object | string | undefined;
@@ -113,19 +115,26 @@ export declare const XLazyDataTable: {
     };
 };
 export type XGetFilterItem = (field: string) => DataTableFilterMetaData | DataTableOperatorFilterMetaData;
-export type XSetFilterItem = (field: string, filterItem: DataTableFilterMetaData | DataTableOperatorFilterMetaData) => void;
+export type XSetFilterItem = (field: string, filterItem: DataTableFilterMetaData | DataTableOperatorFilterMetaData, autoFilter: boolean) => void;
 export type XFilterElementParams = {
     getFilterItem: XGetFilterItem;
     setFilterItem: XSetFilterItem;
     options: ColumnFilterElementTemplateOptions;
+    autoFilter: boolean;
+};
+export type XFilterElementProp = {
+    element: (params: XFilterElementParams) => React.ReactNode;
+    matchModeLabel?: string;
 };
-export type XFilterElementProp = (params: XFilterElementParams) => React.ReactNode;
 export type XAutoCompleteInFilterProps = {
     assocField?: string;
     filter?: XCustomFilter;
     sortField?: string | DataTableSortMeta[];
+    fields?: string[];
     lazyLoadMaxRows?: number;
     field?: string | string[];
+    itemTemplate?: (suggestion: any, index: number, createStringValue: boolean, defaultValue: (suggestion: any) => string) => React.ReactNode;
+    inputClassName?: string;
     searchBrowse?: JSX.Element;
     valueForm?: JSX.Element;
     minLength?: number;

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -137,6 +137,7 @@ var XInputTextBase_1 = require("../XInputTextBase");
 var useXStateSession_1 = require("../useXStateSession");
 var useXStateSessionBase_1 = require("../useXStateSessionBase");
 var _ = __importStar(require("lodash"));
+var XDocTemplateButton_1 = require("../../modules/docTemplates/XDocTemplateButton");
 var XStateKeySuffix;
 (function (XStateKeySuffix) {
     XStateKeySuffix["filters"] = "filters";
@@ -214,7 +215,10 @@ var XLazyDataTable = function (props) {
     };
     var getInitFilterMatchMode = function (xLazyColumnProps, xField) {
         var filterMatchMode;
-        if (isAutoCompleteInFilterEnabled(xLazyColumnProps)) {
+        if (xLazyColumnProps.filterElement !== undefined) {
+            filterMatchMode = FindParam_1.XFilterMatchMode.X_FILTER_ELEMENT; // little hack
+        }
+        else if (isAutoCompleteInFilterEnabled(xLazyColumnProps)) {
             filterMatchMode = FindParam_1.XFilterMatchMode.X_AUTO_COMPLETE; // little hack
         }
         else if (xField.type === "string" || xField.type === "jsonb") {
@@ -730,7 +734,7 @@ var XLazyDataTable = function (props) {
     var onClickAddRow = function () {
         //console.log("zavolany onClickAddRow");
         if (props.onAddRow !== undefined) {
-            props.onAddRow();
+            props.onAddRow(filters);
         }
     };
     var onClickEdit = function () {
@@ -882,13 +886,14 @@ var XLazyDataTable = function (props) {
     // ****** vseobecne metodky pre set/get do/z filtra ********
     // zatial funguje len pre simple filtrovanie (filterDisplay="row")
     // vseobecna specialna metodka pouzvana pri custom filtri (XLazyColumn.filterElement)
-    var setFilterItem = function (field, filterItem) {
+    // nepodarilo sa posunut autoFilter takym sposobom aby app programmer nemusel autoFilter nastavovat
+    var setFilterItem = function (field, filterItem, autoFilter) {
         filters[field] = filterItem;
         // neskusal som, ci treba aj toto klonovat ale pravdepodobne hej
         var filtersCloned = __assign({}, filters);
         setFilters(filtersCloned);
         removePagingFromStorage();
-        loadDataBaseIfAutoFilter(filtersCloned, false);
+        loadDataBaseIfAutoFilter(filtersCloned, autoFilter);
     };
     // vseobecna specialna metodka pouzvana pri custom filtri (XLazyColumn.filterElement)
     var getFilterItem = function (field) {
@@ -1153,6 +1158,7 @@ var XLazyDataTable = function (props) {
     }
     // pre lepsiu citatelnost vytvarame stlpce uz tu
     var columnElemList = react_1.default.Children.map(props.children.filter(function (child) { return XUtils_1.XUtils.xViewStatus(child.props.columnViewStatus) !== XUtils_1.XViewStatus.Hidden; }), function (child) {
+        var _a, _b;
         // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
         // priklad je na https://soshace.com/building-react-components-using-children-props-and-context-api/
         // (vzdy musime robit manipulacie so stlpcom, lebo potrebujeme pridat filter={true} sortable={true}
@@ -1177,92 +1183,107 @@ var XLazyDataTable = function (props) {
         }
         // *********** filterElement ***********
         var betweenFilter = undefined;
-        var filterElement;
+        var filterElement = null;
         if (childColumn.props.filterElement !== undefined) {
-            filterElement = function (options) {
-                // compilator sa stazoval ze childColumn.props.filterElement moze byt undefined, preto som pridal "!"
-                return childColumn.props.filterElement({ getFilterItem: getFilterItem, setFilterItem: setFilterItem, options: options });
-            };
+            // if we use matchModeLabel and this special match mode is chosen then we use custom filter element
+            // if we don't use matchModeLabel (undefined) then we use custom filter element always
+            if ((childColumn.props.filterElement.matchModeLabel && getFilterMatchMode(childColumn.props.field) === FindParam_1.XFilterMatchMode.X_FILTER_ELEMENT)
+                || childColumn.props.filterElement.matchModeLabel === undefined) {
+                filterElement = function (options) {
+                    // compilator sa stazoval ze childColumn.props.filterElement moze byt undefined, preto som pridal "!"
+                    return childColumn.props.filterElement.element({ getFilterItem: getFilterItem, setFilterItem: setFilterItem, options: options, autoFilter: childColumn.props.autoFilter });
+                };
+            }
         }
-        else if (getFilterMatchMode(childColumn.props.field) === FindParam_1.XFilterMatchMode.X_AUTO_COMPLETE) {
-            var assocField_1 = undefined; // path to manyToOne assoc
-            var displayField = undefined; // field/fields displayed in autocomplete (can be path)
-            // if childColumn.props.autoComplete = true, then autoComplete = undefined and default autocomlete is created
-            var autoComplete = (typeof childColumn.props.autoComplete === 'object' ? childColumn.props.autoComplete : undefined);
-            if (autoComplete) {
-                if (autoComplete.field) {
-                    displayField = autoComplete.field;
+        if (filterElement === null) {
+            if (getFilterMatchMode(childColumn.props.field) === FindParam_1.XFilterMatchMode.X_AUTO_COMPLETE) {
+                var assocField_1 = undefined; // path to manyToOne assoc
+                var displayField = undefined; // field/fields displayed in autocomplete (can be path)
+                // if childColumn.props.autoComplete = true, then autoComplete = undefined and default autocomplete is created
+                var autoComplete = (typeof childColumn.props.autoComplete === 'object' ? childColumn.props.autoComplete : undefined);
+                if (autoComplete) {
+                    if (autoComplete.field) {
+                        displayField = autoComplete.field;
+                    }
+                    if (autoComplete.assocField) {
+                        // check - autoComplete.assocField must be prefix (part) of childColumn.props.field
+                        if (!childColumn.props.field.startsWith(autoComplete.assocField + ".")) {
+                            throw "XLazyColumn with field \"".concat(childColumn.props.field, "\": autoComplete.assocField \"").concat(autoComplete.assocField, "\" is not prefix of the field");
+                        }
+                        assocField_1 = autoComplete.assocField;
+                        if (displayField === undefined) {
+                            // take displayField from childColumn.props.field (rest of the path)
+                            displayField = childColumn.props.field.substring(autoComplete.assocField.length + 1);
+                        }
+                    }
                 }
-                if (autoComplete.assocField) {
-                    // check - autoComplete.assocField must be prefix (part) of childColumn.props.field
-                    if (!childColumn.props.field.startsWith(autoComplete.assocField + ".")) {
-                        throw "XLazyColumn with field \"".concat(childColumn.props.field, "\": autoComplete.assocField \"").concat(autoComplete.assocField, "\" is not prefix of the field");
+                if (assocField_1 === undefined) {
+                    // default - take assocField/displayField from childColumn.props.field
+                    var _c = __read(XUtilsCommon_1.XUtilsCommon.getPathToAssocAndField(childColumn.props.field), 2), assocFieldTemp = _c[0], displayFieldTemp = _c[1];
+                    if (assocFieldTemp === null) {
+                        throw "XLazyColumn with field \"".concat(childColumn.props.field, "\": unexpected error - path of length >= 2 expected");
                     }
-                    assocField_1 = autoComplete.assocField;
+                    assocField_1 = assocFieldTemp;
                     if (displayField === undefined) {
-                        // take displayField from childColumn.props.field (rest of the path)
-                        displayField = childColumn.props.field.substring(autoComplete.assocField.length + 1);
+                        displayField = displayFieldTemp;
                     }
                 }
+                var xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOneByPath(xEntity, assocField_1);
+                var object = getFilterValue(childColumn.props.field);
+                filterElement = react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: object, onChange: function (object, objectChange) { return setFilterValue(childColumn.props.field, object, undefined, object !== null ? [{
+                            where: "[".concat(assocField_1, "] = ").concat(object['id']),
+                            params: {}
+                        }] : undefined, childColumn.props.autoFilter); }, error: undefined, onErrorChange: function (error) { }, idField: "id", field: displayField, itemTemplate: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.itemTemplate, inputClassName: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.inputClassName, suggestionsQuery: {
+                        entity: xAssoc.entityName,
+                        filter: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.filter,
+                        sortField: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.sortField,
+                        fields: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.fields
+                    }, searchBrowse: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.searchBrowse, valueForm: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.valueForm, addRowEnabled: false, width: "100%", scrollHeight: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.scrollHeight, suggestionsLoad: "lazy", lazyLoadMaxRows: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.lazyLoadMaxRows, minLength: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.minLength });
             }
-            if (assocField_1 === undefined) {
-                // default - take assocField/displayField from childColumn.props.field
-                var _a = __read(XUtilsCommon_1.XUtilsCommon.getPathToAssocAndField(childColumn.props.field), 2), assocFieldTemp = _a[0], displayFieldTemp = _a[1];
-                if (assocFieldTemp === null) {
-                    throw "XLazyColumn with field \"".concat(childColumn.props.field, "\": unexpected error - path of length >= 2 expected");
-                }
-                assocField_1 = assocFieldTemp;
-                if (displayField === undefined) {
-                    displayField = displayFieldTemp;
+            else {
+                if (xField.type === "boolean") {
+                    var checkboxValue = getFilterValue(childColumn.props.field);
+                    filterElement = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: checkboxValue, onChange: function (e) { return setFilterValue(childColumn.props.field, e.value, api_1.FilterMatchMode.EQUALS, undefined, childColumn.props.autoFilter); } });
                 }
-            }
-            var xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOneByPath(xEntity, assocField_1);
-            var object = getFilterValue(childColumn.props.field);
-            filterElement = react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: object, onChange: function (object, objectChange) { return setFilterValue(childColumn.props.field, object, undefined, object !== null ? [{ where: "[".concat(assocField_1, "] = ").concat(object['id']), params: {} }] : undefined, childColumn.props.autoFilter); }, error: undefined, onErrorChange: function (error) { }, idField: "id", field: displayField, suggestionsQuery: { entity: xAssoc.entityName, filter: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.filter, sortField: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.sortField }, searchBrowse: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.searchBrowse, valueForm: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.valueForm, addRowEnabled: false, width: "100%", scrollHeight: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.scrollHeight, suggestionsLoad: "lazy", lazyLoadMaxRows: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.lazyLoadMaxRows, minLength: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.minLength });
-        }
-        else {
-            if (xField.type === "boolean") {
-                var checkboxValue = getFilterValue(childColumn.props.field);
-                filterElement = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: checkboxValue, onChange: function (e) { return setFilterValue(childColumn.props.field, e.value, api_1.FilterMatchMode.EQUALS, undefined, childColumn.props.autoFilter); } });
-            }
-            else if (childColumn.props.dropdownInFilter) {
-                var dropdownValue = getDropdownFilterValue(childColumn.props.field);
-                filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: props.entity, path: childColumn.props.field, value: dropdownValue, onValueChange: function (field, displayValue) { return onDropdownFilterChange(field, displayValue, childColumn.props.autoFilter); }, filter: childColumn.props.dropdownFilter, sortField: childColumn.props.dropdownSortField });
-            }
-            else if (xField.type === "string") {
-                var stringValue = getFilterValue(childColumn.props.field);
-                filterElement = react_1.default.createElement(XInputTextBase_1.XInputTextBase, { value: stringValue, onChange: function (value) { return setFilterValue(childColumn.props.field, value, undefined, undefined, childColumn.props.autoFilter); } });
-            }
-            else if (xField.type === "date" || xField.type === "datetime") {
-                betweenFilter = getBetweenFilter(childColumn.props.betweenFilter, props.betweenFilter);
-                if (betweenFilter !== undefined) {
-                    // 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, childColumn.props.autoFilter); }, 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, childColumn.props.autoFilter); }, scale: xField.scale, datetime: xField.type === "datetime" }));
+                else if (childColumn.props.dropdownInFilter) {
+                    var dropdownValue = getDropdownFilterValue(childColumn.props.field);
+                    filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: props.entity, path: childColumn.props.field, value: dropdownValue, onValueChange: function (field, displayValue) { return onDropdownFilterChange(field, displayValue, childColumn.props.autoFilter); }, filter: childColumn.props.dropdownFilter, sortField: childColumn.props.dropdownSortField });
                 }
-                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, undefined, undefined, childColumn.props.autoFilter); }, scale: xField.scale, datetime: xField.type === "datetime" });
+                else if (xField.type === "string") {
+                    var stringValue = getFilterValue(childColumn.props.field);
+                    filterElement = react_1.default.createElement(XInputTextBase_1.XInputTextBase, { value: stringValue, onChange: function (value) { return setFilterValue(childColumn.props.field, value, undefined, undefined, childColumn.props.autoFilter); } });
                 }
-            }
-            else if (xField.type === "decimal" || xField.type === "number") {
-                var params = XUtilsMetadata_1.XUtilsMetadata.getParamsForInputNumber(xField);
-                betweenFilter = getBetweenFilter(childColumn.props.betweenFilter, props.betweenFilter);
-                if (betweenFilter !== undefined) {
-                    // display: 'flex' umiestni input elementy pod seba (betweenFilter = "column") resp. vedla seba (betweenFilter = "row")
-                    filterElement =
-                        react_1.default.createElement("div", { style: { display: 'flex', flexDirection: betweenFilter } },
-                            react_1.default.createElement(XInputDecimalBase_1.XInputDecimalBase, __assign({ value: getFilterValue1(childColumn.props.field), onChange: function (value) { return setFilterValue1(childColumn.props.field, value, childColumn.props.autoFilter); } }, params)),
-                            react_1.default.createElement(XInputDecimalBase_1.XInputDecimalBase, __assign({ value: getFilterValue2(childColumn.props.field), onChange: function (value) { return setFilterValue2(childColumn.props.field, value, childColumn.props.autoFilter); } }, params)));
+                else if (xField.type === "date" || xField.type === "datetime") {
+                    betweenFilter = getBetweenFilter(childColumn.props.betweenFilter, props.betweenFilter);
+                    if (betweenFilter !== undefined) {
+                        // 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, childColumn.props.autoFilter); }, 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, childColumn.props.autoFilter); }, 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, undefined, undefined, childColumn.props.autoFilter); }, scale: xField.scale, datetime: xField.type === "datetime" });
+                    }
                 }
-                else {
-                    var numberValue = getFilterValue(childColumn.props.field);
-                    filterElement = react_1.default.createElement(XInputDecimalBase_1.XInputDecimalBase, __assign({ value: numberValue, onChange: function (value) { return setFilterValue(childColumn.props.field, value, undefined, undefined, childColumn.props.autoFilter); } }, params));
+                else if (xField.type === "decimal" || xField.type === "number") {
+                    var params = XUtilsMetadata_1.XUtilsMetadata.getParamsForInputNumber(xField);
+                    betweenFilter = getBetweenFilter(childColumn.props.betweenFilter, props.betweenFilter);
+                    if (betweenFilter !== undefined) {
+                        // display: 'flex' umiestni input elementy pod seba (betweenFilter = "column") resp. vedla seba (betweenFilter = "row")
+                        filterElement =
+                            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: betweenFilter } },
+                                react_1.default.createElement(XInputDecimalBase_1.XInputDecimalBase, __assign({ value: getFilterValue1(childColumn.props.field), onChange: function (value) { return setFilterValue1(childColumn.props.field, value, childColumn.props.autoFilter); } }, params)),
+                                react_1.default.createElement(XInputDecimalBase_1.XInputDecimalBase, __assign({ value: getFilterValue2(childColumn.props.field), onChange: function (value) { return setFilterValue2(childColumn.props.field, value, childColumn.props.autoFilter); } }, params)));
+                    }
+                    else {
+                        var numberValue = getFilterValue(childColumn.props.field);
+                        filterElement = react_1.default.createElement(XInputDecimalBase_1.XInputDecimalBase, __assign({ value: numberValue, onChange: function (value) { return setFilterValue(childColumn.props.field, value, undefined, undefined, childColumn.props.autoFilter); } }, params));
+                    }
                 }
             }
-        }
+        } // if (filterElement === null)
         // ************** dataType **************
         // depending on the dataType of the column, suitable match modes are displayed in filter
         var dataType = "text";
@@ -1296,6 +1317,9 @@ var XLazyDataTable = function (props) {
             if (isAutoCompleteInFilterEnabled(childColumn.props)) {
                 filterMatchModeOptions.push({ label: (0, XLocale_1.xLocaleOption)('xAutoComplete'), value: FindParam_1.XFilterMatchMode.X_AUTO_COMPLETE });
             }
+            if ((_a = childColumn.props.filterElement) === null || _a === void 0 ? void 0 : _a.matchModeLabel) {
+                filterMatchModeOptions.push({ label: (_b = childColumn.props.filterElement) === null || _b === void 0 ? void 0 : _b.matchModeLabel, value: FindParam_1.XFilterMatchMode.X_FILTER_ELEMENT });
+            }
         }
         // *********** showClearButton ***********
         // pre filterDisplay = "row" nechceme clear button, chceme setrit miesto
@@ -1364,7 +1388,7 @@ var XLazyDataTable = function (props) {
                     setMultilineSwitchValue(switchValue);
                     setupExpandedRows(value, switchValue);
                 }, className: "m-1" }) : null,
-            props.headerElementRight,
+            props.headerBodyRight,
             props.label && !isMobile ? 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, expandedRows: expandedRows, rowExpansionTemplate: props.rowExpansionTemplate ? rowExpansionTemplate : undefined, paginator: props.paginator, pageLinkSize: pageLinkSize, 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)),
@@ -1373,8 +1397,9 @@ var XLazyDataTable = function (props) {
             props.onEdit !== undefined && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "editRow", icon: "pi pi-pencil", label: (0, XLocale_1.xLocaleOption)('editRow'), onClick: onClickEdit }) : null,
             props.removeRow !== undefined && props.removeRow !== false && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "removeRow", icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('removeRow'), onClick: onClickRemoveRow }) : null,
             exportRows ? react_1.default.createElement(XButton_1.XButton, { key: "exportRows", icon: "pi pi-file-export", label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onClickExport }) : null,
-            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); }, style: xAppButton.style }); }) : null,
-            props.appButtons,
+            props.docTemplates && !isMobile && props.searchBrowseParams === undefined ? react_1.default.createElement(XDocTemplateButton_1.XDocTemplateButton, { key: "docTemplates", entity: props.entity, rowId: selectedRow ? selectedRow[xEntity.idField] : undefined, docTemplates: typeof props.docTemplates === 'function' ? props.docTemplates : undefined }) : null,
+            props.appButtonsForRow && props.searchBrowseParams === undefined ? 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); }, style: xAppButton.style }); }) : null,
+            props.appButtons && props.searchBrowseParams === undefined,
             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", 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">) */));

package/lib/components/XUtils.d.ts

@@ -73,6 +73,7 @@ export declare class XUtils {
     static fetch(path: string, value: any, usePublicToken?: boolean | XToken): Promise<any>;
     static post(path: string, value: any): Promise<Response>;
     static openExcelReport(apiPath: string, requestPayload: any, fileName?: string): Promise<boolean>;
+    static downloadFile(apiPath: string, requestPayload: any, fileName: string): Promise<boolean>;
     static fetchBasicJson(path: string, value: any, usePublicToken?: boolean | XToken): Promise<Response>;
     static fetchFile(path: string, jsonFieldValue: any, fileToPost: any): Promise<any>;
     static fetchBasicAuthBasic(path: string, headers: any, body: any, usePublicToken?: boolean | XToken): Promise<Response>;

package/lib/components/XUtils.js

@@ -81,6 +81,7 @@ var ExportImportParam_1 = require("../serverApi/ExportImportParam");
 var XResponseError_1 = require("./XResponseError");
 var FindParam_1 = require("../serverApi/FindParam");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
+var XLocale_1 = require("./XLocale");
 var OperationType;
 (function (OperationType) {
     OperationType[OperationType["None"] = 0] = "None";
@@ -335,7 +336,17 @@ var XUtils = /** @class */ (function () {
     };
     XUtils.openExcelReport = function (apiPath, requestPayload, fileName) {
         return __awaiter(this, void 0, void 0, function () {
-            var response, e_5, fileNameExt, respBlob, url, a;
+            return __generator(this, function (_a) {
+                return [2 /*return*/, XUtils.downloadFile(apiPath, requestPayload, "".concat(fileName !== null && fileName !== void 0 ? fileName : apiPath, ".xlsx"))];
+            });
+        });
+    };
+    // general method for file download
+    // returns true if the download finished successfully (often we don´t need this info)
+    // it would be nice if the fileName could be taken also from backend, from the service call
+    XUtils.downloadFile = function (apiPath, requestPayload, fileName) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, e_5, respBlob, url, a;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -346,17 +357,15 @@ var XUtils = /** @class */ (function () {
                         return [3 /*break*/, 3];
                     case 2:
                         e_5 = _a.sent();
-                        XUtils.showErrorMessage("Nepodarilo sa vytvori\u0165/stiahnu\u0165 xlsx s\u00FAbor.", e_5); // dalsie info (apiPath, payload) by mali byt v "e"
+                        XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('fileDownloadFailed'), e_5); // next info (apiPath, payload) should be in "e"
                         return [2 /*return*/, false];
-                    case 3:
-                        fileNameExt = "".concat(fileName !== null && fileName !== void 0 ? fileName : apiPath, ".xlsx");
-                        return [4 /*yield*/, response.blob()];
+                    case 3: return [4 /*yield*/, response.blob()];
                     case 4:
                         respBlob = _a.sent();
                         url = window.URL.createObjectURL(respBlob);
                         a = document.createElement('a');
                         a.href = url;
-                        a.download = fileNameExt;
+                        a.download = fileName;
                         a.click();
                         return [2 /*return*/, true];
                 }

package/lib/modules/docTemplates/XDocTemplateButton.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { XtDocTemplate } from "./xt-doc-template";
+export declare const XDocTemplateButton: (props: {
+    entity: string;
+    rowId: number | undefined;
+    docTemplates?: ((entity: string) => Promise<XtDocTemplate[]>) | undefined;
+}) => React.JSX.Element | null;

package/lib/modules/docTemplates/XDocTemplateButton.js

@@ -0,0 +1,150 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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.XDocTemplateButton = void 0;
+var react_1 = __importStar(require("react"));
+var button_1 = require("primereact/button");
+var splitbutton_1 = require("primereact/splitbutton");
+var XUtils_1 = require("../../components/XUtils");
+var XUtilsCommon_1 = require("../../serverApi/XUtilsCommon");
+var XLocale_1 = require("../../components/XLocale");
+var XDocTemplateButton = function (props) {
+    var _a = __read((0, react_1.useState)([]), 2), docTemplateList = _a[0], setDocTemplateList = _a[1];
+    // parameter [] - works like componentDidMount
+    (0, react_1.useEffect)(function () {
+        loadDocTemplates();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    var loadDocTemplates = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var docTemplateListLocal;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!props.docTemplates) return [3 /*break*/, 2];
+                    return [4 /*yield*/, props.docTemplates(props.entity)];
+                case 1:
+                    docTemplateListLocal = _a.sent();
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, XUtils_1.XUtils.fetchRows('XtDocTemplate', XUtilsCommon_1.XUtilsCommon.createCustomFilter("[entity] = '".concat(props.entity, "' AND [availableInForms] = TRUE")), "label", ["templateXFile.name"])];
+                case 3:
+                    // default
+                    docTemplateListLocal = _a.sent();
+                    _a.label = 4;
+                case 4:
+                    setDocTemplateList(docTemplateListLocal);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var onClickButton = function (xtDocTemplate) { return __awaiter(void 0, void 0, void 0, function () {
+        var xtRunDocTemplateRequest;
+        var _a;
+        return __generator(this, function (_b) {
+            // in XLazyDataTable if no row is selected
+            if (!props.rowId) {
+                alert((0, XLocale_1.xLocaleOption)('pleaseSelectRow'));
+                return [2 /*return*/];
+            }
+            xtRunDocTemplateRequest = { xtDocTemplateId: xtDocTemplate.id, rowId: props.rowId, xUser: (_a = XUtils_1.XUtils.getXToken()) === null || _a === void 0 ? void 0 : _a.xUser };
+            // TODO - pridat id-cko do nazvu? alebo na XtDocTemplate vytvorit nejaky atribut pre nazov suboru vo forme Klient-{klient.meno}-{klient.priezvisko}.xlsx
+            // ale to by chcelo vytvorit ten nazov v service (po tom co bude nacitany row) a nejako ho dostat sem
+            XUtils_1.XUtils.downloadFile('xt-run-doc-template', xtRunDocTemplateRequest, xtDocTemplate.templateXFile.name);
+            return [2 /*return*/];
+        });
+    }); };
+    if (docTemplateList.length === 0) {
+        return null;
+    }
+    else if (docTemplateList.length === 1) {
+        // simple button
+        var docTemplate_1 = docTemplateList[0];
+        return (react_1.default.createElement(button_1.Button, { icon: "pi pi-file-export", label: docTemplate_1.label, onClick: function () { return onClickButton(docTemplate_1); }, className: "m-1" }));
+    }
+    else {
+        // split button
+        var docTemplate0_1 = docTemplateList[0];
+        var items = [];
+        var _loop_1 = function (index) {
+            var docTemplate = docTemplateList[index];
+            items.push({ icon: "pi pi-file-export", label: docTemplate.label, command: function () { return onClickButton(docTemplate); } });
+        };
+        for (var index = 1; index < docTemplateList.length; index++) {
+            _loop_1(index);
+        }
+        return (react_1.default.createElement(splitbutton_1.SplitButton, { icon: "pi pi-file-export", label: docTemplate0_1.label, onClick: function () { return onClickButton(docTemplate0_1); }, model: items, className: "m-1" }));
+    }
+};
+exports.XDocTemplateButton = XDocTemplateButton;

package/lib/modules/docTemplates/xt-doc-template-field-to-join.d.ts

@@ -0,0 +1,6 @@
+import { XtDocTemplate } from "./xt-doc-template";
+export interface XtDocTemplateFieldToJoin {
+    id: number;
+    xtDocTemplate: XtDocTemplate;
+    field: string;
+}

package/lib/modules/docTemplates/xt-doc-template-field-to-join.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/modules/docTemplates/xt-doc-template.d.ts

@@ -0,0 +1,18 @@
+import { XtDocTemplateFieldToJoin } from "./xt-doc-template-field-to-join";
+import { XUser } from "../../serverApi/XUser";
+import { XFile } from "../files/x-file";
+import { XEnum } from "../../administration/x-enum";
+export interface XtDocTemplate {
+    id: number;
+    label: string;
+    comment: string | null;
+    entity: string;
+    xtDocTemplateFieldToJoinList: XtDocTemplateFieldToJoin[];
+    templateId: string | null;
+    templateType: XEnum;
+    templateXFile: XFile;
+    availableInForms: boolean;
+    modifDate: Date | null;
+    modifXUser: XUser | null;
+    version: number;
+}

package/lib/modules/docTemplates/xt-doc-template.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/modules/files/x-file.d.ts

@@ -0,0 +1,8 @@
+export interface XFile {
+    id: number;
+    name: string;
+    size: number;
+    pathName: string;
+    modifDate: Date;
+    modifXUser: number;
+}

package/lib/modules/files/x-file.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/serverApi/FindParam.d.ts

@@ -14,7 +14,8 @@ export interface XCustomFilterItem {
 }
 export type XCustomFilter = XCustomFilterItem | XCustomFilterItem[];
 export declare enum XFilterMatchMode {
-    X_AUTO_COMPLETE = "xAutoComplete"
+    X_AUTO_COMPLETE = "xAutoComplete",
+    X_FILTER_ELEMENT = "xFilterElement"
 }
 export interface XDataTableFilterMetaData extends DataTableFilterMetaData {
     customFilterItems?: XCustomFilterItem[];

package/lib/serverApi/FindParam.js

@@ -12,6 +12,7 @@ var ResultType;
 var XFilterMatchMode;
 (function (XFilterMatchMode) {
     XFilterMatchMode["X_AUTO_COMPLETE"] = "xAutoComplete";
+    XFilterMatchMode["X_FILTER_ELEMENT"] = "xFilterElement"; // custom filter element (defined in filterElement property)
 })(XFilterMatchMode = exports.XFilterMatchMode || (exports.XFilterMatchMode = {}));
 var XAggregateFunction;
 (function (XAggregateFunction) {

package/lib/serverApi/x-lib-api.d.ts

@@ -1,6 +1,12 @@
+import { XUser } from "./XUser";
 export interface XGetSequenceValueRequest {
     name: string;
 }
 export interface XGetSequenceValueResponse {
     value: number;
 }
+export interface XtRunDocTemplateRequest {
+    xtDocTemplateId: number;
+    rowId: number;
+    xUser?: XUser;
+}

package/lib/serverApi/x-lib-api.js

@@ -1,3 +1,2 @@
 "use strict";
-// misc api used in lib
 Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

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

package/xt-doc-template.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/modules/docTemplates/xt-doc-template';

package/xt-doc-template.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/modules/docTemplates/xt-doc-template.js');