asb_cloud_front/src/pages/Report.jsx

import React, { useState, useEffect } from "react";
import { useParams } from 'react-router-dom';
import {
  Form,
  DatePicker,
  Radio,
  Button,
  Select,
  Table
} from 'antd';
import 'moment/locale/ru';
import locale from 'antd/lib/locale/ru_RU';
import moment from "moment";
import {Subscribe} from '../services/signalr';
import notify from '../components/notify';
import LoaderPortal from '../components/LoaderPortal';
import { ReportService } from '../services/api';

const { RangePicker } = DatePicker;
const { Option } = Select;

let reportDatesRange = {
  from: moment("0001-01-01T00:00:00"),
  to: moment("9999-12-31T23:59:59.9999999")
}

const timePeriodNames = {
  600: '1 минута',
  86400:'1 день',
  604800:'1 неделя' 
}

const imgPaths = {
  '.pdf': '/images/pdf.png',
  '.las': '/images/las.png'
}


// Экспорт рендера
export default function Report(props) { 
  
  const [rangeDate, setRangeDate] = useState([moment().subtract(1,'days'), moment()])
  const [step, setStep] = useState(600)
  const [format, setFormat] = useState(0)
  const [reportProgress, setReportProgress] = useState(0.0)
  const [approxPages, setPagesCount] = useState(0)
  const [suitableReports, setSuitableReports] = useState([])
  const [loader, setLoader] = useState(false)
  let wellId = useParams().id;

  const columns = [
    {
      title: '',
      dataIndex: 'reportFormat',
      key: 'reportFormat',
      render: format => <img src={imgPaths[format]} width="50" alt={format}></img>
    },
    {
      title: 'Параметры отчета',
      dataIndex: 'reportParams',
      key: 'reportParams',
    },
    {
      title: 'Название отчета',
      dataIndex: 'reportName',
      key: 'reportName',
      render: name => <a href="" download={name}>{name}</a>
    },
  ];

  const handleReportProgress = (data) => {
    console.log('data: ' + data)
    if(data) {
      setReportProgress(data)
    }
    
    console.log('reportProgress: ' + reportProgress)
    //console.log(data)
  }

  const handleReportCreation = async (values) => {
    let begin = rangeDate[0].toISOString()
    let end = rangeDate[1].toISOString()
    let taskId = null;

    ReportService.createReport(wellId, values.step, values.format, begin, end)
            .then((data) => {
              if(data) {
                taskId = data
                let unSubscribeReportHub = Subscribe('hubs/reports', 'GetReportProgress', `Report_${taskId}`, handleReportProgress)
                //unSubscribeReportHub()
              }
            })
            .catch(error => {
              notify(`Не удалось создать отчет по скважине (${wellId}) c 
              ${rangeDate[0].format("DD.MM.YYYY hh:mm:ss")} по 
              ${rangeDate[1].format("DD.MM.YYYY hh:mm:ss")}`, 'error')
              console.error(error)
            })

  }; 

  function disabledDate(current) {
    return reportDatesRange.From  >= current || reportDatesRange.To  <= current;
  }

  useEffect(()=>{
    async function getRepostSizeAsync() {
      let begin = rangeDate[0].toISOString()
      let end = rangeDate[1].toISOString()
      try {
        let approxPagesResponse = await ReportService.getReportSize(wellId, step, format, begin, end)
        setPagesCount(approxPagesResponse)
      } catch(error) {
        notify(`Не удалось получить предварительный размер отчета c 
                ${rangeDate[0].format("DD.MM.YYYY hh:mm:ss")} по 
                ${rangeDate[1].format("DD.MM.YYYY hh:mm:ss")}`, 'error')
        console.error(error)
      } finally {
        setLoader(false)
      }
    }

    getRepostSizeAsync()
  },[rangeDate, step, format])

  useEffect(()=>{
    async function getSuitableReportsAsync() {
      let begin = rangeDate[0].toISOString()
      let end = rangeDate[1].toISOString()
      try {
        setLoader(true)
        let suitableReportsResponse = await ReportService.getSuitableReportsNames(wellId, step, format, begin, end)
        let suitableReports = suitableReportsResponse.map(value => {
          return { 
            key: value.id,
            reportFormat: value.format,
            reportParams: `Дата создания: ${new Date(value.date).toLocaleDateString()}, 
                          Данные от ${new Date(value.begin).toLocaleString()} 
                          до ${new Date(value.end).toLocaleString()}, 
                          Шаг: ${timePeriodNames[value.step]}`,
            reportName: value.name
          }
        })
        setSuitableReports(suitableReports)
      } catch(error) {
        notify(`Не удалось получить подходящие по параметрам отчеты c 
                ${rangeDate[0].format("DD.MM.YYYY hh:mm:ss")} по 
                ${rangeDate[1].format("DD.MM.YYYY hh:mm:ss")}`, 'error')
        console.error(error)
      } finally {
        setLoader(false)
      }
    }

    getSuitableReportsAsync()
  },[rangeDate, step, format])

  useEffect(()=>{
    async function getDatesRange() {
      let response = await ReportService.getReportsDateRange(wellId)
      reportDatesRange.from = moment(response.from)
      reportDatesRange.to = moment(response.to)
    }

    getDatesRange()
    //return ()=>{uns && uns()}
  },[])

  return (<>
    <Form
      layout="vertical"
      name="reportForm"
      initialValues={{ remember: true }}
      onFinish={handleReportCreation}
      style={{marginTop:'20px'}}
    >
      <div style={{display: 'flex'}}>
        <Form.Item
          label="Выбор за период времени и расширение файла"
          name="period"
          initialValue = { [rangeDate[0], rangeDate[1]] }
        >
          <RangePicker
            disabledDate={disabledDate}
            allowClear={false}
            onCalendarChange = { (dates, dateStrings, info) => {
                setRangeDate([moment(dateStrings[0]), moment(dateStrings[1])])
              }
            } 
            locale={locale} 
            showTime 
          />
        </Form.Item>
        <Form.Item
          label="Шаг графиков"
          name="step"
          initialValue = {step}
          style={{marginLeft: '30px'}}
        >
          <Select
            onChange={(value) => setStep(value)}
            style={{ width: 100 }}
          >
            <Option value={600}>1 минута</Option>
            <Option value={86400}>1 день</Option>
            <Option value={604800}>1 неделя</Option>
          </Select>
        </Form.Item>
        <Form.Item
            label="Формат отчета"
            name="format"
            initialValue = {format}
            onChange={(e) => setFormat(e.target.value)}
            style={{marginLeft: '30px'}}
        >
            <Radio.Group>
              <Radio.Button value={0}>PDF</Radio.Button>
              <Radio.Button value={1}>LAS</Radio.Button>
            </Radio.Group>
        </Form.Item>
        <Button 
          type="primary" 
          htmlType="submit"
          className="submit_button"
          style={{marginTop: '30px', marginLeft: '30px'}}>
          <span>Получить рапорт</span>
          <span style={{marginLeft: '5px'}}>
            ({approxPages} стр.)
          </span> 
          <span style={{display: approxPages > 100 ? 'inline' : 'none' ,marginLeft: '5px'}}>
            !!!
          </span> 
        </Button>
      </div>
    </Form>
    <br/>
    <h3>
      Отчеты с аналогичными параметрами, доступные для скачивания:
    </h3> <br/>
    
    <LoaderPortal show={loader}>
      <Table dataSource={suitableReports} columns={columns} />
    </LoaderPortal>
  </>
  )
}