Calculation/Insurance: add FinGAP table

Components/Calculation/Form/Insurance/FinGAPTable/config.ts

@@ -0,0 +1,25 @@
+/* eslint-disable import/prefer-default-export */
+import type { ColumnsType } from 'antd/lib/table';
+import { formatMoney } from 'tools/format';
+import type { Risk } from './types';
+
+export const columns: ColumnsType<Risk> = [
+  {
+    key: 'riskName',
+    dataIndex: 'riskName',
+    title: 'Риск',
+    width: '55%',
+  },
+  {
+    key: 'sum',
+    title: 'Страховая сумма',
+    dataIndex: 'sum',
+    render: (value: number) => formatMoney(value, 'RUB'),
+  },
+  {
+    key: 'premium',
+    title: 'Страховая премия по риску',
+    dataIndex: 'premium',
+    render: (value: number) => formatMoney(value, 'RUB'),
+  },
+];

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

@@ -0,0 +1,33 @@
+import Table from 'Elements/Table';
+import { useStore } from 'stores/hooks';
+import { columns } from './config';
+
+export default function FinGAPTable() {
+  const { $tables } = useStore();
+  const { finGAP } = $tables;
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={finGAP.risks}
+      rowSelection={{
+        type: 'checkbox',
+        onChange: (_, selectedRows) => {
+          const selectedKeys = selectedRows.reduce((acc, row) => {
+            acc.push(row.key);
+            if (row.keys) return [...acc, ...row.keys];
+
+            return acc;
+          }, []);
+
+          finGAP.setSelectedKeys(selectedKeys);
+        },
+      }}
+      pagination={false}
+      size="small"
+      scroll={{
+        x: true,
+      }}
+    />
+  );
+}

Components/Calculation/Form/Insurance/FinGAPTable/types.ts

@@ -0,0 +1,10 @@
+export type Risk = {
+  key: string;
+  riskId: string;
+  riskName: string;
+  calcType: number;
+  premiumPerc: number;
+  sum: number;
+  premium: number;
+  keys?: string[];
+};

Components/Calculation/Form/Insurance/index.jsx

@@ -1,6 +1,7 @@
 import { Flex } from 'UIKit/grid';
 import renderFormRows from '../../lib/render-rows';
 import { id, rows, title } from './config';
+import FinGAPTable from './FinGAPTable';
 import InsuranceTable from './InsuranceTable';
 
 function Insurance() {
@@ -10,7 +11,7 @@ function Insurance() {
     <Flex flexDirection="column">
       {renderedRows}
       <InsuranceTable />
-      {/* TODO: add FinGAP Table */}
+      <FinGAPTable />
     </Flex>
   );
 }

pages/_app.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable global-require */
 import { ApolloProvider } from '@apollo/client';
+import { ConfigProvider } from 'antd';
 import 'antd/dist/antd.less';
 import { useApollo } from 'apollo/hooks';
 import Layout from 'Components/Layout';
@@ -11,6 +12,8 @@ import { GlobalStyle } from 'UIKit/colors';
 import theme from 'UIKit/theme';
 import '../styles/globals.css';
 
+import ruRU from 'antd/lib/locale/ru_RU';
+
 if (process.env.NODE_ENV === 'development') {
   require('../mocks');
 }
@@ -28,11 +31,13 @@ function App({ Component, pageProps }: AppProps) {
       </Head>
       <GlobalStyle />
       <StoreProvider {...pageProps}>
-        <Layout>
-          <ApolloProvider client={apolloClient}>
-            <Component {...pageProps} />
-          </ApolloProvider>
-        </Layout>
+        <ConfigProvider locale={ruRU}>
+          <Layout>
+            <ApolloProvider client={apolloClient}>
+              <Component {...pageProps} />
+            </ApolloProvider>
+          </Layout>
+        </ConfigProvider>
       </StoreProvider>
     </ThemeProvider>
   );

stores/tables/fingap/index.ts

@@ -0,0 +1,37 @@
+import type * as FinGAP from 'Components/Calculation/Form/Insurance/FinGAPTable/types';
+import type { IObservableArray } from 'mobx';
+import { makeAutoObservable, observable } from 'mobx';
+import type RootStore from 'stores/root';
+
+export default class FinGAPTable {
+  root: RootStore;
+  risks: IObservableArray<FinGAP.Risk>;
+  selectedKeys: Set<string>;
+
+  constructor(rootStore: RootStore) {
+    this.selectedKeys = new Set();
+    this.risks = observable<FinGAP.Risk>([]);
+    makeAutoObservable(this);
+
+    this.root = rootStore;
+  }
+
+  setRisks = (risks: FinGAP.Risk[]) => {
+    this.risks.replace(risks);
+  };
+
+  setSelectedKeys = (keys: string[]) => {
+    this.selectedKeys = new Set(keys);
+  };
+
+  get totalSum() {
+    return this.risks
+      .filter((risk) => this.selectedKeys.has(risk.key))
+      .reduce((sum, risk) => sum + risk.premium, 0);
+  }
+
+  clear = () => {
+    this.risks.clear();
+    this.selectedKeys.clear();
+  };
+}

stores/tables/index.ts

@@ -1,10 +1,13 @@
 import type RootStore from 'stores/root';
+import FinGAPTable from './fingap';
 import InsuranceTable from './insurance';
 
 export default class TablesStore {
   insurance: InsuranceTable;
+  finGAP: FinGAPTable;
 
   constructor(rootStore: RootStore) {
     this.insurance = new InsuranceTable(rootStore);
+    this.finGAP = new FinGAPTable(rootStore);
   }
 }