@michalrakus/x-react-web-lib 1.38.0 → 1.38.2

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -202,6 +202,7 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
     var createFiltersInit = function () {
         var e_2, _a;
         var filtersInit = {};
+        // warning note: props.children are used to get props of XLazyColumn whereas dataTableEl.current.props.children are used to get props of Primereact DataTable
         //let columns = dataTableEl.current.props.children; - does not work
         var columns = props.children;
         try {
@@ -358,6 +359,7 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
         return filtersInit;
     };
     var _y = __read((0, useXStateStorageBase_1.useXStateStorageBase)(props.stateStorage, getStateKey(XStateKeySuffix.filters), filtersInitialStateFunction), 2), filters = _y[0], setFilters = _y[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
+    var matchModeChangeFieldRef = (0, react_1.useRef)(null);
     var initFtsInputValue = props.fullTextSearch ? createInitFtsInputValue() : undefined;
     var _z = __read((0, useXStateStorage_1.useXStateStorage)(props.stateStorage, getStateKey(XStateKeySuffix.ftsInputValue), initFtsInputValue), 2), ftsInputValue = _z[0], setFtsInputValue = _z[1];
     var _0 = __read((0, useXStateStorage_1.useXStateStorage)(props.stateStorage, getStateKey(XStateKeySuffix.optionalCustomFilter), undefined), 2), optionalCustomFilter = _0[0], setOptionalCustomFilter = _0[1];
@@ -417,14 +419,62 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
             return [2 /*return*/];
         });
     }); };
-    var onFilter = function (event) {
-        // pozor! tato metoda sa nevola, odkedy vzdy pouzivame filterElement na elemente Column (mame vo filtri vlastne komponenty ktore priamo volaju setFilters(...))
-        //console.log("zavolany onFilter - this.state.filters = " + JSON.stringify(filters));
-        //console.log("zavolany onFilter - event.filters = " + JSON.stringify(event.filters));
+    var onFilter = function (e) {
+        // HEY! this method is not called (on filter value change) since we use filterElement on component Column (in filter there are always custom components those call direct setFilters(...))
+        // this method is called (probably) only when user changes match mode
+        //console.log("called onFilter - this.state.filters = " + JSON.stringify(filters));
+        //console.log("called onFilter - event.filters = " + JSON.stringify(e.filters));
+        var filtersChanged = false;
+        var changedField = matchModeChangeFieldRef.current;
+        if (changedField) {
+            // method onFilterMatchModeChange was called (user changed match mode)
+            var filterValueOld = filters[changedField];
+            var filterValue = e.filters[changedField];
+            if (filterValueOld && filterValue) { // should be always true
+                var xFilterValueOld = filterValueOld; // works only for filterDisplay="row"
+                var xFilterValue = filterValue; // works only for filterDisplay="row"
+                if (xFilterValue.matchMode !== xFilterValueOld.matchMode) {
+                    var isNotNullValueAlias = "<".concat((0, XLocale_1.xLocaleOption)('xIsNotNull'), ">");
+                    var isNullValueAlias = "<".concat((0, XLocale_1.xLocaleOption)('xIsNull'), ">");
+                    var xFilterMatchMode = xFilterValue.matchMode;
+                    if (xFilterMatchMode === FindParam_1.XFilterMatchMode.X_IS_NOT_NULL || xFilterMatchMode === FindParam_1.XFilterMatchMode.X_IS_NULL) {
+                        var newValue = null;
+                        // for string types we set alias, for other types we set null (alias is not displayed -> NaN or Invalid date are displayed)
+                        var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, changedField);
+                        if (xField.type === "string" || xField.type === "jsonb") {
+                            if (xFilterMatchMode === FindParam_1.XFilterMatchMode.X_IS_NOT_NULL) {
+                                newValue = isNotNullValueAlias;
+                            }
+                            else {
+                                // xFilterMatchMode === XFilterMatchMode.X_IS_NULL
+                                newValue = isNullValueAlias;
+                            }
+                        }
+                        xFilterValue.value = newValue;
+                        filtersChanged = true;
+                    }
+                    else if (xFilterMatchMode === FindParam_1.XFilterMatchMode.X_AUTO_COMPLETE) {
+                        xFilterValue.value = null;
+                        filtersChanged = true;
+                    }
+                    // all other match modes - change to null, if previous match mode was X_IS_NOT_NULL or X_IS_NULL or X_AUTO_COMPLETE
+                    else if (xFilterValue.value === isNotNullValueAlias || xFilterValue.value === isNullValueAlias || typeof xFilterValue.value === 'object') {
+                        xFilterValue.value = null;
+                        filtersChanged = true;
+                    }
+                }
+            }
+            matchModeChangeFieldRef.current = null;
+        }
+        var filtersNew = e.filters;
+        if (filtersChanged) {
+            // clone needed if there was change, otherwise react does not show the change
+            filtersNew = __assign({}, filtersNew);
+        }
         // tymto zavolanim sa zapise znak zapisany klavesnicou do inputu filtra (ak prikaz zakomentujeme, input filtra zostane prazdny)
-        setFilters(event.filters);
+        setFilters(filtersNew);
         removePagingFromStorage();
-        loadDataBaseIfAutoFilter(event.filters, false);
+        loadDataBaseIfAutoFilter(filtersNew, false); // TODO - pass value Column.props.autoFilter here
     };
     var onSort = function (event) {
         //console.log("zavolany onSort - this.state.multiSortMeta = " + JSON.stringify(multiSortMeta));
@@ -1046,23 +1096,15 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
         }
         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 onFilterMatchModeChange = function (e) {
+        //console.log(e.matchMode);
+        //console.log(e.field);
+        // warning: we can not change/set the filter value for the column where match mode was changed
+        // if we call setFilters in this method, then after finishing this method primereact calls another setting of "filters" and that second call overwrites our change
+        // this method is only "read only" and the change must be done in onFilter method
+        // we only save the field of the column where the match mode was changed - it is used later in onFilter method
+        matchModeChangeFieldRef.current = e.field;
+    };
     var valueAsUI = function (value, xField, contentType, fieldSetId) {
         var valueResult;
         if (xField.type === "boolean") {
@@ -1322,7 +1364,8 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
                 }
                 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, undefined, undefined, childColumn.props.autoFilter); } });
+                    var xFilterMatchMode = getFilterMatchMode(childColumn.props.field);
+                    filterElement = react_1.default.createElement(XInputTextBase_1.XInputTextBase, { value: stringValue, onChange: function (value) { return setFilterValue(childColumn.props.field, value, undefined, undefined, childColumn.props.autoFilter); }, readOnly: xFilterMatchMode === FindParam_1.XFilterMatchMode.X_IS_NOT_NULL || xFilterMatchMode === FindParam_1.XFilterMatchMode.X_IS_NULL });
                 }
                 else if (xField.type === "date" || xField.type === "datetime") {
                     betweenFilter = getBetweenFilter(childColumn.props.betweenFilter, props.betweenFilter);
@@ -1385,6 +1428,8 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
             //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 }); });
+            filterMatchModeOptions.push({ label: (0, XLocale_1.xLocaleOption)('xIsNotNull'), value: FindParam_1.XFilterMatchMode.X_IS_NOT_NULL });
+            filterMatchModeOptions.push({ label: (0, XLocale_1.xLocaleOption)('xIsNull'), value: FindParam_1.XFilterMatchMode.X_IS_NULL });
             if (isAutoCompleteInFilterEnabled(childColumn.props)) {
                 filterMatchModeOptions.push({ label: (0, XLocale_1.xLocaleOption)('xAutoComplete'), value: FindParam_1.XFilterMatchMode.X_AUTO_COMPLETE });
             }
@@ -1444,7 +1489,7 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
             }
             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, filterMatchModeOptions: filterMatchModeOptions, showClearButton: showClearButton, onFilterMatchModeChange: undefined /*onFilterMatchModeChange*/, 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: 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

package/lib/components/XLocale.d.ts

@@ -15,6 +15,8 @@ export interface XLocaleOptions {
     cancel?: string;
     optimisticLockFailed?: string;
     formRemoveRowConfirm?: string;
+    xIsNotNull?: string;
+    xIsNull?: string;
     xAutoComplete?: string;
     expRowCount?: string;
     expExportType?: string;

package/lib/components/XUtils.d.ts

@@ -96,6 +96,7 @@ export declare class XUtils {
      * @param envVar
      */
     static getEnvVarValue(envVarEnum: XEnvVar): string;
+    static getEnvVarValueBase(envVarEnum: string): string;
     static removeRow(entity: string, row: any): Promise<void>;
     static isReadOnly(path: string, readOnlyInit?: boolean): boolean;
     static isReadOnlyTableField(path: string | undefined, readOnly: XTableFieldReadOnlyProp | undefined, object: XObject | null, tableRow: any): boolean;

package/lib/components/XUtils.js

@@ -537,6 +537,9 @@ var XUtils = exports.XUtils = /** @class */ (function () {
      * @param envVar
      */
     XUtils.getEnvVarValue = function (envVarEnum) {
+        return XUtils.getEnvVarValueBase(envVarEnum);
+    };
+    XUtils.getEnvVarValueBase = function (envVarEnum) {
         var value = process.env[envVarEnum];
         if (value === undefined) {
             throw "Environment variable ".concat(envVarEnum, " - value not found. Check configuration file .env*");

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

@@ -20,6 +20,8 @@
         "pessimisticLockNotAcquired": "The row is being edited by the user {lockXUser} from {lockDate}\nDo you still want to edit the row? (The choice Cancel will open the form in read only mode).",
         "optimisticLockFailed": "Someone else has changed the row during the editation. Sorry, you have to cancel the editation and start the editation again.",
         "formRemoveRowConfirm": "Are you sure to remove the row?",
+        "xIsNotNull": "Is not null",
+        "xIsNull": "Is null",
         "xAutoComplete": "Autocomplete",
         "expRowCount": "Row count",
         "expExportType": "Export type",

package/lib/serverApi/FindParam.d.ts

@@ -14,6 +14,8 @@ export interface XCustomFilterItem {
 }
 export type XCustomFilter = XCustomFilterItem | XCustomFilterItem[];
 export declare enum XFilterMatchMode {
+    X_IS_NOT_NULL = "isNotNull",
+    X_IS_NULL = "isNull",
     X_AUTO_COMPLETE = "xAutoComplete",
     X_FILTER_ELEMENT = "xFilterElement"
 }

package/lib/serverApi/FindParam.js

@@ -11,6 +11,8 @@ var ResultType;
 // additional match modes (extension to primereact enum FilterMatchMode)
 var XFilterMatchMode;
 (function (XFilterMatchMode) {
+    XFilterMatchMode["X_IS_NOT_NULL"] = "isNotNull";
+    XFilterMatchMode["X_IS_NULL"] = "isNull";
     XFilterMatchMode["X_AUTO_COMPLETE"] = "xAutoComplete";
     XFilterMatchMode["X_FILTER_ELEMENT"] = "xFilterElement"; // custom filter element (defined in filterElement property)
 })(XFilterMatchMode || (exports.XFilterMatchMode = XFilterMatchMode = {}));

package/package.json

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