add validation for fingap table

Components/Calculation/Form/Insurance/FinGAPTable/index.jsx

@@ -1,9 +1,28 @@
+import Alert from 'Elements/Alert';
 import Table from 'Elements/Table';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'stores/hooks';
+import styled from 'styled-components';
+import { Flex } from 'UIKit/grid';
 import { columns } from './config';
 
+const Grid = styled(Flex)`
+  flex-direction: column;
+`;
+
+const Validation = observer(() => {
+  const store = useStore();
+
+  const messages = store.$tables.fingap.validation.getMessages();
+
+  if (messages?.length) {
+    return <Alert type="error" banner message={messages[0]} />;
+  }
+
+  return null;
+});
+
 const FinGAPTable = observer(() => {
   const { $tables } = useStore();
   const { fingap } = $tables;
@@ -38,4 +57,11 @@ const FinGAPTable = observer(() => {
   );
 });
 
-export default FinGAPTable;
+export default function () {
+  return (
+    <Grid>
+      <Validation />
+      <FinGAPTable />
+    </Grid>
+  );
+}

process/calculate/reactions/validation.ts

@@ -9,8 +9,9 @@ export default function validationReactions(store: RootStore, apolloClient: Apol
       const hasElementsErrors = $calculation.$validation.hasErrors;
       const hasPaymentsErrors = $tables.payments.validation.hasErrors;
       const hasInsuranceErrors = $tables.insurance.validation.hasErrors;
+      const hasFingapErrors = $tables.fingap.validation.hasErrors;
 
-      return hasElementsErrors || hasPaymentsErrors || hasInsuranceErrors;
+      return hasElementsErrors || hasPaymentsErrors || hasInsuranceErrors || hasFingapErrors;
     },
     (hasErrors) => {
       if (hasErrors) {

process/fingap/reactions/common.ts

@@ -10,7 +10,7 @@ import type { Risk } from 'Components/Calculation/Form/Insurance/FinGAPTable/typ
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import type * as CRMTypes from 'graphql/crm.types';
-import { comparer, reaction } from 'mobx';
+import { comparer, reaction, toJS } from 'mobx';
 import type RootStore from 'stores/root';
 
 dayjs.extend(utc);
@@ -122,7 +122,7 @@ export default function commonReactions(
   reaction(
     () => {
       const finGAPInsuranceCompany = $tables.insurance.getRowValue('fingap', 'insuranceCompany');
-      const paymentsValues = $tables.payments.values;
+      const paymentsValues = toJS($tables.payments.values);
       const plPriceRub = $calculation.$values.getValue('plPriceRub');
       const discountRub = $calculation.$values.getValue('discountRub');
       const firstPaymentRub = $calculation.getElementValue('tbxFirstPaymentRub');
@@ -145,6 +145,7 @@ export default function commonReactions(
       firstPaymentRub,
       leasingPeriod,
     }) => {
+      if ($tables.fingap.validation.hasErrors) return;
       if (!finGAPInsuranceCompany) return;
 
       const {

process/fingap/reactions/index.js

@@ -0,0 +1,2 @@
+export { default as common } from './common';
+export { default as validation } from './validation';

process/fingap/reactions/validation.ts

@@ -0,0 +1,37 @@
+import type { ApolloClient } from '@apollo/client';
+import type { QueryClient } from '@tanstack/react-query';
+import { reaction } from 'mobx';
+import type RootStore from 'stores/root';
+
+export default function validationReactions(
+  store: RootStore,
+  apolloClient: ApolloClient<object>,
+  queryClient: QueryClient
+) {
+  const { $tables } = store;
+
+  const errorText = 'Неверно заполнены платежи';
+  let removeError: () => void;
+
+  reaction(
+    () => {
+      const hasPaymentsErrors = $tables.payments.validation.hasErrors;
+      const finGAPInsuranceCompany = $tables.insurance.getRowValue('fingap', 'insuranceCompany');
+
+      return {
+        hasPaymentsErrors,
+        finGAPInsuranceCompany,
+      };
+    },
+    ({ hasPaymentsErrors, finGAPInsuranceCompany }) => {
+      if (finGAPInsuranceCompany && hasPaymentsErrors) {
+        removeError = $tables.fingap.validation.addError(errorText);
+      } else {
+        removeError();
+      }
+    },
+    {
+      fireImmediately: true,
+    }
+  );
+}

process/init/inject-reactions/default.js

@@ -1,6 +1,6 @@
 import * as agentsReactions from '../../agents/reactions';
 import * as calculateReactions from '../../calculate/reactions';
-import fingapReactions from '../../fingap/reactions';
+import * as fingapReactions from '../../fingap/reactions';
 import * as leadOpportunityReactions from '../../lead-opportunity/reactions';
 import paymentsReactions from '../../payments/reactions';
 import * as priceReactions from '../../price/reactions';
@@ -13,6 +13,7 @@ export default function injectDefaultReactions(store, apolloClient, queryClient)
   calculateReactions.validation(store, apolloClient, queryClient);
   agentsReactions.common(store, apolloClient, queryClient);
   priceReactions.computed(store, apolloClient, queryClient);
-  fingapReactions(store, apolloClient, queryClient);
+  fingapReactions.common(store, apolloClient, queryClient);
+  fingapReactions.validation(store, apolloClient, queryClient);
   setInitialValuesReactions(store, apolloClient, queryClient);
 }

process/payments/reactions.ts

@@ -30,7 +30,7 @@ export default function paymentsReactions(store: RootStore, apolloClient: Apollo
   /**
    * Проверяем платежи на 0
    */
-  const errorText = 'Значения не должны быть равны 0';
+  const errorText = 'Значения должны быть больше 0';
   let removeError: () => void;
 
   reaction(

stores/tables/fingap/index.ts

@@ -2,9 +2,11 @@ import type * as FinGAP from 'Components/Calculation/Form/Insurance/FinGAPTable/
 import type { IObservableArray } from 'mobx';
 import { makeAutoObservable, observable } from 'mobx';
 import type RootStore from 'stores/root';
+import Validation from '../validation';
 
 export default class FinGAPTable {
   root: RootStore;
+  validation: Validation;
   risks: IObservableArray<FinGAP.Risk>;
   selectedKeys: Set<string>;
 
@@ -13,6 +15,11 @@ export default class FinGAPTable {
     this.risks = observable<FinGAP.Risk>([]);
     makeAutoObservable(this);
 
+    this.validation = new Validation({
+      err_key: 'ERR_FINGAP_TABLE',
+      err_title: 'Таблица рисков Safe Finance',
+    });
+
     this.root = rootStore;
   }