Max min values

src/client/app/components/admin/PreferencesComponent.tsx

@@ -12,14 +12,15 @@ import { preferencesApi } from '../../redux/api/preferencesApi';
 import {
 	MIN_DATE, MIN_DATE_MOMENT, MAX_DATE, MAX_DATE_MOMENT, MAX_VAL, MIN_VAL, MAX_ERRORS
 } from '../../redux/selectors/adminSelectors';
-import { PreferenceRequestItem, TrueFalseType } from '../../types/items';
+import { PreferenceRequestItem } from '../../types/items';
 import { ChartTypes } from '../../types/redux/graph';
 import { LanguageTypes } from '../../types/redux/i18n';
 import { AreaUnitType } from '../../utils/getAreaUnitConversion';
 import { showErrorNotification, showSuccessNotification } from '../../utils/notifications';
 import { useTranslate } from '../../redux/componentHooks';
 import TimeZoneSelect from '../TimeZoneSelect';
 import { defaultAdminState } from '../../redux/slices/adminSlice';
+import { DisableChecksType } from '../../types/redux/units';
 
 
 /**
@@ -302,8 +303,8 @@ export default function PreferencesComponent() {
 					type='select'
 					value={localAdminPref.defaultMeterDisableChecks?.toString()}
 					onChange={e => makeLocalChanges('defaultMeterDisableChecks', e.target.value)}>
-					{Object.keys(TrueFalseType).map(key => {
-						return (<option value={key} key={key}>{translate(`TrueFalseType.${key}`)}</option>);
+					{Object.keys(DisableChecksType).map(key => {
+						return (<option value={key} key={key}>{translate(`DisableChecksType.${key}`)}</option>);
 					})}
 				</Input>
 			</div>

src/client/app/components/meters/CreateMeterModalComponent.tsx

@@ -29,6 +29,8 @@ import { useTranslate } from '../../redux/componentHooks';
 import TimeZoneSelect from '../TimeZoneSelect';
 import TooltipHelpComponent from '../TooltipHelpComponent';
 import TooltipMarkerComponent from '../TooltipMarkerComponent';
+import { selectUnitDataById } from '../../redux/api/unitsApi';
+import { DisableChecksType } from '../../types/redux/units';
 
 interface CreateMeterModalProps {
 	onCreateMeter?: (meterIdentifier: string) => void; // Define the type of the callback function
@@ -55,6 +57,7 @@ export default function CreateMeterModalComponent(props: CreateMeterModalProps):
 	const [meterDetails, setMeterDetails] = useState(defaultValues);
 	const unitIsSelected = meterDetails.unitId !== -999;
 	const defaultGaphicUnitIsSelected = meterDetails.defaultGraphicUnit !== -999;
+	const unitsDataById = useAppSelector(selectUnitDataById);
 
 	const { compatibleGraphicUnits, incompatibleGraphicUnits, compatibleUnits } = useAppSelector(state =>
 		// Type assertion due to conflicting GPS Property
@@ -92,6 +95,22 @@ export default function CreateMeterModalComponent(props: CreateMeterModalProps):
 	const handleTimeZoneChange = (timeZone: string) => {
 		setMeterDetails({ ...meterDetails, ['timeZone']: timeZone });
 	};
+
+	const handleUnitChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const selectedUnitId = Number(e.target.value);
+		const selectedUnit = unitsDataById[selectedUnitId];
+
+		if (selectedUnit) {
+			setMeterDetails(details => ({
+				...details,
+				unitId: selectedUnitId,
+				minVal: selectedUnit.minVal,
+				maxVal: selectedUnit.maxVal,
+				disableChecks: selectedUnit.disableChecks
+			}));
+		}
+	};
+
 	// Reset the state to default values
 	const resetState = () => {
 		setMeterDetails(defaultValues);
@@ -242,9 +261,7 @@ export default function CreateMeterModalComponent(props: CreateMeterModalProps):
 							</Label>
 							<Input id='unitId' name='unitId' type='select'
 								value={meterDetails.unitId}
-								onChange={e => {
-									handleNumberChange(e);
-								}}
+								onChange={handleUnitChange}
 								invalid={!unitIsSelected}>
 								<option value={-999} key={-999} hidden disabled>
 									{translate('select.unit')}
@@ -541,25 +558,25 @@ export default function CreateMeterModalComponent(props: CreateMeterModalProps):
 					<Row xs='1' lg='2'>
 						{/* minVal input */}
 						<Col><FormGroup>
-							<Label for='minVal'>{translate('meter.minVal')}</Label>
+							<Label for='minVal'>{translate('min.value')}</Label>
 							<Input id='minVal' name='minVal' type='number'
 								onChange={e => handleNumberChange(e)}
 								min={MIN_VAL}
 								max={meterDetails.maxVal}
-								defaultValue={meterDetails.minVal}
+								value={meterDetails.minVal}
 								invalid={meterDetails?.minVal < MIN_VAL || meterDetails?.minVal > meterDetails?.maxVal} />
 							<FormFeedback>
 								<FormattedMessage id="error.bounds" values={{ min: MIN_VAL, max: meterDetails.maxVal }} />
 							</FormFeedback>
 						</FormGroup></Col>
 						{/* maxVal input */}
 						<Col><FormGroup>
-							<Label for='maxVal'>{translate('meter.maxVal')}</Label>
+							<Label for='maxVal'>{translate('max.value')}</Label>
 							<Input id='maxVal' name='maxVal' type='number'
 								onChange={e => handleNumberChange(e)}
 								min={meterDetails.minVal}
 								max={MAX_VAL}
-								defaultValue={meterDetails.maxVal}
+								value={meterDetails.maxVal}
 								invalid={meterDetails?.maxVal > MAX_VAL || meterDetails?.minVal > meterDetails?.maxVal} />
 							<FormFeedback>
 								<FormattedMessage id="error.bounds" values={{ min: meterDetails.minVal, max: MAX_VAL }} />
@@ -614,17 +631,14 @@ export default function CreateMeterModalComponent(props: CreateMeterModalProps):
 							</FormFeedback>
 						</FormGroup></Col>
 						<Col><FormGroup>
-							<Label for='disableChecks'>{translate('meter.disableChecks')}</Label>
+							<Label for='disableChecks'>{translate('disable.checks')}</Label>
 							<Input id='disableChecks' name='disableChecks' type='select'
-								defaultValue={meterDetails.disableChecks?.toString()}
-								onChange={e => handleBooleanChange(e)}>
-								{
-									Object.keys(TrueFalseType).map(key =>
-										<option value={key} key={key}>
-											{translate(`TrueFalseType.${key}`)}
-										</option>
-									)
-								}
+								value={meterDetails.disableChecks}
+								onChange={e => handleStringChange(e)}>
+								{Object.keys(DisableChecksType).map(key => {
+									return (<option value={key} key={key} >
+										{translate(`DisableChecksType.${key}`)}</option>);
+								})}
 							</Input>
 						</FormGroup></Col>
 					</Row>

src/client/app/components/meters/EditMeterModalComponent.tsx

@@ -21,7 +21,7 @@ import '../../styles/modal.css';
 import { tooltipBaseStyle } from '../../styles/modalStyle';
 import { TrueFalseType } from '../../types/items';
 import { MeterData, MeterTimeSortType, MeterType } from '../../types/redux/meters';
-import { UnitRepresentType } from '../../types/redux/units';
+import { DisableChecksType, UnitRepresentType } from '../../types/redux/units';
 import { GPSPoint, isValidGPSInput } from '../../utils/calibration';
 import { AreaUnitType } from '../../utils/getAreaUnitConversion';
 import { getGPSString, nullToEmptyString } from '../../utils/input';
@@ -67,6 +67,19 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr
 
 	const [validMeter, setValidMeter] = useState(isValidMeter(localMeterEdits));
 
+	// Ensure `minVal`, `maxVal` and `disableChecks` are set based on the unit on load
+	useEffect(() => {
+		const selectedUnit = unitDataById[localMeterEdits.unitId];
+		if (selectedUnit) {
+			setLocalMeterEdits(edits => ({
+				...edits,
+				minVal: selectedUnit.minVal,
+				maxVal: selectedUnit.maxVal,
+				disableChecks: selectedUnit.disableChecks
+			}));
+		}
+	}, [localMeterEdits.unitId]);
+
 	useEffect(() => { setValidMeter(isValidMeter(localMeterEdits)); }, [localMeterEdits]);
 	/* End State */
 
@@ -76,6 +89,20 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr
 		}
 	}, [localMeterEdits.cumulative]);
 
+	const handleUnitChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const selectedUnitId = Number(e.target.value);
+		const selectedUnit = unitDataById[selectedUnitId];
+		if (selectedUnit) {
+			setLocalMeterEdits({
+				...localMeterEdits,
+				unitId: selectedUnitId,
+				minVal: selectedUnit.minVal,
+				maxVal: selectedUnit.maxVal,
+				disableChecks: selectedUnit.disableChecks
+			});
+		}
+	};
+
 	// Save changes
 	// Currently using the old functionality which is to compare inherited prop values to state values
 	// If there is a difference between props and state, then a change was made
@@ -279,7 +306,7 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr
 								name='unitId'
 								type='select'
 								value={localMeterEdits.unitId}
-								onChange={e => handleNumberChange(e)}>
+								onChange={handleUnitChange}>
 								{Array.from(compatibleUnits).map(unit => {
 									return (<option value={unit.id} key={unit.id}>{unit.identifier}</option>);
 								})}
@@ -599,7 +626,7 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr
 					<Row xs='1' lg='2'>
 						{/* minVal input */}
 						<Col><FormGroup>
-							<Label for='minVal'>{translate('meter.minVal')}</Label>
+							<Label for='minVal'>{translate('min.value')}</Label>
 							<Input
 								id='minVal'
 								name='minVal'
@@ -615,7 +642,7 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr
 						</FormGroup></Col>
 						{/* maxVal input */}
 						<Col><FormGroup>
-							<Label for='maxVal'>{translate('meter.maxVal')}</Label>
+							<Label for='maxVal'>{translate('max.value')}</Label>
 							<Input
 								id='maxVal'
 								name='maxVal'
@@ -687,16 +714,16 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr
 						</FormGroup></Col>
 						{/* DisableChecks input */}
 						<Col><FormGroup>
-							<Label for='disableChecks'>{translate('meter.disableChecks')}</Label>
+							<Label for='disableChecks'>{translate('disable.checks')}</Label>
 							<Input
 								id='disableChecks'
 								name='disableChecks'
 								type='select'
-								value={localMeterEdits?.disableChecks?.toString()}
-								onChange={e => handleBooleanChange(e)}
-								invalid={localMeterEdits?.disableChecks && localMeterEdits.unitId === -99}>
-								{Object.keys(TrueFalseType).map(key => {
-									return (<option value={key} key={key}>{translate(`TrueFalseType.${key}`)}</option>);
+								value={localMeterEdits.disableChecks}
+								onChange={e => handleStringChange(e)}>
+								{Object.keys(DisableChecksType).map(key => {
+									return (<option value={key} key={key} >
+										{translate(`DisableChecksType.${key}`)}</option>);
 								})}
 							</Input>
 						</FormGroup></Col>

src/client/app/components/unit/CreateUnitModalComponent.tsx

@@ -10,11 +10,12 @@ import '../../styles/modal.css';
 import { TrueFalseType } from '../../types/items';
 import TooltipMarkerComponent from '../TooltipMarkerComponent';
 import TooltipHelpComponent from '../../components/TooltipHelpComponent';
-import { UnitRepresentType, DisplayableType, UnitType } from '../../types/redux/units';
+import { UnitRepresentType, DisplayableType, UnitType, DisableChecksType } from '../../types/redux/units';
 import { tooltipBaseStyle } from '../../styles/modalStyle';
 import { unitsApi } from '../../redux/api/unitsApi';
 import { useTranslate } from '../../redux/componentHooks';
 import { showSuccessNotification, showErrorNotification } from '../../utils/notifications';
+import { MAX_VAL, MIN_VAL } from '../../redux/selectors/adminSelectors';
 import { LineGraphRates } from '../../types/redux/graph';
 import { customRateValid, isCustomRate } from '../../utils/unitInput';
 
@@ -41,7 +42,10 @@ export default function CreateUnitModalComponent() {
 		// The client code makes the id for the selected unit and default graphic unit be -99
 		// so it can tell it is not yet assigned and do the correct logic for that case.
 		// The units API expects these values to be undefined on call so that the database can assign their values.
-		id: -99
+		id: -99,
+		minVal: MIN_VAL,
+		maxVal: MAX_VAL,
+		disableChecks: DisableChecksType.reject_none
 	};
 
 	/* State */
@@ -72,6 +76,10 @@ export default function CreateUnitModalComponent() {
 		setState({ ...state, [e.target.name]: JSON.parse(e.target.value) });
 	};
 
+	const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setState({ ...state, [e.target.name]: Number(e.target.value) });
+	};
+
 	/**
 	 * Updates the rate (both custom and regular state) including setting if custom.
 	 * @param newRate The new rate to set.
@@ -125,13 +133,15 @@ export default function CreateUnitModalComponent() {
 
 	// Keeps canSave state up to date. Checks if valid and if edit made.
 	useEffect(() => {
+
 		// This checks:
 		// - Name cannot be blank
 		// - If type of unit is suffix there must be a suffix
 		// - The rate is set so not the custom input value. This happens if select custom value but don't input with enter.
 		// - The custom rate is a positive integer
 		const validUnit = state.name !== '' &&
 			(state.typeOfUnit !== UnitType.suffix || state.suffix !== '') && state.secInRate !== Number(CUSTOM_INPUT)
+			&& (state?.minVal < MIN_VAL || state?.minVal > state?.maxVal)
 			&& customRateValid(Number(state.secInRate));
 		setCanSave(validUnit);
 	}, [state]);
@@ -423,19 +433,59 @@ export default function CreateUnitModalComponent() {
 								</FormGroup>
 							</Col>
 						</Row>
+						<Row xs='1' lg='2'>
+							{/* minVal input */}
+							<Col><FormGroup>
+								<Label for='minVal'>{translate('min.val')}</Label>
+								<Input id='minVal' name='minVal' type='number'
+									onChange={e => handleNumberChange(e)}
+									min={MIN_VAL}
+									max={state.maxVal}
+									defaultValue={state.minVal}
+									invalid={state?.minVal < MIN_VAL || state?.minVal > state?.maxVal} />
+								<FormFeedback>
+									<FormattedMessage id="error.bounds" values={{ min: MIN_VAL, max: state.maxVal }} />
+								</FormFeedback>
+							</FormGroup></Col>
+							{/* maxVal input */}
+							<Col><FormGroup>
+								<Label for='maxVal'>{translate('max.value')}</Label>
+								<Input id='maxVal' name='maxVal' type='number'
+									onChange={e => handleNumberChange(e)}
+									min={state.minVal}
+									max={MAX_VAL}
+									defaultValue={state.maxVal}
+									invalid={state?.maxVal > MAX_VAL || state?.minVal > state?.maxVal} />
+								<FormFeedback>
+									<FormattedMessage id="error.bounds" values={{ min: state.minVal, max: MAX_VAL }} />
+								</FormFeedback>
+							</FormGroup></Col>
+						</Row>
+						<Row xs='1' lg='2'>
+							{/* DisableChecks input */}
+							<Col><FormGroup>
+								<Label for='disableChecks'>{translate('disable.checks')}</Label>
+								<Input id='disableChecks' name='disableChecks' type='select'
+									onChange={e => handleStringChange(e)}
+									defaultValue={state.disableChecks}>
+									{Object.keys(DisableChecksType).map(key => {
+										return (<option value={key} key={key} >
+											{translate(`DisableChecksType.${key}`)}</option>);
+									})}
+								</Input>
+							</FormGroup></Col>
+						</Row>
 						{/* Note input */}
 						<FormGroup>
-							<Label for="note">{translate('note')}</Label>
+							<Label for='note'>{translate('note')}</Label>
 							<Input
-								id="note"
-								name="note"
-								type="textarea"
-								value={state.note}
+								id='note'
+								name='note'
+								type='textarea'
 								onChange={e => handleStringChange(e)}
-							/>
+								value={state.note} />
 						</FormGroup>
-					</Container>
-				</ModalBody>
+					</Container></ModalBody>
 				<ModalFooter>
 					{/* Hides the modal */}
 					<Button color="secondary" onClick={handleClose}>