62 lines
1.3 KiB
JavaScript
62 lines
1.3 KiB
JavaScript
import { MAX_LEASING_PERIOD } from 'constants/values';
|
|
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 { payments } = store.$tables;
|
|
|
|
const messages = payments.validation.getMessages();
|
|
|
|
if (messages?.length) {
|
|
return <Alert type="error" banner message={messages[0]} />;
|
|
}
|
|
|
|
return null;
|
|
});
|
|
|
|
const PaymentsTable = observer(() => {
|
|
const store = useStore();
|
|
const { payments } = store.$tables;
|
|
|
|
return (
|
|
<TableWrapper>
|
|
<Table
|
|
size="small"
|
|
columns={columns}
|
|
dataSource={payments.values}
|
|
pagination={{
|
|
defaultPageSize: 12,
|
|
pageSizeOptions: [12, MAX_LEASING_PERIOD],
|
|
responsive: true,
|
|
showSizeChanger: true,
|
|
}}
|
|
/>
|
|
</TableWrapper>
|
|
);
|
|
});
|
|
|
|
export default function () {
|
|
return (
|
|
<Grid>
|
|
<PaymentsTable />
|
|
<Validation />
|
|
</Grid>
|
|
);
|
|
}
|