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

package/lib/components/XFtsInput.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface XFtsInputValue {
+    value: string | null;
+    matchMode: 'startsWith' | 'contains' | 'endsWith' | 'equals';
+}
+export declare const XFtsInput: (props: {
+    value: XFtsInputValue;
+    onChange: (value: XFtsInputValue) => void;
+}) => JSX.Element;

package/lib/components/XFtsInput.js

@@ -0,0 +1,30 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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("./XUtilsConversions");
+var XFtsInput = function (props) {
+    var onChange = function (e) {
+        var value = (0, XUtilsConversions_1.stringFromUI)(e.target.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" }));
+};
+exports.XFtsInput = XFtsInput;

package/lib/components/XLazyDataTable.d.ts

@@ -42,6 +42,7 @@ export interface XLazyDataTableProps {
     filters?: DataTableFilterMeta;
     customFilter?: XCustomFilter;
     sortField?: string;
+    fullTextSearch: boolean | string[];
     searchBrowseParams?: XSearchBrowseParams;
     width?: string;
     dataLoadedState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
@@ -56,6 +57,7 @@ export declare const XLazyDataTable: {
         paginator: boolean;
         rows: number;
         filterDisplay: string;
+        fullTextSearch: boolean;
         scrollable: boolean;
         scrollWidth: string;
         scrollHeight: string;

package/lib/components/XLazyDataTable.js

@@ -115,6 +115,7 @@ var api_1 = require("primereact/api");
 var XCalendar_1 = require("./XCalendar");
 var XInputDecimalBase_1 = require("./XInputDecimalBase");
 var XLocale_1 = require("./XLocale");
+var XFtsInput_1 = require("./XFtsInput");
 var XLazyDataTable = function (props) {
     var _a;
     // must be here, is used in createInitFilters()
@@ -196,6 +197,9 @@ var XLazyDataTable = function (props) {
         }
         return filterItem;
     };
+    var createInitFtsInputValue = function () {
+        return { value: null, matchMode: "contains" };
+    };
     // premenne platne pre cely component (obdoba member premennych v class-e)
     var dataTableEl = (0, react_1.useRef)(null);
     var customFilterItems = XUtils_1.XUtils.createCustomFilterItems(props.customFilter);
@@ -219,12 +223,15 @@ var XLazyDataTable = function (props) {
         }
     }
     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];
-    var _h = __read((0, react_1.useState)(null), 2), selectedRow = _h[0], setSelectedRow = _h[1];
-    var _j = __read((_a = props.dataLoadedState) !== null && _a !== void 0 ? _a : (0, react_1.useState)(false), 2), dataLoaded = _j[0], setDataLoaded = _j[1]; // priznak kde si zapiseme, ci uz sme nacitali data
-    var _k = __read((0, react_1.useState)(false), 2), exportRowsDialogOpened = _k[0], setExportRowsDialogOpened = _k[1];
-    var _l = __read((0, react_1.useState)(), 2), exportRowsDialogRowCount = _l[0], setExportRowsDialogRowCount = _l[1]; // param pre dialog
-    var _m = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _m[0], setFiltersAfterFiltering = _m[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
+    var initFtsInputValue = props.fullTextSearch ? createInitFtsInputValue() : undefined;
+    var _g = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValue = _g[0], setFtsInputValue = _g[1];
+    var _h = __read((0, react_1.useState)(props.sortField ? [{ field: props.sortField, order: 1 }] : []), 2), multiSortMeta = _h[0], setMultiSortMeta = _h[1];
+    var _j = __read((0, react_1.useState)(null), 2), selectedRow = _j[0], setSelectedRow = _j[1];
+    var _k = __read((_a = props.dataLoadedState) !== null && _a !== void 0 ? _a : (0, react_1.useState)(false), 2), dataLoaded = _k[0], setDataLoaded = _k[1]; // priznak kde si zapiseme, ci uz sme nacitali data
+    var _l = __read((0, react_1.useState)(false), 2), exportRowsDialogOpened = _l[0], setExportRowsDialogOpened = _l[1];
+    var _m = __read((0, react_1.useState)(), 2), exportRowsDialogRowCount = _m[0], setExportRowsDialogRowCount = _m[1]; // param pre dialog
+    var _o = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _o[0], setFiltersAfterFiltering = _o[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
+    var _p = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValueAfterFiltering = _p[0], setFtsInputValueAfterFiltering = _p[1]; // tak isto ako filtersAfterFiltering
     // parameter [] zabezpeci ze sa metoda zavola len po prvom renderingu (a nie po kazdej zmene stavu (zavolani setNieco()))
     (0, react_1.useEffect)(function () {
         // jednoduchy sposob - nepouzivame parameter props.displayed a priznak dataLoaded
@@ -257,7 +264,7 @@ var XLazyDataTable = function (props) {
         return __generator(this, function (_a) {
             //console.log("zavolany onPage");
             setFirst(event.first);
-            loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: event.first, rows: rows, filters: filters, customFilterItems: customFilterItems, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems });
+            loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: event.first, rows: rows, filters: filters, fullTextSearch: createXFullTextSearch(ftsInputValue), customFilterItems: customFilterItems, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems });
             return [2 /*return*/];
         });
     }); };
@@ -271,7 +278,7 @@ var XLazyDataTable = function (props) {
         //console.log("zavolany onSort - this.state.multiSortMeta = " + JSON.stringify(multiSortMeta));
         //console.log("zavolany onSort - event.multiSortMeta = " + JSON.stringify(event.multiSortMeta));
         setMultiSortMeta(event.multiSortMeta);
-        loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, customFilterItems: customFilterItems, multiSortMeta: event.multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems });
+        loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, fullTextSearch: createXFullTextSearch(ftsInputValue), customFilterItems: customFilterItems, multiSortMeta: event.multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems });
     };
     var onClickFilter = function () {
         //console.log("zavolany onClickFilter");
@@ -281,9 +288,12 @@ var XLazyDataTable = function (props) {
         // najjednoduchsi sposob - pomeni aj pripadne nastavene matchMode hodnoty
         var filtersInit = createInitFilters();
         setFilters(filtersInit);
+        if (ftsInputValue) {
+            setFtsInputValue(createInitFtsInputValue());
+        }
     };
     var loadData = function () {
-        loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, customFilterItems: customFilterItems, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems });
+        loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, fullTextSearch: createXFullTextSearch(ftsInputValue), customFilterItems: customFilterItems, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems });
     };
     var loadDataBase = function (findParam) { return __awaiter(void 0, void 0, void 0, function () {
         var findResult;
@@ -299,6 +309,7 @@ var XLazyDataTable = function (props) {
                     setLoading(false);
                     // odlozime si filter hodnoty pre pripadny export - deep cloning vyzera ze netreba
                     setFiltersAfterFiltering(filters);
+                    setFtsInputValueAfterFiltering(ftsInputValue ? __assign({}, ftsInputValue) : undefined);
                     return [2 /*return*/];
             }
         });
@@ -315,6 +326,17 @@ var XLazyDataTable = function (props) {
             }
         });
     }); };
+    var createXFullTextSearch = function (ftsInputValue) {
+        var xFullTextSearch = undefined; // default
+        if (ftsInputValue && ftsInputValue.value !== null) {
+            xFullTextSearch = {
+                fields: Array.isArray(props.fullTextSearch) ? props.fullTextSearch : undefined,
+                value: ftsInputValue.value,
+                matchMode: ftsInputValue.matchMode
+            };
+        }
+        return xFullTextSearch;
+    };
     var getFields = function () {
         // krasne zobrazi cely objekt!
         //console.log(dataTableEl.current);
@@ -451,7 +473,7 @@ var XLazyDataTable = function (props) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    findParam = { resultType: FindParam_1.ResultType.OnlyRowCount, first: first, rows: rows, filters: filtersAfterFiltering, customFilterItems: customFilterItems, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems };
+                    findParam = { resultType: FindParam_1.ResultType.OnlyRowCount, first: first, rows: rows, filters: filtersAfterFiltering, fullTextSearch: createXFullTextSearch(ftsInputValueAfterFiltering), customFilterItems: customFilterItems, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems };
                     return [4 /*yield*/, findByFilter(findParam)];
                 case 1:
                     findResult = _a.sent();
@@ -463,7 +485,7 @@ var XLazyDataTable = function (props) {
         });
     }); };
     var createExportParams = function () {
-        var queryParam = { filters: filtersAfterFiltering, customFilterItems: customFilterItems, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields() };
+        var queryParam = { filters: filtersAfterFiltering, fullTextSearch: createXFullTextSearch(ftsInputValueAfterFiltering), customFilterItems: customFilterItems, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields() };
         return {
             path: "x-lazy-data-table-export",
             queryParam: queryParam,
@@ -868,8 +890,10 @@ var XLazyDataTable = function (props) {
         }
         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 });
     });
+    // align-items-center centruje vertikalne (posuva smerom doulu do stredu)
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement("div", { className: "flex justify-content-center" },
+        react_1.default.createElement("div", { className: "flex justify-content-center align-items-center" },
+            ftsInputValue ? react_1.default.createElement(XFtsInput_1.XFtsInput, { value: ftsInputValue, onChange: function (value) { return setFtsInputValue(value); } }) : null,
             react_1.default.createElement(XButton_1.XButton, { key: "filter", label: (0, XLocale_1.xLocaleOption)('filter'), onClick: onClickFilter }),
             react_1.default.createElement(XButton_1.XButton, { key: "clearFilter", label: (0, XLocale_1.xLocaleOption)('clearFilter'), onClick: onClickClearFilter })),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
@@ -888,6 +912,7 @@ exports.XLazyDataTable.defaultProps = {
     paginator: true,
     rows: 10,
     filterDisplay: "row",
+    fullTextSearch: true,
     scrollable: true,
     scrollWidth: 'viewport',
     scrollHeight: 'viewport',

package/lib/serverApi/ExportImportParam.d.ts

@@ -1,5 +1,5 @@
 import { DataTableFilterMeta, DataTableSortMeta } from "primereact/datatable";
-import { XCustomFilterItem } from "./FindParam";
+import { XCustomFilterItem, XFullTextSearch } from "./FindParam";
 export declare enum ExportType {
     Csv = "csv",
     Json = "json"
@@ -11,6 +11,7 @@ export interface ExportParam {
 }
 export interface LazyDataTableQueryParam {
     filters: DataTableFilterMeta;
+    fullTextSearch?: XFullTextSearch;
     customFilterItems?: XCustomFilterItem[];
     multiSortMeta?: DataTableSortMeta[];
     entity: string;

package/lib/serverApi/FindParam.d.ts

@@ -12,6 +12,11 @@ export interface XCustomFilterItem {
     params: XParams;
 }
 export type XCustomFilter = XCustomFilterItem | XCustomFilterItem[];
+export interface XFullTextSearch {
+    fields?: string[];
+    value: string;
+    matchMode: 'startsWith' | 'contains' | 'endsWith' | 'equals';
+}
 export declare enum XAggregateType {
     Min = "MIN",
     Max = "MAX",
@@ -27,6 +32,7 @@ export interface FindParam {
     first?: number;
     rows?: number;
     filters?: DataTableFilterMeta;
+    fullTextSearch?: XFullTextSearch;
     customFilterItems?: XCustomFilterItem[];
     multiSortMeta?: DataTableSortMeta[];
     entity: string;

package/package.json

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