Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added warnings to admin preferences component #1393

Merged
merged 6 commits into from
Dec 10, 2024
Merged

Added warnings to admin preferences component #1393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
991eb27
Added warnings to admin preferences component
hinyan17 Nov 26, 2024
e517ebb
Modified invalid data functions and added FormFeedbacks
hinyan17 Dec 2, 2024
3eb6d94
Fixed small issues with FormFeedback and min/max bounds, added final …
hinyan17 Dec 10, 2024
11a2adf
added invalid.input key to data.ts and adjusted defaultFileSizeLimit min
hinyan17 Dec 10, 2024
580a3df
Reformatted invalid data functions
hinyan17 Dec 10, 2024
3f768e6
minor fixes
huss Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 99 additions & 3 deletions src/client/app/components/admin/PreferencesComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,15 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

import { cloneDeep, isEqual } from 'lodash';
import * as moment from 'moment';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { Button, Input } from 'reactstrap';
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
} from '../../redux/selectors/adminSelectors';
import { PreferenceRequestItem, TrueFalseType } from '../../types/items';
import { ChartTypes } from '../../types/redux/graph';
import { LanguageTypes } from '../../types/redux/i18n';
Expand All @@ -18,7 +22,6 @@ import TimeZoneSelect from '../TimeZoneSelect';
import { defaultAdminState } from '../../redux/slices/adminSlice';


// TODO: Add warning for invalid data
/**
* @returns Preferences Component for Administrative use
*/
Expand All @@ -43,6 +46,51 @@ export default function PreferencesComponent() {
setLocalAdminPref(cloneDeep(adminPreferences));
};

// Functions for input validation and warnings. Each returns true if the user inputs invalid data into its field
// Need to be functions due to static reference. If they were booleans they wouldn't update when localAdminPref updates
const invalidFuncs = {
readingFreq: (): boolean => {
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);
return !minMoment.isValid() || !minMoment.isSameOrAfter(MIN_DATE_MOMENT) || !minMoment.isSameOrBefore(maxMoment);
},
maxDate: (): boolean => {
const minMoment = moment(localAdminPref.defaultMeterMinimumDate);
const maxMoment = moment(localAdminPref.defaultMeterMaximumDate);
return !maxMoment.isValid() || !maxMoment.isSameOrBefore(MAX_DATE_MOMENT) || !maxMoment.isSameOrAfter(minMoment);
},
readingGap: (): boolean => { return Number(localAdminPref.defaultMeterReadingGap) < 0; },

meterErrors: (): boolean => {
return Number(localAdminPref.defaultMeterMaximumErrors) < 0
|| Number(localAdminPref.defaultMeterMaximumErrors) > MAX_ERRORS;
},

warningFileSize: (): boolean => {
return Number(localAdminPref.defaultWarningFileSize) < 0
|| Number(localAdminPref.defaultWarningFileSize) > Number(localAdminPref.defaultFileSizeLimit);
},

fileSizeLimit: (): boolean => {
return Number(localAdminPref.defaultFileSizeLimit) < 0
|| Number(localAdminPref.defaultWarningFileSize) > Number(localAdminPref.defaultFileSizeLimit);
}
};

return (
<div className='d-flex flex-column '>
<UnsavedWarningComponent
Expand Down Expand Up @@ -143,7 +191,11 @@ export default function PreferencesComponent() {
type='text'
value={localAdminPref.defaultMeterReadingFrequency}
onChange={e => makeLocalChanges('defaultMeterReadingFrequency', e.target.value)}
invalid={invalidFuncs.readingFreq()}
/>
<FormFeedback>
<FormattedMessage id="invalid.input" ></FormattedMessage>
</FormFeedback>
</div>
<div>
<p className='mt-2' style={titleStyle}>
Expand All @@ -153,8 +205,14 @@ export default function PreferencesComponent() {
type='number'
value={localAdminPref.defaultMeterMinimumValue}
onChange={e => makeLocalChanges('defaultMeterMinimumValue', e.target.value)}
min={MIN_VAL}
max={Number(localAdminPref.defaultMeterMaximumValue)}
maxLength={50}
hinyan17 marked this conversation as resolved.
Show resolved Hide resolved
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}>
Expand All @@ -164,8 +222,14 @@ export default function PreferencesComponent() {
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}>
Expand All @@ -176,7 +240,11 @@ export default function PreferencesComponent() {
value={localAdminPref.defaultMeterMinimumDate}
onChange={e => makeLocalChanges('defaultMeterMinimumDate', e.target.value)}
placeholder='YYYY-MM-DD HH:MM:SS'
invalid={invalidFuncs.minDate()}
/>
<FormFeedback>
<FormattedMessage id="error.bounds" values={{ min: MIN_DATE, max: moment(localAdminPref.defaultMeterMaximumDate).utc().format() }} />
</FormFeedback>
</div>
<div>
<p className='mt-2' style={titleStyle}>
Expand All @@ -187,7 +255,11 @@ export default function PreferencesComponent() {
value={localAdminPref.defaultMeterMaximumDate}
onChange={e => makeLocalChanges('defaultMeterMaximumDate', e.target.value)}
placeholder='YYYY-MM-DD HH:MM:SS'
invalid={invalidFuncs.maxDate()}
/>
<FormFeedback>
<FormattedMessage id="error.bounds" values={{ min: moment(localAdminPref.defaultMeterMinimumDate).utc().format(), max: MAX_DATE }} />
</FormFeedback>
</div>
<div>
<p className='mt-2' style={titleStyle}>
Expand All @@ -197,8 +269,13 @@ export default function PreferencesComponent() {
type='number'
value={localAdminPref.defaultMeterReadingGap}
onChange={e => makeLocalChanges('defaultMeterReadingGap', e.target.value)}
min='0'
maxLength={50}
invalid={invalidFuncs.readingGap()}
/>
<FormFeedback>
<FormattedMessage id="error.bounds" values={{ min: 0, max: Infinity }} />
</FormFeedback>
</div>
<div>
<p className='mt-2' style={titleStyle}>
Expand All @@ -208,8 +285,14 @@ export default function PreferencesComponent() {
type='number'
value={localAdminPref.defaultMeterMaximumErrors}
onChange={e => makeLocalChanges('defaultMeterMaximumErrors', e.target.value)}
min='0'
max={MAX_ERRORS}
maxLength={50}
invalid={invalidFuncs.meterErrors()}
/>
<FormFeedback>
<FormattedMessage id="error.bounds" values={{ min: 0, max: MAX_ERRORS }} />
</FormFeedback>
</div>
<div>
<p className='mt-2' style={titleStyle}>
Expand Down Expand Up @@ -297,8 +380,14 @@ export default function PreferencesComponent() {
type='number'
value={localAdminPref.defaultWarningFileSize}
onChange={e => makeLocalChanges('defaultWarningFileSize', e.target.value)}
min='0'
max={Number(localAdminPref.defaultFileSizeLimit)}
maxLength={50}
invalid={invalidFuncs.warningFileSize()}
/>
<FormFeedback>
<FormattedMessage id="error.bounds" values={{ min: 0, max: Number(localAdminPref.defaultFileSizeLimit) }} />
</FormFeedback>
</div>
<div>
<p className='mt-2' style={titleStyle}>
Expand All @@ -308,8 +397,13 @@ export default function PreferencesComponent() {
type='number'
value={localAdminPref.defaultFileSizeLimit}
onChange={e => makeLocalChanges('defaultFileSizeLimit', e.target.value)}
min={Number(localAdminPref.defaultWarningFileSize)}
maxLength={50}
invalid={invalidFuncs.fileSizeLimit()}
/>
<FormFeedback>
<FormattedMessage id="error.bounds" values={{ min: Number(localAdminPref.defaultWarningFileSize), max: Infinity }} />
</FormFeedback>
</div>
<div>
<p className='mt-2' style={titleStyle}>
Expand All @@ -327,6 +421,7 @@ export default function PreferencesComponent() {
onClick={discardChanges}
disabled={!hasChanges}
style={{ marginRight: '20px' }}
color='secondary'
>
{translate('discard.changes')}
</Button>
Expand All @@ -342,7 +437,8 @@ export default function PreferencesComponent() {
showErrorNotification(translate('failed.to.submit.changes'));
})
}
disabled={!hasChanges}
disabled={!hasChanges || Object.values(invalidFuncs).some(check => check())}
color='primary'
>
{translate('submit')}
</Button>
Expand Down
3 changes: 3 additions & 0 deletions src/client/app/translations/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,7 @@ const LocaleTranslationData = {
"input.gps.coords.second": "in this format -> latitude,longitude",
"input.gps.range": "Invalid GPS coordinate, latitude must be an integer between -90 and 90, longitude must be an integer between -180 and 180. You input: ",
"insufficient.readings": "Insufficient readings data to process comparison for ",
"invalid.input": "Invalid input",
"invalid.number": "Please submit a valid number (between 0 and 2.0)",
"invalid.token.login": "Token has expired. Please log in again.",
"invalid.token.login.admin": "Token has expired. Please log in again to view this page.",
Expand Down Expand Up @@ -810,6 +811,7 @@ const LocaleTranslationData = {
"input.gps.coords.second": "in this format -> latitude,longitude\u{26A1}",
"input.gps.range": "Coordonnée GPS invalide, la latitude doit être un nombre entier entre -90 et 90, la longitude doit être un nombre entier entre -180 et 180. You input: \u{26A1}",
"insufficient.readings": "Données de lectures insuffisantes pour la comparaison de processus pour ",
"invalid.input": "Invalid input\u{26A1}",
"invalid.number": "Please submit a valid number (between 0 and 2.0)\u{26A1}",
"invalid.token.login": "Le jeton a expiré. Connectez-vous à nouveau.",
"invalid.token.login.admin": "Le jeton a expiré. Please log in again to view this page.\u{26A1}",
Expand Down Expand Up @@ -1344,6 +1346,7 @@ const LocaleTranslationData = {
"input.gps.coords.second": "de esta forma -> latitud, longitud",
"input.gps.range": "Coordenada GPS no válida, la latitud debe ser un número entero entre -90 y 90, la longitud debe ser un número entero entre -180 y 180. Usted puso: ",
"insufficient.readings": "Hay insuficientes datos de lecturas para procesar la comparación de ",
"invalid.input": "Invalid input\u{26A1}",
"invalid.number": "Por favor indique un número válido (entre 0 a 2.0)",
"invalid.token.login": "El token se ha vencido. Inicie la sesión nuevamente",
"invalid.token.login.admin": "El token se ha vencido. Inicie la sesión nuevamente para ver esta página.",
Expand Down
Loading