import React, { useEffect } from 'react';
|
import { useForm, Controller } from 'react-hook-form';
|
import {
|
Box,
|
Grid,
|
Typography,
|
TextField,
|
Slider,
|
Button,
|
Select,
|
MenuItem,
|
InputLabel,
|
FormControl,
|
Stack,
|
Divider,
|
} from '@mui/material';
|
import { useTranslate } from 'react-admin';
|
import * as Tool from '../tool';
|
import ConfirmButton from '../../page/components/ConfirmButton';
|
import {
|
DEVICE_TYPE,
|
} from '../constants';
|
import { useNotification } from '../Notification';
|
|
const ConfigSettings = (props) => {
|
const { sprite, onSubmit } = props;
|
const notify = useNotification();
|
const translate = useTranslate();
|
|
const { control, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm({
|
defaultValues: { ...sprite?.data },
|
});
|
|
useEffect(() => {
|
if (sprite?.data) {
|
reset({
|
...sprite.data
|
});
|
}
|
}, [sprite, reset]);
|
|
const deviceType = sprite?.data?.type;
|
|
const rowValue = watch('row');
|
const bayValue = watch('bay');
|
|
useEffect(() => {
|
if (deviceType === DEVICE_TYPE.SHELF) {
|
if (rowValue != null && bayValue != null && rowValue !== '' && bayValue !== '') {
|
setValue('no', `${rowValue}-${bayValue}`);
|
} else {
|
setValue('no', '');
|
}
|
}
|
}, [
|
setValue,
|
deviceType,
|
rowValue,
|
bayValue,
|
]);
|
|
const onFormSubmit = (data) => {
|
if (sprite?.data) {
|
Object.keys(data).forEach((key) => {
|
sprite.data[key] = data[key];
|
});
|
}
|
if (onSubmit) {
|
onSubmit(data);
|
}
|
notify.info(translate('common.response.success'));
|
};
|
|
return (
|
<>
|
<Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}>
|
<Grid container spacing={1.4}>
|
|
{deviceType === DEVICE_TYPE.SHELF && (
|
<>
|
<Grid item xs={6}>
|
<Controller
|
name="row"
|
control={control}
|
render={({ field }) => (
|
<TextField
|
{...field}
|
label={translate('page.map.settings.config.shelf.row')}
|
type="number"
|
value={field.value ?? ''}
|
fullWidth
|
onChange={(e) => {
|
field.onChange(e.target.value === '' ? '' : Number(e.target.value));
|
}}
|
/>
|
)}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<Controller
|
name="bay"
|
control={control}
|
render={({ field }) => (
|
<TextField
|
{...field}
|
label={translate('page.map.settings.config.shelf.bay')}
|
type="number"
|
value={field.value ?? ''}
|
fullWidth
|
onChange={(e) => {
|
field.onChange(e.target.value === '' ? '' : Number(e.target.value));
|
}}
|
/>
|
)}
|
/>
|
</Grid>
|
</>
|
)}
|
|
{deviceType === DEVICE_TYPE.CHARGE && (
|
<>
|
</>
|
)}
|
|
{deviceType === DEVICE_TYPE.STATION && (
|
<>
|
</>
|
)}
|
|
{deviceType === DEVICE_TYPE.POINT && (
|
<>
|
</>
|
)}
|
|
<Grid item xs={12}>
|
<Divider />
|
</Grid>
|
|
<Grid item xs={6}>
|
<Controller
|
name="no"
|
control={control}
|
rules={{
|
required: translate('ra.validation.required') // warn msg
|
}}
|
render={({ field }) => {
|
return (
|
<TextField
|
{...field}
|
label={translate('page.map.settings.config.base.no')}
|
type="text"
|
value={field.value ?? ''}
|
error={!!errors.no} // show red warn
|
helperText={errors.no ? errors.no.message : null} // show warn msg
|
fullWidth
|
onChange={(e) => {
|
field.onChange(e);
|
}}
|
/>
|
)
|
}}
|
/>
|
</Grid>
|
|
<Grid item xs={12} mt={2}>
|
<Stack direction="row" spacing={2}>
|
<Button variant="contained" color="primary" type="submit">
|
{translate('ra.action.confirm')}
|
</Button>
|
</Stack>
|
</Grid>
|
</Grid>
|
</Box>
|
</>
|
);
|
};
|
|
export default ConfigSettings;
|
