Max min values

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

@@ -10,9 +10,9 @@ import { Button, Input, FormFeedback } from 'reactstrap';
 import { UnsavedWarningComponent } from '../UnsavedWarningComponent';
 import { preferencesApi } from '../../redux/api/preferencesApi';
 import {
-	MIN_DATE, MIN_DATE_MOMENT, MAX_DATE, MAX_DATE_MOMENT, MAX_VAL, MIN_VAL, MAX_ERRORS
+	MIN_DATE, MIN_DATE_MOMENT, MAX_DATE, MAX_DATE_MOMENT, 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';
@@ -53,16 +53,6 @@ export default function PreferencesComponent() {
 			const frequency = moment.duration(localAdminPref.defaultMeterReadingFrequency);
 			return !frequency.isValid() || frequency.asSeconds() <= 0;
 		},
-		minValue: (): boolean => {
-			const min = Number(localAdminPref.defaultMeterMinimumValue);
-			const max = Number(localAdminPref.defaultMeterMaximumValue);
-			return min < MIN_VAL || min > max;
-		},
-		maxValue: (): boolean => {
-			const min = Number(localAdminPref.defaultMeterMinimumValue);
-			const max = Number(localAdminPref.defaultMeterMaximumValue);
-			return max > MAX_VAL || min > max;
-		},
 		minDate: (): boolean => {
 			const minMoment = moment(localAdminPref.defaultMeterMinimumDate);
 			const maxMoment = moment(localAdminPref.defaultMeterMaximumDate);
@@ -197,40 +187,6 @@ export default function PreferencesComponent() {
 					<FormattedMessage id="invalid.input" ></FormattedMessage>
 				</FormFeedback>
 			</div>
-			<div>
-				<p className='mt-2' style={titleStyle}>
-					{`${translate('default.meter.minimum.value')}:`}
-				</p>
-				<Input
-					type='number'
-					value={localAdminPref.defaultMeterMinimumValue}
-					onChange={e => makeLocalChanges('defaultMeterMinimumValue', e.target.value)}
-					min={MIN_VAL}
-					max={Number(localAdminPref.defaultMeterMaximumValue)}
-					maxLength={50}
-					invalid={invalidFuncs.minValue()}
-				/>
-				<FormFeedback>
-					<FormattedMessage id="error.bounds" values={{ min: MIN_VAL, max: Number(localAdminPref.defaultMeterMaximumValue) }} />
-				</FormFeedback>
-			</div>
-			<div>
-				<p className='mt-2' style={titleStyle}>
-					{`${translate('default.meter.maximum.value')}:`}
-				</p>
-				<Input
-					type='number'
-					value={localAdminPref.defaultMeterMaximumValue}
-					onChange={e => makeLocalChanges('defaultMeterMaximumValue', e.target.value)}
-					min={Number(localAdminPref.defaultMeterMinimumValue)}
-					max={MAX_VAL}
-					maxLength={50}
-					invalid={invalidFuncs.maxValue()}
-				/>
-				<FormFeedback>
-					<FormattedMessage id="error.bounds" values={{ min: Number(localAdminPref.defaultMeterMinimumValue), max: MAX_VAL }} />
-				</FormFeedback>
-			</div>
 			<div>
 				<p className='mt-2' style={titleStyle}>
 					{`${translate('default.meter.minimum.date')}:`}
@@ -294,19 +250,6 @@ export default function PreferencesComponent() {
 					<FormattedMessage id="error.bounds" values={{ min: 0, max: MAX_ERRORS }} />
 				</FormFeedback>
 			</div>
-			<div>
-				<p className='mt-2' style={titleStyle}>
-					{`${translate('default.meter.disable.checks')}:`}
-				</p>
-				<Input
-					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>);
-					})}
-				</Input>
-			</div>
 			<div>
 				<h3 className='border-bottom mt-3'>{translate('site.settings')}</h3>
 				<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
@@ -52,9 +54,10 @@ export default function CreateMeterModalComponent(props: CreateMeterModalProps):
 	const [showModal, setShowModal] = useState(false);
 
 	// Handlers for each type of input change
-	const [meterDetails, setMeterDetails] = useState(defaultValues);
+	const [meterDetails, setMeterDetails] = useState({...defaultValues, minVal: MIN_VAL, maxVal: MAX_VAL, disableChecks: DisableChecksType.reject_all});
 	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,9 +95,25 @@ 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);
+		setMeterDetails({...defaultValues, minVal: MIN_VAL, maxVal: MAX_VAL, disableChecks: DisableChecksType.reject_all});
 	};
 
 	const handleClose = () => {
@@ -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,17 @@ 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
+			});
+		}
+	};
+
 	// 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 +303,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 +623,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 +639,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 +711,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>