@onehat/ui 0.4.81 → 0.4.83

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

@@ -1,18 +1,28 @@
-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 Button from '../../../Buttons/Button.js';
+import testProps from '../../../../Functions/testProps.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 +37,14 @@ function TagComponent(props) {
 			minimizeForRow = false,
 			Editor,
 			_combo = {},
+			SourceRepository,
+			mustSaveBeforeEditingJoinData = false,
+			joinDataConfig,
+			getBaseParams, // See note in useEffect
+			outerValueId, // See note in useEffect
 			tooltip,
 			testID,
+			isDirty = false,
 
 			// parent Form
 			onChangeValue,
@@ -39,6 +55,10 @@ function TagComponent(props) {
 			// withComponent
 			self,
 
+			// withData
+			Repository: TargetRepository,
+			setBaseParams,
+
 			// withFilters
 			isInFilter,
 
@@ -53,11 +73,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(_.isUndefined(getBaseParams)), // default to true unless getBaseParams is defined
+		modelFieldStartsWith = hasJoinData ? Inflector.underscore(JoinRepository.getSchema().name) + '__' : '',
 		valueRef = useRef(value),
 		onView = async (item, e) => {
+			// show the joined record's viewer
 			const
 				id = item.id,
-				repository = propsToPass.Repository;
+				repository = TargetRepository;
 			if (repository.isLoading) {
 				await repository.waitUntilDoneLoading();
 			}
@@ -115,9 +146,8 @@ 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.
+			// Convert this to { id, text} from either Repository or data array.
 			const
-				Repository = props.Repository,
 				data = props.data,
 				idIx = props.idIx,
 				displayIx = props.displayIx,
@@ -127,9 +157,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 +173,46 @@ function TagComponent(props) {
 				displayValue = item[displayIx];
 			}
 
+			let joinData = {};
+			if (hasJoinData) {
+				// build up the default starting values for joinData,
+				// first with schema defaultValues...
+				const
+					allSchemaDefaults = JoinRepository.getSchema().getDefaultValues(),
+					modelSchemaDefaults = _.pickBy(allSchemaDefaults, (value, key) => {
+						return key.startsWith(modelFieldStartsWith);
+					}),
+					fullFieldNames = propertyDef.joinData.map((fieldName) => { // add the 'model_name__' prefix so we can get schema default values
+						return modelFieldStartsWith + fieldName;
+					}),
+					schemaDefaultValues = _.pick(modelSchemaDefaults, fullFieldNames);
+				joinData = _.mapKeys(schemaDefaultValues, (value, key) => { // strip out the 'model_name__' prefix from field names
+					return key.startsWith(modelFieldStartsWith) ? key.slice(modelFieldStartsWith.length) : key;
+				});
+
+				// then override with default values in joinDataConfig, if they exist
+				if (joinDataConfig) {
+					_.each(Object.keys(joinDataConfig), (fieldName) => {
+						const fieldConfig = joinDataConfig[fieldName];
+						if (!_.isUndefined(fieldConfig.defaultValue)) { // null in jsonDataConfig will override a default value in schema!
+							joinData[fieldName] = fieldConfig.defaultValue;
+						}
+					});
+				}
+			}
+
 
 			// add new value
-			const newValue = [...value]; // clone, so we trigger a re-render
-			newValue.push({
-				id,
-				text: displayValue,
-			})
+			const
+				newValue = [...value], // clone Tag's full current value (array), so we trigger a re-render after adding the new value
+				newItem = {
+					id,
+					text: displayValue,
+				};
+			if (hasJoinData) {
+				newItem.joinData = joinData;
+			}
+			newValue.push(newItem);
 			setValue(newValue);
 			clearComboValue();
 		},
@@ -160,6 +223,122 @@ function TagComponent(props) {
 			});			
 			setValue(newValue);
 		},
+		onViewEditJoinData = async (item, e) => {
+			// show the joinData viewer/editor
+
+			/* item format:
+				item = {
+					id: 3,
+					text: "1000HR PM",
+					joinData: {
+						hide_every_n: 0,
+						also_resets: '[]',
+					},
+				}
+			*/
+
+			// Prepare Form to edit the joinData
+			const
+				// create the Form.record, format: { meters_pm_schedules__also_resets: null, meters_pm_schedules__hide_every_n: 5 }
+				record = _.mapKeys(item.joinData, (value, key) => { // add the 'model_name__' prefix so we can match JoinRepository property names
+					return modelFieldStartsWith + key;
+				}),
+				// create the Form.items
+				items = propertyDef.joinData.map((fieldName) => {
+					let obj = {
+						name: modelFieldStartsWith + fieldName,
+					};
+
+					// add in any specific config for joinData[fieldName]], if it exists
+					// (The outer *Editor can configure each Tag field's joinData Form item.
+					// This moves that configuration down and adds outerValueId)
+					if (joinDataConfig?.[fieldName]) {
+						const joinDataConfigFieldname = _.clone(joinDataConfig[fieldName]); // don't mutate original
+						joinDataConfigFieldname.outerValueId = item.id; // so that joinData can be aware of the value of the inspected ValueBox; see note in useEffect, below
+						obj = {
+							...obj,
+							...joinDataConfigFieldname,
+						};
+					}
+
+					return obj;
+				});
+
+			let height = 300;
+			let body;
+			const extraModalProps = {};
+			if (isViewOnly) {
+				// show Viewer
+				body = <Viewer
+							record={record}
+							Repository={JoinRepository}
+							items={items}
+							columnDefaults={{
+								labelWidth: 200,
+							}}
+						/>;
+
+				extraModalProps.customButtons = [
+					<Button
+						{...testProps('closeBtn')}
+						key="closeBtn"
+						onPress={hideModal}
+						text="Close"
+						className="text-white"
+					/>,
+				];
+			} else {
+				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_name__' 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();
+							}}
+						/>;
+			}
+			switch (items.length) {
+				case 1: height = 250; break;
+				case 2: height = 400; break;
+				default: height = 600; break;
+			}
+
+			showModal({
+				title: 'Extra data for "' + item.text + '"',
+				w: 400,
+				h: height,
+				canClose: true,
+				includeReset: false,
+				includeCancel: false,
+				body,
+				...extraModalProps,
+			});
+		},
 		onGridAdd = (selection) => {
 			// underlying GridEditor added a record.
 			// add it to this Tag's value
@@ -226,12 +405,53 @@ function TagComponent(props) {
 						key={ix}
 						text={val.text}
 						onView={() => onView(val)}
-						onDelete={!isViewOnly ? () => onDelete(val) : null}
 						showEye={showEye}
+						onViewEditJoinData={() => onViewEditJoinData(val)}
+						showJoin={hasJoinData && (!mustSaveBeforeEditingJoinData || !isDirty)}
+						onDelete={!isViewOnly ? () => onDelete(val) : null}
 						minimizeForRow={minimizeForRow}
 					/>;
 		});
 	
+	if (!_.isUndefined(getBaseParams) && outerValueId) {
+		useEffect(() => {
+
+			// NOTE: This useEffect is so we can dynamically set the TargetRepository's baseParams,
+			// based on outerValueId, 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 a joinDataConfig field of the outer Tag,
+			// then that means it needs to set its baseParams dynamically, based on the value of the outer ValueBox.
+
+			// For example: in the MetersEditor:
+			// {
+			// 	name: 'meters__pm_schedules',
+			// 	mustSaveBeforeEditingJoinData: true,
+			// 	joinDataConfig: {
+			// 		also_resets: {
+			// 			getBaseParams: (values, outerValueId) => {
+			// 				const baseParams = {
+			// 					'conditions[MetersPmSchedules.meter_id]': meter_id, // limit also_resets to those MetersPmSchedules related to this meter
+			// 				};
+			// 				if (outerValueId) {
+			// 					baseParams['conditions[MetersPmSchedules.id <>]'] = outerValueId; // exclude the ValueBox that was clicked on
+			// 				}
+			// 				return baseParams;
+			// 			},
+			// 		},
+			// 	},
+			// }
+
+			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 +529,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,
+			onViewEditJoinData,
+			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={onViewEditJoinData}
+						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;
@@ -810,6 +816,7 @@ function Form(props) {
 												{...testProps('field-' + name)}
 												name={name}
 												value={value}
+												isDirty={isDirty}
 												onChangeValue={(newValue) => {
 													if (newValue === undefined) {
 														newValue = null; // React Hook Form doesn't respond well when setting value to undefined
@@ -886,7 +893,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 +909,7 @@ function Form(props) {
 									element = <HStack className="Form-HStack8 w-full">
 								 					<Label style={style}>
 														{requiredIndicator}
-														{label}
+														{labelToUse}
 													</Label>
 													{element}
 								 				</HStack>;
@@ -909,7 +917,7 @@ function Form(props) {
 									element = <VStack className="Form-VStack9 w-full mt-3">
 													<Label style={style}>
 														{requiredIndicator}
-														{label}
+														{labelToUse}
 													</Label>
 													{element}
 												</VStack>;
@@ -1485,8 +1493,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}