@onehat/ui 0.4.101 → 0.4.103

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>;
 			}

package/src/Components/Viewer/Viewer.js

@@ -278,39 +278,47 @@ function Viewer(props) {
 					value = record.properties[fkDisplayField].displayValue;
 				}
 			}
+			let element = null,
+				viewerFormatterReturnedReactComponent = false;
 			if (viewerFormatter) {
-				value = viewerFormatter(value, record, self);
-			}
-
-			let elementClassName = clsx(
-				'Viewer-field',
-				'basis-auto',
-				'grow',
-				'shrink',
-			);
-			const defaultsClassName = defaults.className;
-			if (defaultsClassName) {
-				elementClassName += ' ' + defaultsClassName;
-			}
-			const itemPropsToPassClassName = itemPropsToPass.className;
-			if (itemPropsToPassClassName) {
-				elementClassName += ' ' + itemPropsToPassClassName;
+				value = viewerFormatter(value, record, self); // viewerFormatter can return either a primitive value or a React component.
+				if (isValidElement(value)) {
+					// if it's a React component, render it directly
+					element = value;
+					viewerFormatterReturnedReactComponent = true;
+				}
 			}
-			const viewerTypeClassName = viewerTypeProps.className;
-			if (viewerTypeClassName) {
-				elementClassName += ' ' + viewerTypeClassName;
+			if (!viewerFormatterReturnedReactComponent) {
+				let elementClassName = clsx(
+					'Viewer-field',
+					'basis-auto',
+					'grow',
+					'shrink',
+				);
+				const defaultsClassName = defaults.className;
+				if (defaultsClassName) {
+					elementClassName += ' ' + defaultsClassName;
+				}
+				const itemPropsToPassClassName = itemPropsToPass.className;
+				if (itemPropsToPassClassName) {
+					elementClassName += ' ' + itemPropsToPassClassName;
+				}
+				const viewerTypeClassName = viewerTypeProps.className;
+				if (viewerTypeClassName) {
+					elementClassName += ' ' + viewerTypeClassName;
+				}
+				
+				element = <Element
+									{...testProps('field-' + name)}
+									value={value}
+									isEditable={false}
+									parent={self}
+									reference={name}
+									{...itemPropsToPass}
+									{...viewerTypeProps}
+									className={elementClassName}
+								/>;
 			}
-			
-			let element = <Element
-								{...testProps('field-' + name)}
-								value={value}
-								isEditable={false}
-								parent={self}
-								reference={name}
-								{...itemPropsToPass}
-								{...viewerTypeProps}
-								className={elementClassName}
-							/>;
 
 			if (item.additionalViewButtons) {
 				element = <HStack className="Viewer-HStack1 flex-wrap">

package/src/Functions/flatten.js

@@ -0,0 +1,39 @@
+// This function takes a nested JSON object and flattens it into a single-level object with dot notation keys.
+// For example, { a: { b: 1 } } becomes { 'a.b': 1 }
+// or { a: [ { b: 1 }, { c: 2 } ] } becomes { 'a.0.b': 1, 'a.1.c': 2 }
+function isPlainObject(value) {
+	if (value === null || typeof value !== 'object') {
+		return false;
+	}
+
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+}
+
+export default function flatten(obj, prefix = '', result = {}) {
+	if (obj === null || typeof obj !== 'object') {
+		return result;
+	}
+
+	for (const key of Object.keys(obj)) {
+		const
+			newKey = prefix ? `${prefix}.${key}` : key,
+			value = obj[key];
+
+		if (isPlainObject(value)) {
+			flatten(value, newKey, result);
+		} else if (Array.isArray(value)) {
+			value.forEach((item, index) => {
+				const arrayKey = `${newKey}.${index}`;
+				if (isPlainObject(item) || Array.isArray(item)) {
+					flatten(item, arrayKey, result);
+				} else {
+					result[arrayKey] = item;
+				}
+			});
+		} else {
+			result[newKey] = value;
+		}
+	}
+	return result;
+}

package/src/Functions/verifyCanCrudPmEvents.js

@@ -0,0 +1,33 @@
+import {
+	PM_EVENT_TYPES__COMPLETE,
+	PM_EVENT_TYPES__RESET,
+	PM_EVENT_TYPES__DELAY_BY_DAYS,
+	PM_EVENT_TYPES__DELAY_BY_METER,
+	PM_EVENT_TYPES__SCHEDULE_PM,
+	PM_EVENT_TYPES__WILL_CALL,
+	PM_EVENT_TYPES__ASSIGN_TECHNICIAN,
+	PM_EVENT_TYPES__COMMENT,
+} from '../Constants/PmEventTypes.js';
+import inArray from './inArray.js';
+import _ from 'lodash';
+
+export default function verifyCanCrudPmEvents(selection) {
+	let canCrud = true;
+	_.each(selection, (entity) => {
+		if (!inArray(entity.pm_events__pm_event_type_id, [
+				// manual types
+				PM_EVENT_TYPES__COMPLETE,
+				PM_EVENT_TYPES__RESET,
+				PM_EVENT_TYPES__DELAY_BY_DAYS,
+				PM_EVENT_TYPES__DELAY_BY_METER,
+				PM_EVENT_TYPES__SCHEDULE_PM,
+				PM_EVENT_TYPES__WILL_CALL,
+				PM_EVENT_TYPES__ASSIGN_TECHNICIAN,
+				PM_EVENT_TYPES__COMMENT,
+			])) {
+			canCrud = false;
+			return false;
+		}
+	});
+	return canCrud;
+};