| | |
| | | } from '../constants'; |
| | | import { useNotification } from '../Notification'; |
| | | |
| | | const incrementOptionsMap = { |
| | | [DEVICE_TYPE.SHELF]: [ |
| | | { value: 'row', label: 'page.map.settings.config.shelf.row' }, |
| | | { value: 'bay', label: 'page.map.settings.config.shelf.bay' }, |
| | | ], |
| | | [DEVICE_TYPE.CHARGE]: [ |
| | | { value: 'no', label: 'page.map.settings.config.base.no' }, |
| | | ], |
| | | [DEVICE_TYPE.STATION]: [ |
| | | { value: 'no', label: 'page.map.settings.config.base.no' }, |
| | | ], |
| | | [DEVICE_TYPE.POINT]: [ |
| | | { value: 'no', label: 'page.map.settings.config.base.no' }, |
| | | ], |
| | | }; |
| | | |
| | | const CopyDrawer = (props) => { |
| | | const { open, onCancel, sprite, value, width = PAGE_DRAWER_WIDTH, handleOnCopy } = props; |
| | | const notify = useNotification(); |
| | | const translate = useTranslate(); |
| | | const deviceType = sprite?.data?.type; |
| | | const incrementOptions = incrementOptionsMap[deviceType] |
| | | |
| | | const { control, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm({ |
| | | defaultValues: { |
| | |
| | | }); |
| | | |
| | | useEffect(() => { |
| | | if (value && Object.keys(value).length > 0) { |
| | | // setValue('copyDirect', value.copyDirect); |
| | | // setValue('copyCount', value.copyCount); |
| | | if (watch('autoIncrement') && incrementOptions && incrementOptions.length > 0) { |
| | | const currentIncrementValue = watch('incrementValue'); |
| | | if (!currentIncrementValue) { |
| | | setValue('incrementValue', incrementOptions[0].value); |
| | | } |
| | | } else { |
| | | setValue('incrementValue', undefined); |
| | | } |
| | | }, [value, setValue]) |
| | | }, [watch('autoIncrement'), incrementOptions, setValue, watch]); |
| | | |
| | | useEffect(() => { |
| | | if (sprite && value && Object.keys(value).length > 0) { |
| | | reset({ |
| | | copyDirect: value.copyDirect || '', |
| | | copyCount: value.copyCount || '', |
| | | gap: 0.0, |
| | | autoIncrement: false, |
| | | incrementMode: 'ascending', |
| | | incrementValue: undefined, |
| | | }); |
| | | } |
| | | }, [sprite, value, reset, incrementOptions, setValue]); |
| | | |
| | | const handleClose = () => { |
| | | onCancel(); |
| | |
| | | <Box p={3}> |
| | | <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}> |
| | | <Grid container spacing={1.4}> |
| | | |
| | | {/* <Grid item xs={6}> |
| | | <Typography variant="body1"> |
| | | {translate('page.map.settings.map.copy.direction')}: {value?.copyDirect} |
| | | </Typography> |
| | | </Grid> |
| | | <Grid item xs={6}> |
| | | <Typography variant="body1"> |
| | | {translate('page.map.settings.map.copy.count')}: {value?.copyCount} |
| | | </Typography> |
| | | </Grid> */} |
| | | |
| | | <Grid item xs={6}> |
| | | <Controller |
| | | name="copyDirect" |
| | |
| | | /> |
| | | </Grid> |
| | | |
| | | {(deviceType === DEVICE_TYPE.SHELF && watch('autoIncrement')) && ( |
| | | {(!!incrementOptions?.length && watch('autoIncrement')) && ( |
| | | <Grid item xs={12}> |
| | | <FormControl fullWidth> |
| | | <FormLabel sx={{ |
| | | mb: 1 |
| | | }}> |
| | | <FormLabel sx={{ mb: 1 }}> |
| | | {translate('page.map.settings.map.copy.field.incrementValue')} |
| | | </FormLabel> |
| | | <Controller |
| | | name="incrementValue" |
| | | name='incrementValue' |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <ToggleButtonGroup |
| | |
| | | }} |
| | | fullWidth |
| | | > |
| | | <ToggleButton value="row"> |
| | | {translate('page.map.settings.config.shelf.row')} |
| | | </ToggleButton> |
| | | <ToggleButton value="bay"> |
| | | {translate('page.map.settings.config.shelf.bay')} |
| | | </ToggleButton> |
| | | </ToggleButtonGroup> |
| | | )} |
| | | /> |
| | | </FormControl> |
| | | </Grid> |
| | | )} |
| | | |
| | | {(deviceType === DEVICE_TYPE.CHARGE && watch('autoIncrement')) && ( |
| | | <Grid item xs={12}> |
| | | <FormControl fullWidth> |
| | | <FormLabel sx={{ |
| | | mb: 1 |
| | | }}> |
| | | {translate('page.map.settings.map.copy.field.incrementValue')} |
| | | </FormLabel> |
| | | <Controller |
| | | name="incrementValue" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <ToggleButtonGroup |
| | | {...field} |
| | | value={field.value} |
| | | exclusive |
| | | onChange={(event, value) => { |
| | | field.onChange(value); |
| | | }} |
| | | fullWidth |
| | | > |
| | | <ToggleButton value="no"> |
| | | {translate('page.map.settings.config.base.no')} |
| | | </ToggleButton> |
| | | </ToggleButtonGroup> |
| | | )} |
| | | /> |
| | | </FormControl> |
| | | </Grid> |
| | | )} |
| | | |
| | | {(deviceType === DEVICE_TYPE.STATION && watch('autoIncrement')) && ( |
| | | <Grid item xs={12}> |
| | | <FormControl fullWidth> |
| | | <FormLabel sx={{ |
| | | mb: 1 |
| | | }}> |
| | | {translate('page.map.settings.map.copy.field.incrementValue')} |
| | | </FormLabel> |
| | | <Controller |
| | | name="incrementValue" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <ToggleButtonGroup |
| | | {...field} |
| | | value={field.value} |
| | | exclusive |
| | | onChange={(event, value) => { |
| | | field.onChange(value); |
| | | }} |
| | | fullWidth |
| | | > |
| | | <ToggleButton value="no"> |
| | | {translate('page.map.settings.config.base.no')} |
| | | </ToggleButton> |
| | | </ToggleButtonGroup> |
| | | )} |
| | | /> |
| | | </FormControl> |
| | | </Grid> |
| | | )} |
| | | |
| | | {(deviceType === DEVICE_TYPE.POINT && watch('autoIncrement')) && ( |
| | | <> |
| | | <Grid item xs={12}> |
| | | <FormControl fullWidth> |
| | | <FormLabel sx={{ |
| | | mb: 1 |
| | | }}> |
| | | {translate('page.map.settings.map.copy.field.incrementValue')} |
| | | </FormLabel> |
| | | <Controller |
| | | name="incrementValue" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <ToggleButtonGroup |
| | | {...field} |
| | | value={field.value} |
| | | exclusive |
| | | onChange={(event, value) => { |
| | | field.onChange(value); |
| | | }} |
| | | fullWidth |
| | | > |
| | | <ToggleButton value="a"> |
| | | {translate('page.map.settings.config.shelf.a')} |
| | | {incrementOptions.map((option, idx) => ( |
| | | <ToggleButton key={idx} value={option.value}> |
| | | {translate(option.label)} |
| | | </ToggleButton> |
| | | <ToggleButton value="b"> |
| | | {translate('page.map.settings.config.shelf.b')} |
| | | </ToggleButton> |
| | | </ToggleButtonGroup> |
| | | )} |
| | | /> |
| | | </FormControl> |
| | | </Grid> |
| | | </> |
| | | ))} |
| | | </ToggleButtonGroup> |
| | | )} |
| | | /> |
| | | </FormControl> |
| | | </Grid> |
| | | )} |
| | | |
| | | {watch('autoIncrement') && ( |