asb_cloud_front/src/pages/Documents/DrillingProgram.jsx

import { useEffect, useState } from 'react'
import { FileExcelOutlined } from '@ant-design/icons'
import { Popconfirm, Button, Tooltip, Typography } from 'antd'
import { Flex } from '../../components/Grid'
import { Mark } from  '../../components/Mark'
import { UserView } from  '../../components/UserView'
import LoaderPortal from '../../components/LoaderPortal'
import { invokeWebApiWrapperAsync, download, formatBytes } from '../../components/factory'
import {DrillingProgramService, WellService} from '../../services/api'
import DocumentsTemplate from './DocumentsTemplate'

const idFileCategoryDrillingProgramItems = 13
const {Text} = Typography

export default function DrillingProgram({ idWell }) {
  const [downloadButtonEnabled, selDownloadButtonEnabled] = useState(false)
  const [showLoader, setShowLoader] = useState(false)
  const [tooltip, setTooltip] = useState('нет файлов для формирования')
  const [wellLabel, setWellLabel] = useState(`${idWell}`)
  const [childKey, setChildKey] = useState()
  const [lastUpdatedFile, setLastUpdatedFile] = useState()

  useEffect(() => invokeWebApiWrapperAsync(
    async () => {
      const well = await WellService.get(idWell)
      setWellLabel(well.caption ?? `${idWell}`)
    },
    setShowLoader,
    `Не удалось загрузить название скважины '${idWell}'`
  ), [idWell])

  const urlDownloadProgram = `/api/well/${idWell}/drillingProgram`

  const downloadProgram = () => invokeWebApiWrapperAsync(
    async () => await download(urlDownloadProgram),
    setShowLoader,
    'Не удалось загрузить программу бурения'
  )

  const openProgramPreview = () => invokeWebApiWrapperAsync(
    async() => {
      const filWebUrl = await DrillingProgramService.getOrCreateSharedUrl(idWell)
      if(filWebUrl && filWebUrl.length > 0)
        window.open(filWebUrl, '_blank')
      else
        throw new Error('Сервер вернул плохую ссылку')
    },
    setShowLoader,
    'Не удалось создать быстрый просмотр программы'
  )

  const filesUpdated = (files) => {
    if (!files || files.length === 0) {
      setTooltip('Нет файлов для формирования программы')
      selDownloadButtonEnabled(false)
      return
    }

    const isAllFilesAreExcel = files.every(fileInfo => fileInfo?.name.toLowerCase().endsWith('.xlsx'))
    const isAnyFileMarked = files.some(file => file?.fileMarks.some(m => m?.idMarkType === 1 && !m?.isDeleted))

    if (isAllFilesAreExcel && isAnyFileMarked) {
      setTooltip('Программа доступна для скачивания')
      selDownloadButtonEnabled(true)
    } else {
      setTooltip('Список файлов содержит недопустимые типы файлов')
    }
    const last = files.reduce((pre, cur) => pre.uploadDate > cur.uploadDate ? pre : cur)
    setLastUpdatedFile(last)
  }

  const customColumns = [
    {
      title: 'Метки',
      key: 'fileMarks',
      render: (_, record) => renderMarksColumn(record?.id, record?.fileMarks)
    },
  ]

  const renderMarksColumn=(idFile, marks)=>{
    const validMarks = marks?.filter(m => !(m?.isDeleted))
    if(validMarks?.length)
      return validMarks.map(mark => <Mark mark = {mark} onDelete={() => deleteMark(mark.id)}/>)

    return (
      <Popconfirm title={'Согласовать файл?'} onConfirm={() => addMarkToFile(idFile)}>
        <Button  type={'link'}>Согласовать</Button>
      </Popconfirm>
    )
  }

  const addMarkToFile = async (idFile) => {
    const mark = {
      idFile: idFile,
      idMarkType: 1,
      isDeleted: false,
      comment: '',
    }
    await DrillingProgramService.createFileMark(idWell, mark)
    selDownloadButtonEnabled(true)
    setChildKey(Date.now())
  }

  const deleteMark = async (idMark) => {
    await DrillingProgramService.deleteFileMark(idWell, idMark)
    setChildKey(Date.now())
  }

  const downloadButton = (
    <div>
      <span>Программа бурения</span>
      <Flex>
        <Tooltip title={tooltip}>
          <Button
            type={'primary'}
            onClick={downloadProgram}
            disabled={!downloadButtonEnabled}
          >
            Сформировать и скачать
          </Button>
        </Tooltip>
        <Tooltip title={'Просмотреть через GoogleDrive'}>
          <Popconfirm
            title={'Загрузить файл на GoogleDrive для просмотра?'}
            onConfirm={openProgramPreview}
            disabled={!downloadButtonEnabled}
          >
            <Button
              type={'link'}
              disabled={!downloadButtonEnabled}
            >
              <FileExcelOutlined />
              Программа бурения {wellLabel}.xlsx
            </Button>
          </Popconfirm>
        </Tooltip>
      </Flex>
    </div>
  )

  const lastUpdatedFileView = lastUpdatedFile &&
  <Text>
    <b>Последнее изменние:</b>
    &nbsp;'{lastUpdatedFile.name}'
    &nbsp;[{formatBytes(lastUpdatedFile.size)}]
    &nbsp;загружен: {new Date(lastUpdatedFile.uploadDate).toLocaleString()}
    &nbsp;автор: <UserView user={lastUpdatedFile.author}/>
  </Text>

  return (
    <LoaderPortal show={showLoader}>
      <DocumentsTemplate
        beforeTable={lastUpdatedFileView}
        idWell={idWell}
        idCategory={idFileCategoryDrillingProgramItems}
        accept={'.xlsx'}
        headerChild={downloadButton}
        onChange={filesUpdated}
        customColumns = {customColumns}
        key = {childKey}
      />
    </LoaderPortal>
  )
}