diff --git a/Components/Calculation/Results/Validation.jsx b/Components/Calculation/Results/Validation.jsx new file mode 100644 index 0000000..1eae842 --- /dev/null +++ b/Components/Calculation/Results/Validation.jsx @@ -0,0 +1,52 @@ +import Alert from 'Elements/Alert'; +import { observer } from 'mobx-react-lite'; +import { useStore } from 'stores/hooks'; +import styled from 'styled-components'; +import { Box, Flex } from 'UIKit/grid'; +import titles from '../config/elements-titles'; + +const Bold = styled.span` + font-weight: bold; +`; + +const Errors = observer(() => { + const { $calculation } = useStore(); + + if (!$calculation.$validation.hasErrors()) { + return ; + } + + 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 {errors}; +}); + +function Validation() { + return ( + + + + ); +} + +export default { + id: 'validation', + title: 'Ошибки', + Component: Validation, +}; diff --git a/Components/Calculation/Results/index.jsx b/Components/Calculation/Results/index.jsx index e6dea5e..3fe42ac 100644 --- a/Components/Calculation/Results/index.jsx +++ b/Components/Calculation/Results/index.jsx @@ -3,14 +3,17 @@ import Tabs from 'Elements/layout/Tabs'; import styled from 'styled-components'; import { min } from 'UIKit/mq'; import Output from './Output'; +import Validation from './Validation'; -const resultsTabs = [Output]; +const resultsTabs = [Output, Validation]; const Wrapper = styled(Background)` padding: 4px 10px; + min-height: 200px; ${min('laptop')} { padding: 4px 18px; + min-height: 600px; } `; diff --git a/stores/calculation/validation/index.ts b/stores/calculation/validation/index.ts index 0f3507b..c37a9d7 100644 --- a/stores/calculation/validation/index.ts +++ b/stores/calculation/validation/index.ts @@ -2,34 +2,40 @@ import type { Elements } from 'Components/Calculation/config/map/values'; import { makeAutoObservable, observable } from 'mobx'; import type RootStore from 'stores/root'; -import type { Error, Messages } from './types'; +import type { ElementsErrors, Error } from './types'; export default class ValidationStore { root: RootStore; - messages: Partial = {}; + elementsErrors: Partial = {}; constructor(rootStore: RootStore) { makeAutoObservable(this); this.root = rootStore; } + hasErrors() { + return (Object.keys(this.elementsErrors) as Elements[]).some( + (elementName) => this.elementsErrors[elementName]?.length + ); + } + getValidation(elementName: Elements) { return { - isValid: !this.messages[elementName]?.length, - messages: this.messages[elementName]?.map((x) => x.text), + isValid: !this.elementsErrors[elementName]?.length, + errors: this.elementsErrors[elementName]?.map((x) => x.text), }; } addError = (elementName: Elements, error: Error) => { - if (!this.messages[elementName]) this.messages[elementName] = observable([]); + if (!this.elementsErrors[elementName]) this.elementsErrors[elementName] = observable([]); - const errorIndex = this.messages[elementName]?.findIndex((x) => x.name === error.name); + const errorIndex = this.elementsErrors[elementName]?.findIndex((x) => x.name === error.name); const hasError = errorIndex !== undefined && errorIndex !== -1; if (!hasError) { - this.messages[elementName]?.push(error); + this.elementsErrors[elementName]?.push(error); } else { - this.messages[elementName]?.splice(errorIndex, 1, error); + this.elementsErrors[elementName]?.splice(errorIndex, 1, error); } // TODO: call notification @@ -37,12 +43,12 @@ export default class ValidationStore { return () => this.#removeError(elementName, error.name); }; - #removeError = (elementName: Elements, errorName: string) => { - const messageIndex = this.messages[elementName]?.findIndex((x) => x.name === errorName); - if (messageIndex) this.messages[elementName]?.splice(messageIndex, 1); + #removeError = (elementName: Elements, errorName: Error['name']) => { + const errorIndex = this.elementsErrors[elementName]?.findIndex((x) => x.name === errorName); + if (errorIndex) this.elementsErrors[elementName]?.splice(errorIndex, 1); }; clearErrors = (elementName: Elements) => { - this.messages[elementName]?.clear(); + this.elementsErrors[elementName]?.clear(); }; } diff --git a/stores/calculation/validation/types.ts b/stores/calculation/validation/types.ts index 0163603..7917c33 100644 --- a/stores/calculation/validation/types.ts +++ b/stores/calculation/validation/types.ts @@ -2,4 +2,4 @@ import type { Elements } from 'Components/Calculation/config/map/values'; import type { IObservableArray } from 'mobx'; export type Error = { name: string; text: string }; -export type Messages = Record>; +export type ElementsErrors = Record>;