@michalrakus/x-react-web-lib 1.37.3 → 1.38.1

package/lib/components/XFormBase.d.ts

@@ -1,4 +1,4 @@
-import { Component } from "react";
+import React, { Component } from "react";
 import { XObject } from "./XObject";
 import { OperationType } from "./XUtils";
 import { XFieldOnChange, XFormComponent } from "./XFormComponent";
@@ -7,19 +7,25 @@ import { XErrorMap, XErrors } from "./XErrors";
 import { XEntity } from "../serverApi/XEntityMetadata";
 export type XOnSaveOrCancelProp = (object: XObject | null, objectChange: OperationType) => void;
 export interface XFormProps {
+    ref?: React.Ref<XFormBase>;
     id?: number;
     initValues?: object;
     onSaveOrCancel?: XOnSaveOrCancelProp;
     isInDialog?: boolean;
 }
-export declare function Form(entity: string): <T extends new (...args: any[]) => {}>(constructor: T) => {
+export declare function Form(entity: string, pessimisticLocking?: boolean): <T extends new (...args: any[]) => {}>(constructor: T) => {
     new (...args: any[]): {
         entity: string;
+        pessimisticLocking: boolean;
     };
 } & T;
 export declare abstract class XFormBase extends Component<XFormProps> {
     entity?: string;
     xEntity: XEntity | undefined;
+    formDataChanged: boolean;
+    pessimisticLocking?: boolean;
+    rowLocked: boolean;
+    readOnly: boolean;
     fields: Set<string>;
     state: {
         object: XObject | null;
@@ -38,6 +44,7 @@ export declare abstract class XFormBase extends Component<XFormProps> {
     getEntity(): string;
     getXObject(): XObject;
     getObject(): any;
+    setFormDataChanged(formDataChanged: boolean): void;
     isAddRow(): boolean;
     isInDialog(): boolean;
     isTabViewUsed(): boolean;
@@ -63,6 +70,7 @@ export declare abstract class XFormBase extends Component<XFormProps> {
     onClickSave(): Promise<void>;
     onClickCancel(): void;
     openFormNull(): void;
+    cancelEdit(): boolean;
     validateSave(): Promise<boolean>;
     validateForm(): Promise<XErrorMap>;
     fieldValidation(): XErrorMap;
@@ -71,8 +79,10 @@ export declare abstract class XFormBase extends Component<XFormProps> {
     formReadOnly(object: XObject, field: string): boolean;
     createNewObject(): XObject;
     createNewObjectAsync(): Promise<XObject>;
+    loadObjectLegacy(id: number): Promise<XObject>;
     preInitForm(object: XObject, operationType: OperationType.Insert | OperationType.Update): void;
     validate(object: XObject): Promise<XErrors>;
     preSave(object: XObject): void;
     saveRow(): Promise<any>;
+    unlockRow(): Promise<void>;
 }

package/lib/components/XFormBase.js

@@ -94,11 +94,13 @@ var react_1 = require("react");
 var XUtils_1 = require("./XUtils");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
+var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
+var XLocale_1 = require("./XLocale");
 // class decorator ktory nastavuje property entity (dalo by sa to nastavovat v konstruktore ale decorator je menej ukecany)
 // ma sa pouzivat len na triedach odvodenych od XFormBase - obmedzenie som vsak nevedel nakodit
 // property sa nastavi az po zbehnuti konstruktora
 // pozor - decorator je vykopirovany do projektoveho suboru XLibItems.ts, lebo ked je umiestneny tu tak nefunguje pre class-y v projekte!
-function Form(entity) {
+function Form(entity, pessimisticLocking) {
     // sem (mozno) moze prist registracia formu-u
     return function (constructor) {
         return /** @class */ (function (_super) {
@@ -106,6 +108,7 @@ function Form(entity) {
             function class_1() {
                 var _this = _super !== null && _super.apply(this, arguments) || this;
                 _this.entity = entity;
+                _this.pessimisticLocking = pessimisticLocking !== null && pessimisticLocking !== void 0 ? pessimisticLocking : false;
                 return _this;
             }
             return class_1;
@@ -122,6 +125,10 @@ var XFormBase = /** @class */ (function (_super) {
             throw "Form cannot have both props id and initValues defined. Only one of them can be defined.";
         }
         //this.entity = props.entity; - nastavuje sa cez decorator @Form
+        //this.pessimisticLocking - nastavuje sa cez decorator @Form
+        _this.formDataChanged = false; // default
+        _this.rowLocked = false; // default
+        _this.readOnly = false; // default
         var object = null;
         // if (props.id === undefined) {
         //     // add row operation
@@ -155,15 +162,14 @@ var XFormBase = /** @class */ (function (_super) {
                     case 0:
                         //console.log("volany XFormBase.componentDidMount()");
                         // kontrola (musi byt tu, v konstruktore este property nie je nastavena)
-                        if (this.entity === undefined) {
+                        if (this.entity === undefined || this.pessimisticLocking === undefined) {
                             throw "XFormBase: Property entity is not defined - use decorator @Form.";
                         }
                         this.xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.entity);
                         if (!(this.props.id !== undefined)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, XUtils_1.XUtils.fetchById(this.entity, Array.from(this.fields), this.props.id)];
+                        return [4 /*yield*/, this.loadObjectLegacy(this.props.id)];
                     case 1:
                         //console.log('XFormBase.componentDidMount ide nacitat objekt');
-                        //console.log(this.fields);
                         object = _d.sent();
                         operationType = XUtils_1.OperationType.Update;
                         try {
@@ -223,6 +229,9 @@ var XFormBase = /** @class */ (function (_super) {
     XFormBase.prototype.getObject = function () {
         return this.getXObject();
     };
+    XFormBase.prototype.setFormDataChanged = function (formDataChanged) {
+        this.formDataChanged = formDataChanged;
+    };
     XFormBase.prototype.isAddRow = function () {
         // povodny kod
         //return this.props.id === undefined;
@@ -257,8 +266,8 @@ var XFormBase = /** @class */ (function (_super) {
         if (onChange) {
             onChange({ object: object, assocObjectChange: assocObjectChange });
         }
-        // TODO - tu mozno treba setnut funkciu - koli moznej asynchronicite
         this.setState({ object: object, errorMap: errorMap });
+        this.setFormDataChanged(true);
     };
     XFormBase.prototype.onTableFieldChange = function (rowData, field, value, error, onChange, assocObjectChange) {
         var object = this.getXObject();
@@ -270,8 +279,8 @@ var XFormBase = /** @class */ (function (_super) {
         if (onChange) {
             onChange({ object: object, tableRow: rowData, assocObjectChange: assocObjectChange });
         }
-        // TODO - tu mozno treba setnut funkciu - koli moznej asynchronicite
         this.setState({ object: object /*, errorMap: errorMap*/ });
+        this.setFormDataChanged(true);
     };
     /**
      * @deprecated - mal by sa pouzivat onTableFieldChange
@@ -319,8 +328,8 @@ var XFormBase = /** @class */ (function (_super) {
         else {
             rowList.push(newRow); // na koniec
         }
-        // TODO - tu mozno treba setnut funkciu - koli moznej asynchronicite
         this.setState({ object: object });
+        this.setFormDataChanged(true);
     };
     XFormBase.getNextRowId = function (rowList, dataKey) {
         var e_2, _a;
@@ -352,8 +361,8 @@ var XFormBase = /** @class */ (function (_super) {
             throw "Unexpected error - element 'row' not found in 'rowList'";
         }
         rowList.splice(index, 1);
-        // TODO - tu mozno treba setnut funkciu - koli moznej asynchronicite
         this.setState({ object: object });
+        this.setFormDataChanged(true);
     };
     XFormBase.getXRowTechData = function (row) {
         // ak este nemame rowTechData, tak ho vytvorime
@@ -458,12 +467,7 @@ var XFormBase = /** @class */ (function (_super) {
         });
     };
     XFormBase.prototype.onClickCancel = function () {
-        if (this.props.onSaveOrCancel !== undefined) {
-            this.props.onSaveOrCancel(null, XUtils_1.OperationType.None); // formular je zobrazeny v dialogu
-        }
-        else {
-            this.openFormNull();
-        }
+        this.cancelEdit();
     };
     XFormBase.prototype.openFormNull = function () {
         // deprecated functionality used when XFormNavigator (deprecated) used
@@ -478,6 +482,25 @@ var XFormBase = /** @class */ (function (_super) {
             console.log("Form has no onSaveOrCancel method declared.");
         }
     };
+    // API function called upon cancel of edit/show of the form
+    // also outer components call this function, e.g XFormDialog, (legacy XMenu in depaul project)
+    // returns false if cancel was stopped (not confirmed) by user
+    XFormBase.prototype.cancelEdit = function () {
+        // confirm cancel if data was changed
+        if (this.formDataChanged) {
+            if (!window.confirm((0, XLocale_1.xLocaleOption)('cancelEditConfirm'))) {
+                return false; // stops canceling editing, the form stays open (because this.props.onSaveOrCancel is not called)
+            }
+        }
+        this.unlockRow();
+        if (this.props.onSaveOrCancel !== undefined) {
+            this.props.onSaveOrCancel(null, XUtils_1.OperationType.None); // formular je zobrazeny v dialogu
+        }
+        else {
+            this.openFormNull();
+        }
+        return true;
+    };
     XFormBase.prototype.validateSave = function () {
         return __awaiter(this, void 0, void 0, function () {
             var xErrorMap, msg, _a, _b, xFormDataTable, _c, _d, assocToValidate, ok;
@@ -649,7 +672,7 @@ var XFormBase = /** @class */ (function (_super) {
     // (the purpose is to put the whole form to read only mode (maybe with exception a few fields))
     // if returns true for the param "field", then the field is read only, otherwise the property readOnly of the XInput* is processed
     XFormBase.prototype.formReadOnly = function (object, field) {
-        return false;
+        return this.readOnly;
     };
     // this method can be overriden in subclass if needed (to set some default values for insert)
     XFormBase.prototype.createNewObject = function () {
@@ -664,6 +687,45 @@ var XFormBase = /** @class */ (function (_super) {
             });
         });
     };
+    // this method can be overriden in subclass if needed (custom load object)
+    // legacy way of loading object
+    XFormBase.prototype.loadObjectLegacy = function (id) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var xFindRowByIdResponse, object, xFindRowByIdResponse_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        // in constructor, member pessimisticLocking is still not set, that's why here we add the "lockXUser.name"
+                        if (this.pessimisticLocking) {
+                            this.addField("lockXUser.name");
+                        }
+                        return [4 /*yield*/, XUtils_1.XUtils.fetchByIdWithLock(this.entity, Array.from(this.fields), id, this.pessimisticLocking)];
+                    case 1:
+                        xFindRowByIdResponse = _b.sent();
+                        object = xFindRowByIdResponse.row;
+                        if (!this.pessimisticLocking) return [3 /*break*/, 6];
+                        if (!!xFindRowByIdResponse.lockAcquired) return [3 /*break*/, 5];
+                        if (!window.confirm((0, XLocale_1.xLocaleOption)('pessimisticLockNotAcquired', { lockXUser: (_a = object.lockXUser) === null || _a === void 0 ? void 0 : _a.name, lockDate: (0, XUtilsConversions_1.datetimeAsUI)((0, XUtilsConversions_1.dateFromModel)(object.lockDate)) }))) return [3 /*break*/, 3];
+                        return [4 /*yield*/, XUtils_1.XUtils.fetchByIdWithLock(this.entity, Array.from(this.fields), id, this.pessimisticLocking, true)];
+                    case 2:
+                        xFindRowByIdResponse_1 = _b.sent();
+                        object = xFindRowByIdResponse_1.row;
+                        this.rowLocked = true;
+                        return [3 /*break*/, 4];
+                    case 3:
+                        // open form in read only mode
+                        this.readOnly = true;
+                        _b.label = 4;
+                    case 4: return [3 /*break*/, 6];
+                    case 5:
+                        this.rowLocked = true;
+                        _b.label = 6;
+                    case 6: return [2 /*return*/, object];
+                }
+            });
+        });
+    };
     // this method can be overriden in subclass if needed (to modify/save object after read from DB and before set into the form)
     XFormBase.prototype.preInitForm = function (object, operationType) {
     };
@@ -686,6 +748,30 @@ var XFormBase = /** @class */ (function (_super) {
             });
         });
     };
+    // this method can be overriden in subclass if needed (custom unlock row)
+    XFormBase.prototype.unlockRow = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var xUnlockRowRequest;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.rowLocked) return [3 /*break*/, 2];
+                        xUnlockRowRequest = {
+                            entity: this.getEntity(),
+                            id: this.state.object[this.xEntity.idField],
+                            lockDate: this.state.object.lockDate,
+                            lockXUser: this.state.object.lockXUser
+                        };
+                        return [4 /*yield*/, XUtils_1.XUtils.post('x-unlock-row', xUnlockRowRequest)];
+                    case 1:
+                        _a.sent();
+                        this.rowLocked = false;
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
     return XFormBase;
 }(react_1.Component));
 exports.XFormBase = XFormBase;

package/lib/components/XFormComponent.d.ts

@@ -10,6 +10,7 @@ export type XFilterProp = XCustomFilter | ((object: any) => XCustomFilter | unde
 export interface XFormComponentProps<T> {
     form: XFormBase;
     label?: string;
+    labelTooltip?: string;
     tooltip?: string;
     placeholder?: string;
     desc?: string;

package/lib/components/XFormDialog.js

@@ -1,22 +1,40 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormDialog = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var dialog_1 = require("primereact/dialog");
-var XUtils_1 = require("./XUtils");
 var XFormDialog = function (props) {
     var _a;
+    var xFormBaseRef = (0, react_1.useRef)(null);
     var onHide = function () {
-        if (props.dialogState.onSaveOrCancel) {
-            props.dialogState.onSaveOrCancel(null, XUtils_1.OperationType.None);
-        }
+        xFormBaseRef.current.cancelEdit();
     };
     var form = (_a = props.dialogState.form) !== null && _a !== void 0 ? _a : props.form;
     return (react_1.default.createElement(dialog_1.Dialog, { key: "dialog-form", className: "x-dialog-without-header", visible: props.dialogState.opened, onHide: onHide }, form ? react_1.default.cloneElement(form, {
-        id: props.dialogState.id, initValues: props.dialogState.initValues, onSaveOrCancel: props.dialogState.onSaveOrCancel, isInDialog: true
+        ref: xFormBaseRef, id: props.dialogState.id, initValues: props.dialogState.initValues, onSaveOrCancel: props.dialogState.onSaveOrCancel, isInDialog: true
     } /*, props.form.children*/) : null));
 };
 exports.XFormDialog = XFormDialog;

package/lib/components/XFormNavigator3.d.ts

@@ -1,15 +1,24 @@
-import React, { Component } from "react";
+import React, { Component, ReactElement, RefObject } from "react";
+interface XFormElement {
+    elem: ReactElement;
+    xElemRef: RefObject<unknown>;
+}
 export interface XFormNavigator3Props {
-    rootFormElement?: JSX.Element;
+    rootFormElement?: ReactElement;
 }
 /**
  * @deprecated use opening form in dialogs instead
  */
 export declare class XFormNavigator3 extends Component<XFormNavigator3Props> {
     state: {
-        formElements: JSX.Element[];
+        formElements: XFormElement[];
     };
+    xRootElemRef: RefObject<unknown>;
     constructor(props: XFormNavigator3Props);
-    openForm(newFormElement: JSX.Element | null): void;
+    openForm(newFormElement: ReactElement | null): void;
+    cancelFormEdit(): boolean;
+    isXFormBase(elem: ReactElement): boolean;
+    getAllFormElements(): XFormElement[];
     render(): React.JSX.Element;
 }
+export {};

package/lib/components/XFormNavigator3.js

@@ -37,6 +37,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -65,6 +76,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormNavigator3 = void 0;
 var react_1 = __importStar(require("react"));
+var XFormBase_1 = require("./XFormBase");
 /**
  * @deprecated use opening form in dialogs instead
  */
@@ -75,6 +87,7 @@ var XFormNavigator3 = /** @class */ (function (_super) {
         _this.state = {
             formElements: []
         };
+        _this.xRootElemRef = react_1.default.createRef();
         _this.openForm = _this.openForm.bind(_this);
         return _this;
     }
@@ -85,7 +98,7 @@ var XFormNavigator3 = /** @class */ (function (_super) {
         // shallow copy klonovanie (vytvara sa kopia referencii)
         var formElementsCloned = this.state.formElements.slice();
         if (newFormElement !== null) {
-            formElementsCloned.push(newFormElement);
+            formElementsCloned.push({ elem: newFormElement, xElemRef: react_1.default.createRef() });
         }
         else {
             // user stlacil cancel/back - vratime sa na predchadzajuci formular
@@ -111,13 +124,50 @@ var XFormNavigator3 = /** @class */ (function (_super) {
             }
         });
     };
+    // API function - returns false if cancel was stopped (not confirmed) by user
+    XFormNavigator3.prototype.cancelFormEdit = function () {
+        var e_1, _a;
+        var formElements = this.getAllFormElements();
+        try {
+            // slice makes a copy
+            for (var _b = __values(formElements.slice().reverse()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var formElement = _c.value;
+                if (this.isXFormBase(formElement.elem)) {
+                    if (!(formElement.xElemRef.current.cancelEdit())) {
+                        return false;
+                    }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return true;
+    };
+    XFormNavigator3.prototype.isXFormBase = function (elem) {
+        var type = elem.type;
+        // only class components have prototype.isReactComponent
+        return (typeof type === "function" &&
+            type.prototype &&
+            type.prototype.isReactComponent &&
+            type.prototype instanceof XFormBase_1.XFormBase);
+    };
+    // helper returning all elems including root elem
+    XFormNavigator3.prototype.getAllFormElements = function () {
+        // rootFormElement can be undefined at the start of app (no form displayed)
+        return this.props.rootFormElement ? __spreadArray([{ elem: this.props.rootFormElement, xElemRef: this.xRootElemRef }], __read(this.state.formElements), false) : this.state.formElements;
+    };
     XFormNavigator3.prototype.render = function () {
         var _this = this;
-        var formElements = this.props.rootFormElement ? __spreadArray([this.props.rootFormElement], __read(this.state.formElements), false) : this.state.formElements;
+        var formElements = this.getAllFormElements();
         var forms = formElements.map(function (formElement, index) {
             var displayed = (index === formElements.length - 1);
             // klonovanim elementu pridame atribut openForm={this.openForm} (nemusime tento atribut pridavat pri vytvarani elementu)
-            var formElementCloned = react_1.default.cloneElement(formElement, { openForm: _this.openForm, displayed: displayed } /*, (formElement as any).children*/);
+            var formElementCloned = react_1.default.cloneElement(formElement.elem, { ref: formElement.xElemRef, openForm: _this.openForm, displayed: displayed } /*, (formElement as any).children*/);
             // prvych n - 1 komponentov skryjeme cez display: "none" a az posledny vyrenderujeme naozaj (cez display: "block")
             // TODO - do buducnosti - ak nechceme drzat stav componentu cez display: "none", staci vratit null (komponent vobec nevyrenderujeme)
             var display = (displayed ? "block" : "none");

package/lib/components/XInput.d.ts

@@ -11,4 +11,9 @@ export declare abstract class XInput<T, P extends XInputProps<T>> extends XFormC
     protected constructor(props: P);
     getField(): string;
     isNotNull(): boolean;
+    getTooltipsAndLabelElemId(field: string, label: string | undefined, value: string | null, labelTooltip: string | undefined, inputTooltip: string | undefined, desc: string | undefined): {
+        labelTooltip: string | undefined;
+        labelElemId: string | undefined;
+        inputTooltip: string | undefined;
+    };
 }

package/lib/components/XInput.js

@@ -33,6 +33,25 @@ var XInput = /** @class */ (function (_super) {
     XInput.prototype.isNotNull = function () {
         return !this.xField.isNullable;
     };
+    XInput.prototype.getTooltipsAndLabelElemId = function (field, label, value, labelTooltip, inputTooltip, desc) {
+        if (value !== null) {
+            // nevidno placeholder, skusime ho umiestnit do tooltip-u
+            if (label !== undefined && labelTooltip === undefined) {
+                labelTooltip = desc;
+            }
+            else {
+                // nemame label alebo labelTooltip je obsadeny -> dame pripadny desc ako tooltip na input
+                if (inputTooltip === undefined) {
+                    inputTooltip = desc;
+                }
+            }
+        }
+        var labelElemId = undefined;
+        if (labelTooltip) {
+            labelElemId = "".concat(field, "_label_id").replaceAll(".", "_"); // dots must be replaced, otherwise the selector does not work
+        }
+        return { labelTooltip: labelTooltip, labelElemId: labelElemId, inputTooltip: inputTooltip };
+    };
     return XInput;
 }(XFormComponent_1.XFormComponent));
 exports.XInput = XInput;

package/lib/components/XInputText.js

@@ -61,29 +61,14 @@ var XInputText = /** @class */ (function (_super) {
     XInputText.prototype.render = function () {
         var _a, _b;
         var label = this.getLabel();
-        var value = this.getValue();
-        var labelTooltip = undefined;
-        var labelElemId = undefined;
-        var inputTooltip = this.props.tooltip;
-        if (value) {
-            // nevidno placeholder, tak zobrazime desc ako label tooltip (ak mam label)
-            if (label !== undefined) {
-                labelTooltip = this.props.desc;
-                labelElemId = "".concat(this.props.field, "_label_id");
-            }
-            else {
-                // nemame label, dame pripadny desc ako tooltip na input
-                if (inputTooltip === undefined) {
-                    inputTooltip = this.props.desc;
-                }
-            }
-        }
+        var value = this.getValueFromObject(); // we do not use this.getValue(), because this.getValue() returns "" if the value is null
+        var _c = this.getTooltipsAndLabelElemId(this.props.field, label, value, this.props.labelTooltip, this.props.tooltip, this.props.desc), labelTooltip = _c.labelTooltip, labelElemId = _c.labelElemId, inputTooltip = _c.inputTooltip;
         var size = (_a = this.props.size) !== null && _a !== void 0 ? _a : this.xField.length;
         // note: style overrides size (width of the input according to character count)
         return (react_1.default.createElement("div", { className: "field grid" },
             label !== undefined ? react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
             labelTooltip ? react_1.default.createElement(tooltip_1.Tooltip, { target: "#".concat(labelElemId), content: labelTooltip }) : null,
-            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: value, onChange: this.onValueChange, onBlur: this.onBlur, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, XUtils_1.XUtils.createTooltipOrErrorProps(this.getError(), inputTooltip), { placeholder: (_b = this.props.placeholder) !== null && _b !== void 0 ? _b : this.props.desc }))));
+            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, onBlur: this.onBlur, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, XUtils_1.XUtils.createTooltipOrErrorProps(this.getError(), inputTooltip), { placeholder: (_b = this.props.placeholder) !== null && _b !== void 0 ? _b : this.props.desc }))));
     };
     return XInputText;
 }(XInput_1.XInput));

package/lib/components/XInputTextarea.js

@@ -55,10 +55,11 @@ var XInputTextarea = exports.XInputTextarea = /** @class */ (function (_super) {
         }
     };
     XInputTextarea.prototype.render = function () {
-        var _a, _b;
+        var _a;
+        var _b, _c;
         var fieldStyle = this.props.fieldStyle;
         var labelStyle = this.getLabelStyle();
-        var inputStyle = (_a = this.props.inputStyle) !== null && _a !== void 0 ? _a : {};
+        var inputStyle = (_b = this.props.inputStyle) !== null && _b !== void 0 ? _b : {};
         var cols;
         if (this.props.cols === "full") {
             cols = undefined;
@@ -86,20 +87,15 @@ var XInputTextarea = exports.XInputTextarea = /** @class */ (function (_super) {
             // aj tak sa asi vzdy bude pouzivat "full"
             cols = this.props.cols;
         }
+        var label = this.getLabel();
         var value = this.getValue();
-        var labelTooltip = undefined;
-        var labelElemId = undefined;
-        if (value !== null) {
-            // nevidno placeholder, tak zobrazime desc ako label tooltip
-            labelTooltip = this.props.desc;
-            labelElemId = "".concat(this.props.field, "_label_id");
-        }
+        var labelTooltip = (_a = this.getTooltipsAndLabelElemId(this.props.field, label, value, this.props.labelTooltip, this.props.tooltip, this.props.desc), _a.labelTooltip), labelElemId = _a.labelElemId, inputTooltip = _a.inputTooltip;
         // InputTextarea renderujeme az ked mame nacitany object, lebo inac pri autoResize sa nam nenastavi spravna velkost (hodnota nie je k dispozicii pri prvom renderingu)
         return (react_1.default.createElement("div", { className: !this.labelOnTop ? 'field grid' : 'field grid x-inputtextarea-label-on-top', style: fieldStyle },
-            react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: !this.labelOnTop ? 'col-fixed' : undefined, style: labelStyle }, this.getLabel()),
+            label !== undefined ? react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: !this.labelOnTop ? 'col-fixed' : undefined, style: labelStyle }, label) : null,
             labelTooltip ? react_1.default.createElement(tooltip_1.Tooltip, { target: "#".concat(labelElemId), content: labelTooltip }) : null,
             this.props.form.state.object ?
-                react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { ref: this.xInputTextareaBaseRef, id: this.props.field, value: value, onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, className: this.props.inputClassName, rows: this.props.rows, cols: cols, autoResize: this.props.autoResize, error: this.getError(), tooltip: this.props.tooltip, placeholder: (_b = this.props.placeholder) !== null && _b !== void 0 ? _b : this.props.desc })
+                react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { ref: this.xInputTextareaBaseRef, id: this.props.field, value: value, onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, className: this.props.inputClassName, rows: this.props.rows, cols: cols, autoResize: this.props.autoResize, error: this.getError(), tooltip: inputTooltip, placeholder: (_c = this.props.placeholder) !== null && _c !== void 0 ? _c : this.props.desc })
                 : null));
     };
     XInputTextarea.defaultProps = {

package/lib/components/XLocale.d.ts

@@ -1,4 +1,5 @@
 export interface XLocaleOptions {
+    searchInAllFields?: string;
     filter?: string;
     resetTable?: string;
     addRow?: string;
@@ -12,6 +13,9 @@ export interface XLocaleOptions {
     removeRowFailed?: string;
     save?: string;
     cancel?: string;
+    optimisticLockFailed?: string;
+    formRemoveRowConfirm?: string;
+    xAutoComplete?: string;
     expRowCount?: string;
     expExportType?: string;
     expCreateHeaderLine?: string;

package/lib/components/XUtils.d.ts

@@ -10,6 +10,7 @@ import { XTableFieldReadOnlyProp } from "./XFormDataTable2";
 import { SelectItem } from "primereact/selectitem";
 import { XLazyDataTableRef } from "./XLazyDataTable/XLazyDataTable";
 import { XOnSaveOrCancelProp } from "./XFormBase";
+import { XFindRowByIdResponse } from "../serverApi/x-lib-api";
 export declare enum OperationType {
     None = 0,
     Insert = 1,
@@ -82,6 +83,8 @@ export declare class XUtils {
     static fetchBasicAuthBasic(path: string, headers: any, body: any, usePublicToken?: boolean | XToken): Promise<Response>;
     static fetchBasic(path: string, headers: any, body: any, usePublicToken?: boolean | XToken): Promise<Response>;
     static fetchById(entity: string, fields: string[], id: number): Promise<any>;
+    static fetchByIdWithLock(entity: string, fields: string[], id: number, lockRow: boolean, overwriteLock?: boolean): Promise<XFindRowByIdResponse>;
+    static fetchByIdWithLockBase(path: string, entity: string, fields: string[], id: number, lockRow: boolean, overwriteLock?: boolean): Promise<XFindRowByIdResponse>;
     static setXToken(xToken: XToken | null): void;
     static getXToken(): XToken | null;
     static getAccessToken(): Promise<string>;
@@ -93,6 +96,7 @@ export declare class XUtils {
      * @param envVar
      */
     static getEnvVarValue(envVarEnum: XEnvVar): string;
+    static getEnvVarValueBase(envVarEnum: string): string;
     static removeRow(entity: string, row: any): Promise<void>;
     static isReadOnly(path: string, readOnlyInit?: boolean): boolean;
     static isReadOnlyTableField(path: string | undefined, readOnly: XTableFieldReadOnlyProp | undefined, object: XObject | null, tableRow: any): boolean;

package/lib/components/XUtils.js

@@ -461,7 +461,29 @@ var XUtils = exports.XUtils = /** @class */ (function () {
         });
     };
     XUtils.fetchById = function (entity, fields, id) {
-        return XUtils.fetchOne('findRowById', { entity: entity, fields: fields, id: id });
+        return __awaiter(this, void 0, void 0, function () {
+            var response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, XUtils.fetchByIdWithLock(entity, fields, id, false)];
+                    case 1:
+                        response = _a.sent();
+                        return [2 /*return*/, response.row];
+                }
+            });
+        });
+    };
+    // more general function - can also lock the row
+    XUtils.fetchByIdWithLock = function (entity, fields, id, lockRow, overwriteLock) {
+        return XUtils.fetchByIdWithLockBase('x-find-row-by-id', entity, fields, id, lockRow, overwriteLock);
+    };
+    XUtils.fetchByIdWithLockBase = function (path, entity, fields, id, lockRow, overwriteLock) {
+        var _a;
+        var request = { entity: entity, fields: fields, id: id };
+        if (lockRow) {
+            request = __assign(__assign({}, request), { lockDate: new Date(), lockXUser: (_a = XUtils.getXToken()) === null || _a === void 0 ? void 0 : _a.xUser, overwriteLock: overwriteLock !== null && overwriteLock !== void 0 ? overwriteLock : false });
+        }
+        return XUtils.fetchOne(path, request);
     };
     XUtils.setXToken = function (xToken) {
         XUtils.xToken = xToken;
@@ -515,6 +537,9 @@ var XUtils = exports.XUtils = /** @class */ (function () {
      * @param envVar
      */
     XUtils.getEnvVarValue = function (envVarEnum) {
+        return XUtils.getEnvVarValueBase(envVarEnum);
+    };
+    XUtils.getEnvVarValueBase = function (envVarEnum) {
         var value = process.env[envVarEnum];
         if (value === undefined) {
             throw "Environment variable ".concat(envVarEnum, " - value not found. Check configuration file .env*");
@@ -591,7 +616,7 @@ var XUtils = exports.XUtils = /** @class */ (function () {
             }
             else if (e.xResponseErrorBody.exceptionName === 'OptimisticLockVersionMismatchError') {
                 // better error message for optimistic locking
-                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.";
+                msg += (0, XLocale_1.xLocaleOption)('optimisticLockFailed');
             }
             else {
                 msg += e.message + XUtilsCommon_1.XUtilsCommon.newLine;

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

@@ -16,6 +16,9 @@
         "ok": "Ok",
         "save": "Save",
         "cancel": "Cancel",
+        "cancelEditConfirm": "Are you sure to cancel editing? All changes will be lost.",
+        "pessimisticLockNotAcquired": "The row is being edited by the user {lockXUser} from {lockDate}\nDo you still want to edit the row? (The choice Cancel will open the form in read only mode).",
+        "optimisticLockFailed": "Someone else has changed the row during the editation. Sorry, you have to cancel the editation and start the editation again.",
         "formRemoveRowConfirm": "Are you sure to remove the row?",
         "xAutoComplete": "Autocomplete",
         "expRowCount": "Row count",

package/lib/serverApi/XUtilsCommon.d.ts

@@ -37,6 +37,8 @@ export declare class XUtilsCommon {
      * @param idField
      */
     static arrayIntersect<T>(array1: T[], array2: T[], idField: string): T[];
+    static numberArraySymmetricDiff(idListA: number[], idListB: number[]): number[];
+    static numberArrayUnion(idListA: number[], idListB: number[]): number[];
     static createCustomFilter(filter: string | undefined | null): XCustomFilterItem | undefined;
     static createCustomFilterItems(customFilter: XCustomFilter | undefined): XCustomFilterItem[] | undefined;
     static createMultiSortMeta(sortField: string | DataTableSortMeta[] | undefined): DataTableSortMeta[] | undefined;

package/lib/serverApi/XUtilsCommon.js

@@ -369,6 +369,47 @@ var XUtilsCommon = exports.XUtilsCommon = /** @class */ (function () {
         }
         return array1.filter(function (item) { return item && array2IdSet.has(item[idField]); });
     };
+    // returns ids that are in idListA or in idListB but not in both lists
+    XUtilsCommon.numberArraySymmetricDiff = function (idListA, idListB) {
+        var e_6, _a, e_7, _b;
+        var setA = new Set(idListA);
+        var setB = new Set(idListB);
+        var result = [];
+        try {
+            for (var setA_1 = __values(setA), setA_1_1 = setA_1.next(); !setA_1_1.done; setA_1_1 = setA_1.next()) {
+                var id = setA_1_1.value;
+                if (!setB.has(id)) {
+                    result.push(id);
+                }
+            }
+        }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        finally {
+            try {
+                if (setA_1_1 && !setA_1_1.done && (_a = setA_1.return)) _a.call(setA_1);
+            }
+            finally { if (e_6) throw e_6.error; }
+        }
+        try {
+            for (var setB_1 = __values(setB), setB_1_1 = setB_1.next(); !setB_1_1.done; setB_1_1 = setB_1.next()) {
+                var id = setB_1_1.value;
+                if (!setA.has(id)) {
+                    result.push(id);
+                }
+            }
+        }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        finally {
+            try {
+                if (setB_1_1 && !setB_1_1.done && (_b = setB_1.return)) _b.call(setB_1);
+            }
+            finally { if (e_7) throw e_7.error; }
+        }
+        return result;
+    };
+    XUtilsCommon.numberArrayUnion = function (idListA, idListB) {
+        return Array.from(new Set(__spreadArray(__spreadArray([], __read(idListA), false), __read(idListB), false))); // new Set(...) removes duplicates automatically
+    };
     // ************* XCustomFilter/XCustomFilterItem/DataTableSortMeta **************
     // pomocna metodka - aby sme nemuseli v kode vypisovat {where: <filter>, params: {}}
     XUtilsCommon.createCustomFilter = function (filter) {
@@ -415,7 +456,7 @@ var XUtilsCommon = exports.XUtilsCommon = /** @class */ (function () {
     };
     // pomocna metodka
     XUtilsCommon.filterAnd = function () {
-        var e_6, _a;
+        var e_8, _a;
         var filters = [];
         for (var _i = 0; _i < arguments.length; _i++) {
             filters[_i] = arguments[_i];
@@ -432,12 +473,12 @@ var XUtilsCommon = exports.XUtilsCommon = /** @class */ (function () {
                     }
                 }
             }
-            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
             finally {
                 try {
                     if (filters_1_1 && !filters_1_1.done && (_a = filters_1.return)) _a.call(filters_1);
                 }
-                finally { if (e_6) throw e_6.error; }
+                finally { if (e_8) throw e_8.error; }
             }
         }
         return customFilterItemsResult;

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

@@ -10,3 +10,27 @@ export interface XtRunDocTemplateRequest {
     rowId: number;
     xUser?: XUser;
 }
+export interface XFindRowByIdRequest {
+    entity: string;
+    fields: string[];
+    id: number;
+    lockDate?: Date;
+    lockXUser?: XUser;
+    overwriteLock?: boolean;
+}
+export interface XFindRowByIdResponse {
+    row: any;
+    lockAcquired?: boolean;
+}
+export interface XUnlockRowRequest {
+    entity: string;
+    id: number;
+    lockDate: Date;
+    lockXUser: XUser;
+}
+export interface XLockRowRequest {
+    entity: string;
+    id: number;
+    lockDate: Date;
+    lockXUser: XUser;
+}

package/package.json

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