@onehat/ui 0.4.80 → 0.4.82

package/package.json

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

package/src/Components/Container/Container.js

@@ -78,10 +78,10 @@ function Container(props) {
 		id = props.id || props.self?.path,
 		canResize = CURRENT_MODE === UI_MODE_WEB,
 		[isReady, setIsReady] = useState(false),
-		[localIsNorthCollapsed, setLocalIsNorthCollapsedRaw] = useState(north ? north.props.startsCollapsed : false),
-		[localIsSouthCollapsed, setLocalIsSouthCollapsedRaw] = useState(south ? south.props.startsCollapsed : false),
-		[localIsEastCollapsed, setLocalIsEastCollapsedRaw] = useState(east ? east.props.startsCollapsed : false),
-		[localIsWestCollapsed, setLocalIsWestCollapsedRaw] = useState(west ? west.props.startsCollapsed : false),
+		[localIsNorthCollapsed, setLocalIsNorthCollapsedRaw] = useState(north ? !!north.props.startsCollapsed : false),
+		[localIsSouthCollapsed, setLocalIsSouthCollapsedRaw] = useState(south ? !!south.props.startsCollapsed : false),
+		[localIsEastCollapsed, setLocalIsEastCollapsedRaw] = useState(east ? !!east.props.startsCollapsed : false),
+		[localIsWestCollapsed, setLocalIsWestCollapsedRaw] = useState(west ? !!west.props.startsCollapsed : false),
 		[northHeight, setNorthHeightRaw] = useState(north ? north.props.h : 0),
 		[southHeight, setSouthHeightRaw] = useState(south ? south.props.h : 0),
 		[eastWidth, setEastWidthRaw] = useState(east ? east.props.w : 0),

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

@@ -773,6 +773,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 		if (CURRENT_MODE === UI_MODE_NATIVE) {
 			gridClassName += ' h-[400px] max-h-[100%]';
 		}
+		if (gridProps.className) {
+			gridClassName += ' ' + gridProps.className;
+		}
 		grid = <WhichGrid
 					showHeaders={false}
 					showHovers={true}
@@ -886,9 +889,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 					}}
 					reference="grid"
 					parent={self}
-					className={gridClassName}
 					style={gridStyle}
 					{...gridProps}
+					className={gridClassName}
 					{..._editor}
 				/>;
 		if (CURRENT_MODE === UI_MODE_WEB) {
@@ -962,7 +965,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 										top,
 										left,
 										width,
-										height: (menuHeight || styles.FORM_COMBO_MENU_HEIGHT) + inputHeight,
+										// height: (menuHeight || styles.FORM_COMBO_MENU_HEIGHT) + inputHeight,
 										minWidth: 100,
 									}}
 								>

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

@@ -22,6 +22,7 @@ function MeterTypesCombo(props) {
 				reference="MeterTypeCombo"
 				data={data}
 				disableDirectEntry={true}
+				menuHeight={100}
 				{...props}
 			/>;
 }

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

@@ -601,7 +601,7 @@ export const DateElement = forwardRef((props, ref) => {
 		styles.FORM_DATE_CLASSNAME,
 	);
 	if (props.className) {
-		className += props.className;
+		className += ' ' + props.className;
 	}
 	if (minimizeForRow) {
 		className += ' h-auto min-h-0 max-h-[50px]';

package/src/Components/Form/Field/Select/PageSizeSelect.js

@@ -12,7 +12,11 @@ export default function PageSizeSelect(props) {
 		} = props;
 
 	return useMemo(() => {
-		return <HStack className="PageSizeSelect-HStack w-[70px]">
+		return <HStack
+					className={clsx(
+						'PageSizeSelect-HStack',
+					)}
+				>
 					<Select
 						data={[
 							// [ 1, '1', ],
@@ -26,6 +30,7 @@ export default function PageSizeSelect(props) {
 						onChangeValue={(value) => Repository.setPageSize(value)}
 						tooltip="Page Size"
 						tooltipClassName="w-[70px]"
+						fixedWidth={false}
 					/>
 				</HStack>;
 	}, [

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

@@ -1,6 +1,7 @@
 import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectInput, SelectIcon,  SelectItem,  SelectPortal, SelectTrigger,
+	Text,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
 import {
@@ -15,54 +16,22 @@ import CaretDown from '../../../Icons/CaretDown.js';
 import _ from 'lodash';
 
 const SelectElement = forwardRef((props, ref) => {
-	let { // so localValue can be changed, if needed
+	const {
 			data = [], // in format [ [ value, label, ], ... ]
 			value,
 			setValue,
 			onKeyPress,
 			placeholder,
 			disableAutoFlex = false,
+			fixedWidth = true,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
-		// debouncedSetValueRef = useRef(),
-		// [localValue, setLocalValue] = useState(value),
-		// onKeyPressLocal = (e) => {
-		// 	if (e.key === 'Enter') {
-		// 		debouncedSetValueRef.current?.cancel();
-		// 		setValue(localValue);
-		// 	}
-		// 	if (onKeyPress) {
-		// 		onKeyPress(e, localValue);
-		// 	}
-		// },
+		style = props.style || {},
 		items = data.map(([ value, label, ], key) => {
 			return <SelectItem key={key} label={label} value={value} />;
 		});
 		
-	// useEffect(() => {
-
-	// 	// Set up debounce fn
-	// 	// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
-	// 	debouncedSetValueRef.current?.cancel(); // Cancel any previous debounced fn
-	// 	debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
-
-	// }, [setValue]);
-		
-	// useEffect(() => {
-
-	// 	if (value !== localValue) {
-	// 		// Make local value conform to externally changed value
-	// 		setLocalValue(value);
-	// 	}
-
-	// }, [value]);
-
-	// if (localValue === null || typeof localValue === 'undefined') {
-	// 	localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled select
-	// }
-
-	const style = props.style || {};
 	// auto-set width to flex if it's not already set another way
 	if (!disableAutoFlex && !hasWidth(props) && !hasFlex(props)) {
 		style.flex = 1;
@@ -70,13 +39,12 @@ const SelectElement = forwardRef((props, ref) => {
 	let className = clsx(
 		'Select',
 		'min-h-[40px]',
-		'w-full',
 		'text-left',
 		'rounded-lg',
 		styles.FORM_SELECT_CLASSNAME,
 	);
 	if (props.className) {
-		className += props.className;
+		className += ' ' + props.className;
 	}
 
 	return <Select
@@ -89,7 +57,15 @@ const SelectElement = forwardRef((props, ref) => {
 				style={style}
 			>
 				<SelectTrigger variant="outline" size="md" className="SelectTrigger" >
-					<SelectInput placeholder={placeholder} className="SelectInput" />
+					{fixedWidth ? 
+						<SelectInput
+							placeholder={placeholder}
+							className={clsx(
+								'SelectInput',
+							)}
+						/> :
+						<Text className="SelectText p-2">{value}</Text>}
+					
 					<SelectIcon className="mr-3" as={CaretDown} />
 				</SelectTrigger>
 				<SelectPortal className="SelectPortal">

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

@@ -1,18 +1,26 @@
-import { useRef, } from 'react';
+import { useRef, useState, useEffect, } from 'react';
 import {
 	HStack,
 	VStackNative,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import * as yup from 'yup'; // https://github.com/jquense/yup#string
+import oneHatData from '@onehat/data';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../../../Constants/Editor.js';
+import {
+	EDITOR_TYPE__PLAIN,
+} from '../../../../Constants/Editor.js';
+import Form from '../../Form.js';
+import Viewer from '../../../Viewer/Viewer.js';
 import withAlert from '../../../Hoc/withAlert.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
 import withModal from '../../../Hoc/withModal.js';
 import withValue from '../../../Hoc/withValue.js';
 import ValueBox from './ValueBox.js';
+import Inflector from 'inflector-js';
 import Combo, { ComboEditor } from '../Combo/Combo.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import _ from 'lodash';
@@ -27,8 +35,12 @@ function TagComponent(props) {
 			minimizeForRow = false,
 			Editor,
 			_combo = {},
+			SourceRepository,
+			joinDataConfig,
+			outerValueId, // for recursion only. See note in useEffect
 			tooltip,
 			testID,
+			getBaseParams,
 
 			// parent Form
 			onChangeValue,
@@ -39,6 +51,10 @@ function TagComponent(props) {
 			// withComponent
 			self,
 
+			// withData
+			Repository: TargetRepository,
+			setBaseParams,
+
 			// withFilters
 			isInFilter,
 
@@ -53,11 +69,22 @@ function TagComponent(props) {
 			...propsToPass // break connection between Tag and Combo props
 		} = props,
 		styles = UiGlobals.styles,
+		propertyDef = SourceRepository?.getSchema().getPropertyDefinition(self.reference),
+		hasJoinData = propertyDef?.joinData?.length,
+		[JoinRepository] = useState(() => {
+			if (hasJoinData) {
+				return oneHatData.getRepository(propertyDef.joinModel, true);
+			}
+			return null;
+		}),
+		[isInited, setIsInited] = useState(false),
+		modelFieldStartsWith = hasJoinData ? Inflector.underscore(JoinRepository.getSchema().name) + '__' : '',
 		valueRef = useRef(value),
 		onView = async (item, e) => {
+			// This method shows the record viewer
 			const
 				id = item.id,
-				repository = propsToPass.Repository;
+				repository = TargetRepository;
 			if (repository.isLoading) {
 				await repository.waitUntilDoneLoading();
 			}
@@ -117,7 +144,6 @@ function TagComponent(props) {
 			// The value we get from combo is a simple int
 			// Convert this to id and displayValue from either Repository or data array.
 			const
-				Repository = props.Repository,
 				data = props.data,
 				idIx = props.idIx,
 				displayIx = props.displayIx,
@@ -127,9 +153,9 @@ function TagComponent(props) {
 				
 			if (!id) {
 				displayValue = '';
-			} else if (Repository) {
-				if (!Repository.isDestroyed) {
-					item = Repository.getById(id);
+			} else if (TargetRepository) {
+				if (!TargetRepository.isDestroyed) {
+					item = TargetRepository.getById(id);
 					if (!item) {
 						throw Error('item not found');
 					}
@@ -143,13 +169,42 @@ function TagComponent(props) {
 				displayValue = item[displayIx];
 			}
 
+			let joinData = {};
+			if (hasJoinData) {
+				// build up the default starting values,
+				// first with schema defaultValues...
+				const
+					allSchemaDefaults = JoinRepository.getSchema().getDefaultValues(),
+					modelSchemaDefaults = _.pickBy(allSchemaDefaults, (value, key) => {
+						return key.startsWith(modelFieldStartsWith);
+					}),
+					joinFieldNames = joinDataConfig.map(fieldConfig => fieldConfig.name || fieldConfig),
+					schemaDefaultValues = _.pick(modelSchemaDefaults, joinFieldNames),
+					strippedSchemaDefaultValues = _.mapKeys(schemaDefaultValues, (value, key) => {
+						return key.startsWith(modelFieldStartsWith) ? key.slice(modelFieldStartsWith.length) : key;
+					});
+
+				// then with default values in joinDataConfig, if they exist
+				_.each(joinDataConfig, (fieldConfig) => {
+					if (!_.isNil(fieldConfig.defaultValue)) {
+						joinData[fieldConfig.name] = fieldConfig.defaultValue;
+					}
+				});
+				joinData = { ...strippedSchemaDefaultValues, ...joinData };
+			}
+
 
 			// add new value
-			const newValue = [...value]; // clone, so we trigger a re-render
-			newValue.push({
-				id,
-				text: displayValue,
-			})
+			const
+				newValue = [...value], // clone, so we trigger a re-render
+				newItem = {
+					id,
+					text: displayValue,
+				};
+			if (hasJoinData) {
+				newItem.joinData = joinData;
+			}
+			newValue.push(newItem);
 			setValue(newValue);
 			clearComboValue();
 		},
@@ -160,6 +215,105 @@ function TagComponent(props) {
 			});			
 			setValue(newValue);
 		},
+		onJoin = async (item, e) => {
+			// This method shows the joinData viewer/editor
+
+			/* item format:
+				item = {
+					id: 3,
+					text: "1000HR PM",
+					joinData: {
+						hide_every_n: 0,
+						also_resets: '[]',
+					},
+				}
+			*/
+
+			// prepend 'model_name__' to the field names, so they match the JoinRepository property names
+			const
+				record = _.mapKeys(item.joinData, (value, key) => {
+					return modelFieldStartsWith + key;
+				}),
+				items = propertyDef.joinData.map((fieldName) => {
+					let obj = {
+						name: modelFieldStartsWith + fieldName,
+					};
+					// add in any config from joinDataConfig for this field
+					if (joinDataConfig?.[fieldName]) {
+						const jdcf = _.clone(joinDataConfig[fieldName]); // don't mutate original
+						jdcf.outerValueId = item.id;
+						obj = {
+							...obj,
+							...jdcf,
+						};
+					}
+
+					return obj;
+				});
+
+			let height = 300;
+			let body;
+			if (isViewOnly) {
+				// show Viewer
+				body = <Viewer
+							record={record}
+							Repository={JoinRepository}
+							items={items}
+							columnDefaults={{
+								labelWidth: 200,
+							}}
+						/>;
+			} else {
+				switch (items.length) {
+					case 1: height = 250; break;
+					case 2: height = 400; break;
+					default: height = 600; break;
+				}
+				body = <Form
+							editorType={EDITOR_TYPE__PLAIN}
+							isEditorViewOnly={false}
+							record={record}
+							Repository={JoinRepository}
+							items={items}
+							additionalFooterButtons={[
+								{
+									text: 'Cancel',
+									onPress: hideModal,
+									skipSubmit: true,
+									variant: 'outline',
+								}
+							]}
+							onSave={(values)=> {
+
+								// strip the 'model__' prefix from the field names
+								values = _.mapKeys(values, (value, key) => {
+									return key.startsWith(modelFieldStartsWith) ? key.slice(modelFieldStartsWith.length) : key;
+								});
+
+								// Put these values back on joinData
+								item.joinData = values;
+								const newValue = [...valueRef.current]; // clone
+								const ix = _.findIndex(newValue, (val) => {
+									return val.id === item.id;
+								});
+								newValue[ix] = item;
+								setValue(newValue);
+
+								hideModal();
+							}}
+						/>;
+			}
+
+			showModal({
+				title: 'Extra data for "' + item.text + '"',
+				w: 400,
+				h: height,
+				canClose: true,
+				includeReset: false,
+				includeCancel: false,
+				body,
+			});
+		},
 		onGridAdd = (selection) => {
 			// underlying GridEditor added a record.
 			// add it to this Tag's value
@@ -226,12 +380,60 @@ function TagComponent(props) {
 						key={ix}
 						text={val.text}
 						onView={() => onView(val)}
-						onDelete={!isViewOnly ? () => onDelete(val) : null}
 						showEye={showEye}
+						onJoin={() => onJoin(val)}
+						showJoin={hasJoinData}
+						onDelete={!isViewOnly ? () => onDelete(val) : null}
 						minimizeForRow={minimizeForRow}
 					/>;
 		});
 	
+	useEffect(() => {
+
+		// NOTE: This useEffect is so we can set the Target baseParams before it loads
+		// We did this for cases where the Tag field has joinData that's managing a nested Tag field. 
+		// ... This deals with recursion, so gets "alice in wonderland" quickly!
+		// If that inner Tag field has getBaseParams defined on the joinDataConfig of the outer Tag,
+		// then that means it needs to set its baseParams dynamically, based on the values that are 
+		// currently set, as well as the value of the outer ValueBox that was clicked on.
+
+		// For example: in the MetersEditor:
+		// {
+		// 	name: 'meters__pm_schedules',
+		// 	parent: self,
+		// 	reference: 'meters__pm_schedules',
+		// 	joinDataConfig: {
+		// 		also_resets: {
+		// 			getBaseParams: (values, outerValueId) => {
+		// 				const
+		// 					baseParams = {
+		// 						'conditions[MetersPmSchedules.meter_id]': meter_id, // limit also_resets to those MetersPmSchedules related to this meter
+		// 					},
+		// 					ids = values.map((value) => value.id),
+		// 					mpsValues = JSON.parse(self.children.meters__pm_schedules?.value || '[]');
+		// 				if (outerValueId) {
+		// 					ids.push(outerValueId);
+		// 				}
+		// 				if (!_.isEmpty(ids)) {
+		// 					baseParams['conditions[MetersPmSchedules.pm_schedule_id NOT IN]'] = ids;
+		// 				}
+		// 				return baseParams;
+		// 			},
+		// 		},
+		// 	},
+		// }
+
+
+		if (getBaseParams) {
+			TargetRepository.setBaseParams(getBaseParams(value, outerValueId));
+		}
+		setIsInited(true);
+	}, [value]);
+
+	if (!isInited) {
+		return null;
+	}
+
 	valueRef.current = value; // the onGrid* methods were dealing with stale data, so use a ref, and update it here
 
 	let WhichCombo = Combo;
@@ -309,7 +511,7 @@ function TagComponent(props) {
 				
 				{!isViewOnly && 
 					<WhichCombo
-						Repository={props.Repository}
+						Repository={TargetRepository}
 						Editor={props.Editor}
 						onSubmit={onChangeComboValue}
 						parent={self}

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

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import testProps from '../../../../Functions/testProps.js';
 import IconButton from '../../../Buttons/IconButton.js';
 import Eye from '../../../Icons/Eye.js';
+import Edit from '../../../Icons/Edit.js';
 import Xmark from '../../../Icons/Xmark.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import _ from 'lodash';
@@ -14,8 +15,10 @@ export default function ValueBox(props) {
 	const {
 			text,
 			onView,
+			showEye = false,
+			onJoin,
+			showJoin = false,
 			onDelete,
-			showEye,
 			minimizeForRow = false,
 		} = props,
 		styles = UiGlobals.styles;
@@ -49,6 +52,22 @@ export default function ValueBox(props) {
 							styles.FORM_TAG_BTN_CLASSNAME,
 						)}
 					/>}
+				{showJoin &&
+					<IconButton
+						{...testProps('joinBtn')}
+						icon={Edit}
+						_icon={{
+							size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
+							className: 'text-grey-600',
+						}}
+						onPress={onJoin}
+						className={clsx(
+							'ValueBox-joinBtn',
+							'h-full',
+							minimizeForRow ? 'py-0' : '',
+							styles.FORM_TAG_BTN_CLASSNAME,
+						)}
+					/>}
 				<Text
 					className={clsx(
 						'ValueBox-Text',

package/src/Components/Form/Form.js

@@ -183,7 +183,7 @@ function Form(props) {
 				pointerEvents: fabOpacity.value > 0 ? 'auto' : 'none', // Disable interaction when invisible
 			};
 		}),
-		initialValues = _.merge(startingValues, (record && !record.isDestroyed ? record.submitValues : {})),
+		initialValues = _.merge(startingValues, ((record && !record.isDestroyed) ? (record.submitValues || record) : {})),
 		defaultValues = isMultiple ? getNullFieldValues(initialValues, Repository) : initialValues, // when multiple entities, set all default values to null
 		validatorToUse = (() => {
 			// If a custom validator is provided, use it
@@ -440,6 +440,7 @@ function Form(props) {
 										}
 										if (type.match(/Tag/)) {
 											elementClassName += ' overflow-auto';
+											configPropsToPass.SourceRepository = Repository;
 										}
 										if (!type.match(/Toggle/)) {
 											elementClassName += ' h-full';
@@ -540,8 +541,8 @@ function Form(props) {
 			if (isHidden) {
 				return null;
 			}
-			if (type === 'DisplayField') {
-				isEditable = false;
+			if (type === 'DisplayField' || type?.match(/Grid/)) {
+				isEditable = false; // this merely disables the FormController for this element
 			}
 			if (!itemPropsToPass.className) {
 				itemPropsToPass.className = '';
@@ -667,16 +668,19 @@ function Form(props) {
 			if (isEditorViewOnly || !isEditable) {
 				let value = null;
 				if (isSingle) {
-					value = record?.properties[name]?.displayValue || null;
-					if (_.isNil(value) && record && record[name]) {
+					value = record?.properties?.[name]?.displayValue || null;
+					if (_.isNil(value) && !_.isNil(record?.[name])) {
 						value = record[name];
 					}
-					if (_.isNil(value) && startingValues && startingValues[name]) {
+					if (_.isNil(value) && !_.isNil(startingValues?.[name])) {
 						value = startingValues[name];
 					}
 				}
+				if (type.match(/Tag/)) {
+					itemPropsToPass.SourceRepository = Repository;
+				}
 
-				let elementClassName = 'field-' + name;
+				let elementClassName = name ? 'field-' + name : '';
 				const defaultsClassName = defaults.className;
 				if (defaultsClassName) {
 					elementClassName += ' ' + defaultsClassName;
@@ -689,7 +693,6 @@ function Form(props) {
 				if (viewerTypeClassName) {
 					elementClassName += ' ' + viewerTypeClassName;
 				}
-		
 				let element = <Element
 									{...testProps('field-' + name)}
 									value={value}
@@ -787,6 +790,9 @@ function Form(props) {
 							if (getDynamicProps) {
 								dynamicProps = getDynamicProps({ fieldState, formSetValue, formGetValues, formState });
 							}
+							if (type.match(/Tag/)) {
+								itemPropsToPass.SourceRepository = Repository;
+							}
 
 							let elementClassName = 'Form-Element field-' + name + ' w-full';
 							const defaultsClassName = defaults.className;
@@ -886,7 +892,8 @@ function Form(props) {
 														>*</Text>;
 								}
 							}
-							if (!disableLabels && label && editorType !== EDITOR_TYPE__INLINE) {
+							const labelToUse = dynamicProps.label || label;
+							if (!disableLabels && labelToUse && editorType !== EDITOR_TYPE__INLINE) {
 								const style = {};
 								if (defaults?.labelWidth) {
 									style.width = defaults.labelWidth;
@@ -901,7 +908,7 @@ function Form(props) {
 									element = <HStack className="Form-HStack8 w-full">
 								 					<Label style={style}>
 														{requiredIndicator}
-														{label}
+														{labelToUse}
 													</Label>
 													{element}
 								 				</HStack>;
@@ -909,7 +916,7 @@ function Form(props) {
 									element = <VStack className="Form-VStack9 w-full mt-3">
 													<Label style={style}>
 														{requiredIndicator}
-														{label}
+														{labelToUse}
 													</Label>
 													{element}
 												</VStack>;
@@ -1485,8 +1492,13 @@ function Form(props) {
 
 	} // END if (containerWidth)
 	
-	let className = props.className || '';
-	className += ' Form-VStackNative';
+	let className = clsx(
+		'Form-VStackNative',
+		'[transform:translateZ(0)]', // so embedded FAB will be relative to this container, not to viewport
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
 	const scrollToTopAnchor = <Box ref={(el) => (ancillaryItemsRef.current[0] = el)} className="h-0" />;
 	return <VStackNative
 				ref={formRef}