Merged in feature/add-members-modal-window (pull request #3)

Добавлено модальное окно для участников

Approved-by: Александр Васильевич Сироткин

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) => (
+        <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

@@ -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)
 
@@ -135,18 +138,29 @@ const ClusterWells = memo(({ statsWells }) => {
     makeNumericColumnPlanFact('Рейсовая скорость, м/ч', 'routeSpeed', filtersMinMax, makeFilterMinMaxFunction, numericRender),
     makeNumericColumn('НПВ, ч', 'notProductiveTimeFact', filtersMinMax, makeFilterMinMaxFunction, numericRender),
     makeColumn('TVD', 'tvd', { align: 'center', render: (_, value) => (
-      <Button onClick={() => { setSelectedWellId(value?.id); setIsTVDModalVisible(true) }} children={<LineChartOutlined />} />
+      <Button onClick={() => {
+        setSelectedWellId(value?.id)
+        setIsTVDModalVisible(true)
+      }}>
+        <LineChartOutlined />
+      </Button>
     ) }),
     makeColumn('Операции', 'operations', { align: 'center', render: (_, value) => (
-      <Button onClick={() => { setSelectedWellId(value?.id); setIsOpsModalVisible(true) }} children={<ProfileOutlined />} />
+      <Button onClick={() => {
+        setSelectedWellId(value?.id)
+        setIsOpsModalVisible(true)
+      }}>
+        <ProfileOutlined />
+      </Button>
+    ) }),
+    makeColumn('Участники', 'companies', { align: 'center', render: (value) => (
+        <Button onClick={() => {
+          setCompanies(value)
+          setIsCompaniesModalVisible(true)
+        }}>
+          <TeamOutlined />
+        </Button>
       ) }),
-    makeColumn('Участники', 'companies', {
-      render: (item) => item?.map((company) => (
-        <Tag key={company.caption} color={'blue'}>
-          <CompanyView company={company} />
-        </Tag>
-      )) ?? '-',
-    }),
   ], [location.pathname])
 
   return (
@@ -184,6 +198,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,33 @@
+import React, { memo, useMemo } from 'react'
+import { BankOutlined } from '@ant-design/icons'
+
+import { makeTextColumn, Table } from '@components/Table'
+
+const columns = [
+    makeTextColumn('', 'logo'),
+    makeTextColumn('Название компании', 'caption'),
+    makeTextColumn('Тип компании', 'companyTypeCaption'),
+]
+
+const CompaniesTable = memo(({companies}) => {
+    const dataCompanies = useMemo(() => companies?.map((company) => ({
+        key: company.id,
+        logo: company?.logo ? <img src={company.logo}/> : <BankOutlined/>,
+        caption: company.caption,
+        companyTypeCaption: company.companyTypeCaption,
+    })), [companies])
+
+    return (
+        <Table
+            bordered
+            size={'small'}
+            columns={columns}
+            dataSource={dataCompanies}
+            rowKey={(record) => record.key}
+            pagination={{ defaultPageSize: 10 }}
+            tableName={'well_operations'}
+        />
+    )
+})
+
+export default CompaniesTable