@onehat/ui 0.2.58 → 0.2.60

package/src/Components/Tree/Tree.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useMemo, } from 'react';
 import {
 	Column,
 	FlatList,
+	Modal,
 	Pressable,
 	Icon,
 	Row,
@@ -31,17 +32,22 @@ import withPresetButtons from '../Hoc/withPresetButtons.js';
 import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
-import withInlineEditor from '../Hoc/withInlineEditor.js';
 import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
-import TreeHeaderRow from './TreeHeaderRow.js';
 import TreeNode, { ReorderableTreeNode } from './TreeNode.js';
+import FormPanel from '../Panel/FormPanel.js';
+import Input from '../Form/Field/Input.js';
 import IconButton from '../Buttons/IconButton.js';
+import Circle from '../Icons/Circle.js';
+import Collapse from '../Icons/Collapse.js';
+import FolderClosed from '../Icons/FolderClosed.js';
+import FolderOpen from '../Icons/FolderOpen.js';
+import MagnifyingGlass from '../Icons/MagnifyingGlass.js';
+import NoReorderRows from '../Icons/NoReorderRows.js';
+import ReorderRows from '../Icons/ReorderRows.js';
 import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
 import NoRecordsFound from './NoRecordsFound.js';
 import Toolbar from '../Toolbar/Toolbar.js';
-import NoReorderRows from '../Icons/NoReorderRows.js';
-import ReorderRows from '../Icons/ReorderRows.js';
 import _ from 'lodash';
 
 
@@ -49,17 +55,62 @@ import _ from 'lodash';
 // The default export is *with* the HOC. A separate *raw* component is
 // exported which can be combined with many HOCs for various functionality.
 
+
+//////////////////////
+//////////////////////
+
+// I'm thinking if a repository senses that it's a tree, then at initial load
+// it should get the root node +1 level of children.
+//
+// How would it then subsequently get the proper children?
+// i.e. When a node gets its children, how will it do this
+// while maintaining the nodes that already exist there?
+// We don't want it to *replace* all exisitng nodes!
+//
+// And if the repository does a reload, should it just get root+1 again?
+// Changing filters would potentially change the tree structure.
+// Changing sorting would only change the ordering, not what is expanded/collapsed or visible/invisible.
+
+
+
+// Need to take into account whether using Repository or data.
+// If using data, everything exists at once. What format will data be in?
+// How does this interface with Repository?
+// Maybe if Repository is not AjaxRepository, everything needs to be present at once!
+
+
+// isRootVisible
+
+//////////////////////
+//////////////////////
+
+
+
+
+
+
 export function Tree(props) {
 	const {
 			isRootVisible = true,
-			getChildParams = () => { // returns params needed to get child nodes from server (getEquipment, getRentalEquipment, etc). This is primarily to limit results, as different kinds of views are only interested in certain types of nodes in the returned data.
+			getAdditionalParams = () => { // URL params needed to get nodes from server (e.g, { venue_id: 1, getEquipment: true, getRentalEquipment: false, }), in addition to filters.
 				return {};
 			},
 			getNodeText = (item) => { // extracts model/data and decides what the row text should be
 				return item.displayValue;
 			},
-			getNodeType, // extracts model/data and decides what kind of node this should be. Helper for getNodeIcon
-			getNodeIcon,
+			getNodeIcon = (item, isExpanded) => { // decides what icon to show for this node
+				let icon;
+				if (item.hasChildren) {
+					if (isExpanded) {
+						icon = FolderOpen;
+					} else {
+						icon = FolderClosed;
+					}
+				} else {
+					icon = Circle;
+				}
+				return icon;
+			},
 			nodeProps = (item) => {
 				return {};
 			},
@@ -114,7 +165,9 @@ export function Tree(props) {
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
 		[isReorderMode, setIsReorderMode] = useState(false),
+		[isSearchModalShown, setIsSearchModalShown] = useState(false),
 		[treeNodeData, setTreeNodeData] = useState({}),
+		[searchFormData, setSearchFormData] = useState([]),
 		[dragNodeSlot, setDragNodeSlot] = useState(null),
 		[dragNodeIx, setDragNodeIx] = useState(),
 		onNodeClick = (item, e) => {
@@ -187,7 +240,50 @@ export function Tree(props) {
 				});
 			}
 		},
+		getHeaderToolbarItems = () => {
+			const
+				buttons = [
+					
+					{
+						key: 'searchBtn',
+						text: 'Search tree',
+						handler: onSearchTree,
+						icon: MagnifyingGlass,
+						isDisabled: false,
+					},
+					{
+						key: 'collapseBtn',
+						text: 'Collapse whole tree',
+						handler: onCollapseAll,
+						icon: Collapse,
+						isDisabled: false,
+					},
+				];
+			if (canNodesReorder) {
+				buttons.push({
+					key: 'reorderBtn',
+					text: 'Reorder tree',
+					handler: () => setIsReorderMode(!isReorderMode),
+					icon: isReorderMode ? NoReorderRows : ReorderRows,
+					isDisabled: false,
+				});
+			}
+			const items = _.map(buttons, getIconFromConfig);
+
+			items.unshift(<Input // Add text input to beginning of header items
+				key="searchTree"
+				flex={1}
+				placeholder="Search all tree nodes"
+				onChangeValue={onSearchTree}
+				autoSubmit={false}
+			/>);
+
+			return items;
+		},
 		getFooterToolbarItems = () => {
+			return _.map(additionalToolbarButtons, getIconFromConfig);
+		},
+		getIconFromConfig = (config, ix) => {
 			const
 				iconButtonProps = {
 					_hover: {
@@ -201,57 +297,71 @@ export function Tree(props) {
 					size: styles.TREE_TOOLBAR_ITEMS_ICON_SIZE,
 					h: 20,
 					w: 20,
-				},
-				items = _.map(additionalToolbarButtons, (config, ix) => {
-					let {
-							text,
-							handler,
-							icon = null,
-							isDisabled = false,
-						} = config;
-					if (icon) {
-						const thisIconProps = {
-							color: isDisabled ? styles.TREE_TOOLBAR_ITEMS_DISABLED_COLOR : styles.TREE_TOOLBAR_ITEMS_COLOR,
-						};
-						icon = React.cloneElement(icon, {...iconProps, ...thisIconProps});
-					}
-					return <IconButton
-								key={ix}
-								{...iconButtonProps}
-								onPress={handler}
-								icon={icon}
-								isDisabled={isDisabled}
-								tooltip={text}
-							/>;
-				});
-			if (canNodesReorder) {
-				items.unshift(<IconButton
-					key="reorderBtn"
-					{...iconButtonProps}
-					onPress={() => setIsReorderMode(!isReorderMode)}
-					icon={<Icon as={isReorderMode ? NoReorderRows : ReorderRows} color={styles.TREE_TOOLBAR_ITEMS_COLOR} />}
-				/>);
+				};
+			let {
+					key,
+					text,
+					handler,
+					icon = null,
+					isDisabled = false,
+				} = config;
+			if (icon) {
+				const thisIconProps = {
+					color: isDisabled ? styles.TREE_TOOLBAR_ITEMS_DISABLED_COLOR : styles.TREE_TOOLBAR_ITEMS_COLOR,
+				};
+				icon = React.cloneElement(icon, {...iconProps, ...thisIconProps});
 			}
-			return items;
+			return <IconButton
+						key={key || ix}
+						onPress={handler}
+						icon={icon}
+						isDisabled={isDisabled}
+						tooltip={text}
+						{...iconButtonProps}
+					/>;
+		},
+		buildTreeNodeDatum = (treeNode) => {
+			// Build the data-representation of one node and its children,
+			// caching text & icon, keeping track of the state for whole tree
+			// renderTreeNode uses this to render the nodes.
+			const
+				isRoot = treeNode.isRoot,
+				isLeaf = !treeNode.hasChildren,
+				datum = {
+					item: treeNode,
+					text: getNodeText(treeNode),
+					iconCollapsed: isLeaf ? null : getNodeIcon(treeNode, false),
+					iconExpanded: isLeaf ? null : getNodeIcon(treeNode, true),
+					iconLeaf: isLeaf ? getNodeIcon(treeNode) : null,
+					isExpanded: isRoot, // all non-root treeNodes are not expanded by default
+					isVisible: isRoot ? isRootVisible : true,
+					children: buildTreeNodeData(treeNode.children), // recursively get data for children
+				};
+
+			return datum;
+		},
+		buildTreeNodeData = (treeNodes) => {
+			const data = [];
+			_.each(treeNodes, (item) => {
+				data.push(buildTreeNodeDatum(item));
+			});
+			return data;
 		},
-		renderNode = (itemData) => {
-			const item = itemData.item;
+		renderTreeNode = (datum) => {
+			const item = datum.item;
 			if (item.isDestroyed) {
 				return null;
 			}
+			if (!datum.isVisible) {
+				return null;
+			}
 
-
-			// TODO: Figure out these vars
-			// icon (optional)
-			// onToggle (handler for if expand/collapse icon is clicked)
-
-
-
-			let nodeProps = getNodeProps && !isHeaderNode ? getNodeProps(item) : {},
-				isSelected = !isHeaderNode && isInSelection(item);
+			let nodeProps = getNodeProps ? getNodeProps(item) : {},
+				isSelected = isInSelection(item);
 
 			return <Pressable
 						// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
+						key={item.hash}
 						onPress={(e) => {
 							if (e.preventDefault && e.cancelable) {
 								e.preventDefault();
@@ -335,55 +445,244 @@ export function Tree(props) {
 							return <WhichTreeNode
 										nodeProps={nodeProps}
 										bg={bg}
-										itemData={itemData}
-
-										icon={icon}
+										datum={datum}
 										onToggle={onToggle}
 
 										// fields={fields}
-										// hideNavColumn={hideNavColumn}
 										{...rowReorderProps}
 									/>;
 						}}
 					</Pressable>;
 		},
-		buildTreeNode = (itemData) => {
-			// this one is to be used recursively on children
+		renderTreeNodes = (data) => {
+			const nodes = [];
+			_.each(data, (datum) => {
+				nodes.push(renderTreeNode(datum));
+			});
+			return nodes;
+		},
+		renderAllTreeNodes = () => {
+			const nodes = [];
+			_.each(treeNodeData, (datum) => {
+				const node = renderTreeNode(datum);
+				if (_.isEmpty(node)) {
+					return;
+				}
+				
+				nodes.push(node);
 
-			// isVisible // skip if not visible, just return keyed array
+				if (_.isEmpty(datum.children)) {
+					return;
+				}
 
-			// renderNode(itemData);
+				const children = renderTreeNodes(datum.children);
+				if (_.isEmpty(children)) {
+					return;
+				}
 
+				nodes.concat(children);
+			});
+			return nodes;
 		},
-		buildTreeNodes = () => {
 
-			// const entities = Repository ? (Repository.isRemote ? Repository.entities : Repository.getEntitiesOnPage()) : data;
-			// let rowData = _.clone(entities); // don't use the original array, make a new one so alterations to it are temporary
+		// Button handlers
+		onToggle = (datum) => {
+			datum.isExpanded = !datum.isExpanded;
+			forceUpdate();
 
-			const
-				rootEntity = Repository.getRootEntity(),
-				rootNode = buildTreeNode(rootEntity);
+			if (datum.item?.repository.isRemote && datum.item.hasChildren && !datum.item.isChildrenLoaded) {
+				loadChildren(datum, 1);
+			}
+		},
+		loadChildren = async (datum, depth) => {
+			// Helper for onToggle
 
+			// TODO: Flesh this out
+			// Show loading indicator (red bar at top? Spinner underneath current node?)
 
+			
+			// Calls getAdditionalParams(), then submits to server
+			// Server returns this for each node:
+			// Build up treeNodeData for just these new nodes
 
 
-			return rootNode;
+			// Hide loading indicator
+			
 		},
-		getChildren = (node_id, depth) => {
-			// Calls getChildParams(), then submits to server
-			// Server returns this for each node:
-			// hasChildren (so view can show/hide caret)
-			// model (e.g. "Fleet", "Equipment)
-			// data (json encoded representation of entity)
+		onCollapseAll = (setNewTreeNodeData = true) => {
+			// Go through whole tree and collapse all nodes
+			const newTreeNodeData = _.clone(treeNodeData);
+			
+			// Recursive method to collapse all children
+			function collapseChildren(children) {
+				_.each(children, (child) => {
+					child.isExpanded = true;
+					if (!_.isEmpty(child.children)) {
+						collapseChildren(child.children);
+					}
+				});
+			}
+
+			collapseChildren(newTreeNodeData);
+
+			if (setNewTreeNodeData) {
+				setTreeNodeData(newTreeNodeData);
+			}
+			return newTreeNodeData;
+		},
+		onSearchTree = async (value) => {
+
+			let found = [];
+			if (Repository?.isRemote) {
+				// Search tree on server
+				found = await Repository.searchTree(value);
+			} else {
+				// Search local tree data
+				found = findTreeNodesByText(value);
+			}
+
+
+			const isMultipleHits = found.length > 1;
+			let path = '';
+			let searchFormData = [];
 			
+			if (Repository?.isRemote) {
+				if (isMultipleHits) {
+					// 'found' is the results from the server. Use these to show the modal and choose which node you want to select
+					
+					
+					
+					
+				} else {
+					// Search local tree data
+					found = findTreeNodesByText(value);
+				}
+				
+				// TODO: create searchFormData based on 'found' array
+				
+
+
+
+
+				setSearchFormData(searchFormData);
+				setIsSearchModalShown(true);
+
+			} else {
+				// Expand that one path immediately
+				expandPath(path);
+			}
 		},
+		findTreeNodesByText = (text) => {
+			// Helper for onSearchTree
+			// Searches whole treeNodeData for any matching items
+			// Returns multiple nodes
 
-		// Button handlers
-		expandPath = (path) => {} // - drills down the tree based on path (usually given by server). Path would be a list of sequential IDs (3/35/263/1024)
-		collapseOne = (node_id) => {},
-		collapseAll = () => {},
-		expandOne = (node_id) => {},
-		expandAll = () => {},
+			const regex = new RegExp(text, 'i'); // instead of matching based on full text match, search for a partial match
+
+			function searchChildren(children, found = []) {
+				_.each(children, (child) => {
+					if (child.text.match(regex)) {
+						found.push(child);
+					}
+					if (child.children) {
+						searchChildren(child.children, found);
+					}
+				});
+				return found;
+			}
+			return searchChildren(treeNodeData);
+		},
+		getTreeNodeByNodeId = (node_id) => {
+			if (Repository) {
+				return Repository.getById(node_id);
+			}
+			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 = (path) => {
+			// Helper for onSearchTree
+
+			// Drills down the tree based on path (usually given by server).
+			// Path would be a list of sequential IDs (3/35/263/1024)
+			// Initially, it closes thw whole tree.
+
+			let newTreeNodeData = collapseAll(false); // false = don't set new treeNodeData
+
+			// As it navigates down, it will expand the appropriate branches,
+			// and then finally highlight & select the node in question
+			let pathParts,
+				id,
+				currentLevelData = newTreeNodeData,
+				currentDatum,
+				currentNode;
+			
+			while(path.length) {
+				pathParts = path.split('/');
+				id = parseInt(pathParts[0], 10); // grab the first part of the path
+				
+				// find match in current level
+				currentDatum = _.find(currentLevelData, (treeNodeDatum) => {
+					return treeNodeDatum.item.id === id; 
+				});
+				
+				currentNode = currentDatum.item;
+				
+				// THE MAGIC!
+				currentDatum.isExpanded = true;
+				
+				path = pathParts.slice(1).join('/'); // put the rest of it back together
+				currentLevelData = currentDatum.children;
+			}
+
+			setSelection([currentNode]);
+			scrollToNode(currentNode);
+			highlightNode(currentNode);
+
+			setTreeNodeData(newTreeNodeData);
+		},
+		scrollToNode = (node) => {
+			// Helper for expandPath
+			// Scroll the tree so the given node is in view
+
+			// TODO: This will probably need different methods in web and mobile
+
+
+		},
+		highlightNode = (node) => {
+			// Helper for expandPath
+			// Show a brief highlight animation to draw attention to the node
+
+			// TODO: This will probably need different methods in web and mobile
+			// react-highlight for web?
+
+
+		},
 
 		// Drag/Drop
 		getReorderProxy = (node) => {
@@ -632,52 +931,27 @@ export function Tree(props) {
 		
 	useEffect(() => {
 
+		async function buildAndSetTreeNodeData() {
 
-		function buildTreeNodeData() {
-			// Take the Repository and build up the tree node data from its entities
-			const
-				entities = Repository.entities,
-				treeNodes = {};
-
-			// TODO: Get root node?
-			// I'm thinking if a repository senses that it's a tree, then at initial load
-			// it should get the root node +1 level of children.
-			//
-			// How would it then subsequently get the proper children?
-			// i.e. When a node gets its children, how will it do this
-			// while maintaining the nodes that already exist there?
-			// We don't want it to *replace* all exisitng nodes!
-			//
-			// And if the repository does a reload, should it just get root+1 again?
-			// Changing filters would potentially change the tree structure.
-			// Changing sorting would only change the ordering, not what is expanded/collapsed or visible/invisible.
-
-			// include the following on each node
-			// - item
-			// - isExpanded,
-			// - isVisible,
-			// - hasChildren,
-			// - children
-			// - depth,
-			// - text,
-
-			// Need to take into account whether using Repository or data.
-			// If using data, everything exists at once. What format will data be in?
-			// How does this interface with Repository?
-			// Maybe if Repository is not AjaxRepository, everything needs to be present at once!
-
-
-			return treeNodes;
-		}
+			let rootNodes;
+			if (Repository) {
+				rootNodes = await Repository.getRootNodes(true, 1, getAdditionalParams);
+			} else {
+				// TODO: Make this work for data array
+
+			}
 
-		function buildAndSetTreeNodeData() {
-			setTreeNodeData(buildTreeNodeData());
+			const treeNodeData = buildTreeNodeData(rootNodes);
+			setTreeNodeData(treeNodeData);
 		}
 
 		if (!isReady) {
-			buildAndSetTreeNodeData();
-			setIsReady(true);
+			(async () => {
+				await buildAndSetTreeNodeData();
+				setIsReady(true);
+			})();
 		}
+
 		if (!Repository) {
 			return () => {};
 		}
@@ -729,14 +1003,16 @@ export function Tree(props) {
 
 	}, [selectorId, selectorSelected]);
 
-	const footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isReorderMode]);
+	const
+		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), []),
+		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isReorderMode]);
 
 	if (!isReady) {
 		return null;
 	}
 
 	// Actual TreeNodes
-	const treeNodes = buildTreeNodes();
+	const treeNodes = renderAllTreeNodes();
 
 	// headers & footers
 	let treeFooterComponent = null;
@@ -748,25 +1024,79 @@ export function Tree(props) {
 		}
 	}
 	
-	return <Column
-				{...testProps('Tree')}
-				flex={1}
-				w="100%"
-			>
-				{topToolbar}
+	return <>
+				<Column
+					{...testProps('Tree')}
+					flex={1}
+					w="100%"
+				>
+					{topToolbar}
+					{headerToolbarItemComponents}
+
+					<Column w="100%" flex={1} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
+						if (!isReorderMode) {
+							deselectAll();
+						}
+					}}>
+						{!treeNodes.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
+							treeNodes}
+					</Column>
 
-				<Column w="100%" flex={1} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
-					if (!isReorderMode) {
-						deselectAll();
-					}
-				}}>
-					{!treeNodes.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
-						treeNodes}
+					{treeFooterComponent}
 				</Column>
 
-				{treeFooterComponent}
+				<Modal
+					isOpen={isSearchModalShown}
+					onClose={() => setIsSearchModalShown(false)}
+				>
+					<Column bg="#fff" w={500}>
+						<FormPanel
+							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,
+										}
+									],
+								},
+							]}
+							onCancel={(e) => {
+								// Just close the modal
+								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);
+								}
 
-			</Column>;
+								// Close the modal
+								setIsSearchModalShown(false);
+							}}
+						/>
+					</Column>
+				</Modal>
+			</>;
 
 }