UI\UX improvements

2021-09-13 09:26:13 +03:00 · 2021-09-13 09:26:13 +03:00 · c0f0c3ced3
commit c0f0c3ced3
parent 4b004f0573
11 changed files with 118 additions and 106 deletions
--- a/craco.config.js
+++ b/craco.config.js
@ -37,6 +37,7 @@ module.exports = {
          },
        },
      ],
+      ['babel-plugin-styled-components'],
    ],
  },
 };
--- 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",
--- a/src/client/Components/Result.jsx
+++ b/src/client/Components/Result.jsx
@ -2,7 +2,12 @@ import { Result } from 'antd';

 export default {
  404: () => <Result status="404" title="404" subTitle="Ой! Тут ничего нет." />,
-  500: () => (
-    <Result status="500" title="" subTitle={'Ой! Что-то сломалось.'} />
+  500: props => (
+    <Result
+      status="500"
+      title=""
+      subTitle={'Ой! Что-то сломалось.'}
+      {...props}
+    />
  ),
 };
--- 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 => (
  <Background {...props}>
-    <Flex flexDirection="column">
-      {renderGroups({ groups: calculationResults })}
-    </Flex>
+    {renderSections({ sectionsList: calculationResults })}
  </Background>
 );

--- 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',
+            ],
+          },
        ],
      },
    ],
--- a/src/client/Containers/Calculation/ResultsTable/index.jsx
+++ b/src/client/Containers/Calculation/ResultsTable/index.jsx
@ -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 => (
-  <Background {...props}>
-    <Flex flexDirection="column">{renderGroups({ groups: resultsTable })}</Flex>
-  </Background>
-);
-
-export default Results;
--- a/src/client/Containers/Calculation/ResultsTable/resultsTableList.ts
+++ b/src/client/Containers/Calculation/ResultsTable/resultsTableList.ts
@ -1,13 +0,0 @@
-import { IGroup } from 'core/types/Calculation/components';
-
-export const resultsTable: IGroup[] = [
-  {
-    style: { columnsNumber: 1 },
-    blocks: [
-      {
-        title: 'График платежей',
-        elements: ['tableResults'],
-      },
-    ],
-  },
-];
--- 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'],
          },
        ],
      },
--- 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 = () => (
-  <Flex flexDirection="column" width={['100vw', '100vw', '100%']}>
-    <Info />
-    <Results />
-  </Flex>
-);
-
 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 <ServerError />;
+    return (
+      <ServerError
+        extra={[<Button text="Попробовать еще раз" action={fetch}></Button>]}
+      />
+    );
  }

  return (
    <Grid>
      <Sections width={['100vw', '100vw', '100%']} />
-      <Middle />
-      <ResultsTable minHeight="500px" width={['100vw', '100vw', '100%']} />
+      <Info width={['100vw', '100vw', '100%']} />
+      <Results minHeight="500px" width={['100vw', '100vw', '100%']} />
    </Grid>
  );
 };
--- 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 (
      <Flex
@ -28,15 +28,15 @@ const Head = ({ sub, elementTitle }) => {
        justifyContent={[undefined, 'space-between']}
        alignItems={[undefined, 'center']}
      >
-        <ElementTitle>{elementTitle}</ElementTitle>
+        <ElementTitle {...style}>{elementTitle}</ElementTitle>
        <sub.Component />
      </Flex>
    );
  }
-  return <ElementTitle>{elementTitle}</ElementTitle>;
+  return <ElementTitle {...style}>{elementTitle}</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 = (
      <Flex flexDirection="column" key={ie}>
-        <Head sub={sub} elementTitle={elementTitle} />
+        <Head
+          sub={sub}
+          elementTitle={elementTitle}
+          style={elementStyle?.head}
+        />
        <Component />
      </Flex>
    );
@ -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 (
      <Flex key={ib} flexDirection="column" flexWrap="nowrap">
        {title && <SecondaryColoredText>{title}</SecondaryColoredText>}
-        {renderElements({ elements })}
+        <ElementsGrid {...style} defaultColumnsNumber={1}>
+          {renderElements({ elements, elementStyle })}
+        </ElementsGrid>
      </Flex>
    );
  });
@ -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 (
      <Box key={ig} my="5px">
        {title && <BlocksTitle>{title}</BlocksTitle>}
-        <BlocksGrid {...style}>{renderBlocks({ blocks })}</BlocksGrid>
+        <ElementsGrid {...style} defaultColumnsNumber={2}>
+          {renderBlocks({ blocks })}
+        </ElementsGrid>
      </Box>
    );
  });
--- 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 };
 };