asb_cloud_front/src/pages/Cluster/ClusterWells.jsx

import { Link } from "react-router-dom";
import { useState } from "react";
import { Table, Tag, Button, Modal } from "antd";
import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons";
import {
  makeTextColumn,
  makeGroupColumn,
  makeColumn,
  makeNumericColumnPlanFact,
  makeDateSorter
} from "../../components/Table";
import { calcAndUpdateStatsBySections, makeFilterMinMaxFunction } from "./functions";
import { invokeWebApiWrapperAsync } from '../../components/factory';
import { WellOperationStatService } from '../../services/api';
import ChartDepthToDay from '../../components/charts/ChartDepthToDay';
import WellOperationsTable from './WellOperationsTable'

const filtersMinMax = [
  {
    text: "min",
    value: "min",
  },
  {
    text: "max",
    value: "max",
  },
];

const filtersWellsType = [];

export default function ClusterWells({clusterData}) {

  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([]);

  const getOperations = (wellId) => {
    invokeWebApiWrapperAsync(
      async () => {
        const operations = await WellOperationStatService.getTvd(wellId);
        
        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)

        const tvdFactData = operations.map(el => { 
          return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate}
        }).filter(el => el.key)

        setTvdDataFact(tvdFactData)

        const tvdPredictData = operations.map(el => { 
          return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate}
        }).filter(el => el.key)

        setTvdDataForecast(tvdPredictData)
      },
      null,
      `Не удалось загрузить операции по скважине "${wellId}"`,
    );
  }

  let tableData = clusterData.statsWells?.map((well) => {
    
    if (!filtersWellsType.some((el) => el.text === well.wellType))
    filtersWellsType.push({
      text: well.wellType,
      value: well.wellType,
    });

    return {
      key: well.id,
      id: well.id,
      caption: well.caption,
      wellType: well.wellType,
      factStart: well.total?.fact?.start,
      factEnd: well.total?.fact?.end,
      periodPlan: (
        (new Date(well.total?.plan?.end) - new Date(well.total?.plan?.start)) /
          (1000 * 60 * 60 * 24)
      ),
      periodFact: (
        (new Date(well.total?.fact?.end) - new Date(well.total?.fact?.start)) /
          (1000 * 60 * 60 * 24)
      ),
      rateOfPenetrationPlan: well.total?.plan?.rop,
      rateOfPenetrationFact: well.total?.fact?.rop,
      routeSpeedPlan: well.total?.plan?.routeSpeed,
      routeSpeedFact: well.total?.fact?.routeSpeed,
      notProductiveTimePlan: well.total?.plan?.nonProductiveHours,
      notProductiveTimeFact: well.total?.fact?.nonProductiveHours,
      companies: well.companies,
    };
  });

  calcAndUpdateStatsBySections(tableData ?? [], [
    "factStart",
    "factEnd",
    "periodPlan",
    "periodFact",
    "rateOfPenetrationPlan",
    "rateOfPenetrationFact",
    "routeSpeedPlan",
    "routeSpeedFact",
    "notProductiveTime",
  ]);

  const columns = [
    makeTextColumn("скв №", "caption", null, null, 
      (_, item) => (<Link to={`/well/${item.id}`}>{item.caption ?? '-'}</Link>
    )),
    makeTextColumn("Тип скв.", "wellType", filtersWellsType, null,
      (text) => text ?? '-'
    ),
    makeGroupColumn("Фактические сроки", [
      makeColumn("начало", "factStart", 
        {
          sorter: makeDateSorter('factStart'),
          render: (dateString) => !Number.isNaN(new Date(dateString).getTime()) 
                                  ? new Date(dateString).toLocaleString() 
                                  : '-'
        }
      ),
      makeColumn("окончание", "factEnd", 
        {
          sorter: makeDateSorter('factEnd'),
          render: (dateString) => !Number.isNaN(new Date(dateString).getTime()) 
                                  ? new Date(dateString).toLocaleString() 
                                  : '-'
        }
      ),
    ]),
    makeNumericColumnPlanFact(
      "Продолжительность", 
      "period", 
      filtersMinMax, 
      makeFilterMinMaxFunction,
      (number) => (!Number.isNaN(number) && number !== undefined) 
                  ? number.toFixed(2) 
                  : '-'),
    makeNumericColumnPlanFact(
      "МСП", 
      "rateOfPenetration", 
      filtersMinMax, 
      makeFilterMinMaxFunction,
      (number) => (!Number.isNaN(number) && number !== undefined) 
                  ? number.toFixed(2) 
                  : '-'),
    makeNumericColumnPlanFact(
      "Рейсовая скорость", 
      "routeSpeed", 
      filtersMinMax, 
      makeFilterMinMaxFunction,
      (number) => (!Number.isNaN(number) && number !== undefined) 
                  ? number.toFixed(2) 
                  : '-'),
    makeNumericColumnPlanFact(
      "НПВ, сут", 
      "notProductiveTime", 
      filtersMinMax, 
      makeFilterMinMaxFunction,
      (number) => (!Number.isNaN(number) && number !== undefined) 
                  ? number.toFixed(2) 
                  : '-'),
    {
      title: "TVD",
      render: (value) => <Button onClick={()=> {
        getOperations(value.id)
        setIsTVDModalVisible(true) 
      }}><LineChartOutlined /></Button>,
      align: 'center'
    },
    {
      title: "Операции",
      render: (value) => <Button onClick={()=> {
        getOperations(value.id)
        setIsOpsModalVisible(true) 
      }}><ProfileOutlined /></Button>,
      align: 'center'
    },
    {
      title: "Подрядчики",
      key: "companies",
      dataIndex: "companies",
      render: (item) =>
        item.map((company) => <Tag color="blue">{company.caption}</Tag>),
    },
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={tableData}
        size={"small"}
        bordered
        pagination={false}
        rowKey={(record) => record.id}
      />

      <Modal
        title='TVD'
        centered
        visible={isTVDModalVisible}
        onCancel={() => setIsTVDModalVisible(false)}
        width={1500}
        footer={null}
      >
        <ChartDepthToDay 
          dataPlan={tvdDataPlan} 
          dataFact={tvdDataFact} 
          dataForecast={tvdDataForecast} 
        />
      </Modal>

      <Modal
        title='Операции'
        centered
        visible={isOpsModalVisible}
        onCancel={() => setIsOpsModalVisible(false)}
        width={1500}
        footer={null}
      >
        <WellOperationsTable 
          wellOperations={wellOperations}
        />
      </Modal>
    </div>
  );
}