From 441f9aadbd7c28b45fdbf46c669d4d4ee2195d1a Mon Sep 17 00:00:00 2001 From: Chika Date: Sat, 9 Jul 2022 15:10:21 +0300 Subject: [PATCH] validation: show tables errors payments: generate table on changing leasingPeriod --- Components/Output/Validation.jsx | 59 ++++++++++++++++++-------- pages/index.tsx | 2 + process/payments/reactions.ts | 27 ++++++++++++ stores/calculation/validation/index.ts | 4 +- stores/tables/insurance/index.ts | 2 +- stores/tables/payments/index.ts | 22 +++++++++- stores/tables/validation.ts | 19 +++++---- 7 files changed, 105 insertions(+), 30 deletions(-) create mode 100644 process/payments/reactions.ts diff --git a/Components/Output/Validation.jsx b/Components/Output/Validation.jsx index e1467fd..43db968 100644 --- a/Components/Output/Validation.jsx +++ b/Components/Output/Validation.jsx @@ -9,31 +9,56 @@ const Bold = styled.span` font-weight: bold; `; -const Errors = observer(() => { - const { $calculation } = useStore(); - - if (!$calculation.$validation.hasErrors()) { - return ; - } +function Message(title, text) { + return ( + <> + {title} + {': '} + {text} + + ); +} +function getElementsErrors($calculation) { const { elementsErrors } = $calculation.$validation; const errors = Object.keys(elementsErrors).map((elementName) => { const elementErrors = elementsErrors[elementName]; const elementTitle = titles[elementName]; - return elementErrors.map((error) => { - const message = ( - <> - {elementTitle} - {': '} - {error.text} - - ); - - return ; - }); + return elementErrors.map((error) => ( + + )); }); + return errors; +} + +function getPaymentsTableErrors($tables) { + const { payments } = $tables; + const messages = payments.validation.getMessages(); + const title = payments.validation.params.err_title; + + return messages.map((text) => ); +} + +function getInsuranceTableErrors($tables) { + const { insurance } = $tables; + const messages = insurance.validation.getMessages(); + + return messages.map((message) => ); +} + +const Errors = observer(() => { + const { $calculation, $tables } = useStore(); + + const elementsErrors = getElementsErrors($calculation); + const paymentsErrors = getPaymentsTableErrors($tables); + const insuranceErrors = getInsuranceTableErrors($tables); + + const errors = [...elementsErrors, ...paymentsErrors, ...insuranceErrors]; + + if (errors.length === 0) return ; + return {errors}; }); diff --git a/pages/index.tsx b/pages/index.tsx index db34709..2069a21 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,6 +6,7 @@ import type { BaseOption } from 'Elements/types'; import type { GetServerSideProps } from 'next'; import Head from 'next/head'; import leadOpportunityUrlsReactions from 'process/lead-opportunity/reactions/urls'; +import paymentsReactions from 'process/payments/reactions'; import { fetchUser } from 'services/user'; import { getDomainName } from 'services/user/tools'; import { useStore } from 'stores/hooks'; @@ -46,6 +47,7 @@ function Home({ graphQLData }: PageProps) { * add reactions to store */ leadOpportunityUrlsReactions(store, apolloClient); + paymentsReactions(store, apolloClient); /** * set graphql data to store diff --git a/process/payments/reactions.ts b/process/payments/reactions.ts new file mode 100644 index 0000000..aa22b1e --- /dev/null +++ b/process/payments/reactions.ts @@ -0,0 +1,27 @@ +import type { ApolloClient } from '@apollo/client'; +import { reaction } from 'mobx'; +import type RootStore from 'stores/root'; + +export default function paymentsReactions(store: RootStore, apolloClient: ApolloClient) { + const { $calculation } = store; + + reaction( + () => $calculation.$values.getValue('leasingPeriod'), + (leasingPeriod) => { + if (leasingPeriod) { + const { $tables } = store; + $tables.payments.setValues( + Array.from( + { + length: leasingPeriod, + }, + () => 0 + ) + ); + } + }, + { + fireImmediately: true, + } + ); +} diff --git a/stores/calculation/validation/index.ts b/stores/calculation/validation/index.ts index 1c08f81..64fa0c7 100644 --- a/stores/calculation/validation/index.ts +++ b/stores/calculation/validation/index.ts @@ -15,7 +15,7 @@ export default class ValidationStore { this.root = rootStore; } - hasErrors() { + get hasErrors() { return (Object.keys(this.elementsErrors) as Elements[]).some( (elementName) => this.elementsErrors[elementName]?.length ); @@ -42,7 +42,7 @@ export default class ValidationStore { notification.error({ key: error.name, - message: `Ошибка в поле ${titles[elementName]}`, + message: `${titles[elementName]}`, description: error.text, }); diff --git a/stores/tables/insurance/index.ts b/stores/tables/insurance/index.ts index b499e55..750d1a0 100644 --- a/stores/tables/insurance/index.ts +++ b/stores/tables/insurance/index.ts @@ -23,7 +23,7 @@ export default class InsuranceTable { this.root = rootStore; this.validation = new Validation({ err_key: 'ERR_INSURANCE_TABLE', - err_title: 'Ошибка в таблице страхования', + err_title: 'Таблица страхования', }); makeAutoObservable(this); } diff --git a/stores/tables/payments/index.ts b/stores/tables/payments/index.ts index 38ce8eb..ca16ef2 100644 --- a/stores/tables/payments/index.ts +++ b/stores/tables/payments/index.ts @@ -1,6 +1,7 @@ import type { Status } from 'Elements/types'; import type { IObservableArray } from 'mobx'; -import { makeAutoObservable, observable, reaction } from 'mobx'; +import { makeAutoObservable, observable, reaction, toJS } from 'mobx'; + import type RootStore from 'stores/root'; import Validation from '../validation'; @@ -19,7 +20,7 @@ export default class PaymentsTable { this.root = rootStore; this.validation = new Validation({ err_key: 'ERR_PAYMENTS_TABLE', - err_title: 'Ошибка в таблице платежей', + err_title: 'Таблица платежей', }); this.values = observable([]); this.statuses = observable([]); @@ -34,6 +35,23 @@ export default class PaymentsTable { this.statuses.length = length; } ); + + /** + * Проверяем платежи на 0 + */ + const errorText = 'Значения не должны быть равны 0'; + let removeError: () => void; + + reaction( + () => toJS(this.values), + (values) => { + if (values.includes(0)) { + removeError = this.validation.addError(errorText); + } else { + removeError(); + } + } + ); } getValue(index: number) { diff --git a/stores/tables/validation.ts b/stores/tables/validation.ts index 92536ac..fb4b6b9 100644 --- a/stores/tables/validation.ts +++ b/stores/tables/validation.ts @@ -1,5 +1,5 @@ import notification from 'Elements/notification'; -import { makeAutoObservable, observable } from 'mobx'; +import { makeAutoObservable } from 'mobx'; type Params = { err_key: string; @@ -8,24 +8,27 @@ type Params = { export default class Validation { params: Params; - messages = observable([]); + messages: Set; constructor(params: Params) { - makeAutoObservable(this); this.params = params; + this.messages = new Set(); + makeAutoObservable(this); + } + + get hasErrors() { + return this.messages.size > 0; } getMessages() { - return this.messages; + return [...this.messages]; } addError = (message: string) => { - this.messages.push(message); - - const messageIndex = this.messages.length; + this.messages.add(message); const removeError = () => { - this.messages.splice(messageIndex - 1, 1); + this.messages.delete(message); }; notification.error({