59 lines
1.1 KiB
JavaScript
59 lines
1.1 KiB
JavaScript
import Alert from 'elements/Alert';
|
|
import Table from 'elements/Table';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { useStore } from 'stores/hooks';
|
|
import styled from 'styled-components';
|
|
import { Flex } from 'UIKit/grid';
|
|
import { columns } from './config';
|
|
|
|
const Grid = styled(Flex)`
|
|
flex-direction: column;
|
|
`;
|
|
|
|
const TableWrapper = styled.div`
|
|
td > * {
|
|
margin: 0;
|
|
}
|
|
`;
|
|
|
|
const Validation = observer(() => {
|
|
const store = useStore();
|
|
|
|
const messages = store.$tables.insurance.validation.getMessages();
|
|
|
|
if (messages?.length) {
|
|
return <Alert type="error" banner message={messages[0]} />;
|
|
}
|
|
|
|
return null;
|
|
});
|
|
|
|
const InsuranceTable = observer(() => {
|
|
const store = useStore();
|
|
|
|
const { values } = store.$tables.insurance;
|
|
|
|
return (
|
|
<TableWrapper>
|
|
<Table
|
|
size="small"
|
|
pagination={false}
|
|
columns={columns}
|
|
dataSource={values}
|
|
scroll={{
|
|
x: true,
|
|
}}
|
|
/>
|
|
</TableWrapper>
|
|
);
|
|
});
|
|
|
|
export default function () {
|
|
return (
|
|
<Grid>
|
|
<Validation />
|
|
<InsuranceTable />
|
|
</Grid>
|
|
);
|
|
}
|