@onehat/ui 0.4.102 → 0.4.103

package/src/Components/Pms/Screens/PmsManager.js

@@ -0,0 +1,136 @@
+import { useState, useEffect, } from 'react';
+import { useSelector } from 'react-redux';
+import { useIsFocused } from '@react-navigation/native';
+import {
+	selectTreeSelection,
+} from '@src/Models/Slices/AppSlice';
+import {
+	NODE_TYPES__FLEETS,
+	NODE_TYPES__EQUIPMENT,
+} from '@src/Constants/NodeTypes.js';
+import oneHatData from '@onehat/data';
+import testProps from '../../../Functions/testProps.js';
+import verifyCanCrud from '../../../Functions/verifyCanCrudPmEvents.js';
+import ManagerScreen from '../../Screens/Manager.js';
+import Bell from '../../Icons/Bell.js';
+import ClockRegular from '../../Icons/ClockRegular.js';
+import OilCan from '../../Icons/OilCan.js';
+import TabBar from '../../Tab/TabBar.js';
+import TreeSpecific from '../Layout/TreeSpecific/TreeSpecific.js';
+import UpcomingPmsGrid from '../Grid/UpcomingPmsGrid.js';
+import PmEventsFilteredGridEditor from '@src/Components/Grid/PmEventsFilteredGridEditor.js';
+import PmEventsFilteredSideGridEditor from '@src/Components/Grid/PmEventsFilteredSideGridEditor.js';
+import _ from 'lodash';
+
+const EmptyWrapper = ({ children }) => {
+	return <>{children}</>;
+};
+
+export default function PmsManager(props) {
+	const {
+			Wrapper = EmptyWrapper,
+		} = props,
+		treeSelection = useSelector(selectTreeSelection),
+		isActive = useIsFocused(),
+		[defaultMeterId, setDefaultMeterId] = useState(null),
+		[Equipment] = useState(() => oneHatData.getRepository('Equipment', true)),
+		treeNode = treeSelection?.[0],
+		isFleet = treeNode?.nodeType === NODE_TYPES__FLEETS,
+		isEquipment = treeNode?.nodeType === NODE_TYPES__EQUIPMENT;
+
+	useEffect(() => {
+		if (isEquipment) {
+			(async () => {
+				// Fetch the primary_meter_id for this Equipment
+				const idToUse = treeNode?.actualId || treeNode?.id;
+				let entity = Equipment.getById(idToUse);
+				if (!entity) {
+					entity = await Equipment.loadOneAdditionalEntity(idToUse);
+				}
+				let defaultMeterId = null;
+				if (entity && !entity.equipment__has_multiple_meters) {
+					defaultMeterId = entity.equipment__primary_meter_id;
+				}
+				setDefaultMeterId(defaultMeterId);
+			})();
+		} else {
+			setDefaultMeterId(null);
+		}
+	}, [treeNode]);
+		
+	if (!isActive) {
+		return null;
+	}
+
+	let fleetId = null,
+		selectorId = null,
+		selectorSelectedField = undefined; // so the default prop assignment will work in Grid (won't work with null)
+	if (isFleet) {
+		selectorId = 'pm_events__fleet_id';
+		selectorSelectedField = 'actualId';
+		fleetId = treeNode.actualId;
+	} else if (isEquipment) {
+		selectorId = 'pm_events__equipment_id';
+		selectorSelectedField = 'actualId';
+		fleetId = treeNode.equipment__fleet_id;
+	}
+
+	const
+		gridProps = {
+			reference: 'PmEventsGridEditor',
+			canRecordBeEdited: verifyCanCrud,
+			canRecordBeDeleted: verifyCanCrud,
+			canRecordBeDuplicated: verifyCanCrud,
+			selectorId,
+			selectorSelected: treeSelection[0],
+			selectorSelectedField,
+			defaultValues: defaultMeterId ? {
+				pm_events__meter_id: defaultMeterId,
+			} : undefined,
+		};
+
+	return <TabBar
+				{...testProps('PmsManager')}
+				reference="PmsManager"
+				tabs={[
+					{
+						title: 'Upcoming PMs',
+						icon: Bell,
+						...testProps('UpcomingPmsGrid'),
+						content: <Wrapper>
+									<TreeSpecific>
+										<UpcomingPmsGrid
+											reference="UpcomingPmsGrid"
+											nodeType={treeNode?.nodeType}
+											nodeId={treeNode?.[selectorSelectedField]}
+										/>
+									</TreeSpecific>
+								</Wrapper>,
+					},
+					{
+						title: 'PM Events',
+						icon: ClockRegular,
+						...testProps('PmsManager'),
+						content: <ManagerScreen
+									title="PmEvents"
+									icon={OilCan}
+									reference="PmEventsManager"
+									fullModeComponent={<Wrapper>
+															<TreeSpecific>
+																<PmEventsFilteredGridEditor
+																	{...gridProps}
+																/>
+															</TreeSpecific>
+														</Wrapper>}
+									sideModeComponent={<Wrapper>
+															<TreeSpecific>
+																<PmEventsFilteredSideGridEditor
+																	{...gridProps}
+																/>
+															</TreeSpecific>
+														</Wrapper>}
+								/>,
+					},
+				]}
+			/>;
+}

package/src/Components/Pms/Window/BumpPmsEditorWindow.js

@@ -0,0 +1,25 @@
+import UiGlobals from '../../../UiGlobals.js';
+import Panel from '../../Panel/Panel.js';
+import useAdjustedWindowSize from '../../../Hooks/useAdjustedWindowSize.js';
+import BumpPmsEditor from '../Editor/BumpPmsEditor.js';
+
+export default function BumpPmsEditorWindow(props) {
+	const
+		styles = UiGlobals.styles,
+		[width, height] = useAdjustedWindowSize(500, 600);
+	
+	return <Panel
+				reference="BumpPmsEditorWindow"
+				isCollapsible={false}
+				model="PmEvents"
+				title={'Add "Bump" PM Event'}
+				bg="#fff"
+				{...props}
+				w={width}
+				h={height}
+				flex={null}
+			>
+				<BumpPmsEditor {...props} />
+			</Panel>;
+}
+

package/src/Components/Screens/Manager.js

@@ -18,6 +18,8 @@ function ManagerScreen(props) {
 	const {
 			title,
 			icon,
+			info,
+			_info,
 			sideModeComponent,
 			fullModeComponent,
 			onChangeMode,
@@ -88,6 +90,7 @@ function ManagerScreen(props) {
 				<ScreenHeader
 					title={title}
 					icon={icon}
+					info={info}
 					useModeIcons={true}
 					actualMode={actualMode}
 					allowSideBySide={allowSideBySide}

package/src/Components/Tree/Tree.js

@@ -401,7 +401,7 @@ function TreeComponent(props) {
 			} else {
 				// closing
 				if (datumContainsSelection(datum)) {
-					if (forceSelectionOnCollapse) {
+					if (forceSelectionOnCollapse || !allowToggleSelection) {
 						// Select the node being collapsed instead of deselecting all
 						setSelection([datum.item]);
 					} else {
@@ -1068,13 +1068,15 @@ function TreeComponent(props) {
 			return items;
 		},
 		getFooterToolbarItems = () => {
-			// Process additionalToolbarButtons to evaluate getIsButtonDisabled functions
+			// Process additionalToolbarButtons to evaluate functions
 			const processedButtons = _.map(additionalToolbarButtons, (config) => {
 				const processedConfig = { ...config };
-				// If the button has an getIsButtonDisabled function, evaluate it with current selection
 				if (_.isFunction(config.getIsButtonDisabled)) {
 					processedConfig.isDisabled = config.getIsButtonDisabled(selection);
 				}
+				if (_.isFunction(config.getText)) {
+					processedConfig.text = config.getText(selection);
+				}
 				return processedConfig;
 			});
 			return _.map(processedButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
@@ -1483,6 +1485,16 @@ function TreeComponent(props) {
 		}
 	}, [selectorId, selectorSelected]);
 
+	const
+		hasDynamicFooterToolbarItems = useMemo(() => _.some(additionalToolbarButtons, (config) => {
+			return _.isFunction(config.getIsButtonDisabled) || _.isFunction(config.getText);
+		}), [additionalToolbarButtons]),
+		memoizedFooterToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, getTreeNodeData()]),
+		headerToolbarItemComponents = showHeaderToolbar ? useMemo(() => getHeaderToolbarItems(), [Repository?.hash, treeSearchValue, getTreeNodeData()]) : null,
+		footerToolbarItemComponents = hasDynamicFooterToolbarItems
+			? getFooterToolbarItems()
+			: memoizedFooterToolbarItemComponents;
+
 	if (canUser && !canUser('view')) {
 		return <CenterBox>
 					<Unauthorized />
@@ -1510,9 +1522,6 @@ function TreeComponent(props) {
 		self.forceUpdate = forceUpdate;
 	}
 	
-	const
-		headerToolbarItemComponents = showHeaderToolbar ? useMemo(() => getHeaderToolbarItems(), [Repository?.hash, treeSearchValue, getTreeNodeData()]) : null,
-		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, getTreeNodeData()]);
 
 	if (!isReady) {
 		return <CenterBox>

package/src/Components/Viewer/PmCalcDebugViewer.js

@@ -29,6 +29,7 @@ import {
 	METER_TYPES__MILES_UNITS,
 	METER_TYPES__MILES_TEXT,
 } from '../../Constants/MeterTypes.js';
+import flatten from '../../Functions/flatten.js';
 import Button from '../Buttons/Button.js';
 import Json from '../Form/Field/Json.js';
 import Panel from '../Panel/Panel.js';
@@ -38,6 +39,7 @@ import testProps from '../../Functions/testProps.js';
 import moment from 'moment';
 import _ from 'lodash';
 
+
 export default function PmCalcDebugViewer(props) {
 
 	const {
@@ -45,34 +47,7 @@ export default function PmCalcDebugViewer(props) {
 			onClose,
 		} = props,
 		json = metersPmSchedule?.properties.meters_pm_schedules__debug_json.json,
-		flatten = (obj, prefix = '', result = {}) => {
-			for (const key in obj) {
-				if (obj.hasOwnProperty(key)) {
-					const
-						newKey = prefix ? `${prefix}.${key}` : key,
-						value = obj[key];
-					
-					if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
-						// Recursively flatten nested objects
-						flatten(value, newKey, result);
-					} else if (Array.isArray(value)) {
-						// Flatten arrays using index as key
-						value.forEach((item, index) => {
-							const arrayKey = `${newKey}.${index}`;
-							if (item !== null && typeof item === 'object') {
-								flatten(item, arrayKey, result);
-							} else {
-								result[arrayKey] = item;
-							}
-						});
-					} else {
-						// Assign primitive values and null
-						result[newKey] = value;
-					}
-				}
-			}
-			return result;
-		},
+		record = flatten(json),
 		ucfirst = (string) => {
 			return string.charAt(0).toUpperCase() + string.slice(1);
 		},
@@ -90,37 +65,85 @@ export default function PmCalcDebugViewer(props) {
 					return 'Unknown Mode';
 			}
 		},
-		flattenedJson = flatten(json),
+		formatBooleanValue = (value, record, self) => {
+			if (value === null || value === undefined) {
+				return 'N/A';
+			}
+			return value ? 'Yes' : 'No';
+		},
 		formatDaysValue = (value, record, self) => {
 			if (value === null || value === undefined) {
-				return value;
+				return 'N/A';
 			}
 			return parseInt(_.round(value), 10);
 		},
 		formatMeterValue = (value, record, self) => {
 			if (value === null || value === undefined) {
-				return value;
+				return 'N/A';
 			}
 			let ret;
 			const meterType = parseInt(record?.meter_type, 10);
+			let units = meterType === METER_TYPES__HOURS ? METER_TYPES__HOURS_UNITS : meterType === METER_TYPES__MILES ? METER_TYPES__MILES_UNITS : '';
+			if (value === 1) {
+				units = units.replace(/s$/, ''); // remove plural 's' if value is 1
+			}
 			switch(meterType) {
 				case METER_TYPES__HOURS:
-					ret = `${value} ${METER_TYPES__HOURS_UNITS}`;
+					ret = `${value} ${units}`;
 					break;
 				case METER_TYPES__MILES:
-					ret = `${value} ${METER_TYPES__MILES_UNITS}`;
+					ret = `${value} ${units}`;
 					break;
 			}
 			return ret;
 		},
 		formatDateValue = (value, record, self) => {
 			if (value === null || value === undefined) {
-				return value;
+				return 'N/A';
 			}
 
 			// convert from datetime to pretty-printed date
 			return moment(value).format(MOMENT_DATE_FORMAT_6);
 		},
+		formatStatusValue = (value, record, self) => {
+			let ret = value,
+				classNames = null;
+
+			switch(record['pm_status_id']) {
+				case PM_STATUSES__OVERDUE:
+					classNames = [
+						'text-red-500',
+						'font-bold',
+					];
+					break;
+				case PM_STATUSES__PM_DUE:
+					classNames = [
+						'text-[#c89903]',
+					];
+					break;
+				case PM_STATUSES__DELAYED:
+					classNames = [
+						'text-green-500',
+					];
+					break;
+				case PM_STATUSES__WILL_CALL:
+					classNames = [
+						'text-blue-500',
+					];
+					break;
+			}
+			if (classNames) {
+				// special formatting
+				ret = <Text
+							className={clsx(
+								classNames,
+								'px-3',
+								'py-2',
+							)}
+						>{value}</Text>;
+			}
+			return ret;
+		},
 		items = [
 			{
 				"type": "Column",
@@ -131,133 +154,138 @@ export default function PmCalcDebugViewer(props) {
 				"items": [
 					{
 						"type": "FieldSet",
-						"title": "General",
-						"reference": "general",
+						"title": "Overview",
+						"reference": "overview",
 						"defaults": {},
 						"items": [
-							{
+							record['pmSchedule.name'] && {
 								label: 'PM Schedule',
 								name: 'pmSchedule.name',
 							},
-							{
+							record['pm_status_name'] && {
 								label: 'Status',
 								name: 'pm_status_name',
+								viewerFormatter: formatStatusValue,
 							},
-							{
+							record['nextPmDate'] && {
 								label: 'Next PM Date',
 								name: 'nextPmDate',
 								viewerFormatter: formatDateValue,
 							},
-							json?.overduePms > 0 && {
-								label: 'Overdue PMs',
-								name: 'overduePms',
-							},
-						],
-					},
-					{
-						"type": "FieldSet",
-						"title": "Calculation Details",
-						"reference": "calcDetails",
-						"defaults": {},
-						"items": [
-							{
-								label: 'Controlling Method',
-								name: 'controllingMethod',
-								tooltip: 'Indicates whether the calculation was based on days or usage (meter). ' +
-										'If both methods are applicable, the one resulting in the earlier PM date is chosen.',
-							},
-							(json?.pm_status_id === PM_STATUSES__OVERDUE || json?.pm_status_id === PM_STATUSES__PM_DUE) && {
-								label: 'Grace Period End Date',
+							record['pm_status_id'] && record['pm_status_id'] === PM_STATUSES__OVERDUE && {
+								label: 'Grace Period Ends',
 								name: 'maxGracePeriodDateTime',
 								viewerFormatter: formatDateValue,
 							},
-							{
-								label: 'Last Reset Date',
-								name: 'resetDate',
-								tooltip: 'Indicates whether the calculation was based on days or usage (meter). ' +
-										'If both methods are applicable, the one resulting in the earlier PM date is chosen.',
-								viewerFormatter: formatDateValue,
-							},
-							json?.workOrder?.title && {
-								label: 'Work Order',
-								name: 'workOrder.title',
-							},
-							json?.workOrder?.service_order && {
-								label: 'Work Order',
-								name: 'workOrder.service_order',
-							},
-							{
-								label: 'Meter Accrued Since Last PM',
-								name: 'meterAccruedSinceLatestPm',
-								viewerFormatter: formatMeterValue,
-							},
-							{
-								label: 'Meter Remaining Until Next PM',
-								name: 'meterRemainingUntilNextPm',
-								viewerFormatter: formatMeterValue,
-							},
-							{
-								label: 'Days Since Last PM',
-								name: 'daysSinceLatestPm',
-								viewerFormatter: formatDaysValue,
-							},
-							{
-								label: 'Days Left Until Next PM',
-								name: 'daysLeft',
-								viewerFormatter: formatDaysValue,
+							record['pm_status_id'] && record['pm_status_id'] === PM_STATUSES__OVERDUE && {
+								label: 'Overdue by # Cycles',
+								name: 'overduePms',
 							},
-							// json?.isDelayed && {
-							// 	label: 'Is Delayed',
-							// 	name: 'isDelayed',
-							// },
-							// json?.isOverride && {
-							// 	label: 'Is Override',
-							// 	name: 'isOverride',
-							// },
-						]
+						],
 					},
-					{
+					record['calculationMode'] && {
 						"type": "FieldSet",
-						"title": "PM Schedule Config",
-						"reference": "pmSchedule",
+						"title": "How it was calculated",
+						"reference": "calcDetails",
 						"defaults": {},
 						"items": [
-							json?.pmSchedule?.interval_days && {
-								label: 'Interval Days',
-								name: 'pmSchedule.interval_days',
-							},
-							json?.pmSchedule?.interval_meter && {
-								label: 'Interval Meter',
-								name: 'pmSchedule.interval_meter',
-								viewerFormatter: formatMeterValue,
-							},
 							{
-								label: 'Mode',
-								name: 'pmScheduleMode',
+								label: 'Calculation Mode',
+								name: 'calculationMode',
 							},
-						]
-					},
-					{
-						"type": "FieldSet",
-						"title": "Equipment",
-						"reference": "equipment",
-						"defaults": {},
-						"items": [
 							{
 								label: 'In Service Date',
 								name: 'inServiceDate',
 								viewerFormatter: formatDateValue,
 							},
-							{
-								label: 'Latest Meter Reading',
-								name: 'latestMeterReading',
-								viewerFormatter: formatMeterValue,
-							},
-							{
-								label: 'Avg Daily Meter',
-								name: 'avgDailyMeter',
-								viewerFormatter: formatMeterValue,
-							},
+							...(record['isOverride'] ? [
+								// these items are only for overrides
+								{
+									label: 'Is Override',
+									name: 'isOverride',
+									viewerFormatter: formatBooleanValue,
+								},
+								{
+									label: 'Override Event Date',
+									name: 'overrideEventDate',
+									viewerFormatter: formatDateValue,
+								},
+							] : []),
+							...(!record['isOverride'] ? [
+								// these items are only for non-overrides
+								{
+									label: 'Last Reset Date',
+									name: 'resetDate',
+									viewerFormatter: formatDateValue,
+								},
+								record['workOrder.title'] && { // Gingerich
+									label: 'Work Order',
+									name: 'workOrder.title',
+								},
+								record['workOrder.service_order'] && { // MH
+									label: 'Service Order',
+									name: 'workOrder.service_order',
+								},
+								{
+									label: 'Interval Days',
+									name: 'intervalDays',
+								},
+								{
+									label: 'Days Left Until Next PM',
+									name: 'daysLeft',
+									viewerFormatter: formatDaysValue,
+								},
+								{
+									label: 'Interval Meter',
+									name: 'intervalMeter',
+									viewerFormatter: formatMeterValue,
+								},
+								typeof record['latestMeterReading.value'] !== 'undefined' && { // typeof so it allows 0
+									label: 'Latest Meter Reading',
+									name: 'latestMeterReading',
+									viewerFormatter: (value, record) => {
+										const
+											meterValue = formatMeterValue(record['latestMeterReading.value'], record),
+											meterDate = formatDateValue(record['latestMeterReading.date'], record);
+										return `${meterValue} on ${meterDate}`;
+									}
+								},
+								{
+									label: 'Meter Accrued Since Latest PM',
+									name: 'meterAccruedSinceLatestPm',
+									viewerFormatter: formatMeterValue,
+								},
+								{
+									label: 'Avg Daily Meter',
+									name: 'avgDailyMeter',
+									viewerFormatter: formatMeterValue,
+								},
+								{
+									label: 'Meter Until Next PM',
+									name: 'meterRemainingUntilNextPm',
+									viewerFormatter: formatMeterValue,
+								},
+								{
+									label: 'Controlling Method',
+									name: 'controllingMethod',
+									tooltip: 'Indicates whether the calculation was based on days or usage (meter). ' +
+											'If both methods are applicable, the one resulting in the earlier PM date is chosen.',
+								},
+							] : []),
+
+							...(record['isOverride'] ? [
+								// these items are only for delays
+								{
+									label: 'Is Delayed',
+									name: 'isDelayed',
+									viewerFormatter: formatBooleanValue,
+								},
+								{
+									label: 'Delay Threshold Date',
+									name: 'delayThresholdDate',
+									viewerFormatter: formatDateValue,
+								},
+							] : []),
 						]
 					},
 
@@ -265,7 +293,7 @@ export default function PmCalcDebugViewer(props) {
 			}
 		];
 
-	flattenedJson.pmScheduleMode = getPmScheduleMode(json?.pmSchedule.pm_schedule_mode_id);
+	record.pmScheduleMode = getPmScheduleMode(json?.pmSchedule.pm_schedule_mode_id);
 
 	return <Panel
 				title="PM Calculation Info"
@@ -282,18 +310,8 @@ export default function PmCalcDebugViewer(props) {
 						</Footer>}
 			>
 				<Viewer
-					record={flattenedJson}
+					record={record}
 					items={items}
 				/>
-				{/* <VStack className="PmCalcDebugViewer-VStack p-4">
-					
-					<Text>Equipment: {metersPmSchedule.meters__nickname}</Text>
-					<Json
-						value={metersPmSchedule.meters_pm_schedules__debug_json}
-						displaySize="expanded"
-						editable={false}
-						collapsed={2}
-					/>
-				</VStack> */}
 			</Panel>;
 }

package/src/Components/Viewer/TextWithLinks.js

@@ -49,13 +49,21 @@ function TextWithLinksElement(props) {
 				modifiedText = modifiedText.replace(link, key);
 			});
 
-			const
+			let
 				textClassName = clsx(
 					'TextWithLinks-Text',
 					'text-base',
 					'overflow-hidden',
+					styles.FORM_TEXT_CLASSNAME,
 				),
 				textSegments = modifiedText.split(/(link_\d+)/);
+			if (props.className) {
+				const 
+					classes = props.className.split(' '),
+					newClasses = _.reject(classes, (c) => c === 'overflow-auto'),
+					className = newClasses.join(' ');
+				textClassName += ' ' + className;
+			}
 			if (textSegments.length === 1) {
 				return <Text className={textClassName}>{modifiedText}</Text>;
 			}