From 10a0618d17d47574a72362d3d944bcd67f246a88 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Tue, 28 Mar 2023 20:12:29 +0300
Subject: [PATCH] add dot badge for validation tab

---
 apps/web/Components/Output/index.jsx      | 38 ++++++++++++++++++-----
 apps/web/stores/calculation/index.ts      |  6 ++++
 apps/web/stores/tables/fingap/index.ts    |  4 +++
 apps/web/stores/tables/insurance/index.ts |  4 +++
 apps/web/stores/tables/payments/index.ts  |  4 +++
 packages/ui/elements/badge.js             |  1 +
 packages/ui/elements/index.ts             |  1 +
 7 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 packages/ui/elements/badge.js

diff --git a/apps/web/Components/Output/index.jsx b/apps/web/Components/Output/index.jsx
index c15e8fd..055e5ce 100644
--- a/apps/web/Components/Output/index.jsx
+++ b/apps/web/Components/Output/index.jsx
@@ -2,11 +2,39 @@ import PaymentsTable from './PaymentsTable';
 import Results from './Results';
 import Validation from './Validation';
 import Background from '@/Components/Layout/Background';
+import { useStore } from '@/stores/hooks';
 import { min } from '@/styles/mq';
+import { observer } from 'mobx-react-lite';
 import styled from 'styled-components';
-import Tabs from 'ui/elements/layout/Tabs';
+import { Badge, Tabs } from 'ui';
 
 const outputTabs = [PaymentsTable, Results, Validation];
+const items = outputTabs.map(({ Component, id, title }) => {
+  let Label = () => title;
+
+  if (id === 'validation') {
+    Label = observer(() => {
+      const { $calculation, $tables } = useStore();
+      const hasErrors =
+        $calculation.hasErrors ||
+        $tables.fingap.hasErrors ||
+        $tables.insurance.hasErrors ||
+        $tables.payments.hasErrors;
+
+      return (
+        <Badge offset={[5, 0]} dot={hasErrors}>
+          {title}
+        </Badge>
+      );
+    });
+  }
+
+  return {
+    children: <Component />,
+    key: id,
+    label: <Label />,
+  };
+});
 
 const Wrapper = styled(Background)`
   padding: 4px 10px;
@@ -21,13 +49,7 @@ const Wrapper = styled(Background)`
 function Output() {
   return (
     <Wrapper>
-      <Tabs>
-        {outputTabs.map(({ id, title, Component }) => (
-          <Tabs.TabPane tab={title} key={id}>
-            <Component />
-          </Tabs.TabPane>
-        ))}
-      </Tabs>
+      <Tabs items={items} />
     </Wrapper>
   );
 }
diff --git a/apps/web/stores/calculation/index.ts b/apps/web/stores/calculation/index.ts
index c49be96..5170830 100644
--- a/apps/web/stores/calculation/index.ts
+++ b/apps/web/stores/calculation/index.ts
@@ -17,6 +17,12 @@ export default class CalculationStore {
   public $options: OptionsStore;
   public $validation: Partial<Record<Values.Elements, Validation>>;
 
+  public get hasErrors() {
+    return (Object.keys(this.$validation) as Values.Elements[]).some(
+      (elementName) => this.$validation[elementName]?.hasErrors
+    );
+  }
+
   constructor(rootStore: RootStore) {
     this.root = rootStore;
     this.$values = new ValuesStore(rootStore);
diff --git a/apps/web/stores/tables/fingap/index.ts b/apps/web/stores/tables/fingap/index.ts
index 90b0541..4b7fe50 100644
--- a/apps/web/stores/tables/fingap/index.ts
+++ b/apps/web/stores/tables/fingap/index.ts
@@ -27,6 +27,10 @@ export default class FinGAPTable {
     this.root = rootStore;
   }
 
+  public get hasErrors() {
+    return this.validation.hasErrors;
+  }
+
   public getSelectedRisks() {
     return toJS(this.risks.filter((x) => this.selectedKeys.has(x.key)));
   }
diff --git a/apps/web/stores/tables/insurance/index.ts b/apps/web/stores/tables/insurance/index.ts
index bee94d9..461225b 100644
--- a/apps/web/stores/tables/insurance/index.ts
+++ b/apps/web/stores/tables/insurance/index.ts
@@ -33,6 +33,10 @@ export default class InsuranceTable {
     this.root = rootStore;
   }
 
+  public get hasErrors() {
+    return this.validation.hasErrors;
+  }
+
   public hydrate = ({
     values: initialValues,
     options: initialOptions,
diff --git a/apps/web/stores/tables/payments/index.ts b/apps/web/stores/tables/payments/index.ts
index 9e87865..5688f33 100644
--- a/apps/web/stores/tables/payments/index.ts
+++ b/apps/web/stores/tables/payments/index.ts
@@ -40,6 +40,10 @@ export default class PaymentsTable {
     );
   }
 
+  public get hasErrors() {
+    return this.validation.hasErrors;
+  }
+
   public getValue(index: number) {
     return this.values[index];
   }
diff --git a/packages/ui/elements/badge.js b/packages/ui/elements/badge.js
new file mode 100644
index 0000000..d4ecff9
--- /dev/null
+++ b/packages/ui/elements/badge.js
@@ -0,0 +1 @@
+export { Badge } from 'antd';
diff --git a/packages/ui/elements/index.ts b/packages/ui/elements/index.ts
index 7b14df4..7ba3afd 100644
--- a/packages/ui/elements/index.ts
+++ b/packages/ui/elements/index.ts
@@ -1,3 +1,4 @@
+export * from './badge';
 export { default as Button } from './Button';
 export { default as Checkbox } from './Checkbox';
 export { default as AntdConfig } from './Config';