asb_cloud_front/src/pages/Documents/DocumentsTemplate.jsx

import {useState, useEffect} from "react"
import {Table, DatePicker, Button, ConfigProvider} from 'antd'
import locale from "antd/lib/locale/ru_RU"
import moment from 'moment'
import { FileService } from '../../services/api'
import { updateFromWebApiWrapperAsync, download, makePaginationObject} from '../../components/factory'
import UploadFileForm from '../../components/UploadFileForm'
import LoaderPortal from '../../components/LoaderPortal'

const pageSize = 12
const {RangePicker} = DatePicker;

export default function DocumentsTemplate({idCategory, idWell}) {
  const [page, setPage] = useState(1)
  const [range, setRange] = useState([])
  const [pagination, setPagination] = useState(null)
  const [files, setFiles] = useState([])
  const [showLoader, setShowLoader] = useState(false)

  const uploadUrl = `/api/well/${idWell}/files/`

  const handleFileNameCLick = async (_, row) => {    
    updateFromWebApiWrapperAsync(async ()=>{
      await download(`/api/well/${idWell}/files/${row.id}`)
    },
    setShowLoader,
    `Не удалось скачать файл ${row}`)
  }
  
  const columns = [
    {
        title: 'Документ',
        key: 'document',
        dataIndex: 'name',
        render: (name, row) => 
          <Button onClick={ev => handleFileNameCLick(ev, row)} download={name}>{name}</Button>
    },
    {
        title: 'Дата загрузки',
        key: 'uploadDate',
        dataIndex: 'uploadDate',
        render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
    },
    {
        title: 'Ф.И.О.',
        key: 'userName',
        dataIndex: 'userName',
    }
  ];

  const addKeysAndUpdateFiles = (items) =>{
    const mappedFiles = items?.map(fileInfo => ({key: fileInfo.id, begin: fileInfo.date, ...fileInfo}))
    setFiles(mappedFiles??[])
  }

  useEffect(() => {
    let begin = null
    let end = null
    if (range?.length > 1) {
      begin = range[0].toISOString()
      end = range[1].toISOString()
    }

    updateFromWebApiWrapperAsync(
      async ()=>{
        const paginatedFiles = await FileService.getFilesInfo(
          `${idWell}`,
          (page - 1) * pageSize,
          pageSize,
          idCategory,
          begin,
          end)
        if(!paginatedFiles)
          return
        addKeysAndUpdateFiles(paginatedFiles?.items)

        const newPagination = makePaginationObject(paginatedFiles)
        setPagination(newPagination)
      },
      setShowLoader,
      `Не удалось загрузить файлы по скважине "${idWell}"`)
  }, [idWell, range, page, idCategory])

  return (    
    <LoaderPortal show={showLoader}>
      <UploadFileForm
        url={uploadUrl}
        onUploadStart={()=>setShowLoader(true)}
        onUploadComplete={()=>setShowLoader(false)}
      />
      <div className='filter-group'>
        <h3 className='filter-group-heading'>Фильтр документов:</h3>
        <ConfigProvider locale={locale}>
            <RangePicker
                showTime
                onChange={setRange}
            />
        </ConfigProvider>
      </div>
      <Table
        columns={columns}
        dataSource={files}
        size={'small'}
        pagination={{
          ...pagination,
          showSizeChanger: false,
          onChange: (page) => setPage(page)}}
        rowKey={(record) => record.id}
      />
    </LoaderPortal>);
}