Skip to content

Commit 0ed3bff

Browse files
proddyproddy
committed
rename SAVE to APPLY, show number of updates - #911 
1 parent 9ba0c6d commit 0ed3bff

19 files changed

+287
-112
lines changed

‎interface/src/framework/ap/APSettingsForm.tsx

+32-18
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { range } from 'lodash';
44

55
import { Button, Checkbox, MenuItem } from '@mui/material';
66
import SaveIcon from '@mui/icons-material/Save';
7+
import CancelIcon from '@mui/icons-material/Cancel';
78

89
import { createAPSettingsValidator, validate } from '../../validators';
910
import {
@@ -16,7 +17,7 @@ import {
1617
} from '../../components';
1718

1819
import { APProvisionMode, APSettings } from '../../types';
19-
import { numberValue, updateValue, useRest } from '../../utils';
20+
import { numberValue, updateValueDirty, useRest } from '../../utils';
2021
import * as APApi from '../../api/ap';
2122

2223
import { useI18nContext } from '../../i18n/i18n-react';
@@ -26,16 +27,17 @@ export const isAPEnabled = ({ provision_mode }: APSettings) => {
2627
};
2728

2829
const APSettingsForm: FC = () => {
29-
const { loadData, saving, data, setData, saveData, errorMessage } = useRest<APSettings>({
30-
read: APApi.readAPSettings,
31-
update: APApi.updateAPSettings
32-
});
30+
const { loadData, saving, data, setData, origData, dirtyFlags, setDirtyFlags, saveData, errorMessage } =
31+
useRest<APSettings>({
32+
read: APApi.readAPSettings,
33+
update: APApi.updateAPSettings
34+
});
3335

3436
const { LL } = useI18nContext();
3537

3638
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
3739

38-
const updateFormValue = updateValue(setData);
40+
const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, setData);
3941

4042
const content = () => {
4143
if (!data) {
@@ -163,18 +165,30 @@ const APSettingsForm: FC = () => {
163165
/>
164166
</>
165167
)}
166-
<ButtonRow>
167-
<Button
168-
startIcon={<SaveIcon />}
169-
disabled={saving}
170-
variant="outlined"
171-
color="primary"
172-
type="submit"
173-
onClick={validateAndSubmit}
174-
>
175-
{LL.SAVE()}
176-
</Button>
177-
</ButtonRow>
168+
{dirtyFlags && dirtyFlags.length !== 0 && (
169+
<ButtonRow>
170+
<Button
171+
startIcon={<CancelIcon />}
172+
disabled={saving}
173+
variant="outlined"
174+
color="primary"
175+
type="submit"
176+
onClick={() => loadData()}
177+
>
178+
{LL.CANCEL()}
179+
</Button>
180+
<Button
181+
startIcon={<SaveIcon />}
182+
disabled={saving}
183+
variant="outlined"
184+
color="primary"
185+
type="submit"
186+
onClick={validateAndSubmit}
187+
>
188+
{LL.APPLY_CHANGES(dirtyFlags.length)}
189+
</Button>
190+
</ButtonRow>
191+
)}
178192
</>
179193
);
180194
};

‎interface/src/framework/mqtt/MqttSettingsForm.tsx

+33-18
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ValidateFieldsError } from 'async-validator';
33

44
import { Button, Checkbox, MenuItem, Grid, Typography, InputAdornment } from '@mui/material';
55
import SaveIcon from '@mui/icons-material/Save';
6+
import CancelIcon from '@mui/icons-material/Cancel';
67

78
import { createMqttSettingsValidator, validate } from '../../validators';
89
import {
@@ -14,22 +15,23 @@ import {
1415
ValidatedTextField
1516
} from '../../components';
1617
import { MqttSettings } from '../../types';
17-
import { numberValue, updateValue, useRest } from '../../utils';
18+
import { numberValue, updateValueDirty, useRest } from '../../utils';
1819
import * as MqttApi from '../../api/mqtt';
1920

2021
import { useI18nContext } from '../../i18n/i18n-react';
2122

2223
const MqttSettingsForm: FC = () => {
23-
const { loadData, saving, data, setData, saveData, errorMessage } = useRest<MqttSettings>({
24-
read: MqttApi.readMqttSettings,
25-
update: MqttApi.updateMqttSettings
26-
});
24+
const { loadData, saving, data, setData, origData, dirtyFlags, setDirtyFlags, saveData, errorMessage } =
25+
useRest<MqttSettings>({
26+
read: MqttApi.readMqttSettings,
27+
update: MqttApi.updateMqttSettings
28+
});
2729

2830
const { LL } = useI18nContext();
2931

3032
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
3133

32-
const updateFormValue = updateValue(setData);
34+
const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, setData);
3335

3436
const content = () => {
3537
if (!data) {
@@ -372,18 +374,31 @@ const MqttSettingsForm: FC = () => {
372374
/>
373375
</Grid>
374376
</Grid>
375-
<ButtonRow>
376-
<Button
377-
startIcon={<SaveIcon />}
378-
disabled={saving}
379-
variant="outlined"
380-
color="primary"
381-
type="submit"
382-
onClick={validateAndSubmit}
383-
>
384-
{LL.SAVE()}
385-
</Button>
386-
</ButtonRow>
377+
378+
{dirtyFlags && dirtyFlags.length !== 0 && (
379+
<ButtonRow>
380+
<Button
381+
startIcon={<CancelIcon />}
382+
disabled={saving}
383+
variant="outlined"
384+
color="primary"
385+
type="submit"
386+
onClick={() => loadData()}
387+
>
388+
{LL.CANCEL()}
389+
</Button>
390+
<Button
391+
startIcon={<SaveIcon />}
392+
disabled={saving}
393+
variant="outlined"
394+
color="primary"
395+
type="submit"
396+
onClick={validateAndSubmit}
397+
>
398+
{LL.APPLY_CHANGES(dirtyFlags.length)}
399+
</Button>
400+
</ButtonRow>
401+
)}
387402
</>
388403
);
389404
};

‎interface/src/framework/network/NetworkSettingsForm.tsx

+28-5
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
2020
import SaveIcon from '@mui/icons-material/Save';
2121
import LockIcon from '@mui/icons-material/Lock';
2222
import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
23+
import CancelIcon from '@mui/icons-material/Cancel';
2324

2425
import {
2526
BlockFormControlLabel,
@@ -32,7 +33,7 @@ import {
3233
} from '../../components';
3334
import { NetworkSettings } from '../../types';
3435
import * as NetworkApi from '../../api/network';
35-
import { numberValue, updateValue, useRest } from '../../utils';
36+
import { numberValue, updateValueDirty, useRest } from '../../utils';
3637
import * as EMSESP from '../../project/api';
3738

3839
import { WiFiConnectionContext } from './WiFiConnectionContext';
@@ -52,7 +53,18 @@ const WiFiSettingsForm: FC = () => {
5253

5354
const [initialized, setInitialized] = useState(false);
5455
const [restarting, setRestarting] = useState(false);
55-
const { loadData, saving, data, setData, saveData, errorMessage, restartNeeded } = useRest<NetworkSettings>({
56+
const {
57+
loadData,
58+
saving,
59+
data,
60+
setData,
61+
origData,
62+
dirtyFlags,
63+
setDirtyFlags,
64+
saveData,
65+
errorMessage,
66+
restartNeeded
67+
} = useRest<NetworkSettings>({
5668
read: NetworkApi.readNetworkSettings,
5769
update: NetworkApi.updateNetworkSettings
5870
});
@@ -78,7 +90,7 @@ const WiFiSettingsForm: FC = () => {
7890
}
7991
}, [initialized, setInitialized, data, setData, selectedNetwork]);
8092

81-
const updateFormValue = updateValue(setData);
93+
const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, setData);
8294

8395
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
8496

@@ -287,8 +299,19 @@ const WiFiSettingsForm: FC = () => {
287299
</Button>
288300
</MessageBox>
289301
)}
290-
{!restartNeeded && (
302+
303+
{!restartNeeded && dirtyFlags && dirtyFlags.length !== 0 && (
291304
<ButtonRow>
305+
<Button
306+
startIcon={<CancelIcon />}
307+
disabled={saving}
308+
variant="outlined"
309+
color="primary"
310+
type="submit"
311+
onClick={() => loadData()}
312+
>
313+
{LL.CANCEL()}
314+
</Button>
292315
<Button
293316
startIcon={<SaveIcon />}
294317
disabled={saving}
@@ -297,7 +320,7 @@ const WiFiSettingsForm: FC = () => {
297320
type="submit"
298321
onClick={validateAndSubmit}
299322
>
300-
{LL.SAVE()}
323+
{LL.APPLY_CHANGES(dirtyFlags.length)}
301324
</Button>
302325
</ButtonRow>
303326
)}

‎interface/src/framework/ntp/NTPSettingsForm.tsx

+32-18
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,28 @@ import { ValidateFieldsError } from 'async-validator';
33

44
import { Button, Checkbox, MenuItem } from '@mui/material';
55
import SaveIcon from '@mui/icons-material/Save';
6+
import CancelIcon from '@mui/icons-material/Cancel';
67

78
import { validate } from '../../validators';
89
import { BlockFormControlLabel, ButtonRow, FormLoader, SectionContent, ValidatedTextField } from '../../components';
910
import { NTPSettings } from '../../types';
10-
import { updateValue, useRest } from '../../utils';
11+
import { updateValueDirty, useRest } from '../../utils';
1112
import * as NTPApi from '../../api/ntp';
1213
import { selectedTimeZone, timeZoneSelectItems, TIME_ZONES } from './TZ';
1314
import { NTP_SETTINGS_VALIDATOR } from '../../validators/ntp';
1415

1516
import { useI18nContext } from '../../i18n/i18n-react';
1617

1718
const NTPSettingsForm: FC = () => {
18-
const { loadData, saving, data, setData, saveData, errorMessage } = useRest<NTPSettings>({
19-
read: NTPApi.readNTPSettings,
20-
update: NTPApi.updateNTPSettings
21-
});
19+
const { loadData, saving, data, setData, origData, dirtyFlags, setDirtyFlags, saveData, errorMessage } =
20+
useRest<NTPSettings>({
21+
read: NTPApi.readNTPSettings,
22+
update: NTPApi.updateNTPSettings
23+
});
2224

2325
const { LL } = useI18nContext();
2426

25-
const updateFormValue = updateValue(setData);
27+
const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, setData);
2628

2729
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
2830

@@ -79,18 +81,30 @@ const NTPSettingsForm: FC = () => {
7981
<MenuItem disabled>{LL.TIME_ZONE()}...</MenuItem>
8082
{timeZoneSelectItems()}
8183
</ValidatedTextField>
82-
<ButtonRow>
83-
<Button
84-
startIcon={<SaveIcon />}
85-
disabled={saving}
86-
variant="outlined"
87-
color="primary"
88-
type="submit"
89-
onClick={validateAndSubmit}
90-
>
91-
{LL.SAVE()}
92-
</Button>
93-
</ButtonRow>
84+
{dirtyFlags && dirtyFlags.length !== 0 && (
85+
<ButtonRow>
86+
<Button
87+
startIcon={<CancelIcon />}
88+
disabled={saving}
89+
variant="outlined"
90+
color="primary"
91+
type="submit"
92+
onClick={() => loadData()}
93+
>
94+
{LL.CANCEL()}
95+
</Button>
96+
<Button
97+
startIcon={<SaveIcon />}
98+
disabled={saving}
99+
variant="outlined"
100+
color="primary"
101+
type="submit"
102+
onClick={validateAndSubmit}
103+
>
104+
{LL.APPLY_CHANGES(dirtyFlags.length)}
105+
</Button>
106+
</ButtonRow>
107+
)}
94108
</>
95109
);
96110
};

‎interface/src/framework/ntp/NTPStatusForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ const NTPStatusForm: FC = () => {
129129
color="primary"
130130
autoFocus
131131
>
132-
{LL.SAVE()}
132+
{LL.UPDATE()}
133133
</Button>
134134
</DialogActions>
135135
</Dialog>

‎interface/src/framework/security/ManageUsersForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ const ManageUsersForm: FC = () => {
185185
type="submit"
186186
onClick={onSubmit}
187187
>
188-
{LL.SAVE()}
188+
{LL.UPDATE()}
189189
</Button>
190190
</Box>
191191

0 commit comments

Comments
 (0)