From 261e082f604596cf7b80542fbb119fe3184d3bb6 Mon Sep 17 00:00:00 2001 From: vchikalkin Date: Tue, 17 Nov 2020 12:33:13 +0300 Subject: [PATCH] add results block --- .../Containers/Calculation/Info/index.jsx | 12 ++ .../Containers/Calculation/Info/infoList.ts | 41 +++++ .../Containers/Calculation/Results/index.jsx | 6 +- .../Calculation/Results/resultsList.ts | 168 +++++++++++------- .../Calculation/ResultsTable/index.jsx | 14 ++ .../ResultsTable/restultTableList.ts | 49 +++++ src/client/Containers/Calculation/index.jsx | 40 ++++- src/client/Elements/Table.jsx | 1 + src/core/types/Calculation/Store/elements.ts | 17 +- src/core/types/Calculation/Store/values.ts | 17 +- src/core/types/Calculation/components.ts | 19 +- 11 files changed, 304 insertions(+), 80 deletions(-) create mode 100644 src/client/Containers/Calculation/Info/index.jsx create mode 100644 src/client/Containers/Calculation/Info/infoList.ts create mode 100644 src/client/Containers/Calculation/ResultsTable/index.jsx create mode 100644 src/client/Containers/Calculation/ResultsTable/restultTableList.ts diff --git a/src/client/Containers/Calculation/Info/index.jsx b/src/client/Containers/Calculation/Info/index.jsx new file mode 100644 index 0000000..18a6114 --- /dev/null +++ b/src/client/Containers/Calculation/Info/index.jsx @@ -0,0 +1,12 @@ +import { renderGroups } from 'client/Containers/Calculation/lib/renderSections'; +import Background from 'client/Elements/Background'; +import React from 'react'; +import { controlsList } from './infoList'; + +const Results = props => ( + + {renderGroups({ groups: controlsList })} + +); + +export default Results; diff --git a/src/client/Containers/Calculation/Info/infoList.ts b/src/client/Containers/Calculation/Info/infoList.ts new file mode 100644 index 0000000..600e6ef --- /dev/null +++ b/src/client/Containers/Calculation/Info/infoList.ts @@ -0,0 +1,41 @@ +import { IGroup } from 'core/types/Calculation/components'; +import Label from 'client/Elements/Label'; +import { ElementType } from 'core/types/Calculation/Store/elements'; +import Button from 'client/Elements/Button'; + +export const controlsList: IGroup[] = [ + { + blocks: [ + { + elements: [ + { + title: 'Интерес: ', + Component: Label, + props: { + name: 'lblLead', + computedValueName: 'leadName', + }, + }, + { + title: 'Лизинговая сделка: ', + Component: Label, + props: { + name: 'lblOpportunity', + computedValueName: 'opportunityName', + }, + }, + { + type: ElementType.Button, + Component: Button, + props: { + name: 'btnCalculate', + actionName: 'calculate', + text: 'Рассчитать график', + type: 'primary', + }, + }, + ], + }, + ], + }, +]; diff --git a/src/client/Containers/Calculation/Results/index.jsx b/src/client/Containers/Calculation/Results/index.jsx index 1802891..97bcae7 100644 --- a/src/client/Containers/Calculation/Results/index.jsx +++ b/src/client/Containers/Calculation/Results/index.jsx @@ -1,15 +1,13 @@ import { Divider } from 'antd'; import { renderGroups } from 'client/Containers/Calculation/lib/renderSections'; import Background from 'client/Elements/Background'; -import { Flex, Box } from 'client/UIKit/grid'; +import { Box, Flex } from 'client/UIKit/grid'; import React from 'react'; -import { calculationResults, resultInfo } from './resultsList'; +import { calculationResults } from './resultsList'; const Results = props => ( - {renderGroups({ groups: resultInfo })} - {renderGroups({ groups: calculationResults })} diff --git a/src/client/Containers/Calculation/Results/resultsList.ts b/src/client/Containers/Calculation/Results/resultsList.ts index c4acacb..56635fa 100644 --- a/src/client/Containers/Calculation/Results/resultsList.ts +++ b/src/client/Containers/Calculation/Results/resultsList.ts @@ -1,80 +1,114 @@ -import InputNumber from 'client/Elements/InputNumber'; -import Table from 'client/Elements/Table'; -import Button from 'client/Elements/Button'; import Label from 'client/Elements/Label'; import { IGroup } from 'core/types/Calculation/components'; -import { ElementType } from 'core/types/Calculation/Store/elements'; - -export const resultInfo: IGroup[] = [ - { - blocks: [ - { - elements: [ - { - title: 'Интерес: ', - Component: Label, - props: { - name: 'lblLead', - computedValueName: 'leadName', - }, - }, - { - title: 'Лизинговая сделка: ', - Component: Label, - props: { - name: 'lblOpportunity', - computedValueName: 'opportunityName', - }, - }, - { - type: ElementType.Button, - Component: Button, - props: { - name: 'btnCalculate', - actionName: 'calculate', - text: 'Рассчитать график', - type: 'primary', - }, - }, - ], - }, - ], - }, -]; export const calculationResults: IGroup[] = [ { blocks: [ { + title: 'Результаты', elements: [ { - type: ElementType.Table, - title: 'График платежей', - Component: Table, + title: 'Итого по графику, с НДС', + Component: Label, props: { - name: 'tableResults', - features: { - numerize: { - columnTitle: 'Номер', - }, - }, - columns: [ - { - name: 'paymentSum', - title: 'Сумма платежа', - Component: InputNumber, - }, - { - name: 'ndsCompensation', - title: 'НДС к возмещению', - Component: InputNumber, - }, - { - name: 'redemptionAmount', - title: 'Сумма досрочного выкупа', - Component: InputNumber, - }, - ], + name: 'labelResultTotalGraphwithNDS', + valueName: 'resultTotalGraphwithNDS', + }, + }, + { + title: 'Стоимость ПЛ, руб. с НДС', + Component: Label, + props: { + name: 'labelResultPlPrice', + valueName: 'resultPlPrice', + }, + }, + { + title: 'Удорожание, год', + Component: Label, + props: { + name: 'labelResultPriceUp', + valueName: 'resultPriceUp', + }, + }, + { + title: 'IRR по графику клиента, %', + Component: Label, + props: { + name: 'labelResultIRRGraphPerc', + valueName: 'resultIRRGraphPerc', + }, + }, + { + title: 'IRR (номинал), %', + Component: Label, + props: { + name: 'labelResultIRRNominalPerc', + valueName: 'resultIRRNominalPerc', + }, + }, + { + title: 'КАСКО, НС, ДГО в графике', + Component: Label, + props: { + name: 'labelResultInsKasko', + valueName: 'resultInsKasko', + }, + }, + { + title: 'ОСАГО в графике', + Component: Label, + props: { + name: 'labelResultInsOsago', + valueName: 'resultInsOsago', + }, + }, + { + title: 'Общая сумма доп.продуктов', + Component: Label, + props: { + name: 'labelResultDopProdSum', + valueName: 'resultDopProdSum', + }, + }, + { + title: 'Первый платеж, руб.', + Component: Label, + props: { + name: 'labelResultFirstPayment', + valueName: 'resultFirstPayment', + }, + }, + { + title: 'Последний платеж, руб.', + Component: Label, + props: { + name: 'labelResultLastPayment', + valueName: 'resultLastPayment', + }, + }, + { + title: 'Срок, мес.', + Component: Label, + props: { + name: 'labelResultTerm', + valueName: 'resultTerm', + }, + }, + { + title: 'АВ, руб.', + Component: Label, + props: { + name: 'labelResultAB', + valueName: 'resultAB', + }, + }, + { + title: 'Бонус МПЛ за лизинг', + Component: Label, + props: { + name: 'labelResultBonusMPL', + valueName: 'resultBonusMPL', }, }, ], diff --git a/src/client/Containers/Calculation/ResultsTable/index.jsx b/src/client/Containers/Calculation/ResultsTable/index.jsx new file mode 100644 index 0000000..8d08e8e --- /dev/null +++ b/src/client/Containers/Calculation/ResultsTable/index.jsx @@ -0,0 +1,14 @@ +import { renderGroups } from 'client/Containers/Calculation/lib/renderSections'; +import Background from 'client/Elements/Background'; +import { Box, Flex } from 'client/UIKit/grid'; +import React from 'react'; +import { resultsTable } from './restultTableList'; + +const Results = props => ( + + + {renderGroups({ groups: resultsTable })} + +); + +export default Results; diff --git a/src/client/Containers/Calculation/ResultsTable/restultTableList.ts b/src/client/Containers/Calculation/ResultsTable/restultTableList.ts new file mode 100644 index 0000000..47cc8e6 --- /dev/null +++ b/src/client/Containers/Calculation/ResultsTable/restultTableList.ts @@ -0,0 +1,49 @@ +import InputNumber from 'client/Elements/InputNumber'; +import Table from 'client/Elements/Table'; +import { IGroup } from 'core/types/Calculation/components'; +import { ElementType } from 'core/types/Calculation/Store/elements'; + + +export const resultsTable: IGroup[] = [ + { + blocks: [ + { + layout: { + newLine: true, + }, + elements: [ + { + type: ElementType.Table, + title: 'График платежей', + Component: Table, + props: { + name: 'tableResults', + features: { + numerize: { + columnTitle: 'Номер', + }, + }, + columns: [ + { + name: 'paymentSum', + title: 'Сумма платежа', + Component: InputNumber, + }, + { + name: 'ndsCompensation', + title: 'НДС к возмещению', + Component: InputNumber, + }, + { + name: 'redemptionAmount', + title: 'Сумма досрочного выкупа', + Component: InputNumber, + }, + ], + }, + }, + ], + }, + ], + }, +]; diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx index 33c7494..2fd7e39 100644 --- a/src/client/Containers/Calculation/index.jsx +++ b/src/client/Containers/Calculation/index.jsx @@ -8,6 +8,8 @@ import React, { useEffect, useState } from 'react'; import fetchData from './lib/fetchData'; import Results from './Results'; import Sections from './Sections'; +import ResultsTable from './ResultsTable'; +import Info from './Info'; const Calculation = () => { const [status, setStatus] = useState(LoadingStatus.loading); @@ -40,8 +42,42 @@ const Calculation = () => { justifyContent="center" minHeight="800px" > - - + + + + + + + + ); diff --git a/src/client/Elements/Table.jsx b/src/client/Elements/Table.jsx index 93387d2..d2a49b5 100644 --- a/src/client/Elements/Table.jsx +++ b/src/client/Elements/Table.jsx @@ -8,6 +8,7 @@ import { Button as AntButton } from 'antd'; const TableWrapper = styled(Box)` table { + table-layout: fixed; width: 100%; text-align: left; border-radius: 2px 2px 0 0; diff --git a/src/core/types/Calculation/Store/elements.ts b/src/core/types/Calculation/Store/elements.ts index 3392176..b0b6fd6 100644 --- a/src/core/types/Calculation/Store/elements.ts +++ b/src/core/types/Calculation/Store/elements.ts @@ -134,6 +134,21 @@ export type ElementsNames = | 'selectTelematic' | 'selectTracker'; +export type ResultElementsNames = + | 'labelResultTotalGraphwithNDS' + | 'labelResultPlPrice' + | 'labelResultPriceUp' + | 'labelResultIRRGraphPerc' + | 'labelResultIRRNominalPerc' + | 'labelResultInsKasko' + | 'labelResultInsOsago' + | 'labelResultDopProdSum' + | 'labelResultFirstPayment' + | 'labelResultLastPayment' + | 'labelResultTerm' + | 'labelResultAB' + | 'labelResultBonusMPL'; + export enum ElementType { Default, Table, @@ -141,5 +156,5 @@ export enum ElementType { } export type TElements = { - [elementName in ElementsNames]?: T; + [elementName in ElementsNames & ResultElementsNames]?: T; }; diff --git a/src/core/types/Calculation/Store/values.ts b/src/core/types/Calculation/Store/values.ts index 38059ce..aa05ae9 100644 --- a/src/core/types/Calculation/Store/values.ts +++ b/src/core/types/Calculation/Store/values.ts @@ -126,8 +126,23 @@ export type ComputedValuesNames = | 'leaseObjectRiskName' | 'insKaskoPriceLeasePeriod'; +export type ResultValuesNames = + | 'resultTotalGraphwithNDS' + | 'resultPlPrice' + | 'resultPriceUp' + | 'resultIRRGraphPerc' + | 'resultIRRNominalPerc' + | 'resultInsKasko' + | 'resultInsOsago' + | 'resultDopProdSum' + | 'resultFirstPayment' + | 'resultLastPayment' + | 'resultTerm' + | 'resultAB' + | 'resultBonusMPL'; + export type TValues = { - [valueName in ValuesNames]?: T; + [valueName in ValuesNames | ResultValuesNames]?: T; }; export type TValue = any; diff --git a/src/core/types/Calculation/components.ts b/src/core/types/Calculation/components.ts index 969cb5d..364bba3 100644 --- a/src/core/types/Calculation/components.ts +++ b/src/core/types/Calculation/components.ts @@ -1,15 +1,23 @@ -import { TableNames, TableValuesNames } from './Store/tables'; import { ActionsNames } from './Store/effect'; -import { ElementsNames, ElementType } from './Store/elements'; -import { ComputedValuesNames, ValuesNames } from './Store/values'; +import { + ElementsNames, + ElementType, + ResultElementsNames, +} from './Store/elements'; +import { TableNames, TableValuesNames } from './Store/tables'; +import { + ComputedValuesNames, + ResultValuesNames, + ValuesNames, +} from './Store/values'; interface IElement { type?: ElementType; title?: string; Component: () => JSX.Element; props: { - name: ElementsNames | TableNames; - valueName?: ValuesNames; + name: ElementsNames | ResultElementsNames | TableNames; + valueName?: ValuesNames | ResultValuesNames; computedValueName?: ComputedValuesNames; actionName?: ActionsNames; [key: string]: any; @@ -39,6 +47,7 @@ interface ITable { interface IBlock { title?: string; elements: IElement[] | ITable[]; + layout?: { [key: string]: any }; [key: string]: any; }