Добавлено модальное окно для участников на страницах "Анализ скважин куста", "Мониторинг"

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>
     </>
   )
 })

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])
 

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