asb_cloud_front/src/pages/Cluster/ClusterWells.jsx

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

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

const filtersWellsType = []
const DAY_IN_MS = 1000 * 60 * 60 * 24
const ONLINE_DEADTIME = 600

export default function ClusterWells({statsWells}) {

  const [selectedWellId, setSelectedWellId] = useState(0)
  const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
  const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
  const [wellOperations, setWellOperations] = useState([])
  const [tableData, setTableData] = useState([])
  const [showLoader, setShowLoader] = useState(false)

  useEffect(() => {
    if (!isOpsModalVisible || selectedWellId <= 0) {
      setWellOperations([])
      return
    }
    invokeWebApiWrapperAsync(
      async () => {
        const operations = await getOperations(selectedWellId)
        setWellOperations(operations.operations)
      },
      setShowLoader,
      `Не удалось загрузить операции по скважине "${selectedWellId}"`,
    )
  }, [selectedWellId, isOpsModalVisible])

  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,
        lastTelemetryDate: well.lastTelemetryDate,
        idState: well.idState
      }
    })
  
    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}`} style={{display: 'flex', alignItems: 'center'}}>
          <PointerIcon
            color={item.idState === 1 ? 'black' : 'gray'}
            size={32}
            online={item.lastTelemetryDate && ((new Date()).getTime() - Date.parse(item.lastTelemetryDate)) / 1000 < ONLINE_DEADTIME}
            onlineColor={'currentColor'}
          />
          {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),
    makeNumericColumnPlanFact('МСП', 'rateOfPenetration', filtersMinMax, makeFilterMinMaxFunction),
    makeNumericColumnPlanFact('Рейсовая скорость', 'routeSpeed', filtersMinMax, makeFilterMinMaxFunction),
    makeNumericColumnPlanFact('НПВ, сут', 'notProductiveTime', filtersMinMax, makeFilterMinMaxFunction),
    {
      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}
      >
        <Tvd idWell={selectedWellId} />
      </Modal>

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