@onehat/ui 0.3.380 → 0.3.382

package/package.json

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

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

@@ -692,6 +692,7 @@ export function ComboComponent(props) {
 			'disablePrint',
 			'selectorId',
 			'selectorSelected',
+			'selectorSelectedField',
 			'usePermissions',
 		]);
 		if (!Repository) {

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

@@ -239,6 +239,7 @@ function TagComponent(props) {
 	if (propsToPass.selectorId) {
 		_combo.selectorId = propsToPass.selectorId;
 		_combo.selectorSelected = propsToPass.selectorSelected;
+		_combo.selectorSelectedField = propsToPass.selectorSelectedField;
 	}
 
 	return <>

package/src/Components/Form/Form.js

@@ -127,6 +127,7 @@ function Form(props) {
 			// parent container
 			selectorId,
 			selectorSelected,
+			selectorSelectedField,
 
 			// withAlert
 			alert,
@@ -337,6 +338,7 @@ function Form(props) {
 
 										if (useSelectorId) { // This causes the whole form to use selectorId
 											editorTypeProps.selectorId = selectorId;
+											editorTypeProps.selectorSelectedField = selectorSelectedField;
 										}
 										if (propsToPass.selectorId || editorTypeProps.selectorId) { // editorTypeProps.selectorId causes just this one field to use selectorId
 											if (_.isNil(propsToPass.selectorSelected)) {
@@ -589,6 +591,7 @@ function Form(props) {
 
 							if (useSelectorId) { // This causes the whole form to use selectorId
 								editorTypeProps.selectorId = selectorId;
+								editorTypeProps.selectorSelectedField = selectorSelectedField;
 							}
 							if (propsToPass.selectorId || editorTypeProps.selectorId) { // editorTypeProps.selectorId causes just this one field to use selectorId
 								if (_.isNil(propsToPass.selectorSelected)) {
@@ -708,6 +711,7 @@ function Form(props) {
 						title = null,
 						description = null,
 						selectorId,
+						selectorSelectedField,
 						...propsToPass
 					} = item;
 					if (isMultiple && type !== 'Attachments') {
@@ -721,6 +725,7 @@ function Form(props) {
 						element = <Element
 										{...testProps('ancillary-' + type)}
 										selectorId={selectorId}
+										selectorSelectedField={selectorSelectedField}
 										selectorSelected={selectorSelected || record}
 										flex={1}
 										uniqueRepository={true}

package/src/Components/Grid/Grid.js

@@ -111,7 +111,6 @@ function GridComponent(props) {
 			hideNavColumn = true,
 			noneFoundText,
 			autoAdjustPageSizeToHeight = true,
-			disableSelectorSelected = false,
 			showRowExpander = false,
 			getExpandedRowContent,
 			showHeaders = true,
@@ -140,6 +139,22 @@ function GridComponent(props) {
 			alternatingInterval = 2,
 			defaultRowHeight = 48,
 
+			// The selectorSelected mechanism allows us to filter results of the primary model, (e.g. WorkOrders)
+			//   by the selection on the secondary model (e.g. Equipment). It's used on Grids, Trees, Forms, etc.
+			// The 'selectorId' is the name of the primary model's filter (e.g. 'WorkOrders.equipment_id').
+			//   which gets submitted to the server as a condition (e.g. 'conditions[WorkOrders.equipment_id]').
+			// The 'selectorSelected' is the Entity on the secondary model which is selected (e.g. Equipment).
+			// The 'selectorSelectedField' is the field on the secondary model to use as the value for the filter
+			//   (e.g. 'fleet_id'). If not given, it defaults to 'id'.
+			// It can be disabled altogether for a specific grid ('disableSelectorSelected'), and configured
+			//   so that no selection means no results ('noSelectorMeansNoResults').
+
+			selectorId,
+			selectorSelected,
+			selectorSelectedField = 'id',
+			noSelectorMeansNoResults = false,
+			disableSelectorSelected = false,
+
 			// withComponent
 			self,
 
@@ -182,16 +197,11 @@ function GridComponent(props) {
 			deselectAll,
 			selectRangeTo,
 			isInSelection,
-			noSelectorMeansNoResults = false,
 			selectNext,
 			selectPrev,
 			addNextToSelection,
 			addPrevToSelection,
 
-			// DataMgt
-			selectorId,
-			selectorSelected,
-
 			// withInlineEditor
 			inlineEditor = null,
 			isInlineEditorShown = false,
@@ -212,6 +222,7 @@ function GridComponent(props) {
 		expandedRowsRef = useRef({}),
 		cachedDragElements = useRef(),
 		dragSelectionRef = useRef([]),
+		previousSelectorId = useRef(),
 		[isInited, setIsInited] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
@@ -755,11 +766,23 @@ function GridComponent(props) {
 			if (disableSelectorSelected || !selectorId) {
 				return
 			}
-			let id = selectorSelected?.id;
-			if (_.isEmpty(selectorSelected)) {
-				id = noSelectorMeansNoResults ? 'NO_MATCHES' : null;
+
+			if (previousSelectorId.current && selectorId !== previousSelectorId.current) {
+				Repository.pauseEvents();
+				Repository.clearFilters(previousSelectorId.current);
+				Repository.resumeEvents();
+			}
+			previousSelectorId.current = selectorId;
+
+			let value = null;
+			if (selectorSelected) {
+				value = selectorSelected[selectorSelectedField];
+			}
+			if (noSelectorMeansNoResults && _.isEmpty(selectorSelected)) {
+				value = 'NO_MATCHES';
 			}
-			Repository.filter(selectorId, id, false); // so it doesn't clear existing filters
+
+			Repository.filter(selectorId, value, false); // false so it doesn't clear existing filters
 		},
 		onGridKeyDown = (e) => {
 			if (isInlineEditorShown) {
@@ -968,7 +991,7 @@ function GridComponent(props) {
 
 		applySelectorSelected();
 
-	}, [selectorSelected]);
+	}, [selectorId, selectorSelected]);
 
 	if (canUser && !canUser('view')) {
 		return <Unauthorized />;

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -60,6 +60,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				// parent container
 				secondarySelectorId,
 				secondarySelectorSelected,
+				secondarySelectorSelectedField = 'id',
 
 				// withSecondaryData
 				SecondaryRepository,
@@ -150,7 +151,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				}
 
 				if (secondarySelectorId && !_.isEmpty(secondarySelectorSelected)) {
-					addValues[secondarySelectorId] = secondarySelectorSelected.id;
+					addValues[secondarySelectorId] = secondarySelectorSelected[secondarySelectorSelectedField];
 				}
 
 				if (getNewEntityDisplayValue()) {

package/src/Components/Hoc/Secondary/withSecondarySideEditor.js

@@ -35,6 +35,7 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 				// pull these out, as we don't want them going to the Editor
 				secondarySelectorId,
 				secondarySelectorSelected,
+				secondarySelectorSelectedField,
 				
 				...propsToPass
 			} = props;

package/src/Components/Hoc/Secondary/withSecondaryWindowedEditor.js

@@ -41,6 +41,7 @@ export default function withSecondaryWindowedEditor(WrappedComponent, isTree = f
 				// pull these out, as we don't want them going to the SecondaryEditor
 				secondarySelectorId,
 				secondarySelectorSelected,
+				secondarySelectorSelectedField,
 				h,
 
 				...propsToPass

package/src/Components/Hoc/withEditor.js

@@ -60,6 +60,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				// parent container
 				selectorId,
 				selectorSelected,
+				selectorSelectedField = 'id',
 
 				// withData
 				Repository,
@@ -149,7 +150,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 
 				if (selectorId && !_.isEmpty(selectorSelected)) {
-					addValues[selectorId] = selectorSelected.id;
+					addValues[selectorId] = selectorSelected[selectorSelectedField];
 				}
 
 				if (getNewEntityDisplayValue()) {

package/src/Components/Hoc/withInlineEditor.js

@@ -34,6 +34,7 @@ export default function withInlineEditor(WrappedComponent, skipWrappers = false)
 				// pull these out, as we don't want them going to the Editor
 				selectorId,
 				selectorSelected,
+				selectorSelectedField,
 				h,
 
 				...propsToPass

package/src/Components/Hoc/withSideEditor.js

@@ -33,6 +33,7 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 				// pull these out, as we don't want them going to the Editor
 				selectorId,
 				selectorSelected,
+				selectorSelectedField,
 				
 				...propsToPass
 			} = props;

package/src/Components/Hoc/withWindowedEditor.js

@@ -55,6 +55,7 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 				// pull these out, as we don't want them going to the Editor
 				selectorId,
 				selectorSelected,
+				selectorSelectedField,
 				h,
 
 				...propsToPass

package/src/Components/Tree/Tree.js

@@ -43,6 +43,7 @@ import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js'
 import inArray from '../../Functions/inArray.js';
 import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
+import CenterBox from '../Layout/CenterBox.js';
 import ReloadTreeButton from '../Buttons/ReloadTreeButton.js';
 import TreeNode, { DraggableTreeNode } from './TreeNode.js';
 import FormPanel from '../Panel/FormPanel.js';
@@ -114,6 +115,10 @@ function TreeComponent(props) {
 			canRecordBeEdited,
 			onTreeLoad,
 
+			selectorId,
+			selectorSelected,
+			selectorSelectedField = 'id',
+
 			// withComponent
 			self,
 
@@ -155,10 +160,6 @@ function TreeComponent(props) {
 			isInSelection,
 			noSelectorMeansNoResults = false,
 
-			// DataMgt
-			selectorId,
-			selectorSelected,
-
 		} = props,
 		styles = UiGlobals.styles,
 		forceUpdate = useForceUpdate(),
@@ -1205,19 +1206,15 @@ function TreeComponent(props) {
 			})();
 			return () => {};
 		}
-
-		(async () => {
-			if (autoLoadRootNodes) {
-				await reloadTree();
-			}
-			setIsReady(true);
-		})();
-
 		
 		// set up @onehat/data repository
 		const
 			setTrue = () => setIsLoading(true),
 			setFalse = () => setIsLoading(false);
+
+		if (Repository.isLoading) {
+			setTrue();
+		}
 		
 		Repository.on('beforeLoad', setTrue);
 		Repository.on('load', setFalse);
@@ -1227,6 +1224,13 @@ function TreeComponent(props) {
 		Repository.on('changeFilters', reloadTree);
 		Repository.on('changeSorters', reloadTree);
 
+		(async () => {
+			if (autoLoadRootNodes) {
+				await reloadTree();
+			}
+			setIsReady(true);
+		})();
+
 		return () => {
 			Repository.off('beforeLoad', setTrue);
 			Repository.off('load', setFalse);
@@ -1243,7 +1247,7 @@ function TreeComponent(props) {
 			return () => {};
 		}
 		if (!disableSelectorSelected && selectorId) {
-			let id = selectorSelected?.id;
+			let id = selectorSelected?.[selectorSelectedField] ?? null;
 			if (_.isEmpty(selectorSelected)) {
 				id = noSelectorMeansNoResults ? 'NO_MATCHES' : null;
 			}
@@ -1252,7 +1256,9 @@ function TreeComponent(props) {
 	}, [selectorId, selectorSelected]);
 
 	if (canUser && !canUser('view')) {
-		return <Unauthorized />;
+		return <CenterBox>
+					<Unauthorized />
+				</CenterBox>;
 	}
 
 	if (setWithEditListeners) {
@@ -1279,7 +1285,9 @@ function TreeComponent(props) {
 		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, isDragMode, getTreeNodeData()]);
 
 	if (!isReady) {
-		return <Loading />;
+		return <CenterBox>
+					<Loading />
+				</CenterBox>;
 	}
 	
 	const treeNodes = renderTreeNodes(getTreeNodeData());
@@ -1336,7 +1344,9 @@ function TreeComponent(props) {
 					>
 						<ScrollView {...testProps('ScrollView')} flex={1} w="100%">
 							{!treeNodes?.length ? 
-								<NoRecordsFound text={noneFoundText} onRefresh={reloadTree} /> :
+								<CenterBox>
+									<NoRecordsFound text={noneFoundText} onRefresh={reloadTree} />
+								</CenterBox> :
 								treeNodes}
 						</ScrollView>
 					</Column>

package/src/Components/Viewer/Viewer.js

@@ -58,6 +58,7 @@ function Viewer(props) {
 			// parent container
 			selectorId,
 			selectorSelected,
+			selectorSelectedField,
 
 		} = props,
 		scrollViewRef = useRef(),
@@ -209,6 +210,7 @@ function Viewer(props) {
 										{...testProps('ancillary-' + type)}
 										selectorId={selectorId}
 										selectorSelected={selectorSelected || record}
+										selectorSelectedField={selectorSelectedField}
 										flex={1}
 										h={350}
 										canEditorViewOnly={true}

package/src/PlatformImports/Web/Attachments.js

@@ -94,6 +94,7 @@ function AttachmentsElement(props) {
 
 			// parentContainer
 			selectorSelected,
+			selectorSelectedField = 'id',
 
 			// withData
 			Repository,
@@ -105,7 +106,7 @@ function AttachmentsElement(props) {
 		} = props,
 		styles = UiGlobals.styles,
 		model = _.isArray(selectorSelected) && selectorSelected[0] ? selectorSelected[0].repository?.name : selectorSelected?.repository?.name,
-		modelidCalc = _.isArray(selectorSelected) ? _.map(selectorSelected, (entity) => entity.id) : selectorSelected?.id,
+		modelidCalc = _.isArray(selectorSelected) ? _.map(selectorSelected, (entity) => entity[selectorSelectedField]) : selectorSelected?.[selectorSelectedField],
 		modelid = useRef(modelidCalc),
 		[isReady, setIsReady] = useState(false),
 		[isUploading, setIsUploading] = useState(false),