@onehat/ui 0.3.38 → 0.3.39

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.38",
+	"version": "0.3.39",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Form/Field/Combo/Combo.js

@@ -516,7 +516,7 @@ export function ComboComponent(props) {
 													};
 												}}
 												allowToggleSelection={true}
-												disableAdjustingPageSizeToHeight={true}
+												autoAdjustPageSizeToHeight={false}
 												{...props}
 												h={styles.FORM_COMBO_MENU_HEIGHT + 'px'}
 												disablePresetButtons={!isEditor}

package/src/Components/Form/Field/Combo/PageSizeCombo.js

@@ -20,7 +20,7 @@ export default function PageSizeCombo(props) {
 							// [ 1, '1/pg', ],
 							[ 5, '5/pg', ],
 							[ 10, '10/pg', ],
-							[ 20, '20pg', ],
+							[ 20, '20/pg', ],
 							[ 50, '50/pg', ],
 							[ 100, '100/pg', ],
 						]}

package/src/Components/Grid/Grid.js

@@ -77,7 +77,7 @@ function GridComponent(props) {
 			pullToRefresh = true,
 			hideNavColumn = true,
 			noneFoundText,
-			disableAdjustingPageSizeToHeight = false,
+			autoAdjustPageSizeToHeight = true,
 			disableLoadingIndicator = false,
 			disableSelectorSelected = false,
 			showRowExpander = false,
@@ -632,7 +632,7 @@ function GridComponent(props) {
 			}
 
 			let adjustPageSizeToHeight = true;
-			if (disableAdjustingPageSizeToHeight || !Repository) {
+			if (!autoAdjustPageSizeToHeight || !Repository || !UiGlobals.autoAdjustPageSizeToHeight) {
 				adjustPageSizeToHeight = false;
 			}
 			if (adjustPageSizeToHeight) {
@@ -820,7 +820,21 @@ function GridComponent(props) {
 	let listFooterComponent = null;
 	if (!disableBottomToolbar) {
 		if (Repository && bottomToolbar === 'pagination' && !disablePagination && Repository.isPaginated) {
-			listFooterComponent = <PaginationToolbar Repository={Repository} self={self} toolbarItems={footerToolbarItemComponents} disablePageSize={!disableAdjustingPageSizeToHeight} />;
+			let disablePageSize = autoAdjustPageSizeToHeight; // component setting
+			if (!_.isNil(UiGlobals.autoAdjustPageSizeToHeight) && !UiGlobals.autoAdjustPageSizeToHeight) { // global setting
+				disablePageSize = false;
+			}
+			let showMoreOnly = false;
+			if (UiGlobals.paginationIsShowMoreOnly) { // global setting
+				showMoreOnly = true;
+			}
+			listFooterComponent = <PaginationToolbar
+										Repository={Repository}
+										self={self}
+										toolbarItems={footerToolbarItemComponents}
+										disablePageSize={disablePageSize}
+										showMoreOnly={showMoreOnly}
+									/>;
 		} else if (footerToolbarItemComponents.length) {
 			listFooterComponent = <Toolbar>{footerToolbarItemComponents}</Toolbar>;
 		}

package/src/Components/Hoc/withFilters.js

@@ -253,7 +253,7 @@ export default function withFilters(WrappedComponent) {
 					const
 						filterProps = {
 							mx: 1,
-							disableAdjustingPageSizeToHeight: true,
+							autoAdjustPageSizeToHeight: false,
 							pageSize: 20,
 							uniqueRepository: true,
 						},

package/src/Components/Report/Report.js

@@ -16,6 +16,7 @@ import ChartLine from '../Icons/ChartLine.js';
 import Pdf from '../Icons/Pdf.js';
 import Excel from '../Icons/Excel.js';
 import UiGlobals from '../../UiGlobals.js';
+import qs from 'qs';
 import _ from 'lodash';
 
 const
@@ -40,6 +41,14 @@ function Report(props) {
 		styles = UiGlobals.styles,
 		url = UiGlobals.baseURL + 'Reports/getReport',
 		buttons = [],
+		downloadInBackground = (data) => {
+			const a = document.createElement('A');
+			a.href = url + '?' + qs.stringify(data);
+			a.download = true;
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+		},
 		downloadWithFetch = (data) => {
 			const options = {
 				method: 'POST',
@@ -66,10 +75,14 @@ function Report(props) {
 					showReportHeaders,
 					// download_token, // not sure this is needed
 					...data,
-				},
-				closeWindow = reportType === EXCEL;
+				};
 
-			downloadWithFetch(params, closeWindow);
+			if (reportType === EXCEL) {
+				downloadInBackground(params);
+			} else {
+				// opens a new window
+				downloadWithFetch(params);
+			}
 		};
 
 	const propsIcon = props._icon || {};

package/src/Components/Toolbar/Pagination.js

@@ -5,6 +5,7 @@ import {
 	Text,
 } from 'native-base';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
 import AngleLeft from '../Icons/AngleLeft.js';
 import AnglesLeft from '../Icons/AnglesLeft.js';
@@ -18,6 +19,7 @@ export default function Pagination(props) {
 	const {
 			minimize = false,
 			disablePageSize = false,
+			showMoreOnly = false,
 
 			// withComponent
 			self,
@@ -56,90 +58,104 @@ export default function Pagination(props) {
 				w: 20,
 			};
 		let items = [],
+			isDisabled = false;
+		if (showMoreOnly) {
+			isDisabled = (pageEnd === total);
+			items.push(<Button
+							key="showMore"
+							parent={self}
+							reference="showMoreBtn"
+							onPress={() => Repository.showMore()}
+							isDisabled={isDisabled}
+							tooltip="Show More"
+						>Show More</Button>);
+		} else {
 			isDisabled = page === 1;
-		items.push(<IconButton
-						key="first"
-						parent={self}
-						reference="firstPageBtn"
-						{...iconButtonProps}
-						isDisabled={isDisabled}
-						icon={<Icon as={AnglesLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
-						onPress={() => Repository.setPage(1)}
-						tooltip="First Page"
-					/>);
-		items.push(<IconButton
-						key="prev"
-						parent={self}
-						reference="prevPageBtn"
-						{...iconButtonProps}
-						isDisabled={isDisabled}
-						icon={<Icon as={AngleLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
-						onPress={() => Repository.prevPage()}
-						tooltip="Previous Page"
-					/>);
-		if (!minimize) {
-			items.push(<Row
-							key="pageSelector"
-							mx={3}
-							justifyContent="center"
-							alignItems="center"
-						>
-							<Text mr={2}>Page</Text>
-							<Input
-								parent={self}
-								reference="pageInput"
-								keyboardType="numeric"
-								value={page?.toString()}
-								onChangeValue={(value) => Repository.setPage(value)}
-								maxValue={totalPages}
-								isDisabled={totalPages === 1}
-								w={10}
-								tooltip="Set Page"
-							/>
-							<Text ml={2}>of {totalPages}</Text>
-						</Row>);
-		}
-
-		isDisabled = page === totalPages || totalPages <= 1;
-		items.push(<IconButton
-						key="next"
-						parent={self}
-						reference="nextPageBtn"
-						{...iconButtonProps}
-						isDisabled={isDisabled}
-						icon={<Icon as={AngleRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
-						onPress={() => Repository.nextPage()}
-						tooltip="Next Page"
-					/>);
-		items.push(<IconButton
-						key="last"
-						parent={self}
-						reference="lastPageBtn"
-						{...iconButtonProps}
-						isDisabled={isDisabled}
-						icon={<Icon as={AnglesRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
-						onPress={() => Repository.setPage(totalPages)}
-						tooltip="Last Page"
-					/>);
-		if (!Repository.isLocal) {
 			items.push(<IconButton
-							key="reload"
+							key="first"
 							parent={self}
-							reference="reloadPageBtn"
+							reference="firstPageBtn"
 							{...iconButtonProps}
-							icon={<Icon as={Rotate} {...iconProps} color="trueGray.600" />}
-							onPress={() => Repository.reload()}
-							tooltip="Reload"
+							isDisabled={isDisabled}
+							icon={<Icon as={AnglesLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+							onPress={() => Repository.setPage(1)}
+							tooltip="First Page"
 						/>);
-		}
-
-		if (!minimize && !disablePageSize) {
-			items.push(<PageSizeCombo key="pageSize" pageSize={pageSize} Repository={Repository} />);
-		}
-
-		let pageSpan = `${pageStart} – ${pageEnd}`;
-		if (pageStart === pageEnd) {
-			pageSpan = pageStart;
+			items.push(<IconButton
+							key="prev"
+							parent={self}
+							reference="prevPageBtn"
+							{...iconButtonProps}
+							isDisabled={isDisabled}
+							icon={<Icon as={AngleLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+							onPress={() => Repository.prevPage()}
+							tooltip="Previous Page"
+						/>);
+			if (!minimize) {
+				items.push(<Row
+								key="pageSelector"
+								mx={3}
+								justifyContent="center"
+								alignItems="center"
+							>
+								<Text mr={2}>Page</Text>
+								<Input
+									parent={self}
+									reference="pageInput"
+									keyboardType="numeric"
+									value={page?.toString()}
+									onChangeValue={(value) => Repository.setPage(value)}
+									maxValue={totalPages}
+									isDisabled={totalPages === 1}
+									w={10}
+									tooltip="Set Page"
+								/>
+								<Text ml={2}>of {totalPages}</Text>
+							</Row>);
+			}
+	
+			isDisabled = page === totalPages || totalPages <= 1;
+			items.push(<IconButton
+							key="next"
+							parent={self}
+							reference="nextPageBtn"
+							{...iconButtonProps}
+							isDisabled={isDisabled}
+							icon={<Icon as={AngleRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+							onPress={() => Repository.nextPage()}
+							tooltip="Next Page"
+						/>);
+			items.push(<IconButton
+							key="last"
+							parent={self}
+							reference="lastPageBtn"
+							{...iconButtonProps}
+							isDisabled={isDisabled}
+							icon={<Icon as={AnglesRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+							onPress={() => Repository.setPage(totalPages)}
+							tooltip="Last Page"
+						/>);
+			if (!Repository.isLocal) {
+				items.push(<IconButton
+								key="reload"
+								parent={self}
+								reference="reloadPageBtn"
+								{...iconButtonProps}
+								icon={<Icon as={Rotate} {...iconProps} color="trueGray.600" />}
+								onPress={() => Repository.reload()}
+								tooltip="Reload"
+							/>);
+			}
+			if (!minimize && !disablePageSize) {
+				items.push(<PageSizeCombo key="pageSize" pageSize={pageSize} Repository={Repository} />);
+			}
+			if (!minimize) {
+				let pageSpan = `${pageStart} – ${pageEnd}`;
+				if (pageStart === pageEnd) {
+					pageSpan = pageStart;
+				}
+				items.push(<Text key="pageDisplay" ml={3}>Displaying {pageSpan} of {total}</Text>);
+			}
 		}
 		
 		return <Row
@@ -150,7 +166,6 @@ export default function Pagination(props) {
 					{...props}
 				>
 					{items}
-					{!minimize && <Text ml={3}>Displaying {pageSpan} of {total}</Text>}
 				</Row>;
 	}, [
 		// Repository,
@@ -162,6 +177,4 @@ export default function Pagination(props) {
 		pageEnd,
 		minimize,
 	])
-
-
 };