@onehat/ui 0.4.64 → 0.4.65

package/package.json

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

package/src/Components/Container/ContainerColumn.js

@@ -0,0 +1,21 @@
+import {
+	VStack,
+} from '@project-components/Gluestack';
+import _ from 'lodash';
+
+// This component allows us to stack multiple children in a Container slot (e.g. east)
+// such that the ContainerColumn can be passed props like isResizable, 
+// which the Container will translate into classNames for the VStack component.
+
+export default function ContainerColumn(props) {
+	let className = `
+		ContainerColumn
+	`;
+	if (props.className) {
+		className += ` ${props.className}`;
+	}
+	
+	return <VStack className={className}>
+				{props.children}
+			</VStack>;
+}

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

@@ -767,6 +767,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 					newEntityDisplayProperty={newEntityDisplayProperty}
 					disablePresetButtons={!isEditor}
 					alternateRowBackgrounds={false}
+					showSelectHandle={false}
 					onChangeSelection={(selection) => {
 
 						if (Repository && selection[0]?.isPhantom) {

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

@@ -46,12 +46,12 @@ export function JsonElement(props) {
 		${testID}
 	`;
 	if (props.className) {
-		className += ' ' + props.className;
+		className += ' ' + propsToPass.className;
 	}
 	// if (UiGlobals.mode === UI_MODE_WEB) {
 		const src = value ? JSON.parse(value) : {};
 		assembledComponents = 
-			<HStack style={props.style} className={className}>
+			<HStack style={propsToPass.style} className={className}>
 				<JsonEditor
 					width="100%"
 					editable={!isViewOnly}
@@ -61,7 +61,7 @@ export function JsonElement(props) {
 					onEdit={(obj) => {
 						setValue(JSON.stringify(obj.updated_src));
 					}}
-					{...props}
+					{...propsToPass}
 				/>
 			</HStack>;
 	// }

package/src/Components/Grid/Grid.js

@@ -132,6 +132,7 @@ function GridComponent(props) {
 			getExpandedRowContent,
 			showHeaders = true,
 			showHovers = true,
+			showSelectHandle = true,
 			canColumnsSort = true,
 			canColumnsReorder = true,
 			canColumnsResize = true,
@@ -424,10 +425,10 @@ function GridComponent(props) {
 									} else {
 										let canDoEdit = false,
 											canDoView = false;
-										if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection))) {
+										if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection)) && !props.disableEdit) {
 											canDoEdit = true;
 										} else
-										if (onView && canUser && canUser(VIEW)) {
+										if (onView && canUser && canUser(VIEW) && !props.disableView) {
 											canDoView = true;
 										}
 
@@ -493,6 +494,7 @@ function GridComponent(props) {
 												isInlineEditorShown={isInlineEditorShown}
 												areRowsDragSource={areRowsDragSource}
 												showColumnsSelector={showColumnsSelector}
+												showSelectHandle={showSelectHandle}
 											/>;
 							if (showRowExpander) {
 								// align the header row to content rows by adding a spacer that matches the width of the Grid-rowExpander-expandBtn
@@ -570,6 +572,7 @@ function GridComponent(props) {
 									isSelected={isSelected}
 									isHovered={hovered}
 									showHovers={showHovers}
+									showSelectHandle={showSelectHandle}
 									index={index}
 									alternatingInterval={alternatingInterval}
 									alternateRowBackgrounds={alternateRowBackgrounds}

package/src/Components/Grid/GridHeaderRow.js

@@ -20,6 +20,7 @@ import UiGlobals from '../../UiGlobals.js';
 import useBlocking from '../../Hooks/useBlocking.js';
 import testProps from '../../Functions/testProps.js';
 import AngleRight from '../Icons/AngleRight.js';
+import ArrowPointer from '../Icons/ArrowPointer.js';
 import HeaderReorderHandle from './HeaderReorderHandle.js';
 import HeaderResizeHandle from './HeaderResizeHandle.js';
 import HeaderColumnSelectorHandle from './HeaderColumnSelectorHandle.js';
@@ -46,6 +47,7 @@ export default function GridHeaderRow(props) {
 			isInlineEditorShown,
 			areRowsDragSource,
 			showColumnsSelector,
+			showSelectHandle,
 		} = props,
 		styles = UiGlobals.styles,
 		sortFn = Repository && Repository.getSortFn(),
@@ -462,6 +464,14 @@ export default function GridHeaderRow(props) {
 										/>}
 							</Pressable>;
 				});
+				if (showSelectHandle) {
+					headerColumns.unshift(<Box
+						key="RowSelectHandle"
+						className="Spacer-RowSelectHandle px-2 items-center justify-center flex-none w-[40px]"
+					>
+						<Icon as={ArrowPointer} className={`ArrowPointer w-[20px] h-[20px] text-[#aaa]`} />
+					</Box>);
+				}
 				if (areRowsDragSource) {
 					headerColumns.unshift(<Box
 						key="spacer"

package/src/Components/Grid/GridRow.js

@@ -16,6 +16,7 @@ import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
 import testProps from '../../Functions/testProps.js';
 import AngleRight from '../Icons/AngleRight.js';
 import RowDragHandle from './RowDragHandle.js';
+import RowSelectHandle from './RowSelectHandle.js';
 import _ from 'lodash';
 
 // This was broken out from Grid simply so we can memoize it
@@ -27,6 +28,7 @@ function GridRow(props) {
 			fields,
 			rowProps,
 			hideNavColumn,
+			showSelectHandle,
 			isSelected,
 			isHovered,
 			bg,
@@ -265,6 +267,8 @@ function GridRow(props) {
 
 		let rowContents = <>
 							{(isDragSource || isDraggable) && <RowDragHandle />}
+							{showSelectHandle && <RowSelectHandle />}
+							
 							{isPhantom && 
 								<Box
 									className={`

package/src/Components/Grid/RowDragHandle.js

@@ -5,11 +5,10 @@ import {
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 
-function RowDragHandle(props) {
-	return <VStack
-				style={styles.ewResize}
-				className="HeaderReorderHandle bg-grey-100 w-[3px] items-center justify-center"
-			>
+function RowDragHandle(props) {	return <VStack
+			style={styles.ewResize}
+			className="RowDragHandle bg-grey-100 w-[3px] items-center justify-center select-none"
+		>
 				<Icon
 					as={GripVertical}
 					size="xs"

package/src/Components/Grid/RowSelectHandle.js

@@ -0,0 +1,18 @@
+import {
+	Icon,
+	VStack,
+} from '@project-components/Gluestack';
+import ArrowPointer from '../Icons/ArrowPointer.js';
+
+function RowSelectHandle(props) {
+	return <VStack
+				className="RowSelectHandle w-[40px] px-2 items-center justify-center select-none cursor-grab"
+			>
+				<Icon
+					as={ArrowPointer}
+					size="xs"
+					className="w-[20px] h-[20px] text-[#ddd]" />
+			</VStack>;
+}
+
+export default RowSelectHandle;

package/src/Components/Icons/ArrowPointer.js

@@ -0,0 +1,11 @@
+import { createIcon } from "../Gluestack/icon";
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import Svg, { Path } from "react-native-svg"
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 320 512',
+	path: <Path d="M0 55.2V426c0 12.2 9.9 22 22 22 6.3 0 12.4-2.7 16.6-7.5l82.6-94.5 58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320h118.1c12.2 0 22.1-9.9 22.1-22.1 0-6.3-2.7-12.3-7.4-16.5L38.6 37.9c-4.3-3.8-9.7-5.9-15.4-5.9C10.4 32 0 42.4 0 55.2z" />,
+});
+
+export default SvgComponent

package/src/Components/Layout/AsyncOperation.js

@@ -23,6 +23,11 @@ import Panel from '../Panel/Panel.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import _ from 'lodash';
 
+const
+	INITIATE = 'INITIATE',
+	PROCESSING = 'PROCESSING',
+	RESULTS = 'RESULTS';
+
 // NOTE: This component assumes you have an AppSlice, that has 
 // an 'operationsInProgress' state var and a 'setOperationsInProgress' action.
 
@@ -37,6 +42,7 @@ function AsyncOperation(props) {
 			Repository,
 			formItems = [],
 			formStartingValues = {},
+			_form = {},
 			getProgressUpdates = false,
 			parseProgress, // optional fn, accepts 'response' as arg and returns progress string
 			progressStuckThreshold = null, // e.g. 3, if left blank, doesn't check for stuck state
@@ -49,10 +55,25 @@ function AsyncOperation(props) {
 			alert,
 		} = props,
 		dispatch = useDispatch(),
+		isValid = useRef(true),
+		setIsValid = (valid) => {
+			isValid.current = valid;
+		},
+		getIsValid = () => {
+			return isValid.current;
+		},
+		mode = useRef(INITIATE),
+		setMode = (newMode) => {
+			mode.current = newMode;
+		},
+		getMode = () => {
+			return mode.current;
+		},
 		initiate = async () => {
 
 			clearProgress();
-			setFooter(getFooter('processing'));
+			setMode(PROCESSING);
+			setFooter(getFooter());
 			setIsInProgress(true);
 			
 			const
@@ -85,17 +106,18 @@ function AsyncOperation(props) {
 			}
 			showResults(results);
 		},
-		getFooter = (which = 'initiate') => {
+		getFooter = (which = getMode()) => {
 			switch(which) {
-				case 'initiate':
+				case INITIATE:
 					return <Toolbar>
 								<Button
 									text="Start"
 									rightIcon={ChevronRight}
 									onPress={() => initiate()}
+									isDisabled={!getIsValid()}
 								/>
 							</Toolbar>;
-				case 'processing':
+				case PROCESSING:
 					return <Toolbar>
 								<Button
 									text="Please wait"
@@ -103,7 +125,7 @@ function AsyncOperation(props) {
 									variant="link"
 								/>
 							</Toolbar>;
-				case 'results':
+				case RESULTS:
 					return <Toolbar>
 								<Button
 									text="Reset"
@@ -152,7 +174,8 @@ function AsyncOperation(props) {
 		},
 		showResults = (results) => {
 			setCurrentTab(1);
-			setFooter(getFooter('results'));
+			setMode(RESULTS);
+			setFooter(getFooter());
 			setResults(results);
 			getProgress();
 		},
@@ -206,6 +229,7 @@ function AsyncOperation(props) {
 		},
 		resetToInitialState = () => {
 			setCurrentTab(0);
+			setMode(INITIATE);
 			setFooter(getFooter());
 			clearProgress();
 		},
@@ -227,6 +251,10 @@ function AsyncOperation(props) {
 				},
 			});
 		},
+		onValidityChange = (isValid) => {
+			setIsValid(isValid);
+			setFooter(getFooter());
+		},
 		unchangedProgressCount = getUnchangedProgressCount();
 
 	useEffect(() => {
@@ -255,6 +283,8 @@ function AsyncOperation(props) {
 										disableFooter={true}
 										items={formItems}
 										startingValues={formStartingValues}
+										onValidityChange={onValidityChange}
+										{..._form}
 									/>,
 						},
 						{

package/src/Components/Report/Report.js

@@ -3,6 +3,7 @@ import {
 	Box,
 	HStack,
 	Icon,
+	Pressable,
 	Text,
 	VStack,
 	VStackNative,
@@ -17,6 +18,7 @@ import {
 	REPORT_TYPES__PDF,
 } from '../../Constants/ReportTypes.js';
 import Form from '../Form/Form.js';
+import IconButton from '../Buttons/IconButton.js';
 import withComponent from '../Hoc/withComponent.js';
 import withAlert from '../Hoc/withAlert.js';
 import testProps from '../../Functions/testProps.js';
@@ -37,9 +39,19 @@ function Report(props) {
 			disablePdf = false,
 			disableExcel = false,
 			showReportHeaders = true,
+			isQuickReport = false,
+			quickReportData = {},
 			alert,
 		} = props,
 		buttons = [],
+		onPressQuickReport = () => {
+			downloadReport({
+				reportId,
+				reportType: REPORT_TYPES__EXCEL,
+				showReportHeaders,
+				data: quickReportData,
+			});
+		},
 		downloadReport = (args) => {
 			getReport(args);
 			alert('Download started');
@@ -59,6 +71,48 @@ function Report(props) {
 		icon = <Icon as={icon} {...propsIcon} />;
 	}
 
+	if (isQuickReport) {
+		let className = `
+			Report
+			max-w-[100px]
+			m-2
+		`;
+		if (props.className) {
+			className += ' ' + props.className;
+		}
+		return <VStackNative
+					{...testProps('QuickReport-' + reportId)}
+					className={className}
+				>
+					<Pressable
+						onPress={onPressQuickReport}
+						className={`
+							flex-1
+							items-center
+							justify-center
+							flex-col
+							bg-white
+							p-3
+							rounded-lg
+							border
+							border-primary-300
+							hover:bg-primary-300
+						`}
+					>
+						{icon}
+						<Text
+							className={`
+								text-black
+								text-center
+								text-[17px]
+								leading-tight
+								mt-2
+							`}
+						>{title}</Text>
+					</Pressable>
+				</VStackNative>;
+	}
+
 	if (!disableExcel) {
 		buttons.push({
 			...testProps('excelBtn'),

package/src/Components/index.js

@@ -9,6 +9,7 @@ import AngleRight from './Icons/AngleRight.js';
 import AnglesLeft from './Icons/AnglesLeft.js';
 import AnglesRight from './Icons/AnglesRight.js';
 import Asterisk from './Icons/Asterisk.js';
+import ArrowPointer from './Icons/ArrowPointer.js';
 import ArrowUp from './Icons/ArrowUp.js';
 import Ban from './Icons/Ban.js';
 import Bars from './Icons/Bars.js';
@@ -204,6 +205,7 @@ import Color from './Form/Field/Color.js';
 import Combo from './Form/Field/Combo/Combo.js';
 // import { ComboEditor } from './Form/Field/Combo/Combo.js';
 import Container from './Container/Container.js';
+import ContainerColumn from './Container/ContainerColumn.js';
 import DataMgt from './Screens/DataMgt.js';
 import Date from './Form/Field/Date.js';
 import DateRange from './Filter/DateRange.js';
@@ -254,6 +256,7 @@ const components = {
 	AnglesLeft,
 	AnglesRight,
 	Asterisk,
+	ArrowPointer,
 	ArrowUp,
 	Ban,
 	Bars,
@@ -449,6 +452,7 @@ const components = {
 	Combo,
 	// ComboEditor,
 	Container,
+	ContainerColumn,
 	DataMgt,
 	Date,
 	DateRange,