Calculation/Results: add validation tab

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 <Alert type="success" showIcon message="Ошибок нет 🙂" />;
+  }
+
+  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 = (
+        <>
+          <Bold>{elementTitle}</Bold>
+          {': '}
+          {error.text}
+        </>
+      );
+
+      return <Alert key={error.name} type="error" showIcon message={message} />;
+    });
+  });
+
+  return <Flex flexDirection="column">{errors}</Flex>;
+});
+
+function Validation() {
+  return (
+    <Box>
+      <Errors />
+    </Box>
+  );
+}
+
+export default {
+  id: 'validation',
+  title: 'Ошибки',
+  Component: Validation,
+};

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

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<Messages> = {};
+  elementsErrors: Partial<ElementsErrors> = {};
 
   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();
   };
 }

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<Elements, IObservableArray<Error>>;
+export type ElementsErrors = Record<Elements, IObservableArray<Error>>;