@michalrakus/x-react-web-lib 1.32.2 → 1.32.3

package/lib/components/XFormDataTable2.js

@@ -558,6 +558,9 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         if (this.props.scrollable) {
             if (this.props.scrollWidth !== "none") {
                 scrollWidth = this.props.scrollWidth;
+                if (scrollWidth === "viewport") {
+                    scrollWidth = "calc(100vw - ".concat(XUtils_1.XUtils.isMobile() ? 1.2 : 2.2, "rem)"); // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
+                }
             }
             if (this.props.scrollHeight !== "none") {
                 scrollHeight = this.props.scrollHeight;
@@ -705,7 +708,8 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         sortable: false,
         sortField: "idFieldOnUpdate",
         scrollable: true,
-        scrollWidth: '100%',
+        //scrollWidth: '100%', // nefungovalo dobre - hodnota '100%' zapne horizontalne scrollovanie, ak je tabulka sirsia ako parent element (a ten by mal byt max 100vw) (hodnota 'auto' (podobna ako '100%') nefunguje dobre)
+        scrollWidth: 'viewport',
         scrollHeight: '200vh',
         // tym ze pouzivame 200vh (max-height pre body), tak realne scrollovanie sa zapne az pri velmi vela riadkoch
         shrinkWidth: true,

package/lib/components/XFtsInput.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFtsInput = void 0;
 var react_1 = __importDefault(require("react"));
 var XInputTextBase_1 = require("./XInputTextBase");
+var XUtils_1 = require("./XUtils");
 var XFtsInput = function (props) {
     var onChange = function (value) {
         props.value.value = value;
@@ -24,6 +25,6 @@ var XFtsInput = function (props) {
     };
     // TODO - pridat input na zmenu matchMode
     // 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" }));
+    return (react_1.default.createElement(XInputTextBase_1.XInputTextBase, { value: props.value.value, onChange: onChange, style: { height: '2.5rem', width: XUtils_1.XUtils.isMobile() ? '7rem' : '17rem' }, className: "m-1" }));
 };
 exports.XFtsInput = XFtsInput;

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

@@ -44,6 +44,9 @@ export interface XLazyDataTableProps {
     rows: number;
     filterDisplay: "menu" | "row";
     betweenFilter?: XBetweenFilterProp;
+    autoFilter: boolean;
+    showFilterButtons: boolean;
+    showExportRows?: boolean;
     scrollable: boolean;
     scrollWidth: string;
     scrollHeight: string;
@@ -80,6 +83,8 @@ export declare const XLazyDataTable: {
         paginator: boolean;
         rows: number;
         filterDisplay: string;
+        autoFilter: boolean;
+        showFilterButtons: boolean;
         fullTextSearch: boolean;
         multilineSwitch: boolean;
         multilineSwitchInitValue: string;

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -335,10 +335,12 @@ var XLazyDataTable = function (props) {
         });
     }); };
     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));
         // tymto zavolanim sa zapise znak zapisany klavesnicou do inputu filtra (ak prikaz zakomentujeme, input filtra zostane prazdny)
         setFilters(event.filters);
+        loadDataBaseIfAutoFilter(event.filters);
     };
     var onSort = function (event) {
         //console.log("zavolany onSort - this.state.multiSortMeta = " + JSON.stringify(multiSortMeta));
@@ -348,6 +350,13 @@ var XLazyDataTable = function (props) {
         findParam.multiSortMeta = event.multiSortMeta; // prepiseme multiSortMeta, lebo je tam stara hodnota (volanie setMultiSortMeta nezmeni multiSortMeta hned)
         loadDataBase(findParam);
     };
+    var loadDataBaseIfAutoFilter = function (filters) {
+        if (props.autoFilter) {
+            var findParam = createFindParam();
+            findParam.filters = filters; // prepiseme filters, lebo je tam stara hodnota
+            loadDataBase(findParam);
+        }
+    };
     var onClickFilter = function () {
         //console.log("zavolany onClickFilter");
         loadData();
@@ -747,6 +756,7 @@ var XLazyDataTable = function (props) {
         // neskusal som, ci treba aj toto klonovat ale pravdepodobne hej
         var filtersCloned = __assign({}, filters);
         setFilters(filtersCloned);
+        loadDataBaseIfAutoFilter(filtersCloned);
     };
     // vseobecna specialna metodka pouzvana pri custom filtri (XLazyColumn.filterElement)
     var getFilterItem = function (field) {
@@ -764,6 +774,7 @@ var XLazyDataTable = function (props) {
         // treba klonovat, inac react nezobrazi zmenenu hodnotu
         var filtersCloned = __assign({}, filters);
         setFilters(filtersCloned);
+        loadDataBaseIfAutoFilter(filtersCloned);
     };
     // vseobecna metodka - precita hodnotu z filtra (vrati napr. typ Date | null)
     var getFilterValue = function (field) {
@@ -885,13 +896,14 @@ var XLazyDataTable = function (props) {
         return bodyValue;
     };
     // ak mame scrollWidth/scrollHeight = viewport (default), vyratame scrollWidth/scrollHeight tak aby tabulka "sadla" do okna (viewport-u)
+    var isMobile = XUtils_1.XUtils.isMobile();
     var scrollWidth = undefined; // vypnute horizontalne scrollovanie
     var scrollHeight = undefined; // vypnute vertikalne scrollovanie
     if (props.scrollable) {
         if (props.scrollWidth !== "none") {
             scrollWidth = props.scrollWidth;
             if (scrollWidth === "viewport") {
-                scrollWidth = 'calc(100vw - 2.2rem)'; // povodne bolo 1.4rem (20px okraje) ale pri vela stlpcoch vznikal horizontalny scrollbar
+                scrollWidth = "calc(100vw - ".concat(isMobile ? 1.2 : 2.2, "rem)"); // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
             }
         }
         if (props.scrollHeight !== "none") {
@@ -916,7 +928,7 @@ var XLazyDataTable = function (props) {
                 }
                 else {
                     // sme v dialogu
-                    if (XUtils_1.XUtils.isMobile()) {
+                    if (isMobile) {
                         viewHeight = '98vh'; // .p-dialog pre mobil ma max-height: 98%
                         headerFooterHeight = XUtils_1.XUtils.toPX0('12.03rem'); // rucne zratane
                     }
@@ -959,23 +971,46 @@ var XLazyDataTable = function (props) {
     }
     // pouzivame paginatorLeft aj paginatorRight (aj prazdny) pouzivame, aby bol default paginator v strede (bez paginatorLeft je default paginator presunuty dolava a naopak)
     // sirku div-ov este nastavujeme v css na 10rem
-    var paginatorLeft = react_1.default.createElement("div", null,
-        (0, XLocale_1.xLocaleOption)('totalRecords'),
-        ": ",
-        value.totalRecords);
-    var paginatorRight = react_1.default.createElement("div", null);
-    if (props.editMode === true) {
-        paginatorRight = react_1.default.createElement("div", null,
-            react_1.default.createElement(XButtonIconSmall_1.XButtonIconSmall, { icon: "pi pi-save", onClick: function () { var _a; return (_a = props.editModeHandlers) === null || _a === void 0 ? void 0 : _a.onSave(); }, tooltip: "Save form" }),
-            react_1.default.createElement(XButtonIconSmall_1.XButtonIconSmall, { icon: "pi pi-times", onClick: function () { var _a; return (_a = props.editModeHandlers) === null || _a === void 0 ? void 0 : _a.onCancel(); }, tooltip: "Cancel editing" }));
+    var paginatorLeft;
+    var paginatorRight;
+    var pageLinkSize;
+    if (!isMobile) {
+        paginatorLeft = react_1.default.createElement("div", null,
+            (0, XLocale_1.xLocaleOption)('totalRecords'),
+            ": ",
+            value.totalRecords);
+        paginatorRight = react_1.default.createElement("div", null);
+        pageLinkSize = 5; // default
+        if (props.editMode === true) {
+            paginatorRight = react_1.default.createElement("div", null,
+                react_1.default.createElement(XButtonIconSmall_1.XButtonIconSmall, { icon: "pi pi-save", onClick: function () { var _a; return (_a = props.editModeHandlers) === null || _a === void 0 ? void 0 : _a.onSave(); }, tooltip: "Save form" }),
+                react_1.default.createElement(XButtonIconSmall_1.XButtonIconSmall, { icon: "pi pi-times", onClick: function () { var _a; return (_a = props.editModeHandlers) === null || _a === void 0 ? void 0 : _a.onCancel(); }, tooltip: "Cancel editing" }));
+        }
+        else if (props.editMode === false) {
+            paginatorRight = react_1.default.createElement("div", null,
+                react_1.default.createElement(XButtonIconSmall_1.XButtonIconSmall, { icon: "pi pi-pencil", onClick: function () { var _a; return (_a = props.editModeHandlers) === null || _a === void 0 ? void 0 : _a.onStart(); }, tooltip: "Edit form" }));
+        }
+        // else - editMode is undefined - browse is not editable
+    }
+    else {
+        // na mobile setrime miesto
+        paginatorLeft = react_1.default.createElement("div", { style: { minWidth: '3rem' } }, value.totalRecords);
+        paginatorRight = react_1.default.createElement("div", { style: { minWidth: '3rem' } });
+        pageLinkSize = 3;
+    }
+    var exportRows;
+    if (props.searchBrowseParams !== undefined) {
+        // export pre search button-y zatial vypneme
+        exportRows = false;
+    }
+    else if (props.showExportRows !== undefined) {
+        // mame explicitne definovane ci ano alebo nie
+        exportRows = props.showExportRows;
     }
-    else if (props.editMode === false) {
-        paginatorRight = react_1.default.createElement("div", null,
-            react_1.default.createElement(XButtonIconSmall_1.XButtonIconSmall, { icon: "pi pi-pencil", onClick: function () { var _a; return (_a = props.editModeHandlers) === null || _a === void 0 ? void 0 : _a.onStart(); }, tooltip: "Edit form" }));
+    else {
+        // len na desktope zobrazime
+        exportRows = !isMobile;
     }
-    // else - editMode is undefined - browse is not editable
-    // export pre search button-y zatial vypneme
-    var exportRows = (props.searchBrowseParams === undefined);
     // pre lepsiu citatelnost vytvarame stlpce uz tu
     var columnElemList = react_1.default.Children.map(props.children.filter(function (child) { return XUtils_1.XUtils.xViewStatus(child.props.columnViewStatus) !== XUtils_1.XViewStatus.Hidden; }), function (child) {
         // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
@@ -1182,13 +1217,13 @@ var XLazyDataTable = function (props) {
         react_1.default.createElement("div", { className: "flex justify-content-center align-items-center" },
             props.label ? react_1.default.createElement("div", { className: "x-lazy-datatable-label" }, props.label) : null,
             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 }),
+            props.showFilterButtons ? react_1.default.createElement(XButton_1.XButton, { key: "filter", icon: isMobile ? "pi pi-search" : undefined, label: !isMobile ? (0, XLocale_1.xLocaleOption)('filter') : undefined, onClick: onClickFilter }) : null,
+            props.showFilterButtons ? react_1.default.createElement(XButton_1.XButton, { key: "clearFilter", icon: isMobile ? "pi pi-ban" : undefined, label: !isMobile ? (0, XLocale_1.xLocaleOption)('clearFilter') : undefined, onClick: onClickClearFilter }) : null,
             props.optionalCustomFilters ? react_1.default.createElement(XOcfDropdown_1.XOcfDropdown, { optionalCustomFilters: props.optionalCustomFilters, value: optionalCustomFilter, onChange: function (value) { return setOptionalCustomFilter(value); }, className: "m-1" }) : null,
             props.multilineSwitch ? react_1.default.createElement(XMultilineSwitch_1.XMultilineSwitch, { value: multilineSwitchValue, onChange: function (value) { return setMultilineSwitchValue(value); }, className: "m-1" }) : null,
-            props.label ? react_1.default.createElement("div", { className: "x-lazy-datatable-label-right-compensation" }) : null),
+            props.label && !isMobile ? react_1.default.createElement("div", { className: "x-lazy-datatable-label-right-compensation" }) : null),
         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, rowClassName: props.rowClassName, 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(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: props.paginator, pageLinkSize: pageLinkSize, 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, rowClassName: props.rowClassName, 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 && 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,
@@ -1205,6 +1240,8 @@ exports.XLazyDataTable.defaultProps = {
     paginator: true,
     rows: 10,
     filterDisplay: "row",
+    autoFilter: false,
+    showFilterButtons: true,
     fullTextSearch: true,
     multilineSwitch: false,
     multilineSwitchInitValue: "allLines",

package/package.json

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