@onehat/ui 0.4.101 → 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/Screens/ReportsManager.js

@@ -8,44 +8,63 @@ import {
 import clsx from 'clsx';
 import ChartPie from '../Icons/ChartPie.js';
 import ScreenHeader from '../Layout/ScreenHeader.js';
+import TabBar from '../Tab/TabBar.js';
+import _ from 'lodash';
 
 const CONTAINER_THRESHOLD = 1100;
 
 export default function ReportsManager(props) {
 	const {
 			reports = [],
+			reportTabs,
+			initialReportTabIx = 0,
+			id,
+			self,
 			isActive = false,
 		} = props,
 		[containerWidth, setContainerWidth] = useState(),
 		onLayout = (e) => {
 			setContainerWidth(e.nativeEvent.layout.width);
+		},
+		renderReportLayout = (reportsToRender = []) => {
+			if (!containerWidth) {
+				return null;
+			}
+
+			if (containerWidth >= CONTAINER_THRESHOLD) {
+				const
+					reportsPerColumn = Math.ceil(reportsToRender.length / 2),
+					col1Reports = reportsToRender.slice(0, reportsPerColumn),
+					col2Reports = reportsToRender.slice(reportsPerColumn);
+				return <HStack className="gap-3">
+							<VStack className="flex-1">
+								{col1Reports}
+							</VStack>
+							<VStack className="flex-1">
+								{col2Reports}
+							</VStack>
+						</HStack>;
+			}
+
+			return reportsToRender;
 		};
 
 	if (!isActive) {
 		return null;
 	}
 
-	let reportElements = [];
-	if (containerWidth) {
-		if (containerWidth >= CONTAINER_THRESHOLD) {
-			// two column layout
-			const
-				reportsPerColumn = Math.ceil(reports.length / 2),
-				col1Reports = reports.slice(0, reportsPerColumn),
-				col2Reports = reports.slice(reportsPerColumn);
-			reportElements = <HStack className="gap-3">
-								<VStack className="flex-1">
-									{col1Reports}
-								</VStack>
-								<VStack className="flex-1">
-									{col2Reports}
-								</VStack>
-							</HStack>;
-		} else {
-			// one column layout
-			reportElements = reports;
-		}
-	}
+	const
+		hasReportTabs = _.isArray(reportTabs) && reportTabs.length > 0,
+		tabBarId = `${id || self?.path || 'ReportsManager'}-reportTabs`,
+		reportElements = renderReportLayout(reports),
+		tabBarTabs = hasReportTabs ? _.map(reportTabs, (tab, ix) => ({
+			...tab,
+			content: <ScrollView className="flex-1 w-full" key={`reportTabContent-${ix}`}>
+							<VStackNative className="w-full p-4" onLayout={onLayout}>
+								{renderReportLayout(tab.reports || [])}
+							</VStackNative>
+						</ScrollView>,
+		})) : [];
 	
 	return <VStack
 				className="overflow-hidden flex-1 w-full"
@@ -54,10 +73,16 @@ export default function ReportsManager(props) {
 					title="Reports"
 					icon={ChartPie}
 				/>
-				<ScrollView className="flex-1 w-full">
-					<VStackNative className="w-full p-4" onLayout={onLayout}>
-						{containerWidth && reportElements}
-					</VStackNative>
-				</ScrollView>
+				{hasReportTabs ?
+					<TabBar
+						id={tabBarId}
+						initialTabIx={initialReportTabIx}
+						tabs={tabBarTabs}
+					/> :
+					<ScrollView className="flex-1 w-full">
+						<VStackNative className="w-full p-4" onLayout={onLayout}>
+							{containerWidth && reportElements}
+						</VStackNative>
+					</ScrollView>}
 			</VStack>;
 }

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>