@onehat/ui 0.4.58 → 0.4.60

package/package.json

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

package/src/Components/Form/Form.js

@@ -44,6 +44,12 @@ import AngleLeft from '../Icons/AngleLeft.js';
 import Eye from '../Icons/Eye.js';
 import Rotate from '../Icons/Rotate.js';
 import Pencil from '../Icons/Pencil.js';
+import Plus from '../Icons/Plus.js';
+import FloppyDiskRegular from '../Icons/FloppyDiskRegular.js';
+import Trash from '../Icons/Trash.js';
+import Xmark from '../Icons/Xmark.js';
+import Check from '../Icons/Check.js';
+
 import Footer from '../Layout/Footer.js';
 import Label from '../Form/Label.js';
 import _ from 'lodash';
@@ -1216,6 +1222,7 @@ function Form(props) {
 							{...testProps('deleteBtn')}
 							key="deleteBtn"
 							onPress={onDelete}
+							icon={Trash}
 							className={`
 								bg-warning-500
 								hover:bg-warning-700
@@ -1239,6 +1246,7 @@ function Form(props) {
 						{...testProps('cancelBtn')}
 						key="cancelBtn"
 						variant={editorType === EDITOR_TYPE__INLINE ? 'solid' : 'outline'}
+						icon={Xmark}
 						onPress={onCancel}
 						className="text-white"
 						text="Cancel"
@@ -1249,6 +1257,7 @@ function Form(props) {
 						{...testProps('closeBtn')}
 						key="closeBtn"
 						variant={editorType === EDITOR_TYPE__INLINE ? 'solid' : 'outline'}
+						icon={Xmark}
 						onPress={onClose}
 						className="text-white"
 						text="Close"
@@ -1259,6 +1268,7 @@ function Form(props) {
 						{...testProps('saveBtn')}
 						key="saveBtn"
 						onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
+						icon={getEditorMode() === EDITOR_MODE__ADD ? Plus : FloppyDiskRegular}
 						isDisabled={isSaveDisabled}
 						className="text-white"
 						text={getEditorMode() === EDITOR_MODE__ADD ? 'Add' : 'Save'}
@@ -1268,6 +1278,7 @@ function Form(props) {
 					<Button
 						{...testProps('submitBtn')}
 						key="submitBtn"
+						icon={Check}
 						onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
 						isDisabled={isSubmitDisabled}
 						className="text-white"
@@ -1283,6 +1294,7 @@ function Form(props) {
 								{...testProps('additionalFooterBtn-' + props.key)}
 								{...props}
 								onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
+								icon={props.icon || null}
 								text={props.text}
 								isDisabled={isDisabled}
 							/>;

package/src/Components/Grid/Grid.js

@@ -424,9 +424,9 @@ 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))) {
 											canDoEdit = true;
-										}
+										} else
 										if (onView && canUser && canUser(VIEW)) {
 											canDoView = true;
 										}

package/src/Components/Hoc/withEditor.js

@@ -502,7 +502,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsSaving(true);
 				let success = true;
 				const tempListener = (msg, data) => {
-					success = { msg, data };
+					success = false;
 				};
 
 				Repository.on('error', tempListener); // add a temporary listener for the error event

package/src/Components/Layout/AsyncOperation.js

@@ -1,9 +1,13 @@
-import { useState, } from 'react';
+import { useState, useRef, useEffect, } from 'react';
 import {
 	Box,
+	ScrollView,
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
+import { useSelector, useDispatch, } from 'react-redux';
+import { PROGRESS_COMPLETED } from '../../Constants/Progress.js';
+import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import isJson from '../../Functions/isJson.js';
 import Form from '../Form/Form.js';
 import Button from '../Buttons/Button.js';
@@ -12,19 +16,31 @@ import withAlert from '../Hoc/withAlert.js';
 import ChevronLeft from '../Icons/ChevronLeft.js';
 import ChevronRight from '../Icons/ChevronRight.js';
 import Play from '../Icons/Play.js';
+import EllipsisHorizontal from '../Icons/EllipsisHorizontal.js';
 import Stop from '../Icons/Stop.js';
 import TabBar from '../Tab/TabBar.js';
 import Panel from '../Panel/Panel.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import _ from 'lodash';
 
+// NOTE: This component assumes you have an AppSlice, that has 
+// an 'operationsInProgress' state var and a 'setOperationsInProgress' action.
 
 function AsyncOperation(props) {
+
+	if (!props.Repository || !props.action) {
+		throw Error('AsyncOperation: Repository and action are required!');
+	}
+
 	const {
 			action,
 			Repository,
 			formItems = [],
 			formStartingValues = {},
+			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
+			updateInterval = 10000, // ms
 
 			// withComponent
 			self,
@@ -32,25 +48,24 @@ function AsyncOperation(props) {
 			// withAlert
 			alert,
 		} = props,
+		dispatch = useDispatch(),
 		initiate = async () => {
 
-			if (!Repository || !action) {
-				alert('AsyncOperation: Repository and action are required!');
-				return;
-			}
-
+			clearProgress();
 			setFooter(getFooter('processing'));
+			setIsInProgress(true);
 			
 			const
 				method = Repository.methods.edit,
 				uri = Repository.getModel() + '/' + action,
-				formValues = self.children.form.formGetValues(),
+				formValues = self?.children?.form?.formGetValues() || {},
 				result = await Repository._send(method, uri, formValues);
-				
+
+			setFormValues(formValues);
+			
 			const response = Repository._processServerResponse(result);
 			if (!response.success) {
-				alert(result.message);
-				reset();
+				resetToInitialState();
 				return;
 			}
 			
@@ -75,7 +90,7 @@ function AsyncOperation(props) {
 				case 'initiate':
 					return <Toolbar>
 								<Button
-									text="Initiate"
+									text="Start"
 									rightIcon={ChevronRight}
 									onPress={() => initiate()}
 								/>
@@ -93,29 +108,144 @@ function AsyncOperation(props) {
 								<Button
 									text="Reset"
 									icon={ChevronLeft}
-									onPress={() => reset()}
+									onPress={() => resetToInitialState()}
 								/>
 							</Toolbar>;
 			}
 		},
+		operationsInProgress = useSelector((state) => state.app.operationsInProgress),
+		isInProgress = operationsInProgress.includes(action),
+		forceUpdate = useForceUpdate(),
 		[footer, setFooter] = useState(getFooter()),
-		[results, setResults] = useState(''),
-		[currentTabIx, setCurrentTab] = useState(0),
+		[results, setResults] = useState(isInProgress ? 'Checking progress...' : null),
+		[progress, setProgress] = useState(null),
+		[isStuck, setIsStuck] = useState(false),
+		[currentTabIx, setCurrentTab] = useState(isInProgress ? 1 : 0),
+		previousProgressRef = useRef(null),
+		unchangedProgressCountRef = useRef(0),
+		intervalRef = useRef(null),
+		formValuesRef = useRef(null),
+		getPreviousProgress = () => {
+			return previousProgressRef.current;
+		},
+		setPreviousProgress = (progress) => {
+			previousProgressRef.current = progress;
+		},
+		getUnchangedProgressCount = () => {
+			return unchangedProgressCountRef.current;
+		},
+		setUnchangedProgressCount = (count) => {
+			unchangedProgressCountRef.current = count;
+			forceUpdate();
+		},
+		getInterval = () => {
+			return intervalRef.current;
+		},
+		setIntervalRef = (interval) => { // 'setInterval' is a reserved name
+			intervalRef.current = interval;
+		},
+		getFormValues = () => {
+			return formValuesRef.current;
+		},
+		setFormValues = (values) => {
+			formValuesRef.current = values;
+		},
 		showResults = (results) => {
 			setCurrentTab(1);
 			setFooter(getFooter('results'));
 			setResults(results);
+			getProgress();
 		},
-		reset = () => {
+		getProgress = (immediately = false) => {
+			if (getProgressUpdates) {
+
+				async function fetchProgress() {
+					const
+						method = Repository.methods.edit,
+						progressAction = 'get' + action.charAt(0).toUpperCase() + action.slice(1) + 'Progress',
+						uri = Repository.getModel() + '/' + progressAction,
+						result = await Repository._send(method, uri, getFormValues());
+						
+					const response = Repository._processServerResponse(result);
+					if (!response.success) {
+						alert(result.message);
+						clearProgress();
+						return;
+					}
+
+					const progress = parseProgress ? parseProgress(response) : response.message
+					if (progress === PROGRESS_COMPLETED) {
+						clearProgress();
+						setProgress(progress);
+					} else {
+						// in process
+						let newUnchangedProgressCount = getUnchangedProgressCount();
+						if (progress === getPreviousProgress()) {
+							newUnchangedProgressCount++;
+							setUnchangedProgressCount(newUnchangedProgressCount);
+							if (progressStuckThreshold !== null && newUnchangedProgressCount >= progressStuckThreshold) {
+								clearProgress();
+								setProgress('The operation appears to be stuck.');
+								setIsStuck(true);
+							}
+						} else {
+							setPreviousProgress(progress);
+							setProgress(progress);
+							setUnchangedProgressCount(0);
+						}
+					}
+				};
+				
+				if (immediately) {
+					fetchProgress();
+				}
+		
+				const interval = setInterval(fetchProgress, updateInterval);
+				setIntervalRef(interval);
+			}
+		},
+		resetToInitialState = () => {
 			setCurrentTab(0);
 			setFooter(getFooter());
+			clearProgress();
+		},
+		clearProgress = () => {
+			setIsInProgress(false);
+			setIsStuck(false);
+			setProgress(null);
+			setPreviousProgress(null);
+			setUnchangedProgressCount(0);
+			clearInterval(getInterval());
+			setIntervalRef(null);
+		},
+		setIsInProgress = (isInProgress) => {
+			dispatch({
+				type: 'app/setOperationsInProgress',
+				payload: {
+					operation: action,
+					isInProgress,
+				},
+			});
+		},
+		unchangedProgressCount = getUnchangedProgressCount();
+
+	useEffect(() => {
+		
+		if (isInProgress) {
+			getProgress(true); // true to fetch immediately
+		}
+
+		return () => {
+			// clear the interval when the component unmounts
+			clearInterval(getInterval());
 		};
+	}, []);
 
 	return <Panel {...props} footer={footer}>
 				<TabBar
 					tabs={[
 						{
-							title: 'Initiate',
+							title: 'Start',
 							icon: Play,
 							isDisabled: currentTabIx !== 0,
 							content: <Form
@@ -129,9 +259,15 @@ function AsyncOperation(props) {
 						},
 						{
 							title: 'Results',
-							icon: Stop,
+							icon: isInProgress ? EllipsisHorizontal : Stop,
 							isDisabled: currentTabIx !== 1,
-							content: <Box className="p-2">{results}</Box>,
+							content: <ScrollView className="ScrollView h-full w-full">
+										<Box className={`p-4 ${isStuck ? 'text-red-400 font-bold' : ''}`}>
+											{progress ? 
+											progress + (unchangedProgressCount > 0 ? ' (unchanged x' + unchangedProgressCount + ')' : '') : 
+											results}
+										</Box>
+									</ScrollView>,
 						},
 					]}
 					currentTabIx={currentTabIx}

package/src/Constants/Progress.js

@@ -0,0 +1 @@
+export const PROGRESS_COMPLETED = 'Completed';