@michalrakus/x-react-web-lib 1.10.0 → 1.11.1

package/XEditBrowse.d.ts

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

package/XEditBrowse.js

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

package/XObject.d.ts

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

package/XObject.js

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

package/gulpfile.js

@@ -21,7 +21,6 @@ function generateApi(cb) {
         "./lib/components/useXToken",
         "./lib/components/XAutoComplete",
         "./lib/components/XAutoCompleteBase",
-        "./lib/components/XBrowse",
         "./lib/components/XButton",
         "./lib/components/XButtonIconMedium",
         "./lib/components/XButtonIconNarrow",
@@ -31,6 +30,7 @@ function generateApi(cb) {
         "./lib/components/XCheckbox",
         "./lib/components/XDropdown",
         "./lib/components/XDropdownForEntity",
+        "./lib/components/XEditBrowse",
         "./lib/components/XEnvVars",
         "./lib/components/XErrors",
         "./lib/components/XExportRowsDialog",
@@ -54,6 +54,7 @@ function generateApi(cb) {
         "./lib/components/XLocale",
         "./lib/components/XLoginDialog",
         "./lib/components/XLoginForm",
+        "./lib/components/XObject",
         "./lib/components/XSearchButton",
         "./lib/components/XToken",
         "./lib/components/XToOneAssocButton",

package/lib/administration/XBrowseMetaBrowse.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare const XBrowseMetaBrowse: (props: {}) => JSX.Element;
+import { XBrowseProps } from "../components/XLazyDataTable";
+export declare const XBrowseMetaBrowse: (props: XBrowseProps) => JSX.Element;

package/lib/administration/XUserBrowse.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare const XUserBrowse: (props: {}) => JSX.Element;
+import { XBrowseProps } from "../components/XLazyDataTable";
+export declare const XUserBrowse: (props: XBrowseProps) => JSX.Element;

package/lib/administration/XUserBrowse.js

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

package/lib/administration/XUserForm.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
-import { FormProps } from "../components/XFormBase";
+import { XFormProps } from "../components/XFormBase";
+import { OperationType } from "../components/XUtils";
 import { XFormBaseModif } from "../components/XFormBaseModif";
+import { XObject } from "../components/XObject";
 export declare class XUserForm extends XFormBaseModif {
-    constructor(props: FormProps);
-    componentDidMount(): Promise<void>;
+    constructor(props: XFormProps);
+    createNewObject(): XObject;
+    preInitForm(object: XObject, operationType: OperationType.Insert | OperationType.Update): void;
     onClickSave(): Promise<void>;
     render(): JSX.Element;
 }

package/lib/administration/XUserForm.js

@@ -85,22 +85,15 @@ var XUserForm = /** @class */ (function (_super) {
         _this.onClickSave = _this.onClickSave.bind(_this);
         return _this;
     }
-    XUserForm.prototype.componentDidMount = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var username;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, _super.prototype.componentDidMount.call(this)];
-                    case 1:
-                        _a.sent();
-                        username = this.getXObject().username;
-                        if (username === XUtils_1.XUtils.getUsername() || (XUtils_1.XUtils.demo() && (username === 'jozko' || username === 'xman'))) {
-                            this.setState({ usernameEnabledReadOnly: true });
-                        }
-                        return [2 /*return*/];
-                }
-            });
-        });
+    XUserForm.prototype.createNewObject = function () {
+        return { enabled: true, admin: false, version: 0 };
+    };
+    XUserForm.prototype.preInitForm = function (object, operationType) {
+        // aktualny user si nemoze zmenit username, enabled a admin status
+        var username = this.getXObject().username;
+        if (operationType === XUtils_1.OperationType.Update && (username === XUtils_1.XUtils.getUsername() || (XUtils_1.XUtils.demo() && (username === 'xman')))) {
+            this.setState({ usernameEnabledReadOnly: true });
+        }
     };
     XUserForm.prototype.onClickSave = function () {
         return __awaiter(this, void 0, void 0, function () {

package/lib/components/XAutoComplete.d.ts

@@ -4,12 +4,15 @@ import { XAssoc } from "../serverApi/XEntityMetadata";
 import { OperationType } from "./XUtils";
 import { XError } from "./XErrors";
 import { XObject } from "./XObject";
+import { DataTableSortMeta } from "primereact/datatable";
 export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     assocField: string;
-    displayField: string | ((suggestion: any) => string);
-    searchTable?: any;
-    assocForm?: any;
+    displayField: string;
+    searchBrowse?: JSX.Element;
+    assocForm?: JSX.Element;
     filter?: XFilterProp;
+    sortField?: string | DataTableSortMeta[];
+    suggestions?: any[];
     size?: number;
     inputStyle?: React.CSSProperties;
 }
@@ -20,7 +23,6 @@ export declare class XAutoComplete extends XFormComponent<XObject, XAutoComplete
         suggestions: any[];
     };
     constructor(props: XAutoCompleteProps);
-    getDisplayFieldOrId(): string;
     componentDidMount(): void;
     readAndSetSuggestions(): Promise<void>;
     getField(): string;

package/lib/components/XAutoComplete.js

@@ -71,38 +71,27 @@ var XAutoComplete = /** @class */ (function (_super) {
         };
         _this.onChangeAutoCompleteBase = _this.onChangeAutoCompleteBase.bind(_this);
         _this.onErrorChangeAutoCompleteBase = _this.onErrorChangeAutoCompleteBase.bind(_this);
-        props.form.addField(props.assocField + '.' + _this.getDisplayFieldOrId());
+        props.form.addField(props.assocField + '.' + props.displayField);
         return _this;
     }
-    XAutoComplete.prototype.getDisplayFieldOrId = function () {
-        // toto je hack - ak ratame displayField cez funkciu, tak nam potom chyba (hociaky) atribut asociovaneho objektu
-        // podobne ako na XFormDataTable2, podsunieme id-ckovy atribut
-        if (typeof this.props.displayField === 'string') {
-            return this.props.displayField; // vsetko ok
-        }
-        else {
-            // v displayField mame funkciu, zistime id-ckovy atribut
-            return XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.xAssoc.entityName).idField;
-        }
-    };
     XAutoComplete.prototype.componentDidMount = function () {
         //console.log("volany XAutoComplete.componentDidMount()");
         this.readAndSetSuggestions();
     };
     XAutoComplete.prototype.readAndSetSuggestions = function () {
+        var _a;
         return __awaiter(this, void 0, void 0, function () {
             var suggestions;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.xAssoc.entityName, this.getFilterBase(this.props.filter), typeof this.props.displayField === 'string' ? this.props.displayField : undefined)];
+            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)];
                     case 1:
-                        suggestions = _a.sent();
-                        // ak mame funkciu, zosortujeme tu
-                        if (typeof this.props.displayField === 'function') {
-                            suggestions = XUtils_1.XUtils.arraySort(suggestions, this.props.displayField);
-                        }
+                        suggestions = _b.sent();
                         this.setState({ suggestions: suggestions });
-                        return [2 /*return*/];
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
                 }
             });
         });
@@ -140,6 +129,8 @@ var XAutoComplete = /** @class */ (function (_super) {
         return _super.prototype.validate.call(this);
     };
     XAutoComplete.prototype.render = function () {
+        var _this = this;
+        var _a;
         var xEntityAssoc = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.xAssoc.entityName);
         //const xDisplayField = XUtilsMetadata.getXFieldByPath(xEntityAssoc, this.props.displayField);
         // TODO - readOnly
@@ -148,7 +139,7 @@ var XAutoComplete = /** @class */ (function (_super) {
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), suggestions: this.state.suggestions, onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase })));
+            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, error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, customFilterFunction: function () { return _this.getFilterBase(_this.props.filter); } })));
     };
     return XAutoComplete;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XAutoCompleteBase.d.ts

@@ -1,18 +1,23 @@
 import React, { Component } from "react";
 import { AutoCompleteChangeEvent } from "primereact/autocomplete";
 import { OperationType } from "./XUtils";
+import { MenuItem } from "primereact/menuitem";
+import { XSearchBrowseParams } from "./XSearchBrowseParams";
+import { XCustomFilter } from "../serverApi/FindParam";
 export interface XAutoCompleteBaseProps {
     value: any;
     suggestions: any[];
     onChange: (object: any, objectChange: OperationType) => void;
-    field: string | ((suggestion: any) => string);
-    valueForm?: any;
+    field: string;
+    searchBrowse?: JSX.Element;
+    valueForm?: JSX.Element;
     idField?: string;
     maxLength?: number;
     readOnly?: boolean;
     error?: string;
     onErrorChange: (error: string | undefined) => void;
     setFocusOnCreate?: boolean;
+    customFilterFunction?: () => XCustomFilter | undefined;
 }
 export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps> {
     autoCompleteRef: any;
@@ -22,12 +27,12 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
         notValid: boolean;
         filteredSuggestions: any[] | undefined;
         formDialogOpened: boolean;
+        searchDialogOpened: boolean;
     };
     formDialogObjectId: number | undefined;
-    formDialogInitObjectForInsert: any | undefined;
+    formDialogInitValuesForInsert: any | undefined;
     constructor(props: XAutoCompleteBaseProps);
     componentDidMount(): void;
-    getDisplayValue(suggestion: any): string;
     completeMethod(event: {
         query: string;
     }): void;
@@ -39,7 +44,12 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     setObjectValue(object: any, objectChange: OperationType): void;
     formDialogOnSaveOrCancel(object: any | null, objectChange: OperationType): void;
     formDialogOnHide(): void;
+    searchDialogOnChoose(chosenRow: any): void;
+    searchDialogOnHide(): void;
+    createInsertUpdateItems(splitButtonItems: MenuItem[]): void;
+    createSearchItem(splitButtonItems: MenuItem[]): void;
+    createDropdownItem(splitButtonItems: MenuItem[]): void;
     computeInputValue(): any;
-    itemTemplate(suggestion: any, index: number): React.ReactNode;
+    createSearchBrowseParams(): XSearchBrowseParams;
     render(): JSX.Element;
 }

package/lib/components/XAutoCompleteBase.js

@@ -91,7 +91,8 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             inputValueState: undefined,
             notValid: false,
             filteredSuggestions: undefined,
-            formDialogOpened: false
+            formDialogOpened: false,
+            searchDialogOpened: false
         };
         _this.completeMethod = _this.completeMethod.bind(_this);
         _this.onChange = _this.onChange.bind(_this);
@@ -99,7 +100,8 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         _this.onBlur = _this.onBlur.bind(_this);
         _this.formDialogOnSaveOrCancel = _this.formDialogOnSaveOrCancel.bind(_this);
         _this.formDialogOnHide = _this.formDialogOnHide.bind(_this);
-        _this.itemTemplate = _this.itemTemplate.bind(_this);
+        _this.searchDialogOnChoose = _this.searchDialogOnChoose.bind(_this);
+        _this.searchDialogOnHide = _this.searchDialogOnHide.bind(_this);
         return _this;
     }
     XAutoCompleteBase.prototype.componentDidMount = function () {
@@ -107,17 +109,6 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             this.setFocusToInput();
         }
     };
-    XAutoCompleteBase.prototype.getDisplayValue = function (suggestion) {
-        var displayValue;
-        if (typeof this.props.field === 'string') {
-            displayValue = suggestion[this.props.field];
-        }
-        else {
-            // this.props.field is function returning string
-            displayValue = this.props.field(suggestion);
-        }
-        return displayValue;
-    };
     XAutoCompleteBase.prototype.completeMethod = function (event) {
         var _this = this;
         var filteredSuggestions;
@@ -127,7 +118,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         else {
             var queryNormalized_1 = XUtils_1.XUtils.normalizeString(event.query);
             filteredSuggestions = this.props.suggestions.filter(function (suggestion) {
-                var fieldValue = _this.getDisplayValue(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;
@@ -204,8 +195,8 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                     this.formDialogObjectId = undefined;
                     // TODO - pridat ako novu prop metodu ktora bude vracat bude mat parameter this.state.inputValueState a vrati object
                     // ak bude tato metoda undefined, tak zostane tato povodna funkcionalita
-                    this.formDialogInitObjectForInsert = {};
-                    this.formDialogInitObjectForInsert[this.props.field] = this.state.inputValueState;
+                    this.formDialogInitValuesForInsert = {};
+                    this.formDialogInitValuesForInsert[this.props.field] = this.state.inputValueState;
                     this.setState({formDialogOpened: true});
                 }
                 else {
@@ -245,91 +236,124 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             this.setFocusToInput();
         }
     };
+    XAutoCompleteBase.prototype.searchDialogOnChoose = function (chosenRow) {
+        this.setState({ searchDialogOpened: false });
+        // zapiseme vybraty row do objektu
+        this.setObjectValue(chosenRow, XUtils_1.OperationType.None);
+    };
+    XAutoCompleteBase.prototype.searchDialogOnHide = function () {
+        this.setState({ searchDialogOpened: false });
+        // ak mame v inpute neplatnu hodnotu, vratime kurzor na input
+        if (this.state.inputChanged) {
+            this.setFocusToInput();
+        }
+    };
+    XAutoCompleteBase.prototype.createInsertUpdateItems = function (splitButtonItems) {
+        var _this = this;
+        splitButtonItems.push({
+            icon: 'pi pi-plus',
+            command: function (e) {
+                // otvorime dialog na insert
+                _this.formDialogObjectId = undefined;
+                _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.setState({ formDialogOpened: true });
+            }
+        });
+        splitButtonItems.push({
+            icon: 'pi pi-pencil',
+            command: function (e) {
+                if (_this.state.inputChanged) {
+                    alert("Value \"".concat(_this.state.inputValueState, "\" was not found among valid values, please enter some valid value."));
+                    _this.setFocusToInput();
+                }
+                else {
+                    if (_this.props.value === null) {
+                        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 });
+                    }
+                }
+            }
+        });
+        // remove nebudeme podporovat, je technicky problematicky - nemozme vymazat zaznam z DB koli FK constraintu
+        // {
+        //     icon: 'pi pi-times',
+        //     command: (e: any) => {
+        //         console.log('remove');
+        //     }
+        // },
+    };
+    XAutoCompleteBase.prototype.createSearchItem = function (splitButtonItems) {
+        var _this = this;
+        splitButtonItems.push({
+            icon: 'pi pi-search',
+            command: function (e) {
+                _this.setState({ searchDialogOpened: true });
+            }
+        });
+    };
+    XAutoCompleteBase.prototype.createDropdownItem = function (splitButtonItems) {
+        var _this = this;
+        splitButtonItems.push({
+            icon: 'pi pi-chevron-down',
+            command: function (e) {
+                // zobrazi cely suggestions list, zide sa ak chceme vidiet vsetky moznosti
+                // neprakticke ak mame vela poloziek v suggestions list
+                // krasne zobrazi cely objekt!
+                // this.autoCompleteRef.current je element <AutoComplete .../>, ktory vytvarame v render metode
+                //console.log(this.autoCompleteRef.current);
+                // otvori dropdown (search je metoda popisana v API, volanie sme skopcili zo zdrojakov primereact)
+                _this.autoCompleteRef.current.search(e, '', 'dropdown');
+            }
+        });
+    };
     // vracia objekt (ak inputChanged === false) alebo string (ak inputChanged === true)
     XAutoCompleteBase.prototype.computeInputValue = function () {
-        var inputValue = null;
+        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;
-            if (typeof this.props.field === 'string') {
-                inputValue = (object !== null) ? object : ""; // TODO - je "" ok?
-            }
-            else {
-                inputValue = (object !== null) ? this.props.field(object) : "";
-            }
+            inputValue = (object !== null) ? object : ""; // TODO - je "" ok?
         }
         else {
             inputValue = this.state.inputValueState;
         }
         return inputValue;
     };
-    XAutoCompleteBase.prototype.itemTemplate = function (suggestion, index) {
-        // @ts-ignore
-        return this.props.field(suggestion);
+    // takto cez metodku, mozno sa metodka vola len ked sa otvori dialog a usetrime nieco...
+    XAutoCompleteBase.prototype.createSearchBrowseParams = function () {
+        return {
+            onChoose: this.searchDialogOnChoose,
+            displayFieldFilter: (this.state.inputChanged ? { field: this.props.field, constraint: { value: this.state.inputValueState, matchMode: "startsWith" } } : undefined),
+            customFilterFunction: this.props.customFilterFunction
+        };
     };
     XAutoCompleteBase.prototype.render = function () {
         var _this = this;
         var _a;
         var readOnly = (_a = this.props.readOnly) !== null && _a !== void 0 ? _a : false;
         var dropdownButton;
-        if (this.props.valueForm) {
-            // mame CRUD operacie, potrebujeme SplitButton
+        if ((this.props.searchBrowse && !readOnly) || this.props.valueForm) {
+            // mame searchBrowse alebo CRUD operacie, potrebujeme SplitButton
             var splitButtonItems = [];
-            splitButtonItems.push({
-                icon: 'pi pi-plus',
-                command: function (e) {
-                    // otvorime dialog na insert
-                    _this.formDialogObjectId = undefined;
-                    _this.formDialogInitObjectForInsert = {};
-                    // ak mame nevalidnu hodnotu, tak ju predplnime (snaha o user friendly)
-                    if (_this.state.inputChanged && typeof _this.props.field === 'string') {
-                        _this.formDialogInitObjectForInsert[_this.props.field] = _this.state.inputValueState;
-                    }
-                    _this.setState({ formDialogOpened: true });
-                }
-            });
-            splitButtonItems.push({
-                icon: 'pi pi-pencil',
-                command: function (e) {
-                    if (_this.state.inputChanged) {
-                        alert("Value \"".concat(_this.state.inputValueState, "\" was not found among valid values, please enter some valid value."));
-                        _this.setFocusToInput();
-                    }
-                    else {
-                        if (_this.props.value === null) {
-                            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.formDialogInitObjectForInsert = undefined;
-                            _this.setState({ formDialogOpened: true });
-                        }
-                    }
-                }
-            });
-            // remove nebudeme podporovat, je technicky problematicky - nemozme vymazat zaznam z DB koli FK constraintu
-            // {
-            //     icon: 'pi pi-times',
-            //     command: (e: any) => {
-            //         console.log('remove');
-            //     }
-            // },
-            splitButtonItems.push({
-                icon: 'pi pi-chevron-down',
-                command: function (e) {
-                    // zobrazi cely suggestions list, zide sa ak chceme vidiet vsetky moznosti
-                    // neprakticke ak mame vela poloziek v suggestions list
-                    // krasne zobrazi cely objekt!
-                    // this.autoCompleteRef.current je element <AutoComplete .../>, ktory vytvarame v render metode
-                    //console.log(this.autoCompleteRef.current);
-                    // otvori dropdown (search je metoda popisana v API, volanie sme skopcili zo zdrojakov primereact)
-                    _this.autoCompleteRef.current.search(e, '', 'dropdown');
-                }
-            });
+            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 });
         }
         else {
@@ -338,14 +362,6 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         }
         // vypocitame inputValue
         var inputValue = this.computeInputValue();
-        // poznamka: asi by sa dalo pouzivat vzdy len itemTemplate (nepouzivat field)
-        var fieldOrItemTemplate;
-        if (typeof this.props.field === 'string') {
-            fieldOrItemTemplate = { field: this.props.field };
-        }
-        else {
-            fieldOrItemTemplate = { itemTemplate: this.itemTemplate };
-        }
         var error;
         if (this.state.notValid) {
             // ak je v nevalidnom stave, tak ma tato chybova hlaska prednost pred ostatnymi (ak nahodou su)
@@ -355,15 +371,18 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             error = this.props.error;
         }
         // Dialog pre konkretny form:
-        // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitObjectForInsert} onSaveOrCancel={this.formDialogOnSaveOrCancel}/>
+        // <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" },
-            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod }, fieldOrItemTemplate, { 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, 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))),
             dropdownButton,
             this.props.valueForm != undefined && !readOnly ?
-                react_1.default.createElement(dialog_1.Dialog, { visible: this.state.formDialogOpened, onHide: this.formDialogOnHide, header: this.formDialogObjectId ? 'Modification' : 'New record' }, react_1.default.cloneElement(this.props.valueForm, {
-                    id: this.formDialogObjectId, object: this.formDialogInitObjectForInsert, onSaveOrCancel: this.formDialogOnSaveOrCancel
-                }, this.props.valueForm.children))
+                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*/))
+                : undefined,
+            this.props.searchBrowse != undefined && !readOnly ?
+                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));
     };
     return XAutoCompleteBase;

package/lib/components/XAutoCompleteDT.d.ts

@@ -6,10 +6,11 @@ import { XError } from "./XErrors";
 import { XTableFieldFilterProp } from "./XFormDataTable2";
 export interface XAutoCompleteDTProps extends XFormComponentDTProps {
     assocField: string;
-    displayField: string | ((suggestion: any) => string);
-    searchTable?: any;
-    assocForm?: any;
+    displayField: string;
+    searchBrowse?: JSX.Element;
+    assocForm?: JSX.Element;
     filter?: XTableFieldFilterProp;
+    suggestions?: any[];
 }
 export declare class XAutoCompleteDT extends XFormComponentDT<XAutoCompleteDTProps> {
     protected xAssoc: XAssoc;

package/lib/components/XAutoCompleteDT.js

@@ -81,15 +81,14 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
             var suggestions;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.xAssoc.entityName, this.getFilterBase(this.props.filter), typeof this.props.displayField === 'string' ? this.props.displayField : undefined)];
+                    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();
-                        // ak mame funkciu, zosortujeme tu
-                        if (typeof this.props.displayField === 'function') {
-                            suggestions = XUtils_1.XUtils.arraySort(suggestions, this.props.displayField);
-                        }
                         this.setState({ suggestions: suggestions });
-                        return [2 /*return*/];
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
                 }
             });
         });
@@ -128,12 +127,14 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
         return _super.prototype.validate.call(this);
     };
     XAutoCompleteDT.prototype.render = function () {
+        var _this = this;
+        var _a;
         var xEntityAssoc = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.xAssoc.entityName);
         //const xDisplayField = XUtilsMetadata.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: this.state.suggestions, onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase }));
+        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 XAutoCompleteDT;
 }(XFormComponentDT_1.XFormComponentDT));

package/lib/components/XCheckboxDT.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { XFormBase } from "./XFormBase";
 import { XField } from "../serverApi/XEntityMetadata";
+import { XTableFieldReadOnlyProp } from "./XFormDataTable2";
 export declare const XCheckboxDT: (props: {
     form: XFormBase;
     xField: XField;
     field: string;
     rowData: any;
-    readOnly?: boolean | undefined;
+    readOnly?: XTableFieldReadOnlyProp | undefined;
 }) => JSX.Element;