InsuranceTable: add validation

Components/Calculation/Form/Insurance/InsuranceTable/index.jsx

@@ -1,31 +1,53 @@
+import Alert from 'Elements/Alert';
 import Table from 'Elements/Table';
+import { observer } from 'mobx-react-lite';
 import { useStore } from 'stores/hooks';
 import styled from 'styled-components';
+import { Flex } from 'UIKit/grid';
 import { columns } from './config';
 
-const Wrapper = styled.div`
+const Grid = styled(Flex)`
+  flex-direction: column;
+`;
+
+const TableWrapper = styled.div`
   td > * {
     margin: 0;
   }
 `;
 
+const Validation = observer(() => {
+  const store = useStore();
+
+  const messages = store.$tables.insurance.validation.getMessages();
+
+  if (messages?.length) {
+    return <Alert type="error" banner message={messages[0]} />;
+  }
+
+  return null;
+});
+
 function InsuranceTable() {
   const store = useStore();
 
   const { values } = store.$tables.insurance;
 
   return (
-    <Wrapper>
-      <Table
-        size="small"
-        pagination={false}
-        columns={columns}
-        dataSource={values}
-        scroll={{
-          x: true,
-        }}
-      />
-    </Wrapper>
+    <Grid>
+      <TableWrapper>
+        <Table
+          size="small"
+          pagination={false}
+          columns={columns}
+          dataSource={values}
+          scroll={{
+            x: true,
+          }}
+        />
+      </TableWrapper>
+      <Validation />
+    </Grid>
   );
 }
 

Elements/Alert.js

@@ -0,0 +1,3 @@
+/* eslint-disable unicorn/filename-case */
+/* eslint-disable no-restricted-exports */
+export { Alert as default } from 'antd';

stores/tables/insurance/index.ts

@@ -4,6 +4,7 @@ import * as insuranceTableConfig from 'config/tables/insurance-table';
 import { mergeWith } from 'lodash';
 import { makeAutoObservable } from 'mobx';
 import type RootStore from 'stores/root';
+import Validation from './validation';
 
 export interface InsuranceTableData {
   values: Insurance.RowValues[];
@@ -13,12 +14,14 @@ export interface InsuranceTableData {
 
 export default class InsuranceTable {
   root: RootStore;
+  validation: Validation;
   values: Insurance.RowValues[] = insuranceTableConfig.defaultValues;
   options: Insurance.RowOptions[] = insuranceTableConfig.defaultOptions;
   statuses: Insurance.RowStatuses[] = insuranceTableConfig.defaultStatuses;
 
   constructor(rootStore: RootStore) {
     this.root = rootStore;
+    this.validation = new Validation();
     makeAutoObservable(this);
   }
 

stores/tables/insurance/validation.ts

@@ -0,0 +1,29 @@
+import { makeAutoObservable, observable } from 'mobx';
+
+export default class Validation {
+  messages = observable<string>([]);
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  getMessages() {
+    return this.messages;
+  }
+
+  addError = (message: string) => {
+    this.messages.push(message);
+
+    const messageIndex = this.messages.length;
+
+    const removeError = () => {
+      this.messages.splice(messageIndex - 1, 1);
+    };
+
+    return removeError;
+  };
+
+  clearErrors = () => {
+    this.messages.clear();
+  };
+}