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

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

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;