Calculation/Result: add PaymentsTable

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<Payment> = [
+  {
+    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),
+  },
+];

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 (
+    <Table
+      columns={columns}
+      dataSource={toJS($results.payments)}
+      size="small"
+      pagination={{
+        defaultPageSize: 12,
+        pageSizeOptions: [12, 60],
+        responsive: true,
+      }}
+      scroll={{
+        x: true,
+      }}
+    />
+  );
+});
+
+export default {
+  id: 'payments-table',
+  title: 'Таблица платежей',
+  Component: PaymentsTable,
+};

Components/Calculation/Results/PaymentsTable/types.ts

@@ -0,0 +1,7 @@
+export type Payment = {
+  key: string;
+  num: number;
+  paymentSum: string;
+  ndsCompensation: string;
+  redemptionAmount: string;
+};

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;

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<Payment>;
+
+  constructor(rootStore: RootStore) {
+    this.payments = observable<Payment>([]);
+    makeAutoObservable(this);
+
+    this.root = rootStore;
+  }
+
+  setPayments = (payments: Payment[]) => {
+    this.payments.replace(payments);
+  };
+
+  clear = () => {
+    this.payments.clear();
+  };
+}

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);
   }
 }