groups list for results
This commit is contained in:
Владислав Чикалкин
parent
a341d3fd47
commit
0ca4002c8c
@ -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 => (
|
||||
<Background {...props}>
|
||||
<SecondaryText>Интерес: </SecondaryText>
|
||||
<SecondaryText>Лизинговая сделка: </SecondaryText>
|
||||
{renderGroups({ groups: resultsList })}
|
||||
<Divider style={styles.divider} />
|
||||
<Flex justifyContent="center">
|
||||
<Title text="Результаты" />
|
||||
|
||||
77
src/client/Containers/Calculation/Results/resultsList.ts
Normal file
77
src/client/Containers/Calculation/Results/resultsList.ts
Normal file
@ -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;
|
||||
@ -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;
|
||||
|
||||
12
src/client/Containers/Calculation/lib/buildElement.js
Normal file
12
src/client/Containers/Calculation/lib/buildElement.js
Normal file
@ -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);
|
||||
}
|
||||
103
src/client/Containers/Calculation/lib/renderSections.js
Normal file
103
src/client/Containers/Calculation/lib/renderSections.js
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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;
|
||||
`;
|
||||
|
||||
@ -18,7 +18,7 @@ interface IBlock {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface IGroup {
|
||||
export interface IGroup {
|
||||
title?: string;
|
||||
blocks?: IBlock[];
|
||||
}
|
||||
|
||||
@ -132,7 +132,9 @@ export type ElementsNames =
|
||||
| 'tbxLeadNumber'
|
||||
| 'tbxOpportunityNumber'
|
||||
| 'radioInsuranceOPF'
|
||||
| 'tableInsurance';
|
||||
| 'tableInsurance'
|
||||
| 'lblLead'
|
||||
| 'lblOpportunity';
|
||||
|
||||
export type TElements<T> = {
|
||||
[elementName in ElementsNames]?: T;
|
||||
|
||||
Reference in New Issue
Block a user