@michalrakus/x-react-web-lib 1.5.0 → 1.6.0

package/XButtonIconMedium.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XButtonIconMedium';

package/XButtonIconMedium.js

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

package/XFormBaseModif.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XFormBaseModif';

package/XFormBaseModif.js

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

package/XInputFileList.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XInputFileList';

package/XInputFileList.js

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

package/gulpfile.js

@@ -18,6 +18,7 @@ function generateApi(cb) {
         "./lib/components/XAutoCompleteBase",
         "./lib/components/XBrowse",
         "./lib/components/XButton",
+        "./lib/components/XButtonIconMedium",
         "./lib/components/XButtonIconNarrow",
         "./lib/components/XButtonIconSmall",
         "./lib/components/XCalendar",
@@ -29,6 +30,7 @@ function generateApi(cb) {
         "./lib/components/XErrors",
         "./lib/components/XFieldChangeEvent",
         "./lib/components/XFormBase",
+        "./lib/components/XFormBaseModif",
         "./lib/components/XFormBaseT",
         "./lib/components/XFormDataTable2",
         "./lib/components/XFormFooter",
@@ -37,6 +39,7 @@ function generateApi(cb) {
         "./lib/components/XInputDate",
         "./lib/components/XInputDecimal",
         "./lib/components/XInputDecimalBase",
+        "./lib/components/XInputFileList",
         "./lib/components/XInputText",
         "./lib/components/XInputTextarea",
         "./lib/components/XLazyDataTable",

package/lib/administration/XUserBrowse.js

@@ -47,7 +47,7 @@ var XUtils_1 = require("../components/XUtils");
 var XUserBrowse = function (props) {
     var onAddRow = function () {
         // openForm pridavame automaticky v XFormNavigator3 pri renderovani komponentu
-        props.openForm(react_1.default.createElement(XUserForm_1.XUserForm, { object: { enabled: true } }));
+        props.openForm(react_1.default.createElement(XUserForm_1.XUserForm, { object: { enabled: true, version: 0 } }));
     };
     var onEdit = function (selectedRow) {
         // openForm pridavame automaticky v XFormNavigator3 pri renderovani komponentu

package/lib/administration/XUserForm.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { FormProps, XFormBase } from "../components/XFormBase";
-export declare class XUserForm extends XFormBase {
+import { FormProps } from "../components/XFormBase";
+import { XFormBaseModif } from "../components/XFormBaseModif";
+export declare class XUserForm extends XFormBaseModif {
     constructor(props: FormProps);
     componentDidMount(): Promise<void>;
     onClickSave(): Promise<void>;

package/lib/administration/XUserForm.js

@@ -73,6 +73,8 @@ var XUtils_1 = require("../components/XUtils");
 var XFormFooter_1 = require("../components/XFormFooter");
 var XCheckbox_1 = require("../components/XCheckbox");
 var XEnvVars_1 = require("../components/XEnvVars");
+var XFormBaseModif_1 = require("../components/XFormBaseModif");
+var XInputDate_1 = require("../components/XInputDate");
 var XUserForm = /** @class */ (function (_super) {
     __extends(XUserForm, _super);
     function XUserForm(props) {
@@ -138,6 +140,7 @@ var XUserForm = /** @class */ (function (_super) {
                                 this.state.object.password = undefined;
                             }
                         }
+                        this.preSave(this.state.object);
                         _a.label = 1;
                     case 1:
                         _a.trys.push([1, 3, , 4]);
@@ -177,7 +180,9 @@ var XUserForm = /** @class */ (function (_super) {
                     react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "username", label: "Username", size: 30, labelStyle: { width: '14rem' }, readOnly: this.state.usernameEnabledReadOnly }),
                     react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "name", label: "Name", size: 30, labelStyle: { width: '14rem' } }),
                     react_1.default.createElement(XCheckbox_1.XCheckbox, { form: this, field: "enabled", label: "Enabled", labelStyle: { width: '14rem' }, readOnly: this.state.usernameEnabledReadOnly }),
-                    passwordElems)),
+                    passwordElems,
+                    react_1.default.createElement(XInputDate_1.XInputDate, { form: this, field: "modifDate", label: "Modified at", readOnly: true, labelStyle: { width: '14rem' } }),
+                    react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "modifXUser.name", label: "Modified by", size: 20, labelStyle: { width: '14rem' } }))),
             react_1.default.createElement(XFormFooter_1.XFormFooter, { form: this })));
     };
     XUserForm = __decorate([
@@ -185,5 +190,5 @@ var XUserForm = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object])
     ], XUserForm);
     return XUserForm;
-}(XFormBase_1.XFormBase));
+}(XFormBaseModif_1.XFormBaseModif));
 exports.XUserForm = XUserForm;

package/lib/components/XButtonIconMedium.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ButtonProps } from "primereact/button";
+import { IconType } from "primereact/utils";
+export declare const XButtonIconMedium: (props: {
+    icon: IconType<ButtonProps>;
+    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    disabled?: boolean | undefined;
+    tooltip?: any;
+}) => JSX.Element;

package/lib/components/XButtonIconMedium.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XButtonIconMedium = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("primereact/button");
+// button trochu mensi (priblizne 30px x 30px) od klasickeho Button, pri pouziti v datatable nastavuje v TD malicky padding (cez css) -> nezvecsuje vysku riadku
+var XButtonIconMedium = function (props) {
+    return (react_1.default.createElement(button_1.Button, { icon: props.icon, onClick: props.onClick, disabled: props.disabled, className: 'x-button-icon-medium p-button-sm', tooltip: props.tooltip }));
+};
+exports.XButtonIconMedium = XButtonIconMedium;

package/lib/components/XDropdown.d.ts

@@ -5,6 +5,7 @@ import { XObject } from "./XObject";
 export interface XDropdownProps extends XFormComponentProps<XObject> {
     assocField: string;
     displayField: string;
+    sortField?: string;
     filter?: XFilterProp;
 }
 export declare class XDropdown extends XFormComponent<XObject, XDropdownProps> {

package/lib/components/XDropdown.js

@@ -50,7 +50,7 @@ var XDropdown = /** @class */ (function (_super) {
         // planuje sa to riesit bud zavedenim cache pre options alebo vytiahnutim options na uroven XFormBase
         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(XDropdownForEntity_1.XDropdownForEntity, { id: this.props.assocField, entity: this.xAssoc.entityName, displayField: this.props.displayField, value: this.getValue(), onChange: function (value) { return _this.onValueChangeBase(value, _this.props.onChange); }, readOnly: this.isReadOnly(), isNotNull: this.isNotNull(), error: this.getError(), filter: this.getFilterBase(this.props.filter) })));
+            react_1.default.createElement(XDropdownForEntity_1.XDropdownForEntity, { id: this.props.assocField, entity: this.xAssoc.entityName, displayField: this.props.displayField, sortField: this.props.sortField, value: this.getValue(), onChange: function (value) { return _this.onValueChangeBase(value, _this.props.onChange); }, readOnly: this.isReadOnly(), isNotNull: this.isNotNull(), error: this.getError(), filter: this.getFilterBase(this.props.filter) })));
     };
     return XDropdown;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XDropdownForEntity.d.ts

@@ -5,6 +5,7 @@ export interface XDropdownForEntityProps {
     id?: string;
     entity: string;
     displayField: string;
+    sortField?: string;
     value: any | null;
     onChange: (value: any | null) => void;
     readOnly?: boolean;

package/lib/components/XDropdownForEntity.js

@@ -110,13 +110,14 @@ var XDropdownForEntity = /** @class */ (function (_super) {
         this.loadOptions();
     };
     XDropdownForEntity.prototype.loadOptions = function () {
+        var _a;
         return __awaiter(this, void 0, void 0, function () {
             var options;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.props.entity, this.props.filter, this.props.displayField)];
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.props.entity, this.props.filter, (_a = this.props.sortField) !== null && _a !== void 0 ? _a : this.props.displayField)];
                     case 1:
-                        options = _a.sent();
+                        options = _b.sent();
                         if (this.props.isNotNull === undefined || !this.props.isNotNull) {
                             // pridame prazdnu polozku
                             options.splice(0, 0, {}); // null polozka

package/lib/components/XFormBaseModif.d.ts

@@ -0,0 +1,5 @@
+import { XFormBase } from "./XFormBase";
+import { XObject } from "./XObject";
+export declare class XFormBaseModif extends XFormBase {
+    preSave(object: XObject): void;
+}

package/lib/components/XFormBaseModif.js

@@ -0,0 +1,33 @@
+"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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFormBaseModif = void 0;
+var XFormBase_1 = require("./XFormBase");
+var XUtils_1 = require("./XUtils");
+var XFormBaseModif = /** @class */ (function (_super) {
+    __extends(XFormBaseModif, _super);
+    function XFormBaseModif() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    XFormBaseModif.prototype.preSave = function (object) {
+        var _a;
+        object.modifDate = new Date();
+        object.modifXUser = (_a = XUtils_1.XUtils.getXToken()) === null || _a === void 0 ? void 0 : _a.xUser;
+    };
+    return XFormBaseModif;
+}(XFormBase_1.XFormBase));
+exports.XFormBaseModif = XFormBaseModif;

package/lib/components/XFormDataTable2.d.ts

@@ -24,12 +24,14 @@ export interface XFormDataTableProps {
     rows?: number;
     filterDisplay: "menu" | "row" | "none";
     sortable: boolean;
+    sortField?: string;
     scrollable: boolean;
     scrollWidth?: string;
     scrollHeight?: string;
     shrinkWidth: boolean;
     label?: string;
     readOnly?: boolean;
+    showAddRemoveButtons?: boolean;
     onClickAddRow?: () => void;
     onClickRemoveRow?: (row: any) => void;
     removeButtonInRow: boolean;
@@ -48,6 +50,7 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
         scrollWidth: string;
         scrollHeight: string;
         shrinkWidth: boolean;
+        showAddRemoveButtons: boolean;
         removeButtonInRow: boolean;
         addRowLabel: string;
         removeRowLabel: string;

package/lib/components/XFormDataTable2.js

@@ -612,7 +612,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             // }
             return react_1.default.createElement(column_1.Column, { field: field, header: header, filter: thisLocal.props.filterDisplay !== "none", sortable: thisLocal.props.sortable, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, headerStyle: headerStyle, align: align, body: function (rowData) { return thisLocal.bodyTemplate(childColumnProps, readOnly, rowData, xEntity); } });
         });
-        if (this.props.removeButtonInRow) {
+        if (this.props.showAddRemoveButtons && this.props.removeButtonInRow) {
             // je dolezite nastavit sirku header-a, lebo inac ma stlpec sirku 0 a nevidno ho
             columnElemList.push(react_1.default.createElement(column_1.Column, { key: "removeButton", headerStyle: { width: '2rem' }, body: function (rowData) { return react_1.default.createElement(XButtonIconNarrow_1.XButtonIconNarrow, { icon: "pi pi-times", onClick: function () { return _this.removeRow(rowData); }, disabled: readOnly, addMargin: false }); } }));
         }
@@ -620,10 +620,12 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             react_1.default.createElement("div", { className: "flex justify-content-center" },
                 react_1.default.createElement("label", null, label)),
             react_1.default.createElement("div", { className: "flex justify-content-center" },
-                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filterDisplay: filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
-            react_1.default.createElement("div", { className: "flex justify-content-center" },
-                react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: this.props.addRowLabel, onClick: this.onClickAddRow, disabled: readOnly }),
-                this.props.removeButtonInRow ? undefined : react_1.default.createElement(XButton_1.XButton, { icon: this.props.removeRowIcon, label: this.props.removeRowLabel, onClick: this.onClickRemoveRowBySelection, disabled: readOnly }))));
+                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filterDisplay: filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: this.props.sortField !== undefined ? [{ field: this.props.sortField, order: 1 }] : undefined, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
+            this.props.showAddRemoveButtons ?
+                react_1.default.createElement("div", { className: "flex justify-content-center" },
+                    react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: this.props.addRowLabel, onClick: this.onClickAddRow, disabled: readOnly }),
+                    this.props.removeButtonInRow ? undefined : react_1.default.createElement(XButton_1.XButton, { icon: this.props.removeRowIcon, label: this.props.removeRowLabel, onClick: this.onClickRemoveRowBySelection, disabled: readOnly }))
+                : undefined));
     };
     XFormDataTable2.defaultProps = {
         filterDisplay: "row",
@@ -633,6 +635,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         scrollHeight: '200vh',
         // tym ze pouzivame 200vh (max-height pre body), tak realne scrollovanie sa zapne az pri velmi vela riadkoch
         shrinkWidth: true,
+        showAddRemoveButtons: true,
         removeButtonInRow: false,
         addRowLabel: 'Add row',
         removeRowLabel: 'Remove row'

package/lib/components/XInputFileList.d.ts

@@ -0,0 +1,35 @@
+import { Component } from "react";
+import { FileUploadHandlerEvent } from "primereact/fileupload";
+import { XFormBase } from "./XFormBase";
+interface XFile {
+    id: number;
+    name: string;
+    size: number;
+    pathName?: string;
+}
+export interface XInputFileListProps {
+    form: XFormBase;
+    assocField: string;
+    label?: string;
+    chooseLabel?: string;
+    readOnly?: boolean;
+    saveDest: "fileSystem" | "database";
+    subdir?: string;
+}
+export declare class XInputFileList extends Component<XInputFileListProps> {
+    static defaultProps: {
+        chooseLabel: string;
+        saveDest: string;
+    };
+    fileUploadRef: any;
+    props: XInputFileListProps;
+    entity: string;
+    idField: string;
+    xFileField: string;
+    constructor(props: XInputFileListProps);
+    uploadHandler(event: FileUploadHandlerEvent): Promise<void>;
+    onDownloadFile(xFile: XFile): Promise<void>;
+    onRemoveFile(fileItem: any): Promise<void>;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/XInputFileList.js

@@ -0,0 +1,234 @@
+"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 __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 __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XInputFileList = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("react");
+var fileupload_1 = require("primereact/fileupload");
+var XUtilsMetadata_1 = require("./XUtilsMetadata");
+var XUtils_1 = require("./XUtils");
+var XButton_1 = require("./XButton");
+var XButtonIconNarrow_1 = require("./XButtonIconNarrow");
+var XInputFileList = /** @class */ (function (_super) {
+    __extends(XInputFileList, _super);
+    function XInputFileList(props) {
+        var _this = _super.call(this, props) || this;
+        _this.fileUploadRef = react_1.default.createRef();
+        _this.props = props;
+        var xEntityForm = XUtilsMetadata_1.XUtilsMetadata.getXEntity(props.form.getEntity());
+        var xAssocToMany = XUtilsMetadata_1.XUtilsMetadata.getXAssocToMany(xEntityForm, props.assocField);
+        _this.entity = xAssocToMany.entityName;
+        var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(_this.entity);
+        _this.idField = xEntity.idField;
+        _this.xFileField = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOneByAssocEntity(xEntity, 'XFile').name;
+        _this.onDownloadFile = _this.onDownloadFile.bind(_this);
+        _this.onRemoveFile = _this.onRemoveFile.bind(_this);
+        _this.uploadHandler = _this.uploadHandler.bind(_this);
+        var fieldFilename = "".concat(props.assocField, ".").concat(_this.xFileField, ".filename");
+        props.form.addField(fieldFilename);
+        return _this;
+    }
+    XInputFileList.prototype.uploadHandler = function (event) {
+        return __awaiter(this, void 0, void 0, function () {
+            var endpoint, _a, _b, file, xFile, e_1, newFileItem, e_2_1;
+            var e_2, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        endpoint = this.props.saveDest === 'fileSystem' ? 'x-upload-file-into-file-system' : 'x-upload-file-into-db';
+                        _d.label = 1;
+                    case 1:
+                        _d.trys.push([1, 9, 10, 11]);
+                        _a = __values(event.files), _b = _a.next();
+                        _d.label = 2;
+                    case 2:
+                        if (!!_b.done) return [3 /*break*/, 8];
+                        file = _b.value;
+                        xFile = void 0;
+                        _d.label = 3;
+                    case 3:
+                        _d.trys.push([3, 5, , 6]);
+                        return [4 /*yield*/, XUtils_1.XUtils.fetchFile(endpoint, { filename: file.name, subdir: this.props.subdir }, file)];
+                    case 4:
+                        xFile = _d.sent();
+                        return [3 /*break*/, 6];
+                    case 5:
+                        e_1 = _d.sent();
+                        XUtils_1.XUtils.showErrorMessage("Upload of file \"".concat(file.name, "\" failed."), e_1);
+                        this.fileUploadRef.current.clear(); // vyprazdnime hidden input, nech moze user znova zadat subory
+                        return [2 /*return*/]; // prerusime upload tohto a dalsich suborov
+                    case 6:
+                        newFileItem = {};
+                        newFileItem[this.xFileField] = xFile;
+                        this.props.form.onTableAddRow(this.props.assocField, newFileItem, this.idField);
+                        _d.label = 7;
+                    case 7:
+                        _b = _a.next();
+                        return [3 /*break*/, 2];
+                    case 8: return [3 /*break*/, 11];
+                    case 9:
+                        e_2_1 = _d.sent();
+                        e_2 = { error: e_2_1 };
+                        return [3 /*break*/, 11];
+                    case 10:
+                        try {
+                            if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                        return [7 /*endfinally*/];
+                    case 11:
+                        // vymaze zaznamy v event.files (hidden input type="file"), sposobi ze tlacitko "+Pridat" otvori dialog na vyber suborov
+                        this.fileUploadRef.current.clear();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    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("Download failed.", 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*/];
+                }
+            });
+        });
+    };
+    XInputFileList.prototype.onRemoveFile = function (fileItem) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                // poznamka: nemozme zmazat zaznam na backend-e, lebo ak user ukonci editaciu formulara tlacitkom Cancel (alebo odide uplne prec),
+                // tak musime mat v databaze zachovany povodny stav dat/suborov
+                this.props.form.onTableRemoveRow(this.props.assocField, fileItem);
+                return [2 /*return*/];
+            });
+        });
+    };
+    XInputFileList.prototype.render = function () {
+        var e_4, _a;
+        var _this = this;
+        var _b, _c;
+        var label = (_b = this.props.label) !== null && _b !== void 0 ? _b : this.props.assocField;
+        var readOnly = this.props.form.formReadOnlyBase(this.props.assocField) || ((_c = this.props.readOnly) !== null && _c !== void 0 ? _c : false);
+        var object = this.props.form.state.object;
+        var fileItemList = object !== null ? object[this.props.assocField] : [];
+        var elemList = [];
+        var _loop_1 = function (fileItem) {
+            var xFile = fileItem[this_1.xFileField];
+            // p-inputgroup uklada child elementy do riadku (display:flex)
+            // TODO - pouzit XButtonIconSmall pre button na mazanie - problem je ze tam nevieme (narychlo) dat class m-1
+            elemList.push(react_1.default.createElement("div", { key: fileItem[this_1.idField].toString(), className: "p-inputgroup p-mb-1" },
+                react_1.default.createElement(XButton_1.XButton, { label: xFile.name, onClick: function () { return _this.onDownloadFile(xFile); } }),
+                react_1.default.createElement(XButtonIconNarrow_1.XButtonIconNarrow, { icon: "pi pi-times", onClick: function () { return _this.onRemoveFile(fileItem); }, disabled: readOnly })));
+        };
+        var this_1 = this;
+        try {
+            for (var fileItemList_1 = __values(fileItemList), fileItemList_1_1 = fileItemList_1.next(); !fileItemList_1_1.done; fileItemList_1_1 = fileItemList_1.next()) {
+                var fileItem = fileItemList_1_1.value;
+                _loop_1(fileItem);
+            }
+        }
+        catch (e_4_1) { e_4 = { error: e_4_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; }
+        }
+        // vrchny div uklada child elementy pod seba (standardny display:block), zarovnane su dolava
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("label", null, label),
+            elemList,
+            react_1.default.createElement(fileupload_1.FileUpload, { ref: this.fileUploadRef, mode: "basic", multiple: true, auto: true, customUpload: true, uploadHandler: this.uploadHandler, chooseLabel: this.props.chooseLabel, className: "m-1", disabled: readOnly })));
+    };
+    XInputFileList.defaultProps = {
+        chooseLabel: "Add",
+        saveDest: "fileSystem"
+    };
+    return XInputFileList;
+}(react_2.Component));
+exports.XInputFileList = XInputFileList;

package/lib/components/XLazyDataTable.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactChild } from 'react';
-import { DataTableFilterMetaData, DataTableOperatorFilterMetaData } from 'primereact/datatable';
+import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData } from 'primereact/datatable';
 import { ColumnBodyOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
 import { SearchTableParams } from "./SearchTableParams";
 import { XAggregateType, XCustomFilter } from "../serverApi/FindParam";
@@ -32,8 +32,9 @@ export interface XLazyDataTableProps {
     removeRow?: ((selectedRow: any) => Promise<boolean>) | boolean;
     onRemoveRow?: XOnSaveOrCancelProp;
     appButtons?: any;
+    filters?: DataTableFilterMeta;
     customFilter?: XCustomFilter;
-    initSortField?: string;
+    sortField?: string;
     searchTableParams?: SearchTableParams;
     width?: string;
     dataLoadedState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
@@ -54,8 +55,14 @@ export declare const XLazyDataTable: {
         shrinkWidth: boolean;
     };
 };
+export type XGetFilterItem = (field: string) => DataTableFilterMetaData | DataTableOperatorFilterMetaData;
 export type XSetFilterItem = (field: string, filterItem: DataTableFilterMetaData | DataTableOperatorFilterMetaData) => void;
-export type XFilterElementProp = (setFilterItem: XSetFilterItem, options: ColumnFilterElementTemplateOptions) => React.ReactNode;
+export type XFilterElementParams = {
+    getFilterItem: XGetFilterItem;
+    setFilterItem: XSetFilterItem;
+    options: ColumnFilterElementTemplateOptions;
+};
+export type XFilterElementProp = (params: XFilterElementParams) => React.ReactNode;
 export interface XLazyColumnProps {
     field: string;
     header?: any;

package/lib/components/XLazyDataTable.js

@@ -204,6 +204,9 @@ var XLazyDataTable = function (props) {
     var _d = __read((0, react_1.useState)(0), 2), first = _d[0], setFirst = _d[1];
     var _e = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rows = _e[0], setRows = _e[1];
     var filtersInit = createInitFilters();
+    if (props.filters) {
+        filtersInit = __assign(__assign({}, filtersInit), props.filters); // items from props.filters will replace existing items in filtersInit
+    }
     if (props.searchTableParams !== undefined) {
         var displayFieldFilter = props.searchTableParams.displayFieldFilter;
         if (displayFieldFilter !== undefined) {
@@ -213,7 +216,7 @@ var XLazyDataTable = function (props) {
         customFilter = XUtils_1.XUtils.filterAnd(customFilter, props.searchTableParams.customFilter);
     }
     var _f = __read((0, react_1.useState)(filtersInit), 2), filters = _f[0], setFilters = _f[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
-    var _g = __read((0, react_1.useState)(props.initSortField ? [{ field: props.initSortField, order: 1 }] : []), 2), multiSortMeta = _g[0], setMultiSortMeta = _g[1];
+    var _g = __read((0, react_1.useState)(props.sortField ? [{ field: props.sortField, order: 1 }] : []), 2), multiSortMeta = _g[0], setMultiSortMeta = _g[1];
     var _h = __read((0, react_1.useState)(null), 2), selectedRow = _h[0], setSelectedRow = _h[1];
     var _j = __read((_a = props.dataLoadedState) !== null && _a !== void 0 ? _a : (0, react_1.useState)(false), 2), dataLoaded = _j[0], setDataLoaded = _j[1]; // priznak kde si zapiseme, ci uz sme nacitali data
     var _k = __read((0, react_1.useState)(false), 2), exportRowsDialogOpened = _k[0], setExportRowsDialogOpened = _k[1];
@@ -271,6 +274,11 @@ var XLazyDataTable = function (props) {
         //console.log("zavolany onClickFilter");
         loadData();
     };
+    var onClickClearFilter = function () {
+        // najjednoduchsi sposob - pomeni aj pripadne nastavene matchMode hodnoty
+        var filtersInit = createInitFilters();
+        setFilters(filtersInit);
+    };
     var loadData = function () {
         loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, customFilter: customFilter, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems });
     };
@@ -522,6 +530,10 @@ var XLazyDataTable = function (props) {
         var filtersCloned = __assign({}, filters);
         setFilters(filtersCloned);
     };
+    // vseobecna specialna metodka pouzvana pri custom filtri (XLazyColumn.filterElement)
+    var getFilterItem = function (field) {
+        return filters[field];
+    };
     // vseobecna metodka - nastavi hodnotu do filtra
     // ak je matchMode === undefined, tak zachova povodnu hodnotu matchMode
     var setFilterValue = function (field, value, matchMode) {
@@ -750,8 +762,8 @@ var XLazyDataTable = function (props) {
         var filterElement;
         if (childColumn.props.filterElement !== undefined) {
             filterElement = function (options) {
-                // compilator sa stazoval ze childColumn.props.filterElement muze byt undefined, preto som pridal "!"
-                return childColumn.props.filterElement(setFilterItem, options);
+                // compilator sa stazoval ze childColumn.props.filterElement moze byt undefined, preto som pridal "!"
+                return childColumn.props.filterElement({ getFilterItem: getFilterItem, setFilterItem: setFilterItem, options: options });
             };
         }
         else {
@@ -872,7 +884,8 @@ var XLazyDataTable = function (props) {
     });
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "flex justify-content-center" },
-            react_1.default.createElement(XButton_1.XButton, { label: "Filter", onClick: onClickFilter })),
+            react_1.default.createElement(XButton_1.XButton, { label: "Filter", onClick: onClickFilter }),
+            react_1.default.createElement(XButton_1.XButton, { label: "Clear filter", onClick: onClickClearFilter })),
         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, 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" },

package/lib/components/XUtils.js

@@ -501,8 +501,14 @@ var XUtils = /** @class */ (function () {
     XUtils.showErrorMessage = function (message, e) {
         var msg = message + XUtilsCommon_1.XUtilsCommon.newLine;
         if (e instanceof XResponseError_1.XResponseError) {
-            msg += e.message + XUtilsCommon_1.XUtilsCommon.newLine;
-            msg += JSON.stringify(e.xResponseErrorBody, null, 4);
+            // better error message for optimistic locking
+            if (e.xResponseErrorBody.exceptionName === 'OptimisticLockVersionMismatchError') {
+                msg += "The optimistic lock failed, someone else has changed the row during the editation. Sorry, you have to cancel the editation and start the editation again.";
+            }
+            else {
+                msg += e.message + XUtilsCommon_1.XUtilsCommon.newLine;
+                msg += JSON.stringify(e.xResponseErrorBody, null, 4);
+            }
         }
         else if (e instanceof Error) {
             msg += e.message;

package/lib/serverApi/XEntityMetadata.d.ts

@@ -28,5 +28,8 @@ export interface XAssoc {
     name: string;
     entityName: string;
     inverseAssocName?: string;
+    isCascadeInsert: boolean;
+    isCascadeUpdate: boolean;
+    isCascadeRemove: boolean;
     isNullable: boolean;
 }

package/package.json

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