@onehat/ui 0.4.95 → 0.4.97

package/src/Components/Viewer/TimeViewer.js

@@ -0,0 +1,25 @@
+import DisplayField from '../Form/Field/DisplayField.js';
+import clsx from 'clsx';
+import {
+	MOMENT_DATE_FORMAT_5,
+} from '../../Constants/Dates';
+
+export default function TimeViewer(props) {
+	const {
+			moment,
+		} = props;
+	if (!moment || !moment.isValid()) {
+		return null;
+	}
+	let className = clsx(
+		'flex-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <DisplayField
+				text={moment.format(MOMENT_DATE_FORMAT_5)}
+				{...props}
+				className={className}
+			/>;
+}

package/src/Components/Viewer/Viewer.js

@@ -114,6 +114,7 @@ function Viewer(props) {
 			}
 			let {
 					type,
+					viewerType,
 					title,
 					name,
 					label,
@@ -122,6 +123,7 @@ function Viewer(props) {
 					isHidden = false,
 					isHiddenInViewMode = false,
 					getDynamicProps,
+					viewerFormatter = null,
 					...itemPropsToPass
 				} = item,
 				viewerTypeProps = {};
@@ -137,7 +139,9 @@ function Viewer(props) {
 			}
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 			if (!type) {
-				if (propertyDef?.viewerType?.type) {
+				if (viewerType) {
+					type = viewerType;
+				} else if (propertyDef?.viewerType?.type) {
 					const
 						{
 							type: t,
@@ -274,6 +278,9 @@ function Viewer(props) {
 					value = record.properties[fkDisplayField].displayValue;
 				}
 			}
+			if (viewerFormatter) {
+				value = viewerFormatter(value, record, self);
+			}
 
 			let elementClassName = clsx(
 				'Viewer-field',
@@ -543,26 +550,27 @@ function Viewer(props) {
 						)}
 					>
 						{scrollToTopAnchor}
-						{canEdit && onEditMode &&
-							<Toolbar className="justify-end">
-								<HStack className="flex-1 items-center">
-									<Text className="text-[20px] ml-1 text-grey-500">View Mode</Text>
-								</HStack>
-								{(!canUser || canUser(EDIT)) &&
-									<Button
-										{...testProps('toEditBtn')}
-										key="editBtn"
-										onPress={onEditMode}
-										icon={Pencil}
-										_icon={{ 
-											size: 'sm',
-											className: 'text-white'
-										}}
-										className="text-white"
-										text="To Edit"
-										tooltip="Switch to Edit Mode"
-									/>}
-							</Toolbar>}
+
+						<Toolbar className="justify-end">
+							<HStack className="flex-1 items-center">
+								<Text className="text-[20px] ml-1 text-grey-500">View Mode</Text>
+							</HStack>
+							{onEditMode && (!canUser || canUser(EDIT)) && 
+								<Button
+									{...testProps('toEditBtn')}
+									key="editBtn"
+									onPress={onEditMode}
+									icon={Pencil}
+									_icon={{ 
+										size: 'sm',
+										className: 'text-white'
+									}}
+									className="text-white"
+									text="To Edit"
+									tooltip="Switch to Edit Mode"
+									isDisabled={!canEdit}
+								/>}
+						</Toolbar>
 						
 						{!_.isEmpty(additionalButtons) && 
 							<Toolbar className="justify-end flex-wrap gap-2">

package/src/Components/index.js

@@ -255,6 +255,8 @@ import Container from './Container/Container.js';
 import ContainerColumn from './Container/ContainerColumn.js';
 import DataMgt from './Screens/DataMgt.js';
 import Date from './Form/Field/Date.js';
+import DateViewer from './Viewer/DateViewer.js';
+import DateTimeViewer from './Viewer/DateTimeViewer.js';
 import DateRange from './Filter/DateRange.js';
 import DisplayField from './Form/Field/DisplayField.js';
 import ExpandButton from './Buttons/ExpandButton.js';
@@ -278,6 +280,8 @@ import NumberRange from './Filter/NumberRange.js';
 import Panel from './Panel/Panel.js';
 // import Picker from './Panel/Picker.js';
 import PlusMinusButton from './Buttons/PlusMinusButton.js';
+import PmCalcDebugViewer from './Viewer/PmCalcDebugViewer.js';
+import PmStatusesViewer from './Viewer/PmStatusesViewer.js';
 import RadioGroup from './Form/Field/RadioGroup/RadioGroup.js';
 // import Slider from './Form/Field/Slider.js'; // Currently, Slider is not compatible with the new React architecture. Temporarily remove it from index.js to prevent issues.
 import SquareButton from './Buttons/SquareButton.js';
@@ -286,6 +290,7 @@ import Tag from './Form/Field/Tag/Tag.js';
 import TextArea from './Form/Field/TextArea.js';
 import Text from './Form/Field/Text.js';
 import TextWithLinks from './Viewer/TextWithLinks.js';
+import TimeViewer from './Viewer/TimeViewer.js';
 import TimezonesCombo from './Form/Field/Combo/TimezonesCombo.js';
 import Toggle from './Form/Field/Toggle.js';
 import Toolbar from './Toolbar/Toolbar.js';
@@ -550,6 +555,8 @@ const components = {
 	ContainerColumn,
 	DataMgt,
 	Date,
+	DateViewer,
+	DateTimeViewer,
 	DateRange,
 	DisplayField,
 	ExpandButton,
@@ -573,6 +580,8 @@ const components = {
 	Panel,
 	// Picker,
 	PlusMinusButton,
+	PmCalcDebugViewer,
+	PmStatusesViewer,
 	RadioGroup,
 	// Slider,
 	SquareButton,
@@ -581,6 +590,7 @@ const components = {
 	Text,
 	TextArea,
 	TextWithLinks,
+	TimeViewer,
 	TimezonesCombo,
 	Toggle,
 	Toolbar,

package/src/Constants/Dates.js

@@ -18,3 +18,4 @@ export const MOMENT_DATE_FORMAT_2 = 'MMM D YYYY, h:mm:ssa'; // pretty datetime
 export const MOMENT_DATE_FORMAT_3 = 'h:mma'; // pretty time
 export const MOMENT_DATE_FORMAT_4 = 'YYYY-MM-DD';
 export const MOMENT_DATE_FORMAT_5 = 'HH:mm:ss';
+export const MOMENT_DATE_FORMAT_6 = 'MMM D, YYYY'; // pretty date

package/src/Constants/EditorModes.js

@@ -0,0 +1,2 @@
+export const EDITOR_MODE_ADD = 'EDITOR_MODE_ADD';
+export const EDITOR_MODE_EDIT = 'EDITOR_MODE_EDIT';

package/src/Constants/MeterSources.js

@@ -0,0 +1,5 @@
+export const METER_SOURCES__INITIAL_SETUP = 1;
+export const METER_SOURCES__WORK_ORDER = 2;
+export const METER_SOURCES__PM_EVENT = 3;
+export const METER_SOURCES__TELEMETRY = 4;
+export const METER_SOURCES__MANUAL_ENTRY = 5;

package/src/Constants/MeterTypes.js

@@ -1,4 +1,6 @@
 export const METER_TYPES__HOURS = 1;
+export const METER_TYPES__HOURS_UNITS = 'hrs';
+export const METER_TYPES__HOURS_TEXT = 'Time (' + METER_TYPES__HOURS_UNITS + ')';
 export const METER_TYPES__MILES = 2;
-export const METER_TYPES__HOURS_TEXT = 'Time (hrs)';
-export const METER_TYPES__MILES_TEXT = 'Distance (mi/km)';
+export const METER_TYPES__MILES_UNITS = 'mi-km';
+export const METER_TYPES__MILES_TEXT = 'Distance (' + METER_TYPES__MILES_UNITS + ')';

package/src/Constants/PmEventTypes.js

@@ -0,0 +1,11 @@
+export const PM_EVENT_TYPES__INITIAL = 1;
+export const PM_EVENT_TYPES__WORK_ORDER = 2;
+export const PM_EVENT_TYPES__ALERT = 3;
+export const PM_EVENT_TYPES__COMPLETE = 4;
+export const PM_EVENT_TYPES__RESET = 5;
+export const PM_EVENT_TYPES__DELAY_BY_DAYS = 6;
+export const PM_EVENT_TYPES__DELAY_BY_METER = 7;
+export const PM_EVENT_TYPES__SCHEDULE_PM = 8;
+export const PM_EVENT_TYPES__WILL_CALL = 9;
+export const PM_EVENT_TYPES__ASSIGN_TECHNICIAN = 10;
+export const PM_EVENT_TYPES__COMMENT = 11;

package/src/Constants/PmScheduleModes.js

@@ -0,0 +1,4 @@
+export const PM_SCHEDULE_MODES__HISTORICAL_USAGE = 1;
+export const PM_SCHEDULE_MODES__EXPECTED_USAGE = 2;
+export const PM_SCHEDULE_MODES__NO_ESTIMATION = 3;
+export const PM_SCHEDULE_MODES__WILL_CALL = 4;

package/src/Constants/PmStatuses.js

@@ -0,0 +1,7 @@
+export const PM_STATUSES__OK = 1;
+export const PM_STATUSES__PM_DUE = 2;
+export const PM_STATUSES__DELAYED = 3;
+export const PM_STATUSES__WILL_CALL = 4;
+export const PM_STATUSES__SCHEDULED = 5;
+export const PM_STATUSES__OVERDUE = 6;
+export const PM_STATUSES__COMPLETED = 7;

package/src/PlatformImports/Web/Attachments.js

@@ -819,6 +819,7 @@ function AttachmentsElement(props) {
 	}
 
 	if (self) {
+		self.repository = Attachments;
 		self.getFiles = getFiles;
 		self.setFiles = setFiles;
 		self.clearFiles = clearFiles;