diff --git a/Components/Calculation/Results/PaymentsTable/config.ts b/Components/Calculation/Results/PaymentsTable/config.ts new file mode 100644 index 0000000..b1aead2 --- /dev/null +++ b/Components/Calculation/Results/PaymentsTable/config.ts @@ -0,0 +1,34 @@ +/* eslint-disable import/prefer-default-export */ + +import type { ColumnsType } from 'antd/lib/table'; +import { formatMoney } from 'tools/format'; +import { pipe } from 'tools/function'; +import { round } from 'tools/number'; +import type { Payment } from './types'; + +export const columns: ColumnsType = [ + { + key: 'num', + dataIndex: 'num', + title: '#', + width: '10%', + }, + { + key: 'paymentSum', + dataIndex: 'paymentSum', + title: 'Сумма платежа', + render: (value) => pipe(round, formatMoney)(value), + }, + { + key: 'ndsCompensation', + dataIndex: 'ndsCompensation', + title: 'НДС к возмещению', + render: (value) => pipe(round, formatMoney)(value), + }, + { + key: 'redemptionAmount', + dataIndex: 'redemptionAmount', + title: 'Сумма досрочного выкупа', + render: (value) => pipe(round, formatMoney)(value), + }, +]; diff --git a/Components/Calculation/Results/PaymentsTable/index.jsx b/Components/Calculation/Results/PaymentsTable/index.jsx new file mode 100644 index 0000000..1ebb4d7 --- /dev/null +++ b/Components/Calculation/Results/PaymentsTable/index.jsx @@ -0,0 +1,31 @@ +import Table from 'Elements/Table'; +import { toJS } from 'mobx'; +import { observer } from 'mobx-react-lite'; +import { useStore } from 'stores/hooks'; +import { columns } from './config'; + +const PaymentsTable = observer(() => { + const { $results } = useStore(); + + return ( + + ); +}); + +export default { + id: 'payments-table', + title: 'Таблица платежей', + Component: PaymentsTable, +}; diff --git a/Components/Calculation/Results/PaymentsTable/types.ts b/Components/Calculation/Results/PaymentsTable/types.ts new file mode 100644 index 0000000..3c3d011 --- /dev/null +++ b/Components/Calculation/Results/PaymentsTable/types.ts @@ -0,0 +1,7 @@ +export type Payment = { + key: string; + num: number; + paymentSum: string; + ndsCompensation: string; + redemptionAmount: string; +}; diff --git a/Components/Calculation/Results/index.jsx b/Components/Calculation/Results/index.jsx index 3fe42ac..f34441a 100644 --- a/Components/Calculation/Results/index.jsx +++ b/Components/Calculation/Results/index.jsx @@ -3,9 +3,10 @@ import Tabs from 'Elements/layout/Tabs'; import styled from 'styled-components'; import { min } from 'UIKit/mq'; import Output from './Output'; +import PaymentsTable from './PaymentsTable'; import Validation from './Validation'; -const resultsTabs = [Output, Validation]; +const resultsTabs = [PaymentsTable, Output, Validation]; const Wrapper = styled(Background)` padding: 4px 10px; diff --git a/stores/results/index.ts b/stores/results/index.ts new file mode 100644 index 0000000..d89155f --- /dev/null +++ b/stores/results/index.ts @@ -0,0 +1,25 @@ +import type { Payment } from 'Components/Calculation/Results/PaymentsTable/types'; +import type { IObservableArray } from 'mobx'; +import { makeAutoObservable, observable } from 'mobx'; + +import type RootStore from 'stores/root'; + +export default class Results { + root: RootStore; + payments: IObservableArray; + + constructor(rootStore: RootStore) { + this.payments = observable([]); + makeAutoObservable(this); + + this.root = rootStore; + } + + setPayments = (payments: Payment[]) => { + this.payments.replace(payments); + }; + + clear = () => { + this.payments.clear(); + }; +} diff --git a/stores/root.ts b/stores/root.ts index 82ddd94..5a852c4 100644 --- a/stores/root.ts +++ b/stores/root.ts @@ -1,6 +1,7 @@ /* eslint-disable import/no-cycle */ import { enableStaticRendering } from 'mobx-react-lite'; import CalculationStore from './calculation'; +import ResultsStore from './results'; import TablesStore from './tables'; import UserStore from './user'; @@ -9,11 +10,13 @@ enableStaticRendering(typeof window === 'undefined'); export default class RootStore { $user: UserStore; $calculation: CalculationStore; + $results: ResultsStore; $tables: TablesStore; constructor() { this.$user = new UserStore(this); this.$calculation = new CalculationStore(this); + this.$results = new ResultsStore(this); this.$tables = new TablesStore(this); } }