asb_cloud_front/src/pages/Documents/DocumentsTemplate.jsx

import {useState, useEffect} from "react"
import {Table, DatePicker, Button, Form} from 'antd'
import moment from 'moment'
import { FileService } from '../../services/api'
import { updateFromWebApiWrapperAsync, download, makePaginationObject} from '../../components/factory'
import UploadForm from '../../components/UploadForm'
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/?idCategory=${idCategory}`

  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}>
          <Form
            layout="vertical">
              <div className='d-flex'>
              <Form.Item
                label="Фильтр документов">
                <RangePicker
                    showTime
                    onChange={setRange}/>
              </Form.Item>
              <Form.Item
                label="Загрузка документов">
                <UploadForm
                  url={uploadUrl}
                  onUploadStart={()=>setShowLoader(true)}
                  onUploadComplete={()=>setShowLoader(false)}/>
              </Form.Item>
            </div>
          </Form>

      <Table
        columns={columns}
        dataSource={files}
        size={'small'}
        pagination={{
          ...pagination,
          showSizeChanger: false,
          onChange: (page) => setPage(page)}}
        rowKey={(record) => record.id}
      />
    </LoaderPortal>);
}