add results block

2020-11-17 12:33:13 +03:00 · 2020-11-17 12:33:13 +03:00 · 261e082f60
commit 261e082f60
parent 05ca1caee6
11 changed files with 304 additions and 80 deletions
--- a/src/client/Containers/Calculation/Info/index.jsx
+++ 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 => (
+  <Background {...props} px="16px">
+    {renderGroups({ groups: controlsList })}
+  </Background>
+);
+
+export default Results;
--- a/src/client/Containers/Calculation/Info/infoList.ts
+++ 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',
+            },
+          },
+        ],
+      },
+    ],
+  },
+];
--- 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 => (
  <Background {...props}>
    <Box my="8px" />
-    {renderGroups({ groups: resultInfo })}
-    <Divider style={styles.divider} />
    <Flex flexDirection="column">
      {renderGroups({ groups: calculationResults })}
    </Flex>
--- 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',
            },
          },
        ],
--- a/src/client/Containers/Calculation/ResultsTable/index.jsx
+++ 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 => (
+  <Background {...props}>
+    <Box my="8px" />
+    <Flex flexDirection="column">{renderGroups({ groups: resultsTable })}</Flex>
+  </Background>
+);
+
+export default Results;
--- a/src/client/Containers/Calculation/ResultsTable/restultTableList.ts
+++ 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,
+                },
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+];
--- 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"
    >
-      <Sections width={['100%', '100%', '100%', '700px', '900px', '1200px']} />
-      <Results width={['100%', '100%', '100%', '500px', '600px']} />
+      <Sections
+        width={['100vw', '100vw', '100vw', '700px', '850px', '1200px']}
+      />
+      <Flex
+        flexDirection={[
+          'column',
+          'column',
+          'column',
+          'column',
+          'column',
+          'row',
+        ]}
+        // width="100vw"
+      >
+        <Flex
+          flexDirection="column"
+          // width={['100vw', '100vw', '100vw', '100%', '470px', '375px', '550px']}
+        >
+          <Info />
+          <Results
+            width={[
+              '100vw',
+              '100vw',
+              '100vw',
+              '500px',
+              '470px',
+              '375px',
+              '550px',
+            ]}
+          />
+        </Flex>
+        <ResultsTable
+          minHeight="500px"
+          width={['100vw', '100vw', '100vw', '500px', '470px', '550px']}
+        />
+      </Flex>
      <ModalComponent />
    </Flex>
  );
--- 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;
--- 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<T> = {
-  [elementName in ElementsNames]?: T;
+  [elementName in ElementsNames & ResultElementsNames]?: T;
 };
--- 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<T> = {
-  [valueName in ValuesNames]?: T;
+  [valueName in ValuesNames | ResultValuesNames]?: T;
 };

 export type TValue = any;
--- 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;
 }