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

package/lib/components/{XBrowse.js → XEditBrowse.js}

@@ -101,7 +101,7 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XBrowse = void 0;
+exports.XEditBrowse = void 0;
 var react_1 = __importStar(require("react"));
 var SourceCodeLinkEntity_1 = require("./SourceCodeLinkEntity");
 var XEditColumnDialog_1 = require("./XEditColumnDialog");
@@ -109,10 +109,10 @@ var _ = __importStar(require("lodash"));
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
 var XUtils_1 = require("./XUtils");
 var XLazyDataTable_1 = require("./XLazyDataTable");
-// TODO - pouzit extends XBrowseBase, ako je tomu pri CarForm?
-var XBrowse = /** @class */ (function (_super) {
-    __extends(XBrowse, _super);
-    function XBrowse(props) {
+// TODO - pouzit extends XEditBrowseBase, ako je tomu pri CarForm?
+var XEditBrowse = /** @class */ (function (_super) {
+    __extends(XEditBrowse, _super);
+    function XEditBrowse(props) {
         var _this = _super.call(this, props) || this;
         console.log("************* XBrowse const entity = " + _this.props.entity);
         _this.getXBrowseMeta = _this.getXBrowseMeta.bind(_this);
@@ -137,14 +137,14 @@ var XBrowse = /** @class */ (function (_super) {
         _this.onEdit = _this.onEdit.bind(_this);
         return _this;
     }
-    XBrowse.prototype.getXBrowseMeta = function () {
+    XEditBrowse.prototype.getXBrowseMeta = function () {
         var xBrowseMeta = XUtilsMetadata_1.XUtilsMetadata.getXBrowseMeta(this.props.entity, this.props.browseId);
         if (xBrowseMeta === undefined) {
             xBrowseMeta = this.createDefaultXBrowseMeta();
         }
         return xBrowseMeta;
     };
-    XBrowse.prototype.createDefaultXBrowseMeta = function () {
+    XEditBrowse.prototype.createDefaultXBrowseMeta = function () {
         var e_1, _a;
         var xColumnMetaList = [];
         var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.props.entity);
@@ -164,12 +164,12 @@ var XBrowse = /** @class */ (function (_super) {
         }
         return { entity: this.props.entity, rows: 15, columnMetaList: xColumnMetaList };
     };
-    XBrowse.prototype.onEditModeStart = function () {
+    XEditBrowse.prototype.onEditModeStart = function () {
         // zmeny budeme robit na klonovanych datach - aby sme sa vedeli cez cancel vratit do povodneho stavu
         var xBrowseMetaCloned = _.cloneDeep(this.state.xBrowseMeta);
         this.setState({ xBrowseMeta: xBrowseMetaCloned, editMode: true });
     };
-    XBrowse.prototype.onEditModeSave = function () {
+    XEditBrowse.prototype.onEditModeSave = function () {
         return __awaiter(this, void 0, void 0, function () {
             var xBrowseMeta, columnOrder, _a, _b, xColumnMeta, e_2;
             var e_3, _c;
@@ -213,19 +213,19 @@ var XBrowse = /** @class */ (function (_super) {
             });
         });
     };
-    XBrowse.prototype.onEditModeCancel = function () {
+    XEditBrowse.prototype.onEditModeCancel = function () {
         // vratime formular z cache, resp. defaultny formular
         var xBrowseMeta = this.getXBrowseMeta();
         this.setState({ editMode: false, xBrowseMeta: xBrowseMeta });
     };
-    XBrowse.prototype.onAddColumn = function (field) {
+    XEditBrowse.prototype.onAddColumn = function (field) {
         console.log("onAddColumn: " + field);
         this.indexForAddColumn = this.getIndexForColumn(field);
         this.addColumn = true;
         this.xEditColumnDialogValues = { field: "", header: "", dropdownInFilter: false }; // values are used for dialog initialization
         this.setState({ editColumnDialogOpened: true });
     };
-    XBrowse.prototype.editColumnDialogOnHide = function (xEditColumnDialogValues) {
+    XEditBrowse.prototype.editColumnDialogOnHide = function (xEditColumnDialogValues) {
         if (xEditColumnDialogValues !== null) {
             if (this.indexForAddColumn !== undefined) {
                 var xBrowseMeta = this.state.xBrowseMeta;
@@ -248,7 +248,7 @@ var XBrowse = /** @class */ (function (_super) {
         }
         this.setState({ editColumnDialogOpened: false });
     };
-    XBrowse.prototype.onEditColumn = function (field) {
+    XEditBrowse.prototype.onEditColumn = function (field) {
         var _a;
         console.log("onEditColumn: " + field);
         this.indexForAddColumn = this.getIndexForColumn(field);
@@ -260,7 +260,7 @@ var XBrowse = /** @class */ (function (_super) {
             this.setState({ editColumnDialogOpened: true });
         }
     };
-    XBrowse.prototype.onRemoveColumn = function (field) {
+    XEditBrowse.prototype.onRemoveColumn = function (field) {
         console.log("onRemoveColumn: " + field);
         var index = this.getIndexForColumn(field);
         if (index !== undefined) {
@@ -270,13 +270,13 @@ var XBrowse = /** @class */ (function (_super) {
             this.setState({ xBrowseMeta: xBrowseMeta });
         }
     };
-    XBrowse.prototype.onMoveColumnLeft = function (field) {
+    XEditBrowse.prototype.onMoveColumnLeft = function (field) {
         this.moveColumn(field, -1);
     };
-    XBrowse.prototype.onMoveColumnRight = function (field) {
+    XEditBrowse.prototype.onMoveColumnRight = function (field) {
         this.moveColumn(field, 1);
     };
-    XBrowse.prototype.moveColumn = function (field, offset) {
+    XEditBrowse.prototype.moveColumn = function (field, offset) {
         var index = this.getIndexForColumn(field);
         if (index !== undefined) {
             var xBrowseMeta = this.state.xBrowseMeta;
@@ -285,7 +285,7 @@ var XBrowse = /** @class */ (function (_super) {
             this.setState({ xBrowseMeta: xBrowseMeta });
         }
     };
-    XBrowse.prototype.getIndexForColumn = function (field) {
+    XEditBrowse.prototype.getIndexForColumn = function (field) {
         var e_4, _a;
         var searchedIndex = undefined;
         var xBrowseMeta = this.state.xBrowseMeta;
@@ -307,7 +307,7 @@ var XBrowse = /** @class */ (function (_super) {
         }
         return searchedIndex;
     };
-    XBrowse.prototype.onEdit = function (selectedRow) {
+    XEditBrowse.prototype.onEdit = function (selectedRow) {
         var formElement = XUtils_1.XUtils.getAppForm(this.props.entity);
         if (formElement !== undefined) {
             var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.props.entity);
@@ -321,7 +321,7 @@ var XBrowse = /** @class */ (function (_super) {
             console.log("XBrowse entity = ".concat(this.props.entity, ": form not found/registered."));
         }
     };
-    XBrowse.prototype.render = function () {
+    XEditBrowse.prototype.render = function () {
         var xBrowseMeta = this.state.xBrowseMeta;
         var xEditModeHandlers = {
             onStart: this.onEditModeStart,
@@ -355,6 +355,6 @@ var XBrowse = /** @class */ (function (_super) {
             entitySourceCodeLink,
             react_1.default.createElement(XEditColumnDialog_1.XEditColumnDialog, { dialogOpened: this.state.editColumnDialogOpened, entity: xBrowseMeta.entity, addColumn: this.addColumn, xEditColumnDialogValues: this.xEditColumnDialogValues, onHideDialog: this.editColumnDialogOnHide })));
     };
-    return XBrowse;
+    return XEditBrowse;
 }(react_1.Component));
-exports.XBrowse = XBrowse;
+exports.XEditBrowse = XEditBrowse;

package/lib/components/XFormBase.d.ts

@@ -5,9 +5,9 @@ import { FieldOnChange, XFormComponent } from "./XFormComponent";
 import { TableFieldOnChange, XFormDataTable2, XRowTechData } from "./XFormDataTable2";
 import { XErrorMap, XErrors } from "./XErrors";
 export type XOnSaveOrCancelProp = (object: XObject | null, objectChange: OperationType) => void;
-export interface FormProps {
+export interface XFormProps {
     id?: number;
-    object?: XObject;
+    initValues?: object;
     onSaveOrCancel?: XOnSaveOrCancelProp;
 }
 export declare function Form(entity: string): <T extends new (...args: any[]) => {}>(constructor: T) => {
@@ -15,7 +15,7 @@ export declare function Form(entity: string): <T extends new (...args: any[]) =>
         entity: string;
     };
 } & T;
-export declare abstract class XFormBase extends Component<FormProps> {
+export declare abstract class XFormBase extends Component<XFormProps> {
     entity?: string;
     fields: Set<string>;
     state: {
@@ -29,7 +29,7 @@ export declare abstract class XFormBase extends Component<FormProps> {
         assoc: string;
         sortField: string;
     }>;
-    constructor(props: FormProps);
+    constructor(props: XFormProps);
     componentDidMount(): Promise<void>;
     getEntity(): string;
     getXObject(): XObject;
@@ -61,6 +61,7 @@ export declare abstract class XFormBase extends Component<FormProps> {
     getErrorMessagesForAssoc(oneToManyAssoc: string): string;
     static saveErrorsIntoXRowTechData(row: any, xErrors: XErrors): void;
     formReadOnly(object: XObject, field: string): boolean;
+    createNewObject(): XObject;
     preInitForm(object: XObject, operationType: OperationType.Insert | OperationType.Update): void;
     validate(object: XObject): XErrors;
     preSave(object: XObject): void;

package/lib/components/XFormBase.js

@@ -116,20 +116,20 @@ var XFormBase = /** @class */ (function (_super) {
     function XFormBase(props) {
         var _this = _super.call(this, props) || this;
         // check
-        if (props.id !== undefined && props.object !== undefined) {
-            throw "Form cannot have both props id and object defined. Only one of them can be defined.";
+        if (props.id !== undefined && props.initValues !== undefined) {
+            throw "Form cannot have both props id and initValues defined. Only one of them can be defined.";
         }
         //this.entity = props.entity; - nastavuje sa cez decorator @Form
         var object = null;
-        if (props.id === undefined) {
-            // add row operation
-            if (props.object !== undefined) {
-                object = props.object;
-            }
-            else {
-                object = {}; // empty new object
-            }
-        }
+        // if (props.id === undefined) {
+        //     // add row operation
+        //     if (props.object !== undefined) {
+        //         object = props.object;
+        //     }
+        //     else {
+        //         object = {}; // empty new object
+        //     }
+        // }
         _this.fields = new Set();
         _this.state = {
             object: object,
@@ -182,7 +182,11 @@ var XFormBase = /** @class */ (function (_super) {
                         return [3 /*break*/, 3];
                     case 2:
                         // add new row
-                        object = this.state.object;
+                        object = this.createNewObject();
+                        // pridame pripadne "init values", ktore pridu cez prop object (pouziva sa napr. pri insertovani cez XAutoComplete na predplnenie hodnoty)
+                        if (this.props.initValues !== undefined) {
+                            object = __assign(__assign({}, object), this.props.initValues); // values from this.props.object will override values from object (if key is the same)
+                        }
                         operationType = XUtils_1.OperationType.Insert;
                         _d.label = 3;
                     case 3:
@@ -590,6 +594,10 @@ var XFormBase = /** @class */ (function (_super) {
     XFormBase.prototype.formReadOnly = function (object, field) {
         return false;
     };
+    // this method can be overriden in subclass if needed (to set some default values for insert)
+    XFormBase.prototype.createNewObject = function () {
+        return {};
+    };
     // this method can be overriden in subclass if needed (to modify/save object after read from DB and before set into the form)
     XFormBase.prototype.preInitForm = function (object, operationType) {
     };

package/lib/components/XFormDataTable2.d.ts

@@ -66,7 +66,6 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     };
     constructor(props: XFormDataTableProps);
     getPathForColumn(columnProps: XFormColumnProps): string;
-    getDisplayFieldOrId(columnPropsAutoComplete: XFormAutoCompleteColumnProps): string;
     static getHeader(columnProps: XFormColumnProps, xEntity: XEntity, field: string, xField: XField): string;
     getEntity(): string;
     createInitFilters(): DataTableFilterMeta;
@@ -108,15 +107,16 @@ export interface XFormDropdownColumnProps extends XFormColumnProps {
 }
 export interface XFormAutoCompleteColumnProps extends XFormColumnProps {
     assocField: string;
-    displayField: string | ((suggestion: any) => string);
-    searchTable?: any;
-    assocForm?: any;
+    displayField: string;
+    searchBrowse?: JSX.Element;
+    assocForm?: JSX.Element;
     filter?: XTableFieldFilterProp;
+    suggestions?: any[];
 }
 export interface XFormSearchButtonColumnProps extends XFormColumnProps {
     assocField: string;
     displayField: string;
-    searchTable: any;
+    searchBrowse: JSX.Element;
 }
 export declare const XFormColumn: {
     (props: XFormInputSimpleColumnProps): null;

package/lib/components/XFormDataTable2.js

@@ -140,7 +140,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         else if (columnProps.type === "autoComplete") {
             var columnPropsAutoComplete = columnProps;
-            return columnPropsAutoComplete.assocField + '.' + this.getDisplayFieldOrId(columnPropsAutoComplete);
+            return columnPropsAutoComplete.assocField + '.' + columnPropsAutoComplete.displayField;
         }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
@@ -150,19 +150,6 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             throw "Unknown prop type = " + columnProps.type;
         }
     };
-    XFormDataTable2.prototype.getDisplayFieldOrId = function (columnPropsAutoComplete) {
-        // toto je hack - ak ratame displayField cez funkciu, tak nam potom v kode chyba (hociaky) atribut asociovaneho objektu
-        // aby sme nemuseli robit nejake velke prerabky a zmeny, tak podsunieme id-ckovy atribut
-        if (typeof columnPropsAutoComplete.displayField === 'string') {
-            return columnPropsAutoComplete.displayField; // vsetko ok
-        }
-        else {
-            // v displayField mame funkciu, zistime id-ckovy atribut
-            // TODO - problem - sortovanie/filtrovanie bude fungovat podla tohto id atributu
-            var xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.getEntity()), columnPropsAutoComplete.assocField);
-            return XUtilsMetadata_1.XUtilsMetadata.getXEntity(xAssoc.entityName).idField;
-        }
-    };
     XFormDataTable2.getHeader = function (columnProps, xEntity, field, xField) {
         var _a, _b, _c, _d;
         // poznamky - parametre field a xField by sme mohli vyratavat na zaklade columnProps ale kedze ich uz mame, setrime performance a neduplikujeme vypocet
@@ -369,11 +356,11 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             var columnPropsAutoComplete = columnProps;
             // tableReadOnly has higher prio then property readOnly
             var readOnly = tableReadOnly || ((_b = columnPropsAutoComplete.readOnly) !== null && _b !== void 0 ? _b : false);
-            body = react_1.default.createElement(XAutoCompleteDT_1.XAutoCompleteDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsAutoComplete.assocField, displayField: columnPropsAutoComplete.displayField, searchTable: columnPropsAutoComplete.searchTable, assocForm: columnPropsAutoComplete.assocForm, filter: columnPropsAutoComplete.filter, rowData: rowData, readOnly: readOnly });
+            body = react_1.default.createElement(XAutoCompleteDT_1.XAutoCompleteDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsAutoComplete.assocField, displayField: columnPropsAutoComplete.displayField, searchBrowse: columnPropsAutoComplete.searchBrowse, assocForm: columnPropsAutoComplete.assocForm, filter: columnPropsAutoComplete.filter, suggestions: columnPropsAutoComplete.suggestions, rowData: rowData, readOnly: readOnly });
         }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
-            body = react_1.default.createElement(XSearchButtonDT_1.XSearchButtonDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsSearchButton.assocField, displayField: columnPropsSearchButton.displayField, searchTable: columnPropsSearchButton.searchTable, rowData: rowData, readOnly: columnPropsSearchButton.readOnly });
+            body = react_1.default.createElement(XSearchButtonDT_1.XSearchButtonDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsSearchButton.assocField, displayField: columnPropsSearchButton.displayField, searchBrowse: columnPropsSearchButton.searchBrowse, rowData: rowData, readOnly: columnPropsSearchButton.readOnly });
         }
         else {
             throw "Unknown prop type = " + columnProps.type;

package/lib/components/XFormNavigator3.d.ts

@@ -1,12 +1,12 @@
 import { Component } from "react";
 export interface XFormNavigator3Props {
-    rootFormElement?: any;
+    rootFormElement?: JSX.Element;
 }
 export declare class XFormNavigator3 extends Component<XFormNavigator3Props> {
     state: {
-        formElements: any[];
+        formElements: JSX.Element[];
     };
     constructor(props: XFormNavigator3Props);
-    openForm(newFormElement: any): void;
+    openForm(newFormElement: JSX.Element | null): void;
     render(): JSX.Element;
 }

package/lib/components/XFormNavigator3.js

@@ -110,11 +110,11 @@ var XFormNavigator3 = /** @class */ (function (_super) {
     };
     XFormNavigator3.prototype.render = function () {
         var _this = this;
-        var formElements = this.props.rootFormElement !== null ? __spreadArray([this.props.rootFormElement], __read(this.state.formElements), false) : this.state.formElements;
+        var formElements = this.props.rootFormElement ? __spreadArray([this.props.rootFormElement], __read(this.state.formElements), false) : this.state.formElements;
         var forms = formElements.map(function (formElement, index) {
             var displayed = (index === formElements.length - 1);
             // klonovanim elementu pridame atribut openForm={this.openForm} (nemusime tento atribut pridavat pri vytvarani elementu)
-            var formElementCloned = react_1.default.cloneElement(formElement, { openForm: _this.openForm, displayed: displayed }, formElement.children);
+            var formElementCloned = react_1.default.cloneElement(formElement, { openForm: _this.openForm, displayed: displayed } /*, (formElement as any).children*/);
             // prvych n - 1 komponentov skryjeme cez display: "none" a az posledny vyrenderujeme naozaj (cez display: "block")
             // TODO - do buducnosti - ak nechceme drzat stav componentu cez display: "none", staci vratit null (komponent vobec nevyrenderujeme)
             var display = (displayed ? "block" : "none");

package/lib/components/XLazyDataTable.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactChild } from 'react';
 import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData } from 'primereact/datatable';
 import { ColumnBodyOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
-import { SearchTableParams } from "./SearchTableParams";
+import { XSearchBrowseParams } from "./XSearchBrowseParams";
 import { XAggregateType, XCustomFilter } from "../serverApi/FindParam";
 import { XOnSaveOrCancelProp } from "./XFormBase";
 export type XBetweenFilterProp = "row" | "column" | undefined;
@@ -15,6 +15,13 @@ export interface XEditModeHandlers {
     onMoveColumnLeft: (field: string) => void;
     onMoveColumnRight: (field: string) => void;
 }
+export interface XBrowseProps {
+    displayed?: boolean;
+    openForm?: (newFormElement: JSX.Element | null) => void;
+}
+export interface XSearchBrowseProps {
+    searchBrowseParams?: XSearchBrowseParams;
+}
 export interface XLazyDataTableProps {
     entity: string;
     dataKey?: string;
@@ -35,7 +42,7 @@ export interface XLazyDataTableProps {
     filters?: DataTableFilterMeta;
     customFilter?: XCustomFilter;
     sortField?: string;
-    searchTableParams?: SearchTableParams;
+    searchBrowseParams?: XSearchBrowseParams;
     width?: string;
     dataLoadedState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
     editMode?: boolean;

package/lib/components/XLazyDataTable.js

@@ -208,13 +208,15 @@ var XLazyDataTable = function (props) {
     if (props.filters) {
         filtersInit = __assign(__assign({}, filtersInit), props.filters); // items from props.filters will replace existing items in filtersInit
     }
-    if (props.searchTableParams !== undefined) {
-        var displayFieldFilter = props.searchTableParams.displayFieldFilter;
+    if (props.searchBrowseParams !== undefined) {
+        var displayFieldFilter = props.searchBrowseParams.displayFieldFilter;
         if (displayFieldFilter !== undefined) {
             filtersInit[displayFieldFilter.field] = createFilterItem(props.filterDisplay, displayFieldFilter.constraint);
         }
-        // ak mame props.searchTableParams.customFilterItems, pridame ho
-        customFilterItems = XUtils_1.XUtils.filterAnd(customFilterItems, props.searchTableParams.customFilter);
+        // ak mame props.searchBrowseParams.customFilterFunction, pridame filter
+        if (props.searchBrowseParams.customFilterFunction) {
+            customFilterItems = XUtils_1.XUtils.filterAnd(customFilterItems, props.searchBrowseParams.customFilterFunction());
+        }
     }
     var _f = __read((0, react_1.useState)(filtersInit), 2), filters = _f[0], setFilters = _f[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
     var _g = __read((0, react_1.useState)(props.sortField ? [{ field: props.sortField, order: 1 }] : []), 2), multiSortMeta = _g[0], setMultiSortMeta = _g[1];
@@ -364,11 +366,11 @@ var XLazyDataTable = function (props) {
     var onRowDoubleClick = function (event) {
         //console.log("zavolany onRowDoubleClick");
         //console.log(event.data);
-        if (props.onEdit !== undefined) {
+        if (props.onEdit !== undefined && props.searchBrowseParams === undefined) {
             props.onEdit(event.data);
         }
-        else if (props.searchTableParams !== undefined) {
-            props.searchTableParams.onChoose(event.data);
+        else if (props.searchBrowseParams !== undefined) {
+            props.searchBrowseParams.onChoose(event.data);
         }
     };
     var onClickAddRow = function () {
@@ -472,8 +474,8 @@ var XLazyDataTable = function (props) {
     var onClickChoose = function () {
         //console.log("zavolany onClickChoose");
         if (selectedRow !== null) {
-            if (props.searchTableParams !== undefined) {
-                props.searchTableParams.onChoose(selectedRow);
+            if (props.searchBrowseParams !== undefined) {
+                props.searchBrowseParams.onChoose(selectedRow);
             }
         }
         else {
@@ -648,7 +650,7 @@ var XLazyDataTable = function (props) {
                 // }
                 var viewHeight = void 0;
                 var headerFooterHeight = void 0;
-                if (props.searchTableParams === undefined) {
+                if (props.searchBrowseParams === undefined) {
                     // sme v standardnom formulari
                     viewHeight = '100vh';
                     // experimentalne zistena vyska header/footer
@@ -717,7 +719,7 @@ var XLazyDataTable = function (props) {
     }
     // else - editMode is undefined - browse is not editable
     // export pre search button-y zatial vypneme
-    var exportRows = (props.searchTableParams === undefined);
+    var exportRows = (props.searchBrowseParams === undefined);
     // pre lepsiu citatelnost vytvarame stlpce uz tu
     var columnElemList = react_1.default.Children.map(props.children, function (child) {
         // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
@@ -873,12 +875,12 @@ var XLazyDataTable = function (props) {
         react_1.default.createElement("div", { className: "flex justify-content-center" },
             react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: props.paginator, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filterDisplay: props.filterDisplay, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
-            props.onAddRow !== 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 ? react_1.default.createElement(XButton_1.XButton, { key: "editRow", icon: "pi pi-pencil", label: (0, XLocale_1.xLocaleOption)('editRow'), onClick: onClickEdit }) : null,
-            props.removeRow !== undefined && props.removeRow !== false ? react_1.default.createElement(XButton_1.XButton, { key: "removeRow", icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('removeRow'), onClick: onClickRemoveRow }) : null,
+            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,
+            props.removeRow !== undefined && props.removeRow !== false && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "removeRow", icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('removeRow'), onClick: onClickRemoveRow }) : null,
             exportRows ? react_1.default.createElement(XButton_1.XButton, { key: "exportRows", icon: "pi pi-file-export", label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onClickExport }) : null,
             props.appButtons,
-            props.searchTableParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "choose", label: (0, XLocale_1.xLocaleOption)('chooseRow'), onClick: onClickChoose }) : null,
+            props.searchBrowseParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "choose", label: (0, XLocale_1.xLocaleOption)('chooseRow'), onClick: onClickChoose }) : null,
             exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { key: "exportRowsDialog", dialogOpened: exportRowsDialogOpened, hideDialog: function () { return setExportRowsDialogOpened(false); }, rowCount: exportRowsDialogRowCount, exportParams: createExportParams }) : null)));
 };
 exports.XLazyDataTable = XLazyDataTable;

package/lib/components/{SearchTableParams.d.ts → XSearchBrowseParams.d.ts}

@@ -4,8 +4,8 @@ export interface XFieldFilter {
     field: string;
     constraint: DataTableFilterMetaData;
 }
-export interface SearchTableParams {
+export interface XSearchBrowseParams {
     onChoose: (chosenRow: any) => void;
     displayFieldFilter?: XFieldFilter;
-    customFilter?: XCustomFilter;
+    customFilterFunction?: () => XCustomFilter | undefined;
 }

package/lib/components/XSearchButton.d.ts

@@ -5,8 +5,8 @@ import { XObject } from "./XObject";
 export interface XSearchButtonProps extends XFormComponentProps<XObject> {
     assocField: string;
     displayField: string;
-    searchTable: any;
-    assocForm?: any;
+    searchBrowse: JSX.Element;
+    assocForm?: JSX.Element;
     filter?: XFilterProp;
     size?: number;
     inputStyle?: React.CSSProperties;

package/lib/components/XSearchButton.js

@@ -166,7 +166,7 @@ var XSearchButton = /** @class */ (function (_super) {
             setInputChanged(false);
         };
         var onClickSearch = function (e) {
-            console.log("zavolany onClickSearch");
+            //console.log("zavolany onClickSearch");
             if (!_this.isReadOnly()) {
                 setDialogOpened(true);
                 // POVODNY KOD
@@ -178,13 +178,13 @@ var XSearchButton = /** @class */ (function (_super) {
                     // OTAZKA - ziskavat id priamo z root objektu? potom ho vsak treba do root objektu pridat
                     var id = (assocObject !== null) ? assocObject[xEntityAssoc.idField] : null;
                     // klonovanim elementu pridame atribut id
-                    var assocForm = react_1.default.cloneElement(props.assocForm, { id: id }, props.assocForm.children);
+                    var assocForm = react_1.default.cloneElement(props.assocForm, { id: id } /*, props.assocForm.children*/);
                     props.form.props.openForm(assocForm);
                 }
             }
         };
         var onChoose = function (chosenRow) {
-            console.log("zavolany onChoose");
+            //console.log("zavolany onChoose");
             // zavrieme search dialog
             // POVODNY KOD
             //overlayPanelEl.current.hide();
@@ -199,14 +199,12 @@ var XSearchButton = /** @class */ (function (_super) {
                 _this.inputTextRef.current.focus();
             }
         };
-        // {React.createElement(props.searchTable, {searchTableParams: {onChoose: onChoose, displayField: props.displayField, filter: (inputChanged ? inputValueState : undefined)}, ...props.searchTableProps}, null)}
-        // <BrandSearchTable searchTableParams={{onChoose: onChoose, displayField: props.displayField, filter: (inputChanged ? inputValueState : undefined)}} qqq="fiha"/>
         // takto cez metodku, mozno sa metodka vola len ked sa otvori dialog a usetrime nieco...
-        var createSearchTableParams = function () {
+        var createSearchBrowseParams = function () {
             return {
                 onChoose: onChoose,
                 displayFieldFilter: (inputChanged ? { field: props.displayField, constraint: { value: inputValueState, matchMode: "startsWith" } } : undefined),
-                customFilter: _this.getFilterBase(_this.props.filter)
+                customFilterFunction: function () { return _this.getFilterBase(_this.props.filter); }
             };
         };
         // vypocitame inputValue
@@ -215,10 +213,8 @@ var XSearchButton = /** @class */ (function (_super) {
             react_1.default.createElement("label", { htmlFor: props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
             react_1.default.createElement("div", { className: "x-search-button-base" },
                 react_1.default.createElement(inputtext_1.InputText, __assign({ id: props.assocField, value: inputValue, onChange: onInputValueChange, onBlur: onInputBlur, readOnly: this.isReadOnly(), ref: this.inputTextRef, maxLength: xDisplayField.length, size: size, style: props.inputStyle }, this.getClassNameTooltip())),
-                react_1.default.createElement(button_1.Button, { label: "...", onClick: onClickSearch })),
-            react_1.default.createElement(dialog_1.Dialog, { visible: dialogOpened, onHide: onHide }, react_1.default.cloneElement(props.searchTable, {
-                searchTableParams: createSearchTableParams()
-            }, props.searchTable.children))));
+                react_1.default.createElement(button_1.Button, { icon: "pi pi-search", onClick: onClickSearch })),
+            react_1.default.createElement(dialog_1.Dialog, { visible: dialogOpened, onHide: onHide }, react_1.default.cloneElement(props.searchBrowse, { searchBrowseParams: createSearchBrowseParams() } /*, props.searchBrowse.children*/))));
     };
     return XSearchButton;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XSearchButtonDT.d.ts

@@ -5,8 +5,8 @@ export declare const XSearchButtonDT: (props: {
     entity: string;
     assocField: string;
     displayField: string;
-    searchTable: any;
-    assocForm?: any;
+    searchBrowse: JSX.Element;
+    assocForm?: JSX.Element | undefined;
     rowData: any;
     readOnly?: boolean | undefined;
 }) => JSX.Element;

package/lib/components/XSearchButtonDT.js

@@ -155,7 +155,7 @@ var XSearchButtonDT = function (props) {
                     // OTAZKA - ziskavat id priamo z root objektu? potom ho vsak treba do root objektu pridat
                     var id = (assocObject !== null && assocObject !== undefined) ? assocObject[xEntityAssoc.idField] : null;
                     // klonovanim elementu pridame atribut id
-                    var assocForm = react_1.default.cloneElement(props.assocForm, { id: id }, props.assocForm.children);
+                    var assocForm = react_1.default.cloneElement(props.assocForm, { id: id } /*, props.assocForm.children*/);
                     props.form.props.openForm(assocForm);
                 }
             }
@@ -175,14 +175,18 @@ var XSearchButtonDT = function (props) {
             inputTextRef.current.focus();
         }
     };
-    // {React.createElement(props.searchTable, {searchTableParams: {onChoose: onChoose, displayField: props.displayField, filter: (inputChanged ? inputValueState : undefined)}, ...props.searchTableProps}, null)}
-    // <BrandSearchTable searchTableParams={{onChoose: onChoose, displayField: props.displayField, filter: (inputChanged ? inputValueState : undefined)}} qqq="fiha"/>
     // vypocitame inputValue
     var inputValue = computeInputValue();
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "x-search-button-base" },
             react_1.default.createElement(inputtext_1.InputText, { id: props.assocField, value: inputValue, onChange: onInputValueChange, onBlur: onInputBlur, readOnly: readOnly, ref: inputTextRef }),
-            react_1.default.createElement(button_1.Button, { label: "...", onClick: onClickSearch })),
-        react_1.default.createElement(dialog_1.Dialog, { visible: dialogOpened, onHide: onHide }, react_1.default.cloneElement(props.searchTable, { searchTableParams: { onChoose: onChoose, displayField: props.displayField, filter: (inputChanged ? inputValueState : undefined) } }, props.searchTable.children))));
+            react_1.default.createElement(button_1.Button, { icon: "pi pi-search", onClick: onClickSearch })),
+        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
+            }
+        } /*, props.searchBrowse.children*/))));
 };
 exports.XSearchButtonDT = XSearchButtonDT;

package/lib/components/XUtils.d.ts

@@ -67,6 +67,24 @@ export declare class XUtils {
     static removeRow(entity: string, row: any): Promise<void>;
     static arrayMoveElement(array: any[], position: number, offset: number): void;
     static arraySort(array: any[], fieldOrStringFunction: string | ((item: any) => string)): any[];
+    /**
+     * returns true, if param item is member of the array
+     * remark: null/undefined items in array are ignored, item = null/undefined is ignored
+     *
+     * @param array
+     * @param item
+     * @param idField
+     */
+    static arrayIncludes<T>(array: T[], item: T, idField: string): boolean;
+    /**
+     * returns intersection of 2 row lists
+     * remark: null/undefined items in both array1 and array2 are ignored
+     *
+     * @param array1
+     * @param array2
+     * @param idField
+     */
+    static arrayIntersect<T>(array1: T[], array2: T[], idField: string): T[];
     static isReadOnly(path: string, readOnlyInit?: boolean): boolean;
     static markNotNull(label: string): string;
     static showErrorMessage(message: string, e: unknown): void;