@onehat/ui 0.4.118 → 0.4.120

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.118",
+	"version": "0.4.120",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -69,7 +69,7 @@
 		"react-native-progress": "^5.0.1",
 		"react-redux": "^9.3.0",
 		"tailwind-scrollbar": "^4.0.2",
-		"tailwindcss": "^4.3.0",
+		"tailwindcss": "^3.4.17",
 		"yup": "^1.7.1"
 	},
 	"peerDependencies": {

package/src/Components/Container/Container.js

@@ -2,6 +2,7 @@ import { cloneElement, useState, useEffect, useRef, useCallback, } from 'react';
 import {
 	BoxNative,
 	HStack,
+	HStackNative,
 	VStack,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
@@ -681,7 +682,7 @@ function Container(props) {
 	return <VStack className="Container-all flex-1 min-w-0">
 				{northComponent}
 				{!getNorthIsCollapsed() && northSplitter}
-				<HStack
+				<HStackNative
 					className="Container-mid w-full flex-[100] min-w-0"
 					onLayout={(e) => {
 						// Measure available horizontal space for side panels.
@@ -707,7 +708,7 @@ function Container(props) {
 					</VStack>
 					{!getEastIsCollapsed() && eastSplitter}
 					{eastComponent}
-				</HStack>
+				</HStackNative>
 				{!getSouthIsCollapsed() && southSplitter}
 				{southComponent}
 			</VStack>;

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

@@ -1,12 +1,12 @@
 import ArrayCombo from './ArrayCombo.js';
 
 const data = [
-	['+1 day', 'Daily'], 
-	['+1 week', 'Weekly'], 
-	['+2 week', 'Bi-weekly'], 
-	['+1 month', 'Monthly'], 
-	['+3 month', 'Quarterly'], 
-	['+1 year', 'Yearly']
+	['1 day', 'Daily'], 
+	['1 week', 'Weekly'], 
+	// ['2 week', 'Bi-weekly'], // ambibuous, don't use
+	['1 month', 'Monthly'], 
+	['1 quarter', 'Quarterly'], 
+	['1 year', 'Yearly']
 ];
 
 export default function IntervalsCombo(props) {

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

@@ -275,6 +275,7 @@ export const DateElement = forwardRef((props, ref) => {
 			if (limitWidth) {
 				width = 150;
 			}
+			height = 150;
 			break;
 		default:
 	}

package/src/Components/Form/Form.js

@@ -1040,6 +1040,7 @@ function Form(props) {
 							icon,
 							selectorId,
 							selectorSelectedField,
+							disableTitleSuffix = false,
 							...itemPropsToPass
 						} = item,
 						titleElement;
@@ -1076,7 +1077,7 @@ function Form(props) {
 										initialEditorMode={ancillaryInitialEditorMode}
 									/>;
 					if (title) {
-						if (record?.displayValue) {
+						if (record?.displayValue && !disableTitleSuffix) {
 							title += ' for ' + record.displayValue;
 						}
 						titleElement = <Text

package/src/Components/Report/Report.js

@@ -1,4 +1,4 @@
-import { cloneElement, isValidElement } from 'react';
+import { cloneElement, isValidElement, useState, } from 'react';
 import {
 	Box,
 	HStack,
@@ -9,7 +9,11 @@ import {
 	VStackNative,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import { useSelector, useDispatch } from 'react-redux';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor';
+import {
+	selectUser,
+} from '../../Models/Slices/AuthSlice.js';
 import {
 	UI_MODE_WEB,
 	CURRENT_MODE,
@@ -18,6 +22,7 @@ import {
 	REPORT_TYPES__EXCEL,
 	REPORT_TYPES__PDF,
 } from '../../Constants/ReportTypes.js';
+import oneHatData from '@onehat/data';
 import Form from '../Form/Form.js';
 import IconButton from '../Buttons/IconButton.js';
 import withComponent from '../Hoc/withComponent.js';
@@ -28,8 +33,10 @@ import ChartLine from '../Icons/ChartLine.js';
 import Calendar from '../Icons/Calendar.js';
 import Plus from '../Icons/Plus.js';
 import Pdf from '../Icons/Pdf.js';
+import Share from '../Icons/Share.js';
 import Excel from '../Icons/Excel.js';
 import getReport from '../../Functions/getReport.js';
+import * as yup from 'yup';
 import _ from 'lodash';
 
 function Report(props) {
@@ -41,7 +48,9 @@ function Report(props) {
 			description,
 			reportId,
 			disablePdf = false,
+			pdfButtonText = 'Download PDF',
 			disableExcel = false,
+			excelButtonText = 'Download Excel',
 			showReportHeaders = true,
 			isQuickReport = false,
 			isDisabled = false,
@@ -51,9 +60,41 @@ function Report(props) {
 			disabledMessage = 'Report is Disabled',
 			additionalData = {},
 			quickReportData = {},
+
+			// withAlert
 			alert,
+			showInfo,
+			showModal,
+			hideModal,
+
+			// withComponent
+			self,
 		} = props,
 		formProps = props._form || {},
+		hasFormItems = formProps?.items?.[0]?.items?.length,
+		showPresets = usePresets && hasFormItems,
+		user = useSelector(selectUser),
+		[isValid, setIsValid] = useState(!hasFormItems), // if there are no form items, consider the form valid by default; otherwise, start as invalid until the form says otherwise
+		getCurrentReportFormData = () => {
+			const
+				form = self?.children?.form,
+				formValues = form?.formGetValues?.();
+			if (!_.isPlainObject(formValues)) {
+				alert('Unable to get form data');
+				return {};
+			}
+			return formValues;
+		},
+		setCurrentReportFormData = (data) => {
+			const form = self?.children?.form;
+			if (!form || !_.isPlainObject(data)) {
+				alert('Unable to set form data');
+				return;
+			}
+			_.each(data, (value, key) => {
+				form.formSetValue(key, value);
+			});
+		},
 		footerProps = formProps.footerProps || {},
 		footerClassName = clsx(
 			footerProps.className,
@@ -77,6 +118,161 @@ function Report(props) {
 			} catch (error) {
 				alert(error?.message || 'Unable to download report. Please try again.');
 			}
+		},
+		manageReportSchedules = async (formData) => {
+			if (hasFormItems) {
+				// check to make sure there is at least one ReportPreset for this report, since the schedule needs to be based on a preset (which captures the form config)
+				// If not, show alert saying create preset first
+				const ReportPresets = self?.children?.reportPresetsComboEditor?.repository;
+				if (!ReportPresets) {
+					alert('Unable to access report presets. Please try again.');
+					return;
+				}
+				let reportPresets = ReportPresets.getEntities();
+				if (!reportPresets?.length) {
+					await ReportPresets.load();
+					reportPresets = ReportPresets.getEntities();
+				}
+				if (!reportPresets?.length) {
+					alert('Please create at least one report preset first, since schedules are based on presets.');
+					return;
+				}
+			}
+			const ReportSchedulesGridEditor = getComponentFromType('ReportSchedulesGridEditor');
+			showModal({
+				title: 'Schedules for "' + title + '"',
+				body: <ReportSchedulesGridEditor
+							baseParams={{
+								'conditions[reportid]': reportId,
+							}}
+							_editor={{
+								hasFormItems,
+								reportId,
+							}}
+							defaultValues={{
+								report_schedules__additional_data: additionalData,
+							}}
+						/>,
+				canClose: true,
+				whichModal: 'schedulesModal',
+				h: 800,
+				w: 1100,
+			});
+		},
+		getRepository = () => {
+			let repository;
+			try {
+				// There is no 'Reports' repository (bc there is no 'Reports' model), 
+				// so just get the first OneBuild repository; doesn't matter which one
+	
+				repository = oneHatData.getRepositoriesByType('onebuild', true); // true to get the first only
+
+			} catch (error) {
+				alert('Error getting repository: ' + (error?.message || error));
+				return null;
+			}
+			return repository;
+		},
+		addToQueue = async (formData) => {
+			const
+				repository = getRepository(),
+				data = {
+					report_id: reportId,
+					...formData,
+					...additionalData,
+				},
+				result = await repository._send('POST', 'Reports/addToQueue', data),
+				response = repository._processServerResponse(result);
+			if (!response.success) {
+				alert(response.message || 'Failed to add report to queue');
+				return;
+			}
+
+			showInfo('Report added to queue.');
+		},
+		selectReportPreset = (reportPresetId) => {
+			// Change the form settings based on the selected preset
+			const
+				form = self?.children?.form,
+				ReportPresets = self?.children?.reportPresetsComboEditor?.repository;
+			if (!form || !ReportPresets) {
+				return;
+			}
+			
+			const reportPreset = ReportPresets?.getById(reportPresetId);
+			if (!reportPreset) {
+				alert('Selected report preset not found');
+				return;
+			}
+
+			// apply the config to the form
+			const config = reportPreset.properties.report_presets__config.getParsedValue(); // get the actual JS object
+			setCurrentReportFormData(config);
+		},
+		shareReportPreset = (parent) => {
+
+			// show a Modal with UserSelector, excluding current user.
+			showModal({
+				title: 'Share Report Preset',
+				body: <Form
+						instructions="Please select which user to share with."
+						editorType={EDITOR_TYPE__PLAIN}
+						className="flex-1"
+						items={[
+							{
+								name: 'instructions',
+								type: 'DisplayField',
+								text: 'Please select which user to share with.',
+								className: 'mb-3',
+							},
+							{
+								type: 'Column',
+								flex: 1,
+								items: [
+									{
+										name: 'user_id',
+										type: 'UsersCombo',
+										label: 'User',
+										baseParams: {
+											'conditions[id <>]': user.id,
+										},
+									},
+								],
+							},
+						]}
+						validator={yup.object({
+							user_id: yup.number().integer().required(),
+						})}
+						onCancel={(e) => {
+							hideModal();
+						}}
+						onClose={(e) => {
+							hideModal();
+						}}
+						onSubmit={async (data, e) => {
+							const
+								ReportPresets = self?.children?.reportPresetsComboEditor?.repository,
+								reportPreset = parent.selection[0],
+								params = {
+									report_preset_id: reportPreset.id,
+									user_id: data.user_id,
+								},
+								result = await ReportPresets._send('POST', 'ReportPresets/share', params),
+								response = ReportPresets._processServerResponse(result);
+
+							// Close the modal
+							hideModal();
+
+							if (response.success) {
+								showInfo('Report preset shared successfully.');
+							}
+						}}
+					/>,
+				canClose: true,
+				whichModal: 'shareReportPresetModal',
+				h: 220,
+				w: 500,
+			});
 		};
 
 	const propsIcon = props._icon || {};
@@ -177,37 +373,54 @@ function Report(props) {
 	}
 
 	let footerItems = [];
-	if (usePresets) {
+	if (showPresets) { // if no form items, no need for ReportPresets!
 		footerItems.push({
 			...testProps('reportPresetsComboEditor'),
+			parent: self,
+			reference: 'reportPresetsComboEditor',
 			key: 'reportPresetsComboEditor',
 			type: 'ReportPresetsComboEditor',
 			tooltip: 'Report Presets',
-			placeholder: 'Report Presets',
-			disableEdit: true,
-			className: 'w-[100px]',
+			placeholder: 'Presets',
+			disableEdit: true, // too complicated to edit, just allow add/delete/share
+			className: 'w-[130px]',
 			baseParams: {
-				reportId,
+				'conditions[reportid]': reportId, // reportid is a generated field, so you can search on it, but change capitalization
+			},
+			onChangeValue: selectReportPreset,
+			_grid: {
+				canRecordBeAdded: () => isValid, // only allow creating a preset if the form is valid, since the preset will capture the current form config
+				onBeforeAdd: (addValues) => {
+					// add the current form values to ReportPresets.config when creating a new preset
+					return {
+						...addValues,
+						report_presets__config: {
+							...getCurrentReportFormData(),
+							report_id: reportId,
+						},
+					};
+				},
+				additionalToolbarButtons: [
+					{
+						...testProps('shareBtn'),
+						key: 'shareBtn',
+						text: 'Share Report Preset',
+						icon: Share,
+						getIsButtonDisabled: (selection) => !selection?.[0]?.id,
+						handler: shareReportPreset,
+					},
+				],
 			},
 		});
 	}
 	if (useScheduledReports) {
 		footerItems.push({
-			...testProps('scheduleReportBtn'),
-			key: 'scheduleReportBtn',
+			...testProps('manageReportSchedulesBtn'),
+			key: 'manageReportSchedulesBtn',
 			type: 'Button',
-			tooltip: 'Schedule Report',
+			tooltip: 'Manage delivery schedules for this report',
 			icon: Calendar,
-			onPress: (data) => scheduleReport({
-				reportId,
-				data: {
-					...data,
-					...additionalData,
-				},
-				reportType: REPORT_TYPES__EXCEL,
-				showReportHeaders,
-			}),
-			disableOnInvalid: true,
+			onPress: manageReportSchedules,
 		});
 	}
 	if (useQueue) {
@@ -215,17 +428,9 @@ function Report(props) {
 			...testProps('queueBtn'),
 			key: 'queueBtn',
 			type: 'Button',
-			tooltip: 'Add to Queue',
+			tooltip: 'Immediately add to Queue',
 			icon: Plus,
-			onPress: (data) => addToQueue({
-				reportId,
-				data: {
-					...data,
-					...additionalData,
-				},
-				reportType: REPORT_TYPES__EXCEL,
-				showReportHeaders,
-			}),
+			onPress: addToQueue,
 			disableOnInvalid: true,
 		});
 	}
@@ -234,8 +439,9 @@ function Report(props) {
 			...testProps('excelBtn'),
 			key: 'excelBtn',
 			type: 'Button',
-			text: 'Download Excel',
+			text: excelButtonText,
 			icon: Excel,
+			tooltip: excelButtonText !== 'Download Excel' ? 'Download Excel' : null,
 			onPress: (data) => downloadReport({
 				reportId,
 				data: {
@@ -253,8 +459,9 @@ function Report(props) {
 			...testProps('pdfBtn'),
 			key: 'pdfBtn',
 			type: 'Button',
-			text: 'Download PDF',
+			text: pdfButtonText,
 			icon: Pdf,
+			tooltip: pdfButtonText !== 'Download PDF' ? 'Download PDF' : null,
 			onPress: (data) => downloadReport({
 				reportId,
 				data: {
@@ -270,9 +477,17 @@ function Report(props) {
 	if (footerItems.length) {
 		footerItems = footerItems.map(item => {
 			const Component = getComponentFromType(item.type);
-			return <Component {...item} />;
+			const { key, ...componentProps } = item;
+			return <Component key={key} {...componentProps} />;
 		});
 	}
+	let additionalDataComponent = null;
+	if (!_.isEmpty(additionalData)) {
+		const ReportAdditionalData = getComponentFromType('ReportAdditionalData');
+		additionalDataComponent = <ReportAdditionalData
+									additionalData={additionalData}
+								/>;
+	}
 	return <VStackNative
 				{...testProps('Report-' + reportId)}
 				className={clsx(
@@ -298,9 +513,12 @@ function Report(props) {
 						<VStack className="flex-1">
 							<Text className="text-2xl max-w-full">{title}</Text>
 							<Text className="text-sm">{description}</Text>
+							{additionalDataComponent}
 						</VStack>
 					</HStack>
 					<Form
+						parent={self}
+						reference="form"
 						editorType={EDITOR_TYPE__PLAIN}
 						additionalFooterItems={footerItems}
 						{...formProps}
@@ -308,6 +526,9 @@ function Report(props) {
 							...footerProps,
 							className: footerClassName,
 						}}
+						onValidityChange={(isValid) => {
+							setIsValid(isValid);
+						}}
 					/>
 				</Box>
 				{isDisabled &&
@@ -353,4 +574,13 @@ function Report(props) {
 			</VStackNative>;
 }
 
-export default withComponent(withAlert(Report));
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					reference={props.reference || 'report'}
+					{...props}
+				/>;
+	};
+}
+
+export default withAdditionalProps(withComponent(withAlert(Report)));

package/src/PlatformImports/Web/Attachments.js

@@ -233,7 +233,7 @@ function AttachmentsElement(props) {
 
 		} = props,
 		styles = UiGlobals.styles,
-		model = _.isArray(selectorSelected) && selectorSelected[0] ? selectorSelected[0].repository?.name : selectorSelected?.repository?.name,
+		model = _.isArray(selectorSelected) && selectorSelected[0] ? selectorSelected[0].schema?.name : selectorSelected?.schema?.name,
 		modelidCalc = _.isArray(selectorSelected) ? _.map(selectorSelected, (entity) => entity[selectorSelectedField]) : selectorSelected?.[selectorSelectedField],
 		modelid = useRef(modelidCalc),
 		id = props.id || (model && modelid.current ? `attachments-${model}-${modelid.current}` : 'attachments'),
@@ -770,7 +770,7 @@ function AttachmentsElement(props) {
 						wasAlreadyLoaded = AttachmentDirectories.isLoaded,
 						currentConditions = AttachmentDirectories.getParamConditions() || {},
 						newConditions = {
-							'conditions[AttachmentDirectories.model]': selectorSelected.repository.name,
+							'conditions[AttachmentDirectories.model]': selectorSelected.schema.name,
 							'conditions[AttachmentDirectories.modelid]': selectorSelected[selectorSelectedField],
 						};
 					let doReload = false;