@onehat/ui 0.2.84 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.84",
+	"version": "0.3.1",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -25,11 +25,12 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.18.12",
+		"@onehat/data": "^1.19.0",
 		"@hookform/resolvers": "^3.3.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"@reduxjs/toolkit": "^1.9.5",
 		"js-cookie": "^3.0.5",
+		"inflector-js": "^1.0.1",
 		"native-base": "^3.4.28",
 		"react-hook-form": "^7.45.0",
 		"react-redux": "^8.1.2",

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

@@ -15,9 +15,9 @@ const
 					ellipsizeMode="head" 
 					flex={1}
 					fontSize={styles.FORM_TEXT_FONTSIZE}
-					bg={styles.FORM_TEXT_BG}
+					minHeight='40px'
 					px={3}
-					py={1}
+					py={2}
 					{...props}
 				>{props.value}</Text>;
 	},

package/src/Components/Form/Form.js

@@ -199,7 +199,8 @@ function Form(props) {
 												} = fieldState;
 											let editorProps = {};
 											if (!editor) {
-												editor = model.editorTypes[fieldName];
+												const propertyDef = fieldName && Repository?.getSchema().getPropertyDefinition(fieldName);
+												editor = propertyDef[fieldName].editoType;
 												if (_.isPlainObject(editor)) {
 													const {
 															type,
@@ -259,14 +260,16 @@ function Form(props) {
 				} = item;
 			let editorTypeProps = {};
 
-			const model = Repository?.getSchema().model;
-			if (!type && Repository) {
-				const 
-					editorTypes = model.editorTypes,
+			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
+			if (propertyDef?.isEditingDisabled) {
+				isEditable = false;
+			}
+			if (isEditable && !type && Repository) {
+				const
 					{
 						type: t,
 						...p
-					} =  editorTypes[name];
+					} =  propertyDef.editorType;
 				type = t;
 				editorTypeProps = p;
 			}
@@ -287,12 +290,14 @@ function Form(props) {
 				return <Element key={ix} title={title} {...defaults} {...propsToPass} {...editorTypeProps}>{children}</Element>;
 			}
 
+			if (!label && Repository && propertyDef.title) {
+				label = propertyDef.title;
+			}
+
 			if (isViewOnly || !isEditable) {
-				const Text = getComponentFromType('Text');
-				if (!label && Repository && model.titles?.[name]) {
-					label = model.titles[name];
-				}
-				const value = (record && record[name]) || (startingValues && startingValues[name]) || null;
+				const
+					Text = getComponentFromType('Text'),
+					value = (record && record[name]) || (startingValues && startingValues[name]) || null;
 				let element = <Text
 									value={value}
 									{...propsToPass}
@@ -307,9 +312,6 @@ function Form(props) {
 				return <Row key={ix} px={2} pb={1}>{element}</Row>;
 			}
 
-			if (!label && Repository && model.titles?.[name]) {
-				label = model.titles[name];
-			}
 
 		
 			// // These rules are for fields *outside* the model
@@ -483,7 +485,6 @@ function Form(props) {
 	let formComponents,
 		editor;
 	if (editorType === EDITOR_TYPE__INLINE) {
-		// for inline editor
 		formComponents = buildFromColumnsConfig();
 		editor = <ScrollView
 					horizontal={true}
@@ -495,8 +496,14 @@ function Form(props) {
 					borderTopColor="primary.100"
 					borderBottomColor="primary.100"
 				>{formComponents}</ScrollView>;
+	} else if (editorType === EDITOR_TYPE__PLAIN) {
+		formComponents = buildFromItems();
+		const formAncillaryComponents = buildAncillary();
+		editor = <>
+					<Row>{formComponents}</Row>
+					<Column pt={4}>{formAncillaryComponents}</Column>
+				</>;
 	} else {
-		// for all other editor types
 		formComponents = buildFromItems();
 		const formAncillaryComponents = buildAncillary();
 		editor = <ScrollView _web={{ height: 1 }} width="100%" pb={1}>

package/src/Components/Hoc/withFilters.js

@@ -5,6 +5,12 @@ import {
 	Row,
 	Text,
 } from 'native-base';
+import {
+	EDITOR_TYPE__PLAIN,
+} from '../../Constants/Editor.js';
+import {
+	FILTER_TYPE_ANCILLARY
+} from '../../Constants/Filters.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import IconButton from '../Buttons/IconButton.js';
@@ -50,11 +56,7 @@ export default function withFilters(WrappedComponent) {
 				// aliases
 				{
 					defaultFilters: modelDefaultFilters,
-					filterTypes: modelFilterTypes,
-					titles: modelTitles,
-					virtualFields: modelVirtualFields,
-					excludeFields: modelExcludeFields,
-					filteringDisabled: modelFilteringDisabled,
+					ancillaryFilters: modelAncillaryFilters,
 				} = Repository.getSchema().model,
 				id = useId(),
 
@@ -68,11 +70,30 @@ export default function withFilters(WrappedComponent) {
 				getFormattedFilter = (filter) => {
 					let formatted = null;
 					if (_.isString(filter)) {
-						const field = filter;
+						const
+							field = filter,
+							propertyDef = Repository.getSchema().getPropertyDefinition(field);
+						
+						let title, type;
+						if (propertyDef) {
+							title = propertyDef.title;
+							type = propertyDef.filterType;
+						} else {
+							const modelFilterTypes = Repository.getSchema().getFilterTypes();
+							if (!modelFilterTypes[field]) {
+								throw Error('not a propertyDef, and not an ancillaryFilter!');
+							}
+
+							const ancillaryFilter = modelFilterTypes[field];
+							title = ancillaryFilter.title;
+							type = FILTER_TYPE_ANCILLARY;
+						}
+
+
 						formatted = {
 							field,
-							title: modelTitles[field],
-							type: modelFilterTypes[field],
+							title,
+							type,
 							value: null, // value starts as null
 						};
 					} else if (_.isPlainObject(filter)) {
@@ -221,12 +242,19 @@ export default function withFilters(WrappedComponent) {
 					_.each(filters, (filter, ix) => {
 						let Element,
 							elementProps = {};
-						const {
+						let {
 								field,
 								type: filterType,
-							} = filter;
+							} = filter,
+							propertyDef = Repository.getSchema().getPropertyDefinition(field);
 
 						if (_.isString(filterType)) {
+							if (filterType === FILTER_TYPE_ANCILLARY) {
+								// Convert field to PluralCamelGrid
+								debugger;
+								
+
+							}
 							Element = getComponentFromType(filterType);
 							if (filterType === 'Input') {
 								elementProps.autoSubmit = true;
@@ -247,7 +275,7 @@ export default function withFilters(WrappedComponent) {
 							elementProps.minWidth = 100;
 						}
 
-						const tooltip = filter.tooltip || filter.title || modelTitles[filter.field];
+						const tooltip = filter.tooltip || filter.title || propertyDef.title;
 						let filterElement = <Element
 												key={'filter-' + field}
 												tooltip={tooltip}
@@ -259,7 +287,7 @@ export default function withFilters(WrappedComponent) {
 											/>;
 						if (showLabels && field !== 'q') {
 							filterElement = <Row key={'label-' + ix} alignItems="center">
-												<Text ml={2} mr={1} fontSize={UiGlobals.styles.FILTER_LABEL_FONTSIZE}>{modelTitles[field]}</Text>
+												<Text ml={2} mr={1} fontSize={UiGlobals.styles.FILTER_LABEL_FONTSIZE}>{propertyDef.title}</Text>
 												{filterElement}
 											</Row>;
 						}
@@ -383,17 +411,28 @@ export default function withFilters(WrappedComponent) {
 					usedFields = _.filter(_.map(modalFilters, (filter) => {
 						return filter?.field;
 					}), el => !_.isNil(el)),
-					formStartingValues = {};
+					formStartingValues = {},
+					modelFilterTypes = Repository.getSchema().getFilterTypes();
 				
 				_.each(modalSlots, (field, ix) => {
 
-					// Create the data for the combobox.
+					// Create the data for the combobox. (i.e. List all the possible filters for this slot)
 					const data = [];
 					_.each(modelFilterTypes, (filterType, filterField) => {
 						if (inArray(filterField, usedFields) && field !== filterField) { // Show all filters not yet applied, but include the current filter
 							return; // skip, since it's already been used
 						}
-						data.push([ filterField, modelTitles[filterField] ]);
+
+						// Is it an ancillary filter?
+						const isAncillary = _.isPlainObject(filterType) && filterType.isAncillary;
+						if (isAncillary) {
+							data.push([ filterField, filterType.title ]);
+							return;
+						}
+
+						// basic property filter
+						const propertyDef = Repository.getSchema().getPropertyDefinition(filterField);
+						data.push([ filterField, propertyDef.title ]);
 					});
 
 					const
@@ -447,6 +486,7 @@ export default function withFilters(WrappedComponent) {
 								<FormPanel
 									title="Filter Selector"
 									instructions="Please select which fields to filter by."
+									editorType={EDITOR_TYPE__PLAIN}
 									flex={1}
 									startingValues={formStartingValues}
 									items={[

package/src/Constants/Filters.js

@@ -0,0 +1 @@
+export const FILTER_TYPE_ANCILLARY = 'FILTER_TYPE_ANCILLARY';

package/src/Constants/Styles.js

@@ -38,7 +38,6 @@ const defaults = {
 	FORM_LABEL_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_NUMBER_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_TEXT_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_TEXT_BG: WHITE,
 	FORM_TEXTAREA_BG: WHITE,
 	FORM_TEXTAREA_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_TEXTAREA_HEIGHT: 130,