cbaoth/med-plan-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update settings add min<=max validation to ranges, minor text changes

Browse Source
This commit is contained in:
Andreas Weyer
2026-02-02 13:17:35 +00:00
parent 90b0806cec
commit 02b1209c2d
4 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/settings.tsx
View File

@@ -134,6 +134,10 @@ const Settings = ({
// Track which tooltip is currently open (for mobile touch interaction)
const [openTooltipId, setOpenTooltipId] = React.useState<string | null>(null);
// Validation state for range inputs
const [therapeuticRangeError, setTherapeuticRangeError] = React.useState<string>('');
const [yAxisRangeError, setYAxisRangeError] = React.useState<string>('');
// Track window width for responsive tooltip positioning
const [isNarrowScreen, setIsNarrowScreen] = React.useState(
typeof window !== 'undefined' ? window.innerWidth < 640 : false
@@ -226,6 +230,27 @@ const Settings = ({
// Create defaults object for translation interpolation
const defaultsForT = getDefaultsForTranslation(pkParams, therapeuticRange, uiSettings);
// Validate range inputs
React.useEffect(() => {
// Therapeutic range validation (blocking error)
const minTherapeutic = parseFloat(therapeuticRange.min);
const maxTherapeutic = parseFloat(therapeuticRange.max);
if (!isNaN(minTherapeutic) && !isNaN(maxTherapeutic) && minTherapeutic >= maxTherapeutic) {
setTherapeuticRangeError(t('errorTherapeuticRangeInvalid'));
} else {
setTherapeuticRangeError('');
}
// Y-axis range validation (non-blocking warning)
const minYAxis = parseFloat(yAxisMin);
const maxYAxis = parseFloat(yAxisMax);
if (!isNaN(minYAxis) && !isNaN(maxYAxis) && minYAxis >= maxYAxis) {
setYAxisRangeError(t('errorYAxisRangeInvalid'));
} else {
setYAxisRangeError('');
}
}, [therapeuticRange.min, therapeuticRange.max, yAxisMin, yAxisMax, t]);
// Helper to update nested advanced settings
const updateAdvanced = (category: string, key: string, value: any) => {
onUpdatePkParams('advanced', {
@@ -380,7 +405,8 @@ const Settings = ({
min={0}
placeholder={t('min')}
required={true}
errorMessage={t('errorTherapeuticRangeMinRequired') || 'Minimum therapeutic range is required'}
error={!!therapeuticRangeError || !therapeuticRange.min}
errorMessage={therapeuticRangeError || t('errorTherapeuticRangeMinRequired') || 'Minimum therapeutic range is required'}
/>
<span className="text-muted-foreground">-</span>
<FormNumericInput
@@ -391,7 +417,8 @@ const Settings = ({
placeholder={t('max')}
unit="ng/ml"
required={true}
errorMessage={t('errorTherapeuticRangeMaxRequired') || 'Maximum therapeutic range is required'}
error={!!therapeuticRangeError || !therapeuticRange.max}
errorMessage={therapeuticRangeError || t('errorTherapeuticRangeMaxRequired') || 'Maximum therapeutic range is required'}
/>
</div>
</div>
@@ -461,6 +488,8 @@ const Settings = ({
placeholder={t('auto')}
allowEmpty={true}
clearButton={true}
warning={!!yAxisRangeError}
warningMessage={yAxisRangeError}
/>
<span className="text-muted-foreground">-</span>
<FormNumericInput
@@ -472,6 +501,8 @@ const Settings = ({
unit="ng/ml"
allowEmpty={true}
clearButton={true}
warning={!!yAxisRangeError}
warningMessage={yAxisRangeError}
/>
</div>
</div>