From baf4f3fad0575f74f3f1b99c538fac69cc3c565a Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Wed, 3 May 2023 19:29:36 +0300
Subject: [PATCH] add elt components

---
 .../Form/ELT/Components/PolicyTable.jsx       | 20 +++++++++
 .../Form/ELT/Components/ReloadButton.jsx      | 15 +++++++
 .../Form/ELT/Components/Validation.jsx        | 22 +++++++++
 .../Calculation/Form/ELT/Components/index.ts  |  3 ++
 .../Components/Calculation/Form/ELT/Kasko.jsx | 20 +++++++++
 .../Components/Calculation/Form/ELT/Osago.jsx | 20 +++++++++
 .../Components/Calculation/Form/ELT/index.jsx | 20 +++++++++
 .../Calculation/Form/ELT/lib/config.tsx       | 35 +++++++++++++++
 .../Components/Calculation/Form/ELT/types.ts  |  4 ++
 .../Form/Insurance/InsuranceTable/config.tsx  |  1 +
 .../web/Components/Calculation/Form/index.jsx |  2 +
 apps/web/config/schema/elt.ts                 |  9 ++++
 apps/web/stores/tables/elt/index.ts           | 29 ++++++++++++
 apps/web/stores/tables/elt/policy.ts          | 45 +++++++++++++++++++
 apps/web/stores/tables/index.ts               |  3 ++
 15 files changed, 248 insertions(+)
 create mode 100644 apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.jsx
 create mode 100644 apps/web/Components/Calculation/Form/ELT/Components/ReloadButton.jsx
 create mode 100644 apps/web/Components/Calculation/Form/ELT/Components/Validation.jsx
 create mode 100644 apps/web/Components/Calculation/Form/ELT/Components/index.ts
 create mode 100644 apps/web/Components/Calculation/Form/ELT/Kasko.jsx
 create mode 100644 apps/web/Components/Calculation/Form/ELT/Osago.jsx
 create mode 100644 apps/web/Components/Calculation/Form/ELT/index.jsx
 create mode 100644 apps/web/Components/Calculation/Form/ELT/lib/config.tsx
 create mode 100644 apps/web/Components/Calculation/Form/ELT/types.ts
 create mode 100644 apps/web/config/schema/elt.ts
 create mode 100644 apps/web/stores/tables/elt/index.ts
 create mode 100644 apps/web/stores/tables/elt/policy.ts

diff --git a/apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.jsx b/apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.jsx
new file mode 100644
index 0000000..a894b1c
--- /dev/null
+++ b/apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.jsx
@@ -0,0 +1,20 @@
+import { useStore } from '@/stores/hooks';
+import { observer } from 'mobx-react-lite';
+import { Table } from 'ui/antd';
+
+export const PolicyTable = observer(({ getter, ...props }) => {
+  const { $tables } = useStore();
+  const { getValues } = getter($tables.elt);
+
+  return (
+    <Table
+      size="small"
+      pagination={false}
+      dataSource={getValues}
+      scroll={{
+        x: true,
+      }}
+      {...props}
+    />
+  );
+});
diff --git a/apps/web/Components/Calculation/Form/ELT/Components/ReloadButton.jsx b/apps/web/Components/Calculation/Form/ELT/Components/ReloadButton.jsx
new file mode 100644
index 0000000..6e29f0d
--- /dev/null
+++ b/apps/web/Components/Calculation/Form/ELT/Components/ReloadButton.jsx
@@ -0,0 +1,15 @@
+import { useStore } from '@/stores/hooks';
+import { observer } from 'mobx-react-lite';
+import { Button } from 'ui/antd';
+import { ReloadOutlined } from 'ui/elements/icons';
+
+export const ReloadButton = observer(({ getter }) => {
+  const { $tables } = useStore();
+  const { validation } = getter($tables.elt);
+
+  const hasErrors = validation.hasErrors;
+
+  return (
+    <Button onClick={() => {}} disabled={hasErrors} shape="circle" icon={<ReloadOutlined />} />
+  );
+});
diff --git a/apps/web/Components/Calculation/Form/ELT/Components/Validation.jsx b/apps/web/Components/Calculation/Form/ELT/Components/Validation.jsx
new file mode 100644
index 0000000..836f9ff
--- /dev/null
+++ b/apps/web/Components/Calculation/Form/ELT/Components/Validation.jsx
@@ -0,0 +1,22 @@
+import { useStore } from '@/stores/hooks';
+import { observer } from 'mobx-react-lite';
+import { Alert } from 'ui/antd';
+
+export const Validation = observer(({ getter }) => {
+  const { $tables, $process } = useStore();
+  const { validation } = getter($tables.elt);
+
+  const errors = validation.getErrors();
+
+  if (errors?.length) {
+    return (
+      <Alert
+        type={$process.has('Unlimited') ? 'warning' : 'error'}
+        banner
+        message={errors[0].message}
+      />
+    );
+  }
+
+  return false;
+});
diff --git a/apps/web/Components/Calculation/Form/ELT/Components/index.ts b/apps/web/Components/Calculation/Form/ELT/Components/index.ts
new file mode 100644
index 0000000..91c03ed
--- /dev/null
+++ b/apps/web/Components/Calculation/Form/ELT/Components/index.ts
@@ -0,0 +1,3 @@
+export * from './PolicyTable';
+export * from './ReloadButton';
+export * from './Validation';
diff --git a/apps/web/Components/Calculation/Form/ELT/Kasko.jsx b/apps/web/Components/Calculation/Form/ELT/Kasko.jsx
new file mode 100644
index 0000000..1c75c14
--- /dev/null
+++ b/apps/web/Components/Calculation/Form/ELT/Kasko.jsx
@@ -0,0 +1,20 @@
+import { PolicyTable, ReloadButton, Validation } from './Components';
+import { columns } from './lib/config';
+import { Flex } from 'ui/grid';
+
+function getter(eltStore) {
+  return eltStore.kasko;
+}
+
+const kaskoColumns = [...columns];
+kaskoColumns[0].title = 'Страховая компания КАСКО';
+kaskoColumns[3].title = <ReloadButton getter={getter} />;
+
+export function Kasko() {
+  return (
+    <Flex flexDirection="column">
+      <Validation getter={getter} />
+      <PolicyTable getter={getter} columns={kaskoColumns} />
+    </Flex>
+  );
+}
diff --git a/apps/web/Components/Calculation/Form/ELT/Osago.jsx b/apps/web/Components/Calculation/Form/ELT/Osago.jsx
new file mode 100644
index 0000000..4299cbf
--- /dev/null
+++ b/apps/web/Components/Calculation/Form/ELT/Osago.jsx
@@ -0,0 +1,20 @@
+import { PolicyTable, ReloadButton, Validation } from './Components';
+import { columns } from './lib/config';
+import { Flex } from 'ui/grid';
+
+function getter(eltStore) {
+  return eltStore.osago;
+}
+
+const osagoColumns = [...columns];
+osagoColumns[0].title = 'Страховая компания ОСАГО';
+osagoColumns[3].title = <ReloadButton getter={getter} />;
+
+export function Osago() {
+  return (
+    <Flex flexDirection="column">
+      <Validation getter={getter} />
+      <PolicyTable getter={getter} columns={osagoColumns} />
+    </Flex>
+  );
+}
diff --git a/apps/web/Components/Calculation/Form/ELT/index.jsx b/apps/web/Components/Calculation/Form/ELT/index.jsx
new file mode 100644
index 0000000..f83de2e
--- /dev/null
+++ b/apps/web/Components/Calculation/Form/ELT/index.jsx
@@ -0,0 +1,20 @@
+import { Kasko } from './Kasko';
+import { Osago } from './Osago';
+
+const id = 'elt';
+const title = 'ЭЛТ';
+
+function ELT() {
+  return (
+    <>
+      <Osago />
+      <Kasko />
+    </>
+  );
+}
+
+export default {
+  Component: ELT,
+  id,
+  title,
+};
diff --git a/apps/web/Components/Calculation/Form/ELT/lib/config.tsx b/apps/web/Components/Calculation/Form/ELT/lib/config.tsx
new file mode 100644
index 0000000..e1745fb
--- /dev/null
+++ b/apps/web/Components/Calculation/Form/ELT/lib/config.tsx
@@ -0,0 +1,35 @@
+import type { RowSchema } from '@/config/schema/elt';
+import { LoadingOutlined } from 'ui/elements/icons';
+import type { ColumnsType } from 'ui/elements/table';
+import type { z } from 'zod';
+
+type Row = z.infer<typeof RowSchema>;
+
+const formatter = Intl.NumberFormat('ru', {
+  currency: 'RUB',
+  style: 'currency',
+}).format;
+
+export const columns: ColumnsType<Row> = [
+  {
+    dataIndex: 'name',
+    title: 'Страховая компания',
+  },
+  {
+    dataIndex: 'sum',
+    render: formatter,
+    sortDirections: ['descend', 'ascend'],
+    sorter: (a, b) => a.sum - b.sum,
+    title: 'Сумма',
+  },
+  {
+    dataIndex: 'totalFranchise',
+    render: formatter,
+    title: 'Франшиза',
+  },
+  {
+    dataIndex: 'isFetching',
+    render: (value) => value && <LoadingOutlined spin />,
+    title: undefined,
+  },
+];
diff --git a/apps/web/Components/Calculation/Form/ELT/types.ts b/apps/web/Components/Calculation/Form/ELT/types.ts
new file mode 100644
index 0000000..0171f15
--- /dev/null
+++ b/apps/web/Components/Calculation/Form/ELT/types.ts
@@ -0,0 +1,4 @@
+import type { RowSchema } from '@/config/schema/elt';
+import type { z } from 'zod';
+
+export type Row = z.infer<typeof RowSchema>;
diff --git a/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/config.tsx b/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/config.tsx
index a863c88..e9bc447 100644
--- a/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/config.tsx
+++ b/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/config.tsx
@@ -5,6 +5,7 @@ import { MAX_INSURANCE } from '@/constants/values';
 import { parser } from 'tools/number';
 import { InputNumber, Select } from 'ui/elements';
 import { createFormatter } from 'ui/elements/InputNumber';
+import type { ColumnsType } from 'ui/elements/Table';
 
 export const columns: ColumnsType<Insurance.RowValues> = [
   {
diff --git a/apps/web/Components/Calculation/Form/index.jsx b/apps/web/Components/Calculation/Form/index.jsx
index 3b1c3e0..5448eee 100644
--- a/apps/web/Components/Calculation/Form/index.jsx
+++ b/apps/web/Components/Calculation/Form/index.jsx
@@ -1,5 +1,6 @@
 import AddProduct from './AddProduct';
 import CreateKP from './CreateKP';
+import ELT from './ELT';
 import Insurance from './Insurance';
 import Leasing from './Leasing';
 import LeasingObject from './LeasingObject';
@@ -17,6 +18,7 @@ const formTabs = [
   LeasingObject,
   SupplierAgent,
   Insurance,
+  ELT,
   AddProduct,
   CreateKP,
   Unlimited,
diff --git a/apps/web/config/schema/elt.ts b/apps/web/config/schema/elt.ts
new file mode 100644
index 0000000..3c10a15
--- /dev/null
+++ b/apps/web/config/schema/elt.ts
@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const RowSchema = z.object({
+  isFetching: z.boolean(),
+  sum: z.number(),
+  key: z.string(),
+  name: z.string(),
+  totalFranchise: z.number(),
+});
diff --git a/apps/web/stores/tables/elt/index.ts b/apps/web/stores/tables/elt/index.ts
new file mode 100644
index 0000000..0198c37
--- /dev/null
+++ b/apps/web/stores/tables/elt/index.ts
@@ -0,0 +1,29 @@
+import PolicyStore from './policy';
+import type RootStore from '@/stores/root';
+
+export default class ELTStore {
+  public kasko: PolicyStore;
+  public osago: PolicyStore;
+
+  constructor(rootStore: RootStore) {
+    this.kasko = new PolicyStore({
+      rootStore,
+      validationConfig: {
+        err_key: 'ERR_ELT_KASKO',
+        err_title: 'ЭЛТ КАСКО',
+      },
+    });
+    this.osago = new PolicyStore({
+      rootStore,
+      validationConfig: {
+        err_key: 'ERR_ELT_OSAGO',
+        err_title: 'ЭЛТ ОСАГО',
+      },
+    });
+  }
+
+  public reset = () => {
+    this.kasko.reset();
+    this.osago.reset();
+  };
+}
diff --git a/apps/web/stores/tables/elt/policy.ts b/apps/web/stores/tables/elt/policy.ts
new file mode 100644
index 0000000..bf4a339
--- /dev/null
+++ b/apps/web/stores/tables/elt/policy.ts
@@ -0,0 +1,45 @@
+import type RootStore from '../../root';
+import Validation from '../../validation';
+import type { ValidationConfig } from '../../validation/types';
+import type * as ELT from '@/Components/Calculation/Form/ELT/types';
+import type { IObservableArray } from 'mobx';
+import { makeAutoObservable, observable } from 'mobx';
+
+type ConstructorInput = {
+  rootStore: RootStore;
+  validationConfig: ValidationConfig;
+};
+
+export default class PolicyStore {
+  private root: RootStore;
+  public validation: Validation;
+  private rows: IObservableArray<ELT.Row>;
+  private selectedKey: string | null = null;
+
+  constructor({ rootStore, validationConfig }: ConstructorInput) {
+    this.rows = observable<ELT.Row>([]);
+    makeAutoObservable(this);
+    this.validation = new Validation(validationConfig, rootStore);
+    this.root = rootStore;
+  }
+
+  public get getValues() {
+    return this.rows;
+  }
+
+  public get hasErrors() {
+    return this.validation.hasErrors;
+  }
+
+  public setSelectedKey = (key: string) => {
+    this.selectedKey = key;
+  };
+
+  public get getSelectedRow() {
+    return this.rows.find((x) => x.key === this.selectedKey);
+  }
+
+  public reset = () => {
+    this.rows.clear();
+  };
+}
diff --git a/apps/web/stores/tables/index.ts b/apps/web/stores/tables/index.ts
index 94f4763..d461555 100644
--- a/apps/web/stores/tables/index.ts
+++ b/apps/web/stores/tables/index.ts
@@ -1,3 +1,4 @@
+import ELTStore from './elt';
 import FinGAPTable from './fingap';
 import InsuranceTable from './insurance';
 import PaymentsTable from './payments';
@@ -7,10 +8,12 @@ export default class TablesStore {
   public payments: PaymentsTable;
   public insurance: InsuranceTable;
   public fingap: FinGAPTable;
+  public elt: ELTStore;
 
   constructor(rootStore: RootStore) {
     this.payments = new PaymentsTable(rootStore);
     this.insurance = new InsuranceTable(rootStore);
     this.fingap = new FinGAPTable(rootStore);
+    this.elt = new ELTStore(rootStore);
   }
 }