@onehat/ui 0.3.288 → 0.3.291

package/package.json

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

package/src/Components/Buttons/ReloadButton.js

@@ -5,11 +5,12 @@ import testProps from '../../Functions/testProps.js';
 import IconButton from './IconButton.js';
 import Rotate from '../Icons/Rotate.js';
 
-export default function ReloadButton(props, isTree = false) {
+export default function ReloadButton(props) {
 	const {
 			iconProps ={},
 			self,
 			Repository,
+			isTree = false,
 		} = props,
 		onPress = () => {
 			if (isTree) {

package/src/Components/Form/Form.js

@@ -134,8 +134,8 @@ function Form(props) {
 	}
 	const
 		isMultiple = _.isArray(record),
-		isSingle = !isMultiple, // for convenience
-		isPhantom = !skipAll && !!record?.isPhantom, //
+		isSingle = _.isNil(record) || !_.isArray(record),
+		isPhantom = !skipAll && !!record?.isPhantom,
 		forceUpdate = useForceUpdate(),
 		[previousRecord, setPreviousRecord] = useState(record),
 		[containerWidth, setContainerWidth] = useState(),
@@ -949,6 +949,21 @@ function Form(props) {
 				const formIsDirty = formState.isDirty;
 				// console.log('formIsDirty', formIsDirty);
 				// console.log('isPhantom', isPhantom);
+
+
+
+				
+				// LEFT OFF HERE
+				// The code I wrote below was supposed to be for the Tree search but messed up the standard
+				// windowed editors. Need to figure out how to make it work for both.
+				// Also, when crudding two records on the same tree in succession, the second record throws an error.
+
+
+
+
+				if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
+					showCancelBtn = true;
+				}
 				if (formIsDirty || isPhantom) {
 					if (isSingle && onCancel) {
 						showCancelBtn = true;

package/src/Components/Tree/Tree.js

@@ -70,6 +70,9 @@ function TreeComponent(props) {
 				}
 				return item[displayIx];
 			},
+			getDisplayTextFromSearchResults = (item) => {
+				return item.id
+			},
 			getNodeIcon = (which, item) => { // decides what icon to show for this node
 				// TODO: Allow for dynamic props on the icon (e.g. special color for some icons)
 				let icon;
@@ -101,6 +104,8 @@ function TreeComponent(props) {
 			additionalToolbarButtons = [],
 			reload = null, // Whenever this value changes after initial render, the tree will reload from scratch
 			parentIdIx,
+			initialSelection,
+			onTreeLoad,
 
 			// withComponent
 			self,
@@ -383,7 +388,7 @@ function TreeComponent(props) {
 			// Show modal so user can select which node to go to
 			const searchFormData = [];
 			_.each(found, (item) => {
-				searchFormData.push([item.id, getNodeText(item)]);
+				searchFormData.push([item.id, getDisplayTextFromSearchResults(item)]);
 			});
 			setSearchFormData(searchFormData);
 			setSearchResults(found);
@@ -463,6 +468,11 @@ function TreeComponent(props) {
 			setTreeNodeData(treeNodeData);
 
 			buildRowToDatumMap();
+
+			if (onTreeLoad) {
+				onTreeLoad();
+			}
+			return treeNodeData;
 		},
 		buildRowToDatumMap = () => {
 			const rowToDatumMap = {};
@@ -629,6 +639,7 @@ function TreeComponent(props) {
 			buildRowToDatumMap();
 		},
 		loadChildren = async (datum, depth = 1) => {
+
 			// Show loading indicator (spinner underneath current node?)
 			datum.isLoading = true;
 			forceUpdate();
@@ -665,8 +676,8 @@ function TreeComponent(props) {
 				}
 			});
 		},
-		expandPath = async (cPath) => {
-			// First, close thw whole tree.
+		expandPath = async (cPath, highlight = true) => {
+			// First, close the whole tree.
 			let newTreeNodeData = _.clone(getTreeNodeData());
 			collapseNodes(newTreeNodeData);
 
@@ -689,9 +700,16 @@ function TreeComponent(props) {
 				});
 
 				if (!currentDatum) {
-					// datum is not currently loaded, so load it
-					await loadChildren(parentDatum, 1);
-					currentLevelData = parentDatum.children;
+					if (!parentDatum) {
+						currentDatum = currentLevelData[0]; // this is essentially the root node (currentLevelData can contain more than one node, so just set it to the first)
+						// currentLevelData = currentDatum;
+					} else {
+						if (!parentDatum.isLoaded) {
+							await loadChildren(parentDatum, 1);
+						}
+						currentLevelData = parentDatum.children;
+					}
+
 					currentDatum = _.find(currentLevelData, (treeNodeDatum) => {
 						return treeNodeDatum.item.id === id; 
 					});
@@ -699,8 +717,9 @@ function TreeComponent(props) {
 				
 				currentNode = currentDatum.item;
 				
-				// THE MAGIC!
-				currentDatum.isExpanded = true;
+				if (!currentDatum.isExpanded) {
+					await loadChildren(currentDatum, 1);
+				}
 				
 				cPath = cPathParts.slice(1).join('/'); // put the rest of it back together
 				currentLevelData = currentDatum.children;
@@ -709,7 +728,9 @@ function TreeComponent(props) {
 
 			setSelection([currentNode]);
 			scrollToNode(currentNode);
-			setHighlitedDatum(currentDatum);
+			if (highlight) {
+				setHighlitedDatum(currentDatum);
+			}
 
 			setTreeNodeData(newTreeNodeData);
 			buildRowToDatumMap();
@@ -1112,19 +1133,11 @@ function TreeComponent(props) {
 			return () => {};
 		}
 
-		if (!_.isEmpty(extraParams)) {
-			Repository.setBaseParams(extraParams);
-		}
-
-		if (autoLoadRootNodes) {
-			Repository.loadRootNodes(1);
-		}
-
-		async function rebuildTree() {
-			setIsReady(false);
-			await buildAndSetTreeNodeData();
+		(async () => {
+			await reloadTree();
 			setIsReady(true);
-		}
+		})();
+
 		
 		// set up @onehat/data repository
 		const
@@ -1134,8 +1147,8 @@ function TreeComponent(props) {
 		Repository.on('beforeLoad', setTrue);
 		Repository.on('load', setFalse);
 		Repository.on('loadRootNodes', setFalse);
-		Repository.on('loadRootNodes', rebuildTree);
-		Repository.on('add', rebuildTree);
+		Repository.on('loadRootNodes', buildAndSetTreeNodeData);
+		Repository.on('add', buildAndSetTreeNodeData);
 		Repository.on('changeFilters', reloadTree);
 		Repository.on('changeSorters', reloadTree);
 
@@ -1143,8 +1156,8 @@ function TreeComponent(props) {
 			Repository.off('beforeLoad', setTrue);
 			Repository.off('load', setFalse);
 			Repository.off('loadRootNodes', setFalse);
-			Repository.off('loadRootNodes', rebuildTree);
-			Repository.off('add', rebuildTree);
+			Repository.off('loadRootNodes', buildAndSetTreeNodeData);
+			Repository.off('add', buildAndSetTreeNodeData);
 			Repository.off('changeFilters', reloadTree);
 			Repository.off('changeSorters', reloadTree);
 		};
@@ -1174,6 +1187,13 @@ function TreeComponent(props) {
 			onAfterDelete,
 		});
 	}
+
+	// update self with methods
+	if (self) {
+		self.reloadTree = reloadTree;
+		self.expandPath = expandPath;
+		self.scrollToNode = scrollToNode;
+	}
 	
 	const
 		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), [Repository?.hash, treeSearchValue, isDragMode, getTreeNodeData()]),
@@ -1252,38 +1272,42 @@ function TreeComponent(props) {
 				>
 					<Column bg="#fff" w={300}>
 						<FormPanel
-							title="Choose Tree Node"
+							_panel={{ 
+								title: 'Choose Tree Node',
+							}}
 							instructions="Multiple tree nodes matched your search. Please select which one to show."
-							flex={1}
-							items={[
-								{
-									type: 'Column',
-									flex: 1,
-									items: [
-										{
-											key: 'node_id',
-											name: 'node_id',
-											type: 'Combo',
-											label: 'Tree Node',
-											data: searchFormData,
-										}
-									],
+							_form={{ 
+								flex: 1,
+								items: [
+									{
+										type: 'Column',
+										flex: 1,
+										items: [
+											{
+												key: 'node_id',
+												name: 'node_id',
+												type: 'Combo',
+												label: 'Tree Node',
+												data: searchFormData,
+											}
+										],
+									},
+								],
+								onCancel: (e) => {
+									setHighlitedDatum(null);
+									setIsModalShown(false);
+								},
+								onSave: (data, e) => {
+									const
+										treeNode = _.find(searchResults, (item) => {
+											return item.id === data.node_id;
+										}),
+										cPath = treeNode.cPath;
+									expandPath(cPath);
+	
+									// Close the modal
+									setIsModalShown(false);
 								},
-							]}
-							onCancel={(e) => {
-								setHighlitedDatum(null);
-								setIsModalShown(false);
-							}}
-							onSave={(data, e) => {
-								const
-									treeNode = _.find(searchResults, (item) => {
-										return item.id === data.node_id;
-									}),
-									cPath = treeNode.cPath;
-								expandPath(cPath);
-
-								// Close the modal
-								setIsModalShown(false);
 							}}
 						/>
 					</Column>

package/src/Functions/Cypress/crud_functions.js

@@ -734,7 +734,7 @@ export function runClosureTreeManagerScreenCrudTests(model, schema, newData, edi
 
 			const
 				managerSelector = '/' + Models + 'Manager',
-				treeSelector = '/' + Models + 'FilteredTreeEditor';
+				treeSelector = '/' + Models + 'TreeEditor';
 
 			toFullMode(managerSelector);
 			cy.wait(500); // wait for grid to load
@@ -747,7 +747,7 @@ export function runClosureTreeManagerScreenCrudTests(model, schema, newData, edi
 
 			const
 				managerSelector = '/' + Models + 'Manager',
-				treeSelector = '/' + Models + 'FilteredSideTreeEditor';
+				treeSelector = '/' + Models + 'SideTreeEditor';
 
 			toSideMode(managerSelector);
 			cy.wait(1000); // wait for grid to load
@@ -847,7 +847,7 @@ export function runManagerScreenCrudTests(model, schema, newData, editData, anci
 
 		});
 
-		it.skip('CRUD in side mode', function() {
+		it('CRUD in side mode', function() {
 
 			const
 				managerSelector = '/' + Models + 'Manager',

package/src/Functions/getSaved.js

@@ -17,10 +17,11 @@ export default async function getSaved(key) {
 
 	if (entity.isJson) {
 		value = JSON.parse(value);
+		const model = entity.model;
 		if (entity.isOneBuild) {
 			// Convert the data to an actual entity (or entities) of the correct type
 			const
-				Repository = oneHatData.getRepository(entity.model),
+				Repository = oneHatData.getRepository(model),
 				entities = [];
 			let i, data, entity;
 			if (_.isArray(value)) {