@michalrakus/x-react-web-lib 0.24.0 → 0.25.0

package/lib/administration/XBrowseMetaForm.js

@@ -44,14 +44,15 @@ var XBrowseMetaForm = /** @class */ (function (_super) {
                     react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "entity", label: "Entity", size: 20 }),
                     react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "browseId", label: "Browse ID", size: 20 }),
                     react_1.default.createElement(XInputDecimal_1.XInputDecimal, { form: this, field: "rows", label: "Rows" }))),
-            react_1.default.createElement(XFormDataTable2_1.XFormDataTable2, { form: this, assocField: "columnMetaList", label: "Column list" },
-                react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "idXColumnMeta", header: "ID", readOnly: true }),
-                react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "field", header: "Field", width: "17rem" }),
-                react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "header", header: "Header", width: "17rem" }),
-                react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "align", header: "Align" }),
-                react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "dropdownInFilter", header: "Dropdown in filter" }),
-                react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "width", header: "Width" }),
-                react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "columnOrder", header: "Column order" })),
+            react_1.default.createElement("div", { className: "x-viewport-width" },
+                react_1.default.createElement(XFormDataTable2_1.XFormDataTable2, { form: this, assocField: "columnMetaList", label: "Column list" },
+                    react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "idXColumnMeta", header: "ID", readOnly: true }),
+                    react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "field", header: "Field", width: "17rem" }),
+                    react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "header", header: "Header", width: "17rem" }),
+                    react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "align", header: "Align" }),
+                    react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "dropdownInFilter", header: "Dropdown in filter" }),
+                    react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "width", header: "Width" }),
+                    react_1.default.createElement(XFormDataTable2_1.XFormColumn, { field: "columnOrder", header: "Column order" }))),
             react_1.default.createElement(XFormFooter_1.XFormFooter, { form: this })));
     };
     XBrowseMetaForm = __decorate([

package/lib/components/XDropdown.js

@@ -150,9 +150,10 @@ var XDropdown = /** @class */ (function (_super) {
         // TODO - readOnly implementovat
         // Dropdown setuje do atributu object.assocField asociovany objekt zo zoznamu objektov ktore ziskame podla asociacie
         var assocObject = this.getValueFromObject();
+        // appendTo={document.body} appenduje overlay panel na element body - eliminuje "skakanie" formularu na mobile pri kliknuti na dropdown
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: props.assocField, className: "col-fixed", style: labelStyle }, label),
-            react_1.default.createElement(dropdown_1.Dropdown, __assign({ id: props.assocField, optionLabel: props.displayField, value: assocObject, options: options, onChange: onValueChange }, this.getClassNameTooltip()))));
+            react_1.default.createElement(dropdown_1.Dropdown, __assign({ appendTo: document.body, id: props.assocField, optionLabel: props.displayField, value: assocObject, options: options, onChange: onValueChange }, this.getClassNameTooltip()))));
     };
     return XDropdown;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XExportRowsDialog.js

@@ -84,6 +84,7 @@ var XExportRowsDialog = function (props) {
             react_1.default.createElement("label", { className: "col-fixed", style: { width: '9.3rem' } }, "Export type"),
             react_1.default.createElement(dropdown_1.Dropdown, { value: exportType, options: XUtils_1.XUtils.exportTypeOptions, onChange: function (e) { return setExportType(e.value); } })),
         elem,
-        react_1.default.createElement(XButton_1.XButton, { label: "Export", onClick: onExport })));
+        react_1.default.createElement("div", { className: "flex justify-content-center" },
+            react_1.default.createElement(XButton_1.XButton, { label: "Export", onClick: onExport }))));
 };
 exports.XExportRowsDialog = XExportRowsDialog;

package/lib/components/XFormDataTable2.js

@@ -305,11 +305,15 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         var object = this.props.form.state.object;
         var valueList = object !== null ? object[this.props.assocField] : [];
         var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.getEntity());
-        var scrollWidth;
-        var scrollHeight;
+        var scrollWidth = undefined; // vypnute horizontalne scrollovanie
+        var scrollHeight = undefined; // vypnute vertikalne scrollovanie
         if (this.props.scrollable) {
-            scrollWidth = this.props.scrollWidth;
-            scrollHeight = this.props.scrollHeight;
+            if (this.props.scrollWidth !== "none") {
+                scrollWidth = this.props.scrollWidth;
+            }
+            if (this.props.scrollHeight !== "none") {
+                scrollHeight = this.props.scrollHeight;
+            }
         }
         var style = {};
         if (scrollWidth !== undefined) {

package/lib/components/XFormNavigator3.js

@@ -86,7 +86,19 @@ var XFormNavigator3 = /** @class */ (function (_super) {
                 console.log("neocakavana chyba - pole formElements je prazdne");
             }
         }
-        this.setState({ formElements: formElementsCloned });
+        this.setState({ formElements: formElementsCloned }, function () {
+            // ked sa na mobile preklikavame medzi formularmi, tak browser drzi nascrollovanu poziciu ale my sa chceme vratit na zaciatok stranky
+            // (tento callback sa zavola po refreshnuti stranky)
+            // taketo nieco nezafungovalo, neviem preco...
+            // setTimeout(function() {
+            //     window.scrollTo(0,0);
+            // }, 100);
+            // tak scrollujeme k menu, ktore je v hornej casti
+            var menuElem = document.getElementById("menuId");
+            if (menuElem !== null) {
+                menuElem.scrollIntoView();
+            }
+        });
     };
     XFormNavigator3.prototype.render = function () {
         var _this = this;
@@ -100,7 +112,8 @@ var XFormNavigator3 = /** @class */ (function (_super) {
             var display = (displayed ? "block" : "none");
             // TODO - neviem ci naisto treba key={index}
             // max-width: 100% - koli chybe ked sa na mobile nezobrazovala lava cast tabulky/formularu (nedalo sa k nej doscrollovat)
-            return react_1.default.createElement("div", { key: index, style: { display: display, maxWidth: "100%" } }, formElementCloned);
+            // poznamka2: tento problem sa vyskytoval v suvislosti s flex-direction: column na .App-form - ten sme zrusili a preto maxWidth (zatial) odstranujeme
+            return react_1.default.createElement("div", { key: index, style: { display: display /*, maxWidth: "100%"*/ } }, formElementCloned);
         });
         return (react_1.default.createElement("div", { className: "App-form" }, forms));
     };

package/lib/components/XLazyDataTable.d.ts

@@ -13,10 +13,11 @@ export interface XEditModeHandlers {
 export interface XLazyDataTableProps {
     entity: string;
     dataKey?: string;
-    rows?: number;
+    paginator: boolean;
+    rows: number;
     scrollable: boolean;
-    scrollWidth?: string;
-    scrollHeight?: string;
+    scrollWidth: string;
+    scrollHeight: string;
     formFooterHeight?: string;
     shrinkWidth: boolean;
     onAddRow?: () => void;
@@ -33,7 +34,11 @@ export interface XLazyDataTableProps {
 export declare const XLazyDataTable: {
     (props: XLazyDataTableProps): JSX.Element;
     defaultProps: {
+        paginator: boolean;
+        rows: number;
         scrollable: boolean;
+        scrollWidth: string;
+        scrollHeight: string;
         shrinkWidth: boolean;
     };
 };

package/lib/components/XLazyDataTable.js

@@ -112,7 +112,7 @@ var XLazyDataTable = function (props) {
     var _a = __read(react_1.useState({ rowList: [], totalRecords: 0 }), 2), value = _a[0], setValue = _a[1];
     var _b = __read(react_1.useState(false), 2), loading = _b[0], setLoading = _b[1];
     var _c = __read(react_1.useState(0), 2), first = _c[0], setFirst = _c[1];
-    var _d = __read(react_1.useState(props.rows !== undefined ? props.rows : 10), 2), rows = _d[0], setRows = _d[1];
+    var _d = __read(react_1.useState(props.paginator ? props.rows : undefined), 2), rows = _d[0], setRows = _d[1];
     var filtersInit = {};
     if (props.searchTableParams !== undefined && props.searchTableParams.filter !== undefined) {
         filtersInit[props.searchTableParams.displayField] = { value: props.searchTableParams.filter, matchMode: "startsWith" };
@@ -488,29 +488,54 @@ var XLazyDataTable = function (props) {
         return bodyValue;
     };
     var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(props.entity);
-    // ak nemame scrollWidth/scrollHeight zadane, vyratame scrollWidth/scrollHeight tak aby tabulka "sadla" okna (viewport-u)
-    var scrollWidth;
-    var scrollHeight;
+    // ak mame scrollWidth/scrollHeight = viewport (default), vyratame scrollWidth/scrollHeight tak aby tabulka "sadla" okna (viewport-u)
+    var scrollWidth = undefined; // vypnute horizontalne scrollovanie
+    var scrollHeight = undefined; // vypnute vertikalne scrollovanie
     if (props.scrollable) {
-        scrollWidth = props.scrollWidth;
-        if (scrollWidth === undefined || scrollWidth === "default") {
-            scrollWidth = 'calc(100vw - 1.4rem)'; // 20px okraje
-        }
-        scrollHeight = props.scrollHeight;
-        if (scrollHeight === undefined || scrollHeight === "default") {
-            // vypocet je priblizny, robeny na mobil, desktop bude mat mozno iny
-            //const headerHeight = XUtils.toPX0('12.7rem');
-            //let footerHeight = XUtils.toPX0('3.7rem') + XUtils.toPX0('3rem'); // table footer (paging) + buttons Add row, Edit, ...
-            // na desktope mi nechce odpocitat vysku taskbar-u od window.screen.availHeight, tak to poriesime takymto hack-om:
-            // if (!XUtils.isMobile()) {
-            //     footerHeight += XUtils.toPX0('6rem'); // priblizna vyska taskbaru (ak mam 2 rady buttonov)
-            // }
-            var headerFooterHeight = 344.35 - XUtils_1.XUtils.toPX0('4.43rem'); // experimentalne zistena vyska header/footer (body - table body) bez formFooterHeight
-            // este pridame vysku linkov na zdrojaky, ak treba
-            if (props.formFooterHeight !== undefined) {
-                headerFooterHeight += XUtils_1.XUtils.toPX0(XUtils_1.XUtils.processGridBreakpoints(props.formFooterHeight));
+        if (props.scrollWidth !== "none") {
+            scrollWidth = props.scrollWidth;
+            if (scrollWidth === "viewport") {
+                scrollWidth = 'calc(100vw - 1.4rem)'; // 20px okraje
+            }
+        }
+        if (props.scrollHeight !== "none") {
+            scrollHeight = props.scrollHeight;
+            if (scrollHeight === "viewport") {
+                // vypocet je priblizny, robeny na mobil, desktop bude mat mozno iny
+                //const headerHeight = XUtils.toPX0('12.7rem');
+                //let footerHeight = XUtils.toPX0('3.7rem') + XUtils.toPX0('3rem'); // table footer (paging) + buttons Add row, Edit, ...
+                // na desktope mi nechce odpocitat vysku taskbar-u od window.screen.availHeight, tak to poriesime takymto hack-om:
+                // if (!XUtils.isMobile()) {
+                //     footerHeight += XUtils.toPX0('6rem'); // priblizna vyska taskbaru (ak mam 2 rady buttonov)
+                // }
+                var viewHeight = void 0;
+                var headerFooterHeight = void 0;
+                if (props.searchTableParams === undefined) {
+                    // sme v standardnom formulari
+                    viewHeight = '100vh';
+                    headerFooterHeight = XUtils_1.XUtils.toPX0('20.89rem') - XUtils_1.XUtils.toPX0('4.43rem'); // experimentalne zistena vyska header/footer (body - table body) bez formFooterHeight
+                }
+                else {
+                    // sme v dialogu
+                    if (XUtils_1.XUtils.isMobile()) {
+                        viewHeight = '98vh'; // .p-dialog pre mobil ma max-height: 98%
+                        headerFooterHeight = XUtils_1.XUtils.toPX0('17.60rem'); // rucne zratane
+                    }
+                    else {
+                        viewHeight = '90vh'; // .p-dialog pre desktop ma max-height: 90%
+                        headerFooterHeight = XUtils_1.XUtils.toPX0('18.60rem'); // rucne zratane (desktop ma vecsi margin dole na dialogu)
+                    }
+                }
+                // pridame vysku paging-u, ak treba
+                if (props.paginator) {
+                    headerFooterHeight += XUtils_1.XUtils.toPX0('3.71rem');
+                }
+                // este pridame vysku linkov na zdrojaky, ak treba
+                if (props.formFooterHeight !== undefined) {
+                    headerFooterHeight += XUtils_1.XUtils.toPX0(XUtils_1.XUtils.processGridBreakpoints(props.formFooterHeight));
+                }
+                scrollHeight = "calc(" + viewHeight + " - " + headerFooterHeight + "px)";
             }
-            scrollHeight = "calc(100vh - " + headerFooterHeight + "px)";
         }
     }
     var style = {};
@@ -545,6 +570,8 @@ var XLazyDataTable = function (props) {
         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" });
     }
     // 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
     var columnElemList = react_1.default.Children.map(props.children, function (child) {
         // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
@@ -621,19 +648,23 @@ var XLazyDataTable = function (props) {
         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("div", { className: "flex justify-content-center" },
-            react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: true, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, 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(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: props.paginator, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, 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" },
             props.onAddRow !== undefined ? react_1.default.createElement(XButton_1.XButton, { label: "Add row", onClick: onClickAddRow }) : null,
             props.onEdit !== undefined ? react_1.default.createElement(XButton_1.XButton, { label: "Edit", onClick: onClickEdit }) : null,
             props.removeRow !== undefined && props.removeRow !== false ? react_1.default.createElement(XButton_1.XButton, { label: "Remove row", onClick: onClickRemoveRow }) : null,
-            react_1.default.createElement(XButton_1.XButton, { label: "Export rows", onClick: onClickExport }),
+            exportRows ? react_1.default.createElement(XButton_1.XButton, { label: "Export rows", onClick: onClickExport }) : null,
             props.appButtons,
-            react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { dialogOpened: exportRowsDialogOpened, rowCount: exportRowsDialogRowCount, onHideDialog: exportRowsDialogOnHide }),
-            props.searchTableParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { label: "Choose", onClick: onClickChoose }) : null)));
+            props.searchTableParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { label: "Choose", onClick: onClickChoose }) : null,
+            exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { dialogOpened: exportRowsDialogOpened, rowCount: exportRowsDialogRowCount, onHideDialog: exportRowsDialogOnHide }) : null)));
 };
 exports.XLazyDataTable = XLazyDataTable;
 exports.XLazyDataTable.defaultProps = {
+    paginator: true,
+    rows: 10,
     scrollable: true,
+    scrollWidth: 'viewport',
+    scrollHeight: 'viewport',
     shrinkWidth: true
 };
 // TODO - XLazyColumn neni idealny nazov, lepsi je XColumn (ale zatial nechame XLazyColumn)

package/lib/components/XLoginForm.js

@@ -111,7 +111,7 @@ var XLoginForm = function (props) {
             }
         });
     }); };
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement("div", { className: "flex flex-column align-items-center" },
         react_1.default.createElement("h2", null, "Please log in"),
         react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: "userName", className: "col-fixed", style: { width: '10.5rem' } }, "Username"),

package/package.json

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