85 lines
1.7 KiB
JavaScript
85 lines
1.7 KiB
JavaScript
import Alert from 'Elements/Alert';
|
|
import Table from 'Elements/Table';
|
|
import { chunk } from 'lodash';
|
|
import { toJS } from 'mobx';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { useMemo } from 'react';
|
|
import { useStore } from 'stores/hooks';
|
|
import styled from 'styled-components';
|
|
import { Box, Flex } from 'UIKit/grid';
|
|
import { min } from 'UIKit/mq';
|
|
import { columns } from './config';
|
|
|
|
const Grid = styled(Flex)`
|
|
flex-direction: column;
|
|
`;
|
|
|
|
const TableWrapper = styled.div`
|
|
td > * {
|
|
margin: 0;
|
|
}
|
|
`;
|
|
|
|
const TablesGroupGrid = styled(Box)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
${min('laptop')} {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 5px;
|
|
}
|
|
`;
|
|
|
|
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 SPLIT_NUMBER = 12;
|
|
|
|
const TablesGroup = observer(() => {
|
|
const store = useStore();
|
|
const { payments } = store.$tables;
|
|
|
|
const values = toJS(payments.values);
|
|
|
|
const data = useMemo(
|
|
// prettier-ignore
|
|
() => values.map((value, index) => ({
|
|
key: index,
|
|
num: index,
|
|
paymentRelation: value,
|
|
})),
|
|
[values]
|
|
);
|
|
|
|
const tables = useMemo(
|
|
// prettier-ignore
|
|
() => chunk(data, SPLIT_NUMBER).map((dataSource) => (
|
|
<TableWrapper>
|
|
<Table size="small" columns={columns} dataSource={dataSource} pagination={false} />
|
|
</TableWrapper>
|
|
)),
|
|
[data]
|
|
);
|
|
|
|
return <TablesGroupGrid>{tables}</TablesGroupGrid>;
|
|
});
|
|
|
|
export default function TablePayments() {
|
|
return (
|
|
<Grid>
|
|
<TablesGroup />
|
|
<Validation />
|
|
</Grid>
|
|
);
|
|
}
|