CF2-8: Добавлено получение отчетов с сервера и оповещение о прогрессе получения

src/pages/Report.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useParams } from 'react-router-dom';
 import {
   Form,
@@ -6,7 +6,9 @@ import {
   Radio,
   Button,
   Select,
-  Table
+  Table,
+  Progress, 
+  notification
 } from 'antd';
 import 'moment/locale/ru';
 import locale from 'antd/lib/locale/ru_RU';
@@ -42,10 +44,11 @@ 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 = [
@@ -64,41 +67,73 @@ export default function Report(props) {
       title: 'Название отчета',
       dataIndex: 'reportName',
       key: 'reportName',
-      render: name => <a href="" download={name}>{name}</a>
+      render: name => <a onClick={event => getReportFile(event, name)} download={name}>{name}</a>
     },
   ];
   
-  const handleReportProgress = (data) => {
+  const ReportCreationNotify = ({progressData}) => {
-    console.log('data: ' + data)
+    progressData = progressData ?? {progress: 0.0, operation: 'Создание отчета', reportName: ''} 
-    if(data) {
+
-      setReportProgress(data)
+    return (
+    <>
+        <Progress percent={ progressData.progress } />
+        <br />
+        <span> { progressData.operation } </span>
+        <br />
+        <a onClick={event => {getReportFile(event, progressData.reportName)}}
+          download={progressData.reportName}> 
+          { progressData.reportName } 
+        </a>
+    </>
+    )
   }
 
-    console.log('reportProgress: ' + reportProgress)
+  const getReportFile = async (event, reportFileName) => {
-    //console.log(data)
+    try {
+      const element = event.target
+      let reportFile = await ReportService.getReport(wellId, reportFileName)
+      let reportUrl = URL.createObjectURL(reportFile)
+      element.href = reportUrl
+    } 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.log(error)
+    }
   }
 
   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)
+    try {
-            .then((data) => {
+      const taskId = await ReportService.createReport(wellId, values.step, values.format, begin, end)
-              if(data) {
+      if(!taskId)
-                taskId = data
+        return 
-                let unSubscribeReportHub = Subscribe('hubs/reports', 'GetReportProgress', `Report_${taskId}`, handleReportProgress)
+
-                //unSubscribeReportHub()
+      const handleReportProgress = (progressData) => {
+        if(progressData) {
+          notification.open({
+            key: taskId,
+            message: 'Создание отчета:',
+            description: <ReportCreationNotify progressData={progressData}></ReportCreationNotify>,
+            duration: 0
+          });
+
+          if (progressData.reportName.length)
+            unSubscribeReportHub()
         }
-            })
+      }
-            .catch(error => {
+
+      const unSubscribeReportHub = Subscribe('hubs/reports', 'GetReportProgress', `Report_${taskId}`, handleReportProgress)
+    }
+    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)
+      console.log(error)
-            })
+    }
-
+  }
-  }; 
 
   function disabledDate(current) {
     return reportDatesRange.From  >= current || reportDatesRange.To  <= current;
@@ -115,7 +150,7 @@ export default function Report(props) {
         notify(`Не удалось получить предварительный размер отчета c 
                 ${rangeDate[0].format("DD.MM.YYYY hh:mm:ss")} по 
                 ${rangeDate[1].format("DD.MM.YYYY hh:mm:ss")}`, 'error')
-        console.error(error)
+        console.log(error)
       } finally {
         setLoader(false)
       }
@@ -147,7 +182,7 @@ export default function Report(props) {
         notify(`Не удалось получить подходящие по параметрам отчеты c 
                 ${rangeDate[0].format("DD.MM.YYYY hh:mm:ss")} по 
                 ${rangeDate[1].format("DD.MM.YYYY hh:mm:ss")}`, 'error')
-        console.error(error)
+        console.log(error)
       } finally {
         setLoader(false)
       }
@@ -164,20 +199,19 @@ export default function Report(props) {
     }
 
     getDatesRange()
-    //return ()=>{uns && uns()}
   },[])
 
   return (<>
+    <div className="w-100 mt-20px">
       <Form
         layout="vertical"
         name="reportForm"
         initialValues={{ remember: true }}
         onFinish={handleReportCreation}
-      style={{marginTop:'20px'}}
       >
-      <div style={{display: 'flex'}}>
+        <div className={'d-flex'}>
           <Form.Item
-          label="Выбор за период времени и расширение файла"
+            label="Диапазон дат отчета"
             name="period"
             initialValue = { [rangeDate[0], rangeDate[1]] }
           >
@@ -196,11 +230,10 @@ export default function Report(props) {
             label="Шаг графиков"
             name="step"
             initialValue = {step}
-          style={{marginLeft: '30px'}}
+            className="ml-30px"
           >
             <Select
               onChange={(value) => setStep(value)}
-            style={{ width: 100 }}
             >
               <Option value={600}>1 минута</Option>
               <Option value={86400}>1 день</Option>
@@ -212,7 +245,7 @@ export default function Report(props) {
               name="format"
               initialValue = {format}
               onChange={(e) => setFormat(e.target.value)}
-            style={{marginLeft: '30px'}}
+              className="ml-30px"
           >
               <Radio.Group>
                 <Radio.Button value={0}>PDF</Radio.Button>
@@ -222,18 +255,18 @@ export default function Report(props) {
           <Button 
             type="primary" 
             htmlType="submit"
-          className="submit_button"
+            className="mt-30px ml-30px">
-          style={{marginTop: '30px', marginLeft: '30px'}}>
             <span>Получить рапорт</span>
-          <span style={{marginLeft: '5px'}}>
+            <span className={'ml-5px'}>
               ({approxPages} стр.)
             </span> 
-          <span style={{display: approxPages > 100 ? 'inline' : 'none' ,marginLeft: '5px'}}>
+            <span style={{display: approxPages > 100 ? 'inline' : 'none'}} className={'ml-5px'}>
               !!!
             </span> 
           </Button>
         </div>
       </Form>
+    </div>
     <br/>
     <h3>
       Отчеты с аналогичными параметрами, доступные для скачивания:

src/styles/App.less

@@ -16,6 +16,14 @@ html {
   height: 100%;
 }
 
+.mt-30px {
+  margin-top: 30px;
+}
+
+.ml-30px {
+  margin-left: 30px;
+}
+
 .login_page{
   position: absolute;
   height:100%;

src/styles/index.css

@@ -11,6 +11,37 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.d-flex {
+  display: flex;
+}
+
+.d-inline {
+  display: inline;
+}
+
+.d-none {
+  display: none;
+}
+
+.w-100 {
+  width: 100%
+}
+
+.mt-20px {
+  margin-top: 20px;
+}
+
+.ml-5px {
+  margin-left: 5px;
+}
+
+.ml-30px {
+  margin-left: 30px;
+}
+
+.vertical-align-center {
+  vertical-align: center;
+}
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',