| | |
| | | import ConfirmButton from '../../page/components/ConfirmButton'; |
| | | import { |
| | | DEVICE_TYPE, |
| | | DEVICE_Z_INDEX, |
| | | } from '../constants'; |
| | | import { useNotification } from '../Notification'; |
| | | |
| | | const ConfigSettings = (props) => { |
| | | const { sprite, setSpriteSettings, onSubmit } = props; |
| | | const { sprite, onSubmit } = props; |
| | | const notify = useNotification(); |
| | | const translate = useTranslate(); |
| | | |
| | | const { control, handleSubmit, reset, watch } = useForm({ |
| | | defaultValues: { |
| | | ...sprite.data |
| | | }, |
| | | const { control, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm({ |
| | | defaultValues: { ...sprite?.data }, |
| | | }); |
| | | |
| | | const updateSprite = (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) => { |
| | | console.log(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}> |
| | | |
| | | {sprite?.data?.type === DEVICE_TYPE.SHELF && ( |
| | | {deviceType === DEVICE_TYPE.SHELF && ( |
| | | <> |
| | | <Grid item xs={6} pt={0} sx={{ |
| | | paddingTop: '8px !important', |
| | | }}> |
| | | <Grid item xs={6}> |
| | | <Controller |
| | | name="row" |
| | | control={control} |
| | |
| | | {...field} |
| | | label={translate('page.map.settings.config.shelf.row')} |
| | | type="number" |
| | | value={field.value ?? ''} |
| | | fullWidth |
| | | onChange={(e) => { |
| | | const value = e.target.value; |
| | | field.onChange(e); |
| | | updateSprite(); |
| | | field.onChange(e.target.value === '' ? '' : Number(e.target.value)); |
| | | }} |
| | | /> |
| | | )} |
| | | /> |
| | | </Grid> |
| | | <Grid item xs={6} pt={0} sx={{ |
| | | paddingTop: '8px !important', |
| | | }}> |
| | | <Grid item xs={6}> |
| | | <Controller |
| | | name="bay" |
| | | control={control} |
| | |
| | | {...field} |
| | | label={translate('page.map.settings.config.shelf.bay')} |
| | | type="number" |
| | | value={field.value ?? ''} |
| | | fullWidth |
| | | onChange={(e) => { |
| | | const value = e.target.value; |
| | | field.onChange(e); |
| | | field.onChange(e.target.value === '' ? '' : Number(e.target.value)); |
| | | }} |
| | | /> |
| | | )} |
| | |
| | | </> |
| | | )} |
| | | |
| | | {sprite?.data?.type === DEVICE_TYPE.CHARGE && ( |
| | | {deviceType === DEVICE_TYPE.CHARGE && ( |
| | | <> |
| | | </> |
| | | )} |
| | | |
| | | {sprite?.data?.type === DEVICE_TYPE.STATION && ( |
| | | {deviceType === DEVICE_TYPE.STATION && ( |
| | | <> |
| | | </> |
| | | )} |
| | | |
| | | {sprite?.data?.type === DEVICE_TYPE.POINT && ( |
| | | {deviceType === DEVICE_TYPE.POINT && ( |
| | | <> |
| | | </> |
| | | )} |
| | |
| | | <Divider /> |
| | | </Grid> |
| | | |
| | | {/* <Grid item xs={12}> |
| | | <Typography variant="inherit"> |
| | | {translate('page.map.settings.config.base.no')} |
| | | </Typography> |
| | | </Grid> */} |
| | | <Grid item xs={6} pt={0} sx={{ |
| | | paddingTop: '8px !important', |
| | | }}> |
| | | |
| | | <Grid item xs={6}> |
| | | <Controller |
| | | name="no" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <TextField |
| | | {...field} |
| | | label="No" |
| | | type="text" |
| | | fullWidth |
| | | onChange={(e) => { |
| | | const value = e.target.value; |
| | | field.onChange(e); |
| | | }} |
| | | /> |
| | | )} |
| | | 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" onClick={() => { |
| | | }}> |
| | | <Button variant="contained" color="primary" type="submit"> |
| | | {translate('ra.action.confirm')} |
| | | </Button> |
| | | </Stack> |
| | | </Grid> |
| | | |
| | | </Grid> |
| | | </Box> |
| | | </> |
| | | ) |
| | | } |
| | | ); |
| | | }; |
| | | |
| | | |
| | | export default ConfigSettings; |
| | | export default ConfigSettings; |