124 lines
3.4 KiB
JavaScript
124 lines
3.4 KiB
JavaScript
import { Autocomplete, Box, Divider, FormControl, IconButton, Stack, TextField } from '@mui/material';
|
||
import { memo, useEffect, useState } from 'react';
|
||
import { toast } from 'react-toastify';
|
||
import { ExpenseItemApi } from '../../../api/expense-item';
|
||
import { DangerOutlinedButton, PrimaryButton } from '../../common/Buttons/Buttons';
|
||
import { HeaderContainer, ModalBackdrop, ModalContainer, ModalTitle } from '../../common/Modal/ModalStyled';
|
||
import { Cancel } from '../../common/icons/icons';
|
||
import { compareExpenseItems, getExpenseItemLabel } from '../utils/expenseItemOptions';
|
||
|
||
const SelectExpenseItemModalComponent = ({ isOpen, onClose, onSelect, formId, title = '', isSaving = false, sheet }) => {
|
||
const [selectedValue, setSelectedValue] = useState('');
|
||
const [expenseItemOptions, setExpenseItemOption] = useState([]);
|
||
|
||
useEffect(() => {
|
||
if (!isOpen || formId == null) return;
|
||
ExpenseItemApi.getAll({ r_start: true, sheet: sheet }).then((data) => {
|
||
if (data.success) {
|
||
setExpenseItemOption([...data.result].sort(compareExpenseItems));
|
||
return;
|
||
}
|
||
toast.error('Ошибка получения статья расходов');
|
||
});
|
||
}, [formId, isOpen, sheet]);
|
||
|
||
useEffect(() => {
|
||
if (!isOpen) {
|
||
setSelectedValue('');
|
||
}
|
||
}, [isOpen]);
|
||
|
||
const handleCancel = () => {
|
||
setSelectedValue('');
|
||
onClose();
|
||
};
|
||
|
||
const handleBackdropClick = (e) => {
|
||
if (e.target === e.currentTarget) {
|
||
handleCancel();
|
||
}
|
||
};
|
||
|
||
const handleSave = () => {
|
||
onSelect?.(selectedValue);
|
||
onClose();
|
||
};
|
||
|
||
const isFormValid = selectedValue;
|
||
|
||
if (!isOpen) return null;
|
||
|
||
return (
|
||
<ModalBackdrop isOpen={isOpen} onClick={handleBackdropClick}>
|
||
<ModalContainer height='max-content'>
|
||
<HeaderContainer>
|
||
<Stack direction='row' spacing={2} sx={{ alignItems: 'center' }}>
|
||
<ModalTitle>{title}</ModalTitle>
|
||
</Stack>
|
||
<IconButton size='small' onClick={handleCancel}>
|
||
<Cancel />
|
||
</IconButton>
|
||
</HeaderContainer>
|
||
|
||
<Box>
|
||
<Divider sx={{ marginBottom: '0.75rem' }} />
|
||
|
||
{/* Выбор ВСП */}
|
||
<Stack sx={{ marginBottom: '0.75rem', width: '100%' }}>
|
||
<FormControl fullWidth>
|
||
<Autocomplete
|
||
size='small'
|
||
options={expenseItemOptions}
|
||
noOptionsText='Не найдено'
|
||
getOptionLabel={getExpenseItemLabel}
|
||
getOptionKey={(option) => option.id}
|
||
value={selectedValue}
|
||
onChange={(_event, newValue) => {
|
||
setSelectedValue(newValue);
|
||
}}
|
||
slotProps={{
|
||
popper: {
|
||
style: { zIndex: 60 },
|
||
},
|
||
}}
|
||
renderInput={(params) => (
|
||
<TextField
|
||
{...params}
|
||
placeholder='Не выбрана'
|
||
sx={{
|
||
'& .MuiOutlinedInput-root': {
|
||
'& fieldset': {
|
||
borderColor: 'rgba(0,0,0,0.1)',
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
)}
|
||
/>
|
||
</FormControl>
|
||
</Stack>
|
||
|
||
<Stack
|
||
direction='row'
|
||
spacing={0.75}
|
||
sx={{
|
||
justifyContent: 'flex-end',
|
||
marginTop: '1.5rem',
|
||
width: '100%',
|
||
}}>
|
||
<DangerOutlinedButton onClick={handleCancel} disabled={isSaving}>
|
||
Отмена
|
||
</DangerOutlinedButton>
|
||
|
||
<PrimaryButton onClick={handleSave} disabled={!isFormValid || isSaving} loading={isSaving}>
|
||
Выбрать
|
||
</PrimaryButton>
|
||
</Stack>
|
||
</Box>
|
||
</ModalContainer>
|
||
</ModalBackdrop>
|
||
);
|
||
};
|
||
|
||
export const SelectExpenseItemModal = memo(SelectExpenseItemModalComponent);
|