refactor tables

2021-04-26 18:20:37 +03:00 · 2021-04-26 18:20:37 +03:00 · f591f61310
commit f591f61310
parent 8bf84f9508
17 changed files with 627 additions and 613 deletions
--- a/src/client/Containers/Calculation/lib/buildElement.js
+++ b/src/client/Containers/Calculation/lib/buildElement.js
@ -3,9 +3,10 @@ import {
  withComputedValue,
  withLink,
  withTable,
-  withValue
+  withValue,
 } from 'client/hocs/Calculation';
 import { ElementType } from 'core/types/Calculation/Store/elements';
+import { omit } from 'lodash';
 import elementsActions from './elements/actions';
 import elementsComponents from './elements/components';
 import elementsComputedValues from './elements/computedValues';
@ -24,7 +25,7 @@ export function buildElement(elementName) {
    case ElementType.Table: {
      return withTable(Component)({
        name: elementName,
-        ...tables[elementName].props,
+        ...omit(tables[elementName], ['columns', 'rows', 'options']),
      });
    }
    case ElementType.Action: {
--- a/src/client/Containers/Calculation/lib/elements/tables.ts
+++ b/src/client/Containers/Calculation/lib/elements/tables.ts
@ -1,119 +0,0 @@
-import InputNumber from 'client/Elements/InputNumber';
-import { ITableElement } from 'core/types/Calculation/components';
-import { StoreTables } from 'core/types/Calculation/Store/tables';
-import Label from 'client/Elements/Label';
-import Select from 'client/Elements/Select';
-import { round } from 'lodash';
-
-const elementsTables: StoreTables<ITableElement> = {
-  tablePayments: {
-    props: {
-      features: {
-        canDeleteRow: false,
-        numerize: {
-          columnTitle: 'Номер платежа',
-        },
-      },
-      columns: [
-        {
-          name: 'paymentRelation',
-          title: 'Соотношение платежа',
-          Component: InputNumber,
-          props: {
-            min: '0.01',
-            max: '100.00',
-            step: '1.00',
-            precision: 2,
-            // TODO: toFixed
-            //numeral.js
-          },
-        },
-      ],
-    },
-  },
-  tableInsurance: {
-    props: {
-      columns: [
-        {
-          name: 'policyType',
-          title: 'Тип полиса',
-          Component: Label,
-        },
-        {
-          name: 'insuranceCompany',
-          title: 'Страховая компания',
-          Component: Select,
-          props: {
-            nameMiddleware: name => {
-              const targetName = name.match(/"(.+)"/);
-              if (targetName) {
-                return targetName[1]
-                  .replaceAll('"', String.fromCharCode(160))
-                  .trim();
-              }
-              return name;
-            },
-          },
-        },
-        {
-          name: 'insured',
-          title: 'Плательщик',
-          Component: Select,
-        },
-        {
-          name: 'insCost',
-          title: 'Стоимость за первый период',
-          Component: InputNumber,
-          props: {
-            min: '0.00',
-            max: '1500000.00',
-            step: '1000.00',
-          },
-        },
-        {
-          name: 'insTerm',
-          title: 'Срок страхования',
-          Component: Select,
-        },
-      ],
-    },
-  },
-  tableResults: {
-    props: {
-      features: {
-        numerize: {
-          columnTitle: 'Номер',
-        },
-      },
-
-      columns: [
-        {
-          name: 'paymentSum',
-          title: 'Сумма платежа',
-          Component: Label,
-          props: {
-            middleware: value => value && round(value, 2).toFixed(2),
-          },
-        },
-        {
-          name: 'ndsCompensation',
-          title: 'НДС к возмещению',
-          Component: Label,
-          props: {
-            middleware: value => value && round(value, 2).toFixed(2),
-          },
-        },
-        {
-          name: 'redemptionAmount',
-          title: 'Сумма досрочного выкупа',
-          Component: Label,
-          props: {
-            middleware: value => value && round(value, 2).toFixed(2),
-          },
-        },
-      ],
-    },
-  },
-};
-
-export default elementsTables;
--- a/src/client/Containers/Calculation/lib/elements/tables/index.js
+++ b/src/client/Containers/Calculation/lib/elements/tables/index.js
@ -0,0 +1,9 @@
+import insurance from './insurance';
+import payments from './payments';
+import results from './results';
+
+export default {
+  tableInsurance: insurance,
+  tablePayments: payments,
+  tableResults: results,
+};
--- a/src/client/Containers/Calculation/lib/elements/tables/insurance.ts
+++ b/src/client/Containers/Calculation/lib/elements/tables/insurance.ts
@ -0,0 +1,364 @@
+import InputNumber from 'client/Elements/InputNumber';
+import Label from 'client/Elements/Label';
+import { openNotification } from 'client/Elements/Notification';
+import Select from 'client/Elements/Select';
+import {
+  insuranceKaskoDefaultFilter,
+  insuranceOsagoDefaultFilter,
+} from 'core/constants/stores/Calculation/filters';
+import {
+  ITable,
+  TableColumn,
+  TableColumnCallbacks,
+  TableColumnOptions,
+  TableRow,
+} from 'core/types/Calculation/Store/tables';
+import { ElementStatus } from 'core/types/statuses';
+
+const columns: TableColumn[] = [
+  {
+    name: 'policyType',
+    title: 'Тип полиса',
+    Component: Label,
+  },
+  {
+    name: 'insuranceCompany',
+    title: 'Страховая компания',
+    Component: Select,
+    props: {
+      nameMiddleware: name => {
+        const targetName = name.match(/"(.+)"/);
+        if (targetName) {
+          return targetName[1].replaceAll('"', String.fromCharCode(160)).trim();
+        }
+        return name;
+      },
+    },
+  },
+  {
+    name: 'insured',
+    title: 'Плательщик',
+    Component: Select,
+  },
+  {
+    name: 'insCost',
+    title: 'Стоимость за первый период',
+    Component: InputNumber,
+    props: {
+      min: '0.00',
+      max: '1500000.00',
+      step: '1000.00',
+    },
+  },
+  {
+    name: 'insTerm',
+    title: 'Срок страхования',
+    Component: Select,
+  },
+];
+
+const rows: TableRow[] = [
+  {
+    policyType: {
+      value: 'ОСАГО',
+    },
+    insuranceCompany: {
+      value: null,
+      filter: insuranceOsagoDefaultFilter,
+    },
+    insured: {
+      value: 100000000,
+    },
+    insCost: {
+      value: 0,
+    },
+    insTerm: {
+      value: 100000000,
+      status: ElementStatus.Disabled,
+    },
+  },
+  {
+    policyType: {
+      value: 'КАСКО',
+    },
+    insuranceCompany: {
+      value: null,
+      filter: insuranceKaskoDefaultFilter,
+    },
+    insured: {
+      value: 100000000,
+    },
+    insCost: {
+      value: 0,
+    },
+    insTerm: {
+      value: null,
+      status: ElementStatus.Disabled,
+    },
+  },
+  {
+    policyType: {
+      value: 'ДГО',
+    },
+    insuranceCompany: {
+      value: null,
+      status: ElementStatus.Disabled,
+      filter: insuranceKaskoDefaultFilter,
+    },
+    insured: {
+      value: null,
+      status: ElementStatus.Disabled,
+    },
+    insCost: {
+      value: 0,
+    },
+    insTerm: {
+      value: null,
+      status: ElementStatus.Disabled,
+    },
+  },
+  {
+    policyType: {
+      value: 'НС',
+    },
+    insuranceCompany: {
+      value: null,
+      status: ElementStatus.Disabled,
+      filter: insuranceKaskoDefaultFilter,
+    },
+    insured: {
+      value: null,
+      status: ElementStatus.Disabled,
+    },
+    insCost: {
+      value: 0,
+    },
+    insTerm: {
+      value: null,
+      status: ElementStatus.Disabled,
+    },
+  },
+];
+
+const callbacks: TableColumnCallbacks = {
+  insCost: ({ calculationStore, tableName, rowIndex }) => {
+    if (
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
+        0 &&
+      !calculationStore.tables[tableName]?.rows[rowIndex]['insuranceCompany']
+        ?.value
+    ) {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insuranceCompany: {
+          validation: false,
+        },
+      });
+      openNotification({
+        type: 'error',
+        title: 'Ошибка',
+        description: 'Не указана страховая компания по полису',
+      })();
+    } else {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insuranceCompany: {
+          validation: true,
+        },
+      });
+    }
+
+    if (
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
+        0 &&
+      !calculationStore.tables[tableName]?.rows[rowIndex]['insTerm']?.value
+    ) {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insTerm: {
+          validation: false,
+        },
+      });
+      openNotification({
+        type: 'error',
+        title: 'Ошибка',
+        description: 'Не указан срок страхования',
+      })();
+    } else {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insTerm: {
+          validation: true,
+        },
+      });
+    }
+
+    if (
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
+        0 &&
+      !calculationStore.tables[tableName]?.rows[rowIndex]['insured']?.value
+    ) {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insured: {
+          validation: false,
+        },
+      });
+      openNotification({
+        type: 'error',
+        title: 'Ошибка',
+        description: 'Не указан плательщик',
+      })();
+    } else {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insured: {
+          validation: true,
+        },
+      });
+    }
+  },
+
+  insured: ({ calculationStore, tableName, rowIndex }) => {
+    if (
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
+        0 &&
+      !calculationStore.tables[tableName]?.rows[rowIndex]['insured']?.value
+    ) {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insured: {
+          validation: false,
+        },
+      });
+      openNotification({
+        type: 'error',
+        title: 'Ошибка',
+        description: 'Не указан плательщик',
+      })();
+    } else {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insured: {
+          validation: true,
+        },
+      });
+    }
+  },
+
+  insTerm: ({ calculationStore, tableName, rowIndex }) => {
+    if (
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
+        0 &&
+      !calculationStore.tables[tableName]?.rows[rowIndex]['insTerm']?.value
+    ) {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insTerm: {
+          validation: false,
+        },
+      });
+      openNotification({
+        type: 'error',
+        title: 'Ошибка',
+        description: 'Не указан срок страхования',
+      })();
+    } else {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insTerm: {
+          validation: true,
+        },
+      });
+    }
+  },
+  insuranceCompany: ({ calculationStore, tableName, rowIndex }) => {
+    if (
+      calculationStore.tables[tableName]?.rows[rowIndex] &&
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
+      calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
+        0 &&
+      !calculationStore.tables[tableName]?.rows[rowIndex]['insuranceCompany']
+        ?.value
+    ) {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insuranceCompany: {
+          validation: false,
+        },
+      });
+      openNotification({
+        type: 'error',
+        title: 'Ошибка',
+        description: 'Не указана страховая компания по полису',
+      })();
+    } else {
+      calculationStore.setTableRow(
+        'tableInsurance',
+        rowIndex,
+      )({
+        insuranceCompany: {
+          validation: true,
+        },
+      });
+    }
+  },
+};
+
+const options: TableColumnOptions = {
+  insured: [
+    {
+      name: 'ЛП',
+      value: 100000000,
+    },
+    {
+      name: 'ЛД',
+      value: 100000001,
+    },
+  ],
+  insTerm: [
+    {
+      name: '12 месяцев',
+      value: 100000000,
+    },
+    {
+      name: 'Срок ДЛ',
+      value: 100000001,
+    },
+  ],
+};
+
+export default {
+  columns,
+  rows,
+  options,
+  callbacks,
+  params: {},
+} as ITable;
--- a/src/client/Containers/Calculation/lib/elements/tables/payments.ts
+++ b/src/client/Containers/Calculation/lib/elements/tables/payments.ts
@ -0,0 +1,137 @@
+import InputNumber from 'client/Elements/InputNumber';
+import valuesConstants from 'core/constants/values';
+import { rotateArrays } from 'core/tools/array';
+import {
+  ITable,
+  TableColumn,
+  TableColumnCallbacks,
+  TableColumnFeatures,
+} from 'core/types/Calculation/Store/tables';
+import { inRange } from 'lodash';
+const { PERIODS_NUMBER } = valuesConstants;
+
+const columns: TableColumn[] = [
+  {
+    name: 'paymentRelation',
+    title: 'Соотношение платежа',
+    Component: InputNumber,
+    props: {
+      min: '0.01',
+      max: '100.00',
+      step: '1.00',
+      precision: 2,
+    },
+  },
+];
+
+const callbacks: TableColumnCallbacks = {
+  paymentRelation: ({ calculationStore, tableName, rowIndex, value }) => {
+    const rowLength = calculationStore.tables[tableName].rows.length;
+    const { graphType, seasonType } = calculationStore.values;
+
+    if (graphType === 100000001 && !seasonType) {
+      if (rowIndex > 1 && rowIndex < rowLength - 1) {
+        if (
+          calculationStore.tables[tableName].rows[rowIndex].paymentRelation
+            ?.value !==
+          calculationStore.tables[tableName].rows[rowIndex + 1].paymentRelation
+            ?.value
+        )
+          calculationStore.setTableRows(
+            tableName,
+            rowIndex,
+          )(
+            Array.from(
+              {
+                length: rowLength - rowIndex - 1,
+              },
+              (_v, i) => ({
+                paymentRelation: {
+                  value,
+                },
+              }),
+            ),
+          );
+      }
+    }
+
+    if (graphType === 100000003) {
+      const { leasingPeriod } = calculationStore.values;
+      if (rowIndex >= 1 && rowIndex <= PERIODS_NUMBER) {
+        const highSeasonStartValue = parseInt(
+            calculationStore.getOption('selectHighSeasonStart')?.name || '2',
+          ),
+          shiftNumber = highSeasonStartValue - 2;
+
+        const seasonTypeOptions = calculationStore.getOption(
+          'selectSeasonType',
+        );
+        const startPositions =
+            seasonTypeOptions && seasonTypeOptions.startPositions,
+          endPositions =
+            seasonTypeOptions &&
+            seasonTypeOptions.paymentsInStep.map(
+              (x, i) => startPositions[i] + x,
+            );
+
+        const allBoundaries = rotateArrays(startPositions, endPositions);
+
+        const withUnshift = n => n - shiftNumber;
+        const withShift = n => n + shiftNumber;
+        const withFirstPayment = n => n + 1;
+        let index;
+        for (let i = 0; i < allBoundaries.length; i++) {
+          const [min, max] = allBoundaries[i].map(x => withFirstPayment(x));
+          let unshiftedRowIndex = withUnshift(rowIndex);
+          if (unshiftedRowIndex <= 0) {
+            unshiftedRowIndex += PERIODS_NUMBER;
+          }
+
+          if (inRange(unshiftedRowIndex, min, max)) {
+            index = i;
+            break;
+          }
+        }
+
+        const paymentsInStep =
+          seasonTypeOptions && seasonTypeOptions.paymentsInStep;
+
+        for (
+          let i =
+            withFirstPayment(withShift(allBoundaries[index][0])) -
+            PERIODS_NUMBER;
+          i < leasingPeriod - 1;
+          i += PERIODS_NUMBER
+        ) {
+          const targetStartPosition = i;
+          for (
+            let j = targetStartPosition;
+            j < paymentsInStep[index] + targetStartPosition;
+            j++
+          ) {
+            if (j > 0 && j < leasingPeriod - 1)
+              calculationStore.setTableRow(
+                tableName,
+                j,
+              )({ paymentRelation: { value } });
+          }
+        }
+      }
+    }
+  },
+};
+
+const features: TableColumnFeatures = {
+  numerize: {
+    columnTitle: 'Номер платежа',
+  },
+};
+
+const params = { features };
+
+export default {
+  columns,
+  rows: [],
+  params,
+  callbacks,
+} as ITable;
--- a/src/client/Containers/Calculation/lib/elements/tables/results.ts
+++ b/src/client/Containers/Calculation/lib/elements/tables/results.ts
@ -0,0 +1,48 @@
+import Label from 'client/Elements/Label';
+import {
+  ITable,
+  TableColumn,
+  TableColumnFeatures,
+} from 'core/types/Calculation/Store/tables';
+import { round } from 'lodash';
+
+const columns: TableColumn[] = [
+  {
+    name: 'paymentSum',
+    title: 'Сумма платежа',
+    Component: Label,
+    props: {
+      middleware: value => value && round(value, 2).toFixed(2),
+    },
+  },
+  {
+    name: 'ndsCompensation',
+    title: 'НДС к возмещению',
+    Component: Label,
+    props: {
+      middleware: value => value && round(value, 2).toFixed(2),
+    },
+  },
+  {
+    name: 'redemptionAmount',
+    title: 'Сумма досрочного выкупа',
+    Component: Label,
+    props: {
+      middleware: value => value && round(value, 2).toFixed(2),
+    },
+  },
+];
+
+const features: TableColumnFeatures = {
+  numerize: {
+    columnTitle: 'Номер',
+  },
+};
+
+const params = { features };
+
+export default {
+  columns,
+  rows: [],
+  params,
+} as ITable;
--- a/src/client/Elements/Table.jsx
+++ b/src/client/Elements/Table.jsx
@ -1,11 +1,8 @@
-import { withTableValue } from 'client/hocs/Calculation/withTable';
 import colors from 'client/UIKit/colors';
 import { Box } from 'client/UIKit/grid';
 import mq from 'client/UIKit/mq';
 import styled from 'styled-components';

-// import { Button as AntButton } from 'antd';
-
 const TableWrapper = styled(Box)`
  overflow-x: auto;
  table {
@ -62,15 +59,14 @@ const TableWrapper = styled(Box)`
  }
 `;

-// const DeleteRowButton = ({ onClick }) => (
-//   <Flex justifyContent="flex-end">
-//     <AntButton type="text" danger onClick={onClick}>
-//       Удалить
-//     </AntButton>
-//   </Flex>
-// );
-
-const Table = ({ name: tableName, columns, rows, features, actions }) => {
+const Table = ({
+  name: tableName,
+  columns,
+  rows,
+  params: { features },
+  withTableValue,
+  callbacks,
+}) => {
  return (
    <TableWrapper>
      <table>
@ -82,7 +78,6 @@ const Table = ({ name: tableName, columns, rows, features, actions }) => {
            {columns.map(({ title }, ci) => {
              return <th key={ci}>{title}</th>;
            })}
-            {/* {features && features.canDeleteRow && <th />} */}
          </tr>
        </thead>
        <tbody>
@ -100,6 +95,7 @@ const Table = ({ name: tableName, columns, rows, features, actions }) => {
                    tableName,
                    rowIndex: ri,
                    propName: rowPropName,
+                    columnCallback: callbacks[rowPropName],
                    ...columns[columnIndex].props,
                  });
                  return (
@ -108,15 +104,6 @@ const Table = ({ name: tableName, columns, rows, features, actions }) => {
                    </td>
                  );
                })}
-                {/* {features && features.canDeleteRow && (
-                  <td>
-                    <DeleteRowButton
-                      onClick={() => {
-                        actions.deleteRow(ri);
-                      }}
-                    />
-                  </td>
-                )} */}
              </tr>
            );
          })}
--- a/src/client/hocs/Calculation/withTable.jsx
+++ b/src/client/hocs/Calculation/withTable.jsx
@ -10,14 +10,17 @@ export default Table => props => {
  const ObservedTable = observer(Table);
  const { calculationStore } = useStores();
  const tableData = calculationStore.tables[tableName];
-  return () => <ObservedTable {...props} {...tableData} />;
+  return () => (
+    <ObservedTable {...props} {...tableData} withTableValue={withTableValue} />
+  );
 };

-export const withTableValue = Component => ({
+const withTableValue = Component => ({
  tableName,
  rowIndex,
  propName,
  validation,
+  columnCallback,
  ...props
 }) =>
  observer(() => {
@ -25,6 +28,7 @@ export const withTableValue = Component => ({
      tableName,
      rowIndex,
      propName,
+      columnCallback,
    });
    const { status } = useTableStatus({ tableName, rowIndex, propName });
    const { validateStatus, message } = useTableValidation({
--- a/src/client/hooks/Calculation/useValue.js
+++ b/src/client/hooks/Calculation/useValue.js
@ -34,13 +34,18 @@ export const useStoreValue = ({ valueName }) => {
  return { value: currentValue, setCurrentValue };
 };

-export const useTableValue = ({ tableName, rowIndex, propName }) => {
+export const useTableValue = ({
+  tableName,
+  rowIndex,
+  propName,
+  columnCallback,
+}) => {
  const { calculationStore, calculationProcess } = useStores();
  const [currentValue, setCurrentValue] = useState(undefined);

  //get row value from store
-  const sourceValue =
-    calculationStore.tables[tableName].rows[rowIndex][propName].value;
+  const targetTable = calculationStore.tables[tableName];
+  const sourceValue = targetTable.rows[rowIndex][propName].value;
  useEffect(() => {
    if (sourceValue !== undefined) {
      setCurrentValue(sourceValue);
@ -84,14 +89,11 @@ export const useTableValue = ({ tableName, rowIndex, propName }) => {
    },
    DEFAULT_DEBOUNCE_DELAY,
  );
-  const cellCallBack =
-    calculationStore.tables[tableName].callbacks &&
-    calculationStore.tables[tableName].callbacks[propName];

  useEffect(() => {
-    if (cellCallBack && calculationProcess.process === Process.Default)
+    if (columnCallback && calculationProcess.process === Process.Default)
      debouncedCellCallback(
-        cellCallBack,
+        columnCallback,
        calculationStore,
        calculationProcess,
        tableName,
--- a/src/client/stores/CalculationStore/Data/tables.js
+++ b/src/client/stores/CalculationStore/Data/tables.js
@ -1,5 +1,5 @@
-import initialTables from 'client/stores/CalculationStore/config/initialTables';
 import { merge, mergeWith } from 'lodash';
+import initialTables from '../config/initialTables';

 const tablesData = {
  tables: initialTables,
--- a/src/client/stores/CalculationStore/config/initialTables.ts
+++ b/src/client/stores/CalculationStore/config/initialTables.ts
@ -0,0 +1,7 @@
+import tables from 'client/Containers/Calculation/lib/elements/tables';
+import { pick } from 'lodash';
+
+export default Object.keys(tables).reduce((o, tableName) => {
+  o[tableName] = pick(tables[tableName], ['columns', 'rows', 'options']);
+  return o;
+}, {});
--- a/src/client/stores/CalculationStore/config/initialTables/index.ts
+++ b/src/client/stores/CalculationStore/config/initialTables/index.ts
@ -1,9 +0,0 @@
-import tableInsurance from './tableInsurance';
-import tablePayments from './tablePayments';
-import tableResults from './tableResults';
-
-export default {
-  tableInsurance,
-  tablePayments,
-  tableResults,
-};
--- a/src/client/stores/CalculationStore/config/initialTables/tableInsurance.ts
+++ b/src/client/stores/CalculationStore/config/initialTables/tableInsurance.ts
@ -1,306 +0,0 @@
-import { openNotification } from 'client/Elements/Notification';
-import {
-  insuranceKaskoDefaultFilter,
-  insuranceOsagoDefaultFilter,
-} from 'core/constants/stores/Calculation/filters';
-import { ITable } from 'core/types/Calculation/Store/tables';
-import { ElementStatus } from 'core/types/statuses';
-
-const tableInsurance: ITable = {
-  rows: [
-    {
-      policyType: {
-        value: 'ОСАГО',
-      },
-      insuranceCompany: {
-        value: null,
-        filter: insuranceOsagoDefaultFilter,
-      },
-      insured: {
-        value: 100000000,
-      },
-      insCost: {
-        value: 0,
-      },
-      insTerm: {
-        value: 100000000,
-        status: ElementStatus.Disabled,
-      },
-    },
-    {
-      policyType: {
-        value: 'КАСКО',
-      },
-      insuranceCompany: {
-        value: null,
-        filter: insuranceKaskoDefaultFilter,
-      },
-      insured: {
-        value: 100000000,
-      },
-      insCost: {
-        value: 0,
-      },
-      insTerm: {
-        value: null,
-        status: ElementStatus.Disabled,
-      },
-    },
-    {
-      policyType: {
-        value: 'ДГО',
-      },
-      insuranceCompany: {
-        value: null,
-        status: ElementStatus.Disabled,
-        filter: insuranceKaskoDefaultFilter,
-      },
-      insured: {
-        value: null,
-        status: ElementStatus.Disabled,
-      },
-      insCost: {
-        value: 0,
-      },
-      insTerm: {
-        value: null,
-        status: ElementStatus.Disabled,
-      },
-    },
-    {
-      policyType: {
-        value: 'НС',
-      },
-      insuranceCompany: {
-        value: null,
-        status: ElementStatus.Disabled,
-        filter: insuranceKaskoDefaultFilter,
-      },
-      insured: {
-        value: null,
-        status: ElementStatus.Disabled,
-      },
-      insCost: {
-        value: 0,
-      },
-      insTerm: {
-        value: null,
-        status: ElementStatus.Disabled,
-      },
-    },
-  ],
-  options: {
-    insured: [
-      {
-        name: 'ЛП',
-        value: 100000000,
-      },
-      {
-        name: 'ЛД',
-        value: 100000001,
-      },
-    ],
-    insTerm: [
-      {
-        name: '12 месяцев',
-        value: 100000000,
-      },
-      {
-        name: 'Срок ДЛ',
-        value: 100000001,
-      },
-    ],
-  },
-  callbacks: {
-    insCost: ({ calculationStore, tableName, rowIndex }) => {
-      if (
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
-          0 &&
-        !calculationStore.tables[tableName]?.rows[rowIndex]['insuranceCompany']
-          ?.value
-      ) {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insuranceCompany: {
-            validation: false,
-          },
-        });
-        openNotification({
-          type: 'error',
-          title: 'Ошибка',
-          description: 'Не указана страховая компания по полису',
-        })();
-      } else {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insuranceCompany: {
-            validation: true,
-          },
-        });
-      }
-
-      if (
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
-          0 &&
-        !calculationStore.tables[tableName]?.rows[rowIndex]['insTerm']?.value
-      ) {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insTerm: {
-            validation: false,
-          },
-        });
-        openNotification({
-          type: 'error',
-          title: 'Ошибка',
-          description: 'Не указан срок страхования',
-        })();
-      } else {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insTerm: {
-            validation: true,
-          },
-        });
-      }
-
-      if (
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
-          0 &&
-        !calculationStore.tables[tableName]?.rows[rowIndex]['insured']?.value
-      ) {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insured: {
-            validation: false,
-          },
-        });
-        openNotification({
-          type: 'error',
-          title: 'Ошибка',
-          description: 'Не указан плательщик',
-        })();
-      } else {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insured: {
-            validation: true,
-          },
-        });
-      }
-    },
-
-    insured: ({ calculationStore, tableName, rowIndex }) => {
-      if (
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
-          0 &&
-        !calculationStore.tables[tableName]?.rows[rowIndex]['insured']?.value
-      ) {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insured: {
-            validation: false,
-          },
-        });
-        openNotification({
-          type: 'error',
-          title: 'Ошибка',
-          description: 'Не указан плательщик',
-        })();
-      } else {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insured: {
-            validation: true,
-          },
-        });
-      }
-    },
-
-    insTerm: ({ calculationStore, tableName, rowIndex }) => {
-      if (
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
-          0 &&
-        !calculationStore.tables[tableName]?.rows[rowIndex]['insTerm']?.value
-      ) {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insTerm: {
-            validation: false,
-          },
-        });
-        openNotification({
-          type: 'error',
-          title: 'Ошибка',
-          description: 'Не указан срок страхования',
-        })();
-      } else {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insTerm: {
-            validation: true,
-          },
-        });
-      }
-    },
-    insuranceCompany: ({ calculationStore, tableName, rowIndex }) => {
-      if (
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value &&
-        calculationStore.tables[tableName]?.rows[rowIndex]['insCost']?.value >
-          0 &&
-        !calculationStore.tables[tableName]?.rows[rowIndex]['insuranceCompany']
-          ?.value
-      ) {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insuranceCompany: {
-            validation: false,
-          },
-        });
-        openNotification({
-          type: 'error',
-          title: 'Ошибка',
-          description: 'Не указана страховая компания по полису',
-        })();
-      } else {
-        calculationStore.setTableRow(
-          'tableInsurance',
-          rowIndex,
-        )({
-          insuranceCompany: {
-            validation: true,
-          },
-        });
-      }
-    },
-  },
-};
-
-export default tableInsurance;
--- a/src/client/stores/CalculationStore/config/initialTables/tablePayments.ts
+++ b/src/client/stores/CalculationStore/config/initialTables/tablePayments.ts
@ -1,112 +0,0 @@
-import { rotateArrays } from 'core/tools/array';
-import { ITable } from 'core/types/Calculation/Store/tables';
-import { inRange } from 'lodash';
-import valuesConstants from 'core/constants/values';
-const { PERIODS_NUMBER } = valuesConstants;
-
-const tablePayments: ITable = {
-  rows: [
-    // {
-    //   paymentRelation: { value: 5 },
-    // },
-  ],
-
-  callbacks: {
-    paymentRelation: ({ calculationStore, tableName, rowIndex, value }) => {
-      const rowLength = calculationStore.tables[tableName].rows.length;
-      const { graphType, seasonType } = calculationStore.values;
-
-      if (graphType === 100000001 && !seasonType) {
-        if (rowIndex > 1 && rowIndex < rowLength - 1) {
-          if (
-            calculationStore.tables[tableName].rows[rowIndex].paymentRelation
-              ?.value !==
-            calculationStore.tables[tableName].rows[rowIndex + 1]
-              .paymentRelation?.value
-          )
-            calculationStore.setTableRows(
-              tableName,
-              rowIndex,
-            )(
-              Array.from(
-                {
-                  length: rowLength - rowIndex - 1,
-                },
-                (_v, i) => ({
-                  paymentRelation: {
-                    value,
-                  },
-                }),
-              ),
-            );
-        }
-      }
-
-      if (graphType === 100000003) {
-        const { leasingPeriod } = calculationStore.values;
-        if (rowIndex >= 1 && rowIndex <= PERIODS_NUMBER) {
-          const highSeasonStartValue = parseInt(
-              calculationStore.getOption('selectHighSeasonStart')?.name || '2',
-            ),
-            shiftNumber = highSeasonStartValue - 2;
-
-          const seasonTypeOptions = calculationStore.getOption(
-            'selectSeasonType',
-          );
-          const startPositions =
-              seasonTypeOptions && seasonTypeOptions.startPositions,
-            endPositions =
-              seasonTypeOptions &&
-              seasonTypeOptions.paymentsInStep.map(
-                (x, i) => startPositions[i] + x,
-              );
-
-          const allBoundaries = rotateArrays(startPositions, endPositions);
-
-          const withUnshift = n => n - shiftNumber;
-          const withShift = n => n + shiftNumber;
-          const withFirstPayment = n => n + 1;
-          let index;
-          for (let i = 0; i < allBoundaries.length; i++) {
-            const [min, max] = allBoundaries[i].map(x => withFirstPayment(x));
-            let unshiftedRowIndex = withUnshift(rowIndex);
-            if (unshiftedRowIndex <= 0) {
-              unshiftedRowIndex += PERIODS_NUMBER;
-            }
-
-            if (inRange(unshiftedRowIndex, min, max)) {
-              index = i;
-              break;
-            }
-          }
-
-          const paymentsInStep =
-            seasonTypeOptions && seasonTypeOptions.paymentsInStep;
-
-          for (
-            let i =
-              withFirstPayment(withShift(allBoundaries[index][0])) -
-              PERIODS_NUMBER;
-            i < leasingPeriod - 1;
-            i += PERIODS_NUMBER
-          ) {
-            const targetStartPosition = i;
-            for (
-              let j = targetStartPosition;
-              j < paymentsInStep[index] + targetStartPosition;
-              j++
-            ) {
-              if (j > 0 && j < leasingPeriod - 1)
-                calculationStore.setTableRow(
-                  tableName,
-                  j,
-                )({ paymentRelation: { value } });
-            }
-          }
-        }
-      }
-    },
-  },
-};
-
-export default tablePayments;
--- a/src/client/stores/CalculationStore/config/initialTables/tableResults.ts
+++ b/src/client/stores/CalculationStore/config/initialTables/tableResults.ts
@ -1,7 +0,0 @@
-import { ITable } from 'core/types/Calculation/Store/tables';
-
-const tableResults: ITable = {
-  rows: [],
-};
-
-export default tableResults;
--- a/src/core/types/Calculation/Store/tables.ts
+++ b/src/core/types/Calculation/Store/tables.ts
@ -1,4 +1,5 @@
 import { ElementStatus } from '../../statuses';
+import { ElementProps } from '../components';
 import { ICalculationStore } from './';
 import { TCRMEntity } from './../../Entities/crmEntities';
 import { TCalculationProcess } from './effect';
@ -26,22 +27,46 @@ export type TCellCallback = (props: {
  value: any;
 }) => void;

-export interface ITableCell {
+export type ITableCell = {
  value?: any;
  status?: ElementStatus;
  validation?: boolean;
  filter?: TElementFilter;
-}
+};

 export type TableProps<T> = {
  [propName in TableValuesNames]?: T;
 };

-export interface ITable {
-  rows: TableProps<ITableCell>[];
-  options?: TableProps<(IBaseOption & TCRMEntity)[]>;
-  callbacks?: TableProps<TCellCallback>;
-}
+export type TableRow = TableProps<ITableCell>;
+export type TableColumnOptions = TableProps<(IBaseOption & TCRMEntity)[]>;
+export type TableColumnCallbacks = TableProps<TCellCallback>;
+
+export type TableColumn = {
+  name: TableValuesNames;
+  title: string;
+  Component: () => JSX.Element;
+  props?: ElementProps;
+};
+
+export type TableColumnFeatures = {
+  numerize?: {
+    columnTitle?: string;
+  };
+};
+
+export type TableParams = {
+  features?: TableColumnFeatures;
+  [param: string]: any;
+};
+
+export type ITable = {
+  columns: TableColumn[];
+  rows: TableRow[];
+  options?: TableColumnOptions;
+  params?: TableParams;
+  callbacks?: TableColumnCallbacks;
+};

 export type StoreTables<T> = {
  [table in TableNames]: T;
--- a/src/core/types/Calculation/components.ts
+++ b/src/core/types/Calculation/components.ts
@ -3,27 +3,10 @@ import {
  LinkElementsNames,
  ResultElementsNames,
 } from './Store/elements';
-import { TableNames, TableValuesNames } from './Store/tables';
+import { TableNames } from './Store/tables';

 export type ElementProps = { [key: string]: any };
 export type Component = () => JSX.Element;
-export interface ITableElement {
-  title?: string;
-  props: {
-    features?: {
-      canDeleteRow?: boolean;
-      numerize: {
-        columnTitle?: string;
-      };
-    };
-    columns: {
-      name: TableValuesNames;
-      title: string;
-      Component: () => JSX.Element;
-      props?: ElementProps;
-    }[];
-  };
-}

 interface IBlock {
  title?: string;