asb_cloud_front/src/pages/Cluster/ClusterWells.jsx

import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import { Table, Tag, Button, Modal } from "antd";
import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons";
import {
  makeTextColumn,
  makeGroupColumn,
  makeColumn,
  makeDateSorter,
  makeNumericColumnPlanFact} from "../../components/Table";
import { calcAndUpdateStatsBySections, makeFilterMinMaxFunction, getPrecision } from "./functions";
import { invokeWebApiWrapperAsync } from '../../components/factory';
import ChartTvD from '../WellOperations/ChartTvD';
import WellOperationsTable from './WellOperationsTable'
import { getOperations } from "./functions";
import LoaderPortal from "../../components/LoaderPortal";

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

const filtersWellsType = [];
const DAY_IN_MS = 1000 * 60 * 60 * 24;

export default function ClusterWells({statsWells}) {

  const [selectedWellId, setSelectedWellId] = useState(0)
  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 [tableData, setTableData] = useState([])
  const [showLoader, setShowLoader] = useState(false)

  useEffect(() => {
    if (selectedWellId > 0) {
      invokeWebApiWrapperAsync(
        async () => {
          const operations = await getOperations(selectedWellId);
          
          setWellOperations(operations.operations)
          setTvdDataPlan(operations.plan)
          setTvdDataFact(operations.fact)
          setTvdDataForecast(operations.predict)
        },
        setShowLoader,
        `Не удалось загрузить операции по скважине "${selectedWellId}"`,
      );
    } else {
      setWellOperations([])
    }
  }, [selectedWellId]);

  useEffect(() => {
    let data = statsWells?.map((well) => {
      if (!filtersWellsType.some((el) => el.text === well.wellType))
        filtersWellsType.push({ text: well.wellType, value: well.wellType,});
  
      return {
        key: well.caption,
        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)) / DAY_IN_MS,
        periodFact: (new Date(well.total?.fact?.end) - new Date(well.total?.fact?.start)) / DAY_IN_MS,
        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(data ?? [], [
      "factStart",
      "factEnd",
      "periodPlan",
      "periodFact",
      "rateOfPenetrationPlan",
      "rateOfPenetrationFact",
      "routeSpeedPlan",
      "routeSpeedFact",
      "notProductiveTime",
    ]);

    setTableData(data)
  }, [statsWells])

  const getDate = (str) => Number.isNaN(new Date(str).getTime()) ? '-' : new Date(str).toLocaleString()

  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: getDate }),
      makeColumn("окончание", "factEnd", { sorter: makeDateSorter('factEnd'), render: getDate })
    ]),
    makeNumericColumnPlanFact("Продолжительность", "period", filtersMinMax, makeFilterMinMaxFunction, getPrecision),
    makeNumericColumnPlanFact("МСП", "rateOfPenetration", filtersMinMax, makeFilterMinMaxFunction, getPrecision),
    makeNumericColumnPlanFact("Рейсовая скорость", "routeSpeed", filtersMinMax, makeFilterMinMaxFunction, getPrecision),
    makeNumericColumnPlanFact("НПВ, сут", "notProductiveTime", filtersMinMax, makeFilterMinMaxFunction, getPrecision),
    {
      title: "TVD",
      key: "tvd",
      render: (value) => <Button onClick={()=> {
        setSelectedWellId(value.id)
        setIsTVDModalVisible(true) 
      }}><LineChartOutlined /></Button>,
      align: 'center'
    },
    {
      title: "Операции",
      key: "operations",
      render: (value) => <Button onClick={()=> {
        setSelectedWellId(value.id)
        setIsOpsModalVisible(true) 
      }}><ProfileOutlined /></Button>,
      align: 'center'
    },
    {
      title: "Подрядчики",
      key: "companies",
      dataIndex: "companies",
      render: (item) => item?.map((company) => <Tag key={company.caption} color="blue">{company.caption}</Tag>) ?? '-',
    },
  ];

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

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

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