From 0148fed51407f50877944478c98ece814f15ddf6 Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Fri, 12 Aug 2022 14:35:57 +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=B0=D1=85?=
 =?UTF-8?q?=20"=D0=90=D0=BD=D0=B0=D0=BB=D0=B8=D0=B7=20=D1=81=D0=BA=D0=B2?=
 =?UTF-8?q?=D0=B0=D0=B6=D0=B8=D0=BD=20=D0=BA=D1=83=D1=81=D1=82=D0=B0",=20"?=
 =?UTF-8?q?=D0=9C=D0=BE=D0=BD=D0=B8=D1=82=D0=BE=D1=80=D0=B8=D0=BD=D0=B3"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WellCompositeSections.jsx                 | 31 +++++++++++++++----
 src/pages/Cluster/ClusterWells.jsx            | 18 +++--------
 src/pages/Cluster/CompaniesTable.jsx          |  7 ++---
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/pages/Analytics/WellCompositeEditor/WellCompositeSections.jsx b/src/pages/Analytics/WellCompositeEditor/WellCompositeSections.jsx
index c9cba37..354b159 100644
--- a/src/pages/Analytics/WellCompositeEditor/WellCompositeSections.jsx
+++ b/src/pages/Analytics/WellCompositeEditor/WellCompositeSections.jsx
@@ -1,6 +1,6 @@
 import { Link, useLocation } from 'react-router-dom'
 import { useState, useEffect, memo, useMemo } from 'react'
-import { LineChartOutlined, ProfileOutlined } from '@ant-design/icons'
+import { LineChartOutlined, ProfileOutlined, TeamOutlined } from '@ant-design/icons'
 import { Table, Tag, Button, Badge, Divider, Modal, Row, Col } from 'antd'
 
 import { useIdWell } from '@asb/context'
@@ -20,6 +20,7 @@ import {
 import Tvd from '@pages/WellOperations/Tvd'
 import WellOperationsTable from '@pages/Cluster/WellOperationsTable'
 import NewParamsTable from './NewParamsTable'
+import CompaniesTable from "@pages/Cluster/CompaniesTable";
 
 const filtersMinMax = [
   { text: 'min', value: 'min' },
@@ -34,11 +35,13 @@ const DAY_IN_MS = 1000 * 60 * 60 * 24
 const WellCompositeSections = memo(({ statsWells, selectedSections }) => {
   const [selectedWells, setSelectedWells] = useState([])
   const [wellOperations, setWellOperations] = useState([])
+  const [companies, setCompanies] = useState([])
   const [selectedWellsKeys, setSelectedWellsKeys] = useState([])
   const [selectedWellId, setSelectedWellId] = useState(0)
   const [showLoader, setShowLoader] = useState(false)
   const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
   const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
+  const [isCompaniesModalVisible, setIsCompaniesModalVisible] = useState(false)
 
   const idWell = useIdWell()
 
@@ -177,11 +180,14 @@ const WellCompositeSections = memo(({ statsWells, selectedSections }) => {
     {
       title: 'Участники',
       dataIndex: 'companies',
-      render: (item) => item?.map((company) => (
-        <Tag key={company.caption} color={'blue'}>
-          <CompanyView company={company} />
-        </Tag>
-      )) ?? '-',
+      render: (value) => {
+        return <Button onClick={() => {
+          setCompanies(value)
+          setIsCompaniesModalVisible(true)
+        }}>
+          <TeamOutlined/>
+        </Button>
+      },
     },
   ], [location.pathname])
 
@@ -236,6 +242,19 @@ const WellCompositeSections = memo(({ statsWells, selectedSections }) => {
           <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/ClusterWells.jsx b/src/pages/Cluster/ClusterWells.jsx
index 498de12..fbd4036 100755
--- a/src/pages/Cluster/ClusterWells.jsx
+++ b/src/pages/Cluster/ClusterWells.jsx
@@ -69,17 +69,6 @@ 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))
@@ -154,8 +143,11 @@ const ClusterWells = memo(({ statsWells }) => {
     makeColumn('Операции', 'operations', { align: 'center', render: (_, value) => (
       <Button onClick={() => { setSelectedWellId(value?.id); setIsOpsModalVisible(true) }} children={<ProfileOutlined />} />
     ) }),
-    makeColumn('Участники', 'companies', { align: 'center', render: (_, value) => (
-          <Button onClick={() => { setSelectedWellId(value?.id); setIsCompaniesModalVisible(true) }} children={<TeamOutlined />} />
+    makeColumn('Участники', 'companies', { align: 'center', render: (value) => (
+          <Button onClick={() => {
+            setCompanies(value);
+            setIsCompaniesModalVisible(true);
+          }} children={<TeamOutlined />} />
       ) }),
   ], [location.pathname])
 
diff --git a/src/pages/Cluster/CompaniesTable.jsx b/src/pages/Cluster/CompaniesTable.jsx
index f691544..2fb47eb 100644
--- a/src/pages/Cluster/CompaniesTable.jsx
+++ b/src/pages/Cluster/CompaniesTable.jsx
@@ -1,4 +1,4 @@
-import React, {memo} from 'react';
+import React, {memo, useMemo} from 'react';
 import {makeTextColumn} from "@components/Table";
 import {Table} from "antd";
 
@@ -8,12 +8,11 @@ const columns = [
 ]
 
 const CompaniesTable = memo(({companies}) => {
-    console.log(companies)
-    const dataCompanies = companies?.map((company) => ({
+    const dataCompanies = useMemo(() => companies?.map((company) => ({
         key: company.id,
         caption: company.caption,
         companyTypeCaption: company.companyTypeCaption,
-    }));
+    })), [companies]);
 
     return (
         <Table