From c507f7739419c93f477a29286bea4c4881b1a8a3 Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Fri, 12 Aug 2022 11:38:03 +0400
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B5=20=D0=BE=D0=BA=D0=BD=D0=BE=20=D0=B4=D0=BB=D1=8F=20=D1=83?=
 =?UTF-8?q?=D1=87=D0=B0=D1=81=D1=82=D0=BD=D0=B8=D0=BA=D0=BE=D0=B2=20=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5=20"?=
 =?UTF-8?q?=D0=90=D0=BD=D0=B0=D0=BB=D0=B8=D0=B7=20=D1=81=D0=BA=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=B6=D0=B8=D0=BD=20=D0=BA=D1=83=D1=81=D1=82=D0=B0"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Cluster/ClusterWells.jsx   | 39 ++++++++++++++++++++++------
 src/pages/Cluster/CompaniesTable.jsx | 31 ++++++++++++++++++++++
 2 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/Cluster/CompaniesTable.jsx

diff --git a/src/pages/Cluster/ClusterWells.jsx b/src/pages/Cluster/ClusterWells.jsx
index 604a10a..498de12 100755
--- a/src/pages/Cluster/ClusterWells.jsx
+++ b/src/pages/Cluster/ClusterWells.jsx
@@ -1,7 +1,7 @@
 import { Link, useLocation } from 'react-router-dom'
 import { useState, useEffect, memo, useMemo } from 'react'
 import { Tag, Button, Modal } from 'antd'
-import { LineChartOutlined, ProfileOutlined } from '@ant-design/icons'
+import { LineChartOutlined, ProfileOutlined, TeamOutlined } from '@ant-design/icons'
 
 import {
   makeTextColumn,
@@ -27,6 +27,7 @@ import {
 
 import Tvd from '@pages/WellOperations/Tvd'
 import WellOperationsTable from './WellOperationsTable'
+import CompaniesTable from "@pages/Cluster/CompaniesTable";
 
 const filtersMinMax = [
   { text: 'min', value: 'min' },
@@ -44,7 +45,9 @@ const ClusterWells = memo(({ statsWells }) => {
   const [selectedWellId, setSelectedWellId] = useState(0)
   const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
   const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
+  const [isCompaniesModalVisible, setIsCompaniesModalVisible] = useState(false)
   const [wellOperations, setWellOperations] = useState([])
+  const [companies, setCompanies] = useState([])
   const [tableData, setTableData] = useState([])
   const [showLoader, setShowLoader] = useState(false)
 
@@ -66,6 +69,17 @@ const ClusterWells = memo(({ statsWells }) => {
     )
   }, [selectedWellId, isOpsModalVisible])
 
+  useEffect(() => {
+    if (!isCompaniesModalVisible || selectedWellId <= 0) {
+      setCompanies([])
+      return
+    }
+
+    const selectedCompanies = statsWells.find(well => well.id === selectedWellId)?.companies;
+    setCompanies(selectedCompanies ? selectedCompanies : []);
+
+  }, [selectedWellId, isCompaniesModalVisible])
+
   useEffect(() => {
     let data = statsWells?.map((well) => {
       if (!filtersWellsType.some((el) => el.text === well.wellType))
@@ -140,13 +154,9 @@ const ClusterWells = memo(({ statsWells }) => {
     makeColumn('Операции', 'operations', { align: 'center', render: (_, value) => (
       <Button onClick={() => { setSelectedWellId(value?.id); setIsOpsModalVisible(true) }} children={<ProfileOutlined />} />
     ) }),
-    makeColumn('Участники', 'companies', {
-      render: (item) => item?.map((company) => (
-        <Tag key={company.caption} color={'blue'}>
-          <CompanyView company={company} />
-        </Tag>
-      )) ?? '-',
-    }),
+    makeColumn('Участники', 'companies', { align: 'center', render: (_, value) => (
+          <Button onClick={() => { setSelectedWellId(value?.id); setIsCompaniesModalVisible(true) }} children={<TeamOutlined />} />
+      ) }),
   ], [location.pathname])
 
   return (
@@ -184,6 +194,19 @@ const ClusterWells = memo(({ statsWells }) => {
           <WellOperationsTable wellOperations={wellOperations} />
         </LoaderPortal>
       </Modal>
+
+      <Modal
+          title={'Участники'}
+          centered
+          visible={isCompaniesModalVisible}
+          onCancel={() => setIsCompaniesModalVisible(false)}
+          width={1500}
+          footer={null}
+      >
+        <LoaderPortal show={showLoader}>
+          <CompaniesTable companies={companies} />
+        </LoaderPortal>
+      </Modal>
     </>
   )
 })
diff --git a/src/pages/Cluster/CompaniesTable.jsx b/src/pages/Cluster/CompaniesTable.jsx
new file mode 100644
index 0000000..f691544
--- /dev/null
+++ b/src/pages/Cluster/CompaniesTable.jsx
@@ -0,0 +1,31 @@
+import React, {memo} from 'react';
+import {makeTextColumn} from "@components/Table";
+import {Table} from "antd";
+
+const columns = [
+    makeTextColumn('Название компании', 'caption'),
+    makeTextColumn('Тип компании', 'companyTypeCaption'),
+]
+
+const CompaniesTable = memo(({companies}) => {
+    console.log(companies)
+    const dataCompanies = companies?.map((company) => ({
+        key: company.id,
+        caption: company.caption,
+        companyTypeCaption: company.companyTypeCaption,
+    }));
+
+    return (
+        <Table
+            bordered
+            size={'small'}
+            columns={columns}
+            dataSource={dataCompanies}
+            rowKey={(record) => record.key}
+            pagination={{ defaultPageSize: 10 }}
+            tableName={'well_operations'}
+        />
+    );
+});
+
+export default CompaniesTable;
\ No newline at end of file