From 9bb89b4d97bf1f368089f9880b2c77fcd7764115 Mon Sep 17 00:00:00 2001 From: Chika Date: Tue, 5 Jul 2022 18:43:35 +0300 Subject: [PATCH] Calculation: add PaymentsTable --- .../Form/Payments/PaymentsTable/config.tsx | 20 ++++++ .../Form/Payments/PaymentsTable/index.jsx | 61 +++++++++++++++++++ .../Form/Payments/PaymentsTable/types.ts | 5 ++ .../Calculation/Form/Payments/index.jsx | 3 +- .../Calculation/config/elements-props.ts | 4 +- Components/Output/PaymentsTable/index.jsx | 3 +- constants/values.js | 1 + stores/tables/index.ts | 3 + stores/tables/insurance/index.ts | 2 +- stores/tables/payments/index.ts | 41 +++++++++++++ stores/tables/{insurance => }/validation.ts | 0 11 files changed, 138 insertions(+), 5 deletions(-) create mode 100644 Components/Calculation/Form/Payments/PaymentsTable/config.tsx create mode 100644 Components/Calculation/Form/Payments/PaymentsTable/index.jsx create mode 100644 Components/Calculation/Form/Payments/PaymentsTable/types.ts create mode 100644 stores/tables/payments/index.ts rename stores/tables/{insurance => }/validation.ts (100%) diff --git a/Components/Calculation/Form/Payments/PaymentsTable/config.tsx b/Components/Calculation/Form/Payments/PaymentsTable/config.tsx new file mode 100644 index 0000000..6e28412 --- /dev/null +++ b/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 = [ + { + key: 'num', + dataIndex: 'num', + title: '#', + width: '7%', + render: (_value, payment) => payment.num + 1, + }, + { + key: 'paymentRelation', + dataIndex: 'paymentRelation', + title: '% платежа', + render: (_value, payment) => , + }, +]; diff --git a/Components/Calculation/Form/Payments/PaymentsTable/index.jsx b/Components/Calculation/Form/Payments/PaymentsTable/index.jsx new file mode 100644 index 0000000..1606c36 --- /dev/null +++ b/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 ; + } + + return null; +}); + +const PaymentsTable = observer(() => { + const store = useStore(); + const { payments } = store.$tables; + + return ( + + + + ); +}); + +export default function () { + return ( + + + + + ); +} diff --git a/Components/Calculation/Form/Payments/PaymentsTable/types.ts b/Components/Calculation/Form/Payments/PaymentsTable/types.ts new file mode 100644 index 0000000..cce4250 --- /dev/null +++ b/Components/Calculation/Form/Payments/PaymentsTable/types.ts @@ -0,0 +1,5 @@ +export type Payment = { + key: string; + num: number; + paymentRelation: number; +}; diff --git a/Components/Calculation/Form/Payments/index.jsx b/Components/Calculation/Form/Payments/index.jsx index e205da0..7e68f99 100644 --- a/Components/Calculation/Form/Payments/index.jsx +++ b/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} - {/* TODO: add Payments Table */} + ); } diff --git a/Components/Calculation/config/elements-props.ts b/Components/Calculation/config/elements-props.ts index 635c6e6..7263e30 100644 --- a/Components/Calculation/config/elements-props.ts +++ b/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 = { }, tbxLeasingPeriod: { min: 13, - max: 60, + max: MAX_LEASING_PERIOD, }, tbxParmentsDecreasePercent: { min: 50, diff --git a/Components/Output/PaymentsTable/index.jsx b/Components/Output/PaymentsTable/index.jsx index 1ebb4d7..3ddd2a6 100644 --- a/Components/Output/PaymentsTable/index.jsx +++ b/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={{ diff --git a/constants/values.js b/constants/values.js index 32d90a3..4335663 100644 --- a/constants/values.js +++ b/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; diff --git a/stores/tables/index.ts b/stores/tables/index.ts index 29d7b9a..576e509 100644 --- a/stores/tables/index.ts +++ b/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); } diff --git a/stores/tables/insurance/index.ts b/stores/tables/insurance/index.ts index 9f09213..4b9125d 100644 --- a/stores/tables/insurance/index.ts +++ b/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[]; diff --git a/stores/tables/payments/index.ts b/stores/tables/payments/index.ts new file mode 100644 index 0000000..aedceb1 --- /dev/null +++ b/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; + statuses: IObservableArray; + + constructor(rootStore: RootStore) { + this.root = rootStore; + this.validation = new Validation(); + this.values = observable([]); + this.statuses = observable([]); + 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); + }; +} diff --git a/stores/tables/insurance/validation.ts b/stores/tables/validation.ts similarity index 100% rename from stores/tables/insurance/validation.ts rename to stores/tables/validation.ts