Added Well operations modal window to Cluster info table

src/pages/Cluster/ClusterWells.jsx

@@ -12,6 +12,7 @@ import { calcAndUpdateStatsBySections, makeFilterMinMaxFunction } from "./functi
 import { invokeWebApiWrapperAsync } from '../../components/factory';
 import { WellOperationStatService } from '../../services/api';
 import ChartDepthToDay from '../../components/charts/ChartDepthToDay';
+import WellOperationsTable from './WellOperationsTable'
 
 const filtersMinMax = [
   {
@@ -38,35 +39,39 @@ const filtersWellsType = [
 export default function ClusterWells({ clusterData }) {
   let { id } = useParams();
   const [wellsStat, setWellsStat] = useState([]);
-  const [selectedWellId, setSelectedWellId] = useState(0);
-  const [isModalVisible, setIsModalVisible] = useState(false)
-  const [dataPlan, setDataPlan] = useState([]);
-  const [dataFact, setDataFact] = useState([]);
-  const [dataForecast, setDataForecast] = useState([]);
+  const [selectedWellId, setSelectedWellId] = useState([]);
+  const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
+  const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
+  const [tvdDataPlan, setTvdDataPlan] = useState([]);
+  const [tvdDataFact, setTvdDataFact] = useState([]);
+  const [tvdDataForecast, setTvdDataForecast] = useState([]);
+  const [wellOperations, setWellOperations] = useState([]);
 
   useEffect(() => {
     if (selectedWellId > 0) {
       invokeWebApiWrapperAsync(
         async () => {
           const operations = await WellOperationStatService.getTvd(selectedWellId);
-  
-          const planData = operations.map(el => { 
+          
+          setWellOperations(operations)
+
+          const tvdPlanData = operations.map(el => { 
             return {key: el.plan?.id, depth: el.plan?.wellDepth, date: el.plan?.startDate}
           }).filter(el => el.key)
+          
+          setTvdDataPlan(tvdPlanData)
   
-          setDataPlan(planData)
-  
-          const factData = operations.map(el => { 
+          const tvdFactData = operations.map(el => { 
             return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate}
           }).filter(el => el.key)
   
-          setDataFact(factData)
+          setTvdDataFact(tvdFactData)
   
-          const predictData = operations.map(el => { 
+          const tvdPredictData = operations.map(el => { 
             return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate}
           }).filter(el => el.key)
   
-          setDataForecast(predictData)
+          setTvdDataForecast(tvdPredictData)
         },
         null,
         `Не удалось загрузить операции по скважине "${selectedWellId}"`,
@@ -131,14 +136,17 @@ export default function ClusterWells({ clusterData }) {
     makeNumericColumnPlanFact("НПВ, сут", "notProductiveTime", filtersMinMax, makeFilterMinMaxFunction),
     {
       title: "График глубина-день",
-      render: (_, item) => <Button onClick={()=> {
-        setIsModalVisible(true) 
-        setSelectedWellId(_.id)
+      render: (value) => <Button onClick={()=> {
+        setSelectedWellId(value.id)
+        setIsTVDModalVisible(true) 
       }}>Открыть</Button>,
     },
     {
       title: "Таблица по операциям",
-      render: (_) => <Button>Открыть</Button>,
+      render: (value) => <Button onClick={()=> {
+        setSelectedWellId(value.id)
+        setIsOpsModalVisible(true) 
+      }}>Открыть</Button>,
     },
     {
       title: "Подрядчики",
@@ -161,17 +169,30 @@ export default function ClusterWells({ clusterData }) {
       />
 
       <Modal
-      title='TVD'
-      centered
-      visible={isModalVisible}
-      onCancel={() => setIsModalVisible(false)}
-      width={1500}
-      footer={null}
+        title='TVD'
+        centered
+        visible={isTVDModalVisible}
+        onCancel={() => setIsTVDModalVisible(false)}
+        width={1500}
+        footer={null}
       >
         <ChartDepthToDay 
-          dataPlan={dataPlan} 
-          dataFact={dataFact} 
-          dataForecast={dataForecast} />
+          dataPlan={tvdDataPlan} 
+          dataFact={tvdDataFact} 
+          dataForecast={tvdDataForecast} />
+      </Modal>
+
+      <Modal
+        title='Операции'
+        centered
+        visible={isOpsModalVisible}
+        onCancel={() => setIsOpsModalVisible(false)}
+        width={1500}
+        footer={null}
+      >
+        <WellOperationsTable 
+          wellOperations={wellOperations}
+        />
       </Modal>
     </div>
   );

src/pages/Cluster/WellOperationsTable.jsx

@@ -0,0 +1,43 @@
+
+import { Table } from "antd";
+import { 
+    makeTextColumn,
+    makeNumericColumnPlanFact
+ } from "../../components/Table"
+
+export default function WellOperationsTable({wellOperations}) {
+
+    const columns = [
+        makeTextColumn("","index"),
+        makeTextColumn("Конструкция секции","sectionType"),
+        makeTextColumn("Операция","operationName"),
+        makeNumericColumnPlanFact("Глубина забоя", "depth"),
+        makeNumericColumnPlanFact("Часы", "durationHours")
+    ];
+
+    let i = 1;
+
+    const operations = wellOperations.map(el => {
+        return {
+            key: el.plan ? el.plan.id : el.fact.id,
+            index: i++,
+            sectionType: el.plan ? el.plan.wellSectionTypeName : el.fact.wellSectionTypeName,
+            operationName: el.plan ? el.plan.categoryName : el.fact.categoryName,
+            depthPlan: el.plan ? el.plan.wellDepth : '-',
+            depthFact: el.fact ? el.fact.wellDepth : '-',
+            durationHoursPlan: el.plan ? el.plan.durationHours : '-',
+            durationHoursFact: el.fact ? el.fact.durationHours : '-'
+        }
+    })
+
+    return(    
+        <Table
+            columns={columns}
+            dataSource={operations}
+            size={"small"}
+            bordered
+            pagination={false}
+            rowKey={(record) => record.id}
+        />
+    )
+}