diff --git a/src/client/Containers/Calculation/Results/index.jsx b/src/client/Containers/Calculation/Results/index.jsx index 8cfa5a0..4eabb3e 100644 --- a/src/client/Containers/Calculation/Results/index.jsx +++ b/src/client/Containers/Calculation/Results/index.jsx @@ -1,14 +1,14 @@ import { Divider } from 'antd'; +import { renderGroups } from 'client/Containers/Calculation/lib/renderSections'; import Background from 'client/Elements/Background'; -import { SecondaryText } from 'client/Elements/Text'; import Title from 'client/Elements/Title'; -import React from 'react'; import { Flex } from 'client/UIKit/grid'; +import React from 'react'; +import resultsList from './resultsList'; const Results = props => ( - Интерес: - Лизинговая сделка: + {renderGroups({ groups: resultsList })} diff --git a/src/client/Containers/Calculation/Results/resultsList.ts b/src/client/Containers/Calculation/Results/resultsList.ts new file mode 100644 index 0000000..8262ede --- /dev/null +++ b/src/client/Containers/Calculation/Results/resultsList.ts @@ -0,0 +1,77 @@ +import Label from 'client/Elements/Label'; +import Select from 'client/Elements/Select'; +import Switch from 'client/Elements/Switch'; +import { IGroup } from 'core/types/Calculation/components'; + +const resultsList: IGroup[] = [ + { + blocks: [ + { + elements: [ + { + title: 'Интерес: ', + Component: Label, + props: { + name: 'lblLead', + valueName: 'lead', + }, + }, + { + title: 'Лизинговая сделка: ', + Component: Label, + props: { + name: 'lblOpportunity', + valueName: 'opportunity', + }, + }, + ], + }, + ], + }, + // { + // title: 'Поиск интереса в CRM', + // blocks: [ + // { + // elements: [ + // { + // title: 'Выбор Интереса', + // Component: Select, + // props: { + // name: 'selectLead', + // valueName: 'lead', + // showSearch: true, + // }, + // }, + // { + // title: 'Лизинговая сделка', + // Component: Select, + // props: { + // name: 'selectOpportunity', + // valueName: 'opportunity', + // showSearch: true, + // }, + // }, + // { + // title: 'Выбор Предложения', + // Component: Select, + // props: { + // name: 'selectQuote', + // valueName: 'quote', + // showSearch: true, + // }, + // }, + // { + // title: 'Пересчет без пересмотра', + // Component: Switch, + // props: { + // name: 'cbxRecalcWithRevision', + // valueName: 'recalcWithRevision', + // }, + // }, + // ], + // }, + // ], + // }, +]; + +export default resultsList; diff --git a/src/client/Containers/Calculation/Sections/index.jsx b/src/client/Containers/Calculation/Sections/index.jsx index b82edaf..1acbb12 100644 --- a/src/client/Containers/Calculation/Sections/index.jsx +++ b/src/client/Containers/Calculation/Sections/index.jsx @@ -1,114 +1,10 @@ -import { Divider as AntDivider, Tabs } from 'antd'; import Background from 'client/Elements/Background'; -import { SecondaryColoredText } from 'client/Elements/Text'; -import { withStoreValue, withTableData } from 'client/hocs/withStore'; -import colors from 'client/UIKit/colors'; -import { Flex } from 'client/UIKit/grid'; import React from 'react'; -import styled from 'styled-components'; -import sectionsList from './list'; - -const ElementTitle = styled.h5` - color: rgba(0, 0, 0, 0.75); - font-weight: 600; - font-size: 14px; - line-height: 1.5; - margin: 0 8px 3px 0; -`; - -const BreakLine = styled.div` - width: 100%; -`; - -function buildElement({ isTable, Component: Element, props: elementProps }) { - if (isTable) { - return withTableData(Element)(elementProps); - } - return withStoreValue(Element)(elementProps); -} - -const renderElements = ({ elements }) => { - return elements.map(({ title: elementTitle, ...element }, ie) => { - const Component = buildElement(element); - return ( - <Flex flexDirection="column" key={ie}> - <ElementTitle>{elementTitle}</ElementTitle> - <Component /> - </Flex> - ); - }); -}; - -const renderBlocks = ({ blocks }) => { - if (!blocks || blocks.length === 0) { - return null; - } - return blocks.map((block, ib) => { - const { elements, title: blockTitle, layout } = block; - const newLine = layout && layout.newLine; - const width = (layout && layout.width) || '45%'; - return ( - <React.Fragment key={ib}> - {newLine && <BreakLine />} - <Flex - flexDirection="column" - flex={[ - '1 1 100%', - '1 1 100%', - `2 0 ${width}`, - `2 0 ${width}`, - `2 0 ${width}`, - '3 0 30%', - ]} - mx="10px" - > - {blockTitle && ( - <SecondaryColoredText>{blockTitle}</SecondaryColoredText> - )} - {renderElements({ elements })} - </Flex> - {/* {!isSingleElement && blocks.length > 1 && ib < blocks.length - 2 && ( - <VerticalDivider /> - )} */} - </React.Fragment> - ); - }); -}; - -const renderGroups = ({ groups }) => { - if (!groups || groups.length === 0) { - return null; - } - return groups.map((group, ig) => { - const { title: blocksTitle, blocks } = group; - return ( - <React.Fragment key={ig}> - {blocksTitle && ( - <AntDivider style={{ margin: '16px 0', color: colors.blueTemp[100] }}> - {blocksTitle} - </AntDivider> - )} - <Flex flexDirection="row" flexWrap="wrap"> - {renderBlocks({ blocks })} - </Flex> - </React.Fragment> - ); - }); -}; +import { renderSections } from '../lib/renderSections'; +import sectionsList from './sectionsList'; const Sections = props => ( - <Background {...props}> - <Tabs type="line"> - {sectionsList.map((section, is) => { - const { title: tabTitle, groups } = section; - return ( - <Tabs.TabPane tab={tabTitle} key={is}> - {renderGroups({ groups })} - </Tabs.TabPane> - ); - })} - </Tabs> - </Background> + <Background {...props}>{renderSections({ sectionsList })}</Background> ); export default Sections; diff --git a/src/client/Containers/Calculation/Sections/list.ts b/src/client/Containers/Calculation/Sections/sectionsList.ts similarity index 100% rename from src/client/Containers/Calculation/Sections/list.ts rename to src/client/Containers/Calculation/Sections/sectionsList.ts diff --git a/src/client/Containers/Calculation/lib/buildElement.js b/src/client/Containers/Calculation/lib/buildElement.js new file mode 100644 index 0000000..c4847f8 --- /dev/null +++ b/src/client/Containers/Calculation/lib/buildElement.js @@ -0,0 +1,12 @@ +import { withStoreValue, withTableData } from 'client/hocs/withStore'; + +export function buildElement({ + isTable, + Component: Element, + props: elementProps, +}) { + if (isTable) { + return withTableData(Element)(elementProps); + } + return withStoreValue(Element)(elementProps); +} diff --git a/src/client/Containers/Calculation/lib/renderSections.js b/src/client/Containers/Calculation/lib/renderSections.js new file mode 100644 index 0000000..6d0b3a5 --- /dev/null +++ b/src/client/Containers/Calculation/lib/renderSections.js @@ -0,0 +1,103 @@ +import { Divider as AntDivider, Tabs } from 'antd'; +import { SecondaryColoredText } from 'client/Elements/Text'; +import colors from 'client/UIKit/colors'; +import { Flex } from 'client/UIKit/grid'; +import React from 'react'; +import styled from 'styled-components'; +import { buildElement } from '../lib/buildElement'; + +const ElementTitle = styled.h5` + color: rgba(0, 0, 0, 0.75); + font-weight: 600; + font-size: 14px; + line-height: 1.5; + margin: 0 8px 3px 0; +`; + +const BreakLine = styled.div` + width: 100%; +`; + +const renderElements = ({ elements }) => { + return elements.map(({ title: elementTitle, ...element }, ie) => { + const Component = buildElement(element); + return ( + <Flex flexDirection="column" key={ie}> + <ElementTitle>{elementTitle}</ElementTitle> + <Component /> + </Flex> + ); + }); +}; + +const renderBlocks = ({ blocks }) => { + if (!blocks || blocks.length === 0) { + return null; + } + return blocks.map((block, ib) => { + const { elements, title: blockTitle, layout } = block; + const newLine = layout && layout.newLine; + const width = (layout && layout.width) || '45%'; + return ( + <React.Fragment key={ib}> + {newLine && <BreakLine />} + <Flex + flexDirection="column" + flex={[ + '1 1 100%', + '1 1 100%', + `2 0 ${width}`, + `2 0 ${width}`, + `2 0 ${width}`, + '3 0 30%', + ]} + mx="10px" + > + {blockTitle && ( + <SecondaryColoredText>{blockTitle}</SecondaryColoredText> + )} + {renderElements({ elements })} + </Flex> + {/* {!isSingleElement && blocks.length > 1 && ib < blocks.length - 2 && ( + <VerticalDivider /> + )} */} + </React.Fragment> + ); + }); +}; + +export const renderGroups = ({ groups }) => { + if (!groups || groups.length === 0) { + return null; + } + return groups.map((group, ig) => { + const { title: blocksTitle, blocks } = group; + return ( + <React.Fragment key={ig}> + {blocksTitle && ( + <AntDivider style={{ margin: '16px 0', color: colors.blueTemp[100] }}> + {blocksTitle} + </AntDivider> + )} + <Flex flexDirection="row" flexWrap="wrap"> + {renderBlocks({ blocks })} + </Flex> + </React.Fragment> + ); + }); +}; + +export const renderSections = ({ sectionsList }) => { + return ( + <Tabs type="line"> + {sectionsList.map((section, is) => { + const { title: tabTitle, groups } = section; + return ( + <Tabs.TabPane tab={tabTitle} key={is}> + {renderGroups({ groups })} + </Tabs.TabPane> + ); + })} + </Tabs> + ); +}; diff --git a/src/client/Elements/Label.jsx b/src/client/Elements/Label.jsx index 4e09db9..a7bb6c0 100644 --- a/src/client/Elements/Label.jsx +++ b/src/client/Elements/Label.jsx @@ -1,7 +1,9 @@ import React from 'react'; import styled from 'styled-components'; -const TextWrapper = styled.div``; +const TextWrapper = styled.div` + margin-bottom: 18px; +`; const Text = styled.span` font-size: 0.85rem; `; diff --git a/src/core/types/Calculation/components.ts b/src/core/types/Calculation/components.ts index f074ddd..5f96194 100644 --- a/src/core/types/Calculation/components.ts +++ b/src/core/types/Calculation/components.ts @@ -18,7 +18,7 @@ interface IBlock { [key: string]: any; } -interface IGroup { +export interface IGroup { title?: string; blocks?: IBlock[]; } diff --git a/src/core/types/elements.ts b/src/core/types/elements.ts index 3b225e4..a1c0d14 100644 --- a/src/core/types/elements.ts +++ b/src/core/types/elements.ts @@ -132,7 +132,9 @@ export type ElementsNames = | 'tbxLeadNumber' | 'tbxOpportunityNumber' | 'radioInsuranceOPF' - | 'tableInsurance'; + | 'tableInsurance' + | 'lblLead' + | 'lblOpportunity'; export type TElements<T> = { [elementName in ElementsNames]?: T;