fix reports

src/components/factory.ts

@@ -96,4 +96,21 @@ export const formatBytes = (bytes:number) => {
     return `${(bytes/1024).toFixed(2)}kb`
   else
     return `${(bytes/1024/1024).toFixed(2)}Mb`
+}
+
+export const formatTimespan = (seconds:number) => {
+  const days = Math.floor(seconds / 86400)
+  seconds = seconds % 86400
+  const hours = Math.floor(seconds / 3600)
+  seconds = seconds % 3600
+  const minutes = Math.floor(seconds / 60)
+  seconds = seconds % 60
+  let formatedTimespan = ''
+  if(days > 0)
+    formatedTimespan += days + ' '
+
+  formatedTimespan += hours.toString().padStart(2,'0') + ':' + 
+    minutes.toString().padStart(2,'0') + ':' + 
+    seconds.toString().padStart(2,'0')
+  return formatedTimespan
 }

src/pages/Report/ReportCreationNotify.jsx

@@ -1,28 +1,34 @@
-import { Progress } from "antd"
+import { Progress, Button } from "antd"
 import { download, notify } from "../../components/factory"
 
-export const getReportFile = async (idWell, reportName) => {
+export const getReportFile = async (fileInfo) => {
   try {
-    await download(`/api/well/${idWell}/report/${reportName}`, reportName)
+    await download(`/api/well/${fileInfo.idWell}/files/${fileInfo.id}`)
   } catch (error) {
-    notify(`Не удалось скачать отчет ${reportName} по скважине (${idWell})`, 'error')
+    notify(`Не удалось скачать отчет ${fileInfo.name} по скважине (${fileInfo.idWell})`, 'error')
     console.log(error)
   }
 }
 
-export const ReportCreationNotify = ({idWell, progressData}) => {
-  progressData = progressData ?? {progress: 0.0, operation: 'Создание отчета', reportName: ''} 
+export const ReportCreationNotify = ({progressData}) => {
+  progressData = progressData ?? {progress: 0.0, operation: 'Создание отчета'}
 
+  let downloadButton = null
+  if (progressData.file)
+    downloadButton = <Button      
+      type="link"
+      onClick={_ => {getReportFile(progressData.file)}}
+      download={progressData.file.name}>
+        {progressData.file.name}
+      </Button>
+  
+  const progressText = `${progressData.operation} стр ${progressData.currentPage} из ${progressData.totalPages}`
   return (
   <>
       <Progress percent={ progressData.progress } />
-      <br />
-      <span> { progressData.operation } </span>
-      <br />
-      <button onClick={event => {getReportFile(idWell, progressData.reportName)}}
-        download={progressData.reportName}>
-        { progressData.reportName } 
-      </button>
+      <br/>
+      <span>{progressText}</span>
+      {downloadButton}
   </>
   )
 }

src/pages/Report/Reports.jsx

@@ -0,0 +1,91 @@
+import { useState, useEffect } from "react"
+import { Table, makeDateSorter, makeNumericSorter, formatDate} from "../../components/Table"
+import { Button, Tooltip } from "antd"
+import { FilePdfOutlined, FileTextOutlined} from '@ant-design/icons'
+import { ReportService } from "../../services/api"
+import { invokeWebApiWrapperAsync, download, formatTimespan} from "../../components/factory"
+import LoaderPortal from "../../components/LoaderPortal"
+import moment from "moment"
+
+const imgPaths = {
+  ".pdf": <FilePdfOutlined/>,
+  ".las": <FileTextOutlined />,
+}
+
+const handleFileDownload = async (idWell, idFile) => {
+  invokeWebApiWrapperAsync(
+    async () => {
+      await download(`/api/well/${idWell}/files/${idFile}`)
+    },
+    null,
+    `Не удалось скачать файл ${idFile}`
+  )
+}
+
+const columns = [  
+  {
+    title: "Название",
+    dataIndex: "name",
+    key: "name",
+    render: (name, report) => (
+      <Button
+        type="link"
+        icon={imgPaths[report.format]}
+        onClick={(_) => handleFileDownload(report.idWell, report.id)}
+        download={name}
+      >
+        {name}
+      </Button>
+    ),
+  },
+  {
+    title: <Tooltip title="Дата формирования">Сформирован</Tooltip>,
+    dataIndex: "date",
+    key: "date",
+    sorter: makeDateSorter('date'),
+    render: date=>moment(date).format(formatDate),
+  },  
+  {
+    title: <Tooltip title="Дата начала периода рапорта">С</Tooltip>,
+    dataIndex: "begin",
+    key: "begin",
+    sorter: makeDateSorter('begin'),
+    render: date=>moment(date).format(formatDate),
+  }, 
+  {
+    title: <Tooltip title="Дата окончания периода рапорта">По</Tooltip>,
+    dataIndex: "end",
+    key: "end",    
+    sorter: makeDateSorter('end'),
+    render: date=>moment(date).format(formatDate),
+  }, 
+  {
+    title: <Tooltip title="шаг сетки графиков">шаг, сек</Tooltip>,
+    dataIndex: "step",
+    key: "step",
+    
+    sorter: makeNumericSorter('step'),
+    
+    render: step => formatTimespan(step)
+  },
+]
+
+export const Reports = ({idWell}) => {
+  const [reports, setReports] = useState([])
+  const [showLoader, setShowLoader] = useState(false)
+
+  useEffect(()=>invokeWebApiWrapperAsync(async()=>{
+    const reportsResponse = await ReportService.getAllReportsNamesByWell(idWell)
+    const reports = reportsResponse.map(r => ({...r, key: r.id?? r.name?? r.date}))
+    setReports(reports)
+  },setShowLoader), [idWell])
+
+  return (
+    <LoaderPortal show={showLoader}>
+      <Table 
+        size='small' bordered
+        columns={columns}
+        dataSource={reports}
+        pagination={{pageSize:13}}/>
+    </LoaderPortal>)
+}

src/pages/Report/index.jsx

@@ -1,20 +1,13 @@
 import { useState, useEffect } from "react"
-import {
-  Form,
-  DatePicker,
-  Radio,
-  Button,
-  Select,
-  Table,
-  notification,
-} from "antd"
+import { DatePicker, Radio, Button, Select, notification } from "antd"
 import "moment/locale/ru"
 import moment from "moment"
 import { Subscribe } from "../../services/signalr"
 import LoaderPortal from "../../components/LoaderPortal"
 import { ReportService } from "../../services/api"
-import { ReportCreationNotify, getReportFile } from "./ReportCreationNotify"
-import { invokeWebApiWrapperAsync, notify} from "../../components/factory"
+import { ReportCreationNotify } from "./ReportCreationNotify"
+import { invokeWebApiWrapperAsync, notify } from "../../components/factory"
+import { Reports } from "./Reports"
 
 const { RangePicker } = DatePicker
 const { Option } = Select
@@ -32,20 +25,20 @@ const timePeriodNames = [
   { label: "1 неделя", value: 604800 },
 ]
 
-const imgPaths = {
-  ".pdf": "/images/pdf.png",
-  ".las": "/images/las.png",
-}
-
 const dateTimeFormat = "DD.MM.YYYY hh:mm:ss"
 
 export default function Report({ idWell }) {
-  const [aviableDateRange, setAviableDateRange] = useState([moment(),moment()])
-  const [filterDateRange, setFilterDateRange] = useState([moment().subtract(1, "days"),moment(),])
+  const [aviableDateRange, setAviableDateRange] = useState([
+    moment(),
+    moment(),
+  ])
+  const [filterDateRange, setFilterDateRange] = useState([
+    moment().subtract(1, "days").startOf("day"),
+    moment().startOf("day"),
+  ])
   const [step, setStep] = useState(timePeriodNames[2].value)
   const [format, setFormat] = useState(0)
   const [pagesCount, setPagesCount] = useState(0)
-  const [suitableReports, setSuitableReports] = useState([])
   const [showLoader, setShowLoader] = useState(false)
 
   const periodOptions = timePeriodNames.map((item) => (
@@ -54,47 +47,15 @@ export default function Report({ idWell }) {
     </Option>
   ))
 
-  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: (reportName) => (
-        <Button
-          onClick={(_) => getReportFile(idWell, reportName)}
-          download={reportName}
-        >
-          {reportName}
-        </Button>
-      ),
-    },
-  ]
-
-  const handleReportCreation = async (values) => {
+  const handleReportCreation = async () => {
     let begin = filterDateRange[0].toISOString()
     let end = filterDateRange[1].toISOString()
 
     try {
-      const idUser = localStorage["userId"]
-
       const taskId = await ReportService.createReport(
         idWell,
-        idUser,
-        values.step,
-        values.format,
+        step,
+        format,
         begin,
         end
       )
@@ -111,9 +72,11 @@ export default function Report({ idWell }) {
               ></ReportCreationNotify>
             ),
             duration: 0,
+            onClose: unSubscribeReportHub,
           })
 
-          if (progressData.reportName?.length) unSubscribeReportHub()
+          if (progressData.file)
+            unSubscribeReportHub()
         }
       }
 
@@ -137,110 +100,94 @@ export default function Report({ idWell }) {
   const disabledDate = (current) => {
     return current < aviableDateRange[0] || current > aviableDateRange[1]
   }
-  
-  const updateSuitableReports = (suitableReports) => {
-    const reports = suitableReports?.map(report => {
-      const creationDate = new Date(report.begin).toLocaleString()
-      const begin = new Date(report.begin).toLocaleString()
-      const end = new Date(report.end).toLocaleString()
-      const step = timePeriodNames[report.step]
-      const reportParams = `Дата создания: ${creationDate}, Данные от ${begin} до ${end}, Шаг: ${step}`
-      return {
-        key: report.id,
-        reportFormat: report.format,
-        reportParams: reportParams,
-        reportName: report.name,
-      }})
-    setSuitableReports(reports??[])
-  }
 
-  const updateAviableDatesRange = (aviableDatesRange) =>{
-    const datesRange = [
-      moment(aviableDatesRange.from),
-      moment(aviableDatesRange.to)
-    ] 
+  useEffect(
+    () =>
+      invokeWebApiWrapperAsync(async () => {
+        const datesRangeResponse = await ReportService.getReportsDateRange(
+          idWell
+        )
+        const datesRange = [
+          moment(datesRangeResponse.from),
+          moment(datesRangeResponse.to),
+        ]
+        setAviableDateRange(datesRange)
 
-    let from = moment(aviableDatesRange.to)
-    from = from.subtract(1, "days")
-    if (from < datesRange[0])
-      from = datesRange[0]
+        let from = moment(datesRangeResponse.to)
+        from = from.subtract(1, "days")
+        if (from < datesRange[0]) from = datesRange[0]
 
-    const filterDateDefaults = [from, moment(aviableDatesRange.to)]
-    setFilterDateRange(filterDateDefaults)
-    setAviableDateRange(datesRange)
-  }
+        const filterDateDefaults = [
+          from.startOf("day"),
+          moment(datesRangeResponse.to).startOf("day"),
+        ]
+        setFilterDateRange(filterDateDefaults)
+      }, setShowLoader),
+    [idWell]
+  )
 
-  useEffect(() => invokeWebApiWrapperAsync(async() => {
-    const aviableDatesRange = await ReportService.getReportsDateRange(idWell)
-    updateAviableDatesRange(aviableDatesRange)    
-    const suitableReports = await ReportService.getSuitableReportsNames(idWell, 4294967295, 3, '0001-01-01T00:00:00.000Z', '9999-01-01T00:00:00.000Z')
-    updateSuitableReports(suitableReports)
-  }), [idWell])
-
-  useEffect(() => invokeWebApiWrapperAsync(async() => {
-      if(!filterDateRange || filterDateRange.length < 2)
-        return
-      const begin = filterDateRange[0].toISOString()
-      const end = filterDateRange[1].toISOString()
-      const pagesCount = await ReportService.getReportSize(idWell, step, format, begin, end)
-      setPagesCount(pagesCount)
-    },
-    setShowLoader,
-    `Не удалось получить предварительные параметры отчета c 
+  useEffect(
+    () =>
+      invokeWebApiWrapperAsync(
+        async () => {
+          if (!filterDateRange || filterDateRange.length < 2) return
+          const begin = filterDateRange[0].toISOString()
+          const end = filterDateRange[1].toISOString()
+          const pagesCount = await ReportService.getReportSize(
+            idWell,
+            step,
+            format,
+            begin,
+            end
+          )
+          setPagesCount(pagesCount)
+        },
+        setShowLoader,
+        `Не удалось получить предварительные параметры отчета c 
                 ${filterDateRange[0].format(dateTimeFormat)} по 
                 ${filterDateRange[1].format(dateTimeFormat)}`
-    ), [filterDateRange, step, format, idWell])
+      ),
+    [filterDateRange, step, format, idWell]
+  )
 
   return (
-    <LoaderPortal show={showLoader}>
-      <div className="w-100 mt-20px">
-        <Form
-          layout="vertical"
-          name="reportForm"
-          initialValues={{ remember: true }}
-          onFinish={handleReportCreation}
-        >
-          <div className={"d-flex"}>
-            <Form.Item
-              label="Диапазон дат отчета"
-              name="period"
-              initialValue={filterDateRange}
-            >
-              <RangePicker
-                disabledDate={disabledDate}
-                allowClear={false}
-                onCalendarChange={(dates) => {
-                  setFilterDateRange(dates)
-                }}
-                value = {filterDateRange}
-                showTime
-              />
-            </Form.Item>
-            <Form.Item
-              label="Шаг графиков"
-              name="step"
-              initialValue={step}
-              className="ml-30px"
-            >
-              <Select onChange={setStep}>{periodOptions}</Select>
-            </Form.Item>
-            <Form.Item
-              label="Формат отчета"
-              name="format"
-              initialValue={format}
+    <div>
+      <LoaderPortal show={showLoader}>
+        <div className="w-100 mt-20px mb-20px d-flex">
+          <div>
+            <div>Диапазон дат отчета</div>
+            <RangePicker
+              disabledDate={disabledDate}
+              allowClear={false}
+              onCalendarChange={setFilterDateRange}
+              showTime
+              value={filterDateRange}
+            />
+          </div>
+          <div className="ml-30px">
+            <div>Шаг графиков</div>
+            <Select style={{ width: "8rem" }} 
+              onChange={e=>{
+                setStep(e)
+              }}
+              value={step}>
+              {periodOptions}
+            </Select>
+          </div>
+
+          <div className="ml-30px">
+            <div>Формат отчета</div>
+            <Radio.Group
               onChange={(e) => setFormat(e.target.value)}
-              className="ml-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="mt-30px ml-30px"
+              value={format}
             >
+              <Radio.Button value={0}>PDF</Radio.Button>
+              <Radio.Button value={1}>LAS</Radio.Button>
+            </Radio.Group>
+          </div>
+          <div className="ml-30px">
+            <div>&nbsp;</div>
+            <Button type="primary" onClick={handleReportCreation}>
               <span>Получить рапорт</span>
               <span className={"ml-5px"}>({pagesCount} стр.)</span>
               <span
@@ -251,13 +198,9 @@ export default function Report({ idWell }) {
               </span>
             </Button>
           </div>
-        </Form>
-      </div>
-      <br />
-      <h3>Отчеты с аналогичными параметрами, доступные для скачивания:</h3>{" "}
-      <br />
-      
-      <Table dataSource={suitableReports} columns={columns} />
-    </LoaderPortal>
+        </div>
+      </LoaderPortal>
+      <Reports idWell={idWell} />
+    </div>
   )
 }