@michalrakus/x-react-web-lib 1.4.1 → 1.5.1

package/XButtonIconMedium.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XButtonIconMedium';

package/XButtonIconMedium.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XButtonIconMedium.js');

package/gulpfile.js

@@ -18,6 +18,7 @@ function generateApi(cb) {
         "./lib/components/XAutoCompleteBase",
         "./lib/components/XBrowse",
         "./lib/components/XButton",
+        "./lib/components/XButtonIconMedium",
         "./lib/components/XButtonIconNarrow",
         "./lib/components/XButtonIconSmall",
         "./lib/components/XCalendar",

package/lib/components/XButtonIconMedium.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ButtonProps } from "primereact/button";
+import { IconType } from "primereact/utils";
+export declare const XButtonIconMedium: (props: {
+    icon: IconType<ButtonProps>;
+    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    disabled?: boolean | undefined;
+    tooltip?: any;
+}) => JSX.Element;

package/lib/components/XButtonIconMedium.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XButtonIconMedium = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("primereact/button");
+// button trochu mensi (priblizne 30px x 30px) od klasickeho Button, pri pouziti v datatable nastavuje v TD malicky padding (cez css) -> nezvecsuje vysku riadku
+var XButtonIconMedium = function (props) {
+    return (react_1.default.createElement(button_1.Button, { icon: props.icon, onClick: props.onClick, disabled: props.disabled, className: 'x-button-icon-medium p-button-sm', tooltip: props.tooltip }));
+};
+exports.XButtonIconMedium = XButtonIconMedium;

package/lib/components/XDropdown.d.ts

@@ -5,6 +5,7 @@ import { XObject } from "./XObject";
 export interface XDropdownProps extends XFormComponentProps<XObject> {
     assocField: string;
     displayField: string;
+    sortField?: string;
     filter?: XFilterProp;
 }
 export declare class XDropdown extends XFormComponent<XObject, XDropdownProps> {

package/lib/components/XDropdown.js

@@ -50,7 +50,7 @@ var XDropdown = /** @class */ (function (_super) {
         // planuje sa to riesit bud zavedenim cache pre options alebo vytiahnutim options na uroven XFormBase
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(XDropdownForEntity_1.XDropdownForEntity, { id: this.props.assocField, entity: this.xAssoc.entityName, displayField: this.props.displayField, value: this.getValue(), onChange: function (value) { return _this.onValueChangeBase(value, _this.props.onChange); }, readOnly: this.isReadOnly(), isNotNull: this.isNotNull(), error: this.getError(), filter: this.getFilterBase(this.props.filter) })));
+            react_1.default.createElement(XDropdownForEntity_1.XDropdownForEntity, { id: this.props.assocField, entity: this.xAssoc.entityName, displayField: this.props.displayField, sortField: this.props.sortField, value: this.getValue(), onChange: function (value) { return _this.onValueChangeBase(value, _this.props.onChange); }, readOnly: this.isReadOnly(), isNotNull: this.isNotNull(), error: this.getError(), filter: this.getFilterBase(this.props.filter) })));
     };
     return XDropdown;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XDropdownForEntity.d.ts

@@ -5,6 +5,7 @@ export interface XDropdownForEntityProps {
     id?: string;
     entity: string;
     displayField: string;
+    sortField?: string;
     value: any | null;
     onChange: (value: any | null) => void;
     readOnly?: boolean;

package/lib/components/XDropdownForEntity.js

@@ -110,13 +110,14 @@ var XDropdownForEntity = /** @class */ (function (_super) {
         this.loadOptions();
     };
     XDropdownForEntity.prototype.loadOptions = function () {
+        var _a;
         return __awaiter(this, void 0, void 0, function () {
             var options;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.props.entity, this.props.filter, this.props.displayField)];
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.props.entity, this.props.filter, (_a = this.props.sortField) !== null && _a !== void 0 ? _a : this.props.displayField)];
                     case 1:
-                        options = _a.sent();
+                        options = _b.sent();
                         if (this.props.isNotNull === undefined || !this.props.isNotNull) {
                             // pridame prazdnu polozku
                             options.splice(0, 0, {}); // null polozka

package/lib/components/XFormDataTable2.d.ts

@@ -24,12 +24,14 @@ export interface XFormDataTableProps {
     rows?: number;
     filterDisplay: "menu" | "row" | "none";
     sortable: boolean;
+    sortField?: string;
     scrollable: boolean;
     scrollWidth?: string;
     scrollHeight?: string;
     shrinkWidth: boolean;
     label?: string;
     readOnly?: boolean;
+    showAddRemoveButtons?: boolean;
     onClickAddRow?: () => void;
     onClickRemoveRow?: (row: any) => void;
     removeButtonInRow: boolean;
@@ -48,6 +50,7 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
         scrollWidth: string;
         scrollHeight: string;
         shrinkWidth: boolean;
+        showAddRemoveButtons: boolean;
         removeButtonInRow: boolean;
         addRowLabel: string;
         removeRowLabel: string;

package/lib/components/XFormDataTable2.js

@@ -612,7 +612,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             // }
             return react_1.default.createElement(column_1.Column, { field: field, header: header, filter: thisLocal.props.filterDisplay !== "none", sortable: thisLocal.props.sortable, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, headerStyle: headerStyle, align: align, body: function (rowData) { return thisLocal.bodyTemplate(childColumnProps, readOnly, rowData, xEntity); } });
         });
-        if (this.props.removeButtonInRow) {
+        if (this.props.showAddRemoveButtons && this.props.removeButtonInRow) {
             // je dolezite nastavit sirku header-a, lebo inac ma stlpec sirku 0 a nevidno ho
             columnElemList.push(react_1.default.createElement(column_1.Column, { key: "removeButton", headerStyle: { width: '2rem' }, body: function (rowData) { return react_1.default.createElement(XButtonIconNarrow_1.XButtonIconNarrow, { icon: "pi pi-times", onClick: function () { return _this.removeRow(rowData); }, disabled: readOnly, addMargin: false }); } }));
         }
@@ -620,10 +620,12 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             react_1.default.createElement("div", { className: "flex justify-content-center" },
                 react_1.default.createElement("label", null, label)),
             react_1.default.createElement("div", { className: "flex justify-content-center" },
-                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filterDisplay: filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
-            react_1.default.createElement("div", { className: "flex justify-content-center" },
-                react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: this.props.addRowLabel, onClick: this.onClickAddRow, disabled: readOnly }),
-                this.props.removeButtonInRow ? undefined : react_1.default.createElement(XButton_1.XButton, { icon: this.props.removeRowIcon, label: this.props.removeRowLabel, onClick: this.onClickRemoveRowBySelection, disabled: readOnly }))));
+                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filterDisplay: filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: this.props.sortField !== undefined ? [{ field: this.props.sortField, order: 1 }] : undefined, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
+            this.props.showAddRemoveButtons ?
+                react_1.default.createElement("div", { className: "flex justify-content-center" },
+                    react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: this.props.addRowLabel, onClick: this.onClickAddRow, disabled: readOnly }),
+                    this.props.removeButtonInRow ? undefined : react_1.default.createElement(XButton_1.XButton, { icon: this.props.removeRowIcon, label: this.props.removeRowLabel, onClick: this.onClickRemoveRowBySelection, disabled: readOnly }))
+                : undefined));
     };
     XFormDataTable2.defaultProps = {
         filterDisplay: "row",
@@ -633,6 +635,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         scrollHeight: '200vh',
         // tym ze pouzivame 200vh (max-height pre body), tak realne scrollovanie sa zapne az pri velmi vela riadkoch
         shrinkWidth: true,
+        showAddRemoveButtons: true,
         removeButtonInRow: false,
         addRowLabel: 'Add row',
         removeRowLabel: 'Remove row'

package/lib/components/XLazyDataTable.d.ts

@@ -1,8 +1,8 @@
 import React, { ReactChild } from 'react';
-import { DataTableFilterMetaData, DataTableOperatorFilterMetaData } from 'primereact/datatable';
+import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData } from 'primereact/datatable';
 import { ColumnBodyOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
 import { SearchTableParams } from "./SearchTableParams";
-import { XCustomFilter } from "../serverApi/FindParam";
+import { XAggregateType, XCustomFilter } from "../serverApi/FindParam";
 import { XOnSaveOrCancelProp } from "./XFormBase";
 export type XBetweenFilterProp = "row" | "column" | undefined;
 export interface XEditModeHandlers {
@@ -32,10 +32,12 @@ export interface XLazyDataTableProps {
     removeRow?: ((selectedRow: any) => Promise<boolean>) | boolean;
     onRemoveRow?: XOnSaveOrCancelProp;
     appButtons?: any;
+    filters?: DataTableFilterMeta;
     customFilter?: XCustomFilter;
-    initSortField?: string;
+    sortField?: string;
     searchTableParams?: SearchTableParams;
     width?: string;
+    dataLoadedState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
     editMode?: boolean;
     editModeHandlers?: XEditModeHandlers;
     displayed?: boolean;
@@ -53,8 +55,14 @@ export declare const XLazyDataTable: {
         shrinkWidth: boolean;
     };
 };
+export type XGetFilterItem = (field: string) => DataTableFilterMetaData | DataTableOperatorFilterMetaData;
 export type XSetFilterItem = (field: string, filterItem: DataTableFilterMetaData | DataTableOperatorFilterMetaData) => void;
-export type XFilterElementProp = (setFilterItem: XSetFilterItem, options: ColumnFilterElementTemplateOptions) => React.ReactNode;
+export type XFilterElementParams = {
+    getFilterItem: XGetFilterItem;
+    setFilterItem: XSetFilterItem;
+    options: ColumnFilterElementTemplateOptions;
+};
+export type XFilterElementProp = (params: XFilterElementParams) => React.ReactNode;
 export interface XLazyColumnProps {
     field: string;
     header?: any;
@@ -63,6 +71,7 @@ export interface XLazyColumnProps {
     showFilterMenu?: boolean;
     betweenFilter?: XBetweenFilterProp | "noBetween";
     width?: string;
+    aggregateType?: XAggregateType;
     filterElement?: XFilterElementProp;
     body?: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
 }

package/lib/components/XLazyDataTable.js

@@ -115,17 +115,40 @@ var api_1 = require("primereact/api");
 var XCalendar_1 = require("./XCalendar");
 var XInputDecimalBase_1 = require("./XInputDecimalBase");
 var XLazyDataTable = function (props) {
+    var _a;
     // must be here, is used in createInitFilters()
     var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(props.entity);
-    var createInitFilters = function () {
+    var createAggregateItems = function () {
         var e_1, _a;
-        var initFilters = {};
-        //let columns = dataTableEl.current.props.children; - does not work
+        var aggregateItems = [];
         var columns = props.children;
         try {
             for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
                 var column = columns_1_1.value;
                 var xLazyColumn = column; // nevedel som to krajsie...
+                if (xLazyColumn.props.aggregateType) {
+                    aggregateItems.push({ field: xLazyColumn.props.field, aggregateType: xLazyColumn.props.aggregateType });
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return aggregateItems;
+    };
+    var createInitFilters = function () {
+        var e_2, _a;
+        var initFilters = {};
+        //let columns = dataTableEl.current.props.children; - does not work
+        var columns = props.children;
+        try {
+            for (var columns_2 = __values(columns), columns_2_1 = columns_2.next(); !columns_2_1.done; columns_2_1 = columns_2.next()) {
+                var column = columns_2_1.value;
+                var xLazyColumn = column; // nevedel som to krajsie...
                 var field = xLazyColumn.props.field;
                 var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPath(xEntity, field);
                 // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
@@ -133,12 +156,12 @@ var XLazyDataTable = function (props) {
                 initFilters[field] = createFilterItem(props.filterDisplay, { value: null, matchMode: filterMatchMode });
             }
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
         finally {
             try {
-                if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
+                if (columns_2_1 && !columns_2_1.done && (_a = columns_2.return)) _a.call(columns_2);
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_2) throw e_2.error; }
         }
         return initFilters;
     };
@@ -175,11 +198,15 @@ var XLazyDataTable = function (props) {
     // premenne platne pre cely component (obdoba member premennych v class-e)
     var dataTableEl = (0, react_1.useRef)(null);
     var customFilter = props.customFilter;
-    var _a = __read((0, react_1.useState)({ rowList: [], totalRecords: 0 }), 2), value = _a[0], setValue = _a[1];
-    var _b = __read((0, react_1.useState)(false), 2), loading = _b[0], setLoading = _b[1];
-    var _c = __read((0, react_1.useState)(0), 2), first = _c[0], setFirst = _c[1];
-    var _d = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rows = _d[0], setRows = _d[1];
+    var aggregateItems = createAggregateItems();
+    var _b = __read((0, react_1.useState)({ rowList: [], totalRecords: 0, aggregateValues: [] }), 2), value = _b[0], setValue = _b[1];
+    var _c = __read((0, react_1.useState)(false), 2), loading = _c[0], setLoading = _c[1];
+    var _d = __read((0, react_1.useState)(0), 2), first = _d[0], setFirst = _d[1];
+    var _e = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rows = _e[0], setRows = _e[1];
     var filtersInit = createInitFilters();
+    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 (displayFieldFilter !== undefined) {
@@ -188,13 +215,13 @@ var XLazyDataTable = function (props) {
         // ak mame props.searchTableParams.customFilter, pridame ho
         customFilter = XUtils_1.XUtils.filterAnd(customFilter, props.searchTableParams.customFilter);
     }
-    var _e = __read((0, react_1.useState)(filtersInit), 2), filters = _e[0], setFilters = _e[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
-    var _f = __read((0, react_1.useState)(props.initSortField ? [{ field: props.initSortField, order: 1 }] : []), 2), multiSortMeta = _f[0], setMultiSortMeta = _f[1];
-    var _g = __read((0, react_1.useState)(null), 2), selectedRow = _g[0], setSelectedRow = _g[1];
-    var _h = __read((0, react_1.useState)(false), 2), dataLoaded = _h[0], setDataLoaded = _h[1]; // priznak kde si zapiseme, ci uz sme nacitali data
-    var _j = __read((0, react_1.useState)(false), 2), exportRowsDialogOpened = _j[0], setExportRowsDialogOpened = _j[1];
-    var _k = __read((0, react_1.useState)(), 2), exportRowsDialogRowCount = _k[0], setExportRowsDialogRowCount = _k[1]; // param pre dialog
-    var _l = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _l[0], setFiltersAfterFiltering = _l[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
+    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)
     // 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
@@ -227,7 +254,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, customFilter: customFilter, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields() });
+            loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: event.first, rows: rows, filters: filters, customFilter: customFilter, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems });
             return [2 /*return*/];
         });
     }); };
@@ -241,14 +268,19 @@ 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, customFilter: customFilter, multiSortMeta: event.multiSortMeta, entity: props.entity, fields: getFields() });
+        loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, customFilter: customFilter, multiSortMeta: event.multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems });
     };
     var onClickFilter = function () {
         //console.log("zavolany onClickFilter");
         loadData();
     };
+    var onClickClearFilter = function () {
+        // najjednoduchsi sposob - pomeni aj pripadne nastavene matchMode hodnoty
+        var filtersInit = createInitFilters();
+        setFilters(filtersInit);
+    };
     var loadData = function () {
-        loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, customFilter: customFilter, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields() });
+        loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, customFilter: customFilter, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems });
     };
     var loadDataBase = function (findParam) { return __awaiter(void 0, void 0, void 0, function () {
         var findResult;
@@ -269,56 +301,57 @@ var XLazyDataTable = function (props) {
         });
     }); };
     var findByFilter = function (findParam) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, rowList, totalRecords;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var findResult;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0: return [4 /*yield*/, XUtils_1.XUtils.fetchOne('lazyDataTableFindRows', findParam)];
                 case 1:
-                    _a = _b.sent(), rowList = _a.rowList, totalRecords = _a.totalRecords;
-                    return [2 /*return*/, { rowList: rowList, totalRecords: parseInt(totalRecords) }];
+                    findResult = _a.sent();
+                    findResult.totalRecords = parseInt(findResult.totalRecords);
+                    return [2 /*return*/, findResult];
             }
         });
     }); };
     var getFields = function () {
         // krasne zobrazi cely objekt!
         //console.log(dataTableEl.current);
-        var e_2, _a;
+        var e_3, _a;
         var fields = [];
         var columns = dataTableEl.current.props.children;
         try {
-            for (var columns_2 = __values(columns), columns_2_1 = columns_2.next(); !columns_2_1.done; columns_2_1 = columns_2.next()) {
-                var column = columns_2_1.value;
+            for (var columns_3 = __values(columns), columns_3_1 = columns_3.next(); !columns_3_1.done; columns_3_1 = columns_3.next()) {
+                var column = columns_3_1.value;
                 fields.push(column.props.field);
             }
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
         finally {
             try {
-                if (columns_2_1 && !columns_2_1.done && (_a = columns_2.return)) _a.call(columns_2);
+                if (columns_3_1 && !columns_3_1.done && (_a = columns_3.return)) _a.call(columns_3);
             }
-            finally { if (e_2) throw e_2.error; }
+            finally { if (e_3) throw e_3.error; }
         }
         return fields;
     };
     var getHeaders = function () {
         // krasne zobrazi cely objekt!
         //console.log(dataTableEl.current);
-        var e_3, _a;
+        var e_4, _a;
         var headers = [];
         var columns = dataTableEl.current.props.children;
         try {
-            for (var columns_3 = __values(columns), columns_3_1 = columns_3.next(); !columns_3_1.done; columns_3_1 = columns_3.next()) {
-                var column = columns_3_1.value;
+            for (var columns_4 = __values(columns), columns_4_1 = columns_4.next(); !columns_4_1.done; columns_4_1 = columns_4.next()) {
+                var column = columns_4_1.value;
                 // pozor! headers tahame z primereact DataTable a napr. pri editacii nemusi byt v atribute header string
                 headers.push(column.props.header);
             }
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
-                if (columns_3_1 && !columns_3_1.done && (_a = columns_3.return)) _a.call(columns_3);
+                if (columns_4_1 && !columns_4_1.done && (_a = columns_4.return)) _a.call(columns_4);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_4) throw e_4.error; }
         }
         return headers;
     };
@@ -355,7 +388,7 @@ var XLazyDataTable = function (props) {
         }
     };
     var onClickRemoveRow = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var reread, e_4, e_5;
+        var reread, e_5, e_6;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -370,8 +403,8 @@ var XLazyDataTable = function (props) {
                     reread = _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    e_4 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage("Remove row failed.", e_4);
+                    e_5 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage("Remove row failed.", e_5);
                     return [3 /*break*/, 4];
                 case 4:
                     if (reread) {
@@ -393,8 +426,8 @@ var XLazyDataTable = function (props) {
                     _a.sent();
                     return [3 /*break*/, 9];
                 case 8:
-                    e_5 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage("Remove row failed.", e_5);
+                    e_6 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage("Remove row failed.", e_6);
                     return [3 /*break*/, 9];
                 case 9:
                     loadData();
@@ -415,7 +448,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, customFilter: customFilter, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields() };
+                    findParam = { resultType: FindParam_1.ResultType.OnlyRowCount, first: first, rows: rows, filters: filtersAfterFiltering, customFilter: customFilter, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), aggregateItems: aggregateItems };
                     return [4 /*yield*/, findByFilter(findParam)];
                 case 1:
                     findResult = _a.sent();
@@ -427,7 +460,7 @@ var XLazyDataTable = function (props) {
         });
     }); };
     var exportRowsDialogOnHide = function (ok, exportType, csvParam) { return __awaiter(void 0, void 0, void 0, function () {
-        var path, exportParam, response, e_6, fileExt, fileName, respBlob, url, a;
+        var path, exportParam, response, e_7, fileExt, fileName, respBlob, url, a;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -449,8 +482,8 @@ var XLazyDataTable = function (props) {
                     response = _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    e_6 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage("Export failed.", e_6);
+                    e_7 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage("Export failed.", e_7);
                     return [2 /*return*/];
                 case 4:
                     fileExt = exportType;
@@ -497,6 +530,10 @@ var XLazyDataTable = function (props) {
         var filtersCloned = __assign({}, filters);
         setFilters(filtersCloned);
     };
+    // vseobecna specialna metodka pouzvana pri custom filtri (XLazyColumn.filterElement)
+    var getFilterItem = function (field) {
+        return filters[field];
+    };
     // vseobecna metodka - nastavi hodnotu do filtra
     // ak je matchMode === undefined, tak zachova povodnu hodnotu matchMode
     var setFilterValue = function (field, value, matchMode) {
@@ -678,19 +715,22 @@ var XLazyDataTable = function (props) {
     if ((props.editMode === true || props.editMode === false) && props.editModeHandlers === undefined) {
         throw "XLazyDataTable: for props.editMode = true/false, props.editModeHandlers must be defined.";
     }
-    var paginatorLeft = undefined;
-    var paginatorRight = undefined;
+    // 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,
+        "Total records: ",
+        value.totalRecords);
+    var paginatorRight = react_1.default.createElement("div", null);
     if (props.editMode === true) {
-        paginatorLeft = react_1.default.createElement("div", null); // paginatorLeft pouzivame, aby bol default paginator v strede (bez paginatorLeft je default paginator presunuty dolava)
         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) {
-        paginatorLeft = react_1.default.createElement("div", null);
-        paginatorRight = 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" });
+        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 - editMode is undefined - browse is not editable
     // export pre search button-y zatial vypneme
     var exportRows = (props.searchTableParams === undefined);
     // pre lepsiu citatelnost vytvarame stlpce uz tu
@@ -722,8 +762,8 @@ var XLazyDataTable = function (props) {
         var filterElement;
         if (childColumn.props.filterElement !== undefined) {
             filterElement = function (options) {
-                // compilator sa stazoval ze childColumn.props.filterElement muze byt undefined, preto som pridal "!"
-                return childColumn.props.filterElement(setFilterItem, options);
+                // compilator sa stazoval ze childColumn.props.filterElement moze byt undefined, preto som pridal "!"
+                return childColumn.props.filterElement({ getFilterItem: getFilterItem, setFilterItem: setFilterItem, options: options });
             };
         }
         else {
@@ -825,11 +865,27 @@ var XLazyDataTable = function (props) {
                 align = "center";
             }
         }
-        return react_1.default.createElement(column_1.Column, { field: childColumn.props.field, header: header, filter: true, sortable: true, filterElement: filterElement, dataType: dataType, showFilterMenu: showFilterMenu, showClearButton: showClearButton, body: body, headerStyle: headerStyle, align: align });
+        // *********** footer ***********
+        var footer = undefined;
+        if (childColumn.props.aggregateType && value.aggregateValues) {
+            var aggregateValue = value.aggregateValues[childColumn.props.field];
+            if (aggregateValue !== undefined && aggregateValue !== null) {
+                if (xField.type === "decimal" || xField.type === "number") {
+                    // v json subore su stringy (cislo v ""), konvertujeme aby sme zmenili 123.45 na 123,45
+                    aggregateValue = (0, XUtilsConversions_1.numberAsUI)((0, XUtilsConversions_1.numberFromModel)(aggregateValue), xField.scale);
+                }
+            }
+            else {
+                aggregateValue = ""; // nemame este nacitane data
+            }
+            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("div", null,
         react_1.default.createElement("div", { className: "flex justify-content-center" },
-            react_1.default.createElement(XButton_1.XButton, { label: "Filter", onClick: onClickFilter })),
+            react_1.default.createElement(XButton_1.XButton, { label: "Filter", onClick: onClickFilter }),
+            react_1.default.createElement(XButton_1.XButton, { label: "Clear filter", onClick: onClickClearFilter })),
         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" },

package/lib/components/XUtils.d.ts

@@ -34,7 +34,7 @@ export declare class XUtils {
     static registerAppForm(elem: any, entity: string, formId?: string): void;
     static getAppForm(entity: string, formId?: string): any;
     static fetchMany(path: string, value: any, usePublicToken?: boolean | XToken): Promise<any[]>;
-    static fetchRows(entity: string, customFilter: XCustomFilter | undefined, sortField?: string): Promise<any[]>;
+    static fetchRows(entity: string, customFilter?: XCustomFilter | undefined, sortField?: string, fields?: string[]): Promise<any[]>;
     static fetchOne(path: string, value: any, usePublicToken?: boolean | XToken): Promise<any>;
     static fetchString(path: string, value: any): Promise<string>;
     static fetch(path: string, value: any, usePublicToken?: boolean | XToken): Promise<any>;

package/lib/components/XUtils.js

@@ -254,13 +254,13 @@ var XUtils = /** @class */ (function () {
         return XUtils.fetch(path, value, usePublicToken);
     };
     // pomocna metodka pouzivajuca lazyDataTable service
-    XUtils.fetchRows = function (entity, customFilter, sortField) {
+    XUtils.fetchRows = function (entity, customFilter, sortField, fields) {
         return __awaiter(this, void 0, void 0, function () {
             var findParam, rowList;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        findParam = { resultType: FindParam_1.ResultType.AllRows, entity: entity, customFilter: customFilter, multiSortMeta: sortField ? [{ field: sortField, order: 1 }] : undefined };
+                        findParam = { resultType: FindParam_1.ResultType.AllRows, entity: entity, customFilter: customFilter, multiSortMeta: sortField ? [{ field: sortField, order: 1 }] : undefined, fields: fields };
                         return [4 /*yield*/, XUtils.fetchOne('lazyDataTableFindRows', findParam)];
                     case 1:
                         rowList = (_a.sent()).rowList;

package/lib/serverApi/FindParam.d.ts

@@ -11,6 +11,16 @@ export interface XCustomFilter {
     filter: string;
     values: XCustomFilterValues;
 }
+export declare enum XAggregateType {
+    Min = "MIN",
+    Max = "MAX",
+    Sum = "SUM",
+    Avg = "AVG"
+}
+export interface XAggregateItem {
+    field: string;
+    aggregateType: XAggregateType;
+}
 export interface FindParam {
     resultType: ResultType;
     first?: number;
@@ -20,4 +30,5 @@ export interface FindParam {
     multiSortMeta?: DataTableSortMeta[];
     entity: string;
     fields?: string[];
+    aggregateItems?: XAggregateItem[];
 }

package/lib/serverApi/FindParam.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResultType = void 0;
+exports.XAggregateType = exports.ResultType = void 0;
 // TODO - replaced with DataTableFilterMetaData
 // export interface FilterValue {
 //     value : string;
@@ -21,3 +21,10 @@ var ResultType;
     ResultType[ResultType["RowCountAndPagedRows"] = 1] = "RowCountAndPagedRows";
     ResultType[ResultType["AllRows"] = 2] = "AllRows";
 })(ResultType = exports.ResultType || (exports.ResultType = {}));
+var XAggregateType;
+(function (XAggregateType) {
+    XAggregateType["Min"] = "MIN";
+    XAggregateType["Max"] = "MAX";
+    XAggregateType["Sum"] = "SUM";
+    XAggregateType["Avg"] = "AVG";
+})(XAggregateType = exports.XAggregateType || (exports.XAggregateType = {}));

package/lib/serverApi/FindResult.d.ts

@@ -1,4 +1,8 @@
+export interface XAggregateValues {
+    [key: string]: any;
+}
 export interface FindResult {
     rowList?: any[];
     totalRecords?: number;
+    aggregateValues?: XAggregateValues;
 }

package/package.json

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