import React, { useState } from 'react';
|
import {
|
useUpdateMany,
|
useRefresh,
|
useNotify,
|
useListContext,
|
useUnselectAll,
|
Button as RaButton,
|
Form,
|
ReferenceInput,
|
AutocompleteInput,
|
NumberInput,
|
TextInput,
|
useTranslate,
|
} from 'react-admin';
|
import { Dialog, DialogActions, DialogContent, DialogTitle, Grid, Stack, Divider } from '@mui/material';
|
import UpdateIcon from '@mui/icons-material/Update';
|
import MemoInput from "../components/MemoInput";
|
import ContentSave from '@mui/icons-material/Save';
|
import CloseIcon from '@mui/icons-material/Close';
|
|
const BulkUpdateButton = ({ resource, label = 'ra.action.update', ...rest }) => {
|
const [open, setOpen] = useState(false);
|
|
const refresh = useRefresh();
|
const notify = useNotify();
|
const translate = useTranslate();
|
const unselectAll = useUnselectAll(resource);
|
const { selectedIds } = useListContext();
|
|
const handleOpen = () => setOpen(true);
|
const handleClose = () => setOpen(false);
|
|
const [updateMany, { loading }] = useUpdateMany();
|
|
const handleSubmit = (data) => {
|
const filteredData = Object.fromEntries(
|
Object.entries(data).filter(([key, value]) => value !== null && value !== undefined)
|
);
|
delete filteredData['memoWrap'];
|
if (Object.keys(filteredData).length > 0) {
|
updateMany(
|
resource,
|
{
|
ids: selectedIds,
|
data: filteredData,
|
},
|
{
|
onSuccess: () => {
|
setOpen(false);
|
refresh();
|
notify('common.response.success', { type: 'success' });
|
unselectAll();
|
},
|
onError: (error) => {
|
notify(error.message || 'common.response.fail', { type: 'error' });
|
},
|
}
|
);
|
} else {
|
notify('common.response.fail', { type: 'warning' });
|
}
|
};
|
|
return (
|
<>
|
<RaButton onClick={handleOpen} startIcon={<UpdateIcon />} label={label} />
|
<Dialog open={open} onClose={handleClose}>
|
<Form onSubmit={handleSubmit}>
|
<DialogTitle>{translate('ra.action.update')}</DialogTitle>
|
<DialogContent>
|
<Grid container rowSpacing={2} columnSpacing={2}>
|
<Grid item xs={6} display="flex" gap={1}>
|
<ReferenceInput
|
source="code"
|
reference="code"
|
>
|
<AutocompleteInput
|
label="table.field.loc.code"
|
optionText="data"
|
filterToQuery={(val) => ({ data: val })}
|
/>
|
</ReferenceInput>
|
</Grid>
|
<Grid item xs={6} display="flex" gap={1}>
|
<ReferenceInput
|
source="locSts"
|
reference="locSts"
|
>
|
<AutocompleteInput
|
label="table.field.loc.locSts"
|
optionText="name"
|
filterToQuery={(val) => ({ name: val })}
|
/>
|
</ReferenceInput>
|
</Grid>
|
<Grid item xs={6} display="flex" gap={1}>
|
<NumberInput
|
label="table.field.loc.offset"
|
source="offset"
|
/>
|
</Grid>
|
<Grid item xs={12} display="flex" gap={1}>
|
<Stack direction="column" spacing={1} width={'100%'}>
|
<MemoInput />
|
</Stack>
|
</Grid>
|
</Grid>
|
</DialogContent>
|
<Divider sx={{ mb: 1 }} />
|
<DialogActions sx={{ mb: 1 }}>
|
<RaButton
|
onClick={handleClose}
|
variant="contained"
|
color="inherit"
|
size='large'
|
label='ra.action.cancel'
|
aria-label={false}
|
sx={{ mr: 1 }}
|
>
|
<CloseIcon />
|
</RaButton>
|
<RaButton
|
type="submit"
|
variant="contained"
|
color="primary"
|
size='large'
|
label='ra.action.save'
|
aria-label={false}
|
disabled={loading}
|
sx={{ mr: 1 }}
|
>
|
<ContentSave />
|
</RaButton>
|
</DialogActions>
|
</Form>
|
</Dialog >
|
</>
|
);
|
};
|
|
export default BulkUpdateButton;
|
