@onehat/ui 0.2.70 → 0.2.71

package/package.json

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

package/src/Components/Grid/Grid.js

@@ -851,6 +851,27 @@ export function Grid(props) {
 
 }
 
+export const Grid = withAlert(
+									withEvents(
+										withData(
+											withMultiSelection(
+												withSelection(
+													// withSideEditor(
+														withFilters(
+															withPresetButtons(
+																withContextMenu(
+																	Grid
+																),
+																true // isGrid
+															)
+														)
+													// )
+												)
+											)
+										)
+									)
+								);
+
 export const SideGridEditor = withAlert(
 									withEvents(
 										withData(
@@ -861,7 +882,8 @@ export const SideGridEditor = withAlert(
 															withPresetButtons(
 																withContextMenu(
 																	Grid
-																)
+																),
+																true // isGrid
 															)
 														)
 													)
@@ -913,4 +935,4 @@ export const InlineGridEditor = withAlert(
 									)
 								);
 
-export default WindowedGridEditor;
+export default Grid;

package/src/Components/Hoc/withEditor.js

@@ -11,7 +11,7 @@ export default function withEditor(WrappedComponent) {
 
 		let [editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
 		const {
-				useEditor = false,
+				useEditor = true,
 				userCanEdit = true,
 				userCanView = true,
 				disableAdd = false,
@@ -213,6 +213,7 @@ export default function withEditor(WrappedComponent) {
 					onEditorCancel={onEditorCancel}
 					onEditorDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onEditorDelete}
 					onEditorClose={onEditorClose}
+					isEditor={true}
 					useEditor={useEditor}
 					userCanEdit={userCanEdit}
 					userCanView={userCanView}

package/src/Components/Hoc/withPresetButtons.js

@@ -33,10 +33,11 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 			} = props,
 			{
 				// for local use
+				isEditor = false,
 				useEditor = true,
-				disableAdd = false,
-				disableEdit = false,
-				disableDelete = false,
+				disableAdd = !isEditor,
+				disableEdit = !isEditor,
+				disableDelete = !isEditor,
 				disableView = !isGrid,
 				disableCopy = !isGrid,
 				disableDuplicate = !isGrid,

package/src/Components/Hoc/withSideEditor.js

@@ -14,6 +14,10 @@ export default function withSideEditor(WrappedComponent) {
 				sideFlex = 100,
 			} = props;
 
+		if (!Editor) {
+			throw Error('Editor is not defined');
+		}
+
 		return <Container
 					center={<WrappedComponent {...props} />}
 					east={<Editor

package/src/Components/Hoc/withWindowedEditor.js

@@ -35,6 +35,10 @@ export default function withWindowedEditor(WrappedComponent) {
 				editorProps = {},
 			} = props;
 
+		if (!Editor) {
+			throw Error('Editor is not defined');
+		}
+
 		return <>
 					<WrappedComponent {...props} />
 					{useEditor && isEditorShown && 

package/src/Components/Panel/InlineGridEditorPanel.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel.js';
+import { InlineGridEditor, } from '../Grid/Grid.js';
+import _ from 'lodash';
+
+export function GridPanel(props) {
+	const {
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<InlineGridEditor {...props} />
+			</Panel>;
+}
+
+export default GridPanel;

package/src/Components/Panel/SideGridEditorPanel.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel.js';
+import { SideGridEditor, } from '../Grid/Grid.js';
+import _ from 'lodash';
+
+export function GridPanel(props) {
+	const {
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<SideGridEditor {...props} />
+			</Panel>;
+}
+
+export default GridPanel;

package/src/Components/Panel/SideTreeEditorPanel.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel.js';
+import { SideTreeEditor, } from '../Tree/Tree.js';
+import _ from 'lodash';
+
+export function TreePanel(props) {
+	const {
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<SideTreeEditor {...props} />
+			</Panel>;
+}
+
+export default TreePanel;

package/src/Components/Panel/WindowedGridEditorPanel.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel.js';
+import { WindowedGridEditor, } from '../Grid/Grid.js';
+import _ from 'lodash';
+
+export function GridPanel(props) {
+	const {
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<WindowedGridEditor {...props} />
+			</Panel>;
+}
+
+export default GridPanel;

package/src/Components/Panel/WindowedTreeEditorPanel.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel.js';
+import { WindowedTreeEditor, } from '../Tree/Tree.js';
+import _ from 'lodash';
+
+export function TreePanel(props) {
+	const {
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<WindowedTreeEditor {...props} />
+			</Panel>;
+}
+
+export default TreePanel;

package/src/Components/Tree/Tree.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo, } from 'react';
+import { useState, useEffect, useRef, useMemo, } from 'react';
 import {
 	Column,
 	FlatList,
@@ -19,7 +19,6 @@ import {
 	DROP_POSITION_BEFORE,
 	DROP_POSITION_AFTER,
 } from '../../Constants/Tree.js';
-import sleep from '@onehat/ui/src/Functions/sleep.js';
 import * as colourMixer from '@k-renwick/colour-mixer'
 import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
@@ -69,7 +68,10 @@ export function Tree(props) {
 			areRootsVisible = true,
 			extraParams = {}, // Additional params to send with each request ( e.g. { order: 'Categories.name ASC' })
 			getNodeText = (item) => { // extracts model/data and decides what the row text should be
-				return item.displayValue;
+				if (Repository) {
+					return item.displayValue;
+				}
+				return item[displayIx];
 			},
 			getNodeIcon = (item, isExpanded) => { // decides what icon to show for this node
 				// TODO: Allow for dynamic props on the icon (e.g. special color for some icons)
@@ -98,6 +100,8 @@ export function Tree(props) {
 			bottomToolbar = null,
 			topToolbar = null,
 			additionalToolbarButtons = [],
+			reload = null, // Whenever this value changes after initial render, the tree will reload from scratch
+			parentIdIx,
 
 			// withEditor
 			onAdd,
@@ -141,6 +145,7 @@ export function Tree(props) {
 		[isReorderMode, setIsReorderMode] = useState(false),
 		[isSearchModalShown, setIsSearchModalShown] = useState(false),
 		[treeNodeData, setTreeNodeData] = useState({}),
+		[searchResults, setSearchResults] = useState([]),
 		[searchFormData, setSearchFormData] = useState([]),
 		[dragNodeSlot, setDragNodeSlot] = useState(null),
 		[dragNodeIx, setDragNodeIx] = useState(),
@@ -477,6 +482,69 @@ export function Tree(props) {
 
 			return !_.isEmpty(intersection);
 		},
+		buildAndSetTreeNodeData = async () => {
+			let rootNodes;
+			if (Repository) {
+				if (!Repository.areRootNodesLoaded) {
+					rootNodes = await Repository.getRootNodes(1);
+				}
+			} else {
+				rootNodes = assembleDataTreeNodes();
+			}
+
+			const treeNodeData = buildTreeNodeData(rootNodes);
+			setTreeNodeData(treeNodeData);
+		},
+		assembleDataTreeNodes = () => {
+			// Populates the TreeNodes with .parent and .children references
+			// NOTE: This is only for 'data', not for Repositories!
+			// 'data' is essentially an Adjacency List, not a ClosureTable.
+
+			const clonedData = _.clone(data);
+
+			// Reset all parent/child relationships
+			_.each(clonedData, (treeNode) => {
+				treeNode.isRoot = !treeNode[parentIdIx];
+				treeNode.parent = null;
+				treeNode.children = [];
+			});
+
+			// Rebuild all parent/child relationships
+			_.each(clonedData, (treeNode) => {
+				const parent = _.find(clonedData, (tn) => {
+					return tn[idIx] === treeNode[parentIdIx];
+				});
+				if (parent) {
+					treeNode.parent = parent;
+					parent.children.push(treeNode);
+				}
+			});
+
+			// populate calculated fields
+			const treeNodes = [];
+			_.each(clonedData, (treeNode) => {
+				treeNode.hasChildren = !_.isEmpty(treeNode.children);
+
+				let parent = treeNode.parent,
+					i = 0;
+				while(parent) {
+					i++;
+					parent = parent.parent;
+				}
+				treeNode.depth = i;
+				treeNode.hash = treeNode[idIx];
+
+				if (treeNode.isRoot) {
+					treeNodes.push(treeNode);
+				}
+			});
+
+			return treeNodes;
+		},
+		reloadTree = () => {
+			Repository.areRootNodesLoaded = false;
+			return buildAndSetTreeNodeData();
+		};
 
 		// Button handlers
 		onToggle = (datum) => {
@@ -539,7 +607,6 @@ export function Tree(props) {
 			});
 		},
 		onSearchTree = async (value) => {
-
 			let found = [];
 			if (Repository?.isRemote) {
 				// Search tree on server
@@ -550,16 +617,17 @@ export function Tree(props) {
 			}
 
 			const isMultipleHits = found.length > 1;
-			let path = '';
-			let searchFormData = [];
-			
 			if (!isMultipleHits) {
-				path = found[0].path;
-				expandPath(path);
+				expandPath(found[0].path);
 				return;
 			}
 
+			const searchFormData = [];
+			_.each(found, (item) => {
+				searchFormData.push([item.id, getNodeText(item)]);
+			});
 			setSearchFormData(searchFormData);
+			setSearchResults(found);
 			setIsSearchModalShown(true);
 		},
 		findTreeNodesByText = (text) => {
@@ -588,33 +656,6 @@ export function Tree(props) {
 			}
 			return data[node_id]; // TODO: This is probably not right!
 		},
-		getPathByTreeNode = (treeNode) => {
-
-			///////// THIS DOESN'T WORK YET /////////
-
-			function searchChildren(children, currentPath = []) {
-				let found = [];
-				_.each(children, (child) => {
-					const
-						item = child.item,
-						id = idField ? item[idField] : item.id;
-					if (child.text.match(regex)) {
-						found.push(child);
-						return false;
-					}
-					if (child.children) {
-						const childrenFound = searchChildren(child.children, [...currentPath, id]);
-						if (!_.isEmpty(childrenFound)) {
-							return false;
-						}
-					}
-				});
-				return found;
-			}
-			const nodes = searchChildren(treeNodeData);
-			return nodes.join('/');
-
-		},
 		expandPath = async (path) => {
 			// Helper for onSearchTree
 
@@ -628,6 +669,7 @@ export function Tree(props) {
 				id,
 				currentLevelData = newTreeNodeData,
 				currentDatum,
+				parentDatum,
 				currentNode;
 			
 			while(path.length) {
@@ -641,9 +683,11 @@ export function Tree(props) {
 
 				if (!currentDatum) {
 					// datum is not currently loaded, so load it
-
-					// LEFT OFF HERE
-					debugger;
+					await loadChildren(parentDatum, 1);
+					currentLevelData = parentDatum.children;
+					currentDatum = _.find(currentLevelData, (treeNodeDatum) => {
+						return treeNodeDatum.item.id === id; 
+					});
 				}
 				
 				currentNode = currentDatum.item;
@@ -653,6 +697,7 @@ export function Tree(props) {
 				
 				path = pathParts.slice(1).join('/'); // put the rest of it back together
 				currentLevelData = currentDatum.children;
+				parentDatum = currentDatum;
 			}
 
 			setSelection([currentNode]);
@@ -923,29 +968,15 @@ export function Tree(props) {
 			}
 			setDragNodeSlot(null);
 		};
-		
-	useEffect(() => {
-
-		async function buildAndSetTreeNodeData() {
-
-			let rootNodes;
-			if (Repository) {
-				if (!Repository.areRootNodesLoaded) {
-					rootNodes = await Repository.getRootNodes(1);
-				}
-			} else {
-				// TODO: Make this work for data array
 
-			}
-
-			const treeNodeData = buildTreeNodeData(rootNodes);
-			setTreeNodeData(treeNodeData);
-		}
-
-		function reloadTreeData() {
-			Repository.areRootNodesLoaded = false;
-			return buildAndSetTreeNodeData();
+	useEffect(() => {
+		if (!isReady) {
+			return () => {};
 		}
+		reloadTree();
+	}, [reload]);
+		
+	useEffect(() => {
 
 		if (!isReady) {
 			if (Repository) {
@@ -970,16 +1001,16 @@ export function Tree(props) {
 		Repository.on('load', setFalse);
 		Repository.ons(['changePage', 'changePageSize',], deselectAll);
 		Repository.ons(['changeData', 'change'], buildAndSetTreeNodeData);
-		Repository.on('changeFilters', reloadTreeData);
-		Repository.on('changeSorters', reloadTreeData);
+		Repository.on('changeFilters', reloadTree);
+		Repository.on('changeSorters', reloadTree);
 
 		return () => {
 			Repository.off('beforeLoad', setTrue);
 			Repository.off('load', setFalse);
 			Repository.offs(['changePage', 'changePageSize',], deselectAll);
 			Repository.offs(['changeData', 'change'], buildAndSetTreeNodeData);
-			Repository.off('changeFilters', onChangeFilters);
-			Repository.off('changeSorters', onChangeSorters);
+			Repository.off('changeFilters', reloadTree);
+			Repository.off('changeSorters', reloadTree);
 		};
 	}, []);
 
@@ -1037,11 +1068,11 @@ export function Tree(props) {
 					{treeFooterComponent}
 				</Column>
 
-				{/* <Modal
+				<Modal
 					isOpen={isSearchModalShown}
 					onClose={() => setIsSearchModalShown(false)}
 				>
-					<Column bg="#fff" w={500}>
+					<Column bg="#fff" w={300}>
 						<FormPanel
 							title="Choose Tree Node"
 							instructions="Multiple tree nodes matched your search. Please select which one to show."
@@ -1066,32 +1097,43 @@ export function Tree(props) {
 								setIsSearchModalShown(false);
 							}}
 							onSave={(data, e) => {
-
-								const node_id = data.node_id; // NOT SURE THIS IS CORRECT!
-
-								if (isMultipleHits) {
-									// Tell the server which one you want and get it, loading all children necessary to get there
-									
-									
-									
-								} else {
-									// Show the path based on local data
-									const
-										treeNode = getTreeNodeByNodeId(node_id),
-										path = getPathByTreeNode(treeNode);
-									expandPath(path);
-								}
+								const
+									treeNode = _.find(searchResults, (item) => {
+										return item.id === data.node_id;
+									}),
+									path = treeNode.path;
+								expandPath(path);
 
 								// Close the modal
 								setIsSearchModalShown(false);
 							}}
 						/>
 					</Column>
-				</Modal> */}
+				</Modal>
 			</>;
 
 }
 
+export const Tree = withAlert(
+									withEvents(
+										withData(
+											// withMultiSelection(
+												withSelection(
+													// withSideEditor(
+														withFilters(
+															// withPresetButtons(
+																withContextMenu(
+																	Tree
+																)
+															// )
+														)
+													// )
+												)
+											// )
+										)
+									)
+								);
+
 export const SideTreeEditor = withAlert(
 									withEvents(
 										withData(
@@ -1132,4 +1174,4 @@ export const WindowedTreeEditor = withAlert(
 									)
 								);
 
-export default WindowedTreeEditor;
+export default Tree;