Calculation: add PaymentsTable

Components/Calculation/Form/Payments/PaymentsTable/config.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable import/prefer-default-export */
+import type { ColumnsType } from 'antd/lib/table';
+import InputNumber from 'Elements/InputNumber';
+import type { Payment } from './types';
+
+export const columns: ColumnsType<Payment> = [
+  {
+    key: 'num',
+    dataIndex: 'num',
+    title: '#',
+    width: '7%',
+    render: (_value, payment) => payment.num + 1,
+  },
+  {
+    key: 'paymentRelation',
+    dataIndex: 'paymentRelation',
+    title: '% платежа',
+    render: (_value, payment) => <InputNumber value={payment.paymentRelation} />,
+  },
+];

Components/Calculation/Form/Payments/PaymentsTable/index.jsx

@@ -0,0 +1,61 @@
+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>
+  );
+}

Components/Calculation/Form/Payments/PaymentsTable/types.ts

@@ -0,0 +1,5 @@
+export type Payment = {
+  key: string;
+  num: number;
+  paymentRelation: number;
+};

Components/Calculation/Form/Payments/index.jsx

@@ -1,6 +1,7 @@
 import { Box, Flex } from 'UIKit/grid';
 import elementsRender from '../../config/elements-render';
 import { elements, id, title } from './config';
+import PaymentsTable from './PaymentsTable';
 
 function Payments() {
   const renderedElements = elements.map((elementName) => {
@@ -29,7 +30,7 @@ function Payments() {
           {selectHighSeasonStart}
         </Flex>
       </Box>
-      {/* TODO: add Payments Table */}
+      <PaymentsTable />
     </Flex>
   );
 }

Components/Calculation/config/elements-props.ts

@@ -1,4 +1,4 @@
-import { MAX_FRANCHISE } from 'constants/values';
+import { MAX_FRANCHISE, MAX_LEASING_PERIOD } from 'constants/values';
 import DownloadOutlined from 'Elements/icons/DownloadOutlined';
 import date from 'tools/date';
 import { formatNumber } from 'tools/format';
@@ -97,7 +97,7 @@ const props: Partial<ElementsProps> = {
   },
   tbxLeasingPeriod: {
     min: 13,
-    max: 60,
+    max: MAX_LEASING_PERIOD,
   },
   tbxParmentsDecreasePercent: {
     min: 50,

Components/Output/PaymentsTable/index.jsx

@@ -1,3 +1,4 @@
+import { MAX_LEASING_PERIOD } from 'constants/values';
 import Table from 'Elements/Table';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
@@ -14,7 +15,7 @@ const PaymentsTable = observer(() => {
       size="small"
       pagination={{
         defaultPageSize: 12,
-        pageSizeOptions: [12, 60],
+        pageSizeOptions: [12, MAX_LEASING_PERIOD],
         responsive: true,
       }}
       scroll={{

constants/values.js

@@ -3,3 +3,4 @@ export const MAX_INSURANCE = 2_500_000;
 export const MIN_INSURANCE = 3000;
 
 export const RATE = 7.75;
+export const MAX_LEASING_PERIOD = 60;

stores/tables/index.ts

@@ -1,12 +1,15 @@
 import type RootStore from 'stores/root';
 import FinGAPTable from './fingap';
 import InsuranceTable from './insurance';
+import PaymentsTable from './payments';
 
 export default class TablesStore {
+  payments: PaymentsTable;
   insurance: InsuranceTable;
   finGAP: FinGAPTable;
 
   constructor(rootStore: RootStore) {
+    this.payments = new PaymentsTable(rootStore);
     this.insurance = new InsuranceTable(rootStore);
     this.finGAP = new FinGAPTable(rootStore);
   }

stores/tables/insurance/index.ts

@@ -4,7 +4,7 @@ import * as insuranceTableConfig from 'config/tables/insurance-table';
 import { mergeWith } from 'lodash';
 import { makeAutoObservable } from 'mobx';
 import type RootStore from 'stores/root';
-import Validation from './validation';
+import Validation from '../validation';
 
 export interface InsuranceTableData {
   values: Insurance.RowValues[];

stores/tables/payments/index.ts

@@ -0,0 +1,41 @@
+import type { Payment } from 'Components/Calculation/Form/Payments/PaymentsTable/types';
+import type { Status } from 'Elements/types';
+import type { IObservableArray } from 'mobx';
+import { makeAutoObservable, observable } from 'mobx';
+import type RootStore from 'stores/root';
+import Validation from '../validation';
+
+export default class PaymentsTable {
+  root: RootStore;
+  validation: Validation;
+  values: IObservableArray<Payment>;
+  statuses: IObservableArray<Status>;
+
+  constructor(rootStore: RootStore) {
+    this.root = rootStore;
+    this.validation = new Validation();
+    this.values = observable<Payment>([]);
+    this.statuses = observable<Status>([]);
+    makeAutoObservable(this);
+  }
+
+  getValue(num: number) {
+    const rowIndex = this.values.findIndex((value) => value.num === num);
+
+    return this.values[rowIndex];
+  }
+
+  setValues = (values: Payment[]) => {
+    this.values.replace(values);
+  };
+
+  getStatus(num: number) {
+    const rowIndex = this.values.findIndex((value) => value.num === num);
+
+    return this.statuses[rowIndex];
+  }
+
+  setStatuses = (statuses: Status[]) => {
+    this.statuses.replace(statuses);
+  };
+}