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

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 });
             }
@@ -287,13 +512,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                         alert('Please select some row.');
                     }
                     else {
-                        // otvorime dialog na update
-                        if (_this.props.idField === undefined) {
-                            throw "XAutoCompleteBase: property valueForm is defined but property idField is also needed for form editation.";
-                        }
-                        _this.formDialogObjectId = _this.props.value[_this.props.idField];
-                        _this.formDialogInitValuesForInsert = undefined;
-                        _this.setState({ formDialogOpened: true });
+                        _this.onEditAssocValue();
                     }
                 }
             }
@@ -335,39 +554,87 @@ 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)
         this.autoCompleteRef.current.search(e, '', 'dropdown');
     };
+    XAutoCompleteBase.prototype.onEditAssocValue = function () {
+        // otvorime dialog na update
+        if (this.props.idField === undefined) {
+            throw "XAutoCompleteBase: property valueForm is defined but property idField is also needed for form editation.";
+        }
+        this.formDialogObjectId = this.props.value[this.props.idField];
+        this.formDialogInitValuesForInsert = undefined;
+        this.setState({ formDialogOpened: true });
+    };
     // vracia objekt (ak inputChanged === false) alebo string (ak inputChanged === true)
     XAutoCompleteBase.prototype.computeInputValue = function () {
         var inputValue;
         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 () {
@@ -375,21 +642,34 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         var _a;
         var readOnly = (_a = this.props.readOnly) !== null && _a !== void 0 ? _a : false;
         var dropdownButton;
-        if ((this.props.searchBrowse && !readOnly) || this.props.valueForm) {
-            // mame searchBrowse alebo CRUD operacie, potrebujeme SplitButton
-            var splitButtonItems = [];
-            if (this.props.valueForm) {
-                this.createInsertUpdateItems(splitButtonItems);
+        if (!readOnly) {
+            if (this.props.searchBrowse || this.props.valueForm) {
+                // mame searchBrowse alebo CRUD operacie, potrebujeme SplitButton
+                var splitButtonItems = [];
+                if (this.props.valueForm) {
+                    this.createInsertUpdateItems(splitButtonItems);
+                }
+                if (this.props.searchBrowse && !readOnly) {
+                    this.createSearchItem(splitButtonItems);
+                }
+                this.createDropdownItem(splitButtonItems);
+                dropdownButton = react_1.default.createElement(splitbutton_1.SplitButton, { model: splitButtonItems, className: 'x-splitbutton-only-dropdown' + XUtils_1.XUtils.mobileCssSuffix(), menuClassName: 'x-splitbutton-only-dropdown-menu' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
             }
-            if (this.props.searchBrowse && !readOnly) {
-                this.createSearchItem(splitButtonItems);
+            else {
+                // mame len 1 operaciu - dame jednoduchy button
+                dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.onOpenDropdown(e); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() });
             }
-            this.createDropdownItem(splitButtonItems);
-            dropdownButton = react_1.default.createElement(splitbutton_1.SplitButton, { model: splitButtonItems, className: 'x-splitbutton-only-dropdown' + XUtils_1.XUtils.mobileCssSuffix(), menuClassName: 'x-splitbutton-only-dropdown-menu' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
         }
         else {
-            // mame len 1 operaciu - dame jednoduchy button
-            dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.onOpenDropdown(e); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
+            // readOnly
+            // ak mame valueForm a mame asociovany objekt, umoznime editovat asociovany objekt
+            if (this.props.valueForm && this.props.value !== null) {
+                dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-pencil", onClick: function (e) { return _this.onEditAssocValue(); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() });
+            }
+            else {
+                // dame disablovany button (z estetickych dovodov, zachovame sirku)
+                dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix(), disabled: true });
+            }
         }
         // vypocitame inputValue
         var inputValue = this.computeInputValue();
@@ -405,9 +685,9 @@ 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 && !readOnly ?
+            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, {
                     id: this.formDialogObjectId, initValues: this.formDialogInitValuesForInsert, onSaveOrCancel: this.formDialogOnSaveOrCancel
                 } /*, this.props.valueForm.children*/))
@@ -416,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;