asb_cloud_front/src/components/Documents.jsx

import {Table, DatePicker, Form, Button, Upload, ConfigProvider} from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import MenuDocuments from "./MenuDocuments"
import { FileService } from '../services/api'
import {useState, useEffect} from "react"
import {useParams} from 'react-router-dom'
import notify from './notify'
import LoaderPortal from './LoaderPortal'
import locale from "antd/lib/locale/ru_RU"
import moment from 'moment'

const pageSize = 26
const {RangePicker} = DatePicker;

const columns = [
  {
      title: 'Документ',
      key: 'document',
      dataIndex: 'name',
  },
  {
      title: 'Дата загрузки',
      key: 'uploadDate',
      dataIndex: 'uploadDate',
      render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
  },
  {
      title: 'Ф.И.О.',
      key: 'userName',
      dataIndex: 'userName',
  }
];

export default function Documents({selectedFileCategory}) {
  let {id} = useParams()

  const [page, setPage] = useState(1)
  const [range, setRange] = useState([])
  const [pagination, setPagination] = useState(null)
  const [files, setFiles] = useState([])
  const [selectedFiles, setSelectedFiles] = useState([])

  const [loader, setLoader] = useState(false)

  const submitFileFormProps = {
    onChange({ file, fileList }) {
      if (file.status !== 'uploading') {
        setSelectedFiles(fileList)
      }
    }
  }

  const onChangeRange = (range) => {
    setRange(range)
  }

  const onFinish = (values) => {
    var fileList = values.fileInput.fileList

    if (fileList.length > 0)
    {
      const formData = new FormData();

      fileList.forEach(val => {
        formData.append('files', val.originFileObj)
      })

      fetch(`/api/files/${id}/files?idCategory=${selectedFileCategory}&idUser=${localStorage['userId']}`, {
        headers: {
          Authorization: 'Bearer ' + localStorage['token']
        },
        method: 'POST',
        body: formData
      })
      .then(async (response) => {
        // refresh component to upload new files в зависимоть useEffect какую-то переменную, чтоб дергался снова запрос на всю инфу о файлах
      });
    }
  }

  const onFinishFailed = (errorInfo) => {
    notify(`Не удалось отправить файлы по скважине "${id}".`, 'error')
  }

  useEffect(() => {
    const GetDocuments = async () => {
      setLoader(true)

      try {
        let begin = null
        let end = null
        if (range?.length > 1) {
          begin = range[0].toISOString()
          end = range[1].toISOString()
        }
        console.log(id)
        await FileService.getFilesInfo(
            `${id}`,
            (page - 1) * pageSize,
            pageSize,
            selectedFileCategory,
            begin,
            end
            ).then((paginatedFiles) => {
                setFiles(paginatedFiles?.items.map(f => {
                    return {
                        key: f.id,
                        begin: f.date,
                        ...f
                    }
                }))

                setPagination({
                    total: paginatedFiles?.count,
                    current: Math.floor(paginatedFiles?.skip / pageSize),
                })
            }
        )
      } catch (ex) {
        notify(`Не удалось загрузить файлы по скважине "${id}"`, 'error')
        console.log(ex)
      }
      setLoader(false)
    }
    GetDocuments()
  }, [id, selectedFileCategory, range])

  return (
    <div>
      <MenuDocuments/>
      <div className='filter-group'>
        <h3 className='filter-group-heading'>Фильтр документов:</h3>
        <ConfigProvider locale={locale}>
            <RangePicker
                showTime
                onChange={onChangeRange}
            />
        </ConfigProvider>
      </div>
      <LoaderPortal show={loader}></LoaderPortal>
      <div>&nbsp;</div>
      <Form
        name="DocumentsUploadForm"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <div style={{display: 'flex'}}>
          <Form.Item
            name="fileInput"
            rules={[{ required: true, message: 'Выберите файл' }]}
          >
            <Upload {...submitFileFormProps}>
              <Button icon={<UploadOutlined />}>Загрузить файл</Button>
            </Upload>
          </Form.Item>
          <Form.Item>
            <Button 
              type="primary" 
              htmlType="submit"
              disabled={selectedFiles.length === 0}
              style={{marginLeft: '10px'}}
            >
              Отправить
            </Button>
        </Form.Item>
      </div>
      </Form>
      <div>&nbsp;</div>
      <Table
        columns={columns}
        dataSource={files}
        size={'small'}
        pagination={{
          pageSize: pageSize,
          showSizeChanger: false,
          total: pagination?.total,
          current: page,
          onChange: (page) => setPage(page)
        }}
        rowKey={(record) => record.id}
      />
    </div>);
}