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>;