asb_cloud_front/src/pages/Documents/DrillingProgram.jsx

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

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 true &&
      <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 type="secondary">
    <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>)
}