diff --git a/craco.config.js b/craco.config.js index 9354b43..49d3f98 100644 --- a/craco.config.js +++ b/craco.config.js @@ -37,6 +37,7 @@ module.exports = { }, }, ], + ['babel-plugin-styled-components'], ], }, }; diff --git a/package.json b/package.json index a44e83d..de1b9de 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@testing-library/user-event": "^12.1.10", "antd": "^4.15.5", "axios": "^0.21.1", + "babel-plugin-styled-components": "^1.13.2", "babel-plugin-transform-imports": "^2.0.0", "craco-antd": "^1.19.0", "craco-esbuild": "^0.3.4", diff --git a/src/client/Components/Result.jsx b/src/client/Components/Result.jsx index 93c3d0c..01086ce 100644 --- a/src/client/Components/Result.jsx +++ b/src/client/Components/Result.jsx @@ -2,7 +2,12 @@ import { Result } from 'antd'; export default { 404: () => , - 500: () => ( - + 500: props => ( + ), }; diff --git a/src/client/Containers/Calculation/Results/index.jsx b/src/client/Containers/Calculation/Results/index.jsx index 61304d4..c18eb7d 100644 --- a/src/client/Containers/Calculation/Results/index.jsx +++ b/src/client/Containers/Calculation/Results/index.jsx @@ -1,13 +1,10 @@ -import { renderGroups } from 'client/Containers/Calculation/lib/renderSections'; +import { renderSections } from 'client/Containers/Calculation/lib/renderSections'; import Background from 'client/Elements/Background'; -import { Flex } from 'client/UIKit/grid'; import { calculationResults } from './resultsList'; const Results = props => ( - - {renderGroups({ groups: calculationResults })} - + {renderSections({ sectionsList: calculationResults })} ); diff --git a/src/client/Containers/Calculation/Results/resultsList.ts b/src/client/Containers/Calculation/Results/resultsList.ts index 3818e48..1f6a019 100644 --- a/src/client/Containers/Calculation/Results/resultsList.ts +++ b/src/client/Containers/Calculation/Results/resultsList.ts @@ -1,28 +1,51 @@ -import { IGroup } from 'core/types/Calculation/components'; +import { ISection } from 'core/types/Calculation/components'; -export const calculationResults: IGroup[] = [ +export const calculationResults: ISection[] = [ { - style: { columnsNumber: 1 }, - blocks: [ + title: 'График платежей', + groups: [ { - title: 'Результаты', - elements: [ - 'labelResultTotalGraphwithNDS', - 'labelResultPlPrice', - 'labelResultPriceUpPr', - 'labelResultIRRGraphPerc', - 'labelResultIRRNominalPerc', - 'labelResultInsKasko', - 'labelResultInsOsago', - 'labelResultDopProdSum', - 'labelResultFirstPayment', - 'labelResultLastPayment', - 'labelResultTerm', - 'labelResultAB_FL', - 'labelResultAB_UL', - 'labelResultBonusMPL', - 'labelResultDopMPLLeasing', - 'labelResultBonusDopProd', + style: { columnsNumber: 1 }, + blocks: [ + { + elements: ['tableResults'], + }, + ], + }, + ], + }, + { + title: 'Результаты', + groups: [ + { + style: { columnsNumber: 1 }, + blocks: [ + { + style: { columnsNumber: 2 }, + elementStyle: { + head: { + whiteSpace: 'normal', + }, + }, + elements: [ + 'labelResultTotalGraphwithNDS', + 'labelResultPlPrice', + 'labelResultPriceUpPr', + 'labelResultIRRGraphPerc', + 'labelResultIRRNominalPerc', + 'labelResultInsKasko', + 'labelResultInsOsago', + 'labelResultDopProdSum', + 'labelResultFirstPayment', + 'labelResultLastPayment', + 'labelResultTerm', + 'labelResultAB_FL', + 'labelResultAB_UL', + 'labelResultBonusMPL', + 'labelResultDopMPLLeasing', + 'labelResultBonusDopProd', + ], + }, ], }, ], diff --git a/src/client/Containers/Calculation/ResultsTable/index.jsx b/src/client/Containers/Calculation/ResultsTable/index.jsx deleted file mode 100644 index e1e68fd..0000000 --- a/src/client/Containers/Calculation/ResultsTable/index.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { renderGroups } from 'client/Containers/Calculation/lib/renderSections'; -import Background from 'client/Elements/Background'; -import { Flex } from 'client/UIKit/grid'; -import { resultsTable } from './resultsTableList'; - -const Results = props => ( - - {renderGroups({ groups: resultsTable })} - -); - -export default Results; diff --git a/src/client/Containers/Calculation/ResultsTable/resultsTableList.ts b/src/client/Containers/Calculation/ResultsTable/resultsTableList.ts deleted file mode 100644 index c3f84fb..0000000 --- a/src/client/Containers/Calculation/ResultsTable/resultsTableList.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { IGroup } from 'core/types/Calculation/components'; - -export const resultsTable: IGroup[] = [ - { - style: { columnsNumber: 1 }, - blocks: [ - { - title: 'График платежей', - elements: ['tableResults'], - }, - ], - }, -]; diff --git a/src/client/Containers/Calculation/Sections/sectionsList.ts b/src/client/Containers/Calculation/Sections/sectionsList.ts index 1757209..e67cbc1 100644 --- a/src/client/Containers/Calculation/Sections/sectionsList.ts +++ b/src/client/Containers/Calculation/Sections/sectionsList.ts @@ -397,20 +397,22 @@ const sections: ISection[] = [ title: 'Создание КП', groups: [ { + style: { columnsNumber: 1 }, blocks: [ { + style: { columnsNumber: 2 }, + elementStyle: { + head: { + whiteSpace: 'normal', + }, + }, elements: [ 'cbxLastPaymentRedemption', 'cbxPriceWithDiscount', 'cbxFullPriceWithDiscount', 'cbxCostIncrease', - ], - }, - { - elements: ['cbxInsurance', 'cbxRegistrationQuote'], - }, - { - elements: [ + 'cbxInsurance', + 'cbxRegistrationQuote', 'cbxTechnicalCardQuote', 'cbxNSIB', 'cbxQuoteRedemptionGraph', @@ -419,24 +421,21 @@ const sections: ISection[] = [ ], }, { - style: { columnsNumber: 2 }, + style: { columnsNumber: 1 }, blocks: [ { - elements: ['tbxQuoteName'], - }, - { - elements: ['radioQuoteContactGender'], + style: { columnsNumber: 2 }, + elements: ['tbxQuoteName', 'radioQuoteContactGender'], }, ], }, { - style: { columnsNumber: 2 }, + style: { columnsNumber: 1 }, blocks: [ { - elements: ['btnCreateKP'], - }, - { - elements: ['linkDownloadKp'], + style: { columnsNumber: 2 }, + + elements: ['btnCreateKP', 'linkDownloadKp'], }, ], }, diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx index e14131b..dc19e64 100644 --- a/src/client/Containers/Calculation/index.jsx +++ b/src/client/Containers/Calculation/index.jsx @@ -1,14 +1,14 @@ import Result from 'client/Components/Result'; import Spinner from 'client/Components/Spinner'; +import Button from 'client/Elements/Button'; import { CenterContent } from 'client/Elements/Wrapper'; import { useFetch } from 'client/hooks/Calculation/useFetch'; -import { Box, Flex } from 'client/UIKit/grid'; +import { Box } from 'client/UIKit/grid'; import mq from 'client/UIKit/mq'; import styled from 'styled-components'; import Info from './Info'; import fetchData from './lib/fetchData'; import Results from './Results'; -import ResultsTable from './ResultsTable'; import Sections from './Sections'; const Grid = styled(Box)` @@ -25,15 +25,8 @@ const Grid = styled(Box)` `} `; -const Middle = () => ( - - - - -); - const Calculation = () => { - const { isLoading, error } = useFetch({ fetchData }); + const { isLoading, error, fetch } = useFetch({ fetchData }); if (isLoading) { return ( @@ -45,14 +38,18 @@ const Calculation = () => { if (error) { const ServerError = Result[500]; - return ; + return ( + ]} + /> + ); } return ( - - + + ); }; diff --git a/src/client/Containers/Calculation/lib/renderSections.js b/src/client/Containers/Calculation/lib/renderSections.js index 12aaa83..b6c8834 100644 --- a/src/client/Containers/Calculation/lib/renderSections.js +++ b/src/client/Containers/Calculation/lib/renderSections.js @@ -17,10 +17,10 @@ const ElementTitle = styled.h5` margin: 0 8px 3px 0; text-overflow: ellipsis; overflow: hidden; - white-space: nowrap; + white-space: ${props => props.whiteSpace || 'nowrap'}; `; -const Head = ({ sub, elementTitle }) => { +const Head = ({ sub, elementTitle, style }) => { if (sub?.Component) { return ( { justifyContent={[undefined, 'space-between']} alignItems={[undefined, 'center']} > - {elementTitle} + {elementTitle} ); } - return {elementTitle}; + return {elementTitle}; }; -const renderElements = ({ elements }) => { +const renderElements = ({ elements, elementStyle }) => { return elements.map((elementName, ie) => { const elementTitle = elementsTitles[elementName]; const { tooltip, sub, ...elementProps } = elementsProps[elementName] || {}; @@ -46,7 +46,11 @@ const renderElements = ({ elements }) => { const element = ( - + ); @@ -57,16 +61,29 @@ const renderElements = ({ elements }) => { }); }; +const ElementsGrid = styled(Box)` + display: grid; + grid-gap: 10px; + + grid-template-columns: 1fr; + ${mq.laptop` + grid-template-columns: repeat(${props => + props.columnsNumber || props.defaultColumnsNumber}, 1fr); + `} +`; + const renderBlocks = ({ blocks }) => { if (!blocks || blocks.length === 0) { return null; } return blocks.map((block, ib) => { - const { elements, title } = block; + const { elements, title, style, elementStyle } = block; return ( {title && {title}} - {renderElements({ elements })} + + {renderElements({ elements, elementStyle })} + ); }); @@ -78,17 +95,6 @@ const BlocksTitle = styled(Divider)` font-size: 0.95rem; `; -const BlocksGrid = styled(Box)` - display: grid; - grid-gap: 10px; - - grid-template-columns: 1fr; - ${mq.laptop` - grid-template-columns: repeat(${props => - props.columnsNumber || 2}, 1fr); - `} -`; - export const renderGroups = ({ groups }) => { if (!groups || groups.length === 0) { return null; @@ -99,7 +105,9 @@ export const renderGroups = ({ groups }) => { return ( {title && {title}} - {renderBlocks({ blocks })} + + {renderBlocks({ blocks })} + ); }); diff --git a/src/client/hooks/Calculation/useFetch.js b/src/client/hooks/Calculation/useFetch.js index 2a030b6..23d86dc 100644 --- a/src/client/hooks/Calculation/useFetch.js +++ b/src/client/hooks/Calculation/useFetch.js @@ -5,7 +5,9 @@ export const useFetch = ({ fetchData }) => { const [error, setError] = useState(); const [isLoading, setIsLoading] = useState(false); - useEffect(() => { + function fetch() { + setError(false); + setResponse(undefined); setIsLoading(true); fetchData() .then(res => { @@ -17,6 +19,10 @@ export const useFetch = ({ fetchData }) => { .finally(() => { setIsLoading(false); }); + } + + useEffect(() => { + fetch(); }, []); - return { response, isLoading, error }; + return { response, isLoading, error, fetch }; };