@michalrakus/x-react-web-lib 1.18.0 → 1.19.0

package/lib/components/XAutoComplete.d.ts

@@ -2,37 +2,37 @@ import React from "react";
 import { XFilterProp, XFormComponent, XFormComponentProps } from "./XFormComponent";
 import { XAssoc } from "../serverApi/XEntityMetadata";
 import { OperationType } from "./XUtils";
+import { XSuggestionsLoadProp } from "./XAutoCompleteBase";
 import { XError } from "./XErrors";
 import { XObject } from "./XObject";
 import { DataTableSortMeta } from "primereact/datatable";
 export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     assocField: string;
-    displayField: string;
+    displayField: string | string[];
     searchBrowse?: JSX.Element;
     assocForm?: JSX.Element;
+    suggestions?: any[];
+    suggestionsLoad?: XSuggestionsLoadProp;
+    lazyLoadMaxRows?: number;
+    splitQueryValue?: boolean;
+    minLength?: number;
     filter?: XFilterProp;
     sortField?: string | DataTableSortMeta[];
     fields?: string[];
-    suggestions?: any[];
-    lazy?: boolean;
     width?: string;
+    scrollHeight?: string;
     inputStyle?: React.CSSProperties;
 }
 export declare class XAutoComplete extends XFormComponent<XObject, XAutoCompleteProps> {
     protected xAssoc: XAssoc;
     protected errorInBase: string | undefined;
-    state: {
-        suggestions: any[];
-    };
     constructor(props: XAutoCompleteProps);
-    componentDidMount(): void;
-    readAndSetSuggestions(setStateCallback?: () => void): Promise<void>;
     getField(): string;
     isNotNull(): boolean;
+    getFirstDisplayField(): string;
     getValue(): any | null;
     onChangeAutoCompleteBase(object: any, objectChange: OperationType): void;
     onErrorChangeAutoCompleteBase(error: string | undefined): void;
-    onSearchStart(finishSearchStart?: () => void): void;
     validate(): {
         field: string;
         xError: XError;

package/lib/components/XAutoComplete.js

@@ -14,42 +14,6 @@ var __extends = (this && this.__extends) || (function () {
         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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -57,7 +21,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.XAutoComplete = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormComponent_1 = require("./XFormComponent");
-var XUtils_1 = require("./XUtils");
 var XAutoCompleteBase_1 = require("./XAutoCompleteBase");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
 var XAutoComplete = /** @class */ (function (_super) {
@@ -66,65 +29,32 @@ var XAutoComplete = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOne(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.form.getEntity()), props.assocField);
         _this.errorInBase = undefined;
-        _this.state = {
-            suggestions: []
-        };
         _this.onChangeAutoCompleteBase = _this.onChangeAutoCompleteBase.bind(_this);
         _this.onErrorChangeAutoCompleteBase = _this.onErrorChangeAutoCompleteBase.bind(_this);
-        _this.onSearchStart = _this.onSearchStart.bind(_this);
-        props.form.addField(props.assocField + '.' + props.displayField);
+        props.form.addField(props.assocField + '.' + _this.getFirstDisplayField());
         return _this;
     }
-    XAutoComplete.prototype.componentDidMount = function () {
-        //console.log("volany XAutoComplete.componentDidMount()");
-        if (!this.props.lazy) {
-            this.readAndSetSuggestions();
-        }
-    };
-    XAutoComplete.prototype.readAndSetSuggestions = function (setStateCallback) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function () {
-            var suggestions;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!(this.props.suggestions === undefined)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.xAssoc.entityName, this.getFilterBase(this.props.filter), (_a = this.props.sortField) !== null && _a !== void 0 ? _a : this.props.displayField, this.props.fields)];
-                    case 1:
-                        suggestions = _b.sent();
-                        this.setState({ suggestions: suggestions }, setStateCallback);
-                        _b.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        });
-    };
+    // componentDidMount() {
+    // }
     XAutoComplete.prototype.getField = function () {
         return this.props.assocField;
     };
     XAutoComplete.prototype.isNotNull = function () {
         return !this.xAssoc.isNullable;
     };
+    XAutoComplete.prototype.getFirstDisplayField = function () {
+        return Array.isArray(this.props.displayField) ? this.props.displayField[0] : this.props.displayField;
+    };
     XAutoComplete.prototype.getValue = function () {
         var assocObject = this.getValueFromObject();
         return assocObject;
     };
     XAutoComplete.prototype.onChangeAutoCompleteBase = function (object, objectChange) {
         this.onValueChangeBase(object, this.props.onChange, objectChange);
-        if (objectChange !== XUtils_1.OperationType.None) {
-            // zmenil sa zaznam dobrovolnika v DB
-            // zatial len refreshneme z DB
-            // ak by bol reqest pomaly, mozme pri inserte (nove id) / update (existujuce id) upravit zoznam a usetrime tym request do DB
-            // ak bol delete (dobrovolnik === null), treba urobit refresh do DB (alebo si poslat id-cko zmazaneho zaznamu)
-            this.readAndSetSuggestions();
-        }
     };
     XAutoComplete.prototype.onErrorChangeAutoCompleteBase = function (error) {
         this.errorInBase = error; // odlozime si error
     };
-    XAutoComplete.prototype.onSearchStart = function (finishSearchStart) {
-        this.readAndSetSuggestions(finishSearchStart);
-    };
     // overrides method in XFormComponent
     XAutoComplete.prototype.validate = function () {
         if (this.errorInBase) {
@@ -136,12 +66,11 @@ var XAutoComplete = /** @class */ (function (_super) {
     };
     XAutoComplete.prototype.render = function () {
         var _this = this;
-        var _a;
         var xEntityAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.xAssoc.entityName);
         // 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(), suggestions: (_a = this.props.suggestions) !== null && _a !== void 0 ? _a : this.state.suggestions, onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, width: this.props.width, customFilterFunction: function () { return _this.getFilterBase(_this.props.filter); }, onSearchStart: this.props.lazy ? this.onSearchStart : undefined })));
+            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, 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 } })));
     };
     return XAutoComplete;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XAutoCompleteBase.d.ts

@@ -4,41 +4,69 @@ import { OperationType } from "./XUtils";
 import { MenuItem } from "primereact/menuitem";
 import { XSearchBrowseParams } from "./XSearchBrowseParams";
 import { XCustomFilter } from "../serverApi/FindParam";
+import { DataTableSortMeta } from "primereact/datatable";
+export type XSuggestionsLoadProp = "eager" | "onSearchStart" | "lazy";
+export type XSuggestionsLoadType = "suggestions" | XSuggestionsLoadProp;
+export type XFilterOrFunction = XCustomFilter | (() => XCustomFilter | undefined);
+export interface XQuery {
+    entity: string;
+    filter?: XFilterOrFunction;
+    sortField?: string | DataTableSortMeta[];
+    fields?: string[];
+}
 export interface XAutoCompleteBaseProps {
     value: any;
-    suggestions: any[];
     onChange: (object: any, objectChange: OperationType) => void;
-    field: string;
+    suggestions?: any[];
+    suggestionsLoad?: XSuggestionsLoadProp;
+    suggestionsQuery?: XQuery;
+    lazyLoadMaxRows: number;
+    field: string | string[];
+    splitQueryValue: boolean;
     searchBrowse?: JSX.Element;
     valueForm?: JSX.Element;
     idField?: string;
-    maxLength?: number;
+    minLength?: number;
     width?: string;
+    scrollHeight?: string;
     readOnly?: boolean;
     error?: string;
     onErrorChange: (error: string | undefined) => void;
     setFocusOnCreate?: boolean;
-    customFilterFunction?: () => XCustomFilter | undefined;
-    onSearchStart?: (finishSearchStart?: () => void) => void;
 }
 export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps> {
+    private static valueMoreSuggestions;
+    static defaultProps: {
+        lazyLoadMaxRows: number;
+        splitQueryValue: boolean;
+        minLength: number;
+        scrollHeight: string;
+    };
     autoCompleteRef: any;
     state: {
         inputChanged: boolean;
         inputValueState: string | undefined;
         notValid: boolean;
+        suggestions: any[] | undefined;
         filteredSuggestions: any[] | undefined;
         formDialogOpened: boolean;
         searchDialogOpened: boolean;
     };
-    wasSearchStartCalled: boolean;
+    suggestionsLoadedForOSS: boolean;
+    wasOnChangeCalled: boolean;
     formDialogObjectId: number | undefined;
     formDialogInitValuesForInsert: any | undefined;
     constructor(props: XAutoCompleteBaseProps);
+    getXSuggestionsLoadType(): XSuggestionsLoadType;
+    getFields(): string[];
+    getFirstField(): string;
     componentDidMount(): void;
+    loadSuggestions(): Promise<void>;
+    fetchSuggestions(): Promise<any[]>;
+    getSortField(): string | DataTableSortMeta[] | undefined;
     completeMethod(event: {
         query: string;
-    }): void;
+    }): Promise<void>;
     onChange(e: AutoCompleteChangeEvent): void;
     onSelect(e: any): void;
     onBlur(e: React.FocusEvent<HTMLInputElement>): void;
@@ -56,6 +84,9 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     openDropdown(e: any): void;
     onEditAssocValue(): void;
     computeInputValue(): any;
+    itemTemplate(suggestion: any, index: number): React.ReactNode;
+    computeDisplayValue(suggestion: any): string;
+    static isMoreSuggestions(suggestion: any): boolean;
     createSearchBrowseParams(): XSearchBrowseParams;
     render(): JSX.Element;
 }

package/lib/components/XAutoCompleteBase.js

@@ -48,6 +48,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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;
@@ -73,6 +109,17 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+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.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XAutoCompleteBase = void 0;
 var react_1 = __importStar(require("react"));
@@ -81,6 +128,7 @@ var splitbutton_1 = require("primereact/splitbutton");
 var dialog_1 = require("primereact/dialog");
 var XUtils_1 = require("./XUtils");
 var button_1 = require("primereact/button");
+var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XAutoCompleteBase = /** @class */ (function (_super) {
     __extends(XAutoCompleteBase, _super);
     function XAutoCompleteBase(props) {
@@ -90,63 +138,226 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             inputChanged: false,
             inputValueState: undefined,
             notValid: false,
+            suggestions: undefined,
             filteredSuggestions: undefined,
             formDialogOpened: false,
             searchDialogOpened: false
         };
-        _this.wasSearchStartCalled = false;
+        _this.suggestionsLoadedForOSS = false;
+        _this.wasOnChangeCalled = false;
         _this.completeMethod = _this.completeMethod.bind(_this);
         _this.onChange = _this.onChange.bind(_this);
         _this.onSelect = _this.onSelect.bind(_this);
         _this.onBlur = _this.onBlur.bind(_this);
+        _this.itemTemplate = _this.itemTemplate.bind(_this);
+        _this.computeDisplayValue = _this.computeDisplayValue.bind(_this);
         _this.formDialogOnSaveOrCancel = _this.formDialogOnSaveOrCancel.bind(_this);
         _this.formDialogOnHide = _this.formDialogOnHide.bind(_this);
         _this.searchDialogOnChoose = _this.searchDialogOnChoose.bind(_this);
         _this.searchDialogOnHide = _this.searchDialogOnHide.bind(_this);
         return _this;
     }
+    XAutoCompleteBase.prototype.getXSuggestionsLoadType = function () {
+        var suggestionsLoadType;
+        if (this.props.suggestions) {
+            suggestionsLoadType = "suggestions";
+        }
+        else if (!this.props.suggestionsLoad) {
+            suggestionsLoadType = "onSearchStart"; // default
+        }
+        else {
+            suggestionsLoadType = this.props.suggestionsLoad;
+        }
+        return suggestionsLoadType;
+    };
+    // helper
+    XAutoCompleteBase.prototype.getFields = function () {
+        return Array.isArray(this.props.field) ? this.props.field : [this.props.field];
+    };
+    XAutoCompleteBase.prototype.getFirstField = function () {
+        return this.getFields()[0];
+    };
     XAutoCompleteBase.prototype.componentDidMount = function () {
+        if (this.getXSuggestionsLoadType() === "eager") {
+            this.loadSuggestions();
+        }
         if (this.props.setFocusOnCreate) {
             this.setFocusToInput();
         }
     };
-    XAutoCompleteBase.prototype.completeMethod = function (event) {
-        var _this = this;
-        var filteredSuggestions;
-        if (!event.query.trim().length) {
-            filteredSuggestions = __spreadArray([], __read(this.props.suggestions), false);
-        }
-        else {
-            var queryNormalized_1 = XUtils_1.XUtils.normalizeString(event.query);
-            filteredSuggestions = this.props.suggestions.filter(function (suggestion) {
-                var fieldValue = suggestion[_this.props.field];
-                // specialna null polozka (prazdny objekt) - test dame az za test fieldValue na undefined - koli performance
-                if (fieldValue === undefined && Object.keys(suggestion).length === 0) {
-                    return false;
+    XAutoCompleteBase.prototype.loadSuggestions = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var suggestions;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.fetchSuggestions()];
+                    case 1:
+                        suggestions = _a.sent();
+                        this.setState({ suggestions: suggestions });
+                        return [2 /*return*/];
                 }
-                // bolo:
-                //return XUtils.normalizeString(fieldValue).startsWith(queryNormalized);
-                return XUtils_1.XUtils.normalizeString(fieldValue).indexOf(queryNormalized_1) !== -1;
             });
-        }
-        this.setState({ filteredSuggestions: filteredSuggestions });
+        });
     };
-    XAutoCompleteBase.prototype.onChange = function (e) {
-        if (typeof e.value === 'string') {
-            // ak user zacne typovat znaky, nacitame suggestions, ak sme lazy (onSearchStart !== undefined)
-            if (this.props.onSearchStart) {
-                if (e.value !== '') { // ak user vymaze cely input, este nechceme nacitat suggestions, az ked zapise nejaky znak
-                    if (!this.wasSearchStartCalled) {
-                        this.props.onSearchStart();
-                        this.wasSearchStartCalled = true; // ak user dalej typuje, nechceme znova nacitavat suggestions
-                    }
+    XAutoCompleteBase.prototype.fetchSuggestions = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                if (!this.props.suggestionsQuery) {
+                    throw "XAutoCompleteBase.loadSuggestions: unexpected error - prop suggestionsQuery is undefined";
                 }
+                return [2 /*return*/, XUtils_1.XUtils.fetchRows(this.props.suggestionsQuery.entity, XUtils_1.XUtils.evalFilter(this.props.suggestionsQuery.filter), this.getSortField(), this.props.suggestionsQuery.fields)];
+            });
+        });
+    };
+    XAutoCompleteBase.prototype.getSortField = function () {
+        var sortField = this.props.suggestionsQuery.sortField;
+        if (!sortField) {
+            // len pri ne-lazy pouzivame ako default sort prvy displayField
+            // pri lazy to spomaluje selecty v pripade ze klauzula LIMIT vyrazne obmedzi vysledny zoznam suggestions
+            // pri lazy zosortujeme na frontende v XAutoCompleteBase
+            if (this.getXSuggestionsLoadType() !== "lazy") {
+                sortField = this.getFirstField();
             }
+        }
+        return sortField;
+    };
+    XAutoCompleteBase.prototype.completeMethod = function (event) {
+        return __awaiter(this, void 0, void 0, function () {
+            var filteredSuggestions, xSuggestionsLoadType, suggestions, queryNormalized, queryNormalizedList_1, filter, suggestionsRequest, findResult;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        xSuggestionsLoadType = this.getXSuggestionsLoadType();
+                        if (!(xSuggestionsLoadType !== "lazy")) return [3 /*break*/, 8];
+                        suggestions = void 0;
+                        if (!(xSuggestionsLoadType === "suggestions")) return [3 /*break*/, 1];
+                        suggestions = this.props.suggestions;
+                        return [3 /*break*/, 7];
+                    case 1:
+                        if (!(xSuggestionsLoadType === "eager")) return [3 /*break*/, 2];
+                        suggestions = this.state.suggestions;
+                        return [3 /*break*/, 7];
+                    case 2:
+                        if (!(xSuggestionsLoadType === "onSearchStart")) return [3 /*break*/, 6];
+                        if (!!this.suggestionsLoadedForOSS) return [3 /*break*/, 4];
+                        return [4 /*yield*/, this.fetchSuggestions()];
+                    case 3:
+                        suggestions = _a.sent();
+                        // ulozime si
+                        this.setState({ suggestions: suggestions });
+                        this.suggestionsLoadedForOSS = true; // ak user dalej typuje, nechceme znova nacitavat suggestions
+                        return [3 /*break*/, 5];
+                    case 4:
+                        // uz mame nacitane
+                        suggestions = this.state.suggestions;
+                        _a.label = 5;
+                    case 5: return [3 /*break*/, 7];
+                    case 6: throw 'Unexpected error - unknown xSuggestionsLoadType';
+                    case 7:
+                        if (!event.query.trim().length) {
+                            // input je prazdny - volanie sem nastane ak user otvori dropdown cez dropdown button
+                            filteredSuggestions = __spreadArray([], __read(suggestions), false);
+                        }
+                        else {
+                            queryNormalized = XUtils_1.XUtils.normalizeString(event.query);
+                            if (this.props.splitQueryValue) {
+                                queryNormalizedList_1 = queryNormalized.split(' ').filter(function (value) { return value !== ''; }); // nechceme pripadne prazdne retazce ''
+                            }
+                            else {
+                                queryNormalizedList_1 = [queryNormalized]; // nesplitujeme
+                            }
+                            filteredSuggestions = suggestions.filter(function (suggestion) {
+                                var e_1, _a;
+                                var fieldValue = _this.computeDisplayValue(suggestion);
+                                // specialna null polozka (prazdny objekt) - test dame az za test fieldValue na undefined - koli performance
+                                if (fieldValue === undefined && Object.keys(suggestion).length === 0) {
+                                    return false;
+                                }
+                                var fieldValueNormalized = XUtils_1.XUtils.normalizeString(fieldValue);
+                                // all partial query values must match
+                                var match = true;
+                                try {
+                                    for (var queryNormalizedList_2 = __values(queryNormalizedList_1), queryNormalizedList_2_1 = queryNormalizedList_2.next(); !queryNormalizedList_2_1.done; queryNormalizedList_2_1 = queryNormalizedList_2.next()) {
+                                        var queryItemNormalized = queryNormalizedList_2_1.value;
+                                        // look for substring
+                                        if (fieldValueNormalized.indexOf(queryItemNormalized) === -1) {
+                                            match = false;
+                                            break;
+                                        }
+                                    }
+                                }
+                                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                                finally {
+                                    try {
+                                        if (queryNormalizedList_2_1 && !queryNormalizedList_2_1.done && (_a = queryNormalizedList_2.return)) _a.call(queryNormalizedList_2);
+                                    }
+                                    finally { if (e_1) throw e_1.error; }
+                                }
+                                return match;
+                            });
+                        }
+                        return [3 /*break*/, 10];
+                    case 8:
+                        // ************* lazy ***************
+                        // na backendev  SELECT-e pouzijeme klauzulu LIMIT <maxRows + 1>
+                        // ak najdeme menej ako <maxRows + 1> zaznamov tak vieme ze sme nasli vsetky
+                        // ak najdeme presne <maxRows + 1> zaznamov, tak na konci zobrazime uzivatelovi specialnu polozku "..."
+                        // ktora ho upozorni ze existuju aj dalsie zaznamy splnujuce podmienku
+                        // pikoska - ak je query je velmi siroke (select by bez LIMIT <maxRows + 1> vratil mnoho zaznamov),
+                        // tak je takyto select velmi lacny (niekolko ms) - staci totiz najst prvych napr. 20 zaznamov splnujucich podmienku, t.j. netreba robit full-table scan
+                        // to ale plati len v pripade ze nepouzijeme ORDER BY - pri pouziti ORDER BY urobi full-table scan (vyfiltruje) a nasledne zosortuje
+                        // toto sa da obist specialnym selectom:
+                        // select t.* from (select t0.* from table t0 order by t0.<attr1>) t where <full-text-condition> limit 20
+                        // (najprv zosortuje a az potom filtruje prvych 20 zaznamov - predpoklad je ze nad t0.<attr1> mame index aby rychlo sortoval)
+                        // tento specialny select mozme v buducnosti dorobit (na backende) ak chceme podporovat (rychle) sortovanie v DB pre autocomplete
+                        if (!this.props.suggestionsQuery) {
+                            throw "XAutoCompleteBase.loadSuggestions: unexpected error - prop suggestionsQuery is undefined";
+                        }
+                        filter = XUtils_1.XUtils.evalFilter(this.props.suggestionsQuery.filter);
+                        suggestionsRequest = {
+                            maxRows: this.props.lazyLoadMaxRows + 1,
+                            fullTextSearch: { fields: this.getFields(), value: event.query.trim(), splitValue: this.props.splitQueryValue, matchMode: "contains" },
+                            entity: this.props.suggestionsQuery.entity,
+                            filterItems: XUtils_1.XUtils.createCustomFilterItems(filter),
+                            multiSortMeta: XUtils_1.XUtils.createMultiSortMeta(this.getSortField()),
+                            fields: this.props.suggestionsQuery.fields
+                        };
+                        return [4 /*yield*/, XUtils_1.XUtils.fetchOne('x-lazy-auto-complete-suggestions', suggestionsRequest)];
+                    case 9:
+                        findResult = _a.sent();
+                        filteredSuggestions = findResult.rowList;
+                        // ak sme nesortovali v DB (co je draha operacia) tak zosortujeme teraz
+                        // (computeDisplayValue sa vola duplicitne ale pre tych cca 20 zaznamov je to ok)
+                        if (this.props.suggestionsQuery.sortField === undefined) {
+                            filteredSuggestions = XUtils_1.XUtils.arraySort(filteredSuggestions, this.computeDisplayValue);
+                        }
+                        // ak mame o 1 zaznam viac ako je lazyLoadMaxRows, zmenime posledny zaznam na ...
+                        if (filteredSuggestions.length > this.props.lazyLoadMaxRows) {
+                            filteredSuggestions[filteredSuggestions.length - 1] = XAutoCompleteBase.valueMoreSuggestions; // zatial priamo string
+                        }
+                        _a.label = 10;
+                    case 10:
+                        this.setState({ filteredSuggestions: filteredSuggestions });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    XAutoCompleteBase.prototype.onChange = function (e) {
+        if (typeof e.value === 'string' && !XAutoCompleteBase.isMoreSuggestions(e.value)) {
             this.setState({ inputChanged: true, inputValueState: e.value });
+            this.wasOnChangeCalled = false; // reset na default hodnotu
         }
     };
     XAutoCompleteBase.prototype.onSelect = function (e) {
-        this.setObjectValue(e.value, XUtils_1.OperationType.None);
+        // nevolame this.setObjectValue ak uz bol zavolany z onBlur
+        if (!this.wasOnChangeCalled) {
+            // nedovolime vybrat specialny zaznam ...
+            if (!XAutoCompleteBase.isMoreSuggestions(e.value)) {
+                this.setObjectValue(e.value, XUtils_1.OperationType.None);
+            }
+        }
     };
     XAutoCompleteBase.prototype.onBlur = function (e) {
         // optimalizacia - testujeme len ak inputChanged === true
@@ -159,6 +370,11 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                 var filteredSuggestions = this.state.filteredSuggestions;
                 if (filteredSuggestions && filteredSuggestions.length === 1) {
                     this.setObjectValue(filteredSuggestions[0], XUtils_1.OperationType.None);
+                    // ak bol tento this.setObjectValue vyvolany klikom do suggestions dropdown-u,
+                    // tak bude este nasledne zavolany onSelect a tam chceme zamedzit volaniu this.setObjectValue,
+                    // preto nastavujeme tento priznak
+                    // priznak vratime naspet na false ak uzivatel zacne cokolvek robit s autocomplete (zacne don typovat alebo klikne na dropdown)
+                    this.wasOnChangeCalled = true;
                 }
                 else {
                     // tu by sme mohli skusit vyratat vysledok pre filteredSuggestions este raz, mozno este vypocet filteredSuggestions nedobehol
@@ -190,8 +406,9 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                 }
             }
         }
-        // odchadzame z inputu, zresetujeme priznak - ak zacne user pracovat s autocomplete-om, nacitaju sa suggestions z DB (ak mame lazy)
-        this.wasSearchStartCalled = false;
+        // odchadzame z inputu, zresetujeme priznak - ak zacne user pracovat s autocomplete-om, nacitaju sa suggestions z DB (ak mame suggestionsLoad = onSearchStart)
+        // suggestions chceme nacitat, lebo user moze zmenit iny atribut ktory ovplyvnuje filter autocomplete-u -> chceme novy zoznam suggestions
+        this.suggestionsLoadedForOSS = false;
     };
     XAutoCompleteBase.prototype.createErrorMessage = function () {
         return "Value \"".concat(this.state.inputValueState, "\" was not found among valid values.");
@@ -231,6 +448,14 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         if (object !== null) {
             // ak bol save, treba tento novy object pouzit
             this.setObjectValue(object, objectChange);
+            // ak pouzivame zoznam this.state.suggestions, tak ho rereadneme
+            // poznamka: ak pouzivame this.props.suggestions z parenta, tak si musi zoznam rereadnut parent!
+            if (objectChange !== XUtils_1.OperationType.None) {
+                // zmenil sa zaznam dobrovolnika v DB
+                // zatial len refreshneme z DB
+                // ak by bol reqest pomaly, mozme pri inserte (nove id) / update (existujuce id) upravit zoznam a usetrime tym request do DB
+                this.loadSuggestions();
+            }
             // treba upravit this.state.filteredSuggestions? setli sme novy objekt, panel so suggestions by mal byt zavrety - TODO - overit
         }
         else {
@@ -270,7 +495,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                 _this.formDialogInitValuesForInsert = {};
                 // ak mame nevalidnu hodnotu, tak ju predplnime (snaha o user friendly)
                 if (_this.state.inputChanged) {
-                    _this.formDialogInitValuesForInsert[_this.props.field] = _this.state.inputValueState;
+                    _this.formDialogInitValuesForInsert[_this.getFirstField()] = _this.state.inputValueState;
                 }
                 _this.setState({ formDialogOpened: true });
             }
@@ -329,15 +554,9 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         });
     };
     XAutoCompleteBase.prototype.onOpenDropdown = function (e) {
-        var _this = this;
-        if (this.props.onSearchStart) {
-            this.props.onSearchStart(function () { return _this.openDropdown(e); });
-        }
-        else {
-            // otvori dropdown (search je metoda popisana v API, volanie sme skopcili zo zdrojakov primereact)
-            //this.autoCompleteRef.current.search(e, '', 'dropdown');
-            this.openDropdown(e);
-        }
+        this.openDropdown(e);
+        this.suggestionsLoadedForOSS = false; // user mohol vyplnit nieco co meni filter a ide znova pracovat s autocomplete, nacitame suggestions znova (suggestionsLoad = onSearchStart)
+        this.wasOnChangeCalled = false; // reset na default hodnotu
     };
     XAutoCompleteBase.prototype.openDropdown = function (e) {
         // otvori dropdown (search je metoda popisana v API, volanie sme skopcili zo zdrojakov primereact)
@@ -358,19 +577,64 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         if (!this.state.inputChanged) {
             // poznamka: ak object === null tak treba do inputu zapisovat prazdny retazec, ak by sme pouzili null, neprejavila by sa zmena v modeli na null
             var object = this.props.value;
-            inputValue = (object !== null) ? object : ""; // TODO - je "" ok?
+            inputValue = (object !== null) ? this.computeDisplayValue(object) : ""; // TODO - je "" ok?
         }
         else {
             inputValue = this.state.inputValueState;
         }
         return inputValue;
     };
+    XAutoCompleteBase.prototype.itemTemplate = function (suggestion, index) {
+        return this.computeDisplayValue(suggestion);
+    };
+    XAutoCompleteBase.prototype.computeDisplayValue = function (suggestion) {
+        var e_2, _a;
+        var displayValue = "";
+        if (XAutoCompleteBase.isMoreSuggestions(suggestion)) {
+            displayValue = suggestion;
+        }
+        else {
+            try {
+                for (var _b = __values(this.getFields()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var field = _c.value;
+                    // TODO - konverzie na spravny typ/string
+                    var _d = __read(XUtilsCommon_1.XUtilsCommon.getPrefixAndField(field), 2), prefix = _d[0], fieldOnly = _d[1];
+                    var value = XUtilsCommon_1.XUtilsCommon.getValueByPath(suggestion, fieldOnly);
+                    if (value !== null && value !== undefined) {
+                        var valueStr = value.toString(); // TODO - spravnu konverziu
+                        if (valueStr !== "") {
+                            if (displayValue !== "") {
+                                displayValue += " ";
+                            }
+                            if (prefix) {
+                                displayValue += prefix;
+                            }
+                            displayValue += valueStr;
+                        }
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        }
+        return displayValue;
+    };
+    // vrati true ak sa jedna o specialny typ XAutoCompleteBase.valueMoreSuggestions
+    XAutoCompleteBase.isMoreSuggestions = function (suggestion) {
+        return typeof suggestion === "string" && suggestion === XAutoCompleteBase.valueMoreSuggestions;
+    };
     // takto cez metodku, mozno sa metodka vola len ked sa otvori dialog a usetrime nieco...
     XAutoCompleteBase.prototype.createSearchBrowseParams = function () {
+        var _a;
         return {
             onChoose: this.searchDialogOnChoose,
-            displayFieldFilter: (this.state.inputChanged ? { field: this.props.field, constraint: { value: this.state.inputValueState, matchMode: "startsWith" } } : undefined),
-            customFilterFunction: this.props.customFilterFunction
+            displayFieldFilter: (this.state.inputChanged ? { field: this.getFirstField(), constraint: { value: this.state.inputValueState, matchMode: "contains" } } : undefined),
+            customFilter: (_a = this.props.suggestionsQuery) === null || _a === void 0 ? void 0 : _a.filter
         };
     };
     XAutoCompleteBase.prototype.render = function () {
@@ -421,7 +685,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitValuesForInsert} onSaveOrCancel={this.formDialogOnSaveOrCancel}/>
         // formgroup-inline lepi SplitButton na autocomplete a zarovna jeho vysku
         return (react_1.default.createElement("div", { className: "x-auto-complete-base", style: { width: this.props.width } },
-            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, field: this.props.field, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, maxLength: this.props.maxLength, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createErrorProps(error))),
+            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, itemTemplate: this.itemTemplate, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createErrorProps(error))),
             dropdownButton,
             this.props.valueForm != undefined ?
                 react_1.default.createElement(dialog_1.Dialog, { visible: this.state.formDialogOpened, onHide: this.formDialogOnHide, header: this.formDialogObjectId ? 'Modification' : 'New row' }, react_1.default.cloneElement(this.props.valueForm, {
@@ -432,6 +696,13 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                 react_1.default.createElement(dialog_1.Dialog, { visible: this.state.searchDialogOpened, onHide: this.searchDialogOnHide }, react_1.default.cloneElement(this.props.searchBrowse, { searchBrowseParams: this.createSearchBrowseParams() } /*, props.searchBrowse.children*/))
                 : undefined));
     };
+    XAutoCompleteBase.valueMoreSuggestions = "...";
+    XAutoCompleteBase.defaultProps = {
+        lazyLoadMaxRows: 10,
+        splitQueryValue: true,
+        minLength: 1,
+        scrollHeight: '15rem' // primereact has 200px
+    };
     return XAutoCompleteBase;
 }(react_1.Component));
 exports.XAutoCompleteBase = XAutoCompleteBase;

package/lib/components/XAutoCompleteDT.d.ts

@@ -3,24 +3,28 @@ import { XFormComponentDT, XFormComponentDTProps } from "./XFormComponentDT";
 import { XAssoc } from "../serverApi/XEntityMetadata";
 import { OperationType } from "./XUtils";
 import { XError } from "./XErrors";
+import { XSuggestionsLoadProp } from "./XAutoCompleteBase";
 import { XTableFieldFilterProp } from "./XFormDataTable2";
+import { DataTableSortMeta } from "primereact/datatable";
 export interface XAutoCompleteDTProps extends XFormComponentDTProps {
     assocField: string;
     displayField: string;
     searchBrowse?: JSX.Element;
     assocForm?: JSX.Element;
-    filter?: XTableFieldFilterProp;
     suggestions?: any[];
+    suggestionsLoad?: XSuggestionsLoadProp;
+    lazyLoadMaxRows?: number;
+    splitQueryValue?: boolean;
+    minLength?: number;
+    filter?: XTableFieldFilterProp;
+    sortField?: string | DataTableSortMeta[];
+    fields?: string[];
+    scrollHeight?: string;
 }
 export declare class XAutoCompleteDT extends XFormComponentDT<XAutoCompleteDTProps> {
     protected xAssoc: XAssoc;
     protected errorInBase: string | undefined;
-    state: {
-        suggestions: any[];
-    };
     constructor(props: XAutoCompleteDTProps);
-    componentDidMount(): void;
-    readAndSetSuggestions(): Promise<void>;
     getField(): string;
     isNotNull(): boolean;
     getValue(): any | null;

package/lib/components/XAutoCompleteDT.js

@@ -14,42 +14,6 @@ var __extends = (this && this.__extends) || (function () {
         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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -57,7 +21,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.XAutoCompleteDT = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormComponentDT_1 = require("./XFormComponentDT");
-var XUtils_1 = require("./XUtils");
 var XAutoCompleteBase_1 = require("./XAutoCompleteBase");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
 var XAutoCompleteDT = /** @class */ (function (_super) {
@@ -66,33 +29,12 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOne(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.entity), props.assocField);
         _this.errorInBase = undefined;
-        _this.state = {
-            suggestions: []
-        };
         _this.onChangeAutoCompleteBase = _this.onChangeAutoCompleteBase.bind(_this);
         _this.onErrorChangeAutoCompleteBase = _this.onErrorChangeAutoCompleteBase.bind(_this);
         return _this;
     }
-    XAutoCompleteDT.prototype.componentDidMount = function () {
-        this.readAndSetSuggestions();
-    };
-    XAutoCompleteDT.prototype.readAndSetSuggestions = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var suggestions;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!(this.props.suggestions === undefined)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.xAssoc.entityName, this.getFilterBase(this.props.filter), this.props.displayField)];
-                    case 1:
-                        suggestions = _a.sent();
-                        this.setState({ suggestions: suggestions });
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        });
-    };
+    // componentDidMount() {
+    // }
     XAutoCompleteDT.prototype.getField = function () {
         return this.props.assocField;
     };
@@ -105,13 +47,6 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
     };
     XAutoCompleteDT.prototype.onChangeAutoCompleteBase = function (object, objectChange) {
         this.onValueChangeBase(object, this.props.onChange, objectChange);
-        if (objectChange !== XUtils_1.OperationType.None) {
-            // zmenil sa zaznam dobrovolnika v DB
-            // zatial len refreshneme z DB
-            // ak by bol reqest pomaly, mozme pri inserte (nove id) / update (existujuce id) upravit zoznam a usetrime tym request do DB
-            // ak bol delete (dobrovolnik === null), treba urobit refresh do DB (alebo si poslat id-cko zmazaneho zaznamu)
-            this.readAndSetSuggestions();
-        }
     };
     XAutoCompleteDT.prototype.onErrorChangeAutoCompleteBase = function (error) {
         this.errorInBase = error; // odlozime si error
@@ -128,13 +63,12 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
     };
     XAutoCompleteDT.prototype.render = function () {
         var _this = this;
-        var _a;
         var xEntityAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.xAssoc.entityName);
         //const xDisplayField = XUtilsMetadataCommon.getXFieldByPath(xEntityAssoc, this.props.displayField);
         // 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(), suggestions: (_a = this.props.suggestions) !== null && _a !== void 0 ? _a : this.state.suggestions, onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, customFilterFunction: function () { return _this.getFilterBase(_this.props.filter); } }));
+        return (react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, 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, 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 } }));
     };
     return XAutoCompleteDT;
 }(XFormComponentDT_1.XFormComponentDT));

package/lib/components/XFormDataTable2.js

@@ -541,7 +541,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         var filterDisplay = this.props.filterDisplay !== "none" ? this.props.filterDisplay : undefined;
         // default sortovanie - ak mame insert tak nesortujeme (drzime poradie v akom user zaznam vytvoril), ak mame update tak podla id zosortujeme (nech je to zobrazene vzdy rovnako)
-        var sortField = ((_a = this.props.sortField) !== null && _a !== void 0 ? _a : this.props.form.isAddRow()) ? undefined : xEntity.idField;
+        var sortField = (_a = this.props.sortField) !== null && _a !== void 0 ? _a : (this.props.form.isAddRow() ? undefined : xEntity.idField);
         var label = this.props.label !== undefined ? this.props.label : this.props.assocField;
         var readOnly = this.isReadOnly();
         // v bloku function (child) nejde pouzit priamo this, thisLocal uz ide pouzit

package/lib/components/XLazyDataTable.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactChild } from 'react';
-import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData } from 'primereact/datatable';
+import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableSortMeta } from 'primereact/datatable';
 import { ColumnBodyOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
 import { XViewStatusOrBoolean } from "./XUtils";
 import { XSearchBrowseParams } from "./XSearchBrowseParams";
@@ -51,11 +51,13 @@ export interface XLazyDataTableProps {
     appButtons?: any;
     filters?: DataTableFilterMeta;
     customFilter?: XCustomFilter;
-    sortField?: string;
+    sortField?: string | DataTableSortMeta[];
     fullTextSearch: boolean | string[];
+    fields?: string[];
     multiLineSwitch: boolean;
     searchBrowseParams?: XSearchBrowseParams;
     width?: string;
+    rowClassName?: (data: any) => object | string | undefined;
     dataLoadedState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
     editMode?: boolean;
     editModeHandlers?: XEditModeHandlers;

package/lib/components/XLazyDataTable.js

@@ -96,6 +96,15 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XLazyColumn = exports.XLazyDataTable = void 0;
 var react_1 = __importStar(require("react"));
@@ -220,15 +229,15 @@ var XLazyDataTable = function (props) {
             filtersInit[displayFieldFilter.field] = createFilterItem(props.filterDisplay, displayFieldFilter.constraint);
         }
         // ak mame props.searchBrowseParams.customFilterFunction, pridame filter
-        if (props.searchBrowseParams.customFilterFunction) {
-            customFilterItems = XUtils_1.XUtils.filterAnd(customFilterItems, props.searchBrowseParams.customFilterFunction());
+        if (props.searchBrowseParams.customFilter) {
+            customFilterItems = XUtils_1.XUtils.filterAnd(customFilterItems, XUtils_1.XUtils.evalFilter(props.searchBrowseParams.customFilter));
         }
     }
     var _f = __read((0, react_1.useState)(filtersInit), 2), filters = _f[0], setFilters = _f[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
     var initFtsInputValue = props.fullTextSearch ? createInitFtsInputValue() : undefined;
     var _g = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValue = _g[0], setFtsInputValue = _g[1];
     var _h = __read((0, react_1.useState)(true), 2), multiLineSwitchValue = _h[0], setMultiLineSwitchValue = _h[1];
-    var _j = __read((0, react_1.useState)(props.sortField ? [{ field: props.sortField, order: 1 }] : []), 2), multiSortMeta = _j[0], setMultiSortMeta = _j[1];
+    var _j = __read((0, react_1.useState)(XUtils_1.XUtils.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _j[0], setMultiSortMeta = _j[1];
     var _k = __read((0, react_1.useState)(null), 2), selectedRow = _k[0], setSelectedRow = _k[1];
     var _l = __read((_a = props.dataLoadedState) !== null && _a !== void 0 ? _a : (0, react_1.useState)(false), 2), dataLoaded = _l[0], setDataLoaded = _l[1]; // priznak kde si zapiseme, ci uz sme nacitali data
     var _m = __read((0, react_1.useState)(false), 2), exportRowsDialogOpened = _m[0], setExportRowsDialogOpened = _m[1];
@@ -335,6 +344,7 @@ var XLazyDataTable = function (props) {
             xFullTextSearch = {
                 fields: Array.isArray(props.fullTextSearch) ? props.fullTextSearch : undefined,
                 value: ftsInputValue.value,
+                splitValue: true,
                 matchMode: ftsInputValue.matchMode
             };
         }
@@ -359,6 +369,9 @@ var XLazyDataTable = function (props) {
             }
             finally { if (e_3) throw e_3.error; }
         }
+        if (props.fields) {
+            fields.push.apply(fields, __spreadArray([], __read(props.fields), false));
+        }
         return fields;
     };
     var getHeaders = function () {
@@ -887,7 +900,7 @@ var XLazyDataTable = function (props) {
             react_1.default.createElement(XButton_1.XButton, { key: "clearFilter", label: (0, XLocale_1.xLocaleOption)('clearFilter'), onClick: onClickClearFilter }),
             props.multiLineSwitch ? react_1.default.createElement(inputswitch_1.InputSwitch, { checked: multiLineSwitchValue, onChange: function (e) { return setMultiLineSwitchValue(e.value); }, className: "m-1" }) : null),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
-            react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: props.paginator, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filterDisplay: props.filterDisplay, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, 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(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: props.paginator, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filterDisplay: props.filterDisplay, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, rowClassName: props.rowClassName, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
             props.onAddRow !== undefined && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "addRow", icon: "pi pi-plus", label: (0, XLocale_1.xLocaleOption)('addRow'), onClick: onClickAddRow }) : null,
             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,

package/lib/components/XSearchBrowseParams.d.ts

@@ -1,5 +1,5 @@
 import { DataTableFilterMetaData } from "primereact/datatable";
-import { XCustomFilter } from "../serverApi/FindParam";
+import { XFilterOrFunction } from "./XAutoCompleteBase";
 export interface XFieldFilter {
     field: string;
     constraint: DataTableFilterMetaData;
@@ -7,5 +7,5 @@ export interface XFieldFilter {
 export interface XSearchBrowseParams {
     onChoose: (chosenRow: any) => void;
     displayFieldFilter?: XFieldFilter;
-    customFilterFunction?: () => XCustomFilter | undefined;
+    customFilter?: XFilterOrFunction;
 }

package/lib/components/XSearchButton.js

@@ -203,8 +203,8 @@ var XSearchButton = /** @class */ (function (_super) {
         var createSearchBrowseParams = function () {
             return {
                 onChoose: onChoose,
-                displayFieldFilter: (inputChanged ? { field: props.displayField, constraint: { value: inputValueState, matchMode: "startsWith" } } : undefined),
-                customFilterFunction: function () { return _this.getFilterBase(_this.props.filter); }
+                displayFieldFilter: (inputChanged ? { field: props.displayField, constraint: { value: inputValueState, matchMode: "contains" } } : undefined),
+                customFilter: function () { return _this.getFilterBase(_this.props.filter); }
             };
         };
         // vypocitame inputValue

package/lib/components/XSearchButtonDT.js

@@ -184,8 +184,8 @@ var XSearchButtonDT = function (props) {
         react_1.default.createElement(dialog_1.Dialog, { visible: dialogOpened, onHide: onHide }, react_1.default.cloneElement(props.searchBrowse, {
             searchBrowseParams: {
                 onChoose: onChoose,
-                displayFieldFilter: (inputChanged ? { field: props.displayField, constraint: { value: inputValueState, matchMode: "startsWith" } } : undefined),
-                customFilterFunction: function () { return undefined; } // TODO - dorobit
+                displayFieldFilter: (inputChanged ? { field: props.displayField, constraint: { value: inputValueState, matchMode: "contains" } } : undefined),
+                customFilter: undefined // TODO - dorobit
             }
         } /*, props.searchBrowse.children*/))));
 };

package/lib/components/XUtils.d.ts

@@ -7,6 +7,7 @@ import { XCustomFilter, XCustomFilterItem } from "../serverApi/FindParam";
 import { DataTableSortMeta } from "primereact/datatable";
 import { XObject } from "./XObject";
 import { XTableFieldReadOnlyProp } from "./XFormDataTable2";
+import { XFilterOrFunction } from "./XAutoCompleteBase";
 export declare enum OperationType {
     None = 0,
     Insert = 1,
@@ -54,6 +55,7 @@ export declare class XUtils {
     static getAppForm(entity: string, formId?: string): any;
     static fetchMany(path: string, value: any, usePublicToken?: boolean | XToken): Promise<any[]>;
     static fetchRows(entity: string, customFilter?: XCustomFilter | undefined, sortField?: string | DataTableSortMeta[] | undefined, fields?: string[]): Promise<any[]>;
+    static fetchRowCount(entity: string, customFilter?: XCustomFilter | undefined): Promise<number>;
     static fetchOne(path: string, value: any, usePublicToken?: boolean | XToken): Promise<any>;
     static fetchString(path: string, value: any): Promise<string>;
     static fetch(path: string, value: any, usePublicToken?: boolean | XToken): Promise<any>;
@@ -108,8 +110,10 @@ export declare class XUtils {
     static getErrorMessage(xError: XError): string | undefined;
     static normalizeString(value: string): string;
     static createCustomFilterItems(customFilter: XCustomFilter | undefined): XCustomFilterItem[] | undefined;
+    static createMultiSortMeta(sortField: string | DataTableSortMeta[] | undefined): DataTableSortMeta[] | undefined;
     static filterAnd(...filters: (XCustomFilter | undefined)[]): XCustomFilterItem[] | undefined;
     static filterIdIn(idField: string, idList: number[]): XCustomFilter;
+    static evalFilter(filter: XFilterOrFunction | undefined): XCustomFilter | undefined;
     static isTableRowInserted(tableRow: any): boolean;
     static xViewStatus(xViewStatusOrBoolean: XViewStatusOrBoolean): XViewStatus;
 }

package/lib/components/XUtils.js

@@ -272,20 +272,11 @@ var XUtils = /** @class */ (function () {
     // pomocna metodka pouzivajuca lazyDataTable service
     XUtils.fetchRows = function (entity, customFilter, sortField, fields) {
         return __awaiter(this, void 0, void 0, function () {
-            var multiSortMeta, findParam, rowList;
+            var findParam, rowList;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        multiSortMeta = undefined;
-                        if (sortField) {
-                            if (Array.isArray(sortField)) {
-                                multiSortMeta = sortField;
-                            }
-                            else {
-                                multiSortMeta = [{ field: sortField, order: 1 }];
-                            }
-                        }
-                        findParam = { resultType: FindParam_1.ResultType.AllRows, entity: entity, customFilterItems: XUtils.createCustomFilterItems(customFilter), multiSortMeta: multiSortMeta, fields: fields };
+                        findParam = { resultType: FindParam_1.ResultType.AllRows, entity: entity, customFilterItems: XUtils.createCustomFilterItems(customFilter), multiSortMeta: XUtils.createMultiSortMeta(sortField), fields: fields };
                         return [4 /*yield*/, XUtils.fetchOne('lazyDataTableFindRows', findParam)];
                     case 1:
                         rowList = (_a.sent()).rowList;
@@ -294,6 +285,22 @@ var XUtils = /** @class */ (function () {
             });
         });
     };
+    // pomocna metodka pouzivajuca lazyDataTable service
+    XUtils.fetchRowCount = function (entity, customFilter) {
+        return __awaiter(this, void 0, void 0, function () {
+            var findParam, totalRecords;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        findParam = { resultType: FindParam_1.ResultType.OnlyRowCount, entity: entity, customFilterItems: XUtils.createCustomFilterItems(customFilter) };
+                        return [4 /*yield*/, XUtils.fetchOne('lazyDataTableFindRows', findParam)];
+                    case 1:
+                        totalRecords = (_a.sent()).totalRecords;
+                        return [2 /*return*/, totalRecords];
+                }
+            });
+        });
+    };
     XUtils.fetchOne = function (path, value, usePublicToken) {
         return XUtils.fetch(path, value, usePublicToken);
     };
@@ -701,6 +708,28 @@ var XUtils = /** @class */ (function () {
         }
         return customFilterItems;
     };
+    // pomocna metodka - konvertuje sortField -> DataTableSortMeta[]
+    XUtils.createMultiSortMeta = function (sortField) {
+        var multiSortMeta = undefined;
+        if (sortField) {
+            if (Array.isArray(sortField)) {
+                multiSortMeta = sortField;
+            }
+            else {
+                // default order is asc, supported is also value in form "<column name> desc"
+                var order = 1;
+                var fieldAndOrder = sortField.split(' ');
+                if (fieldAndOrder.length === 2) {
+                    sortField = fieldAndOrder[0];
+                    if (fieldAndOrder[1].toLowerCase() === "desc") {
+                        order = -1;
+                    }
+                }
+                multiSortMeta = [{ field: sortField, order: order }];
+            }
+        }
+        return multiSortMeta;
+    };
     // pomocna metodka
     XUtils.filterAnd = function () {
         var e_7, _a;
@@ -736,6 +765,17 @@ var XUtils = /** @class */ (function () {
         return { where: "[".concat(idField, "] IN (:...idList)"), params: { "idList": idList.length > 0 ? idList : [0] } };
     };
     // pomocna metodka
+    XUtils.evalFilter = function (filter) {
+        var customFilter = undefined;
+        if (typeof filter === 'object') {
+            customFilter = filter;
+        }
+        if (typeof filter === 'function') {
+            customFilter = filter();
+        }
+        return customFilter;
+    };
+    // pomocna metodka
     XUtils.isTableRowInserted = function (tableRow) {
         var _a;
         return (_a = tableRow.__x_generatedRowId) !== null && _a !== void 0 ? _a : false; // specialny priznak, ze sme vygenerovali id-cko

package/lib/serverApi/FindParam.d.ts

@@ -1,8 +1,9 @@
 import { DataTableFilterMeta, DataTableSortMeta } from "primereact/datatable";
 export declare enum ResultType {
     OnlyRowCount = 0,
-    RowCountAndPagedRows = 1,
-    AllRows = 2
+    OnlyPagedRows = 1,
+    RowCountAndPagedRows = 2,
+    AllRows = 3
 }
 export interface XParams {
     [key: string]: any;
@@ -15,6 +16,7 @@ export type XCustomFilter = XCustomFilterItem | XCustomFilterItem[];
 export interface XFullTextSearch {
     fields?: string[];
     value: string;
+    splitValue: boolean;
     matchMode: 'startsWith' | 'contains' | 'endsWith' | 'equals';
 }
 export declare enum XAggregateType {
@@ -39,3 +41,11 @@ export interface FindParam {
     fields?: string[];
     aggregateItems?: XAggregateItem[];
 }
+export interface XLazyAutoCompleteSuggestionsRequest {
+    maxRows: number;
+    fullTextSearch?: XFullTextSearch;
+    entity: string;
+    filterItems?: XCustomFilterItem[];
+    multiSortMeta?: DataTableSortMeta[];
+    fields?: string[];
+}

package/lib/serverApi/FindParam.js

@@ -18,8 +18,9 @@ exports.XAggregateType = exports.ResultType = void 0;
 var ResultType;
 (function (ResultType) {
     ResultType[ResultType["OnlyRowCount"] = 0] = "OnlyRowCount";
-    ResultType[ResultType["RowCountAndPagedRows"] = 1] = "RowCountAndPagedRows";
-    ResultType[ResultType["AllRows"] = 2] = "AllRows";
+    ResultType[ResultType["OnlyPagedRows"] = 1] = "OnlyPagedRows";
+    ResultType[ResultType["RowCountAndPagedRows"] = 2] = "RowCountAndPagedRows";
+    ResultType[ResultType["AllRows"] = 3] = "AllRows";
 })(ResultType = exports.ResultType || (exports.ResultType = {}));
 var XAggregateType;
 (function (XAggregateType) {

package/lib/serverApi/XUtilsCommon.d.ts

@@ -8,6 +8,7 @@ export declare class XUtilsCommon {
     static getPathToAssoc(path: string): string;
     static getPathToAssocAndField(path: string): [string | null, string];
     static isSingleField(path: string): boolean;
+    static getPrefixAndField(path: string): [string | null, string];
     static objectAsJSON(value: any): string;
     static getDayName(date: Date | null | undefined): string | undefined;
     static dateAddDays(date: Date | null, days: number): Date | null;

package/lib/serverApi/XUtilsCommon.js

@@ -157,6 +157,17 @@ var XUtilsCommon = /** @class */ (function () {
     XUtilsCommon.isSingleField = function (path) {
         return path.indexOf(".") === -1;
     };
+    XUtilsCommon.getPrefixAndField = function (path) {
+        var posDot = path.indexOf(":");
+        if (posDot === -1) {
+            return [null, path];
+        }
+        else {
+            var prefix = path.substring(0, posDot);
+            var pathOnly = path.substring(posDot + 1);
+            return [prefix, pathOnly];
+        }
+    };
     XUtilsCommon.objectAsJSON = function (value) {
         // sem treba dat nejaku pre nas vhodnu serializaciu
         // zatial provizorne robene cez antipatern - modifikaciu prototype funcii primitivnych typov

package/package.json

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