@michalrakus/x-react-web-lib 1.31.2 → 1.32.0

package/lib/components/XAutoCompleteDT.d.ts

@@ -16,6 +16,7 @@ export interface XAutoCompleteDTProps extends XFormComponentDTProps {
     suggestionsLoad?: XSuggestionsLoadProp;
     lazyLoadMaxRows?: number;
     splitQueryValue?: boolean;
+    addRowEnabled: boolean;
     minLength?: number;
     filter?: XTableFieldFilterProp;
     sortField?: string | DataTableSortMeta[];

package/lib/components/XAutoCompleteDT.js

@@ -68,7 +68,7 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
         // 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(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, itemTemplate: this.props.itemTemplate, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, inputClassName: this.props.inputClassName }));
+        return (react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, itemTemplate: this.props.itemTemplate, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, addRowEnabled: this.props.addRowEnabled, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, inputClassName: this.props.inputClassName }));
     };
     return XAutoCompleteDT;
 }(XFormComponentDT_1.XFormComponentDT));

package/lib/components/XFormDataTable2.d.ts

@@ -116,6 +116,7 @@ export interface XFormAutoCompleteColumnProps extends XFormColumnBaseProps {
     displayField: string;
     searchBrowse?: JSX.Element;
     assocForm?: JSX.Element;
+    addRowEnabled: boolean;
     filter?: XTableFieldFilterProp;
     sortField?: string | DataTableSortMeta[];
     fields?: string[];
@@ -153,6 +154,7 @@ export declare const XFormAutoCompleteColumn: {
     (props: XFormAutoCompleteColumnProps): null;
     defaultProps: {
         type: string;
+        addRowEnabled: boolean;
         columnViewStatus: boolean;
     };
 };

package/lib/components/XFormDataTable2.js

@@ -404,7 +404,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         else if (columnProps.type === "autoComplete") {
             var columnPropsAutoComplete = columnProps;
-            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, sortField: columnPropsAutoComplete.sortField, fields: columnPropsAutoComplete.fields, suggestions: columnPropsAutoComplete.suggestions, 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, addRowEnabled: columnPropsAutoComplete.addRowEnabled, filter: columnPropsAutoComplete.filter, sortField: columnPropsAutoComplete.sortField, fields: columnPropsAutoComplete.fields, suggestions: columnPropsAutoComplete.suggestions, rowData: rowData, readOnly: readOnly });
         }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
@@ -737,7 +737,7 @@ var XFormAutoCompleteColumn = function (props) {
     return (null);
 };
 exports.XFormAutoCompleteColumn = XFormAutoCompleteColumn;
-exports.XFormAutoCompleteColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "autoComplete" });
+exports.XFormAutoCompleteColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "autoComplete", addRowEnabled: true });
 var XFormSearchButtonColumn = function (props) {
     // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
     return (null);

package/lib/components/XFtsInput.js

@@ -15,16 +15,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFtsInput = void 0;
-var inputtext_1 = require("primereact/inputtext");
 var react_1 = __importDefault(require("react"));
-var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
+var XInputTextBase_1 = require("./XInputTextBase");
 var XFtsInput = function (props) {
-    var onChange = function (e) {
-        var value = (0, XUtilsConversions_1.stringFromUI)(e.target.value);
+    var onChange = function (value) {
         props.value.value = value;
         props.onChange(__assign({}, props.value)); // vyklonujeme aby react zaregistroval, ze sme urobili zmenu
     };
     // TODO - pridat input na zmenu matchMode
-    return (react_1.default.createElement(inputtext_1.InputText, { value: (0, XUtilsConversions_1.stringAsUI)(props.value.value), onChange: onChange, style: { height: '2.5rem', width: '17rem' }, className: "m-1" }));
+    // we use XInputTextBase - we save onChange calls
+    return (react_1.default.createElement(XInputTextBase_1.XInputTextBase, { value: props.value.value, onChange: onChange, style: { height: '2.5rem', width: '17rem' }, className: "m-1" }));
 };
 exports.XFtsInput = XFtsInput;

package/lib/components/XInputTextBase.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export declare const XInputTextBase: {
+    (props: {
+        id?: string | undefined;
+        value: string | null;
+        onChange: (value: string | null) => void;
+        readOnly?: boolean | undefined;
+        maxLength?: number | undefined;
+        size?: string | number | undefined;
+        placeholder?: string | undefined;
+        className?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        error?: string | undefined;
+    }): React.JSX.Element;
+    defaultProps: {};
+};

package/lib/components/XInputTextBase.js

@@ -0,0 +1,98 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XInputTextBase = void 0;
+var react_1 = __importStar(require("react"));
+var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
+var XUtils_1 = require("./XUtils");
+var inputtext_1 = require("primereact/inputtext");
+// koli optimalizacii - typovany text si zapisuje do svojej stavovej premennej a onChange zavola az z onBlur
+// used for filter element in XLazyDataTable - if there was many rows/columns in datatable, typing in filter was slow (if setState was called after every character change)
+var XInputTextBase = function (props) {
+    // true, ak uzivatel typuje hodnotu
+    // false, ak uz uzivatel dotypoval (zavolal sa onBlur) - hodnotu berieme "z hora" (z prop.value)
+    var _a = __read((0, react_1.useState)(false), 2), inputChanged = _a[0], setInputChanged = _a[1];
+    // pouzivane, len ak inputChanged === true, je tu zapisana zmenena hodnota v inpute
+    var _b = __read((0, react_1.useState)(undefined), 2), inputValueState = _b[0], setInputValueState = _b[1];
+    var onChange = function (e) {
+        // standardne prichadza z Calendar e.value - typ Date alebo null
+        // typ Date prichadza ak uzivatel vyplnil validny datum, null (typeof e.value vracia "object") prichadza ak uzivatel vymazal datum
+        // alebo je este datum nekompletny (uzivatel prave zadava datum)
+        // nastavili sme keepInvalid={true} -> bude chodit nevalidny string (typeof e.value vracia "string")
+        // naviac sme vypli parsovanie na datum (metoda parseDateTime), takze vzdy chodi "string" a konverziu robime v onBlur
+        //const value: string | null = stringFromUI(e.target.value);
+        setInputChanged(true);
+        setInputValueState(e.target.value); // vzdycky string
+    };
+    var onBlur = function (e) {
+        if (inputChanged) {
+            // poznamka: e.target.value aj inputValueState obsahuju tu istu string hodnotu
+            var value = (0, XUtilsConversions_1.stringFromUI)(e.target.value);
+            props.onChange(value);
+            setInputChanged(false);
+            setInputValueState(undefined); // pre poriadok
+        }
+    };
+    var getInputValue = function () {
+        var inputValue;
+        if (inputChanged) {
+            inputValue = inputValueState; // vzdycky string
+        }
+        else {
+            inputValue = (0, XUtilsConversions_1.stringAsUI)(props.value);
+        }
+        return inputValue;
+    };
+    return (react_1.default.createElement(inputtext_1.InputText, __assign({ id: props.id, value: getInputValue(), onChange: onChange, onBlur: onBlur, readOnly: props.readOnly, maxLength: props.maxLength, size: props.size, className: props.className, style: props.style }, XUtils_1.XUtils.createTooltipOrErrorProps(props.error), { placeholder: props.placeholder })));
+};
+exports.XInputTextBase = XInputTextBase;
+exports.XInputTextBase.defaultProps = {};

package/lib/components/XLazyDataTable/XLazyDataTable.d.ts

@@ -98,6 +98,17 @@ export type XFilterElementParams = {
     options: ColumnFilterElementTemplateOptions;
 };
 export type XFilterElementProp = (params: XFilterElementParams) => React.ReactNode;
+export type XAutoCompleteInFilterProps = {
+    assocField?: string;
+    filter?: XCustomFilter;
+    sortField?: string | DataTableSortMeta[];
+    lazyLoadMaxRows?: number;
+    field?: string | string[];
+    searchBrowse?: JSX.Element;
+    valueForm?: JSX.Element;
+    minLength?: number;
+    scrollHeight?: string;
+};
 export type XContentType = "multiline" | "html" | undefined;
 export interface XLazyColumnProps {
     field: string;
@@ -106,6 +117,7 @@ export interface XLazyColumnProps {
     dropdownInFilter?: boolean;
     dropdownFilter?: XCustomFilter;
     dropdownSortField?: string;
+    autoComplete?: XAutoCompleteInFilterProps | true;
     showFilterMenu?: boolean;
     betweenFilter?: XBetweenFilterProp | "noBetween";
     width?: string;

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -120,7 +120,7 @@ var XButtonIconSmall_1 = require("../XButtonIconSmall");
 var tristatecheckbox_1 = require("primereact/tristatecheckbox");
 var XUtilsCommon_1 = require("../../serverApi/XUtilsCommon");
 var XExportRowsDialog_1 = require("./XExportRowsDialog");
-var api_1 = require("primereact/api");
+var api_1 = __importStar(require("primereact/api"));
 var XCalendar_1 = require("../XCalendar");
 var XInputDecimalBase_1 = require("../XInputDecimalBase");
 var XLocale_1 = require("../XLocale");
@@ -132,6 +132,8 @@ var XMultilineRenderer_1 = require("./XMultilineRenderer");
 var XHtmlRenderer_1 = require("./XHtmlRenderer");
 var XOcfDropdown_1 = require("./XOcfDropdown");
 var XFieldSetBase_1 = require("../XFieldSet/XFieldSetBase");
+var XAutoCompleteBase_1 = require("../XAutoCompleteBase");
+var XInputTextBase_1 = require("../XInputTextBase");
 var XLazyDataTable = function (props) {
     var _a;
     // must be here, is used in createInitFilters()
@@ -170,7 +172,7 @@ var XLazyDataTable = function (props) {
                 var field = xLazyColumn.props.field;
                 var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
                 // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
-                var filterMatchMode = getFilterMatchMode(xField);
+                var filterMatchMode = getInitFilterMatchMode(xLazyColumn.props, xField);
                 initFilters[field] = createFilterItem(props.filterDisplay, { value: null, matchMode: filterMatchMode });
             }
         }
@@ -183,9 +185,12 @@ var XLazyDataTable = function (props) {
         }
         return initFilters;
     };
-    var getFilterMatchMode = function (xField) {
+    var getInitFilterMatchMode = function (xLazyColumnProps, xField) {
         var filterMatchMode;
-        if (xField.type === "string" || xField.type === "jsonb") {
+        if (isAutoCompleteInFilterEnabled(xLazyColumnProps)) {
+            filterMatchMode = FindParam_1.XFilterMatchMode.X_AUTO_COMPLETE; // little hack
+        }
+        else if (xField.type === "string" || xField.type === "jsonb") {
             filterMatchMode = api_1.FilterMatchMode.CONTAINS;
         }
         // zatial vsetky ostatne EQUALS
@@ -197,6 +202,40 @@ var XLazyDataTable = function (props) {
         }
         return filterMatchMode;
     };
+    var isAutoCompleteInFilterEnabled = function (xLazyColumnProps) {
+        return xLazyColumnProps.autoComplete !== undefined;
+    };
+    /*  old version - created for automatical use of autocomplete on every *toOne assoc with string attribute
+                    - extra property was used: autoCompleteEnabled: true | false | "forStringOnly"
+        const isAutoCompleteInFilterEnabled = (xLazyColumnProps: XLazyColumnProps, xField: XField): boolean => {
+            let autoCompleteEnabled: boolean = false; // default
+            // condition1: field has to have the length >= 2
+            if (!XUtilsCommon.isSingleField(xLazyColumnProps.field)) {
+                // condition2: used assoc must be *toOne
+                let assocField: string;
+                if (xLazyColumnProps.autoComplete?.assocField) {
+                    assocField = xLazyColumnProps.autoComplete?.assocField;
+                }
+                else {
+                    const [assocFieldTemp, displayFieldTemp] = XUtilsCommon.getPathToAssocAndField(xLazyColumnProps.field);
+                    assocField = assocFieldTemp!;
+                }
+                const xAssoc: XAssoc = XUtilsMetadataCommon.getXAssocToOneByPath(xEntity, assocField);
+                if (xAssoc.relationType === "many-to-one" || xAssoc.relationType === "one-to-one") {
+                    if (xLazyColumnProps.autoCompleteEnabled === true) {
+                        autoCompleteEnabled = true; // explicit enabled - works for all types (usually has not big sense)
+                    }
+                    else if (xLazyColumnProps.autoCompleteEnabled === "forStringOnly") {
+                        // default usecase - the last attribute must be of type string
+                        if (xField.type === "string") {
+                            autoCompleteEnabled = true;
+                        }
+                    }
+                }
+            }
+            return autoCompleteEnabled;
+        }
+    */
     var createFilterItem = function (filterDisplay, constraint) {
         var filterItem;
         if (filterDisplay === "menu") {
@@ -217,6 +256,7 @@ var XLazyDataTable = function (props) {
         return { value: null, matchMode: "contains" };
     };
     // premenne platne pre cely component (obdoba member premennych v class-e)
+    var primeReactContext = react_1.default.useContext(api_1.PrimeReactContext); // probably does not work and deprecated PrimeReact.filterMatchModeOptions is used
     var dataTableEl = (0, react_1.useRef)(null);
     var customFilterItems = XUtilsCommon_1.XUtilsCommon.createCustomFilterItems(props.customFilter);
     var aggregateItems = createAggregateItems();
@@ -714,12 +754,13 @@ var XLazyDataTable = function (props) {
     };
     // vseobecna metodka - nastavi hodnotu do filtra
     // ak je matchMode === undefined, tak zachova povodnu hodnotu matchMode
-    var setFilterValue = function (field, value, matchMode) {
+    var setFilterValue = function (field, value, matchMode, customFilterItems) {
         var filterValue = filters[field]; // funguje len pre filterDisplay="row"
         filterValue.value = value;
         if (matchMode !== undefined) {
             filterValue.matchMode = matchMode;
         }
+        filterValue.customFilterItems = customFilterItems;
         // treba klonovat, inac react nezobrazi zmenenu hodnotu
         var filtersCloned = __assign({}, filters);
         setFilters(filtersCloned);
@@ -729,6 +770,11 @@ var XLazyDataTable = function (props) {
         var filterValue = filters[field]; // funguje len pre filterDisplay="row"
         return filterValue.value;
     };
+    // vseobecna metodka - vrati nastaveny match mode
+    var getFilterMatchMode = function (field) {
+        var filterValue = filters[field]; // funguje len pre filterDisplay="row"
+        return filterValue.matchMode;
+    };
     // ****** vseobecne metodky pre set/get do/z filtra - pre betweenFilter ********
     // do DataTableFilterMetaData.value ulozime dvojprvkove pole [value1, value2]
     // na backende spracujeme toto dvojprvkove pole
@@ -778,6 +824,23 @@ var XLazyDataTable = function (props) {
         }
         return betweenFilter;
     };
+    // after change from match mode xAutoComplete input displays [object Object] - trying resolving this hug does not work - I have no idea why
+    /*
+        const onFilterMatchModeChange = (e: ColumnFilterMatchModeChangeEvent): void => {
+            console.log(e.matchMode);
+            console.log(e.field);
+            console.log(getFilterValue(e.field));
+            console.log(typeof (getFilterValue(e.field)));
+            if (e.matchMode !== XFilterMatchMode.X_AUTO_COMPLETE) {
+                const filterValue: any | null = getFilterValue(e.field);
+                if (filterValue !== null && typeof filterValue === 'object') {
+                    console.log("idem volat setFilterValue");
+                    setFilterValue(e.field, null);
+                    console.log(getFilterValue(e.field));
+                }
+            }
+        }
+    */
     var valueAsUI = function (value, xField, contentType, fieldSetId) {
         var valueResult;
         if (xField.type === "boolean") {
@@ -946,6 +1009,42 @@ var XLazyDataTable = function (props) {
                 return childColumn.props.filterElement({ getFilterItem: getFilterItem, setFilterItem: setFilterItem, options: options });
             };
         }
+        else if (getFilterMatchMode(childColumn.props.field) === FindParam_1.XFilterMatchMode.X_AUTO_COMPLETE) {
+            var assocField_1 = undefined; // path to manyToOne assoc
+            var displayField = undefined; // field/fields displayed in autocomplete (can be path)
+            // if childColumn.props.autoComplete = true, then autoComplete = undefined and default autocomlete is created
+            var autoComplete = (typeof childColumn.props.autoComplete === 'object' ? childColumn.props.autoComplete : undefined);
+            if (autoComplete) {
+                if (autoComplete.field) {
+                    displayField = autoComplete.field;
+                }
+                if (autoComplete.assocField) {
+                    // check - autoComplete.assocField must be prefix (part) of childColumn.props.field
+                    if (!childColumn.props.field.startsWith(autoComplete.assocField + ".")) {
+                        throw "XLazyColumn with field \"".concat(childColumn.props.field, "\": autoComplete.assocField \"").concat(autoComplete.assocField, "\" is not prefix of the field");
+                    }
+                    assocField_1 = autoComplete.assocField;
+                    if (displayField === undefined) {
+                        // take displayField from childColumn.props.field (rest of the path)
+                        displayField = childColumn.props.field.substring(autoComplete.assocField.length + 1);
+                    }
+                }
+            }
+            if (assocField_1 === undefined) {
+                // default - take assocField/displayField from childColumn.props.field
+                var _a = __read(XUtilsCommon_1.XUtilsCommon.getPathToAssocAndField(childColumn.props.field), 2), assocFieldTemp = _a[0], displayFieldTemp = _a[1];
+                if (assocFieldTemp === null) {
+                    throw "XLazyColumn with field \"".concat(childColumn.props.field, "\": unexpected error - path of length >= 2 expected");
+                }
+                assocField_1 = assocFieldTemp;
+                if (displayField === undefined) {
+                    displayField = displayFieldTemp;
+                }
+            }
+            var xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOneByPath(xEntity, assocField_1);
+            var object = getFilterValue(childColumn.props.field);
+            filterElement = react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: object, onChange: function (object, objectChange) { return setFilterValue(childColumn.props.field, object, undefined, object !== null ? [{ where: "[".concat(assocField_1, "] = ").concat(object['id']), params: {} }] : undefined); }, error: undefined, onErrorChange: function (error) { }, idField: "id", field: displayField, suggestionsQuery: { entity: xAssoc.entityName, filter: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.filter, sortField: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.sortField }, searchBrowse: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.searchBrowse, valueForm: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.valueForm, addRowEnabled: false, width: "100%", scrollHeight: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.scrollHeight, suggestionsLoad: "lazy", lazyLoadMaxRows: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.lazyLoadMaxRows, minLength: autoComplete === null || autoComplete === void 0 ? void 0 : autoComplete.minLength });
+        }
         else {
             if (xField.type === "boolean") {
                 var checkboxValue = getFilterValue(childColumn.props.field);
@@ -955,6 +1054,10 @@ var XLazyDataTable = function (props) {
                 var dropdownValue = getDropdownFilterValue(childColumn.props.field);
                 filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: props.entity, path: childColumn.props.field, value: dropdownValue, onValueChange: onDropdownFilterChange, filter: childColumn.props.dropdownFilter, sortField: childColumn.props.dropdownSortField });
             }
+            else if (xField.type === "string") {
+                var stringValue = getFilterValue(childColumn.props.field);
+                filterElement = react_1.default.createElement(XInputTextBase_1.XInputTextBase, { value: stringValue, onChange: function (value) { return setFilterValue(childColumn.props.field, value); } });
+            }
             else if (xField.type === "date" || xField.type === "datetime") {
                 betweenFilter = getBetweenFilter(childColumn.props.betweenFilter, props.betweenFilter);
                 if (betweenFilter !== undefined) {
@@ -987,7 +1090,7 @@ var XLazyDataTable = function (props) {
         }
         // ************** dataType **************
         // depending on the dataType of the column, suitable match modes are displayed in filter
-        var dataType = undefined;
+        var dataType = "text";
         if (xField.type === "decimal" || xField.type === "number") {
             dataType = "numeric";
         }
@@ -1007,6 +1110,18 @@ var XLazyDataTable = function (props) {
                 }
             }
         }
+        // *********** filterMatchModeOptions ***********
+        // we use the same match mode lists like the default lists in primereact, but in case of ManyToOne assoc we add match mode for autocomplete
+        var filterMatchModeOptions = undefined;
+        if (showFilterMenu) {
+            // copy of primereact code (ColumnFilter.js)
+            //filterMatchModeOptions = primeReactContext.filterMatchModeOptions![dataType].map((key) => ({ label: prLocaleOption(key), value: key }));
+            filterMatchModeOptions = (primeReactContext && primeReactContext.filterMatchModeOptions[dataType].map(function (key) { return ({ label: (0, XLocale_1.prLocaleOption)(key), value: key }); })) ||
+                api_1.default.filterMatchModeOptions[dataType].map(function (key) { return ({ label: (0, XLocale_1.prLocaleOption)(key), value: key }); });
+            if (isAutoCompleteInFilterEnabled(childColumn.props)) {
+                filterMatchModeOptions.push({ label: (0, XLocale_1.xLocaleOption)('xAutoComplete'), value: FindParam_1.XFilterMatchMode.X_AUTO_COMPLETE });
+            }
+        }
         // *********** showClearButton ***********
         // pre filterDisplay = "row" nechceme clear button, chceme setrit miesto
         var showClearButton = props.filterDisplay === "menu";
@@ -1059,7 +1174,7 @@ var XLazyDataTable = function (props) {
             }
             footer = aggregateValue;
         }
-        return react_1.default.createElement(column_1.Column, { field: childColumn.props.field, header: header, footer: footer, filter: true, sortable: true, filterElement: filterElement, dataType: dataType, showFilterMenu: showFilterMenu, showClearButton: showClearButton, body: body, headerStyle: headerStyle, align: align });
+        return react_1.default.createElement(column_1.Column, { field: childColumn.props.field, header: header, footer: footer, filter: true, sortable: true, filterElement: filterElement, dataType: dataType, showFilterMenu: showFilterMenu, filterMatchModeOptions: filterMatchModeOptions, showClearButton: showClearButton, onFilterMatchModeChange: undefined /*onFilterMatchModeChange*/, body: body, headerStyle: headerStyle, align: align });
     });
     // align-items-center centruje vertikalne (posuva smerom dolu do stredu)
     // x-lazy-datatable-label-right-compensation - vyvazuje label, aby item-y v strede isli aspon priblizne do stredu
@@ -1106,5 +1221,6 @@ var XLazyColumn = function (props) {
 };
 exports.XLazyColumn = XLazyColumn;
 exports.XLazyColumn.defaultProps = {
+    //autoCompleteEnabled: "forStringOnly",
     columnViewStatus: true // XViewStatus.ReadWrite
 };

package/lib/components/XLocale.d.ts

@@ -24,3 +24,4 @@ export interface XLocaleOptions {
 }
 export declare function xAddLocale(locale: string, xOptions: XLocaleOptions): void;
 export declare function xLocaleOption(xOptionKey: string, options?: any[string]): any;
+export declare function prLocaleOption(key: string): any;

package/lib/components/XLocale.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.xLocaleOption = exports.xAddLocale = void 0;
+exports.prLocaleOption = exports.xLocaleOption = exports.xAddLocale = void 0;
 var api_1 = __importStar(require("primereact/api"));
 // using json-loader module we import x-en.json file into variable xEnJsonObject
 var x_en_json_1 = __importDefault(require("./locale/x-en.json"));
@@ -55,5 +55,11 @@ function xLocaleOption(xOptionKey, options) {
     }
 }
 exports.xLocaleOption = xLocaleOption;
+// localeOption of primereact without locale param (helper)
+function prLocaleOption(key) {
+    var _locale = api_1.default.locale || 'en';
+    return (0, api_1.localeOption)(key, _locale);
+}
+exports.prLocaleOption = prLocaleOption;
 // add en locale into PrimeReact locale (global variable "locales" declared in file Locale.js)
 xAddLocale('en', x_en_json_1.default.en);

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

@@ -16,6 +16,7 @@
         "save": "Save",
         "cancel": "Cancel",
         "formRemoveRowConfirm": "Are you sure to remove the row?",
+        "xAutoComplete": "Autocomplete",
         "expRowCount": "Row count",
         "expExportType": "Export type",
         "expCreateHeaderLine": "Create header line",
@@ -35,6 +36,7 @@
         "no": "no",
         "dateFrom": "Date from",
         "dateTo": "Date to",
-        "year": "Year"
+        "year": "Year",
+        "yearForAgeCalculation": "Year for age calculation"
     }
 }

package/lib/serverApi/ExportImportParam.d.ts

@@ -1,5 +1,5 @@
-import { DataTableFilterMeta, DataTableSortMeta } from "primereact/datatable";
-import { XCustomFilterItem, XFullTextSearch } from "./FindParam";
+import { DataTableSortMeta } from "primereact/datatable";
+import { XCustomFilterItem, XDataTableFilterMeta, XFullTextSearch } from "./FindParam";
 export declare enum ExportType {
     Excel = "excel",
     Csv = "csv",
@@ -19,7 +19,7 @@ export interface ExportJsonParam {
     queryParam: LazyDataTableQueryParam;
 }
 export interface LazyDataTableQueryParam {
-    filters: DataTableFilterMeta;
+    filters: XDataTableFilterMeta;
     fullTextSearch?: XFullTextSearch;
     customFilterItems?: XCustomFilterItem[];
     multiSortMeta?: DataTableSortMeta[];

package/lib/serverApi/FindParam.d.ts

@@ -1,4 +1,4 @@
-import { DataTableFilterMeta, DataTableSortMeta } from "primereact/datatable";
+import { DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableSortMeta } from "primereact/datatable";
 export declare enum ResultType {
     OnlyRowCount = 0,
     OnlyPagedRows = 1,
@@ -13,6 +13,18 @@ export interface XCustomFilterItem {
     params: XParams;
 }
 export type XCustomFilter = XCustomFilterItem | XCustomFilterItem[];
+export declare enum XFilterMatchMode {
+    X_AUTO_COMPLETE = "xAutoComplete"
+}
+export interface XDataTableFilterMetaData extends DataTableFilterMetaData {
+    customFilterItems?: XCustomFilterItem[];
+}
+export interface XDataTableFilterMeta {
+    /**
+     * Extra options.
+     */
+    [key: string]: XDataTableFilterMetaData | DataTableOperatorFilterMetaData;
+}
 export interface XFullTextSearch {
     fields?: string[];
     value: string;
@@ -33,7 +45,7 @@ export interface FindParam {
     resultType: ResultType;
     first?: number;
     rows?: number;
-    filters?: DataTableFilterMeta;
+    filters?: XDataTableFilterMeta;
     fullTextSearch?: XFullTextSearch;
     customFilterItems?: XCustomFilterItem[];
     multiSortMeta?: DataTableSortMeta[];

package/lib/serverApi/FindParam.js

@@ -1,20 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XAggregateFunction = exports.ResultType = void 0;
-// TODO - replaced with DataTableFilterMetaData
-// export interface FilterValue {
-//     value : string;
-//     matchMode : 'startsWith' | 'equals'; // matchMode ma konstanty napr. startsWith
-// }
-// TODO - replaced with DataTableFilterMeta
-// export interface Filters {
-//     [field: string]: FilterValue; // specialny typ pre object (dictionary) ktory ma dynamicky pocet propertiesov
-// }
-// TODO - replace with DataTableSortMeta
-// export interface SortMeta {
-//     field : string;
-//     order : 1 | -1; // hodnoty 1 alebo -1
-// }
+exports.XAggregateFunction = exports.XFilterMatchMode = exports.ResultType = void 0;
 var ResultType;
 (function (ResultType) {
     ResultType[ResultType["OnlyRowCount"] = 0] = "OnlyRowCount";
@@ -22,6 +8,11 @@ var ResultType;
     ResultType[ResultType["RowCountAndPagedRows"] = 2] = "RowCountAndPagedRows";
     ResultType[ResultType["AllRows"] = 3] = "AllRows";
 })(ResultType = exports.ResultType || (exports.ResultType = {}));
+// additional match modes (extension to primereact enum FilterMatchMode)
+var XFilterMatchMode;
+(function (XFilterMatchMode) {
+    XFilterMatchMode["X_AUTO_COMPLETE"] = "xAutoComplete";
+})(XFilterMatchMode = exports.XFilterMatchMode || (exports.XFilterMatchMode = {}));
 var XAggregateFunction;
 (function (XAggregateFunction) {
     XAggregateFunction["Min"] = "MIN";

package/package.json

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