refactor DrillingProgram is based on DocumentsTemplate

src/pages/Documents/DocumentsTemplate.jsx

@@ -11,6 +11,7 @@ import { EditableTable, makePaginationObject } from "../../components/Table"
 import UploadForm from "../../components/UploadForm"
 import LoaderPortal from "../../components/LoaderPortal"
 import {UserView} from  '../../components/UserView'
+import {CompanyView} from  '../../components/CompanyView'
 
 const pageSize = 12
 const { RangePicker } = DatePicker
@@ -19,7 +20,7 @@ const { Search } = Input
 export default function DocumentsTemplate({ idCategory, idWell }) {
   const [page, setPage] = useState(1)
   const [filterDataRange, setFilterDataRange] = useState([])
-  const [filterCompaniesIds, setFilterCompany] = useState([])
+  const [filterCompanyName, setFilterCompanyName] = useState([])
   const [filterFileName, setFilterFileName] = useState('')
   const [pagination, setPagination] = useState(null)
   const [files, setFiles] = useState([])
@@ -47,7 +48,7 @@ export default function DocumentsTemplate({ idCategory, idWell }) {
   }
 
   const hanleCompanySearch = (value, _) => {
-    setFilterCompany(value)
+    setFilterCompanyName(value)
   }
 
   const hanleFileNameSearch = (value, _) => {
@@ -86,19 +87,10 @@ export default function DocumentsTemplate({ idCategory, idWell }) {
     {
       title: "Компания",
       key: "company",
-      dataIndex: "company",
+      render: (_, record) => <CompanyView company={record?.author?.company}/>
     },
   ]
 
-  const addKeysAndUpdateFiles = (items) => {
-    const mappedFiles = items?.map((fileInfo) => ({
-      key: fileInfo.id,
-      begin: fileInfo.date,
-      ...fileInfo,
-    }))
-    setFiles(mappedFiles ?? [])
-  }
-
   const update = () => {
     let begin = null
     let end = null
@@ -112,15 +104,20 @@ export default function DocumentsTemplate({ idCategory, idWell }) {
         const paginatedFiles = await FileService.getFilesInfo(
           idWell,          
           idCategory,
-          filterCompaniesIds,
+          filterCompanyName,
           filterFileName,
           begin,
           end,
           (page - 1) * pageSize,
           pageSize,
         )
-        if (!paginatedFiles) return
+
-        addKeysAndUpdateFiles(paginatedFiles?.items)
+        if (!paginatedFiles) 
+          return
+        
+        const filesInfos = paginatedFiles.items??[]
+
+        setFiles(filesInfos)
 
         const newPagination = makePaginationObject(paginatedFiles)
         setPagination(newPagination)
@@ -130,7 +127,7 @@ export default function DocumentsTemplate({ idCategory, idWell }) {
     )
   }
 
-  useEffect(update, [idWell, idCategory, page, filterDataRange, filterCompaniesIds, filterFileName])
+  useEffect(update, [idWell, idCategory, page, filterDataRange, filterCompanyName, filterFileName])
 
   const companies = [...new Set(files.map(file=>file.company))]
     .filter(company=>company)

src/pages/Documents/DrillingProgram.jsx

@@ -0,0 +1,26 @@
+import {Button} from 'antd'
+import { useState } from "react"
+import {invokeWebApiWrapperAsync, download} from '../../components/factory'
+import DocumentsTemplate from './DocumentsTemplate'
+import LoaderPortal from '../../components/LoaderPortal'
+
+const idFileCategoryDrillingProgramItems = 13;
+
+export default function DrillingProgram({idWell}) {
+  const [showLoader, setShowLoader] = useState(false)
+  
+  const urlDownloadProgram =`api/well/${idWell}/drillingProgram`
+
+  const downloadProgram = () => invokeWebApiWrapperAsync(async()=>{
+    await download(urlDownloadProgram)
+  }, 
+  setShowLoader,
+  "Не удалось загрузить программу бурения")
+
+  return(<LoaderPortal show={showLoader}>
+      <Button onClick={downloadProgram}>Сформировать программу бурения</Button>
+      <DocumentsTemplate
+        idWell={idWell}
+        idCategory={idFileCategoryDrillingProgramItems}/>
+    </LoaderPortal>)
+}

src/pages/DrillingProgram.jsx

@@ -1,67 +0,0 @@
-import {Table, Button} from 'antd'
-import {useEffect, useState} from 'react'
-import {invokeWebApiWrapperAsync, download} from '../components/factory'
-import { FileService } from '../services/api'
-import UploadForm from '../components/UploadForm'
-import LoaderPortal from '../components/LoaderPortal'
-
-const idFileCategoryDrillingProgramItems = 13;
-//const idFileCategoryDrillingProgram = 14;
-
-const FileInfo = (fileInfo) => {
-  return <div>{fileInfo?.name}</div>
-}
-
-export default function DrillingProgram({idWell}) {
-  const [data, setData] = useState([])
-  const [showLoader, setShowLoader] = useState(false)
-
-  const update = () => invokeWebApiWrapperAsync( async () => {
-    const files = await FileService.getInfosByCategory(idWell, idFileCategoryDrillingProgramItems)    
-    setData(files??[])
-	},setShowLoader,null)
-
-  useEffect(update, [idWell])
-
-  const columns = [
-    {
-      title: 'Файл',
-      dataIndex: 'fileInfo',
-      key: 'fileInfo',
-      render: (_, record) => <FileInfo  idCategory={record.key} fileInfo={record.fileInfo} onUploadComplete={update}/>
-    },
-    {
-      title: 'Автор',
-      key: 'owner',
-      render: (_,record) => record.fileInfo?.owner
-    },    
-    {
-      title: 'Дата загрузки',
-      key: 'uploadDate',
-      render: (_, record) => record.fileInfo ? new Date(record.fileInfo.uploadDate).toLocaleString() : ''
-    },
-  ]
-  
-  const urlDownloadProgram =`api/well/${idWell}/drillingProgram`
-
-  return(<>
-    <LoaderPortal show={showLoader}>
-      <Button 
-        type="primary" 
-        htmlType="button"
-        disabled={!data.some((el) => !!el.fileInfo)}
-        onClick={()=>{download(urlDownloadProgram)}}
-      >
-        Сформировать программу бурения
-      </Button>
-      <div>&nbsp;</div>
-      <Table 
-          bordered
-          dataSource={data} 
-          columns={columns} 
-          pagination={false}
-          />
-      <UploadForm idCategory={idFileCategoryDrillingProgramItems}/>
-    </LoaderPortal>
-  </>)
-}

src/pages/Well.jsx

@@ -15,7 +15,7 @@ import Documents from "./Documents";
 import Measure from "./Measure";
 import { makeMenuItems } from "./Documents/menuItems";
 import WellOperations from "./WellOperations";
-import DrillingProgram from "./DrillingProgram";
+import DrillingProgram from "./Documents/DrillingProgram";
 
 const { Content } = Layout;