diff --git a/apps/web/Components/Calculation/builders/build-action.tsx b/apps/web/Components/Calculation/builders/build-action.tsx index 2c785ef..bddbf40 100644 --- a/apps/web/Components/Calculation/builders/build-action.tsx +++ b/apps/web/Components/Calculation/builders/build-action.tsx @@ -32,9 +32,9 @@ export function buildAction( ); }); diff --git a/apps/web/Components/Calculation/config/elements-render/override.tsx b/apps/web/Components/Calculation/config/elements-render/override.tsx index ba2f2ac..b3da50c 100644 --- a/apps/web/Components/Calculation/config/elements-render/override.tsx +++ b/apps/web/Components/Calculation/config/elements-render/override.tsx @@ -6,7 +6,7 @@ import types from '../elements-types'; import map from '../map'; import type { RenderProps } from './types'; import { Container, Head } from '@/Components/Layout/Element'; -import { useStore } from '@/stores/hooks'; +import { useErrors, useStore } from '@/stores/hooks'; import { useIsFetching } from '@tanstack/react-query'; import { observer } from 'mobx-react-lite'; import type { ComponentProps } from 'react'; @@ -25,6 +25,108 @@ const formatter = Intl.NumberFormat('ru', { }).format; const overrideRender: Partial> = { + btnCalculate: { + render: () => { + const elementName = 'btnCalculate'; + const title = titles.btnCalculate; + const valueName = map.btnCalculate; + const Component = components.btnCalculate; + const props = elementsProps.btnCalculate; + const { builder } = types.btnCalculate(); + + const Element = builder(Component, { + elementName, + valueName, + }); + + const RenderedComponent = observer(() => { + const { $process } = useStore(); + const { hasErrors } = useErrors(); + + return ( + + + + + ); + }); + + return ; + }, + }, + + btnCreateKP: { + render: () => { + const elementName = 'btnCreateKP'; + const title = titles.btnCreateKP; + const valueName = map.btnCreateKP; + const Component = components.btnCreateKP; + const props = elementsProps.btnCreateKP; + const { builder } = types.btnCreateKP(); + + const Element = builder(Component, { + elementName, + valueName, + }); + + const RenderedComponent = observer(() => { + const { $process } = useStore(); + const { hasErrors } = useErrors(); + + return ( + + + + + ); + }); + + return ; + }, + }, + + btnCreateKPMini: { + render: () => { + const elementName = 'btnCreateKPMini'; + const title = titles.btnCreateKPMini; + const valueName = map.btnCreateKPMini; + const Component = components.btnCreateKPMini; + const props = elementsProps.btnCreateKPMini; + const { builder } = types.btnCreateKPMini(); + + const Element = builder(Component, { + elementName, + valueName, + }); + + const RenderedComponent = observer(() => { + const { $process } = useStore(); + const { hasErrors } = useErrors(); + + return ( + + + + + ); + }); + + return ; + }, + }, + selectHighSeasonStart: { render: () => { const elementName = 'selectHighSeasonStart'; diff --git a/apps/web/Components/Output/index.jsx b/apps/web/Components/Output/index.jsx index 90bf543..c39734d 100644 --- a/apps/web/Components/Output/index.jsx +++ b/apps/web/Components/Output/index.jsx @@ -2,7 +2,7 @@ import PaymentsTable from './PaymentsTable'; import Results from './Results'; import Validation from './Validation'; import Background from '@/Components/Layout/Background'; -import { useStore } from '@/stores/hooks'; +import { useErrors, useStore } from '@/stores/hooks'; import { min } from '@/styles/mq'; import { observer } from 'mobx-react-lite'; import { useEffect, useState } from 'react'; @@ -15,12 +15,7 @@ const items = outputTabs.map(({ Component, id, title }) => { if (id === 'validation') { Label = observer(() => { - const { $calculation, $tables } = useStore(); - const hasErrors = - $calculation.hasErrors || - $tables.fingap.hasErrors || - $tables.insurance.hasErrors || - $tables.payments.hasErrors; + const { hasErrors } = useErrors(); return ( @@ -48,16 +43,11 @@ const Wrapper = styled(Background)` `; const Output = observer(() => { - const { $calculation, $tables, $results } = useStore(); + const { $results } = useStore(); const [activeKey, setActiveKey] = useState(undefined); + const { hasErrors } = useErrors(); useEffect(() => { - const hasErrors = - $calculation.hasErrors || - $tables.fingap.hasErrors || - $tables.insurance.hasErrors || - $tables.payments.hasErrors; - if ($results.payments.length > 0) { setActiveKey('payments-table'); } @@ -65,13 +55,7 @@ const Output = observer(() => { if (hasErrors) { setActiveKey('validation'); } - }, [ - $calculation.hasErrors, - $results.payments.length, - $tables.fingap.hasErrors, - $tables.insurance.hasErrors, - $tables.payments.hasErrors, - ]); + }, [$results.payments.length, hasErrors]); return ( diff --git a/apps/web/process/calculate/action.ts b/apps/web/process/calculate/action.ts index c833784..956e6d7 100644 --- a/apps/web/process/calculate/action.ts +++ b/apps/web/process/calculate/action.ts @@ -11,9 +11,6 @@ export async function action({ store, trpcClient }: ProcessContext) { $process.add('Calculate'); - $calculation.$status.setStatus('btnCalculate', 'Loading'); - $calculation.$status.setStatus('btnCreateKP', 'Loading'); - $calculation.$status.setStatus('btnCreateKPMini', 'Loading'); $results.clear(); const values = $calculation.$values.getValues(); @@ -59,10 +56,6 @@ export async function action({ store, trpcClient }: ProcessContext) { }); }) .finally(() => { - $calculation.$status.setStatus('btnCalculate', 'Default'); - $calculation.$status.setStatus('btnCreateKP', 'Default'); - $calculation.$status.setStatus('btnCreateKPMini', 'Default'); - $process.delete('Calculate'); }); } diff --git a/apps/web/process/calculate/reactions/validation.ts b/apps/web/process/calculate/reactions/validation.ts index 0249015..ba6a558 100644 --- a/apps/web/process/calculate/reactions/validation.ts +++ b/apps/web/process/calculate/reactions/validation.ts @@ -19,35 +19,6 @@ function hasInvalidValueOrOptions(value: unknown, options: Array $process.has('Unlimited'), - () => { - const hasElementsErrors = Object.values($calculation.$validation).some( - (validation) => validation.hasErrors - ); - - const hasPaymentsErrors = $tables.payments.validation.hasErrors; - const hasInsuranceErrors = $tables.insurance.validation.hasErrors; - const hasFingapErrors = $tables.fingap.validation.hasErrors; - - return hasElementsErrors || hasPaymentsErrors || hasInsuranceErrors || hasFingapErrors; - }, - (hasErrors) => { - if (hasErrors) { - $calculation.$status.setStatus('btnCalculate', 'Disabled'); - $calculation.$status.setStatus('btnCreateKP', 'Disabled'); - $calculation.$status.setStatus('btnCreateKPMini', 'Disabled'); - } else { - $calculation.$status.setStatus('btnCalculate', 'Default'); - $calculation.$status.setStatus('btnCreateKP', 'Default'); - $calculation.$status.setStatus('btnCreateKPMini', 'Default'); - } - }, - { - fireImmediately: true, - } - ); - /** * Проверяем, что выбранное значение элемента есть в списке */ diff --git a/apps/web/process/create-kp/action.ts b/apps/web/process/create-kp/action.ts index 7b2f4b4..55e4ba1 100644 --- a/apps/web/process/create-kp/action.ts +++ b/apps/web/process/create-kp/action.ts @@ -12,9 +12,6 @@ export function action({ store, trpcClient, apolloClient }: ProcessContext) { $process.add('CreateKP'); - $calculation.$status.setStatus('btnCalculate', 'Loading'); - $calculation.$status.setStatus('btnCreateKP', 'Loading'); - $calculation.$status.setStatus('btnCreateKPMini', 'Loading'); $results.clear(); const values = $calculation.$values.getValues(); @@ -71,10 +68,6 @@ export function action({ store, trpcClient, apolloClient }: ProcessContext) { }); }) .finally(() => { - $calculation.$status.setStatus('btnCalculate', 'Default'); - $calculation.$status.setStatus('btnCreateKP', 'Default'); - $calculation.$status.setStatus('btnCreateKPMini', 'Default'); - $process.delete('CreateKP'); }); } diff --git a/apps/web/process/load-kp/reactions.ts b/apps/web/process/load-kp/reactions.ts index c4a03df..38cf7a8 100644 --- a/apps/web/process/load-kp/reactions.ts +++ b/apps/web/process/load-kp/reactions.ts @@ -96,11 +96,4 @@ export function common({ store, trpcClient, apolloClient }: ProcessContext) { }); } ); - - reaction( - () => $process.has('LoadKP'), - (isLoadKP) => { - $calculation.$status.setStatus('selectQuote', isLoadKP ? 'Disabled' : 'Default'); - } - ); } diff --git a/apps/web/stores/hooks.js b/apps/web/stores/hooks.js index e876c00..025c830 100644 --- a/apps/web/stores/hooks.js +++ b/apps/web/stores/hooks.js @@ -9,3 +9,16 @@ export function useStore() { return context; } + +export function useErrors() { + const { $calculation, $tables } = useStore(); + + const hasElementsErrors = $calculation.hasErrors; + const hasPaymentsErrors = $tables.payments.validation.hasErrors; + const hasInsuranceErrors = $tables.insurance.validation.hasErrors; + const hasFingapErrors = $tables.fingap.validation.hasErrors; + + return { + hasErrors: hasElementsErrors || hasPaymentsErrors || hasInsuranceErrors || hasFingapErrors, + }; +}