132 lines
3.3 KiB
JavaScript
132 lines
3.3 KiB
JavaScript
/* eslint-disable react/jsx-key */
|
|
import { useStore } from '@/stores/hooks';
|
|
import { observer } from 'mobx-react-lite';
|
|
import styled from 'styled-components';
|
|
import { Alert } from 'ui/elements';
|
|
import { Box, Flex } from 'ui/grid';
|
|
|
|
const Bold = styled.span`
|
|
font-weight: bold;
|
|
`;
|
|
|
|
function Message(title, text) {
|
|
return (
|
|
<>
|
|
<Bold>{title}</Bold>
|
|
{': '}
|
|
{text}
|
|
</>
|
|
);
|
|
}
|
|
|
|
const AlertWrapper = styled(Box)`
|
|
margin: 0 0 5px 0;
|
|
`;
|
|
|
|
function getElementsErrors({ $calculation, $process }) {
|
|
return Object.values($calculation.$validation).map((validation) => {
|
|
const elementErrors = validation.getErrors();
|
|
const elementTitle = validation.params.err_title;
|
|
|
|
return elementErrors.map(({ key, message }) => (
|
|
<AlertWrapper>
|
|
<Alert
|
|
key={key}
|
|
type={$process.has('Unlimited') ? 'warning' : 'error'}
|
|
showIcon
|
|
message={Message(elementTitle, message)}
|
|
/>
|
|
</AlertWrapper>
|
|
));
|
|
});
|
|
}
|
|
|
|
function getPaymentsTableErrors({ $process, $tables }) {
|
|
const { payments } = $tables;
|
|
const errors = payments.validation.getErrors();
|
|
const title = payments.validation.params.err_title;
|
|
|
|
return errors.map(({ key, message }) => (
|
|
<AlertWrapper>
|
|
<Alert
|
|
key={key}
|
|
type={$process.has('Unlimited') ? 'warning' : 'error'}
|
|
showIcon
|
|
message={Message(title, message)}
|
|
/>
|
|
</AlertWrapper>
|
|
));
|
|
}
|
|
|
|
function getInsuranceTableErrors({ $process, $tables }) {
|
|
const { insurance } = $tables;
|
|
const errors = insurance.validation.getErrors();
|
|
const title = insurance.validation.params.err_title;
|
|
|
|
return errors.map(({ key, message }) => (
|
|
<AlertWrapper>
|
|
<Alert
|
|
key={key}
|
|
type={$process.has('Unlimited') ? 'warning' : 'error'}
|
|
showIcon
|
|
message={Message(title, message)}
|
|
/>
|
|
</AlertWrapper>
|
|
));
|
|
}
|
|
|
|
function getFingapTableErrors({ $process, $tables }) {
|
|
const { fingap } = $tables;
|
|
const errors = fingap.validation.getErrors();
|
|
const title = fingap.validation.params.err_title;
|
|
|
|
return errors.map(({ key, message }) => (
|
|
<AlertWrapper>
|
|
<Alert
|
|
key={key}
|
|
type={$process.has('Unlimited') ? 'warning' : 'error'}
|
|
showIcon
|
|
message={Message(title, message)}
|
|
/>
|
|
</AlertWrapper>
|
|
));
|
|
}
|
|
|
|
const Errors = observer(() => {
|
|
const store = useStore();
|
|
const { $calculation, $tables } = store;
|
|
|
|
const hasElementsErrors = Object.values($calculation.$validation).some(
|
|
(validation) => validation.hasErrors
|
|
);
|
|
const hasPaymentsErrors = $tables.payments.validation.hasErrors;
|
|
const hasInsuranceErrors = $tables.insurance.validation.hasErrors;
|
|
|
|
if (!hasElementsErrors && !hasPaymentsErrors && !hasInsuranceErrors) {
|
|
return <Alert type="success" showIcon message="Ошибок нет 🙂" />;
|
|
}
|
|
|
|
const elementsErrors = getElementsErrors(store);
|
|
const paymentsErrors = getPaymentsTableErrors(store);
|
|
const insuranceErrors = getInsuranceTableErrors(store);
|
|
const fingapErrors = getFingapTableErrors(store);
|
|
|
|
const errors = [...elementsErrors, ...paymentsErrors, ...insuranceErrors, ...fingapErrors];
|
|
|
|
return <Flex flexDirection="column">{errors}</Flex>;
|
|
});
|
|
|
|
function Validation() {
|
|
return (
|
|
<Box>
|
|
<Errors />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default {
|
|
Component: Validation,
|
|
id: 'validation',
|
|
title: 'Ошибки',
|
|
};
|